@pandacss/generator 0.15.2 → 0.15.4

package/dist/index.js

@@ -1054,7 +1054,15 @@ function generateRecipes(ctx) {
    ${ctx.file.import("compact, createCss, withoutSpace", "../helpers")}
 
    export const createRecipe = (name, defaultVariants, compoundVariants) => {
-     return (variants) => {
+    const getRecipeStyles = (variants) => {
+      return {
+        [name]: '__ignore__',
+        ...defaultVariants,
+        ...compact(variants),
+      };
+    };
+
+     const recipeFn = (variants, withCompoundVariants = true) => {
       const transform = (prop, value) => {
         assertCompoundVariant(name, compoundVariants, variants, prop)
 
@@ -1074,16 +1082,21 @@ function generateRecipes(ctx) {
         }
       })
 
-      const recipeStyles = {
-        [name]: '__ignore__',
-        ...defaultVariants,
-        ...compact(variants),
-      }
+      const recipeStyles = getRecipeStyles(variants)
 
-      const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
+      if (withCompoundVariants) {
+        const compoundVariantStyles = getCompoundVariantCss(compoundVariants, recipeStyles)
+        return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
+      }
 
-      return cx(recipeCss(recipeStyles), css(compoundVariantStyles))
+      return recipeCss(recipeStyles)
      }
+
+      return Object.assign(recipeFn, {
+        __getCompoundVariantCss__: (variants) => {
+          return getCompoundVariantCss(compoundVariants, getRecipeStyles(variants));
+        },
+      })
    }
   `
   };
@@ -1112,6 +1125,7 @@ function generateRecipes(ctx) {
 
         export const ${baseName} = Object.assign(${baseName}Fn, {
           __recipe__: false,
+          __name__: '${baseName}',
           raw: (props) => props,
           variantKeys: ${baseName}VariantKeys,
           variantMap: ${stringify2(variantKeyMap)},
@@ -1133,6 +1147,7 @@ function generateRecipes(ctx) {
         const ${baseName}VariantKeys = Object.keys(${baseName}VariantMap)
         export const ${baseName} = Object.assign(${baseName}Fn, {
           __recipe__: true,
+          __name__: '${baseName}',
           raw: (props) => props,
           variantKeys: ${baseName}VariantKeys,
           variantMap: ${baseName}VariantMap,
@@ -1280,38 +1295,51 @@ function generatePreactJsxFactory(ctx) {
     import { h } from 'preact'
     import { forwardRef } from 'preact/compat'
     import { useMemo } from 'preact/hooks'
-    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    function styledFn(Dynamic, configOrCva = {}) {
+    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+
+    function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
+      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+      const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
+      
+      const defaultProps = Object.assign(
+        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+        options.defaultProps,
+      )
+
       const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic, ...restProps } = props
+        const { as: Element = Dynamic, children, ...restProps } = props
+
+        const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
-        const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-          return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-        }, [restProps])
+        const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+        }, [combinedProps])
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const styles = assignCss(propStyles, cssStyles)
-          return cx(cvaFn(variantProps), css(styles), elementProps.className, elementProps.class)
+          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
+          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.raw(variantProps)
-          const styles = assignCss(cvaStyles, propStyles, cssStyles)
-          return cx(css(styles), elementProps.className, elementProps.class)
+          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, combinedProps.className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
         return h(Element, {
+          ...forwardedProps,
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
+          children,
           ref,
           className: classes()
         })
@@ -1393,7 +1421,7 @@ function generatePreactJsxPattern(ctx) {
 // src/artifacts/preact-jsx/types.ts
 var import_outdent16 = require("outdent");
 function generatePreactJsxTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent16.outdent`
 import type { ${upperName} } from '../types/jsx'
@@ -1415,18 +1443,26 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
 
 interface RecipeFn = { __type: any }
 
+interface JsxFactoryOptions<TProps extends Dict> {
+  dataAttr?: boolean
+  defaultProps?: TProps
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}
+
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+
 interface JsxFactory {
-  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
 }
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -1487,7 +1523,7 @@ function generatePreactJsxStringLiteralFactory(ctx) {
 // src/artifacts/preact-jsx/types.string-literal.ts
 var import_outdent18 = require("outdent");
 function generatePreactJsxStringLiteralTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent18.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1511,7 +1547,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -1525,37 +1561,50 @@ function generateQwikJsxFactory(ctx) {
   return {
     js: import_outdent19.outdent`
     import { h } from '@builder.io/qwik'
-    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    function styledFn(Dynamic, configOrCva = {}) {
+    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+          
+    function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
+      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+      const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
+      
+      const defaultProps = Object.assign(
+        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+        options.defaultProps,
+      )
+
       const ${componentName} = function ${componentName}(props) {
-        const { as: Element = Dynamic, ...restProps } = props
+        const { as: Element = Dynamic, children, className, ...restProps } = props
 
-        const [variantProps, styleProps, htmlProps, elementProps] =
-            splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+        const combinedProps = Object.assign({}, defaultProps, restProps)
+        
+        const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] =
+          splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
 
         const { css: cssStyles, ...propStyles } = styleProps
 
         function recipeClass() {
-          const styles = assignCss(propStyles, cssStyles)
-          return cx(cvaFn(variantProps), css(styles), elementProps.class)
+          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
+          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.class, className)
         }
 
         function cvaClass() {
           const cvaStyles = cvaFn.raw(variantProps)
-          const styles = assignCss(cvaStyles, propStyles, cssStyles)
-          return cx(css(styles), elementProps.class)
+          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.class, className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
         return h(Element, {
+          ...forwardedProps,
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
+          children,
           class: classes(),
         })
       }
@@ -1636,7 +1685,7 @@ function generateQwikJsxPattern(ctx) {
 // src/artifacts/qwik-jsx/types.ts
 var import_outdent21 = require("outdent");
 function generateQwikJsxTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent21.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1661,18 +1710,26 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> ex
 
 interface RecipeFn { __type: any }
 
+interface JsxFactoryOptions<TProps extends Dict> {
+  dataAttr?: boolean
+  defaultProps?: TProps
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}
+
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+
 interface JsxFactory {
-  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
 }
 
 type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T>, JsxStyleProps>
   `
@@ -1732,7 +1789,7 @@ function generateQwikJsxStringLiteralFactory(ctx) {
 // src/artifacts/qwik-jsx/types.string-literal.ts
 var import_outdent23 = require("outdent");
 function generateQwikJsxStringLiteralTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent23.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1761,7 +1818,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof QwikIntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -1770,79 +1827,57 @@ export type ${typeName}<T extends ElementType> = ComponentProps<T>
 
 // src/artifacts/react-jsx/jsx.ts
 var import_outdent24 = require("outdent");
-var import_ts_pattern6 = require("ts-pattern");
 function generateReactJsxFactory(ctx) {
   const { factoryName, componentName } = ctx.jsx;
   return {
     js: import_outdent24.outdent`
     import { createElement, forwardRef, useMemo } from 'react'
-    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
-    ${ctx.jsx.styleProps === "all" ? ctx.file.import("isCssProperty", "./is-valid-prop") : ""}
+    ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    function styledFn(Dynamic, configOrCva = {}) {
+    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+    
+    function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
-      const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
-        const { as: Element = Dynamic, ...restProps } = props
-
-        ${(0, import_ts_pattern6.match)(ctx.jsx.styleProps).with("all", () => {
-      return import_outdent24.outdent`
-          const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
-            return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
-          }, [restProps])
+      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+      const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
+      
+      const defaultProps = Object.assign(
+        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+        options.defaultProps,
+      )
 
-          function recipeClass() {
-            const { css: cssStyles, ...propStyles } = styleProps
-            const styles = assignCss(propStyles, cssStyles)
-            return cx(cvaFn(variantProps), css(styles), elementProps.className)
-          }
+      const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
+        const { as: Element = Dynamic, children, ...restProps } = props
 
-          function cvaClass() {
-            const { css: cssStyles, ...propStyles } = styleProps
-            const cvaStyles = cvaFn.raw(variantProps)
-            const styles = assignCss(cvaStyles, propStyles, cssStyles)
-            return cx(css(styles), elementProps.className)
-          }`;
-    }).with("minimal", () => {
-      return import_outdent24.outdent`
-          const [variantProps, htmlProps, elementProps] = useMemo(() => {
-            return splitProps(restProps, cvaFn.variantKeys, normalizeHTMLProps.keys)
-          }, [restProps])
-
-          function recipeClass() {
-            return cx(cvaFn(variantProps), css(assignCss(elementProps.css)), elementProps.className)
-          }
+        const combinedProps = useMemo(() => Object.assign({}, defaultProps, restProps), [restProps])
 
-          function cvaClass() {
-            const cvaStyles = cvaFn.raw(variantProps)
-            const styles = assignCss(cvaStyles, elementProps.css)
-            return cx(css(styles), elementProps.className)
-          }`;
-    }).with("none", () => {
-      return import_outdent24.outdent`
-          const [variantProps, htmlProps, elementProps] = useMemo(() => {
-            return splitProps(restProps, cvaFn.variantKeys, normalizeHTMLProps.keys)
-          }, [restProps])
-
-          function recipeClass() {
-            return cx(cvaFn(variantProps), elementProps.className)
-          }
+        const [forwardedProps, variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+          return splitProps(combinedProps, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+        }, [combinedProps])
 
-          function cvaClass() {
-            const cvaStyles = cvaFn.raw(variantProps)
-            const styles = assignCss(cvaStyles)
-            return cx(css(styles), elementProps.className)
-          }`;
-    }).run()}
+        function recipeClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
+          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
+        }
 
+        function cvaClass() {
+          const { css: cssStyles, ...propStyles } = styleProps
+          const cvaStyles = cvaFn.raw(variantProps)
+          return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
+        }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
         return createElement(Element, {
           ref,
+          ...forwardedProps,
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
+          children,
           className: classes(),
         })
       })
@@ -1876,7 +1911,7 @@ function generateReactJsxFactory(ctx) {
 
 // src/artifacts/react-jsx/pattern.ts
 var import_outdent25 = require("outdent");
-var import_ts_pattern7 = require("ts-pattern");
+var import_ts_pattern6 = require("ts-pattern");
 function generateReactJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -1890,7 +1925,7 @@ function generateReactJsxPattern(ctx) {
       ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern7.match)(props.length).with(
+        ${(0, import_ts_pattern6.match)(props.length).with(
         0,
         () => import_outdent25.outdent`
         const styleProps = ${styleFnName}()
@@ -1923,7 +1958,7 @@ function generateReactJsxPattern(ctx) {
 // src/artifacts/react-jsx/types.ts
 var import_outdent26 = require("outdent");
 function generateReactJsxTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent26.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -1947,18 +1982,26 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
 
 interface RecipeFn { __type: any }
 
+interface JsxFactoryOptions<TProps extends Dict> {
+  dataAttr?: boolean
+  defaultProps?: TProps
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}
+
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+
 interface JsxFactory {
-  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
 }
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -2019,7 +2062,7 @@ function generateReactJsxStringLiteralFactory(ctx) {
 // src/artifacts/react-jsx/types.string-literal.ts
 var import_outdent28 = require("outdent");
 function generateReactJsxStringLiteralTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent28.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2046,7 +2089,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -2060,21 +2103,33 @@ function generateSolidJsxFactory(ctx) {
   return {
     js: import_outdent29.outdent`
     import { Dynamic } from 'solid-js/web'
-    import { mergeProps, splitProps } from 'solid-js'
+    import { createMemo, mergeProps, splitProps } from 'solid-js'
     import { createComponent } from 'solid-js/web'
-    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("normalizeHTMLProps", "../helpers")}
-    ${ctx.file.import("allCssProperties", "./is-valid-prop")}
-
-    function styledFn(element, configOrCva = {}) {
+    ${ctx.file.import("isCssProperty, allCssProperties", "./is-valid-prop")}
+    
+    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+    
+    function styledFn(element, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
+      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+      const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
+      
+      const defaultProps = Object.assign(
+        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+        options.defaultProps,
+      )
+
       return function ${componentName}(props) {
-        const mergedProps = mergeProps({ as: element }, props)
+        const mergedProps = mergeProps({ as: element }, defaultProps, props)
+        const forwardedKeys = createMemo(() => Object.keys(props).filter(shouldForwardProp))
 
-        const [localProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
+        const [localProps, forwardedProps, variantProps, styleProps, htmlProps, elementProps] = splitProps(
           mergedProps,
-          ['as', 'class'],
+          ['as', 'class', 'className'],
+          forwardedKeys(),
           cvaFn.variantKeys,
           allCssProperties,
           normalizeHTMLProps.keys
@@ -2082,22 +2137,28 @@ function generateSolidJsxFactory(ctx) {
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const styles = assignCss(propStyles, cssStyles)
-          return cx(cvaFn(variantProps), css(styles), localProps.class)
+          const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
+          return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
         }
 
         function cvaClass() {
           const { css: cssStyles, ...propStyles } = styleProps
           const cvaStyles = cvaFn.raw(variantProps)
-          const styles = assignCss(cvaStyles, propStyles, cssStyles)
-          return cx(css(styles), localProps.class)
+          return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+        if (forwardedProps.className) {
+          delete forwardedProps.className
+        }
+
         return createComponent(
           Dynamic,
           mergeProps(
+            forwardedProps,
+            elementProps,
+            normalizeHTMLProps(htmlProps),
             {
               get component() {
                 return localProps.as
@@ -2106,8 +2167,6 @@ function generateSolidJsxFactory(ctx) {
                 return classes()
               }
             },
-            elementProps,
-            normalizeHTMLProps(htmlProps)
           )
         )
       }
@@ -2136,7 +2195,7 @@ function generateSolidJsxFactory(ctx) {
 
 // src/artifacts/solid-jsx/pattern.ts
 var import_outdent30 = require("outdent");
-var import_ts_pattern8 = require("ts-pattern");
+var import_ts_pattern7 = require("ts-pattern");
 function generateSolidJsxPattern(ctx) {
   const { typeName, factoryName } = ctx.jsx;
   return ctx.patterns.details.map((pattern) => {
@@ -2151,7 +2210,7 @@ function generateSolidJsxPattern(ctx) {
     ${ctx.file.import(styleFnName, `../patterns/${dashName}`)}
 
     export function ${jsxName}(props) {
-      ${(0, import_ts_pattern8.match)(props.length).with(
+      ${(0, import_ts_pattern7.match)(props.length).with(
         0,
         () => import_outdent30.outdent`
           const styleProps = ${styleFnName}()
@@ -2184,7 +2243,7 @@ function generateSolidJsxPattern(ctx) {
 // src/artifacts/solid-jsx/types.ts
 var import_outdent31 = require("outdent");
 function generateSolidJsxTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent31.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2206,18 +2265,26 @@ export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
 
 interface RecipeFn { __type: any }
 
+interface JsxFactoryOptions<TProps extends Dict> {
+  dataAttr?: boolean
+  defaultProps?: TProps
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}
+
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+
 interface JsxFactory {
-  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>>): ${componentName}<T, P['__type']>
 }
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -2283,7 +2350,7 @@ export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
 // src/artifacts/solid-jsx/types.string-literal.ts
 var import_outdent33 = require("outdent");
 function generateSolidJsxStringLiteralTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent33.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2307,7 +2374,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in keyof JSX.IntrinsicElements]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -2321,12 +2388,23 @@ function generateVueJsxFactory(ctx) {
   return {
     js: import_outdent34.outdent`
     import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import("css, cx, cva, assignCss", "../css/index")}
+    ${ctx.file.import("css, cx, cva", "../css/index")}
     ${ctx.file.import("splitProps, normalizeHTMLProps", "../helpers")}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
 
-    function styledFn(Dynamic, configOrCva = {}) {
+    const defaultShouldForwardProp = (prop, variantKeys) => !variantKeys.includes(prop) && !isCssProperty(prop)
+          
+    function styledFn(Dynamic, configOrCva = {}, options = {}) {
       const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      
+      const forwardFn = options.shouldForwardProp || defaultShouldForwardProp
+      const shouldForwardProp = (prop) => forwardFn(prop, cvaFn.variantKeys)
+      
+      const defaultProps = Object.assign(
+        options.dataAttr && configOrCva.__name__ ? { 'data-recipe': configOrCva.__name__ } : {},
+        options.defaultProps,
+      )
+        
       const name = (typeof Dynamic === 'string' ? Dynamic : Dynamic.displayName || Dynamic.name) || 'Component'
 
       return defineComponent({
@@ -2334,35 +2412,37 @@ function generateVueJsxFactory(ctx) {
         inheritAttrs: false,
         props: { as: { type: [String, Object], default: Dynamic } },
         setup(props, { slots, attrs }) {
+          const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
+          
           const splittedProps = computed(() => {
-            return splitProps(attrs, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+            return splitProps(combinedProps.value, shouldForwardProp, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
           })
 
           const recipeClass = computed(() => {
-            const [variantProps, styleProps, _htmlProps, elementProps] = splittedProps.value
+            const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const styles = assignCss(propStyles, cssStyles)
-            return cx(cvaFn(variantProps), css(styles), elementProps.className)
+            const compoundVariantStyles = cvaFn.__getCompoundVariantCss__?.(variantProps);
+            return cx(cvaFn(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.value.className)
           })
 
           const cvaClass = computed(() => {
-            const [variantProps, styleProps, _htmlProps, elementProps] = splittedProps.value
+            const [_forwardedProps, variantProps, styleProps, _htmlProps, _elementProps] = splittedProps.value
             const { css: cssStyles, ...propStyles } = styleProps
-            const styles = assignCss(propStyles, cssStyles)
-            return cx(cvaFn(variantProps), css(styles), elementProps.className)
+            const cvaStyles = cvaFn.raw(variantProps)
+            return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.value.className)
           })
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
           return () => {
-            const [_styleProps, _variantProps, htmlProps, elementProps] = splittedProps.value
-
+            const [forwardedProps, _variantProps, _styleProps, htmlProps, elementProps] = splittedProps.value
             return h(
               props.as,
               {
-                class: classes.value,
+                ...forwardedProps.value,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                class: classes.value,
               },
               slots.default && slots.default(),
             )
@@ -2372,17 +2452,12 @@ function generateVueJsxFactory(ctx) {
     }
 
     function createJsxFactory() {
-      const cache = new Map()
-
       return new Proxy(styledFn, {
         apply(_, __, args) {
           return styledFn(...args)
         },
         get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, styledFn(el))
-          }
-          return cache.get(el)
+         return styledFn(el)
         },
       })
     }
@@ -2495,7 +2570,7 @@ function generateVueJsxPattern(ctx) {
 // src/artifacts/vue-jsx/types.ts
 var import_outdent37 = require("outdent");
 function generateVueJsxTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent37.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2523,18 +2598,26 @@ JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>
 
 interface RecipeFn = { __type: any }
 
+interface JsxFactoryOptions<TProps extends Dict> {
+  dataAttr?: boolean
+  defaultProps?: TProps
+  shouldForwardProp?(prop: string, variantKeys: string[]): boolean
+}
+
+export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P['__type']>>;
+
 interface JsxFactory {
-  ${styleProps === "none" ? "" : `<T extends ElementType>(component: T): ${componentName}<T, {}>`}
-  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>): ${componentName}<
+  <T extends ElementType>(component: T): ${componentName}<T, {}>
+  <T extends ElementType, P extends RecipeVariantRecord>(component: T, recipe: RecipeDefinition<P>, options?: JsxFactoryOptions<JsxRecipeProps<T, RecipeSelection<P>>>): ${componentName}<
     T,
     RecipeSelection<P>
   >
-  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P): ${componentName}<T, P['__type']>
+  <T extends ElementType, P extends RecipeFn>(component: T, recipeFn: P, options?: JsxFactoryOptions<JsxRecipeProps<T, P['__type']>> ): ${componentName}<T, P['__type']>
 }
 
 type JsxElements = { [K in IntrinsicElement]: ${componentName}<K, {}> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
   `
@@ -2544,7 +2627,7 @@ export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T>,
 // src/artifacts/vue-jsx/types.string-literal.ts
 var import_outdent38 = require("outdent");
 function generateVueJsxStringLiteralTypes(ctx) {
-  const { factoryName, styleProps, componentName, upperName, typeName } = ctx.jsx;
+  const { factoryName, componentName, upperName, typeName } = ctx.jsx;
   return {
     jsxFactory: import_outdent38.outdent`
 ${ctx.file.importType(upperName, "../types/jsx")}
@@ -2572,7 +2655,7 @@ interface JsxFactory {
 
 type JsxElements = { [K in IntrinsicElement]: ${componentName}<K> }
 
-export type ${upperName} = JsxFactory ${styleProps === "none" ? "" : "& JsxElements"}
+export type ${upperName} = JsxFactory & JsxElements
 
 export type ${typeName}<T extends ElementType> = ComponentProps<T>
   `
@@ -2697,7 +2780,7 @@ var composition_d_ts_default = {
 
 // src/artifacts/generated/recipe.d.ts.json
 var recipe_d_ts_default = {
-  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 interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (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 interface 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\ninterface 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 interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    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 interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\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 interface 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 interface RecipeRuntimeFn<T extends RecipeVariantRecord> extends RecipeVariantFn<T> {\n  __type: RecipeSelection<T>\n  variantKeys: (keyof T)[]\n  variantMap: RecipeVariantMap<T>\n  raw: (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\ntype OneOrMore<T> = T | Array<T>\n\nexport type RecipeCompoundSelection<T> = {\n  [K in keyof T]?: OneOrMore<StringToBoolean<keyof T[K]>>\n}\n\nexport type RecipeCompoundVariant<T> = T & {\n  css: SystemStyleObject\n}\n\nexport interface 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\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?: Pretty<RecipeCompoundVariant<RecipeCompoundSelection<T>>>[]\n}\n\nexport type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>\n\ninterface 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 interface RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord>\n  extends RecipeDefinition<T>,\n    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 interface SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>>\n  extends SlotRecipeVariantFn<S, T> {\n  raw: (props?: RecipeSelection<T>) => Record<S, SystemStyleObject>\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> = T & {\n  css: SlotRecord<S, SystemStyleObject>\n}\n\nexport interface 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\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?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<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
@@ -2716,7 +2799,7 @@ var selectors_d_ts_default = {
 };
 
 // src/artifacts/types/generated.ts
-var import_ts_pattern9 = require("ts-pattern");
+var import_ts_pattern8 = require("ts-pattern");
 var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
 function getGeneratedTypes(ctx) {
   const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
@@ -2728,7 +2811,7 @@ function getGeneratedTypes(ctx) {
     composition: rewriteImports(composition_d_ts_default.content),
     selectors: rewriteImports(selectors_d_ts_default.content),
     system: rewriteImports(
-      (0, import_ts_pattern9.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
+      (0, import_ts_pattern8.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with("minimal", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = WithCss")).with("none", () => system_types_d_ts_default.content.replace(jsxStyleProps, "export type JsxStyleProps = {}")).exhaustive()
     )
   };
 }
@@ -3176,7 +3259,7 @@ var generateFlattenedCss = (ctx) => (options) => {
 // src/artifacts/css/parser-css.ts
 var import_logger2 = require("@pandacss/logger");
 var import_func = require("lil-fp/func");
-var import_ts_pattern10 = require("ts-pattern");
+var import_ts_pattern9 = require("ts-pattern");
 var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
   { ...ctx, sheet: ctx.createSheet(), result },
   (0, import_func.tap)(({ sheet, result: result2, patterns, recipes }) => {
@@ -3206,7 +3289,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
           const recipeConfig = recipes.getConfig(recipeName);
           if (!recipeConfig)
             continue;
-          (0, import_ts_pattern10.match)(recipe).with({ type: "jsx-recipe" }, () => {
+          (0, import_ts_pattern9.match)(recipe).with({ type: "jsx-recipe" }, () => {
             recipe.data.forEach((data) => {
               const [recipeProps, styleProps] = recipes.splitProps(recipeName, data);
               sheet.processStyleProps(filterProps(ctx, styleProps));
@@ -3225,7 +3308,7 @@ var generateParserCss = (ctx) => (result) => (0, import_func.pipe)(
     result2.pattern.forEach((patternSet, name) => {
       try {
         for (const pattern of patternSet) {
-          (0, import_ts_pattern10.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern10.P.string }, ({ name: jsxName }) => {
+          (0, import_ts_pattern9.match)(pattern).with({ type: "jsx-pattern", name: import_ts_pattern9.P.string }, ({ name: jsxName }) => {
             pattern.data.forEach((data) => {
               const fnName = patterns.find(jsxName);
               const styleProps = patterns.transform(fnName, data);
@@ -3430,6 +3513,7 @@ var getPatternEngine = (config) => {
     };
   });
   return {
+    keys: Object.keys(patterns),
     getConfig: (name) => patterns[name],
     transform: (name, data) => {
       return patterns[name]?.transform?.(data, helpers2) ?? {};
@@ -3509,11 +3593,11 @@ var defaults = (conf) => ({
     }
   }
 });
-var getImportMap = (outdir) => ({
-  css: [outdir, "css"],
-  recipe: [outdir, "recipes"],
-  pattern: [outdir, "patterns"],
-  jsx: [outdir, "jsx"]
+var getImportMap = (outdir, configImportMap) => ({
+  css: configImportMap?.css ? [configImportMap.css] : [outdir, "css"],
+  recipe: configImportMap?.recipes ? [configImportMap.recipes] : [outdir, "recipes"],
+  pattern: configImportMap?.patterns ? [configImportMap.patterns] : [outdir, "patterns"],
+  jsx: configImportMap?.jsx ? [configImportMap.jsx] : [outdir, "jsx"]
 });
 var createGenerator = (conf) => {
   const ctx = getEngine(defaults(conf));
@@ -3529,13 +3613,16 @@ var createGenerator = (conf) => {
     getParserCss: generateParserCss(ctx),
     messages: getMessages(ctx),
     parserOptions: {
-      importMap: getImportMap(config.outdir.replace(relativeBaseUrl, "")),
+      importMap: getImportMap(config.outdir.replace(relativeBaseUrl, ""), config.importMap),
       jsx: {
+        framework: jsx.framework,
         factory: jsx.factoryName,
         styleProps: jsx.styleProps,
         isStyleProp: isValidProperty,
         nodes: [...patterns.details, ...recipes.details]
       },
+      patternKeys: patterns.keys,
+      recipeKeys: recipes.keys,
       getRecipesByJsxName: recipes.filter,
       getPatternsByJsxName: patterns.filter,
       compilerOptions,