From 57aaae1cf57f2244aca8adeffabdc9d2bc48c33f Mon Sep 17 00:00:00 2001 From: nasubi916 Date: Sat, 6 Apr 2024 23:24:52 +0900 Subject: [PATCH] created /blogs --- panda/css/conditions.mjs | 34 + panda/css/css.d.ts | 9 + panda/css/css.mjs | 45 + panda/css/cva.d.ts | 6 + panda/css/cva.mjs | 85 + panda/css/cx.d.ts | 5 + panda/css/cx.mjs | 15 + panda/css/index.d.ts | 5 + panda/css/index.mjs | 4 + panda/css/sva.d.ts | 4 + panda/css/sva.mjs | 38 + panda/helpers.mjs | 326 + panda/jsx/aspect-ratio.d.ts | 10 + panda/jsx/aspect-ratio.mjs | 14 + panda/jsx/bleed.d.ts | 10 + panda/jsx/bleed.mjs | 14 + panda/jsx/box.d.ts | 10 + panda/jsx/box.mjs | 14 + panda/jsx/center.d.ts | 10 + panda/jsx/center.mjs | 14 + panda/jsx/circle.d.ts | 10 + panda/jsx/circle.mjs | 14 + panda/jsx/container.d.ts | 10 + panda/jsx/container.mjs | 14 + panda/jsx/cq.d.ts | 10 + panda/jsx/cq.mjs | 14 + panda/jsx/divider.d.ts | 10 + panda/jsx/divider.mjs | 14 + panda/jsx/factory-helper.mjs | 22 + panda/jsx/factory.d.ts | 3 + panda/jsx/factory.mjs | 80 + panda/jsx/flex.d.ts | 10 + panda/jsx/flex.mjs | 14 + panda/jsx/float.d.ts | 10 + panda/jsx/float.mjs | 14 + panda/jsx/grid-item.d.ts | 10 + panda/jsx/grid-item.mjs | 14 + panda/jsx/grid.d.ts | 10 + panda/jsx/grid.mjs | 14 + panda/jsx/hstack.d.ts | 10 + panda/jsx/hstack.mjs | 14 + panda/jsx/index.d.ts | 25 + panda/jsx/index.mjs | 23 + panda/jsx/is-valid-prop.d.ts | 11 + panda/jsx/is-valid-prop.mjs | 17 + panda/jsx/link-box.d.ts | 10 + panda/jsx/link-box.mjs | 14 + panda/jsx/link-overlay.d.ts | 10 + panda/jsx/link-overlay.mjs | 14 + panda/jsx/spacer.d.ts | 10 + panda/jsx/spacer.mjs | 14 + panda/jsx/square.d.ts | 10 + panda/jsx/square.mjs | 14 + panda/jsx/stack.d.ts | 10 + panda/jsx/stack.mjs | 14 + panda/jsx/visually-hidden.d.ts | 10 + panda/jsx/visually-hidden.mjs | 14 + panda/jsx/vstack.d.ts | 10 + panda/jsx/vstack.mjs | 14 + panda/jsx/wrap.d.ts | 10 + panda/jsx/wrap.mjs | 14 + panda/patterns/aspect-ratio.d.ts | 21 + panda/patterns/aspect-ratio.mjs | 38 + panda/patterns/bleed.d.ts | 22 + panda/patterns/bleed.mjs | 24 + panda/patterns/box.d.ts | 21 + panda/patterns/box.mjs | 15 + panda/patterns/center.d.ts | 21 + panda/patterns/center.mjs | 21 + panda/patterns/circle.d.ts | 21 + panda/patterns/circle.mjs | 25 + panda/patterns/container.d.ts | 21 + panda/patterns/container.mjs | 21 + panda/patterns/cq.d.ts | 22 + panda/patterns/cq.mjs | 21 + panda/patterns/divider.d.ts | 23 + panda/patterns/divider.mjs | 25 + panda/patterns/flex.d.ts | 27 + panda/patterns/flex.mjs | 26 + panda/patterns/float.d.ts | 24 + panda/patterns/float.mjs | 52 + panda/patterns/grid-item.d.ts | 26 + panda/patterns/grid-item.mjs | 25 + panda/patterns/grid.d.ts | 25 + panda/patterns/grid.mjs | 27 + panda/patterns/hstack.d.ts | 22 + panda/patterns/hstack.mjs | 24 + panda/patterns/index.d.ts | 22 + panda/patterns/index.mjs | 21 + panda/patterns/link-box.d.ts | 21 + panda/patterns/link-box.mjs | 22 + panda/patterns/link-overlay.d.ts | 21 + panda/patterns/link-overlay.mjs | 27 + panda/patterns/spacer.d.ts | 21 + panda/patterns/spacer.mjs | 21 + panda/patterns/square.d.ts | 21 + panda/patterns/square.mjs | 24 + panda/patterns/stack.d.ts | 24 + panda/patterns/stack.mjs | 24 + panda/patterns/visually-hidden.d.ts | 21 + panda/patterns/visually-hidden.mjs | 18 + panda/patterns/vstack.d.ts | 22 + panda/patterns/vstack.mjs | 24 + panda/patterns/wrap.d.ts | 25 + panda/patterns/wrap.mjs | 25 + panda/tokens/index.d.ts | 9 + panda/tokens/index.mjs | 1888 +++ panda/tokens/tokens.d.ts | 63 + panda/types/composition.d.ts | 111 + panda/types/conditions.d.ts | 272 + panda/types/csstype.d.ts | 21298 ++++++++++++++++++++++++++ panda/types/global.d.ts | 19 + panda/types/index.d.ts | 8 + panda/types/jsx.d.ts | 52 + panda/types/parts.d.ts | 8 + panda/types/pattern.d.ts | 74 + panda/types/prop-type.d.ts | 234 + panda/types/recipe.d.ts | 169 + panda/types/selectors.d.ts | 59 + panda/types/static-css.d.ts | 51 + panda/types/style-props.d.ts | 7457 +++++++++ panda/types/system-types.d.ts | 89 + src/components/blogs/blog.tsx | 0 src/components/blogs/index.tsx | 0 src/pages/blogs/+Page.tsx | 17 + src/pages/blogs/@id/+Page.tsx | 0 126 files changed, 34183 insertions(+) create mode 100644 panda/css/conditions.mjs create mode 100644 panda/css/css.d.ts create mode 100644 panda/css/css.mjs create mode 100644 panda/css/cva.d.ts create mode 100644 panda/css/cva.mjs create mode 100644 panda/css/cx.d.ts create mode 100644 panda/css/cx.mjs create mode 100644 panda/css/index.d.ts create mode 100644 panda/css/index.mjs create mode 100644 panda/css/sva.d.ts create mode 100644 panda/css/sva.mjs create mode 100644 panda/helpers.mjs create mode 100644 panda/jsx/aspect-ratio.d.ts create mode 100644 panda/jsx/aspect-ratio.mjs create mode 100644 panda/jsx/bleed.d.ts create mode 100644 panda/jsx/bleed.mjs create mode 100644 panda/jsx/box.d.ts create mode 100644 panda/jsx/box.mjs create mode 100644 panda/jsx/center.d.ts create mode 100644 panda/jsx/center.mjs create mode 100644 panda/jsx/circle.d.ts create mode 100644 panda/jsx/circle.mjs create mode 100644 panda/jsx/container.d.ts create mode 100644 panda/jsx/container.mjs create mode 100644 panda/jsx/cq.d.ts create mode 100644 panda/jsx/cq.mjs create mode 100644 panda/jsx/divider.d.ts create mode 100644 panda/jsx/divider.mjs create mode 100644 panda/jsx/factory-helper.mjs create mode 100644 panda/jsx/factory.d.ts create mode 100644 panda/jsx/factory.mjs create mode 100644 panda/jsx/flex.d.ts create mode 100644 panda/jsx/flex.mjs create mode 100644 panda/jsx/float.d.ts create mode 100644 panda/jsx/float.mjs create mode 100644 panda/jsx/grid-item.d.ts create mode 100644 panda/jsx/grid-item.mjs create mode 100644 panda/jsx/grid.d.ts create mode 100644 panda/jsx/grid.mjs create mode 100644 panda/jsx/hstack.d.ts create mode 100644 panda/jsx/hstack.mjs create mode 100644 panda/jsx/index.d.ts create mode 100644 panda/jsx/index.mjs create mode 100644 panda/jsx/is-valid-prop.d.ts create mode 100644 panda/jsx/is-valid-prop.mjs create mode 100644 panda/jsx/link-box.d.ts create mode 100644 panda/jsx/link-box.mjs create mode 100644 panda/jsx/link-overlay.d.ts create mode 100644 panda/jsx/link-overlay.mjs create mode 100644 panda/jsx/spacer.d.ts create mode 100644 panda/jsx/spacer.mjs create mode 100644 panda/jsx/square.d.ts create mode 100644 panda/jsx/square.mjs create mode 100644 panda/jsx/stack.d.ts create mode 100644 panda/jsx/stack.mjs create mode 100644 panda/jsx/visually-hidden.d.ts create mode 100644 panda/jsx/visually-hidden.mjs create mode 100644 panda/jsx/vstack.d.ts create mode 100644 panda/jsx/vstack.mjs create mode 100644 panda/jsx/wrap.d.ts create mode 100644 panda/jsx/wrap.mjs create mode 100644 panda/patterns/aspect-ratio.d.ts create mode 100644 panda/patterns/aspect-ratio.mjs create mode 100644 panda/patterns/bleed.d.ts create mode 100644 panda/patterns/bleed.mjs create mode 100644 panda/patterns/box.d.ts create mode 100644 panda/patterns/box.mjs create mode 100644 panda/patterns/center.d.ts create mode 100644 panda/patterns/center.mjs create mode 100644 panda/patterns/circle.d.ts create mode 100644 panda/patterns/circle.mjs create mode 100644 panda/patterns/container.d.ts create mode 100644 panda/patterns/container.mjs create mode 100644 panda/patterns/cq.d.ts create mode 100644 panda/patterns/cq.mjs create mode 100644 panda/patterns/divider.d.ts create mode 100644 panda/patterns/divider.mjs create mode 100644 panda/patterns/flex.d.ts create mode 100644 panda/patterns/flex.mjs create mode 100644 panda/patterns/float.d.ts create mode 100644 panda/patterns/float.mjs create mode 100644 panda/patterns/grid-item.d.ts create mode 100644 panda/patterns/grid-item.mjs create mode 100644 panda/patterns/grid.d.ts create mode 100644 panda/patterns/grid.mjs create mode 100644 panda/patterns/hstack.d.ts create mode 100644 panda/patterns/hstack.mjs create mode 100644 panda/patterns/index.d.ts create mode 100644 panda/patterns/index.mjs create mode 100644 panda/patterns/link-box.d.ts create mode 100644 panda/patterns/link-box.mjs create mode 100644 panda/patterns/link-overlay.d.ts create mode 100644 panda/patterns/link-overlay.mjs create mode 100644 panda/patterns/spacer.d.ts create mode 100644 panda/patterns/spacer.mjs create mode 100644 panda/patterns/square.d.ts create mode 100644 panda/patterns/square.mjs create mode 100644 panda/patterns/stack.d.ts create mode 100644 panda/patterns/stack.mjs create mode 100644 panda/patterns/visually-hidden.d.ts create mode 100644 panda/patterns/visually-hidden.mjs create mode 100644 panda/patterns/vstack.d.ts create mode 100644 panda/patterns/vstack.mjs create mode 100644 panda/patterns/wrap.d.ts create mode 100644 panda/patterns/wrap.mjs create mode 100644 panda/tokens/index.d.ts create mode 100644 panda/tokens/index.mjs create mode 100644 panda/tokens/tokens.d.ts create mode 100644 panda/types/composition.d.ts create mode 100644 panda/types/conditions.d.ts create mode 100644 panda/types/csstype.d.ts create mode 100644 panda/types/global.d.ts create mode 100644 panda/types/index.d.ts create mode 100644 panda/types/jsx.d.ts create mode 100644 panda/types/parts.d.ts create mode 100644 panda/types/pattern.d.ts create mode 100644 panda/types/prop-type.d.ts create mode 100644 panda/types/recipe.d.ts create mode 100644 panda/types/selectors.d.ts create mode 100644 panda/types/static-css.d.ts create mode 100644 panda/types/style-props.d.ts create mode 100644 panda/types/system-types.d.ts create mode 100644 src/components/blogs/blog.tsx create mode 100644 src/components/blogs/index.tsx create mode 100644 src/pages/blogs/+Page.tsx create mode 100644 src/pages/blogs/@id/+Page.tsx diff --git a/panda/css/conditions.mjs b/panda/css/conditions.mjs new file mode 100644 index 0000000..1baf45c --- /dev/null +++ b/panda/css/conditions.mjs @@ -0,0 +1,34 @@ +import { withoutSpace } from '../helpers.mjs'; + +const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,base" +const conditions = new Set(conditionsStr.split(',')) + +export function isCondition(value){ + return conditions.has(value) || /^@|&|&$/.test(value) +} + +const underscoreRegex = /^_/ +const conditionsSelectorRegex = /&|@/ + +export function finalizeConditions(paths){ + return paths.map((path) => { + if (conditions.has(path)){ + return path.replace(underscoreRegex, '') + } + + if (conditionsSelectorRegex.test(path)){ + return `[${withoutSpace(path.trim())}]` + } + + return path + })} + + export function sortConditions(paths){ + return paths.sort((a, b) => { + const aa = isCondition(a) + const bb = isCondition(b) + if (aa && !bb) return 1 + if (!aa && bb) return -1 + return 0 + }) + } \ No newline at end of file diff --git a/panda/css/css.d.ts b/panda/css/css.d.ts new file mode 100644 index 0000000..6372382 --- /dev/null +++ b/panda/css/css.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +import type { SystemStyleObject } from '../types/index'; + +interface CssFunction { + (...styles: Array): string + raw: (...styles: Array) => SystemStyleObject +} + +export declare const css: CssFunction; \ No newline at end of file diff --git a/panda/css/css.mjs b/panda/css/css.mjs new file mode 100644 index 0000000..c76d6b5 --- /dev/null +++ b/panda/css/css.mjs @@ -0,0 +1,45 @@ +import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'; +import { sortConditions, finalizeConditions } from './conditions.mjs'; + +const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:object,objectFit:object,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,outlineWidth:ring/ringWidth,outlineColor:ring/ringColor,outline:ring/1,outlineOffset:ring/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide,divideStyle:divide,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:font,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text,textDecoration:text-decor,textDecorationColor:text-decor,textEmphasisColor:text-emphasis,textDecorationStyle:decoration,textDecorationThickness:decoration,textUnderlineOffset:underline-offset,textTransform:text,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text,verticalAlign:align,wordBreak:break,textWrap:text,truncate:truncate,lineClamp:clamp,listStyleType:list,listStylePosition:list,listStyleImage:list-img,backgroundPosition:bg/bgPosition,backgroundPositionX:bg-x/bgPositionX,backgroundPositionY:bg-y/bgPositionY,backgroundAttachment:bg/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFrom:from,gradientTo:to,gradientVia:via,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationDelay:animation-delay,transformOrigin:origin,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap,scrollSnapStop:snap,scrollSnapType:snap,scrollSnapStrictness:strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-size-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle" + +const classNameByProp = new Map() +const shorthands = new Map() +utilities.split(',').forEach((utility) => { + const [prop, meta] = utility.split(':') + const [className, ...shorthandList] = meta.split('/') + classNameByProp.set(prop, className) + if (shorthandList.length) { + shorthandList.forEach((shorthand) => { + shorthands.set(shorthand === '1' ? className : shorthand, prop) + }) + } +}) + +const resolveShorthand = (prop) => shorthands.get(prop) || prop + +const context = { + + conditions: { + shift: sortConditions, + finalize: finalizeConditions, + breakpoints: { keys: ["base","sm","md","lg","xl","2xl"] } + }, + utility: { + + transform: (prop, value) => { + const key = resolveShorthand(prop) + const propKey = classNameByProp.get(key) || hypenateProperty(key) + return { className: `${propKey}_${withoutSpace(value)}` } + }, + hasShorthand: true, + toHash: (path, hashFn) => hashFn(path.join(":")), + resolveShorthand: resolveShorthand, + } +} + +const cssFn = createCss(context) +export const css = (...styles) => cssFn(mergeCss(...styles)) +css.raw = (...styles) => mergeCss(...styles) + +export const { mergeCss, assignCss } = createMergeCss(context) \ No newline at end of file diff --git a/panda/css/cva.d.ts b/panda/css/cva.d.ts new file mode 100644 index 0000000..ff43325 --- /dev/null +++ b/panda/css/cva.d.ts @@ -0,0 +1,6 @@ +/* eslint-disable */ +import type { RecipeCreatorFn } from '../types/recipe'; + +export declare const cva: RecipeCreatorFn + +export type { RecipeVariant, RecipeVariantProps } from '../types/recipe'; \ No newline at end of file diff --git a/panda/css/cva.mjs b/panda/css/cva.mjs new file mode 100644 index 0000000..2f44fe4 --- /dev/null +++ b/panda/css/cva.mjs @@ -0,0 +1,85 @@ +import { compact, mergeProps, memo, splitProps, uniq } from '../helpers.mjs'; +import { css, mergeCss } from './css.mjs'; + +const defaults = (conf) => ({ + base: {}, + variants: {}, + defaultVariants: {}, + compoundVariants: [], + ...conf, +}) + +export function cva(config) { + const { base, variants, defaultVariants, compoundVariants } = defaults(config) + + function resolve(props = {}) { + const computedVariants = { ...defaultVariants, ...compact(props) } + let variantCss = { ...base } + for (const [key, value] of Object.entries(computedVariants)) { + if (variants[key]?.[value]) { + variantCss = mergeCss(variantCss, variants[key][value]) + } + } + const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants) + return mergeCss(variantCss, compoundVariantCss) + } + + function merge(__cva) { + const override = defaults(__cva.config) + const variantKeys = uniq(__cva.variantKeys, Object.keys(variants)) + return cva({ + base: mergeCss(base, override.base), + variants: Object.fromEntries( + variantKeys.map((key) => [key, mergeCss(variants[key], override.variants[key])]), + ), + defaultVariants: mergeProps(defaultVariants, override.defaultVariants), + compoundVariants: [...compoundVariants, ...override.compoundVariants], + }) + } + + function cvaFn(props) { + return css(resolve(props)) + } + + const variantKeys = Object.keys(variants) + + function splitVariantProps(props) { + return splitProps(props, variantKeys) + } + + const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)])) + + return Object.assign(memo(cvaFn), { + __cva__: true, + variantMap, + variantKeys, + raw: resolve, + config, + merge, + splitVariantProps, + }) +} + +export function getCompoundVariantCss(compoundVariants, variantMap) { + let result = {} + compoundVariants.forEach((compoundVariant) => { + const isMatching = Object.entries(compoundVariant).every(([key, value]) => { + if (key === 'css') return true + + const values = Array.isArray(value) ? value : [value] + return values.some((value) => variantMap[key] === value) + }) + + if (isMatching) { + result = mergeCss(result, compoundVariant.css) + } + }) + + return result +} + +export function assertCompoundVariant(name, compoundVariants, variants, prop) { + if (compoundVariants.length > 0 && typeof variants?.[prop] === 'object') { + throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`) + } +} diff --git a/panda/css/cx.d.ts b/panda/css/cx.d.ts new file mode 100644 index 0000000..892c90c --- /dev/null +++ b/panda/css/cx.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +type Argument = string | boolean | null | undefined + +/** Conditionally join classNames into a single string */ +export declare function cx(...args: Argument[]): string \ No newline at end of file diff --git a/panda/css/cx.mjs b/panda/css/cx.mjs new file mode 100644 index 0000000..81bbdae --- /dev/null +++ b/panda/css/cx.mjs @@ -0,0 +1,15 @@ +function cx() { + let str = '', + i = 0, + arg + + for (; i < arguments.length; ) { + if ((arg = arguments[i++]) && typeof arg === 'string') { + str && (str += ' ') + str += arg + } + } + return str +} + +export { cx } \ No newline at end of file diff --git a/panda/css/index.d.ts b/panda/css/index.d.ts new file mode 100644 index 0000000..50a581d --- /dev/null +++ b/panda/css/index.d.ts @@ -0,0 +1,5 @@ +/* eslint-disable */ +export * from './css'; +export * from './cx'; +export * from './cva'; +export * from './sva'; \ No newline at end of file diff --git a/panda/css/index.mjs b/panda/css/index.mjs new file mode 100644 index 0000000..f2392bd --- /dev/null +++ b/panda/css/index.mjs @@ -0,0 +1,4 @@ +export * from './css.mjs'; +export * from './cx.mjs'; +export * from './cva.mjs'; +export * from './sva.mjs'; \ No newline at end of file diff --git a/panda/css/sva.d.ts b/panda/css/sva.d.ts new file mode 100644 index 0000000..f97c42a --- /dev/null +++ b/panda/css/sva.d.ts @@ -0,0 +1,4 @@ +/* eslint-disable */ +import type { SlotRecipeCreatorFn } from '../types/recipe'; + +export declare const sva: SlotRecipeCreatorFn \ No newline at end of file diff --git a/panda/css/sva.mjs b/panda/css/sva.mjs new file mode 100644 index 0000000..f50e4b8 --- /dev/null +++ b/panda/css/sva.mjs @@ -0,0 +1,38 @@ +import { getSlotRecipes, memo, splitProps } from '../helpers.mjs'; +import { cva } from './cva.mjs'; +import { cx } from './cx.mjs'; + +const slotClass = (className, slot) => className + '__' + slot + +export function sva(config) { + const slots = Object.entries(getSlotRecipes(config)).map(([slot, slotCva]) => [slot, cva(slotCva)]) + + function svaFn(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cx(cvaFn(props), config.className && slotClass(config.className, slot))]) + return Object.fromEntries(result) + } + + function raw(props) { + const result = slots.map(([slot, cvaFn]) => [slot, cvaFn.raw(props)]) + return Object.fromEntries(result) + } + + const variants = config.variants ?? {}; + const variantKeys = Object.keys(variants); + + function splitVariantProps(props) { + return splitProps(props, variantKeys); + } + + const variantMap = Object.fromEntries( + Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]) + ); + + return Object.assign(memo(svaFn), { + __cva__: false, + raw, + variantMap, + variantKeys, + splitVariantProps, + }) +} \ No newline at end of file diff --git a/panda/helpers.mjs b/panda/helpers.mjs new file mode 100644 index 0000000..53a6dcd --- /dev/null +++ b/panda/helpers.mjs @@ -0,0 +1,326 @@ +// src/assert.ts +function isObject(value) { + return typeof value === "object" && value != null && !Array.isArray(value); +} + +// src/compact.ts +function compact(value) { + return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0)); +} + +// src/condition.ts +var isBaseCondition = (v) => v === "base"; +function filterBaseConditions(c) { + return c.slice().filter((v) => !isBaseCondition(v)); +} + +// src/hash.ts +function toChar(code) { + return String.fromCharCode(code + (code > 25 ? 39 : 97)); +} +function toName(code) { + let name = ""; + let x; + for (x = Math.abs(code); x > 52; x = x / 52 | 0) + name = toChar(x % 52) + name; + return toChar(x % 52) + name; +} +function toPhash(h, x) { + let i = x.length; + while (i) + h = h * 33 ^ x.charCodeAt(--i); + return h; +} +function toHash(value) { + return toName(toPhash(5381, value) >>> 0); +} + +// src/important.ts +var importantRegex = /\s*!(important)?/i; +function isImportant(value) { + return typeof value === "string" ? importantRegex.test(value) : false; +} +function withoutImportant(value) { + return typeof value === "string" ? value.replace(importantRegex, "").trim() : value; +} +function withoutSpace(str) { + return typeof str === "string" ? str.replaceAll(" ", "_") : str; +} + +// src/memo.ts +var memo = (fn) => { + const cache = /* @__PURE__ */ new Map(); + const get = (...args) => { + const key = JSON.stringify(args); + if (cache.has(key)) { + return cache.get(key); + } + const result = fn(...args); + cache.set(key, result); + return result; + }; + return get; +}; + +// src/merge-props.ts +function mergeProps(...sources) { + const objects = sources.filter(Boolean); + return objects.reduce((prev, obj) => { + Object.keys(obj).forEach((key) => { + const prevValue = prev[key]; + const value = obj[key]; + if (isObject(prevValue) && isObject(value)) { + prev[key] = mergeProps(prevValue, value); + } else { + prev[key] = value; + } + }); + return prev; + }, {}); +} + +// src/walk-object.ts +var isNotNullish = (element) => element != null; +function walkObject(target, predicate, options = {}) { + const { stop, getKey } = options; + function inner(value, path = []) { + if (isObject(value) || Array.isArray(value)) { + const result = {}; + for (const [prop, child] of Object.entries(value)) { + const key = getKey?.(prop, child) ?? prop; + const childPath = [...path, key]; + if (stop?.(value, childPath)) { + return predicate(value, path); + } + const next = inner(child, childPath); + if (isNotNullish(next)) { + result[key] = next; + } + } + return result; + } + return predicate(value, path); + } + return inner(target); +} +function mapObject(obj, fn) { + if (Array.isArray(obj)) + return obj.map((value) => fn(value)); + if (!isObject(obj)) + return fn(obj); + return walkObject(obj, (value) => fn(value)); +} + +// src/normalize-style-object.ts +function toResponsiveObject(values, breakpoints) { + return values.reduce( + (acc, current, index) => { + const key = breakpoints[index]; + if (current != null) { + acc[key] = current; + } + return acc; + }, + {} + ); +} +function normalizeStyleObject(styles, context, shorthand = true) { + const { utility, conditions } = context; + const { hasShorthand, resolveShorthand } = utility; + return walkObject( + styles, + (value) => { + return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value; + }, + { + stop: (value) => Array.isArray(value), + getKey: shorthand ? (prop) => hasShorthand ? resolveShorthand(prop) : prop : void 0 + } + ); +} + +// src/classname.ts +var fallbackCondition = { + shift: (v) => v, + finalize: (v) => v, + breakpoints: { keys: [] } +}; +var sanitize = (value) => typeof value === "string" ? value.replaceAll(/[\n\s]+/g, " ") : value; +function createCss(context) { + const { utility, hash, conditions: conds = fallbackCondition } = context; + const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join("-"); + const hashFn = (conditions, className) => { + let result; + if (hash) { + const baseArray = [...conds.finalize(conditions), className]; + result = formatClassName(utility.toHash(baseArray, toHash)); + } else { + const baseArray = [...conds.finalize(conditions), formatClassName(className)]; + result = baseArray.join(":"); + } + return result; + }; + return memo(({ base, ...styles } = {}) => { + const styleObject = Object.assign(styles, base); + const normalizedObject = normalizeStyleObject(styleObject, context); + const classNames = /* @__PURE__ */ new Set(); + walkObject(normalizedObject, (value, paths) => { + const important = isImportant(value); + if (value == null) + return; + const [prop, ...allConditions] = conds.shift(paths); + const conditions = filterBaseConditions(allConditions); + const transformed = utility.transform(prop, withoutImportant(sanitize(value))); + let className = hashFn(conditions, transformed.className); + if (important) + className = `${className}!`; + classNames.add(className); + }); + return Array.from(classNames).join(" "); + }); +} +function compactStyles(...styles) { + return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0); +} +function createMergeCss(context) { + function resolve(styles) { + const allStyles = compactStyles(...styles); + if (allStyles.length === 1) + return allStyles; + return allStyles.map((style) => normalizeStyleObject(style, context)); + } + function mergeCss(...styles) { + return mergeProps(...resolve(styles)); + } + function assignCss(...styles) { + return Object.assign({}, ...resolve(styles)); + } + return { mergeCss: memo(mergeCss), assignCss }; +} + +// src/hypenate-property.ts +var wordRegex = /([A-Z])/g; +var msRegex = /^ms-/; +var hypenateProperty = memo((property) => { + if (property.startsWith("--")) + return property; + return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase(); +}); + +// src/is-css-function.ts +var fns = ["min", "max", "clamp", "calc"]; +var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`); +var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v); + +// src/is-css-unit.ts +var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%"; +var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`; +var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`); +var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v); + +// src/is-css-var.ts +var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v); + +// src/pattern-fns.ts +var patternFns = { + map: mapObject, + isCssFunction, + isCssVar, + isCssUnit +}; +var getPatternStyles = (pattern, styles) => { + if (!pattern.defaultValues) + return styles; + const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues; + return Object.assign({}, defaults, compact(styles)); +}; + +// src/slot.ts +var getSlotRecipes = (recipe = {}) => { + const init = (slot) => ({ + className: [recipe.className, slot].filter(Boolean).join("__"), + base: recipe.base?.[slot] ?? {}, + variants: {}, + defaultVariants: recipe.defaultVariants ?? {}, + compoundVariants: recipe.compoundVariants ? getSlotCompoundVariant(recipe.compoundVariants, slot) : [] + }); + const slots = recipe.slots ?? []; + const recipeParts = slots.map((slot) => [slot, init(slot)]); + for (const [variantsKey, variantsSpec] of Object.entries(recipe.variants ?? {})) { + for (const [variantKey, variantSpec] of Object.entries(variantsSpec)) { + recipeParts.forEach(([slot, slotRecipe]) => { + slotRecipe.variants[variantsKey] ??= {}; + slotRecipe.variants[variantsKey][variantKey] = variantSpec[slot] ?? {}; + }); + } + } + return Object.fromEntries(recipeParts); +}; +var getSlotCompoundVariant = (compoundVariants, slotName) => compoundVariants.filter((compoundVariant) => compoundVariant.css[slotName]).map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] })); + +// src/split-props.ts +function splitProps(props, ...keys) { + const descriptors = Object.getOwnPropertyDescriptors(props); + const dKeys = Object.keys(descriptors); + const split = (k) => { + const clone = {}; + for (let i = 0; i < k.length; i++) { + const key = k[i]; + if (descriptors[key]) { + Object.defineProperty(clone, key, descriptors[key]); + delete descriptors[key]; + } + } + return clone; + }; + const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key)); + return keys.map(fn).concat(split(dKeys)); +} + +// src/uniq.ts +var uniq = (...items) => items.filter(Boolean).reduce((acc, item) => Array.from(/* @__PURE__ */ new Set([...acc, ...item])), []); +export { + compact, + createCss, + createMergeCss, + filterBaseConditions, + getPatternStyles, + getSlotCompoundVariant, + getSlotRecipes, + hypenateProperty, + isBaseCondition, + isObject, + mapObject, + memo, + mergeProps, + patternFns, + splitProps, + toHash, + uniq, + walkObject, + withoutSpace +}; + + + +// src/normalize-html.ts +var htmlProps = ["htmlSize", "htmlTranslate", "htmlWidth", "htmlHeight"]; +function convert(key) { + return htmlProps.includes(key) ? key.replace("html", "").toLowerCase() : key; +} +function normalizeHTMLProps(props) { + return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value])); +} +normalizeHTMLProps.keys = htmlProps; +export { + normalizeHTMLProps +}; + + +export function __spreadValues(a, b) { + return { ...a, ...b } +} + +export function __objRest(source, exclude) { + return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key))) +} \ No newline at end of file diff --git a/panda/jsx/aspect-ratio.d.ts b/panda/jsx/aspect-ratio.d.ts new file mode 100644 index 0000000..c057d1a --- /dev/null +++ b/panda/jsx/aspect-ratio.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { AspectRatioProperties } from '../patterns/aspect-ratio'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface AspectRatioProps extends AspectRatioProperties, DistributiveOmit, keyof AspectRatioProperties | 'aspectRatio'> {} + + +export declare const AspectRatio: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/aspect-ratio.mjs b/panda/jsx/aspect-ratio.mjs new file mode 100644 index 0000000..d0bdaaf --- /dev/null +++ b/panda/jsx/aspect-ratio.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs'; +import { styled } from './factory.mjs'; + +export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) { + const [patternProps, restProps] = splitProps(props, ["ratio"]) + +const styleProps = getAspectRatioStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/bleed.d.ts b/panda/jsx/bleed.d.ts new file mode 100644 index 0000000..9eca599 --- /dev/null +++ b/panda/jsx/bleed.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { BleedProperties } from '../patterns/bleed'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface BleedProps extends BleedProperties, DistributiveOmit, keyof BleedProperties > {} + + +export declare const Bleed: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/bleed.mjs b/panda/jsx/bleed.mjs new file mode 100644 index 0000000..dd52487 --- /dev/null +++ b/panda/jsx/bleed.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getBleedStyle } from '../patterns/bleed.mjs'; +import { styled } from './factory.mjs'; + +export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) { + const [patternProps, restProps] = splitProps(props, ["inline","block"]) + +const styleProps = getBleedStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/box.d.ts b/panda/jsx/box.d.ts new file mode 100644 index 0000000..958962d --- /dev/null +++ b/panda/jsx/box.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { BoxProperties } from '../patterns/box'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface BoxProps extends BoxProperties, DistributiveOmit, keyof BoxProperties > {} + + +export declare const Box: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/box.mjs b/panda/jsx/box.mjs new file mode 100644 index 0000000..3d30ed5 --- /dev/null +++ b/panda/jsx/box.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getBoxStyle } from '../patterns/box.mjs'; +import { styled } from './factory.mjs'; + +export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) { + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getBoxStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/center.d.ts b/panda/jsx/center.d.ts new file mode 100644 index 0000000..fd6d615 --- /dev/null +++ b/panda/jsx/center.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { CenterProperties } from '../patterns/center'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface CenterProps extends CenterProperties, DistributiveOmit, keyof CenterProperties > {} + + +export declare const Center: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/center.mjs b/panda/jsx/center.mjs new file mode 100644 index 0000000..a7bdff7 --- /dev/null +++ b/panda/jsx/center.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getCenterStyle } from '../patterns/center.mjs'; +import { styled } from './factory.mjs'; + +export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) { + const [patternProps, restProps] = splitProps(props, ["inline"]) + +const styleProps = getCenterStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/circle.d.ts b/panda/jsx/circle.d.ts new file mode 100644 index 0000000..3afa95f --- /dev/null +++ b/panda/jsx/circle.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { CircleProperties } from '../patterns/circle'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface CircleProps extends CircleProperties, DistributiveOmit, keyof CircleProperties > {} + + +export declare const Circle: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/circle.mjs b/panda/jsx/circle.mjs new file mode 100644 index 0000000..65b32b1 --- /dev/null +++ b/panda/jsx/circle.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getCircleStyle } from '../patterns/circle.mjs'; +import { styled } from './factory.mjs'; + +export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) { + const [patternProps, restProps] = splitProps(props, ["size"]) + +const styleProps = getCircleStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/container.d.ts b/panda/jsx/container.d.ts new file mode 100644 index 0000000..10b9df2 --- /dev/null +++ b/panda/jsx/container.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { ContainerProperties } from '../patterns/container'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface ContainerProps extends ContainerProperties, DistributiveOmit, keyof ContainerProperties > {} + + +export declare const Container: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/container.mjs b/panda/jsx/container.mjs new file mode 100644 index 0000000..46848cf --- /dev/null +++ b/panda/jsx/container.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getContainerStyle } from '../patterns/container.mjs'; +import { styled } from './factory.mjs'; + +export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) { + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getContainerStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/cq.d.ts b/panda/jsx/cq.d.ts new file mode 100644 index 0000000..5f00f13 --- /dev/null +++ b/panda/jsx/cq.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { CqProperties } from '../patterns/cq'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface CqProps extends CqProperties, DistributiveOmit, keyof CqProperties > {} + + +export declare const Cq: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/cq.mjs b/panda/jsx/cq.mjs new file mode 100644 index 0000000..d2e86d4 --- /dev/null +++ b/panda/jsx/cq.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getCqStyle } from '../patterns/cq.mjs'; +import { styled } from './factory.mjs'; + +export const Cq = /* @__PURE__ */ forwardRef(function Cq(props, ref) { + const [patternProps, restProps] = splitProps(props, ["name","type"]) + +const styleProps = getCqStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/divider.d.ts b/panda/jsx/divider.d.ts new file mode 100644 index 0000000..110d8c0 --- /dev/null +++ b/panda/jsx/divider.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { DividerProperties } from '../patterns/divider'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface DividerProps extends DividerProperties, DistributiveOmit, keyof DividerProperties > {} + + +export declare const Divider: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/divider.mjs b/panda/jsx/divider.mjs new file mode 100644 index 0000000..f67226d --- /dev/null +++ b/panda/jsx/divider.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getDividerStyle } from '../patterns/divider.mjs'; +import { styled } from './factory.mjs'; + +export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) { + const [patternProps, restProps] = splitProps(props, ["orientation","thickness","color"]) + +const styleProps = getDividerStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/factory-helper.mjs b/panda/jsx/factory-helper.mjs new file mode 100644 index 0000000..52605e9 --- /dev/null +++ b/panda/jsx/factory-helper.mjs @@ -0,0 +1,22 @@ +import { isCssProperty } from './is-valid-prop.mjs'; + +export const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop) + +export const composeShouldForwardProps = (tag, shouldForwardProp) => + tag.__shouldForwardProps__ && shouldForwardProp + ? (propName) => tag.__shouldForwardProps__(propName) && shouldForwardProp(propName) + : shouldForwardProp + +export const composeCvaFn = (cvaA, cvaB) => { + if (cvaA && !cvaB) return cvaA + if (!cvaA && cvaB) return cvaB + if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB) + const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.') + TypeError.captureStackTrace?.(error) + throw error +} + +export const getDisplayName = (Component) => { + if (typeof Component === 'string') return Component + return Component?.displayName || Component?.name || 'Component' +} \ No newline at end of file diff --git a/panda/jsx/factory.d.ts b/panda/jsx/factory.d.ts new file mode 100644 index 0000000..875a0fb --- /dev/null +++ b/panda/jsx/factory.d.ts @@ -0,0 +1,3 @@ +/* eslint-disable */ +import type { Styled } from '../types/jsx'; +export declare const styled: Styled \ No newline at end of file diff --git a/panda/jsx/factory.mjs b/panda/jsx/factory.mjs new file mode 100644 index 0000000..c6a1f00 --- /dev/null +++ b/panda/jsx/factory.mjs @@ -0,0 +1,80 @@ +import { createElement, forwardRef, useMemo } from 'react' +import { css, cx, cva } from '../css/index.mjs'; +import { defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName } from './factory-helper.mjs'; +import { splitProps, normalizeHTMLProps } from '../helpers.mjs'; +import { isCssProperty } from './is-valid-prop.mjs'; + +function styledFn(Dynamic, configOrCva = {}, options = {}) { + const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva) + + const forwardFn = options.shouldForwardProp || defaultShouldForwardProp + const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys) + + const defaultProps = Object.assign( + options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {}, + options.defaultProps, + ) + + const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn) + const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp) + const __base__ = Dynamic.__base__ || Dynamic + + const StyledComponent = /* @__PURE__ */ forwardRef(function StyledComponent(props, ref) { + const { as: Element = __base__, children, ...restProps } = props + + const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps]) + + const [htmlProps, forwardedProps, variantProps, styleProps, elementProps] = useMemo(() => { + return splitProps(combinedProps, normalizeHTMLProps.keys, __shouldForwardProps__, __cvaFn__.variantKeys, isCssProperty) + }, [combinedProps]) + + function recipeClass() { + const { css: cssStyles, ...propStyles } = styleProps + const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps) + return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className) + } + + function cvaClass() { + const { css: cssStyles, ...propStyles } = styleProps + const cvaStyles = __cvaFn__.raw(variantProps) + return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className) + } + + const classes = configOrCva.__recipe__ ? recipeClass : cvaClass + + return createElement(Element, { + ref, + ...forwardedProps, + ...elementProps, + ...normalizeHTMLProps(htmlProps), + className: classes(), + }, combinedProps.children ?? children) + }) + + const name = getDisplayName(__base__) + + StyledComponent.displayName = `styled.${name}` + StyledComponent.__cva__ = __cvaFn__ + StyledComponent.__base__ = __base__ + StyledComponent.__shouldForwardProps__ = shouldForwardProp + + return StyledComponent +} + +function createJsxFactory() { + const cache = new Map() + + return new Proxy(styledFn, { + apply(_, __, args) { + return styledFn(...args) + }, + get(_, el) { + if (!cache.has(el)) { + cache.set(el, styledFn(el)) + } + return cache.get(el) + }, + }) +} + +export const styled = /* @__PURE__ */ createJsxFactory() diff --git a/panda/jsx/flex.d.ts b/panda/jsx/flex.d.ts new file mode 100644 index 0000000..8165d5a --- /dev/null +++ b/panda/jsx/flex.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { FlexProperties } from '../patterns/flex'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface FlexProps extends FlexProperties, DistributiveOmit, keyof FlexProperties > {} + + +export declare const Flex: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/flex.mjs b/panda/jsx/flex.mjs new file mode 100644 index 0000000..3c29fbe --- /dev/null +++ b/panda/jsx/flex.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getFlexStyle } from '../patterns/flex.mjs'; +import { styled } from './factory.mjs'; + +export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) { + const [patternProps, restProps] = splitProps(props, ["align","justify","direction","wrap","basis","grow","shrink"]) + +const styleProps = getFlexStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/float.d.ts b/panda/jsx/float.d.ts new file mode 100644 index 0000000..217a44c --- /dev/null +++ b/panda/jsx/float.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { FloatProperties } from '../patterns/float'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface FloatProps extends FloatProperties, DistributiveOmit, keyof FloatProperties > {} + + +export declare const Float: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/float.mjs b/panda/jsx/float.mjs new file mode 100644 index 0000000..e278134 --- /dev/null +++ b/panda/jsx/float.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getFloatStyle } from '../patterns/float.mjs'; +import { styled } from './factory.mjs'; + +export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) { + const [patternProps, restProps] = splitProps(props, ["offsetX","offsetY","offset","placement"]) + +const styleProps = getFloatStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/grid-item.d.ts b/panda/jsx/grid-item.d.ts new file mode 100644 index 0000000..3713051 --- /dev/null +++ b/panda/jsx/grid-item.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { GridItemProperties } from '../patterns/grid-item'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface GridItemProps extends GridItemProperties, DistributiveOmit, keyof GridItemProperties > {} + + +export declare const GridItem: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/grid-item.mjs b/panda/jsx/grid-item.mjs new file mode 100644 index 0000000..9cd482f --- /dev/null +++ b/panda/jsx/grid-item.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getGridItemStyle } from '../patterns/grid-item.mjs'; +import { styled } from './factory.mjs'; + +export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) { + const [patternProps, restProps] = splitProps(props, ["colSpan","rowSpan","colStart","rowStart","colEnd","rowEnd"]) + +const styleProps = getGridItemStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/grid.d.ts b/panda/jsx/grid.d.ts new file mode 100644 index 0000000..760569c --- /dev/null +++ b/panda/jsx/grid.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { GridProperties } from '../patterns/grid'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface GridProps extends GridProperties, DistributiveOmit, keyof GridProperties > {} + + +export declare const Grid: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/grid.mjs b/panda/jsx/grid.mjs new file mode 100644 index 0000000..be10316 --- /dev/null +++ b/panda/jsx/grid.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getGridStyle } from '../patterns/grid.mjs'; +import { styled } from './factory.mjs'; + +export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) { + const [patternProps, restProps] = splitProps(props, ["gap","columnGap","rowGap","columns","minChildWidth"]) + +const styleProps = getGridStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/hstack.d.ts b/panda/jsx/hstack.d.ts new file mode 100644 index 0000000..9cd06b0 --- /dev/null +++ b/panda/jsx/hstack.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { HstackProperties } from '../patterns/hstack'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface HstackProps extends HstackProperties, DistributiveOmit, keyof HstackProperties > {} + + +export declare const HStack: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/hstack.mjs b/panda/jsx/hstack.mjs new file mode 100644 index 0000000..95ca14e --- /dev/null +++ b/panda/jsx/hstack.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getHstackStyle } from '../patterns/hstack.mjs'; +import { styled } from './factory.mjs'; + +export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) { + const [patternProps, restProps] = splitProps(props, ["justify","gap"]) + +const styleProps = getHstackStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/index.d.ts b/panda/jsx/index.d.ts new file mode 100644 index 0000000..d15d440 --- /dev/null +++ b/panda/jsx/index.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +export * from './factory'; +export * from './is-valid-prop'; +export * from './box'; +export * from './flex'; +export * from './stack'; +export * from './vstack'; +export * from './hstack'; +export * from './spacer'; +export * from './square'; +export * from './circle'; +export * from './center'; +export * from './link-box'; +export * from './link-overlay'; +export * from './aspect-ratio'; +export * from './grid'; +export * from './grid-item'; +export * from './wrap'; +export * from './container'; +export * from './divider'; +export * from './float'; +export * from './bleed'; +export * from './visually-hidden'; +export * from './cq'; +export type { HTMLStyledProps, StyledComponent } from '../types/jsx'; \ No newline at end of file diff --git a/panda/jsx/index.mjs b/panda/jsx/index.mjs new file mode 100644 index 0000000..33d3bc1 --- /dev/null +++ b/panda/jsx/index.mjs @@ -0,0 +1,23 @@ +export * from './factory.mjs'; +export * from './is-valid-prop.mjs'; +export * from './box.mjs'; +export * from './flex.mjs'; +export * from './stack.mjs'; +export * from './vstack.mjs'; +export * from './hstack.mjs'; +export * from './spacer.mjs'; +export * from './square.mjs'; +export * from './circle.mjs'; +export * from './center.mjs'; +export * from './link-box.mjs'; +export * from './link-overlay.mjs'; +export * from './aspect-ratio.mjs'; +export * from './grid.mjs'; +export * from './grid-item.mjs'; +export * from './wrap.mjs'; +export * from './container.mjs'; +export * from './divider.mjs'; +export * from './float.mjs'; +export * from './bleed.mjs'; +export * from './visually-hidden.mjs'; +export * from './cq.mjs'; \ No newline at end of file diff --git a/panda/jsx/is-valid-prop.d.ts b/panda/jsx/is-valid-prop.d.ts new file mode 100644 index 0000000..797944f --- /dev/null +++ b/panda/jsx/is-valid-prop.d.ts @@ -0,0 +1,11 @@ +/* eslint-disable */ +import type { DistributiveOmit, HTMLPandaProps, JsxStyleProps, Pretty } from '../types'; + +declare const isCssProperty: (value: string) => boolean; + +type CssPropKey = keyof JsxStyleProps +type OmittedCssProps = Pretty> + +declare const splitCssProps: (props: T) => [JsxStyleProps, OmittedCssProps] + +export { isCssProperty, splitCssProps }; \ No newline at end of file diff --git a/panda/jsx/is-valid-prop.mjs b/panda/jsx/is-valid-prop.mjs new file mode 100644 index 0000000..991c98b --- /dev/null +++ b/panda/jsx/is-valid-prop.mjs @@ -0,0 +1,17 @@ +import { splitProps } from '../helpers.mjs'; +import { memo } from '../helpers.mjs'; +// src/index.ts +var userGeneratedStr = "css,pos,insetX,insetY,insetEnd,end,insetStart,start,flexDir,p,pl,pr,pt,pb,py,paddingY,paddingX,px,pe,paddingEnd,ps,paddingStart,ml,mr,mt,mb,m,my,marginY,mx,marginX,me,marginEnd,ms,marginStart,ringWidth,ringColor,ring,ringOffset,w,minW,maxW,h,minH,maxH,textShadowColor,bgPosition,bgPositionX,bgPositionY,bgAttachment,bgClip,bg,bgColor,bgOrigin,bgImage,bgRepeat,bgBlendMode,bgSize,bgGradient,rounded,roundedTopLeft,roundedTopRight,roundedBottomRight,roundedBottomLeft,roundedTop,roundedRight,roundedBottom,roundedLeft,roundedStartStart,roundedStartEnd,roundedStart,roundedEndStart,roundedEndEnd,roundedEnd,borderX,borderXWidth,borderXColor,borderY,borderYWidth,borderYColor,borderStart,borderStartWidth,borderStartColor,borderEnd,borderEndWidth,borderEndColor,shadow,shadowColor,x,y,scrollMarginY,scrollMarginX,scrollPaddingY,scrollPaddingX,aspectRatio,boxDecorationBreak,zIndex,boxSizing,objectPosition,objectFit,overscrollBehavior,overscrollBehaviorX,overscrollBehaviorY,position,top,left,insetInline,insetBlock,inset,insetBlockEnd,insetBlockStart,insetInlineEnd,insetInlineStart,right,bottom,float,visibility,display,hideFrom,hideBelow,flexBasis,flex,flexDirection,flexGrow,flexShrink,gridTemplateColumns,gridTemplateRows,gridColumn,gridRow,gridColumnStart,gridColumnEnd,gridAutoFlow,gridAutoColumns,gridAutoRows,gap,gridGap,gridRowGap,gridColumnGap,rowGap,columnGap,justifyContent,alignContent,alignItems,alignSelf,padding,paddingLeft,paddingRight,paddingTop,paddingBottom,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingInline,paddingInlineEnd,paddingInlineStart,marginLeft,marginRight,marginTop,marginBottom,margin,marginBlock,marginBlockEnd,marginBlockStart,marginInline,marginInlineEnd,marginInlineStart,outlineWidth,outlineColor,outline,outlineOffset,divideX,divideY,divideColor,divideStyle,width,inlineSize,minWidth,minInlineSize,maxWidth,maxInlineSize,height,blockSize,minHeight,minBlockSize,maxHeight,maxBlockSize,color,fontFamily,fontSize,fontWeight,fontSmoothing,fontVariantNumeric,letterSpacing,lineHeight,textAlign,textDecoration,textDecorationColor,textEmphasisColor,textDecorationStyle,textDecorationThickness,textUnderlineOffset,textTransform,textIndent,textShadow,textOverflow,verticalAlign,wordBreak,textWrap,truncate,lineClamp,listStyleType,listStylePosition,listStyleImage,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundAttachment,backgroundClip,background,backgroundColor,backgroundOrigin,backgroundImage,backgroundRepeat,backgroundBlendMode,backgroundSize,backgroundGradient,textGradient,gradientFrom,gradientTo,gradientVia,borderRadius,borderTopLeftRadius,borderTopRightRadius,borderBottomRightRadius,borderBottomLeftRadius,borderTopRadius,borderRightRadius,borderBottomRadius,borderLeftRadius,borderStartStartRadius,borderStartEndRadius,borderStartRadius,borderEndStartRadius,borderEndEndRadius,borderEndRadius,border,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,borderColor,borderInline,borderInlineWidth,borderInlineColor,borderBlock,borderBlockWidth,borderBlockColor,borderLeft,borderLeftColor,borderInlineStart,borderInlineStartWidth,borderInlineStartColor,borderRight,borderRightColor,borderInlineEnd,borderInlineEndWidth,borderInlineEndColor,borderTop,borderTopColor,borderBottom,borderBottomColor,borderBlockEnd,borderBlockEndColor,borderBlockStart,borderBlockStartColor,opacity,boxShadow,boxShadowColor,mixBlendMode,filter,brightness,contrast,grayscale,hueRotate,invert,saturate,sepia,dropShadow,blur,backdropFilter,backdropBlur,backdropBrightness,backdropContrast,backdropGrayscale,backdropHueRotate,backdropInvert,backdropOpacity,backdropSaturate,backdropSepia,borderCollapse,borderSpacing,borderSpacingX,borderSpacingY,tableLayout,transitionTimingFunction,transitionDelay,transitionDuration,transitionProperty,transition,animation,animationName,animationDelay,transformOrigin,scale,scaleX,scaleY,translate,translateX,translateY,accentColor,caretColor,scrollBehavior,scrollbar,scrollMargin,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollMarginBottom,scrollMarginBlock,scrollMarginBlockEnd,scrollMarginBlockStart,scrollMarginInline,scrollMarginInlineEnd,scrollMarginInlineStart,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingInline,scrollPaddingInlineEnd,scrollPaddingInlineStart,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollPaddingBottom,scrollSnapAlign,scrollSnapStop,scrollSnapType,scrollSnapStrictness,scrollSnapMargin,scrollSnapMarginTop,scrollSnapMarginBottom,scrollSnapMarginLeft,scrollSnapMarginRight,touchAction,userSelect,fill,stroke,strokeWidth,srOnly,debug,appearance,backfaceVisibility,clipPath,hyphens,mask,maskImage,maskSize,textSizeAdjust,container,containerName,containerType,colorPalette,_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_default,_optional,_open,_closed,_fullscreen,_loading,_currentPage,_currentStep,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,sm,smOnly,smDown,md,mdOnly,mdDown,lg,lgOnly,lgDown,xl,xlOnly,xlDown,2xl,2xlOnly,2xlDown,smToMd,smToLg,smToXl,smTo2xl,mdToLg,mdToXl,mdTo2xl,lgToXl,lgTo2xl,xlTo2xl,@/xs,@/sm,@/md,@/lg,@/xl,@/2xl,@/3xl,@/4xl,@/5xl,@/6xl,@/7xl,@/8xl,textStyle" +var userGenerated = userGeneratedStr.split(","); +var cssPropertiesStr = "WebkitAppearance,WebkitBorderBefore,WebkitBorderBeforeColor,WebkitBorderBeforeStyle,WebkitBorderBeforeWidth,WebkitBoxReflect,WebkitLineClamp,WebkitMask,WebkitMaskAttachment,WebkitMaskClip,WebkitMaskComposite,WebkitMaskImage,WebkitMaskOrigin,WebkitMaskPosition,WebkitMaskPositionX,WebkitMaskPositionY,WebkitMaskRepeat,WebkitMaskRepeatX,WebkitMaskRepeatY,WebkitMaskSize,WebkitOverflowScrolling,WebkitTapHighlightColor,WebkitTextFillColor,WebkitTextStroke,WebkitTextStrokeColor,WebkitTextStrokeWidth,WebkitTouchCallout,WebkitUserModify,accentColor,alignContent,alignItems,alignSelf,alignTracks,all,animation,animationComposition,animationDelay,animationDirection,animationDuration,animationFillMode,animationIterationCount,animationName,animationPlayState,animationRange,animationRangeEnd,animationRangeStart,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockSize,border,borderBlock,borderBlockColor,borderBlockStyle,borderBlockWidth,borderBlockEnd,borderBlockEndColor,borderBlockEndStyle,borderBlockEndWidth,borderBlockStart,borderBlockStartColor,borderBlockStartStyle,borderBlockStartWidth,borderBottom,borderBottomColor,borderBottomLeftRadius,borderBottomRightRadius,borderBottomStyle,borderBottomWidth,borderCollapse,borderColor,borderEndEndRadius,borderEndStartRadius,borderImage,borderImageOutset,borderImageRepeat,borderImageSlice,borderImageSource,borderImageWidth,borderInline,borderInlineEnd,borderInlineColor,borderInlineStyle,borderInlineWidth,borderInlineEndColor,borderInlineEndStyle,borderInlineEndWidth,borderInlineStart,borderInlineStartColor,borderInlineStartStyle,borderInlineStartWidth,borderLeft,borderLeftColor,borderLeftStyle,borderLeftWidth,borderRadius,borderRight,borderRightColor,borderRightStyle,borderRightWidth,borderSpacing,borderStartEndRadius,borderStartStartRadius,borderStyle,borderTop,borderTopColor,borderTopLeftRadius,borderTopRightRadius,borderTopStyle,borderTopWidth,borderWidth,bottom,boxAlign,boxDecorationBreak,boxDirection,boxFlex,boxFlexGroup,boxLines,boxOrdinalGroup,boxOrient,boxPack,boxShadow,boxSizing,breakAfter,breakBefore,breakInside,captionSide,caret,caretColor,caretShape,clear,clip,clipPath,color,colorScheme,columnCount,columnFill,columnGap,columnRule,columnRuleColor,columnRuleStyle,columnRuleWidth,columnSpan,columnWidth,columns,contain,containIntrinsicSize,containIntrinsicBlockSize,containIntrinsicHeight,containIntrinsicInlineSize,containIntrinsicWidth,container,containerName,containerType,content,contentVisibility,counterIncrement,counterReset,counterSet,cursor,direction,display,emptyCells,filter,flex,flexBasis,flexDirection,flexFlow,flexGrow,flexShrink,flexWrap,float,font,fontFamily,fontFeatureSettings,fontKerning,fontLanguageOverride,fontOpticalSizing,fontPalette,fontVariationSettings,fontSize,fontSizeAdjust,fontSmooth,fontStretch,fontStyle,fontSynthesis,fontSynthesisPosition,fontSynthesisSmallCaps,fontSynthesisStyle,fontSynthesisWeight,fontVariant,fontVariantAlternates,fontVariantCaps,fontVariantEastAsian,fontVariantEmoji,fontVariantLigatures,fontVariantNumeric,fontVariantPosition,fontWeight,forcedColorAdjust,gap,grid,gridArea,gridAutoColumns,gridAutoFlow,gridAutoRows,gridColumn,gridColumnEnd,gridColumnGap,gridColumnStart,gridGap,gridRow,gridRowEnd,gridRowGap,gridRowStart,gridTemplate,gridTemplateAreas,gridTemplateColumns,gridTemplateRows,hangingPunctuation,height,hyphenateCharacter,hyphenateLimitChars,hyphens,imageOrientation,imageRendering,imageResolution,imeMode,initialLetter,initialLetterAlign,inlineSize,inputSecurity,inset,insetBlock,insetBlockEnd,insetBlockStart,insetInline,insetInlineEnd,insetInlineStart,isolation,justifyContent,justifyItems,justifySelf,justifyTracks,left,letterSpacing,lineBreak,lineClamp,lineHeight,lineHeightStep,listStyle,listStyleImage,listStylePosition,listStyleType,margin,marginBlock,marginBlockEnd,marginBlockStart,marginBottom,marginInline,marginInlineEnd,marginInlineStart,marginLeft,marginRight,marginTop,marginTrim,mask,maskBorder,maskBorderMode,maskBorderOutset,maskBorderRepeat,maskBorderSlice,maskBorderSource,maskBorderWidth,maskClip,maskComposite,maskImage,maskMode,maskOrigin,maskPosition,maskRepeat,maskSize,maskType,masonryAutoFlow,mathDepth,mathShift,mathStyle,maxBlockSize,maxHeight,maxInlineSize,maxLines,maxWidth,minBlockSize,minHeight,minInlineSize,minWidth,mixBlendMode,objectFit,objectPosition,offset,offsetAnchor,offsetDistance,offsetPath,offsetPosition,offsetRotate,opacity,order,orphans,outline,outlineColor,outlineOffset,outlineStyle,outlineWidth,overflow,overflowAnchor,overflowBlock,overflowClipBox,overflowClipMargin,overflowInline,overflowWrap,overflowX,overflowY,overlay,overscrollBehavior,overscrollBehaviorBlock,overscrollBehaviorInline,overscrollBehaviorX,overscrollBehaviorY,padding,paddingBlock,paddingBlockEnd,paddingBlockStart,paddingBottom,paddingInline,paddingInlineEnd,paddingInlineStart,paddingLeft,paddingRight,paddingTop,page,pageBreakAfter,pageBreakBefore,pageBreakInside,paintOrder,perspective,perspectiveOrigin,placeContent,placeItems,placeSelf,pointerEvents,position,printColorAdjust,quotes,resize,right,rotate,rowGap,rubyAlign,rubyMerge,rubyPosition,scale,scrollbarColor,scrollbarGutter,scrollbarWidth,scrollBehavior,scrollMargin,scrollMarginBlock,scrollMarginBlockStart,scrollMarginBlockEnd,scrollMarginBottom,scrollMarginInline,scrollMarginInlineStart,scrollMarginInlineEnd,scrollMarginLeft,scrollMarginRight,scrollMarginTop,scrollPadding,scrollPaddingBlock,scrollPaddingBlockStart,scrollPaddingBlockEnd,scrollPaddingBottom,scrollPaddingInline,scrollPaddingInlineStart,scrollPaddingInlineEnd,scrollPaddingLeft,scrollPaddingRight,scrollPaddingTop,scrollSnapAlign,scrollSnapCoordinate,scrollSnapDestination,scrollSnapPointsX,scrollSnapPointsY,scrollSnapStop,scrollSnapType,scrollSnapTypeX,scrollSnapTypeY,scrollTimeline,scrollTimelineAxis,scrollTimelineName,shapeImageThreshold,shapeMargin,shapeOutside,tabSize,tableLayout,textAlign,textAlignLast,textCombineUpright,textDecoration,textDecorationColor,textDecorationLine,textDecorationSkip,textDecorationSkipInk,textDecorationStyle,textDecorationThickness,textEmphasis,textEmphasisColor,textEmphasisPosition,textEmphasisStyle,textIndent,textJustify,textOrientation,textOverflow,textRendering,textShadow,textSizeAdjust,textTransform,textUnderlineOffset,textUnderlinePosition,textWrap,timelineScope,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionBehavior,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTimeline,viewTimelineAxis,viewTimelineInset,viewTimelineName,viewTransitionName,visibility,whiteSpace,whiteSpaceCollapse,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom,alignmentBaseline,baselineShift,clipRule,colorInterpolation,colorRendering,dominantBaseline,fill,fillOpacity,fillRule,floodColor,floodOpacity,glyphOrientationVertical,lightingColor,marker,markerEnd,markerMid,markerStart,shapeRendering,stopColor,stopOpacity,stroke,strokeDasharray,strokeDashoffset,strokeLinecap,strokeLinejoin,strokeMiterlimit,strokeOpacity,strokeWidth,textAnchor,vectorEffect"; +var allCssProperties = cssPropertiesStr.split(",").concat(userGenerated); +var properties = new Map(allCssProperties.map((prop) => [prop, true])); +var cssPropertySelectorRegex = /&|@/; +var isCssProperty = /* @__PURE__ */ memo((prop) => { + return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop); +}); +export { + allCssProperties, + isCssProperty +}; +export const splitCssProps = (props) => splitProps(props, isCssProperty) \ No newline at end of file diff --git a/panda/jsx/link-box.d.ts b/panda/jsx/link-box.d.ts new file mode 100644 index 0000000..6f65d99 --- /dev/null +++ b/panda/jsx/link-box.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { LinkBoxProperties } from '../patterns/link-box'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface LinkBoxProps extends LinkBoxProperties, DistributiveOmit, keyof LinkBoxProperties > {} + + +export declare const LinkBox: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/link-box.mjs b/panda/jsx/link-box.mjs new file mode 100644 index 0000000..feab1c4 --- /dev/null +++ b/panda/jsx/link-box.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getLinkBoxStyle } from '../patterns/link-box.mjs'; +import { styled } from './factory.mjs'; + +export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) { + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getLinkBoxStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/link-overlay.d.ts b/panda/jsx/link-overlay.d.ts new file mode 100644 index 0000000..26a2830 --- /dev/null +++ b/panda/jsx/link-overlay.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { LinkOverlayProperties } from '../patterns/link-overlay'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface LinkOverlayProps extends LinkOverlayProperties, DistributiveOmit, keyof LinkOverlayProperties > {} + + +export declare const LinkOverlay: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/link-overlay.mjs b/panda/jsx/link-overlay.mjs new file mode 100644 index 0000000..3fc2cae --- /dev/null +++ b/panda/jsx/link-overlay.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs'; +import { styled } from './factory.mjs'; + +export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) { + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getLinkOverlayStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.a, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/spacer.d.ts b/panda/jsx/spacer.d.ts new file mode 100644 index 0000000..03fcbce --- /dev/null +++ b/panda/jsx/spacer.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { SpacerProperties } from '../patterns/spacer'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface SpacerProps extends SpacerProperties, DistributiveOmit, keyof SpacerProperties > {} + + +export declare const Spacer: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/spacer.mjs b/panda/jsx/spacer.mjs new file mode 100644 index 0000000..efd919e --- /dev/null +++ b/panda/jsx/spacer.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getSpacerStyle } from '../patterns/spacer.mjs'; +import { styled } from './factory.mjs'; + +export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) { + const [patternProps, restProps] = splitProps(props, ["size"]) + +const styleProps = getSpacerStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/square.d.ts b/panda/jsx/square.d.ts new file mode 100644 index 0000000..ef3e1ce --- /dev/null +++ b/panda/jsx/square.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { SquareProperties } from '../patterns/square'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface SquareProps extends SquareProperties, DistributiveOmit, keyof SquareProperties > {} + + +export declare const Square: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/square.mjs b/panda/jsx/square.mjs new file mode 100644 index 0000000..e8f25ad --- /dev/null +++ b/panda/jsx/square.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getSquareStyle } from '../patterns/square.mjs'; +import { styled } from './factory.mjs'; + +export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) { + const [patternProps, restProps] = splitProps(props, ["size"]) + +const styleProps = getSquareStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/stack.d.ts b/panda/jsx/stack.d.ts new file mode 100644 index 0000000..13ff1c2 --- /dev/null +++ b/panda/jsx/stack.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { StackProperties } from '../patterns/stack'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface StackProps extends StackProperties, DistributiveOmit, keyof StackProperties > {} + + +export declare const Stack: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/stack.mjs b/panda/jsx/stack.mjs new file mode 100644 index 0000000..0dc1958 --- /dev/null +++ b/panda/jsx/stack.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getStackStyle } from '../patterns/stack.mjs'; +import { styled } from './factory.mjs'; + +export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) { + const [patternProps, restProps] = splitProps(props, ["align","justify","direction","gap"]) + +const styleProps = getStackStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/visually-hidden.d.ts b/panda/jsx/visually-hidden.d.ts new file mode 100644 index 0000000..896eb1f --- /dev/null +++ b/panda/jsx/visually-hidden.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { VisuallyHiddenProperties } from '../patterns/visually-hidden'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface VisuallyHiddenProps extends VisuallyHiddenProperties, DistributiveOmit, keyof VisuallyHiddenProperties > {} + + +export declare const VisuallyHidden: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/visually-hidden.mjs b/panda/jsx/visually-hidden.mjs new file mode 100644 index 0000000..3d14c46 --- /dev/null +++ b/panda/jsx/visually-hidden.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs'; +import { styled } from './factory.mjs'; + +export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) { + const [patternProps, restProps] = splitProps(props, []) + +const styleProps = getVisuallyHiddenStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/vstack.d.ts b/panda/jsx/vstack.d.ts new file mode 100644 index 0000000..2e43bfc --- /dev/null +++ b/panda/jsx/vstack.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { VstackProperties } from '../patterns/vstack'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface VstackProps extends VstackProperties, DistributiveOmit, keyof VstackProperties > {} + + +export declare const VStack: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/vstack.mjs b/panda/jsx/vstack.mjs new file mode 100644 index 0000000..915f353 --- /dev/null +++ b/panda/jsx/vstack.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getVstackStyle } from '../patterns/vstack.mjs'; +import { styled } from './factory.mjs'; + +export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) { + const [patternProps, restProps] = splitProps(props, ["justify","gap"]) + +const styleProps = getVstackStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/jsx/wrap.d.ts b/panda/jsx/wrap.d.ts new file mode 100644 index 0000000..8aa6431 --- /dev/null +++ b/panda/jsx/wrap.d.ts @@ -0,0 +1,10 @@ +/* eslint-disable */ +import type { FunctionComponent } from 'react' +import type { WrapProperties } from '../patterns/wrap'; +import type { HTMLStyledProps } from '../types/jsx'; +import type { DistributiveOmit } from '../types/system-types'; + +export interface WrapProps extends WrapProperties, DistributiveOmit, keyof WrapProperties > {} + + +export declare const Wrap: FunctionComponent \ No newline at end of file diff --git a/panda/jsx/wrap.mjs b/panda/jsx/wrap.mjs new file mode 100644 index 0000000..e7a17cb --- /dev/null +++ b/panda/jsx/wrap.mjs @@ -0,0 +1,14 @@ +import { createElement, forwardRef } from 'react' +import { mergeCss } from '../css/css.mjs'; +import { splitProps } from '../helpers.mjs'; +import { getWrapStyle } from '../patterns/wrap.mjs'; +import { styled } from './factory.mjs'; + +export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) { + const [patternProps, restProps] = splitProps(props, ["gap","rowGap","columnGap","align","justify"]) + +const styleProps = getWrapStyle(patternProps) +const mergedProps = { ref, ...styleProps, ...restProps } + +return createElement(styled.div, mergedProps) + }) \ No newline at end of file diff --git a/panda/patterns/aspect-ratio.d.ts b/panda/patterns/aspect-ratio.d.ts new file mode 100644 index 0000000..666c374 --- /dev/null +++ b/panda/patterns/aspect-ratio.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface AspectRatioProperties { + ratio?: ConditionalValue +} + + +interface AspectRatioStyles extends AspectRatioProperties, DistributiveOmit {} + +interface AspectRatioPatternFn { + (styles?: AspectRatioStyles): string + raw: (styles?: AspectRatioStyles) => SystemStyleObject +} + + +export declare const aspectRatio: AspectRatioPatternFn; diff --git a/panda/patterns/aspect-ratio.mjs b/panda/patterns/aspect-ratio.mjs new file mode 100644 index 0000000..050c0d4 --- /dev/null +++ b/panda/patterns/aspect-ratio.mjs @@ -0,0 +1,38 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const aspectRatioConfig = { +transform(props, { map }) { + const { ratio = 4 / 3, ...rest } = props; + return { + position: "relative", + _before: { + content: `""`, + display: "block", + height: "0", + paddingBottom: map(ratio, (r) => `${1 / r * 100}%`) + }, + "&>*": { + display: "flex", + justifyContent: "center", + alignItems: "center", + overflow: "hidden", + position: "absolute", + inset: "0", + width: "100%", + height: "100%" + }, + "&>img, &>video": { + objectFit: "cover" + }, + ...rest + }; +}} + +export const getAspectRatioStyle = (styles = {}) => { + const _styles = getPatternStyles(aspectRatioConfig, styles) + return aspectRatioConfig.transform(_styles, patternFns) +} + +export const aspectRatio = (styles) => css(getAspectRatioStyle(styles)) +aspectRatio.raw = getAspectRatioStyle \ No newline at end of file diff --git a/panda/patterns/bleed.d.ts b/panda/patterns/bleed.d.ts new file mode 100644 index 0000000..6573c63 --- /dev/null +++ b/panda/patterns/bleed.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface BleedProperties { + inline?: SystemProperties["marginInline"] + block?: SystemProperties["marginBlock"] +} + + +interface BleedStyles extends BleedProperties, DistributiveOmit {} + +interface BleedPatternFn { + (styles?: BleedStyles): string + raw: (styles?: BleedStyles) => SystemStyleObject +} + + +export declare const bleed: BleedPatternFn; diff --git a/panda/patterns/bleed.mjs b/panda/patterns/bleed.mjs new file mode 100644 index 0000000..a7eaa93 --- /dev/null +++ b/panda/patterns/bleed.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const bleedConfig = { +transform(props, { map, isCssUnit, isCssVar }) { + const { inline, block, ...rest } = props; + const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`; + return { + "--bleed-x": map(inline, valueFn), + "--bleed-y": map(block, valueFn), + marginInline: "calc(var(--bleed-x, 0) * -1)", + marginBlock: "calc(var(--bleed-y, 0) * -1)", + ...rest + }; +}, +defaultValues:{inline:'0',block:'0'}} + +export const getBleedStyle = (styles = {}) => { + const _styles = getPatternStyles(bleedConfig, styles) + return bleedConfig.transform(_styles, patternFns) +} + +export const bleed = (styles) => css(getBleedStyle(styles)) +bleed.raw = getBleedStyle \ No newline at end of file diff --git a/panda/patterns/box.d.ts b/panda/patterns/box.d.ts new file mode 100644 index 0000000..a793500 --- /dev/null +++ b/panda/patterns/box.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface BoxProperties { + +} + + +interface BoxStyles extends BoxProperties, DistributiveOmit {} + +interface BoxPatternFn { + (styles?: BoxStyles): string + raw: (styles?: BoxStyles) => SystemStyleObject +} + + +export declare const box: BoxPatternFn; diff --git a/panda/patterns/box.mjs b/panda/patterns/box.mjs new file mode 100644 index 0000000..96cafb5 --- /dev/null +++ b/panda/patterns/box.mjs @@ -0,0 +1,15 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const boxConfig = { +transform(props) { + return props; +}} + +export const getBoxStyle = (styles = {}) => { + const _styles = getPatternStyles(boxConfig, styles) + return boxConfig.transform(_styles, patternFns) +} + +export const box = (styles) => css(getBoxStyle(styles)) +box.raw = getBoxStyle \ No newline at end of file diff --git a/panda/patterns/center.d.ts b/panda/patterns/center.d.ts new file mode 100644 index 0000000..8419f3c --- /dev/null +++ b/panda/patterns/center.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CenterProperties { + inline?: ConditionalValue +} + + +interface CenterStyles extends CenterProperties, DistributiveOmit {} + +interface CenterPatternFn { + (styles?: CenterStyles): string + raw: (styles?: CenterStyles) => SystemStyleObject +} + + +export declare const center: CenterPatternFn; diff --git a/panda/patterns/center.mjs b/panda/patterns/center.mjs new file mode 100644 index 0000000..a01f4f0 --- /dev/null +++ b/panda/patterns/center.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const centerConfig = { +transform(props) { + const { inline, ...rest } = props; + return { + display: inline ? "inline-flex" : "flex", + alignItems: "center", + justifyContent: "center", + ...rest + }; +}} + +export const getCenterStyle = (styles = {}) => { + const _styles = getPatternStyles(centerConfig, styles) + return centerConfig.transform(_styles, patternFns) +} + +export const center = (styles) => css(getCenterStyle(styles)) +center.raw = getCenterStyle \ No newline at end of file diff --git a/panda/patterns/circle.d.ts b/panda/patterns/circle.d.ts new file mode 100644 index 0000000..d6759d8 --- /dev/null +++ b/panda/patterns/circle.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CircleProperties { + size?: SystemProperties["width"] +} + + +interface CircleStyles extends CircleProperties, DistributiveOmit {} + +interface CirclePatternFn { + (styles?: CircleStyles): string + raw: (styles?: CircleStyles) => SystemStyleObject +} + + +export declare const circle: CirclePatternFn; diff --git a/panda/patterns/circle.mjs b/panda/patterns/circle.mjs new file mode 100644 index 0000000..40fcbfb --- /dev/null +++ b/panda/patterns/circle.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const circleConfig = { +transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + borderRadius: "9999px", + ...rest + }; +}} + +export const getCircleStyle = (styles = {}) => { + const _styles = getPatternStyles(circleConfig, styles) + return circleConfig.transform(_styles, patternFns) +} + +export const circle = (styles) => css(getCircleStyle(styles)) +circle.raw = getCircleStyle \ No newline at end of file diff --git a/panda/patterns/container.d.ts b/panda/patterns/container.d.ts new file mode 100644 index 0000000..978e59d --- /dev/null +++ b/panda/patterns/container.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface ContainerProperties { + +} + + +interface ContainerStyles extends ContainerProperties, DistributiveOmit {} + +interface ContainerPatternFn { + (styles?: ContainerStyles): string + raw: (styles?: ContainerStyles) => SystemStyleObject +} + + +export declare const container: ContainerPatternFn; diff --git a/panda/patterns/container.mjs b/panda/patterns/container.mjs new file mode 100644 index 0000000..55483f3 --- /dev/null +++ b/panda/patterns/container.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const containerConfig = { +transform(props) { + return { + position: "relative", + maxWidth: "8xl", + mx: "auto", + px: { base: "4", md: "6", lg: "8" }, + ...props + }; +}} + +export const getContainerStyle = (styles = {}) => { + const _styles = getPatternStyles(containerConfig, styles) + return containerConfig.transform(_styles, patternFns) +} + +export const container = (styles) => css(getContainerStyle(styles)) +container.raw = getContainerStyle \ No newline at end of file diff --git a/panda/patterns/cq.d.ts b/panda/patterns/cq.d.ts new file mode 100644 index 0000000..ee5ae93 --- /dev/null +++ b/panda/patterns/cq.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface CqProperties { + name?: ConditionalValue + type?: SystemProperties["containerType"] +} + + +interface CqStyles extends CqProperties, DistributiveOmit {} + +interface CqPatternFn { + (styles?: CqStyles): string + raw: (styles?: CqStyles) => SystemStyleObject +} + + +export declare const cq: CqPatternFn; diff --git a/panda/patterns/cq.mjs b/panda/patterns/cq.mjs new file mode 100644 index 0000000..1ef7e9a --- /dev/null +++ b/panda/patterns/cq.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const cqConfig = { +transform(props) { + const { name, type, ...rest } = props; + return { + containerType: type, + containerName: name, + ...rest + }; +}, +defaultValues:{type:'inline-size'}} + +export const getCqStyle = (styles = {}) => { + const _styles = getPatternStyles(cqConfig, styles) + return cqConfig.transform(_styles, patternFns) +} + +export const cq = (styles) => css(getCqStyle(styles)) +cq.raw = getCqStyle \ No newline at end of file diff --git a/panda/patterns/divider.d.ts b/panda/patterns/divider.d.ts new file mode 100644 index 0000000..a6923c4 --- /dev/null +++ b/panda/patterns/divider.d.ts @@ -0,0 +1,23 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface DividerProperties { + orientation?: ConditionalValue<"horizontal" | "vertical"> + thickness?: ConditionalValue + color?: ConditionalValue +} + + +interface DividerStyles extends DividerProperties, DistributiveOmit {} + +interface DividerPatternFn { + (styles?: DividerStyles): string + raw: (styles?: DividerStyles) => SystemStyleObject +} + + +export declare const divider: DividerPatternFn; diff --git a/panda/patterns/divider.mjs b/panda/patterns/divider.mjs new file mode 100644 index 0000000..9a81dbe --- /dev/null +++ b/panda/patterns/divider.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const dividerConfig = { +transform(props, { map }) { + const { orientation, thickness, color, ...rest } = props; + return { + "--thickness": thickness, + width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"), + height: map(orientation, (v) => v === "horizontal" ? void 0 : "100%"), + borderBlockEndWidth: map(orientation, (v) => v === "horizontal" ? "var(--thickness)" : void 0), + borderInlineEndWidth: map(orientation, (v) => v === "vertical" ? "var(--thickness)" : void 0), + borderColor: color, + ...rest + }; +}, +defaultValues:{orientation:'horizontal',thickness:'1px'}} + +export const getDividerStyle = (styles = {}) => { + const _styles = getPatternStyles(dividerConfig, styles) + return dividerConfig.transform(_styles, patternFns) +} + +export const divider = (styles) => css(getDividerStyle(styles)) +divider.raw = getDividerStyle \ No newline at end of file diff --git a/panda/patterns/flex.d.ts b/panda/patterns/flex.d.ts new file mode 100644 index 0000000..71d5308 --- /dev/null +++ b/panda/patterns/flex.d.ts @@ -0,0 +1,27 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface FlexProperties { + align?: SystemProperties["alignItems"] + justify?: SystemProperties["justifyContent"] + direction?: SystemProperties["flexDirection"] + wrap?: SystemProperties["flexWrap"] + basis?: SystemProperties["flexBasis"] + grow?: SystemProperties["flexGrow"] + shrink?: SystemProperties["flexShrink"] +} + + +interface FlexStyles extends FlexProperties, DistributiveOmit {} + +interface FlexPatternFn { + (styles?: FlexStyles): string + raw: (styles?: FlexStyles) => SystemStyleObject +} + + +export declare const flex: FlexPatternFn; diff --git a/panda/patterns/flex.mjs b/panda/patterns/flex.mjs new file mode 100644 index 0000000..fd12888 --- /dev/null +++ b/panda/patterns/flex.mjs @@ -0,0 +1,26 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const flexConfig = { +transform(props) { + const { direction, align, justify, wrap: wrap2, basis, grow, shrink, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + flexWrap: wrap2, + flexBasis: basis, + flexGrow: grow, + flexShrink: shrink, + ...rest + }; +}} + +export const getFlexStyle = (styles = {}) => { + const _styles = getPatternStyles(flexConfig, styles) + return flexConfig.transform(_styles, patternFns) +} + +export const flex = (styles) => css(getFlexStyle(styles)) +flex.raw = getFlexStyle \ No newline at end of file diff --git a/panda/patterns/float.d.ts b/panda/patterns/float.d.ts new file mode 100644 index 0000000..07ea9c3 --- /dev/null +++ b/panda/patterns/float.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface FloatProperties { + offsetX?: ConditionalValue + offsetY?: ConditionalValue + offset?: ConditionalValue + placement?: ConditionalValue<"bottom-end" | "bottom-start" | "top-end" | "top-start" | "bottom-center" | "top-center" | "middle-center" | "middle-end" | "middle-start"> +} + + +interface FloatStyles extends FloatProperties, DistributiveOmit {} + +interface FloatPatternFn { + (styles?: FloatStyles): string + raw: (styles?: FloatStyles) => SystemStyleObject +} + + +export declare const float: FloatPatternFn; diff --git a/panda/patterns/float.mjs b/panda/patterns/float.mjs new file mode 100644 index 0000000..3d89978 --- /dev/null +++ b/panda/patterns/float.mjs @@ -0,0 +1,52 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const floatConfig = { +transform(props, { map }) { + const { offset, offsetX, offsetY, placement, ...rest } = props; + return { + display: "inline-flex", + justifyContent: "center", + alignItems: "center", + position: "absolute", + insetBlockStart: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: offsetY, middle: "50%", bottom: "auto" }; + return map2[side]; + }), + insetBlockEnd: map(placement, (v) => { + const [side] = v.split("-"); + const map2 = { top: "auto", middle: "50%", bottom: offsetY }; + return map2[side]; + }), + insetInlineStart: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: offsetX, center: "50%", end: "auto" }; + return map2[align]; + }), + insetInlineEnd: map(placement, (v) => { + const [, align] = v.split("-"); + const map2 = { start: "auto", center: "50%", end: offsetX }; + return map2[align]; + }), + translate: map(placement, (v) => { + const [side, align] = v.split("-"); + const mapX = { start: "-50%", center: "-50%", end: "50%" }; + const mapY = { top: "-50%", middle: "-50%", bottom: "50%" }; + return `${mapX[align]} ${mapY[side]}`; + }), + ...rest + }; +}, +defaultValues(props) { + const offset = props.offset || "0"; + return { offset, offsetX: offset, offsetY: offset, placement: "top-end" }; +}} + +export const getFloatStyle = (styles = {}) => { + const _styles = getPatternStyles(floatConfig, styles) + return floatConfig.transform(_styles, patternFns) +} + +export const float = (styles) => css(getFloatStyle(styles)) +float.raw = getFloatStyle \ No newline at end of file diff --git a/panda/patterns/grid-item.d.ts b/panda/patterns/grid-item.d.ts new file mode 100644 index 0000000..2301ae5 --- /dev/null +++ b/panda/patterns/grid-item.d.ts @@ -0,0 +1,26 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface GridItemProperties { + colSpan?: ConditionalValue + rowSpan?: ConditionalValue + colStart?: ConditionalValue + rowStart?: ConditionalValue + colEnd?: ConditionalValue + rowEnd?: ConditionalValue +} + + +interface GridItemStyles extends GridItemProperties, DistributiveOmit {} + +interface GridItemPatternFn { + (styles?: GridItemStyles): string + raw: (styles?: GridItemStyles) => SystemStyleObject +} + + +export declare const gridItem: GridItemPatternFn; diff --git a/panda/patterns/grid-item.mjs b/panda/patterns/grid-item.mjs new file mode 100644 index 0000000..e00f472 --- /dev/null +++ b/panda/patterns/grid-item.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const gridItemConfig = { +transform(props, { map }) { + const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props; + const spanFn = (v) => v === "auto" ? v : `span ${v}`; + return { + gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0, + gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0, + gridColumnStart: colStart, + gridColumnEnd: colEnd, + gridRowStart: rowStart, + gridRowEnd: rowEnd, + ...rest + }; +}} + +export const getGridItemStyle = (styles = {}) => { + const _styles = getPatternStyles(gridItemConfig, styles) + return gridItemConfig.transform(_styles, patternFns) +} + +export const gridItem = (styles) => css(getGridItemStyle(styles)) +gridItem.raw = getGridItemStyle \ No newline at end of file diff --git a/panda/patterns/grid.d.ts b/panda/patterns/grid.d.ts new file mode 100644 index 0000000..96180bd --- /dev/null +++ b/panda/patterns/grid.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface GridProperties { + gap?: SystemProperties["gap"] + columnGap?: SystemProperties["gap"] + rowGap?: SystemProperties["gap"] + columns?: ConditionalValue + minChildWidth?: ConditionalValue +} + + +interface GridStyles extends GridProperties, DistributiveOmit {} + +interface GridPatternFn { + (styles?: GridStyles): string + raw: (styles?: GridStyles) => SystemStyleObject +} + + +export declare const grid: GridPatternFn; diff --git a/panda/patterns/grid.mjs b/panda/patterns/grid.mjs new file mode 100644 index 0000000..9dba80a --- /dev/null +++ b/panda/patterns/grid.mjs @@ -0,0 +1,27 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const gridConfig = { +transform(props, { map, isCssUnit }) { + const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props; + const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`; + return { + display: "grid", + gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0, + gap, + columnGap, + rowGap, + ...rest + }; +}, +defaultValues(props) { + return { gap: props.columnGap || props.rowGap ? void 0 : "10px" }; +}} + +export const getGridStyle = (styles = {}) => { + const _styles = getPatternStyles(gridConfig, styles) + return gridConfig.transform(_styles, patternFns) +} + +export const grid = (styles) => css(getGridStyle(styles)) +grid.raw = getGridStyle \ No newline at end of file diff --git a/panda/patterns/hstack.d.ts b/panda/patterns/hstack.d.ts new file mode 100644 index 0000000..05b0d67 --- /dev/null +++ b/panda/patterns/hstack.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface HstackProperties { + justify?: SystemProperties["justifyContent"] + gap?: SystemProperties["gap"] +} + + +interface HstackStyles extends HstackProperties, DistributiveOmit {} + +interface HstackPatternFn { + (styles?: HstackStyles): string + raw: (styles?: HstackStyles) => SystemStyleObject +} + + +export declare const hstack: HstackPatternFn; diff --git a/panda/patterns/hstack.mjs b/panda/patterns/hstack.mjs new file mode 100644 index 0000000..07f4ef3 --- /dev/null +++ b/panda/patterns/hstack.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const hstackConfig = { +transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "row", + ...rest + }; +}, +defaultValues:{gap:'10px'}} + +export const getHstackStyle = (styles = {}) => { + const _styles = getPatternStyles(hstackConfig, styles) + return hstackConfig.transform(_styles, patternFns) +} + +export const hstack = (styles) => css(getHstackStyle(styles)) +hstack.raw = getHstackStyle \ No newline at end of file diff --git a/panda/patterns/index.d.ts b/panda/patterns/index.d.ts new file mode 100644 index 0000000..6e9d406 --- /dev/null +++ b/panda/patterns/index.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +export * from './box'; +export * from './flex'; +export * from './stack'; +export * from './vstack'; +export * from './hstack'; +export * from './spacer'; +export * from './square'; +export * from './circle'; +export * from './center'; +export * from './link-box'; +export * from './link-overlay'; +export * from './aspect-ratio'; +export * from './grid'; +export * from './grid-item'; +export * from './wrap'; +export * from './container'; +export * from './divider'; +export * from './float'; +export * from './bleed'; +export * from './visually-hidden'; +export * from './cq'; \ No newline at end of file diff --git a/panda/patterns/index.mjs b/panda/patterns/index.mjs new file mode 100644 index 0000000..94c88da --- /dev/null +++ b/panda/patterns/index.mjs @@ -0,0 +1,21 @@ +export * from './box.mjs'; +export * from './flex.mjs'; +export * from './stack.mjs'; +export * from './vstack.mjs'; +export * from './hstack.mjs'; +export * from './spacer.mjs'; +export * from './square.mjs'; +export * from './circle.mjs'; +export * from './center.mjs'; +export * from './link-box.mjs'; +export * from './link-overlay.mjs'; +export * from './aspect-ratio.mjs'; +export * from './grid.mjs'; +export * from './grid-item.mjs'; +export * from './wrap.mjs'; +export * from './container.mjs'; +export * from './divider.mjs'; +export * from './float.mjs'; +export * from './bleed.mjs'; +export * from './visually-hidden.mjs'; +export * from './cq.mjs'; \ No newline at end of file diff --git a/panda/patterns/link-box.d.ts b/panda/patterns/link-box.d.ts new file mode 100644 index 0000000..15ba107 --- /dev/null +++ b/panda/patterns/link-box.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface LinkBoxProperties { + +} + + +interface LinkBoxStyles extends LinkBoxProperties, DistributiveOmit {} + +interface LinkBoxPatternFn { + (styles?: LinkBoxStyles): string + raw: (styles?: LinkBoxStyles) => SystemStyleObject +} + + +export declare const linkBox: LinkBoxPatternFn; diff --git a/panda/patterns/link-box.mjs b/panda/patterns/link-box.mjs new file mode 100644 index 0000000..debdb3a --- /dev/null +++ b/panda/patterns/link-box.mjs @@ -0,0 +1,22 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const linkBoxConfig = { +transform(props) { + return { + position: "relative", + "& :where(a, abbr)": { + position: "relative", + zIndex: "1" + }, + ...props + }; +}} + +export const getLinkBoxStyle = (styles = {}) => { + const _styles = getPatternStyles(linkBoxConfig, styles) + return linkBoxConfig.transform(_styles, patternFns) +} + +export const linkBox = (styles) => css(getLinkBoxStyle(styles)) +linkBox.raw = getLinkBoxStyle \ No newline at end of file diff --git a/panda/patterns/link-overlay.d.ts b/panda/patterns/link-overlay.d.ts new file mode 100644 index 0000000..565005a --- /dev/null +++ b/panda/patterns/link-overlay.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface LinkOverlayProperties { + +} + + +interface LinkOverlayStyles extends LinkOverlayProperties, DistributiveOmit {} + +interface LinkOverlayPatternFn { + (styles?: LinkOverlayStyles): string + raw: (styles?: LinkOverlayStyles) => SystemStyleObject +} + + +export declare const linkOverlay: LinkOverlayPatternFn; diff --git a/panda/patterns/link-overlay.mjs b/panda/patterns/link-overlay.mjs new file mode 100644 index 0000000..bd87df0 --- /dev/null +++ b/panda/patterns/link-overlay.mjs @@ -0,0 +1,27 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const linkOverlayConfig = { +transform(props) { + return { + position: "static", + _before: { + content: '""', + display: "block", + position: "absolute", + cursor: "inherit", + inset: "0", + zIndex: "0", + ...props["_before"] + }, + ...props + }; +}} + +export const getLinkOverlayStyle = (styles = {}) => { + const _styles = getPatternStyles(linkOverlayConfig, styles) + return linkOverlayConfig.transform(_styles, patternFns) +} + +export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles)) +linkOverlay.raw = getLinkOverlayStyle \ No newline at end of file diff --git a/panda/patterns/spacer.d.ts b/panda/patterns/spacer.d.ts new file mode 100644 index 0000000..4fba408 --- /dev/null +++ b/panda/patterns/spacer.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface SpacerProperties { + size?: ConditionalValue +} + + +interface SpacerStyles extends SpacerProperties, DistributiveOmit {} + +interface SpacerPatternFn { + (styles?: SpacerStyles): string + raw: (styles?: SpacerStyles) => SystemStyleObject +} + + +export declare const spacer: SpacerPatternFn; diff --git a/panda/patterns/spacer.mjs b/panda/patterns/spacer.mjs new file mode 100644 index 0000000..01b66e4 --- /dev/null +++ b/panda/patterns/spacer.mjs @@ -0,0 +1,21 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const spacerConfig = { +transform(props, { map }) { + const { size, ...rest } = props; + return { + alignSelf: "stretch", + justifySelf: "stretch", + flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`), + ...rest + }; +}} + +export const getSpacerStyle = (styles = {}) => { + const _styles = getPatternStyles(spacerConfig, styles) + return spacerConfig.transform(_styles, patternFns) +} + +export const spacer = (styles) => css(getSpacerStyle(styles)) +spacer.raw = getSpacerStyle \ No newline at end of file diff --git a/panda/patterns/square.d.ts b/panda/patterns/square.d.ts new file mode 100644 index 0000000..fda193f --- /dev/null +++ b/panda/patterns/square.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface SquareProperties { + size?: SystemProperties["width"] +} + + +interface SquareStyles extends SquareProperties, DistributiveOmit {} + +interface SquarePatternFn { + (styles?: SquareStyles): string + raw: (styles?: SquareStyles) => SystemStyleObject +} + + +export declare const square: SquarePatternFn; diff --git a/panda/patterns/square.mjs b/panda/patterns/square.mjs new file mode 100644 index 0000000..7aa0797 --- /dev/null +++ b/panda/patterns/square.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const squareConfig = { +transform(props) { + const { size, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: "center", + flex: "0 0 auto", + width: size, + height: size, + ...rest + }; +}} + +export const getSquareStyle = (styles = {}) => { + const _styles = getPatternStyles(squareConfig, styles) + return squareConfig.transform(_styles, patternFns) +} + +export const square = (styles) => css(getSquareStyle(styles)) +square.raw = getSquareStyle \ No newline at end of file diff --git a/panda/patterns/stack.d.ts b/panda/patterns/stack.d.ts new file mode 100644 index 0000000..5a6c9ce --- /dev/null +++ b/panda/patterns/stack.d.ts @@ -0,0 +1,24 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface StackProperties { + align?: SystemProperties["alignItems"] + justify?: SystemProperties["justifyContent"] + direction?: SystemProperties["flexDirection"] + gap?: SystemProperties["gap"] +} + + +interface StackStyles extends StackProperties, DistributiveOmit {} + +interface StackPatternFn { + (styles?: StackStyles): string + raw: (styles?: StackStyles) => SystemStyleObject +} + + +export declare const stack: StackPatternFn; diff --git a/panda/patterns/stack.mjs b/panda/patterns/stack.mjs new file mode 100644 index 0000000..5afce2d --- /dev/null +++ b/panda/patterns/stack.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const stackConfig = { +transform(props) { + const { align, justify, direction, gap, ...rest } = props; + return { + display: "flex", + flexDirection: direction, + alignItems: align, + justifyContent: justify, + gap, + ...rest + }; +}, +defaultValues:{direction:'column',gap:'10px'}} + +export const getStackStyle = (styles = {}) => { + const _styles = getPatternStyles(stackConfig, styles) + return stackConfig.transform(_styles, patternFns) +} + +export const stack = (styles) => css(getStackStyle(styles)) +stack.raw = getStackStyle \ No newline at end of file diff --git a/panda/patterns/visually-hidden.d.ts b/panda/patterns/visually-hidden.d.ts new file mode 100644 index 0000000..76f5e88 --- /dev/null +++ b/panda/patterns/visually-hidden.d.ts @@ -0,0 +1,21 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface VisuallyHiddenProperties { + +} + + +interface VisuallyHiddenStyles extends VisuallyHiddenProperties, DistributiveOmit {} + +interface VisuallyHiddenPatternFn { + (styles?: VisuallyHiddenStyles): string + raw: (styles?: VisuallyHiddenStyles) => SystemStyleObject +} + + +export declare const visuallyHidden: VisuallyHiddenPatternFn; diff --git a/panda/patterns/visually-hidden.mjs b/panda/patterns/visually-hidden.mjs new file mode 100644 index 0000000..534a0ea --- /dev/null +++ b/panda/patterns/visually-hidden.mjs @@ -0,0 +1,18 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const visuallyHiddenConfig = { +transform(props) { + return { + srOnly: true, + ...props + }; +}} + +export const getVisuallyHiddenStyle = (styles = {}) => { + const _styles = getPatternStyles(visuallyHiddenConfig, styles) + return visuallyHiddenConfig.transform(_styles, patternFns) +} + +export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles)) +visuallyHidden.raw = getVisuallyHiddenStyle \ No newline at end of file diff --git a/panda/patterns/vstack.d.ts b/panda/patterns/vstack.d.ts new file mode 100644 index 0000000..4fb1322 --- /dev/null +++ b/panda/patterns/vstack.d.ts @@ -0,0 +1,22 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface VstackProperties { + justify?: SystemProperties["justifyContent"] + gap?: SystemProperties["gap"] +} + + +interface VstackStyles extends VstackProperties, DistributiveOmit {} + +interface VstackPatternFn { + (styles?: VstackStyles): string + raw: (styles?: VstackStyles) => SystemStyleObject +} + + +export declare const vstack: VstackPatternFn; diff --git a/panda/patterns/vstack.mjs b/panda/patterns/vstack.mjs new file mode 100644 index 0000000..287476c --- /dev/null +++ b/panda/patterns/vstack.mjs @@ -0,0 +1,24 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const vstackConfig = { +transform(props) { + const { justify, gap, ...rest } = props; + return { + display: "flex", + alignItems: "center", + justifyContent: justify, + gap, + flexDirection: "column", + ...rest + }; +}, +defaultValues:{gap:'10px'}} + +export const getVstackStyle = (styles = {}) => { + const _styles = getPatternStyles(vstackConfig, styles) + return vstackConfig.transform(_styles, patternFns) +} + +export const vstack = (styles) => css(getVstackStyle(styles)) +vstack.raw = getVstackStyle \ No newline at end of file diff --git a/panda/patterns/wrap.d.ts b/panda/patterns/wrap.d.ts new file mode 100644 index 0000000..36ba882 --- /dev/null +++ b/panda/patterns/wrap.d.ts @@ -0,0 +1,25 @@ +/* eslint-disable */ +import type { SystemStyleObject, ConditionalValue } from '../types/index'; +import type { Properties } from '../types/csstype'; +import type { SystemProperties } from '../types/style-props'; +import type { DistributiveOmit } from '../types/system-types'; +import type { Tokens } from '../tokens/index'; + +export interface WrapProperties { + gap?: SystemProperties["gap"] + rowGap?: SystemProperties["gap"] + columnGap?: SystemProperties["gap"] + align?: SystemProperties["alignItems"] + justify?: SystemProperties["justifyContent"] +} + + +interface WrapStyles extends WrapProperties, DistributiveOmit {} + +interface WrapPatternFn { + (styles?: WrapStyles): string + raw: (styles?: WrapStyles) => SystemStyleObject +} + + +export declare const wrap: WrapPatternFn; diff --git a/panda/patterns/wrap.mjs b/panda/patterns/wrap.mjs new file mode 100644 index 0000000..225a0d6 --- /dev/null +++ b/panda/patterns/wrap.mjs @@ -0,0 +1,25 @@ +import { getPatternStyles, patternFns } from '../helpers.mjs'; +import { css } from '../css/index.mjs'; + +const wrapConfig = { +transform(props) { + const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props; + return { + display: "flex", + flexWrap: "wrap", + alignItems: align, + justifyContent: justify, + gap, + columnGap, + rowGap, + ...rest + }; +}} + +export const getWrapStyle = (styles = {}) => { + const _styles = getPatternStyles(wrapConfig, styles) + return wrapConfig.transform(_styles, patternFns) +} + +export const wrap = (styles) => css(getWrapStyle(styles)) +wrap.raw = getWrapStyle \ No newline at end of file diff --git a/panda/tokens/index.d.ts b/panda/tokens/index.d.ts new file mode 100644 index 0000000..c398f48 --- /dev/null +++ b/panda/tokens/index.d.ts @@ -0,0 +1,9 @@ +/* eslint-disable */ +import type { Token } from './tokens'; + +export declare const token: { + (path: Token, fallback?: string): string + var: (path: Token, fallback?: string) => string +} + +export * from './tokens'; \ No newline at end of file diff --git a/panda/tokens/index.mjs b/panda/tokens/index.mjs new file mode 100644 index 0000000..8ef733c --- /dev/null +++ b/panda/tokens/index.mjs @@ -0,0 +1,1888 @@ +const tokens = { + "aspectRatios.square": { + "value": "1 / 1", + "variable": "var(--aspect-ratios-square)" + }, + "aspectRatios.landscape": { + "value": "4 / 3", + "variable": "var(--aspect-ratios-landscape)" + }, + "aspectRatios.portrait": { + "value": "3 / 4", + "variable": "var(--aspect-ratios-portrait)" + }, + "aspectRatios.wide": { + "value": "16 / 9", + "variable": "var(--aspect-ratios-wide)" + }, + "aspectRatios.ultrawide": { + "value": "18 / 5", + "variable": "var(--aspect-ratios-ultrawide)" + }, + "aspectRatios.golden": { + "value": "1.618 / 1", + "variable": "var(--aspect-ratios-golden)" + }, + "borders.none": { + "value": "none", + "variable": "var(--borders-none)" + }, + "easings.default": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "variable": "var(--easings-default)" + }, + "easings.linear": { + "value": "linear", + "variable": "var(--easings-linear)" + }, + "easings.in": { + "value": "cubic-bezier(0.4, 0, 1, 1)", + "variable": "var(--easings-in)" + }, + "easings.out": { + "value": "cubic-bezier(0, 0, 0.2, 1)", + "variable": "var(--easings-out)" + }, + "easings.in-out": { + "value": "cubic-bezier(0.4, 0, 0.2, 1)", + "variable": "var(--easings-in-out)" + }, + "durations.fastest": { + "value": "50ms", + "variable": "var(--durations-fastest)" + }, + "durations.faster": { + "value": "100ms", + "variable": "var(--durations-faster)" + }, + "durations.fast": { + "value": "150ms", + "variable": "var(--durations-fast)" + }, + "durations.normal": { + "value": "200ms", + "variable": "var(--durations-normal)" + }, + "durations.slow": { + "value": "300ms", + "variable": "var(--durations-slow)" + }, + "durations.slower": { + "value": "400ms", + "variable": "var(--durations-slower)" + }, + "durations.slowest": { + "value": "500ms", + "variable": "var(--durations-slowest)" + }, + "radii.xs": { + "value": "0.125rem", + "variable": "var(--radii-xs)" + }, + "radii.sm": { + "value": "0.25rem", + "variable": "var(--radii-sm)" + }, + "radii.md": { + "value": "0.375rem", + "variable": "var(--radii-md)" + }, + "radii.lg": { + "value": "0.5rem", + "variable": "var(--radii-lg)" + }, + "radii.xl": { + "value": "0.75rem", + "variable": "var(--radii-xl)" + }, + "radii.2xl": { + "value": "1rem", + "variable": "var(--radii-2xl)" + }, + "radii.3xl": { + "value": "1.5rem", + "variable": "var(--radii-3xl)" + }, + "radii.full": { + "value": "9999px", + "variable": "var(--radii-full)" + }, + "fontWeights.thin": { + "value": "100", + "variable": "var(--font-weights-thin)" + }, + "fontWeights.extralight": { + "value": "200", + "variable": "var(--font-weights-extralight)" + }, + "fontWeights.light": { + "value": "300", + "variable": "var(--font-weights-light)" + }, + "fontWeights.normal": { + "value": "400", + "variable": "var(--font-weights-normal)" + }, + "fontWeights.medium": { + "value": "500", + "variable": "var(--font-weights-medium)" + }, + "fontWeights.semibold": { + "value": "600", + "variable": "var(--font-weights-semibold)" + }, + "fontWeights.bold": { + "value": "700", + "variable": "var(--font-weights-bold)" + }, + "fontWeights.extrabold": { + "value": "800", + "variable": "var(--font-weights-extrabold)" + }, + "fontWeights.black": { + "value": "900", + "variable": "var(--font-weights-black)" + }, + "lineHeights.none": { + "value": "1", + "variable": "var(--line-heights-none)" + }, + "lineHeights.tight": { + "value": "1.25", + "variable": "var(--line-heights-tight)" + }, + "lineHeights.snug": { + "value": "1.375", + "variable": "var(--line-heights-snug)" + }, + "lineHeights.normal": { + "value": "1.5", + "variable": "var(--line-heights-normal)" + }, + "lineHeights.relaxed": { + "value": "1.625", + "variable": "var(--line-heights-relaxed)" + }, + "lineHeights.loose": { + "value": "2", + "variable": "var(--line-heights-loose)" + }, + "letterSpacings.tighter": { + "value": "-0.05em", + "variable": "var(--letter-spacings-tighter)" + }, + "letterSpacings.tight": { + "value": "-0.025em", + "variable": "var(--letter-spacings-tight)" + }, + "letterSpacings.normal": { + "value": "0em", + "variable": "var(--letter-spacings-normal)" + }, + "letterSpacings.wide": { + "value": "0.025em", + "variable": "var(--letter-spacings-wide)" + }, + "letterSpacings.wider": { + "value": "0.05em", + "variable": "var(--letter-spacings-wider)" + }, + "letterSpacings.widest": { + "value": "0.1em", + "variable": "var(--letter-spacings-widest)" + }, + "fontSizes.2xs": { + "value": "0.5rem", + "variable": "var(--font-sizes-2xs)" + }, + "fontSizes.xs": { + "value": "0.75rem", + "variable": "var(--font-sizes-xs)" + }, + "fontSizes.sm": { + "value": "0.875rem", + "variable": "var(--font-sizes-sm)" + }, + "fontSizes.md": { + "value": "1rem", + "variable": "var(--font-sizes-md)" + }, + "fontSizes.lg": { + "value": "1.125rem", + "variable": "var(--font-sizes-lg)" + }, + "fontSizes.xl": { + "value": "1.25rem", + "variable": "var(--font-sizes-xl)" + }, + "fontSizes.2xl": { + "value": "1.5rem", + "variable": "var(--font-sizes-2xl)" + }, + "fontSizes.3xl": { + "value": "1.875rem", + "variable": "var(--font-sizes-3xl)" + }, + "fontSizes.4xl": { + "value": "2.25rem", + "variable": "var(--font-sizes-4xl)" + }, + "fontSizes.5xl": { + "value": "3rem", + "variable": "var(--font-sizes-5xl)" + }, + "fontSizes.6xl": { + "value": "3.75rem", + "variable": "var(--font-sizes-6xl)" + }, + "fontSizes.7xl": { + "value": "4.5rem", + "variable": "var(--font-sizes-7xl)" + }, + "fontSizes.8xl": { + "value": "6rem", + "variable": "var(--font-sizes-8xl)" + }, + "fontSizes.9xl": { + "value": "8rem", + "variable": "var(--font-sizes-9xl)" + }, + "shadows.xs": { + "value": "0 1px 2px 0 rgb(0 0 0 / 0.05)", + "variable": "var(--shadows-xs)" + }, + "shadows.sm": { + "value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-sm)" + }, + "shadows.md": { + "value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-md)" + }, + "shadows.lg": { + "value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-lg)" + }, + "shadows.xl": { + "value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)", + "variable": "var(--shadows-xl)" + }, + "shadows.2xl": { + "value": "0 25px 50px -12px rgb(0 0 0 / 0.25)", + "variable": "var(--shadows-2xl)" + }, + "shadows.inner": { + "value": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)", + "variable": "var(--shadows-inner)" + }, + "colors.current": { + "value": "currentColor", + "variable": "var(--colors-current)" + }, + "colors.black": { + "value": "#000", + "variable": "var(--colors-black)" + }, + "colors.white": { + "value": "#fff", + "variable": "var(--colors-white)" + }, + "colors.transparent": { + "value": "rgb(0 0 0 / 0)", + "variable": "var(--colors-transparent)" + }, + "colors.rose.50": { + "value": "#fff1f2", + "variable": "var(--colors-rose-50)" + }, + "colors.rose.100": { + "value": "#ffe4e6", + "variable": "var(--colors-rose-100)" + }, + "colors.rose.200": { + "value": "#fecdd3", + "variable": "var(--colors-rose-200)" + }, + "colors.rose.300": { + "value": "#fda4af", + "variable": "var(--colors-rose-300)" + }, + "colors.rose.400": { + "value": "#fb7185", + "variable": "var(--colors-rose-400)" + }, + "colors.rose.500": { + "value": "#f43f5e", + "variable": "var(--colors-rose-500)" + }, + "colors.rose.600": { + "value": "#e11d48", + "variable": "var(--colors-rose-600)" + }, + "colors.rose.700": { + "value": "#be123c", + "variable": "var(--colors-rose-700)" + }, + "colors.rose.800": { + "value": "#9f1239", + "variable": "var(--colors-rose-800)" + }, + "colors.rose.900": { + "value": "#881337", + "variable": "var(--colors-rose-900)" + }, + "colors.rose.950": { + "value": "#4c0519", + "variable": "var(--colors-rose-950)" + }, + "colors.pink.50": { + "value": "#fdf2f8", + "variable": "var(--colors-pink-50)" + }, + "colors.pink.100": { + "value": "#fce7f3", + "variable": "var(--colors-pink-100)" + }, + "colors.pink.200": { + "value": "#fbcfe8", + "variable": "var(--colors-pink-200)" + }, + "colors.pink.300": { + "value": "#f9a8d4", + "variable": "var(--colors-pink-300)" + }, + "colors.pink.400": { + "value": "#f472b6", + "variable": "var(--colors-pink-400)" + }, + "colors.pink.500": { + "value": "#ec4899", + "variable": "var(--colors-pink-500)" + }, + "colors.pink.600": { + "value": "#db2777", + "variable": "var(--colors-pink-600)" + }, + "colors.pink.700": { + "value": "#be185d", + "variable": "var(--colors-pink-700)" + }, + "colors.pink.800": { + "value": "#9d174d", + "variable": "var(--colors-pink-800)" + }, + "colors.pink.900": { + "value": "#831843", + "variable": "var(--colors-pink-900)" + }, + "colors.pink.950": { + "value": "#500724", + "variable": "var(--colors-pink-950)" + }, + "colors.fuchsia.50": { + "value": "#fdf4ff", + "variable": "var(--colors-fuchsia-50)" + }, + "colors.fuchsia.100": { + "value": "#fae8ff", + "variable": "var(--colors-fuchsia-100)" + }, + "colors.fuchsia.200": { + "value": "#f5d0fe", + "variable": "var(--colors-fuchsia-200)" + }, + "colors.fuchsia.300": { + "value": "#f0abfc", + "variable": "var(--colors-fuchsia-300)" + }, + "colors.fuchsia.400": { + "value": "#e879f9", + "variable": "var(--colors-fuchsia-400)" + }, + "colors.fuchsia.500": { + "value": "#d946ef", + "variable": "var(--colors-fuchsia-500)" + }, + "colors.fuchsia.600": { + "value": "#c026d3", + "variable": "var(--colors-fuchsia-600)" + }, + "colors.fuchsia.700": { + "value": "#a21caf", + "variable": "var(--colors-fuchsia-700)" + }, + "colors.fuchsia.800": { + "value": "#86198f", + "variable": "var(--colors-fuchsia-800)" + }, + "colors.fuchsia.900": { + "value": "#701a75", + "variable": "var(--colors-fuchsia-900)" + }, + "colors.fuchsia.950": { + "value": "#4a044e", + "variable": "var(--colors-fuchsia-950)" + }, + "colors.purple.50": { + "value": "#faf5ff", + "variable": "var(--colors-purple-50)" + }, + "colors.purple.100": { + "value": "#f3e8ff", + "variable": "var(--colors-purple-100)" + }, + "colors.purple.200": { + "value": "#e9d5ff", + "variable": "var(--colors-purple-200)" + }, + "colors.purple.300": { + "value": "#d8b4fe", + "variable": "var(--colors-purple-300)" + }, + "colors.purple.400": { + "value": "#c084fc", + "variable": "var(--colors-purple-400)" + }, + "colors.purple.500": { + "value": "#a855f7", + "variable": "var(--colors-purple-500)" + }, + "colors.purple.600": { + "value": "#9333ea", + "variable": "var(--colors-purple-600)" + }, + "colors.purple.700": { + "value": "#7e22ce", + "variable": "var(--colors-purple-700)" + }, + "colors.purple.800": { + "value": "#6b21a8", + "variable": "var(--colors-purple-800)" + }, + "colors.purple.900": { + "value": "#581c87", + "variable": "var(--colors-purple-900)" + }, + "colors.purple.950": { + "value": "#3b0764", + "variable": "var(--colors-purple-950)" + }, + "colors.violet.50": { + "value": "#f5f3ff", + "variable": "var(--colors-violet-50)" + }, + "colors.violet.100": { + "value": "#ede9fe", + "variable": "var(--colors-violet-100)" + }, + "colors.violet.200": { + "value": "#ddd6fe", + "variable": "var(--colors-violet-200)" + }, + "colors.violet.300": { + "value": "#c4b5fd", + "variable": "var(--colors-violet-300)" + }, + "colors.violet.400": { + "value": "#a78bfa", + "variable": "var(--colors-violet-400)" + }, + "colors.violet.500": { + "value": "#8b5cf6", + "variable": "var(--colors-violet-500)" + }, + "colors.violet.600": { + "value": "#7c3aed", + "variable": "var(--colors-violet-600)" + }, + "colors.violet.700": { + "value": "#6d28d9", + "variable": "var(--colors-violet-700)" + }, + "colors.violet.800": { + "value": "#5b21b6", + "variable": "var(--colors-violet-800)" + }, + "colors.violet.900": { + "value": "#4c1d95", + "variable": "var(--colors-violet-900)" + }, + "colors.violet.950": { + "value": "#2e1065", + "variable": "var(--colors-violet-950)" + }, + "colors.indigo.50": { + "value": "#eef2ff", + "variable": "var(--colors-indigo-50)" + }, + "colors.indigo.100": { + "value": "#e0e7ff", + "variable": "var(--colors-indigo-100)" + }, + "colors.indigo.200": { + "value": "#c7d2fe", + "variable": "var(--colors-indigo-200)" + }, + "colors.indigo.300": { + "value": "#a5b4fc", + "variable": "var(--colors-indigo-300)" + }, + "colors.indigo.400": { + "value": "#818cf8", + "variable": "var(--colors-indigo-400)" + }, + "colors.indigo.500": { + "value": "#6366f1", + "variable": "var(--colors-indigo-500)" + }, + "colors.indigo.600": { + "value": "#4f46e5", + "variable": "var(--colors-indigo-600)" + }, + "colors.indigo.700": { + "value": "#4338ca", + "variable": "var(--colors-indigo-700)" + }, + "colors.indigo.800": { + "value": "#3730a3", + "variable": "var(--colors-indigo-800)" + }, + "colors.indigo.900": { + "value": "#312e81", + "variable": "var(--colors-indigo-900)" + }, + "colors.indigo.950": { + "value": "#1e1b4b", + "variable": "var(--colors-indigo-950)" + }, + "colors.blue.50": { + "value": "#eff6ff", + "variable": "var(--colors-blue-50)" + }, + "colors.blue.100": { + "value": "#dbeafe", + "variable": "var(--colors-blue-100)" + }, + "colors.blue.200": { + "value": "#bfdbfe", + "variable": "var(--colors-blue-200)" + }, + "colors.blue.300": { + "value": "#93c5fd", + "variable": "var(--colors-blue-300)" + }, + "colors.blue.400": { + "value": "#60a5fa", + "variable": "var(--colors-blue-400)" + }, + "colors.blue.500": { + "value": "#3b82f6", + "variable": "var(--colors-blue-500)" + }, + "colors.blue.600": { + "value": "#2563eb", + "variable": "var(--colors-blue-600)" + }, + "colors.blue.700": { + "value": "#1d4ed8", + "variable": "var(--colors-blue-700)" + }, + "colors.blue.800": { + "value": "#1e40af", + "variable": "var(--colors-blue-800)" + }, + "colors.blue.900": { + "value": "#1e3a8a", + "variable": "var(--colors-blue-900)" + }, + "colors.blue.950": { + "value": "#172554", + "variable": "var(--colors-blue-950)" + }, + "colors.sky.50": { + "value": "#f0f9ff", + "variable": "var(--colors-sky-50)" + }, + "colors.sky.100": { + "value": "#e0f2fe", + "variable": "var(--colors-sky-100)" + }, + "colors.sky.200": { + "value": "#bae6fd", + "variable": "var(--colors-sky-200)" + }, + "colors.sky.300": { + "value": "#7dd3fc", + "variable": "var(--colors-sky-300)" + }, + "colors.sky.400": { + "value": "#38bdf8", + "variable": "var(--colors-sky-400)" + }, + "colors.sky.500": { + "value": "#0ea5e9", + "variable": "var(--colors-sky-500)" + }, + "colors.sky.600": { + "value": "#0284c7", + "variable": "var(--colors-sky-600)" + }, + "colors.sky.700": { + "value": "#0369a1", + "variable": "var(--colors-sky-700)" + }, + "colors.sky.800": { + "value": "#075985", + "variable": "var(--colors-sky-800)" + }, + "colors.sky.900": { + "value": "#0c4a6e", + "variable": "var(--colors-sky-900)" + }, + "colors.sky.950": { + "value": "#082f49", + "variable": "var(--colors-sky-950)" + }, + "colors.cyan.50": { + "value": "#ecfeff", + "variable": "var(--colors-cyan-50)" + }, + "colors.cyan.100": { + "value": "#cffafe", + "variable": "var(--colors-cyan-100)" + }, + "colors.cyan.200": { + "value": "#a5f3fc", + "variable": "var(--colors-cyan-200)" + }, + "colors.cyan.300": { + "value": "#67e8f9", + "variable": "var(--colors-cyan-300)" + }, + "colors.cyan.400": { + "value": "#22d3ee", + "variable": "var(--colors-cyan-400)" + }, + "colors.cyan.500": { + "value": "#06b6d4", + "variable": "var(--colors-cyan-500)" + }, + "colors.cyan.600": { + "value": "#0891b2", + "variable": "var(--colors-cyan-600)" + }, + "colors.cyan.700": { + "value": "#0e7490", + "variable": "var(--colors-cyan-700)" + }, + "colors.cyan.800": { + "value": "#155e75", + "variable": "var(--colors-cyan-800)" + }, + "colors.cyan.900": { + "value": "#164e63", + "variable": "var(--colors-cyan-900)" + }, + "colors.cyan.950": { + "value": "#083344", + "variable": "var(--colors-cyan-950)" + }, + "colors.teal.50": { + "value": "#f0fdfa", + "variable": "var(--colors-teal-50)" + }, + "colors.teal.100": { + "value": "#ccfbf1", + "variable": "var(--colors-teal-100)" + }, + "colors.teal.200": { + "value": "#99f6e4", + "variable": "var(--colors-teal-200)" + }, + "colors.teal.300": { + "value": "#5eead4", + "variable": "var(--colors-teal-300)" + }, + "colors.teal.400": { + "value": "#2dd4bf", + "variable": "var(--colors-teal-400)" + }, + "colors.teal.500": { + "value": "#14b8a6", + "variable": "var(--colors-teal-500)" + }, + "colors.teal.600": { + "value": "#0d9488", + "variable": "var(--colors-teal-600)" + }, + "colors.teal.700": { + "value": "#0f766e", + "variable": "var(--colors-teal-700)" + }, + "colors.teal.800": { + "value": "#115e59", + "variable": "var(--colors-teal-800)" + }, + "colors.teal.900": { + "value": "#134e4a", + "variable": "var(--colors-teal-900)" + }, + "colors.teal.950": { + "value": "#042f2e", + "variable": "var(--colors-teal-950)" + }, + "colors.emerald.50": { + "value": "#ecfdf5", + "variable": "var(--colors-emerald-50)" + }, + "colors.emerald.100": { + "value": "#d1fae5", + "variable": "var(--colors-emerald-100)" + }, + "colors.emerald.200": { + "value": "#a7f3d0", + "variable": "var(--colors-emerald-200)" + }, + "colors.emerald.300": { + "value": "#6ee7b7", + "variable": "var(--colors-emerald-300)" + }, + "colors.emerald.400": { + "value": "#34d399", + "variable": "var(--colors-emerald-400)" + }, + "colors.emerald.500": { + "value": "#10b981", + "variable": "var(--colors-emerald-500)" + }, + "colors.emerald.600": { + "value": "#059669", + "variable": "var(--colors-emerald-600)" + }, + "colors.emerald.700": { + "value": "#047857", + "variable": "var(--colors-emerald-700)" + }, + "colors.emerald.800": { + "value": "#065f46", + "variable": "var(--colors-emerald-800)" + }, + "colors.emerald.900": { + "value": "#064e3b", + "variable": "var(--colors-emerald-900)" + }, + "colors.emerald.950": { + "value": "#022c22", + "variable": "var(--colors-emerald-950)" + }, + "colors.green.50": { + "value": "#f0fdf4", + "variable": "var(--colors-green-50)" + }, + "colors.green.100": { + "value": "#dcfce7", + "variable": "var(--colors-green-100)" + }, + "colors.green.200": { + "value": "#bbf7d0", + "variable": "var(--colors-green-200)" + }, + "colors.green.300": { + "value": "#86efac", + "variable": "var(--colors-green-300)" + }, + "colors.green.400": { + "value": "#4ade80", + "variable": "var(--colors-green-400)" + }, + "colors.green.500": { + "value": "#22c55e", + "variable": "var(--colors-green-500)" + }, + "colors.green.600": { + "value": "#16a34a", + "variable": "var(--colors-green-600)" + }, + "colors.green.700": { + "value": "#15803d", + "variable": "var(--colors-green-700)" + }, + "colors.green.800": { + "value": "#166534", + "variable": "var(--colors-green-800)" + }, + "colors.green.900": { + "value": "#14532d", + "variable": "var(--colors-green-900)" + }, + "colors.green.950": { + "value": "#052e16", + "variable": "var(--colors-green-950)" + }, + "colors.lime.50": { + "value": "#f7fee7", + "variable": "var(--colors-lime-50)" + }, + "colors.lime.100": { + "value": "#ecfccb", + "variable": "var(--colors-lime-100)" + }, + "colors.lime.200": { + "value": "#d9f99d", + "variable": "var(--colors-lime-200)" + }, + "colors.lime.300": { + "value": "#bef264", + "variable": "var(--colors-lime-300)" + }, + "colors.lime.400": { + "value": "#a3e635", + "variable": "var(--colors-lime-400)" + }, + "colors.lime.500": { + "value": "#84cc16", + "variable": "var(--colors-lime-500)" + }, + "colors.lime.600": { + "value": "#65a30d", + "variable": "var(--colors-lime-600)" + }, + "colors.lime.700": { + "value": "#4d7c0f", + "variable": "var(--colors-lime-700)" + }, + "colors.lime.800": { + "value": "#3f6212", + "variable": "var(--colors-lime-800)" + }, + "colors.lime.900": { + "value": "#365314", + "variable": "var(--colors-lime-900)" + }, + "colors.lime.950": { + "value": "#1a2e05", + "variable": "var(--colors-lime-950)" + }, + "colors.yellow.50": { + "value": "#fefce8", + "variable": "var(--colors-yellow-50)" + }, + "colors.yellow.100": { + "value": "#fef9c3", + "variable": "var(--colors-yellow-100)" + }, + "colors.yellow.200": { + "value": "#fef08a", + "variable": "var(--colors-yellow-200)" + }, + "colors.yellow.300": { + "value": "#fde047", + "variable": "var(--colors-yellow-300)" + }, + "colors.yellow.400": { + "value": "#facc15", + "variable": "var(--colors-yellow-400)" + }, + "colors.yellow.500": { + "value": "#eab308", + "variable": "var(--colors-yellow-500)" + }, + "colors.yellow.600": { + "value": "#ca8a04", + "variable": "var(--colors-yellow-600)" + }, + "colors.yellow.700": { + "value": "#a16207", + "variable": "var(--colors-yellow-700)" + }, + "colors.yellow.800": { + "value": "#854d0e", + "variable": "var(--colors-yellow-800)" + }, + "colors.yellow.900": { + "value": "#713f12", + "variable": "var(--colors-yellow-900)" + }, + "colors.yellow.950": { + "value": "#422006", + "variable": "var(--colors-yellow-950)" + }, + "colors.amber.50": { + "value": "#fffbeb", + "variable": "var(--colors-amber-50)" + }, + "colors.amber.100": { + "value": "#fef3c7", + "variable": "var(--colors-amber-100)" + }, + "colors.amber.200": { + "value": "#fde68a", + "variable": "var(--colors-amber-200)" + }, + "colors.amber.300": { + "value": "#fcd34d", + "variable": "var(--colors-amber-300)" + }, + "colors.amber.400": { + "value": "#fbbf24", + "variable": "var(--colors-amber-400)" + }, + "colors.amber.500": { + "value": "#f59e0b", + "variable": "var(--colors-amber-500)" + }, + "colors.amber.600": { + "value": "#d97706", + "variable": "var(--colors-amber-600)" + }, + "colors.amber.700": { + "value": "#b45309", + "variable": "var(--colors-amber-700)" + }, + "colors.amber.800": { + "value": "#92400e", + "variable": "var(--colors-amber-800)" + }, + "colors.amber.900": { + "value": "#78350f", + "variable": "var(--colors-amber-900)" + }, + "colors.amber.950": { + "value": "#451a03", + "variable": "var(--colors-amber-950)" + }, + "colors.orange.50": { + "value": "#fff7ed", + "variable": "var(--colors-orange-50)" + }, + "colors.orange.100": { + "value": "#ffedd5", + "variable": "var(--colors-orange-100)" + }, + "colors.orange.200": { + "value": "#fed7aa", + "variable": "var(--colors-orange-200)" + }, + "colors.orange.300": { + "value": "#fdba74", + "variable": "var(--colors-orange-300)" + }, + "colors.orange.400": { + "value": "#fb923c", + "variable": "var(--colors-orange-400)" + }, + "colors.orange.500": { + "value": "#f97316", + "variable": "var(--colors-orange-500)" + }, + "colors.orange.600": { + "value": "#ea580c", + "variable": "var(--colors-orange-600)" + }, + "colors.orange.700": { + "value": "#c2410c", + "variable": "var(--colors-orange-700)" + }, + "colors.orange.800": { + "value": "#9a3412", + "variable": "var(--colors-orange-800)" + }, + "colors.orange.900": { + "value": "#7c2d12", + "variable": "var(--colors-orange-900)" + }, + "colors.orange.950": { + "value": "#431407", + "variable": "var(--colors-orange-950)" + }, + "colors.red.50": { + "value": "#fef2f2", + "variable": "var(--colors-red-50)" + }, + "colors.red.100": { + "value": "#fee2e2", + "variable": "var(--colors-red-100)" + }, + "colors.red.200": { + "value": "#fecaca", + "variable": "var(--colors-red-200)" + }, + "colors.red.300": { + "value": "#fca5a5", + "variable": "var(--colors-red-300)" + }, + "colors.red.400": { + "value": "#f87171", + "variable": "var(--colors-red-400)" + }, + "colors.red.500": { + "value": "#ef4444", + "variable": "var(--colors-red-500)" + }, + "colors.red.600": { + "value": "#dc2626", + "variable": "var(--colors-red-600)" + }, + "colors.red.700": { + "value": "#b91c1c", + "variable": "var(--colors-red-700)" + }, + "colors.red.800": { + "value": "#991b1b", + "variable": "var(--colors-red-800)" + }, + "colors.red.900": { + "value": "#7f1d1d", + "variable": "var(--colors-red-900)" + }, + "colors.red.950": { + "value": "#450a0a", + "variable": "var(--colors-red-950)" + }, + "colors.neutral.50": { + "value": "#fafafa", + "variable": "var(--colors-neutral-50)" + }, + "colors.neutral.100": { + "value": "#f5f5f5", + "variable": "var(--colors-neutral-100)" + }, + "colors.neutral.200": { + "value": "#e5e5e5", + "variable": "var(--colors-neutral-200)" + }, + "colors.neutral.300": { + "value": "#d4d4d4", + "variable": "var(--colors-neutral-300)" + }, + "colors.neutral.400": { + "value": "#a3a3a3", + "variable": "var(--colors-neutral-400)" + }, + "colors.neutral.500": { + "value": "#737373", + "variable": "var(--colors-neutral-500)" + }, + "colors.neutral.600": { + "value": "#525252", + "variable": "var(--colors-neutral-600)" + }, + "colors.neutral.700": { + "value": "#404040", + "variable": "var(--colors-neutral-700)" + }, + "colors.neutral.800": { + "value": "#262626", + "variable": "var(--colors-neutral-800)" + }, + "colors.neutral.900": { + "value": "#171717", + "variable": "var(--colors-neutral-900)" + }, + "colors.neutral.950": { + "value": "#0a0a0a", + "variable": "var(--colors-neutral-950)" + }, + "colors.stone.50": { + "value": "#fafaf9", + "variable": "var(--colors-stone-50)" + }, + "colors.stone.100": { + "value": "#f5f5f4", + "variable": "var(--colors-stone-100)" + }, + "colors.stone.200": { + "value": "#e7e5e4", + "variable": "var(--colors-stone-200)" + }, + "colors.stone.300": { + "value": "#d6d3d1", + "variable": "var(--colors-stone-300)" + }, + "colors.stone.400": { + "value": "#a8a29e", + "variable": "var(--colors-stone-400)" + }, + "colors.stone.500": { + "value": "#78716c", + "variable": "var(--colors-stone-500)" + }, + "colors.stone.600": { + "value": "#57534e", + "variable": "var(--colors-stone-600)" + }, + "colors.stone.700": { + "value": "#44403c", + "variable": "var(--colors-stone-700)" + }, + "colors.stone.800": { + "value": "#292524", + "variable": "var(--colors-stone-800)" + }, + "colors.stone.900": { + "value": "#1c1917", + "variable": "var(--colors-stone-900)" + }, + "colors.stone.950": { + "value": "#0c0a09", + "variable": "var(--colors-stone-950)" + }, + "colors.zinc.50": { + "value": "#fafafa", + "variable": "var(--colors-zinc-50)" + }, + "colors.zinc.100": { + "value": "#f4f4f5", + "variable": "var(--colors-zinc-100)" + }, + "colors.zinc.200": { + "value": "#e4e4e7", + "variable": "var(--colors-zinc-200)" + }, + "colors.zinc.300": { + "value": "#d4d4d8", + "variable": "var(--colors-zinc-300)" + }, + "colors.zinc.400": { + "value": "#a1a1aa", + "variable": "var(--colors-zinc-400)" + }, + "colors.zinc.500": { + "value": "#71717a", + "variable": "var(--colors-zinc-500)" + }, + "colors.zinc.600": { + "value": "#52525b", + "variable": "var(--colors-zinc-600)" + }, + "colors.zinc.700": { + "value": "#3f3f46", + "variable": "var(--colors-zinc-700)" + }, + "colors.zinc.800": { + "value": "#27272a", + "variable": "var(--colors-zinc-800)" + }, + "colors.zinc.900": { + "value": "#18181b", + "variable": "var(--colors-zinc-900)" + }, + "colors.zinc.950": { + "value": "#09090b", + "variable": "var(--colors-zinc-950)" + }, + "colors.gray.50": { + "value": "#f9fafb", + "variable": "var(--colors-gray-50)" + }, + "colors.gray.100": { + "value": "#f3f4f6", + "variable": "var(--colors-gray-100)" + }, + "colors.gray.200": { + "value": "#e5e7eb", + "variable": "var(--colors-gray-200)" + }, + "colors.gray.300": { + "value": "#d1d5db", + "variable": "var(--colors-gray-300)" + }, + "colors.gray.400": { + "value": "#9ca3af", + "variable": "var(--colors-gray-400)" + }, + "colors.gray.500": { + "value": "#6b7280", + "variable": "var(--colors-gray-500)" + }, + "colors.gray.600": { + "value": "#4b5563", + "variable": "var(--colors-gray-600)" + }, + "colors.gray.700": { + "value": "#374151", + "variable": "var(--colors-gray-700)" + }, + "colors.gray.800": { + "value": "#1f2937", + "variable": "var(--colors-gray-800)" + }, + "colors.gray.900": { + "value": "#111827", + "variable": "var(--colors-gray-900)" + }, + "colors.gray.950": { + "value": "#030712", + "variable": "var(--colors-gray-950)" + }, + "colors.slate.50": { + "value": "#f8fafc", + "variable": "var(--colors-slate-50)" + }, + "colors.slate.100": { + "value": "#f1f5f9", + "variable": "var(--colors-slate-100)" + }, + "colors.slate.200": { + "value": "#e2e8f0", + "variable": "var(--colors-slate-200)" + }, + "colors.slate.300": { + "value": "#cbd5e1", + "variable": "var(--colors-slate-300)" + }, + "colors.slate.400": { + "value": "#94a3b8", + "variable": "var(--colors-slate-400)" + }, + "colors.slate.500": { + "value": "#64748b", + "variable": "var(--colors-slate-500)" + }, + "colors.slate.600": { + "value": "#475569", + "variable": "var(--colors-slate-600)" + }, + "colors.slate.700": { + "value": "#334155", + "variable": "var(--colors-slate-700)" + }, + "colors.slate.800": { + "value": "#1e293b", + "variable": "var(--colors-slate-800)" + }, + "colors.slate.900": { + "value": "#0f172a", + "variable": "var(--colors-slate-900)" + }, + "colors.slate.950": { + "value": "#020617", + "variable": "var(--colors-slate-950)" + }, + "blurs.sm": { + "value": "4px", + "variable": "var(--blurs-sm)" + }, + "blurs.base": { + "value": "8px", + "variable": "var(--blurs-base)" + }, + "blurs.md": { + "value": "12px", + "variable": "var(--blurs-md)" + }, + "blurs.lg": { + "value": "16px", + "variable": "var(--blurs-lg)" + }, + "blurs.xl": { + "value": "24px", + "variable": "var(--blurs-xl)" + }, + "blurs.2xl": { + "value": "40px", + "variable": "var(--blurs-2xl)" + }, + "blurs.3xl": { + "value": "64px", + "variable": "var(--blurs-3xl)" + }, + "spacing.0": { + "value": "0rem", + "variable": "var(--spacing-0)" + }, + "spacing.1": { + "value": "0.25rem", + "variable": "var(--spacing-1)" + }, + "spacing.2": { + "value": "0.5rem", + "variable": "var(--spacing-2)" + }, + "spacing.3": { + "value": "0.75rem", + "variable": "var(--spacing-3)" + }, + "spacing.4": { + "value": "1rem", + "variable": "var(--spacing-4)" + }, + "spacing.5": { + "value": "1.25rem", + "variable": "var(--spacing-5)" + }, + "spacing.6": { + "value": "1.5rem", + "variable": "var(--spacing-6)" + }, + "spacing.7": { + "value": "1.75rem", + "variable": "var(--spacing-7)" + }, + "spacing.8": { + "value": "2rem", + "variable": "var(--spacing-8)" + }, + "spacing.9": { + "value": "2.25rem", + "variable": "var(--spacing-9)" + }, + "spacing.10": { + "value": "2.5rem", + "variable": "var(--spacing-10)" + }, + "spacing.11": { + "value": "2.75rem", + "variable": "var(--spacing-11)" + }, + "spacing.12": { + "value": "3rem", + "variable": "var(--spacing-12)" + }, + "spacing.14": { + "value": "3.5rem", + "variable": "var(--spacing-14)" + }, + "spacing.16": { + "value": "4rem", + "variable": "var(--spacing-16)" + }, + "spacing.20": { + "value": "5rem", + "variable": "var(--spacing-20)" + }, + "spacing.24": { + "value": "6rem", + "variable": "var(--spacing-24)" + }, + "spacing.28": { + "value": "7rem", + "variable": "var(--spacing-28)" + }, + "spacing.32": { + "value": "8rem", + "variable": "var(--spacing-32)" + }, + "spacing.36": { + "value": "9rem", + "variable": "var(--spacing-36)" + }, + "spacing.40": { + "value": "10rem", + "variable": "var(--spacing-40)" + }, + "spacing.44": { + "value": "11rem", + "variable": "var(--spacing-44)" + }, + "spacing.48": { + "value": "12rem", + "variable": "var(--spacing-48)" + }, + "spacing.52": { + "value": "13rem", + "variable": "var(--spacing-52)" + }, + "spacing.56": { + "value": "14rem", + "variable": "var(--spacing-56)" + }, + "spacing.60": { + "value": "15rem", + "variable": "var(--spacing-60)" + }, + "spacing.64": { + "value": "16rem", + "variable": "var(--spacing-64)" + }, + "spacing.72": { + "value": "18rem", + "variable": "var(--spacing-72)" + }, + "spacing.80": { + "value": "20rem", + "variable": "var(--spacing-80)" + }, + "spacing.96": { + "value": "24rem", + "variable": "var(--spacing-96)" + }, + "spacing.0.5": { + "value": "0.125rem", + "variable": "var(--spacing-0\\.5)" + }, + "spacing.1.5": { + "value": "0.375rem", + "variable": "var(--spacing-1\\.5)" + }, + "spacing.2.5": { + "value": "0.625rem", + "variable": "var(--spacing-2\\.5)" + }, + "spacing.3.5": { + "value": "0.875rem", + "variable": "var(--spacing-3\\.5)" + }, + "sizes.0": { + "value": "0rem", + "variable": "var(--sizes-0)" + }, + "sizes.1": { + "value": "0.25rem", + "variable": "var(--sizes-1)" + }, + "sizes.2": { + "value": "0.5rem", + "variable": "var(--sizes-2)" + }, + "sizes.3": { + "value": "0.75rem", + "variable": "var(--sizes-3)" + }, + "sizes.4": { + "value": "1rem", + "variable": "var(--sizes-4)" + }, + "sizes.5": { + "value": "1.25rem", + "variable": "var(--sizes-5)" + }, + "sizes.6": { + "value": "1.5rem", + "variable": "var(--sizes-6)" + }, + "sizes.7": { + "value": "1.75rem", + "variable": "var(--sizes-7)" + }, + "sizes.8": { + "value": "2rem", + "variable": "var(--sizes-8)" + }, + "sizes.9": { + "value": "2.25rem", + "variable": "var(--sizes-9)" + }, + "sizes.10": { + "value": "2.5rem", + "variable": "var(--sizes-10)" + }, + "sizes.11": { + "value": "2.75rem", + "variable": "var(--sizes-11)" + }, + "sizes.12": { + "value": "3rem", + "variable": "var(--sizes-12)" + }, + "sizes.14": { + "value": "3.5rem", + "variable": "var(--sizes-14)" + }, + "sizes.16": { + "value": "4rem", + "variable": "var(--sizes-16)" + }, + "sizes.20": { + "value": "5rem", + "variable": "var(--sizes-20)" + }, + "sizes.24": { + "value": "6rem", + "variable": "var(--sizes-24)" + }, + "sizes.28": { + "value": "7rem", + "variable": "var(--sizes-28)" + }, + "sizes.32": { + "value": "8rem", + "variable": "var(--sizes-32)" + }, + "sizes.36": { + "value": "9rem", + "variable": "var(--sizes-36)" + }, + "sizes.40": { + "value": "10rem", + "variable": "var(--sizes-40)" + }, + "sizes.44": { + "value": "11rem", + "variable": "var(--sizes-44)" + }, + "sizes.48": { + "value": "12rem", + "variable": "var(--sizes-48)" + }, + "sizes.52": { + "value": "13rem", + "variable": "var(--sizes-52)" + }, + "sizes.56": { + "value": "14rem", + "variable": "var(--sizes-56)" + }, + "sizes.60": { + "value": "15rem", + "variable": "var(--sizes-60)" + }, + "sizes.64": { + "value": "16rem", + "variable": "var(--sizes-64)" + }, + "sizes.72": { + "value": "18rem", + "variable": "var(--sizes-72)" + }, + "sizes.80": { + "value": "20rem", + "variable": "var(--sizes-80)" + }, + "sizes.96": { + "value": "24rem", + "variable": "var(--sizes-96)" + }, + "sizes.0.5": { + "value": "0.125rem", + "variable": "var(--sizes-0\\.5)" + }, + "sizes.1.5": { + "value": "0.375rem", + "variable": "var(--sizes-1\\.5)" + }, + "sizes.2.5": { + "value": "0.625rem", + "variable": "var(--sizes-2\\.5)" + }, + "sizes.3.5": { + "value": "0.875rem", + "variable": "var(--sizes-3\\.5)" + }, + "sizes.xs": { + "value": "20rem", + "variable": "var(--sizes-xs)" + }, + "sizes.sm": { + "value": "24rem", + "variable": "var(--sizes-sm)" + }, + "sizes.md": { + "value": "28rem", + "variable": "var(--sizes-md)" + }, + "sizes.lg": { + "value": "32rem", + "variable": "var(--sizes-lg)" + }, + "sizes.xl": { + "value": "36rem", + "variable": "var(--sizes-xl)" + }, + "sizes.2xl": { + "value": "42rem", + "variable": "var(--sizes-2xl)" + }, + "sizes.3xl": { + "value": "48rem", + "variable": "var(--sizes-3xl)" + }, + "sizes.4xl": { + "value": "56rem", + "variable": "var(--sizes-4xl)" + }, + "sizes.5xl": { + "value": "64rem", + "variable": "var(--sizes-5xl)" + }, + "sizes.6xl": { + "value": "72rem", + "variable": "var(--sizes-6xl)" + }, + "sizes.7xl": { + "value": "80rem", + "variable": "var(--sizes-7xl)" + }, + "sizes.8xl": { + "value": "90rem", + "variable": "var(--sizes-8xl)" + }, + "sizes.prose": { + "value": "65ch", + "variable": "var(--sizes-prose)" + }, + "sizes.full": { + "value": "100%", + "variable": "var(--sizes-full)" + }, + "sizes.min": { + "value": "min-content", + "variable": "var(--sizes-min)" + }, + "sizes.max": { + "value": "max-content", + "variable": "var(--sizes-max)" + }, + "sizes.fit": { + "value": "fit-content", + "variable": "var(--sizes-fit)" + }, + "sizes.breakpoint-sm": { + "value": "640px", + "variable": "var(--sizes-breakpoint-sm)" + }, + "sizes.breakpoint-md": { + "value": "768px", + "variable": "var(--sizes-breakpoint-md)" + }, + "sizes.breakpoint-lg": { + "value": "1024px", + "variable": "var(--sizes-breakpoint-lg)" + }, + "sizes.breakpoint-xl": { + "value": "1280px", + "variable": "var(--sizes-breakpoint-xl)" + }, + "sizes.breakpoint-2xl": { + "value": "1536px", + "variable": "var(--sizes-breakpoint-2xl)" + }, + "animations.spin": { + "value": "spin 1s linear infinite", + "variable": "var(--animations-spin)" + }, + "animations.ping": { + "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite", + "variable": "var(--animations-ping)" + }, + "animations.pulse": { + "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite", + "variable": "var(--animations-pulse)" + }, + "animations.bounce": { + "value": "bounce 1s infinite", + "variable": "var(--animations-bounce)" + }, + "fonts.mono": { + "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace", + "variable": "var(--fonts-mono)" + }, + "fonts.sans": { + "value": "Noto Sans JP, sans-serif", + "variable": "var(--fonts-sans)" + }, + "fonts.serif": { + "value": "Noto Serif JP, serif", + "variable": "var(--fonts-serif)" + }, + "breakpoints.sm": { + "value": "640px", + "variable": "var(--breakpoints-sm)" + }, + "breakpoints.md": { + "value": "768px", + "variable": "var(--breakpoints-md)" + }, + "breakpoints.lg": { + "value": "1024px", + "variable": "var(--breakpoints-lg)" + }, + "breakpoints.xl": { + "value": "1280px", + "variable": "var(--breakpoints-xl)" + }, + "breakpoints.2xl": { + "value": "1536px", + "variable": "var(--breakpoints-2xl)" + }, + "spacing.-1": { + "value": "calc(var(--spacing-1) * -1)", + "variable": "var(--spacing-1)" + }, + "spacing.-2": { + "value": "calc(var(--spacing-2) * -1)", + "variable": "var(--spacing-2)" + }, + "spacing.-3": { + "value": "calc(var(--spacing-3) * -1)", + "variable": "var(--spacing-3)" + }, + "spacing.-4": { + "value": "calc(var(--spacing-4) * -1)", + "variable": "var(--spacing-4)" + }, + "spacing.-5": { + "value": "calc(var(--spacing-5) * -1)", + "variable": "var(--spacing-5)" + }, + "spacing.-6": { + "value": "calc(var(--spacing-6) * -1)", + "variable": "var(--spacing-6)" + }, + "spacing.-7": { + "value": "calc(var(--spacing-7) * -1)", + "variable": "var(--spacing-7)" + }, + "spacing.-8": { + "value": "calc(var(--spacing-8) * -1)", + "variable": "var(--spacing-8)" + }, + "spacing.-9": { + "value": "calc(var(--spacing-9) * -1)", + "variable": "var(--spacing-9)" + }, + "spacing.-10": { + "value": "calc(var(--spacing-10) * -1)", + "variable": "var(--spacing-10)" + }, + "spacing.-11": { + "value": "calc(var(--spacing-11) * -1)", + "variable": "var(--spacing-11)" + }, + "spacing.-12": { + "value": "calc(var(--spacing-12) * -1)", + "variable": "var(--spacing-12)" + }, + "spacing.-14": { + "value": "calc(var(--spacing-14) * -1)", + "variable": "var(--spacing-14)" + }, + "spacing.-16": { + "value": "calc(var(--spacing-16) * -1)", + "variable": "var(--spacing-16)" + }, + "spacing.-20": { + "value": "calc(var(--spacing-20) * -1)", + "variable": "var(--spacing-20)" + }, + "spacing.-24": { + "value": "calc(var(--spacing-24) * -1)", + "variable": "var(--spacing-24)" + }, + "spacing.-28": { + "value": "calc(var(--spacing-28) * -1)", + "variable": "var(--spacing-28)" + }, + "spacing.-32": { + "value": "calc(var(--spacing-32) * -1)", + "variable": "var(--spacing-32)" + }, + "spacing.-36": { + "value": "calc(var(--spacing-36) * -1)", + "variable": "var(--spacing-36)" + }, + "spacing.-40": { + "value": "calc(var(--spacing-40) * -1)", + "variable": "var(--spacing-40)" + }, + "spacing.-44": { + "value": "calc(var(--spacing-44) * -1)", + "variable": "var(--spacing-44)" + }, + "spacing.-48": { + "value": "calc(var(--spacing-48) * -1)", + "variable": "var(--spacing-48)" + }, + "spacing.-52": { + "value": "calc(var(--spacing-52) * -1)", + "variable": "var(--spacing-52)" + }, + "spacing.-56": { + "value": "calc(var(--spacing-56) * -1)", + "variable": "var(--spacing-56)" + }, + "spacing.-60": { + "value": "calc(var(--spacing-60) * -1)", + "variable": "var(--spacing-60)" + }, + "spacing.-64": { + "value": "calc(var(--spacing-64) * -1)", + "variable": "var(--spacing-64)" + }, + "spacing.-72": { + "value": "calc(var(--spacing-72) * -1)", + "variable": "var(--spacing-72)" + }, + "spacing.-80": { + "value": "calc(var(--spacing-80) * -1)", + "variable": "var(--spacing-80)" + }, + "spacing.-96": { + "value": "calc(var(--spacing-96) * -1)", + "variable": "var(--spacing-96)" + }, + "spacing.-0.5": { + "value": "calc(var(--spacing-0\\.5) * -1)", + "variable": "var(--spacing-0\\.5)" + }, + "spacing.-1.5": { + "value": "calc(var(--spacing-1\\.5) * -1)", + "variable": "var(--spacing-1\\.5)" + }, + "spacing.-2.5": { + "value": "calc(var(--spacing-2\\.5) * -1)", + "variable": "var(--spacing-2\\.5)" + }, + "spacing.-3.5": { + "value": "calc(var(--spacing-3\\.5) * -1)", + "variable": "var(--spacing-3\\.5)" + }, + "colors.colorPalette": { + "value": "var(--colors-color-palette)", + "variable": "var(--colors-color-palette)" + }, + "colors.colorPalette.50": { + "value": "var(--colors-color-palette-50)", + "variable": "var(--colors-color-palette-50)" + }, + "colors.colorPalette.100": { + "value": "var(--colors-color-palette-100)", + "variable": "var(--colors-color-palette-100)" + }, + "colors.colorPalette.200": { + "value": "var(--colors-color-palette-200)", + "variable": "var(--colors-color-palette-200)" + }, + "colors.colorPalette.300": { + "value": "var(--colors-color-palette-300)", + "variable": "var(--colors-color-palette-300)" + }, + "colors.colorPalette.400": { + "value": "var(--colors-color-palette-400)", + "variable": "var(--colors-color-palette-400)" + }, + "colors.colorPalette.500": { + "value": "var(--colors-color-palette-500)", + "variable": "var(--colors-color-palette-500)" + }, + "colors.colorPalette.600": { + "value": "var(--colors-color-palette-600)", + "variable": "var(--colors-color-palette-600)" + }, + "colors.colorPalette.700": { + "value": "var(--colors-color-palette-700)", + "variable": "var(--colors-color-palette-700)" + }, + "colors.colorPalette.800": { + "value": "var(--colors-color-palette-800)", + "variable": "var(--colors-color-palette-800)" + }, + "colors.colorPalette.900": { + "value": "var(--colors-color-palette-900)", + "variable": "var(--colors-color-palette-900)" + }, + "colors.colorPalette.950": { + "value": "var(--colors-color-palette-950)", + "variable": "var(--colors-color-palette-950)" + } +} + +export function token(path, fallback) { + return tokens[path]?.value || fallback +} + +function tokenVar(path, fallback) { + return tokens[path]?.variable || fallback +} + +token.var = tokenVar \ No newline at end of file diff --git a/panda/tokens/tokens.d.ts b/panda/tokens/tokens.d.ts new file mode 100644 index 0000000..68e9c83 --- /dev/null +++ b/panda/tokens/tokens.d.ts @@ -0,0 +1,63 @@ +/* eslint-disable */ +export type Token = "aspectRatios.square" | "aspectRatios.landscape" | "aspectRatios.portrait" | "aspectRatios.wide" | "aspectRatios.ultrawide" | "aspectRatios.golden" | "borders.none" | "easings.default" | "easings.linear" | "easings.in" | "easings.out" | "easings.in-out" | "durations.fastest" | "durations.faster" | "durations.fast" | "durations.normal" | "durations.slow" | "durations.slower" | "durations.slowest" | "radii.xs" | "radii.sm" | "radii.md" | "radii.lg" | "radii.xl" | "radii.2xl" | "radii.3xl" | "radii.full" | "fontWeights.thin" | "fontWeights.extralight" | "fontWeights.light" | "fontWeights.normal" | "fontWeights.medium" | "fontWeights.semibold" | "fontWeights.bold" | "fontWeights.extrabold" | "fontWeights.black" | "lineHeights.none" | "lineHeights.tight" | "lineHeights.snug" | "lineHeights.normal" | "lineHeights.relaxed" | "lineHeights.loose" | "letterSpacings.tighter" | "letterSpacings.tight" | "letterSpacings.normal" | "letterSpacings.wide" | "letterSpacings.wider" | "letterSpacings.widest" | "fontSizes.2xs" | "fontSizes.xs" | "fontSizes.sm" | "fontSizes.md" | "fontSizes.lg" | "fontSizes.xl" | "fontSizes.2xl" | "fontSizes.3xl" | "fontSizes.4xl" | "fontSizes.5xl" | "fontSizes.6xl" | "fontSizes.7xl" | "fontSizes.8xl" | "fontSizes.9xl" | "shadows.xs" | "shadows.sm" | "shadows.md" | "shadows.lg" | "shadows.xl" | "shadows.2xl" | "shadows.inner" | "colors.current" | "colors.black" | "colors.white" | "colors.transparent" | "colors.rose.50" | "colors.rose.100" | "colors.rose.200" | "colors.rose.300" | "colors.rose.400" | "colors.rose.500" | "colors.rose.600" | "colors.rose.700" | "colors.rose.800" | "colors.rose.900" | "colors.rose.950" | "colors.pink.50" | "colors.pink.100" | "colors.pink.200" | "colors.pink.300" | "colors.pink.400" | "colors.pink.500" | "colors.pink.600" | "colors.pink.700" | "colors.pink.800" | "colors.pink.900" | "colors.pink.950" | "colors.fuchsia.50" | "colors.fuchsia.100" | "colors.fuchsia.200" | "colors.fuchsia.300" | "colors.fuchsia.400" | "colors.fuchsia.500" | "colors.fuchsia.600" | "colors.fuchsia.700" | "colors.fuchsia.800" | "colors.fuchsia.900" | "colors.fuchsia.950" | "colors.purple.50" | "colors.purple.100" | "colors.purple.200" | "colors.purple.300" | "colors.purple.400" | "colors.purple.500" | "colors.purple.600" | "colors.purple.700" | "colors.purple.800" | "colors.purple.900" | "colors.purple.950" | "colors.violet.50" | "colors.violet.100" | "colors.violet.200" | "colors.violet.300" | "colors.violet.400" | "colors.violet.500" | "colors.violet.600" | "colors.violet.700" | "colors.violet.800" | "colors.violet.900" | "colors.violet.950" | "colors.indigo.50" | "colors.indigo.100" | "colors.indigo.200" | "colors.indigo.300" | "colors.indigo.400" | "colors.indigo.500" | "colors.indigo.600" | "colors.indigo.700" | "colors.indigo.800" | "colors.indigo.900" | "colors.indigo.950" | "colors.blue.50" | "colors.blue.100" | "colors.blue.200" | "colors.blue.300" | "colors.blue.400" | "colors.blue.500" | "colors.blue.600" | "colors.blue.700" | "colors.blue.800" | "colors.blue.900" | "colors.blue.950" | "colors.sky.50" | "colors.sky.100" | "colors.sky.200" | "colors.sky.300" | "colors.sky.400" | "colors.sky.500" | "colors.sky.600" | "colors.sky.700" | "colors.sky.800" | "colors.sky.900" | "colors.sky.950" | "colors.cyan.50" | "colors.cyan.100" | "colors.cyan.200" | "colors.cyan.300" | "colors.cyan.400" | "colors.cyan.500" | "colors.cyan.600" | "colors.cyan.700" | "colors.cyan.800" | "colors.cyan.900" | "colors.cyan.950" | "colors.teal.50" | "colors.teal.100" | "colors.teal.200" | "colors.teal.300" | "colors.teal.400" | "colors.teal.500" | "colors.teal.600" | "colors.teal.700" | "colors.teal.800" | "colors.teal.900" | "colors.teal.950" | "colors.emerald.50" | "colors.emerald.100" | "colors.emerald.200" | "colors.emerald.300" | "colors.emerald.400" | "colors.emerald.500" | "colors.emerald.600" | "colors.emerald.700" | "colors.emerald.800" | "colors.emerald.900" | "colors.emerald.950" | "colors.green.50" | "colors.green.100" | "colors.green.200" | "colors.green.300" | "colors.green.400" | "colors.green.500" | "colors.green.600" | "colors.green.700" | "colors.green.800" | "colors.green.900" | "colors.green.950" | "colors.lime.50" | "colors.lime.100" | "colors.lime.200" | "colors.lime.300" | "colors.lime.400" | "colors.lime.500" | "colors.lime.600" | "colors.lime.700" | "colors.lime.800" | "colors.lime.900" | "colors.lime.950" | "colors.yellow.50" | "colors.yellow.100" | "colors.yellow.200" | "colors.yellow.300" | "colors.yellow.400" | "colors.yellow.500" | "colors.yellow.600" | "colors.yellow.700" | "colors.yellow.800" | "colors.yellow.900" | "colors.yellow.950" | "colors.amber.50" | "colors.amber.100" | "colors.amber.200" | "colors.amber.300" | "colors.amber.400" | "colors.amber.500" | "colors.amber.600" | "colors.amber.700" | "colors.amber.800" | "colors.amber.900" | "colors.amber.950" | "colors.orange.50" | "colors.orange.100" | "colors.orange.200" | "colors.orange.300" | "colors.orange.400" | "colors.orange.500" | "colors.orange.600" | "colors.orange.700" | "colors.orange.800" | "colors.orange.900" | "colors.orange.950" | "colors.red.50" | "colors.red.100" | "colors.red.200" | "colors.red.300" | "colors.red.400" | "colors.red.500" | "colors.red.600" | "colors.red.700" | "colors.red.800" | "colors.red.900" | "colors.red.950" | "colors.neutral.50" | "colors.neutral.100" | "colors.neutral.200" | "colors.neutral.300" | "colors.neutral.400" | "colors.neutral.500" | "colors.neutral.600" | "colors.neutral.700" | "colors.neutral.800" | "colors.neutral.900" | "colors.neutral.950" | "colors.stone.50" | "colors.stone.100" | "colors.stone.200" | "colors.stone.300" | "colors.stone.400" | "colors.stone.500" | "colors.stone.600" | "colors.stone.700" | "colors.stone.800" | "colors.stone.900" | "colors.stone.950" | "colors.zinc.50" | "colors.zinc.100" | "colors.zinc.200" | "colors.zinc.300" | "colors.zinc.400" | "colors.zinc.500" | "colors.zinc.600" | "colors.zinc.700" | "colors.zinc.800" | "colors.zinc.900" | "colors.zinc.950" | "colors.gray.50" | "colors.gray.100" | "colors.gray.200" | "colors.gray.300" | "colors.gray.400" | "colors.gray.500" | "colors.gray.600" | "colors.gray.700" | "colors.gray.800" | "colors.gray.900" | "colors.gray.950" | "colors.slate.50" | "colors.slate.100" | "colors.slate.200" | "colors.slate.300" | "colors.slate.400" | "colors.slate.500" | "colors.slate.600" | "colors.slate.700" | "colors.slate.800" | "colors.slate.900" | "colors.slate.950" | "blurs.sm" | "blurs.base" | "blurs.md" | "blurs.lg" | "blurs.xl" | "blurs.2xl" | "blurs.3xl" | "spacing.0" | "spacing.1" | "spacing.2" | "spacing.3" | "spacing.4" | "spacing.5" | "spacing.6" | "spacing.7" | "spacing.8" | "spacing.9" | "spacing.10" | "spacing.11" | "spacing.12" | "spacing.14" | "spacing.16" | "spacing.20" | "spacing.24" | "spacing.28" | "spacing.32" | "spacing.36" | "spacing.40" | "spacing.44" | "spacing.48" | "spacing.52" | "spacing.56" | "spacing.60" | "spacing.64" | "spacing.72" | "spacing.80" | "spacing.96" | "spacing.0.5" | "spacing.1.5" | "spacing.2.5" | "spacing.3.5" | "sizes.0" | "sizes.1" | "sizes.2" | "sizes.3" | "sizes.4" | "sizes.5" | "sizes.6" | "sizes.7" | "sizes.8" | "sizes.9" | "sizes.10" | "sizes.11" | "sizes.12" | "sizes.14" | "sizes.16" | "sizes.20" | "sizes.24" | "sizes.28" | "sizes.32" | "sizes.36" | "sizes.40" | "sizes.44" | "sizes.48" | "sizes.52" | "sizes.56" | "sizes.60" | "sizes.64" | "sizes.72" | "sizes.80" | "sizes.96" | "sizes.0.5" | "sizes.1.5" | "sizes.2.5" | "sizes.3.5" | "sizes.xs" | "sizes.sm" | "sizes.md" | "sizes.lg" | "sizes.xl" | "sizes.2xl" | "sizes.3xl" | "sizes.4xl" | "sizes.5xl" | "sizes.6xl" | "sizes.7xl" | "sizes.8xl" | "sizes.prose" | "sizes.full" | "sizes.min" | "sizes.max" | "sizes.fit" | "sizes.breakpoint-sm" | "sizes.breakpoint-md" | "sizes.breakpoint-lg" | "sizes.breakpoint-xl" | "sizes.breakpoint-2xl" | "animations.spin" | "animations.ping" | "animations.pulse" | "animations.bounce" | "fonts.mono" | "fonts.sans" | "fonts.serif" | "breakpoints.sm" | "breakpoints.md" | "breakpoints.lg" | "breakpoints.xl" | "breakpoints.2xl" | "spacing.-1" | "spacing.-2" | "spacing.-3" | "spacing.-4" | "spacing.-5" | "spacing.-6" | "spacing.-7" | "spacing.-8" | "spacing.-9" | "spacing.-10" | "spacing.-11" | "spacing.-12" | "spacing.-14" | "spacing.-16" | "spacing.-20" | "spacing.-24" | "spacing.-28" | "spacing.-32" | "spacing.-36" | "spacing.-40" | "spacing.-44" | "spacing.-48" | "spacing.-52" | "spacing.-56" | "spacing.-60" | "spacing.-64" | "spacing.-72" | "spacing.-80" | "spacing.-96" | "spacing.-0.5" | "spacing.-1.5" | "spacing.-2.5" | "spacing.-3.5" | "colors.colorPalette" | "colors.colorPalette.50" | "colors.colorPalette.100" | "colors.colorPalette.200" | "colors.colorPalette.300" | "colors.colorPalette.400" | "colors.colorPalette.500" | "colors.colorPalette.600" | "colors.colorPalette.700" | "colors.colorPalette.800" | "colors.colorPalette.900" | "colors.colorPalette.950" + +export type ColorPalette = "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" + +export type AspectRatioToken = "square" | "landscape" | "portrait" | "wide" | "ultrawide" | "golden" + +export type BorderToken = "none" + +export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" + +export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" + +export type RadiusToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" + +export type FontWeightToken = "thin" | "extralight" | "light" | "normal" | "medium" | "semibold" | "bold" | "extrabold" | "black" + +export type LineHeightToken = "none" | "tight" | "snug" | "normal" | "relaxed" | "loose" + +export type LetterSpacingToken = "tighter" | "tight" | "normal" | "wide" | "wider" | "widest" + +export type FontSizeToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" + +export type ShadowToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "inner" + +export type ColorToken = "current" | "black" | "white" | "transparent" | "rose.50" | "rose.100" | "rose.200" | "rose.300" | "rose.400" | "rose.500" | "rose.600" | "rose.700" | "rose.800" | "rose.900" | "rose.950" | "pink.50" | "pink.100" | "pink.200" | "pink.300" | "pink.400" | "pink.500" | "pink.600" | "pink.700" | "pink.800" | "pink.900" | "pink.950" | "fuchsia.50" | "fuchsia.100" | "fuchsia.200" | "fuchsia.300" | "fuchsia.400" | "fuchsia.500" | "fuchsia.600" | "fuchsia.700" | "fuchsia.800" | "fuchsia.900" | "fuchsia.950" | "purple.50" | "purple.100" | "purple.200" | "purple.300" | "purple.400" | "purple.500" | "purple.600" | "purple.700" | "purple.800" | "purple.900" | "purple.950" | "violet.50" | "violet.100" | "violet.200" | "violet.300" | "violet.400" | "violet.500" | "violet.600" | "violet.700" | "violet.800" | "violet.900" | "violet.950" | "indigo.50" | "indigo.100" | "indigo.200" | "indigo.300" | "indigo.400" | "indigo.500" | "indigo.600" | "indigo.700" | "indigo.800" | "indigo.900" | "indigo.950" | "blue.50" | "blue.100" | "blue.200" | "blue.300" | "blue.400" | "blue.500" | "blue.600" | "blue.700" | "blue.800" | "blue.900" | "blue.950" | "sky.50" | "sky.100" | "sky.200" | "sky.300" | "sky.400" | "sky.500" | "sky.600" | "sky.700" | "sky.800" | "sky.900" | "sky.950" | "cyan.50" | "cyan.100" | "cyan.200" | "cyan.300" | "cyan.400" | "cyan.500" | "cyan.600" | "cyan.700" | "cyan.800" | "cyan.900" | "cyan.950" | "teal.50" | "teal.100" | "teal.200" | "teal.300" | "teal.400" | "teal.500" | "teal.600" | "teal.700" | "teal.800" | "teal.900" | "teal.950" | "emerald.50" | "emerald.100" | "emerald.200" | "emerald.300" | "emerald.400" | "emerald.500" | "emerald.600" | "emerald.700" | "emerald.800" | "emerald.900" | "emerald.950" | "green.50" | "green.100" | "green.200" | "green.300" | "green.400" | "green.500" | "green.600" | "green.700" | "green.800" | "green.900" | "green.950" | "lime.50" | "lime.100" | "lime.200" | "lime.300" | "lime.400" | "lime.500" | "lime.600" | "lime.700" | "lime.800" | "lime.900" | "lime.950" | "yellow.50" | "yellow.100" | "yellow.200" | "yellow.300" | "yellow.400" | "yellow.500" | "yellow.600" | "yellow.700" | "yellow.800" | "yellow.900" | "yellow.950" | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | "orange.50" | "orange.100" | "orange.200" | "orange.300" | "orange.400" | "orange.500" | "orange.600" | "orange.700" | "orange.800" | "orange.900" | "orange.950" | "red.50" | "red.100" | "red.200" | "red.300" | "red.400" | "red.500" | "red.600" | "red.700" | "red.800" | "red.900" | "red.950" | "neutral.50" | "neutral.100" | "neutral.200" | "neutral.300" | "neutral.400" | "neutral.500" | "neutral.600" | "neutral.700" | "neutral.800" | "neutral.900" | "neutral.950" | "stone.50" | "stone.100" | "stone.200" | "stone.300" | "stone.400" | "stone.500" | "stone.600" | "stone.700" | "stone.800" | "stone.900" | "stone.950" | "zinc.50" | "zinc.100" | "zinc.200" | "zinc.300" | "zinc.400" | "zinc.500" | "zinc.600" | "zinc.700" | "zinc.800" | "zinc.900" | "zinc.950" | "gray.50" | "gray.100" | "gray.200" | "gray.300" | "gray.400" | "gray.500" | "gray.600" | "gray.700" | "gray.800" | "gray.900" | "gray.950" | "slate.50" | "slate.100" | "slate.200" | "slate.300" | "slate.400" | "slate.500" | "slate.600" | "slate.700" | "slate.800" | "slate.900" | "slate.950" | "colorPalette" | "colorPalette.50" | "colorPalette.100" | "colorPalette.200" | "colorPalette.300" | "colorPalette.400" | "colorPalette.500" | "colorPalette.600" | "colorPalette.700" | "colorPalette.800" | "colorPalette.900" | "colorPalette.950" + +export type BlurToken = "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" + +export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" + +export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl" + +export type AnimationToken = "spin" | "ping" | "pulse" | "bounce" + +export type FontToken = "mono" | "sans" | "serif" + +export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl" + +export type AnimationName = "spin" | "ping" | "pulse" | "bounce" | "moveYbt" | "moveYtb" | "fadein" | "fadeout" | "cursor" | "typing" + +export type Tokens = { + aspectRatios: AspectRatioToken + borders: BorderToken + easings: EasingToken + durations: DurationToken + radii: RadiusToken + fontWeights: FontWeightToken + lineHeights: LineHeightToken + letterSpacings: LetterSpacingToken + fontSizes: FontSizeToken + shadows: ShadowToken + colors: ColorToken + blurs: BlurToken + spacing: SpacingToken + sizes: SizeToken + animations: AnimationToken + fonts: FontToken + breakpoints: BreakpointToken + animationName: AnimationName +} & { [token: string]: never } + +export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets" \ No newline at end of file diff --git a/panda/types/composition.d.ts b/panda/types/composition.d.ts new file mode 100644 index 0000000..08b2ed9 --- /dev/null +++ b/panda/types/composition.d.ts @@ -0,0 +1,111 @@ +/* eslint-disable */ +import type { CompositionStyleObject } from './system-types'; + +interface Token { + value: T + description?: string +} + +interface Recursive { + [key: string]: Recursive | T +} + +/* ----------------------------------------------------------------------------- + * Text styles + * -----------------------------------------------------------------------------*/ + +type TextStyleProperty = + | 'fontSize' + | 'fontSizeAdjust' + | 'fontVariationSettings' + | 'fontVariantPosition' + | 'fontVariantCaps' + | 'fontVariantNumeric' + | 'fontVariantAlternates' + | 'fontVariantLigatures' + | 'fontFamily' + | 'fontWeight' + | 'fontSynthesis' + | 'fontStyle' + | 'fontVariant' + | 'lineHeight' + | 'letterSpacing' + | 'textDecoration' + | 'textTransform' + | 'textIndent' + | 'textDecorationColor' + | 'textDecorationLine' + | 'textDecorationStyle' + | 'textEmphasisColor' + | 'textEmphasisPosition' + | 'textEmphasisStyle' + | 'hyphenateCharacter' + | 'textOrientation' + | 'textOverflow' + | 'textRendering' + +export type TextStyle = CompositionStyleObject + +export type TextStyles = Recursive> + +/* ----------------------------------------------------------------------------- + * Layer styles + * -----------------------------------------------------------------------------*/ + +type Placement = + | 'Top' + | 'Right' + | 'Bottom' + | 'Left' + | 'Inline' + | 'Block' + | 'InlineStart' + | 'InlineEnd' + | 'BlockStart' + | 'BlockEnd' + +type Radius = + | `Top${'Right' | 'Left'}` + | `Bottom${'Right' | 'Left'}` + | `Start${'Start' | 'End'}` + | `End${'Start' | 'End'}` + +type LayerStyleProperty = + | 'background' + | 'backgroundColor' + | 'backgroundImage' + | 'borderRadius' + | 'border' + | 'borderWidth' + | 'borderColor' + | 'borderStyle' + | 'boxShadow' + | 'filter' + | 'backdropFilter' + | 'transform' + | 'color' + | 'opacity' + | 'backgroundBlendMode' + | 'backgroundAttachment' + | 'backgroundClip' + | 'backgroundOrigin' + | 'backgroundPosition' + | 'backgroundRepeat' + | 'backgroundSize' + | `border${Placement}` + | `border${Placement}Width` + | 'borderRadius' + | `border${Radius}Radius` + | `border${Placement}Color` + | `border${Placement}Style` + | 'padding' + | `padding${Placement}` + +export type LayerStyle = CompositionStyleObject + +export type LayerStyles = Recursive> + +export interface CompositionStyles { + textStyles: TextStyles + layerStyles: LayerStyles +} diff --git a/panda/types/conditions.d.ts b/panda/types/conditions.d.ts new file mode 100644 index 0000000..8c5f153 --- /dev/null +++ b/panda/types/conditions.d.ts @@ -0,0 +1,272 @@ +/* eslint-disable */ +import type { AnySelector, Selectors } from './selectors'; + +export interface Conditions { + /** `&:is(:hover, [data-hover])` */ + "_hover": string + /** `&:is(:focus, [data-focus])` */ + "_focus": string + /** `&:focus-within` */ + "_focusWithin": string + /** `&:is(:focus-visible, [data-focus-visible])` */ + "_focusVisible": string + /** `&:is(:disabled, [disabled], [data-disabled])` */ + "_disabled": string + /** `&:is(:active, [data-active])` */ + "_active": string + /** `&:visited` */ + "_visited": string + /** `&:target` */ + "_target": string + /** `&:is(:read-only, [data-read-only])` */ + "_readOnly": string + /** `&:read-write` */ + "_readWrite": string + /** `&:is(:empty, [data-empty])` */ + "_empty": string + /** `&:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])` */ + "_checked": string + /** `&:enabled` */ + "_enabled": string + /** `&:is([aria-expanded=true], [data-expanded], [data-state="expanded"])` */ + "_expanded": string + /** `&[data-highlighted]` */ + "_highlighted": string + /** `&::before` */ + "_before": string + /** `&::after` */ + "_after": string + /** `&::first-letter` */ + "_firstLetter": string + /** `&::first-line` */ + "_firstLine": string + /** `&::marker` */ + "_marker": string + /** `&::selection` */ + "_selection": string + /** `&::file-selector-button` */ + "_file": string + /** `&::backdrop` */ + "_backdrop": string + /** `&:first-child` */ + "_first": string + /** `&:last-child` */ + "_last": string + /** `&:only-child` */ + "_only": string + /** `&:nth-child(even)` */ + "_even": string + /** `&:nth-child(odd)` */ + "_odd": string + /** `&:first-of-type` */ + "_firstOfType": string + /** `&:last-of-type` */ + "_lastOfType": string + /** `&:only-of-type` */ + "_onlyOfType": string + /** `.peer:is(:focus, [data-focus]) ~ &` */ + "_peerFocus": string + /** `.peer:is(:hover, [data-hover]) ~ &` */ + "_peerHover": string + /** `.peer:is(:active, [data-active]) ~ &` */ + "_peerActive": string + /** `.peer:focus-within ~ &` */ + "_peerFocusWithin": string + /** `.peer:is(:focus-visible, [data-focus-visible]) ~ &` */ + "_peerFocusVisible": string + /** `.peer:is(:disabled, [disabled], [data-disabled]) ~ &` */ + "_peerDisabled": string + /** `.peer:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) ~ &` */ + "_peerChecked": string + /** `.peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &` */ + "_peerInvalid": string + /** `.peer:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) ~ &` */ + "_peerExpanded": string + /** `.peer:placeholder-shown ~ &` */ + "_peerPlaceholderShown": string + /** `.group:is(:focus, [data-focus]) &` */ + "_groupFocus": string + /** `.group:is(:hover, [data-hover]) &` */ + "_groupHover": string + /** `.group:is(:active, [data-active]) &` */ + "_groupActive": string + /** `.group:focus-within &` */ + "_groupFocusWithin": string + /** `.group:is(:focus-visible, [data-focus-visible]) &` */ + "_groupFocusVisible": string + /** `.group:is(:disabled, [disabled], [data-disabled]) &` */ + "_groupDisabled": string + /** `.group:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) &` */ + "_groupChecked": string + /** `.group:is([aria-expanded=true], [data-expanded], [data-state="expanded"]) &` */ + "_groupExpanded": string + /** `.group:invalid &` */ + "_groupInvalid": string + /** `&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"])` */ + "_indeterminate": string + /** `&:is(:required, [data-required], [aria-required=true])` */ + "_required": string + /** `&:is(:valid, [data-valid])` */ + "_valid": string + /** `&:is(:invalid, [data-invalid])` */ + "_invalid": string + /** `&:autofill` */ + "_autofill": string + /** `&:in-range` */ + "_inRange": string + /** `&:out-of-range` */ + "_outOfRange": string + /** `&::placeholder, &[data-placeholder]` */ + "_placeholder": string + /** `&:is(:placeholder-shown, [data-placeholder-shown])` */ + "_placeholderShown": string + /** `&:is([aria-pressed=true], [data-pressed])` */ + "_pressed": string + /** `&:is([aria-selected=true], [data-selected])` */ + "_selected": string + /** `&:default` */ + "_default": string + /** `&:optional` */ + "_optional": string + /** `&:is([open], [data-open], [data-state="open"])` */ + "_open": string + /** `&:is([closed], [data-closed], [data-state="closed"])` */ + "_closed": string + /** `&:fullscreen` */ + "_fullscreen": string + /** `&:is([data-loading], [aria-busy=true])` */ + "_loading": string + /** `&[aria-current=page]` */ + "_currentPage": string + /** `&[aria-current=step]` */ + "_currentStep": string + /** `@media (prefers-reduced-motion: reduce)` */ + "_motionReduce": string + /** `@media (prefers-reduced-motion: no-preference)` */ + "_motionSafe": string + /** `@media print` */ + "_print": string + /** `@media (orientation: landscape)` */ + "_landscape": string + /** `@media (orientation: portrait)` */ + "_portrait": string + /** ` &.dark, .dark &` */ + "_dark": string + /** ` &.light, .light &` */ + "_light": string + /** `@media (prefers-color-scheme: dark)` */ + "_osDark": string + /** `@media (prefers-color-scheme: light)` */ + "_osLight": string + /** `@media (forced-colors: active)` */ + "_highContrast": string + /** `@media (prefers-contrast: less)` */ + "_lessContrast": string + /** `@media (prefers-contrast: more)` */ + "_moreContrast": string + /** `[dir=ltr] &` */ + "_ltr": string + /** `[dir=rtl] &` */ + "_rtl": string + /** `&::-webkit-scrollbar` */ + "_scrollbar": string + /** `&::-webkit-scrollbar-thumb` */ + "_scrollbarThumb": string + /** `&::-webkit-scrollbar-track` */ + "_scrollbarTrack": string + /** `&[data-orientation=horizontal]` */ + "_horizontal": string + /** `&[data-orientation=vertical]` */ + "_vertical": string + /** `@media screen and (min-width: 40rem)` */ + "sm": string + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + "smOnly": string + /** `@media screen and (max-width: 39.9975rem)` */ + "smDown": string + /** `@media screen and (min-width: 48rem)` */ + "md": string + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + "mdOnly": string + /** `@media screen and (max-width: 47.9975rem)` */ + "mdDown": string + /** `@media screen and (min-width: 64rem)` */ + "lg": string + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + "lgOnly": string + /** `@media screen and (max-width: 63.9975rem)` */ + "lgDown": string + /** `@media screen and (min-width: 80rem)` */ + "xl": string + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + "xlOnly": string + /** `@media screen and (max-width: 79.9975rem)` */ + "xlDown": string + /** `@media screen and (min-width: 96rem)` */ + "2xl": string + /** `@media screen and (min-width: 96rem)` */ + "2xlOnly": string + /** `@media screen and (max-width: 95.9975rem)` */ + "2xlDown": string + /** `@media screen and (min-width: 40rem) and (max-width: 47.9975rem)` */ + "smToMd": string + /** `@media screen and (min-width: 40rem) and (max-width: 63.9975rem)` */ + "smToLg": string + /** `@media screen and (min-width: 40rem) and (max-width: 79.9975rem)` */ + "smToXl": string + /** `@media screen and (min-width: 40rem) and (max-width: 95.9975rem)` */ + "smTo2xl": string + /** `@media screen and (min-width: 48rem) and (max-width: 63.9975rem)` */ + "mdToLg": string + /** `@media screen and (min-width: 48rem) and (max-width: 79.9975rem)` */ + "mdToXl": string + /** `@media screen and (min-width: 48rem) and (max-width: 95.9975rem)` */ + "mdTo2xl": string + /** `@media screen and (min-width: 64rem) and (max-width: 79.9975rem)` */ + "lgToXl": string + /** `@media screen and (min-width: 64rem) and (max-width: 95.9975rem)` */ + "lgTo2xl": string + /** `@media screen and (min-width: 80rem) and (max-width: 95.9975rem)` */ + "xlTo2xl": string + /** `@container (min-width: 20rem)` */ + "@/xs": string + /** `@container (min-width: 24rem)` */ + "@/sm": string + /** `@container (min-width: 28rem)` */ + "@/md": string + /** `@container (min-width: 32rem)` */ + "@/lg": string + /** `@container (min-width: 36rem)` */ + "@/xl": string + /** `@container (min-width: 42rem)` */ + "@/2xl": string + /** `@container (min-width: 48rem)` */ + "@/3xl": string + /** `@container (min-width: 56rem)` */ + "@/4xl": string + /** `@container (min-width: 64rem)` */ + "@/5xl": string + /** `@container (min-width: 72rem)` */ + "@/6xl": string + /** `@container (min-width: 80rem)` */ + "@/7xl": string + /** `@container (min-width: 90rem)` */ + "@/8xl": string + /** The base (=no conditions) styles to apply */ + "base": string +} + +export type ConditionalValue = + | V + | Array + | { + [K in keyof Conditions]?: ConditionalValue + } + +export type Nested

