@pandacss/generator 0.11.0 → 0.12.0

package/dist/index.d.mts

@@ -94,6 +94,10 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
@@ -320,6 +324,10 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;

package/dist/index.d.ts

@@ -94,6 +94,10 @@ declare const getEngine: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;
@@ -320,6 +324,10 @@ declare const createGenerator: (conf: ConfigResultWithHooks) => {
     conditions: _pandacss_core.Conditions;
     createSheetContext: () => _pandacss_core.StylesheetContext;
     createSheet: (options?: Pick<_pandacss_core.StylesheetOptions, "content"> | undefined) => _pandacss_core.Stylesheet;
+    layers: _pandacss_types.CascadeLayers;
+    isValidLayerRule: (layerRule: string) => boolean;
+    layerString: string;
+    layerNames: string[];
     hooks: _pandacss_types.PandaHookable;
     path: string;
     config: _pandacss_types_dist_shared.UnwrapExtend<_pandacss_types.RequiredBy<_pandacss_types.Config, "outdir" | "cwd" | "include">>;

package/dist/index.js

@@ -206,7 +206,7 @@ function generateKeyframeCss(ctx) {
 var css = String.raw;
 function generateResetCss(ctx, scope = "") {
   const selector = scope ? `${scope} ` : "";
-  const output = css`@layer reset {
+  const output = css`@layer ${ctx.layers.reset} {
   ${selector}* {
     margin: 0;
     padding: 0;
@@ -473,7 +473,7 @@ function generateTokenCss(ctx) {
     }
   }
   const css2 = results.join("\n\n");
-  const output = `@layer tokens {
+  const output = `@layer ${ctx.layers.tokens} {
     ${(0, import_core3.prettifyCss)(cleanupSelectors(css2, root))}
   }
   `;
@@ -654,13 +654,13 @@ function generateCssFn(ctx) {
       return result;
     }).join(",")}"
 
-    const classNames = new Map()
+    const classNameByProp = new Map()
     ${utility.hasShorthand ? import_outdent4.outdent`
     const shorthands = new Map()
     utilities.split(',').forEach((utility) => {
       const [prop, meta] = utility.split(':')
       const [className, ...shorthandList] = meta.split('/')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
       if (shorthandList.length) {
         shorthandList.forEach((shorthand) => {
           shorthands.set(shorthand === '1' ? className : shorthand, prop)
@@ -672,7 +672,7 @@ function generateCssFn(ctx) {
     ` : import_outdent4.outdent`
     utilities.split(',').forEach((utility) => {
       const [prop, className] = utility.split(':')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
     })
     `}
 
@@ -687,15 +687,21 @@ function generateCssFn(ctx) {
         ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
-              const propKey = classNames.get(key) || hypenateProperty(key)
+              const propKey = classNameByProp.get(key) || hypenateProperty(key)
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
-            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+            }` : `(key, value) => ({ className: \`\${classNameByProp.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
 
-    export const css = createCss(context)
+    const cssFn = createCss(context)
+    export const cssCache = new Map()
+    export const css = (styles) => {
+      const classNames = cssFn(styles)
+      cssCache.set(classNames, styles)
+      return classNames
+    }
     css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
@@ -833,23 +839,34 @@ function generateCvaFn(ctx) {
 
 // src/artifacts/js/cx.ts
 var import_outdent7 = __toESM(require("outdent"));
-function generateCx() {
+function generateCx(ctx) {
   return {
     js: import_outdent7.default`
+    ${ctx.file.import("cssCache, css, mergeCss", "./css")}
+
     function cx() {
+      const objs = []
       let str = '',
         i = 0,
         arg
-    
+
       for (; i < arguments.length; ) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-          str && (str += ' ')
-          str += arg
+        arg = arguments[i++]
+        if (!arg || typeof arg !== 'string') continue
+
+        if (cssCache.has(arg)) {
+          objs.push(cssCache.get(arg))
+          continue
         }
+
+        str && (str += ' ')
+        str += arg.toString()
       }
-      return str
+
+      const merged = mergeCss(...objs)
+      return [css(merged), str].join(' ')
     }
-   
+
     export { cx }
   `,
     dts: import_outdent7.default`
@@ -901,14 +918,14 @@ function generateHelpers(ctx) {
 
 // src/artifacts/generated/is-valid-prop.mjs.json
 var is_valid_prop_mjs_default = {
-  content: '// src/index.ts\nvar userGeneratedStr = "";\nvar userGenerated = userGeneratedStr.split(",");\nvar 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,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,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,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,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,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom";\nvar allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar selectorRegex = /&|@/;\nvar isCssProperty = /* @__PURE__ */ memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || selectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
+  content: '// src/index.ts\nvar userGeneratedStr = "";\nvar userGenerated = userGeneratedStr.split(",");\nvar 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,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,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,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,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,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,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";\nvar allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar cssPropertySelectorRegex = /&|@/;\nvar isCssProperty = /* @__PURE__ */ memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
 };
 
 // src/artifacts/js/is-valid-prop.ts
 var import_outdent9 = require("outdent");
 var import_ts_pattern = require("ts-pattern");
 var cssPropRegex = /var cssPropertiesStr = ".*?";/;
-var memoFnDeclarationRegex = /function memo(.+?)\nvar selectorRegex/s;
+var memoFnDeclarationRegex = /function memo(.+?)\nvar cssPropertySelectorRegex/s;
 function generateIsValidProp(ctx) {
   if (ctx.isTemplateLiteralSyntax)
     return;
@@ -917,7 +934,7 @@ function generateIsValidProp(ctx) {
     'var userGeneratedStr = "";',
     `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(new Set(ctx.properties)).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
   );
-  content = content.replace(memoFnDeclarationRegex, "var selectorRegex");
+  content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
     content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
     content = content.replace(cssPropRegex, 'var cssPropertiesStr = "";');
@@ -957,8 +974,9 @@ function generatePattern(ctx) {
       name: dashName,
       dts: import_outdent10.outdent`
       import type { SystemStyleObject, ConditionalValue } from '../types'
-      import type { PropertyValue } from '../types/prop-type'
       import type { Properties } from '../types/csstype'
+      import type { PropertyValue } from '../types/prop-type'
+      import type { DistributiveOmit } from '../types/system-types'
       import type { Tokens } from '../tokens'
 
       export type ${upperName}Properties = {
@@ -979,13 +997,13 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? import_outdent10.outdent`export declare function ${baseName}(options: ${upperName}Properties): string` : import_outdent10.outdent`
+      ${strict ? import_outdent10.outdent`export declare function ${baseName}(styles: ${upperName}Properties): string` : import_outdent10.outdent`
 
-          type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
+          type ${upperName}Styles = ${upperName}Properties & DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
           interface ${upperName}PatternFn {
-            (options?: ${upperName}Options): string
-            raw: (options: ${upperName}Options) => ${upperName}Options
+            (styles?: ${upperName}Styles): string
+            raw: (styles: ${upperName}Styles) => ${upperName}Styles
           }
 
           ${description ? `/** ${description} */` : ""}
@@ -1128,6 +1146,7 @@ function generateRecipes(ctx) {
         dts: import_outdent11.outdent`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
+        import type { DistributiveOmit } from '../types/system-types'
 
         type ${upperName}Variant = {
           ${Object.keys(variantKeyMap).map((key) => {
@@ -1152,7 +1171,7 @@ function generateRecipes(ctx) {
           raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
-          splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
+          splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<DistributiveOmit<Props, keyof ${upperName}VariantProps>>]
         }
 
         ${description ? `/** ${description} */` : ""}
@@ -1342,8 +1361,9 @@ function generatePreactJsxPattern(ctx) {
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
+      import type { DistributiveOmit } from '../types/system-types'
 
-      export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+      export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
@@ -1579,18 +1599,15 @@ function generateQwikJsxPattern(ctx) {
       }
       `,
       dts: import_outdent20.outdent`
-      import type { FunctionComponent } from '@builder.io/qwik'
+      import type { Component } from '@builder.io/qwik'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
-  
-      type Assign<T, U> = {
-        [K in keyof T]?: K extends keyof T ? (K extends keyof U ? T[K] & U[K] : T[K]) : never
-      } & U
+      import type { Assign, DistributiveOmit } from '../types/system-types'
 
-      export type ${upperName}Props = Assign<${typeName}<'${jsxElement}'>, Omit<${upperName}Properties, ${blocklistType || '""'}>>
+      export type ${upperName}Props = Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || '""'}>>
   
       ${description ? `/** ${description} */` : ""}
-      export declare const ${jsxName}: FunctionComponent<${upperName}Props>
+      export declare const ${jsxName}: Component<${upperName}Props>
       `
     };
   });
@@ -1606,37 +1623,21 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent21.outdent`
-import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
-import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
+import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
+import type { Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
-type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
+type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
-  : T extends FunctionComponent<infer P>
+  : T extends Component<infer P>
   ? P
   : never
 
 type Dict = Record<string, unknown>
 
-type Omitted = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'
-
-// Patch due to Omit<T, K> not working with Qwik JSX Types
-
-type Assign<T, U> = {
-  [K in keyof T]?: K extends Omitted
-    ? K extends keyof U
-      ? U[K]
-      : never
-    : K extends keyof T
-    ? K extends keyof U
-      ? T[K] & U[K]
-      : T[K]
-    : never
-} & U & PatchedHTMLProps
-
-export type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionComponent<Assign<ComponentProps<T>, _Assign<JsxStyleProps, P>>>
+export type ${componentName}<T extends ElementType, P extends Dict = {}> = Component<Assign<ComponentProps<T> & PatchedHTMLProps, Assign<JsxStyleProps, P>>>
 
 type RecipeFn = { __type: any }
 
@@ -1717,13 +1718,13 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent23.outdent`
-import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
+import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
 
-type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
+type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
-  : T extends FunctionComponent<infer P>
+  : T extends Component<infer P>
   ? P
   : never
 
@@ -1886,8 +1887,9 @@ function generateReactJsxPattern(ctx) {
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
+      import type { DistributiveOmit } from '../types/system-types'
 
-      export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+      export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
@@ -1907,12 +1909,12 @@ export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent26.outdent`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
-import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
+import type { Assign, DistributiveOmit, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
@@ -2002,10 +2004,11 @@ export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent28.outdent`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
+import type { DistributiveOmit } from '../types/system-types'
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
@@ -2041,7 +2044,7 @@ function generateSolidJsxFactory(ctx) {
     ${ctx.file.import("allCssProperties", "./is-valid-prop")}
 
     function styledFn(element, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
@@ -2144,8 +2147,9 @@ function generateSolidJsxPattern(ctx) {
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
+    import { DistributiveOmit } from '../types/system-types'
 
-    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+    export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${description ? `/** ${description} */` : ""}
     export declare const ${jsxName}: Component<${upperName}Props>
@@ -2451,8 +2455,9 @@ function generateVueJsxPattern(ctx) {
     import { FunctionalComponent } from 'vue'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
+    import { DistributiveOmit } from '../types/system-types'
 
-    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+    export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${description ? `/** ${description} */` : ""}
     export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
@@ -2889,7 +2894,7 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ntype WithCss = { css?: SystemStyleObject }\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ntype WithCss = { css?: SystemStyleObject }\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\nexport type PatchedHTMLProps = {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
@@ -2899,7 +2904,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -3054,7 +3059,10 @@ var categories = [
   "assets"
 ];
 function generateTokenTypes(ctx) {
-  const { tokens } = ctx;
+  const {
+    tokens,
+    config: { theme }
+  } = ctx;
   const set = /* @__PURE__ */ new Set();
   set.add(`export type Token = ${tokens.isEmpty ? "string" : (0, import_shared3.unionType)(tokens.allNames)}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
@@ -3070,6 +3078,9 @@ function generateTokenTypes(ctx) {
       set.add(`export type ${typeName}Token = ${(0, import_shared3.unionType)(value.keys())}`);
       result.add(`		${key}: ${typeName}Token`);
     }
+    const keyframes = Object.keys(theme?.keyframes ?? {});
+    set.add(`export type AnimationName = ${(0, import_shared3.unionType)(keyframes)}`);
+    result.add(`		animationName: AnimationName`);
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
@@ -3168,7 +3179,7 @@ function setupSva(ctx) {
   };
 }
 function setupCx(ctx) {
-  const code = generateCx();
+  const code = generateCx(ctx);
   return {
     dir: ctx.paths.css,
     files: [
@@ -3334,7 +3345,7 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { files, resolve } = options;
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
-    "@layer reset, base, tokens, recipes, utilities;",
+    ctx.layerString,
     preflight && "@import './reset.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
@@ -3485,12 +3496,20 @@ var getBaseEngine = (conf) => {
   });
   const compositionContext = { conditions, utility };
   (0, import_core5.assignCompositions)(compositions, compositionContext);
+  const layers = config.layers;
+  const layerNames = Object.values(layers);
+  const isValidLayerRule = (0, import_shared5.memo)((layerRule) => {
+    const names = new Set(layerRule.split(",").map((name) => name.trim()));
+    return names.size >= 5 && layerNames.every((name) => names.has(name));
+  });
+  const layerString = `@layer ${layerNames.join(", ")};`;
   const createSheetContext = () => ({
     root: import_postcss3.default.root(),
     conditions,
     utility,
     hash: hash.className,
-    helpers
+    helpers,
+    layers
   });
   const createSheet = (options) => {
     const sheetContext = createSheetContext();
@@ -3526,7 +3545,12 @@ var getBaseEngine = (conf) => {
     recipes,
     conditions,
     createSheetContext,
-    createSheet
+    createSheet,
+    // cascade layer
+    layers,
+    isValidLayerRule,
+    layerString,
+    layerNames
   };
 };
 
@@ -3635,7 +3659,15 @@ var defaults = (conf) => ({
     outExtension: "mjs",
     shorthands: true,
     syntax: "object-literal",
-    ...conf.config
+    ...conf.config,
+    layers: {
+      reset: "reset",
+      base: "base",
+      tokens: "tokens",
+      recipes: "recipes",
+      utilities: "utilities",
+      ...conf.config.layers
+    }
   }
 });
 var getImportMap = (outdir) => ({

package/dist/index.mjs

@@ -175,7 +175,7 @@ function generateKeyframeCss(ctx) {
 var css = String.raw;
 function generateResetCss(ctx, scope = "") {
   const selector = scope ? `${scope} ` : "";
-  const output = css`@layer reset {
+  const output = css`@layer ${ctx.layers.reset} {
   ${selector}* {
     margin: 0;
     padding: 0;
@@ -442,7 +442,7 @@ function generateTokenCss(ctx) {
     }
   }
   const css2 = results.join("\n\n");
-  const output = `@layer tokens {
+  const output = `@layer ${ctx.layers.tokens} {
     ${prettifyCss(cleanupSelectors(css2, root))}
   }
   `;
@@ -623,13 +623,13 @@ function generateCssFn(ctx) {
       return result;
     }).join(",")}"
 
-    const classNames = new Map()
+    const classNameByProp = new Map()
     ${utility.hasShorthand ? outdent4`
     const shorthands = new Map()
     utilities.split(',').forEach((utility) => {
       const [prop, meta] = utility.split(':')
       const [className, ...shorthandList] = meta.split('/')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
       if (shorthandList.length) {
         shorthandList.forEach((shorthand) => {
           shorthands.set(shorthand === '1' ? className : shorthand, prop)
@@ -641,7 +641,7 @@ function generateCssFn(ctx) {
     ` : outdent4`
     utilities.split(',').forEach((utility) => {
       const [prop, className] = utility.split(':')
-      classNames.set(prop, className)
+      classNameByProp.set(prop, className)
     })
     `}
 
@@ -656,15 +656,21 @@ function generateCssFn(ctx) {
         ${prefix ? "prefix: " + JSON.stringify(prefix) + "," : ""}
         transform: ${utility.hasShorthand ? `(prop, value) => {
               const key = resolveShorthand(prop)
-              const propKey = classNames.get(key) || hypenateProperty(key)
+              const propKey = classNameByProp.get(key) || hypenateProperty(key)
               return { className: \`\${propKey}${separator}\${withoutSpace(value)}\` }
-            }` : `(key, value) => ({ className: \`\${classNames.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
+            }` : `(key, value) => ({ className: \`\${classNameByProp.get(key) || hypenateProperty(key)}${separator}\${withoutSpace(value)}\` })`},
         ${utility.hasShorthand ? "hasShorthand: true," : ""}
         resolveShorthand: ${utility.hasShorthand ? "resolveShorthand" : "prop => prop"},
       }
     }
 
-    export const css = createCss(context)
+    const cssFn = createCss(context)
+    export const cssCache = new Map()
+    export const css = (styles) => {
+      const classNames = cssFn(styles)
+      cssCache.set(classNames, styles)
+      return classNames
+    }
     css.raw = (styles) => styles
 
     export const { mergeCss, assignCss } = createMergeCss(context)
@@ -802,23 +808,34 @@ function generateCvaFn(ctx) {
 
 // src/artifacts/js/cx.ts
 import outdent7 from "outdent";
-function generateCx() {
+function generateCx(ctx) {
   return {
     js: outdent7`
+    ${ctx.file.import("cssCache, css, mergeCss", "./css")}
+
     function cx() {
+      const objs = []
       let str = '',
         i = 0,
         arg
-    
+
       for (; i < arguments.length; ) {
-        if ((arg = arguments[i++]) && typeof arg === 'string') {
-          str && (str += ' ')
-          str += arg
+        arg = arguments[i++]
+        if (!arg || typeof arg !== 'string') continue
+
+        if (cssCache.has(arg)) {
+          objs.push(cssCache.get(arg))
+          continue
         }
+
+        str && (str += ' ')
+        str += arg.toString()
       }
-      return str
+
+      const merged = mergeCss(...objs)
+      return [css(merged), str].join(' ')
     }
-   
+
     export { cx }
   `,
     dts: outdent7`
@@ -870,14 +887,14 @@ function generateHelpers(ctx) {
 
 // src/artifacts/generated/is-valid-prop.mjs.json
 var is_valid_prop_mjs_default = {
-  content: '// src/index.ts\nvar userGeneratedStr = "";\nvar userGenerated = userGeneratedStr.split(",");\nvar 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,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,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,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,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,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,widows,width,willChange,wordBreak,wordSpacing,wordWrap,writingMode,zIndex,zoom";\nvar allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar selectorRegex = /&|@/;\nvar isCssProperty = /* @__PURE__ */ memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || selectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
+  content: '// src/index.ts\nvar userGeneratedStr = "";\nvar userGenerated = userGeneratedStr.split(",");\nvar 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,animationTimingFunction,animationTimeline,appearance,aspectRatio,azimuth,backdropFilter,backfaceVisibility,background,backgroundAttachment,backgroundBlendMode,backgroundClip,backgroundColor,backgroundImage,backgroundOrigin,backgroundPosition,backgroundPositionX,backgroundPositionY,backgroundRepeat,backgroundSize,blockOverflow,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,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,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,top,touchAction,transform,transformBox,transformOrigin,transformStyle,transition,transitionDelay,transitionDuration,transitionProperty,transitionTimingFunction,translate,unicodeBidi,userSelect,verticalAlign,viewTransitionName,visibility,whiteSpace,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";\nvar allCssProperties = cssPropertiesStr.split(",").concat(userGenerated);\nvar properties = new Map(allCssProperties.map((prop) => [prop, true]));\nfunction memo(fn) {\n  const cache = /* @__PURE__ */ Object.create(null);\n  return (arg) => {\n    if (cache[arg] === void 0)\n      cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\nvar cssPropertySelectorRegex = /&|@/;\nvar isCssProperty = /* @__PURE__ */ memo((prop) => {\n  return properties.has(prop) || prop.startsWith("--") || cssPropertySelectorRegex.test(prop);\n});\nexport {\n  allCssProperties,\n  isCssProperty\n};\n'
 };
 
 // src/artifacts/js/is-valid-prop.ts
 import { outdent as outdent9 } from "outdent";
 import { match } from "ts-pattern";
 var cssPropRegex = /var cssPropertiesStr = ".*?";/;
-var memoFnDeclarationRegex = /function memo(.+?)\nvar selectorRegex/s;
+var memoFnDeclarationRegex = /function memo(.+?)\nvar cssPropertySelectorRegex/s;
 function generateIsValidProp(ctx) {
   if (ctx.isTemplateLiteralSyntax)
     return;
@@ -886,7 +903,7 @@ function generateIsValidProp(ctx) {
     'var userGeneratedStr = "";',
     `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(new Set(ctx.properties)).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
   );
-  content = content.replace(memoFnDeclarationRegex, "var selectorRegex");
+  content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
     content = content.replace("/* @__PURE__ */ memo(", "/* @__PURE__ */ (");
     content = content.replace(cssPropRegex, 'var cssPropertiesStr = "";');
@@ -926,8 +943,9 @@ function generatePattern(ctx) {
       name: dashName,
       dts: outdent10`
       import type { SystemStyleObject, ConditionalValue } from '../types'
-      import type { PropertyValue } from '../types/prop-type'
       import type { Properties } from '../types/csstype'
+      import type { PropertyValue } from '../types/prop-type'
+      import type { DistributiveOmit } from '../types/system-types'
       import type { Tokens } from '../tokens'
 
       export type ${upperName}Properties = {
@@ -948,13 +966,13 @@ function generatePattern(ctx) {
       }).join("\n	")}
       }
 
-      ${strict ? outdent10`export declare function ${baseName}(options: ${upperName}Properties): string` : outdent10`
+      ${strict ? outdent10`export declare function ${baseName}(styles: ${upperName}Properties): string` : outdent10`
 
-          type ${upperName}Options = ${upperName}Properties & Omit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
+          type ${upperName}Styles = ${upperName}Properties & DistributiveOmit<SystemStyleObject, keyof ${upperName}Properties ${blocklistType}>
 
           interface ${upperName}PatternFn {
-            (options?: ${upperName}Options): string
-            raw: (options: ${upperName}Options) => ${upperName}Options
+            (styles?: ${upperName}Styles): string
+            raw: (styles: ${upperName}Styles) => ${upperName}Styles
           }
 
           ${description ? `/** ${description} */` : ""}
@@ -1097,6 +1115,7 @@ function generateRecipes(ctx) {
         dts: outdent11`
         import type { ConditionalValue } from '../types'
         import type { Pretty } from '../types/helpers'
+        import type { DistributiveOmit } from '../types/system-types'
 
         type ${upperName}Variant = {
           ${Object.keys(variantKeyMap).map((key) => {
@@ -1121,7 +1140,7 @@ function generateRecipes(ctx) {
           raw: (props?: ${upperName}VariantProps) => ${upperName}VariantProps
           variantMap: ${upperName}VariantMap
           variantKeys: Array<keyof ${upperName}Variant>
-          splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<Omit<Props, keyof ${upperName}VariantProps>>]
+          splitVariantProps<Props extends ${upperName}VariantProps>(props: Props): [${upperName}VariantProps, Pretty<DistributiveOmit<Props, keyof ${upperName}VariantProps>>]
         }
 
         ${description ? `/** ${description} */` : ""}
@@ -1311,8 +1330,9 @@ function generatePreactJsxPattern(ctx) {
       import type { FunctionComponent } from 'preact'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
+      import type { DistributiveOmit } from '../types/system-types'
 
-      export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+      export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
@@ -1548,18 +1568,15 @@ function generateQwikJsxPattern(ctx) {
       }
       `,
       dts: outdent20`
-      import type { FunctionComponent } from '@builder.io/qwik'
+      import type { Component } from '@builder.io/qwik'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
-  
-      type Assign<T, U> = {
-        [K in keyof T]?: K extends keyof T ? (K extends keyof U ? T[K] & U[K] : T[K]) : never
-      } & U
+      import type { Assign, DistributiveOmit } from '../types/system-types'
 
-      export type ${upperName}Props = Assign<${typeName}<'${jsxElement}'>, Omit<${upperName}Properties, ${blocklistType || '""'}>>
+      export type ${upperName}Props = Assign<${typeName}<'${jsxElement}'>, DistributiveOmit<${upperName}Properties, ${blocklistType || '""'}>>
   
       ${description ? `/** ${description} */` : ""}
-      export declare const ${jsxName}: FunctionComponent<${upperName}Props>
+      export declare const ${jsxName}: Component<${upperName}Props>
       `
     };
   });
@@ -1575,37 +1592,21 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent21`
-import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
-import type { Assign as _Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
+import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
+import type { Assign, JsxStyleProps, PatchedHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
-type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
+type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
-  : T extends FunctionComponent<infer P>
+  : T extends Component<infer P>
   ? P
   : never
 
 type Dict = Record<string, unknown>
 
-type Omitted = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'
-
-// Patch due to Omit<T, K> not working with Qwik JSX Types
-
-type Assign<T, U> = {
-  [K in keyof T]?: K extends Omitted
-    ? K extends keyof U
-      ? U[K]
-      : never
-    : K extends keyof T
-    ? K extends keyof U
-      ? T[K] & U[K]
-      : T[K]
-    : never
-} & U & PatchedHTMLProps
-
-export type ${componentName}<T extends ElementType, P extends Dict = {}> = FunctionComponent<Assign<ComponentProps<T>, _Assign<JsxStyleProps, P>>>
+export type ${componentName}<T extends ElementType, P extends Dict = {}> = Component<Assign<ComponentProps<T> & PatchedHTMLProps, Assign<JsxStyleProps, P>>>
 
 type RecipeFn = { __type: any }
 
@@ -1686,13 +1687,13 @@ import { ${upperName} } from '../types/jsx'
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent23`
-import type { FunctionComponent, QwikIntrinsicElements } from '@builder.io/qwik'
+import type { Component, QwikIntrinsicElements } from '@builder.io/qwik'
 
-type ElementType = keyof QwikIntrinsicElements | FunctionComponent<any>
+type ElementType = keyof QwikIntrinsicElements | Component<any>
 
 type ComponentProps<T extends ElementType> = T extends keyof QwikIntrinsicElements
   ? QwikIntrinsicElements[T]
-  : T extends FunctionComponent<infer P>
+  : T extends Component<infer P>
   ? P
   : never
 
@@ -1855,8 +1856,9 @@ function generateReactJsxPattern(ctx) {
       import type { FunctionComponent } from 'react'
       import type { ${upperName}Properties } from '../patterns/${dashName}'
       import type { ${typeName} } from '../types/jsx'
+      import type { DistributiveOmit } from '../types/system-types'
 
-      export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+      export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
       ${description ? `/** ${description} */` : ""}
       export declare const ${jsxName}: FunctionComponent<${upperName}Props>
@@ -1876,12 +1878,12 @@ export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent26`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
-import type { Assign, JsxStyleProps, JsxHTMLProps } from './system-types'
+import type { Assign, DistributiveOmit, JsxStyleProps, JsxHTMLProps } from './system-types'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe'
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
@@ -1971,10 +1973,11 @@ export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent28`
 import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
+import type { DistributiveOmit } from '../types/system-types'
 
 type Dict = Record<string, unknown>
 
-type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
+type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
@@ -2010,7 +2013,7 @@ function generateSolidJsxFactory(ctx) {
     ${ctx.file.import("allCssProperties", "./is-valid-prop")}
 
     function styledFn(element, configOrCva = {}) {
-      const cvaFn = configOrCva.__cva__ ? configOrCva : cva(configOrCva)
+      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
       return function ${componentName}(props) {
         const mergedProps = mergeProps({ as: element }, props)
@@ -2113,8 +2116,9 @@ function generateSolidJsxPattern(ctx) {
     import { Component } from 'solid-js'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
+    import { DistributiveOmit } from '../types/system-types'
 
-    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+    export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${description ? `/** ${description} */` : ""}
     export declare const ${jsxName}: Component<${upperName}Props>
@@ -2420,8 +2424,9 @@ function generateVueJsxPattern(ctx) {
     import { FunctionalComponent } from 'vue'
     import { ${upperName}Properties } from '../patterns/${dashName}'
     import { ${typeName} } from '../types/jsx'
+    import { DistributiveOmit } from '../types/system-types'
 
-    export type ${upperName}Props = ${upperName}Properties & Omit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
+    export type ${upperName}Props = ${upperName}Properties & DistributiveOmit<${typeName}<'${jsxElement}'>, keyof ${upperName}Properties ${blocklistType}>
 
     ${description ? `/** ${description} */` : ""}
     export declare const ${jsxName}: FunctionalComponent<${upperName}Props>
@@ -2858,7 +2863,7 @@ var csstype_d_ts_default = {
 
 // src/artifacts/generated/system-types.d.ts.json
 var system_types_d_ts_default = {
-  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ntype WithCss = { css?: SystemStyleObject }\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type Assign<T, U> = Omit<T, keyof U> & U\n\nexport type PatchedHTMLProps = {\n  htmlSize?: string | number\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'size' | 'content'\n\ntype WithHTMLProps<T> = Omit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
+  content: "import type { ConditionalValue, Conditions, Nested } from './conditions'\nimport type { PropertiesFallback } from './csstype'\nimport type { SystemProperties, CssVarProperties } from './style-props'\n\ntype String = string & {}\ntype Number = number & {}\n\n/* -----------------------------------------------------------------------------\n * Native css properties\n * -----------------------------------------------------------------------------*/\n\nexport type CssProperty = keyof PropertiesFallback\n\nexport type CssProperties = PropertiesFallback<String | Number> & CssVarProperties\n\nexport type CssKeyframes = {\n  [name: string]: {\n    [time: string]: CssProperties\n  }\n}\n\n/* -----------------------------------------------------------------------------\n * Conditional css properties\n * -----------------------------------------------------------------------------*/\n\ntype MinimalNested<P> = {\n  [K in keyof Conditions]?: Nested<P>\n}\n\ntype GenericProperties = {\n  [key: string]: ConditionalValue<String | Number | boolean>\n}\n\n/* -----------------------------------------------------------------------------\n * Native css props\n * -----------------------------------------------------------------------------*/\n\nexport type NestedCssProperties = Nested<CssProperties>\n\nexport type SystemStyleObject = Nested<SystemProperties & CssVarProperties>\n\nexport type GlobalStyleObject = {\n  [selector: string]: SystemStyleObject\n}\n\nexport type CompositionStyleObject<Property extends string> = Nested<{\n  [K in Property]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown\n}>\n\n/* -----------------------------------------------------------------------------\n * Jsx style props\n * -----------------------------------------------------------------------------*/\ntype WithCss = { css?: SystemStyleObject }\ntype StyleProps = SystemProperties & MinimalNested<SystemStyleObject>\n\nexport type JsxStyleProps = StyleProps & WithCss\n\nexport type DistributiveOmit<T, K extends keyof any> = T extends unknown ? Omit<T, K> : never\n\nexport type Assign<T, U> = {\n  [K in keyof T]: K extends keyof U ? U[K] : T[K]\n} & U\n\nexport type PatchedHTMLProps = {\n  htmlWidth?: string | number\n  htmlHeight?: string | number\n  htmlTranslate?: 'yes' | 'no' | undefined\n  htmlContent?: string\n}\n\nexport type OmittedHTMLProps = 'color' | 'translate' | 'transition' | 'width' | 'height' | 'content'\n\ntype WithHTMLProps<T> = DistributiveOmit<T, OmittedHTMLProps> & PatchedHTMLProps\n\nexport type JsxHTMLProps<T extends Record<string, any>, P extends Record<string, any> = {}> = Assign<\n  WithHTMLProps<T>,\n  P\n>\n"
 };
 
 // src/artifacts/generated/composition.d.ts.json
@@ -2868,7 +2873,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  content: "import type { SystemStyleObject } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
+  content: "import type { SystemStyleObject, DistributiveOmit } from './system-types'\n\ntype Pretty<T> = { [K in keyof T]: T[K] } & {}\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T\n\nexport type RecipeVariantRecord = Record<any, Record<any, SystemStyleObject>>\n\nexport type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends keyof T\n  ? {}\n  : {\n      [K in keyof T]?: StringToBoolean<keyof T[K]>\n    }\n\nexport type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string\n\nexport type RecipeVariantProps<\n  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,\n> = Pretty<Parameters<T>[0]>\n\ntype RecipeVariantMap<T extends RecipeVariantRecord> = {\n  [K in keyof T]: Array<keyof T[K]>\n}\n\n/* -----------------------------------------------------------------------------\n * Recipe / Standard\n * -----------------------------------------------------------------------------*/\n\nexport type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  resolve: (props: RecipeSelection<T>) => SystemStyleObject\n  config: RecipeConfig<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(\n    props: Props,\n  ): [RecipeSelection<T>, Pretty<DistributiveOmit<Props, keyof T>>]\n}\n\nexport type RecipeCompoundSelection<T extends RecipeVariantRecord> = {\n  [K in keyof T]?: StringToBoolean<keyof T[K]> | Array<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SystemStyleObject\n}\n\nexport type RecipeDefinition<T extends RecipeVariantRecord> = {\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SystemStyleObject\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | RecipeVariantRecord\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<RecipeCompoundVariant<T>>\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ntype RecipeConfigMeta = {\n  /**\n   * The name of the recipe.\n   */\n  className: string\n  /**\n   * The description of the recipe. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The jsx elements to track for this recipe. Can be string or Regexp.\n   *\n   * @default capitalize(recipe.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n}\n\nexport type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta\n\n/* -----------------------------------------------------------------------------\n * Recipe / Slot\n * -----------------------------------------------------------------------------*/\n\ntype SlotRecord<S extends string, T> = Partial<Record<S, T>>\n\nexport type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>\n\nexport type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (\n  props?: RecipeSelection<T>,\n) => SlotRecord<S, string>\n\nexport type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]\n}\n\nexport type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {\n  /**\n   * The parts/slots of the recipe.\n   */\n  slots: S[] | Readonly<S[]>\n  /**\n   * The base styles of the recipe.\n   */\n  base?: SlotRecord<S, SystemStyleObject>\n  /**\n   * The multi-variant styles of the recipe.\n   */\n  variants?: T | SlotRecipeVariantRecord<S>\n  /**\n   * The default variants of the recipe.\n   */\n  defaultVariants?: RecipeSelection<T>\n  /**\n   * The styles to apply when a combination of variants is selected.\n   */\n  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>\n}\n\nexport type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(\n  config: SlotRecipeDefinition<S, T>,\n) => SlotRecipeRuntimeFn<S, T>\n\nexport type SlotRecipeConfig<\n  S extends string = string,\n  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,\n> = SlotRecipeDefinition<S, T> & RecipeConfigMeta\n"
 };
 
 // src/artifacts/generated/pattern.d.ts.json
@@ -3023,7 +3028,10 @@ var categories = [
   "assets"
 ];
 function generateTokenTypes(ctx) {
-  const { tokens } = ctx;
+  const {
+    tokens,
+    config: { theme }
+  } = ctx;
   const set = /* @__PURE__ */ new Set();
   set.add(`export type Token = ${tokens.isEmpty ? "string" : unionType3(tokens.allNames)}`);
   const result = /* @__PURE__ */ new Set(["export type Tokens = {"]);
@@ -3039,6 +3047,9 @@ function generateTokenTypes(ctx) {
       set.add(`export type ${typeName}Token = ${unionType3(value.keys())}`);
       result.add(`		${key}: ${typeName}Token`);
     }
+    const keyframes = Object.keys(theme?.keyframes ?? {});
+    set.add(`export type AnimationName = ${unionType3(keyframes)}`);
+    result.add(`		animationName: AnimationName`);
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
@@ -3137,7 +3148,7 @@ function setupSva(ctx) {
   };
 }
 function setupCx(ctx) {
-  const code = generateCx();
+  const code = generateCx(ctx);
   return {
     dir: ctx.paths.css,
     files: [
@@ -3303,7 +3314,7 @@ var generateFlattenedCss = (ctx) => (options) => {
   const { files, resolve } = options;
   const { theme: { keyframes } = {}, preflight, minify, staticCss } = ctx.config;
   const unresolved = [
-    "@layer reset, base, tokens, recipes, utilities;",
+    ctx.layerString,
     preflight && "@import './reset.css';",
     "@import './global.css';",
     staticCss && "@import './static.css';",
@@ -3460,12 +3471,20 @@ var getBaseEngine = (conf) => {
   });
   const compositionContext = { conditions, utility };
   assignCompositions(compositions, compositionContext);
+  const layers = config.layers;
+  const layerNames = Object.values(layers);
+  const isValidLayerRule = memo((layerRule) => {
+    const names = new Set(layerRule.split(",").map((name) => name.trim()));
+    return names.size >= 5 && layerNames.every((name) => names.has(name));
+  });
+  const layerString = `@layer ${layerNames.join(", ")};`;
   const createSheetContext = () => ({
     root: postcss3.root(),
     conditions,
     utility,
     hash: hash.className,
-    helpers
+    helpers,
+    layers
   });
   const createSheet = (options) => {
     const sheetContext = createSheetContext();
@@ -3501,7 +3520,12 @@ var getBaseEngine = (conf) => {
     recipes,
     conditions,
     createSheetContext,
-    createSheet
+    createSheet,
+    // cascade layer
+    layers,
+    isValidLayerRule,
+    layerString,
+    layerNames
   };
 };
 
@@ -3610,7 +3634,15 @@ var defaults = (conf) => ({
     outExtension: "mjs",
     shorthands: true,
     syntax: "object-literal",
-    ...conf.config
+    ...conf.config,
+    layers: {
+      reset: "reset",
+      base: "base",
+      tokens: "tokens",
+      recipes: "recipes",
+      utilities: "utilities",
+      ...conf.config.layers
+    }
   }
 });
 var getImportMap = (outdir) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -20,17 +20,17 @@
     "pluralize": "8.0.0",
     "postcss": "8.4.27",
     "ts-pattern": "5.0.4",
-    "@pandacss/core": "0.11.0",
-    "@pandacss/is-valid-prop": "0.11.0",
-    "@pandacss/logger": "0.11.0",
-    "@pandacss/shared": "0.11.0",
-    "@pandacss/token-dictionary": "0.11.0",
-    "@pandacss/types": "0.11.0"
+    "@pandacss/core": "0.12.0",
+    "@pandacss/is-valid-prop": "0.12.0",
+    "@pandacss/logger": "0.12.0",
+    "@pandacss/shared": "0.12.0",
+    "@pandacss/token-dictionary": "0.12.0",
+    "@pandacss/types": "0.12.0"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.30",
     "hookable": "5.5.3",
-    "@pandacss/fixture": "0.11.0"
+    "@pandacss/fixture": "0.12.0"
   },
   "scripts": {
     "prebuild": "tsx scripts/prebuild.ts",