= P & { + [K in Selectors]?: Nested

+} & { + [K in AnySelector]?: Nested

+} & { + [K in keyof Conditions]?: Nested

+} diff --git a/panda/types/csstype.d.ts b/panda/types/csstype.d.ts new file mode 100644 index 0000000..2c9b3fc --- /dev/null +++ b/panda/types/csstype.d.ts @@ -0,0 +1,21298 @@ +/* eslint-disable */ +export {}; + +export type PropertyValue = TValue extends Array + ? Array + : TValue extends infer TUnpacked & {} + ? TUnpacked + : TValue; + +export type Fallback = { [P in keyof T]: T[P] | readonly NonNullable[] }; + +export interface StandardLonghandProperties { + /** + * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements. + * + * **Syntax**: `auto | ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :------: | :--: | :-: | + * | **93** | **92** | **15.4** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/accent-color + */ + accentColor?: Property.AccentColor | undefined; + /** + * The CSS **`align-content`** property sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis. + * + * **Syntax**: `normal | | | ? ` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **28** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-content + */ + alignContent?: Property.AlignContent | undefined; + /** + * The CSS **`align-items`** property sets the `align-self` value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. + * + * **Syntax**: `normal | stretch | | [ ? ]` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **11** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-items + */ + alignItems?: Property.AlignItems | undefined; + /** + * The **`align-self`** CSS property overrides a grid or flex item's `align-items` value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. + * + * **Syntax**: `auto | normal | stretch | | ? ` + * + * **Initial value**: `auto` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :------: | :-----: | :-----: | :----: | :----: | + * | **29** | **20** | **9** | **12** | **10** | + * | 21 _-x-_ | | 7 _-x-_ | | | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-self + */ + alignSelf?: Property.AlignSelf | undefined; + /** + * The **`align-tracks`** CSS property sets the alignment in the masonry axis for grid containers that have masonry in their block axis. + * + * **Syntax**: `[ normal | | | ? ]#` + * + * **Initial value**: `normal` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :----: | :-----: | :----: | :--: | :-: | + * | No | n/a | No | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/align-tracks + */ + alignTracks?: Property.AlignTracks | undefined; + /** + * The **`animation-composition`** CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously. + * + * **Syntax**: `#` + * + * **Initial value**: `replace` + * + * | Chrome | Firefox | Safari | Edge | IE | + * | :-----: | :-----: | :----: | :--: | :-: | + * | **112** | **115** | **16** | n/a | No | + * + * @see https://developer.mozilla.org/docs/Web/CSS/animation-composition + */ + animationComposition?: Property.AnimationComposition | undefined; + /** + * The **`animation-delay`** CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation. + * + * **Syntax**: `