@pandacss/generator 0.30.1 → 0.30.2

package/dist/index.js

@@ -1903,63 +1903,88 @@ function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
     js: import_outdent29.outdent`
-    import { Dynamic } from 'solid-js/web'
     import { createMemo, mergeProps, splitProps } from 'solid-js'
-    import { createComponent } from 'solid-js/web'
+    import { Dynamic, createComponent } from 'solid-js/web'
+    ${ctx.file.import("css, cx, cva", "../css/index")}
+    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
     ${ctx.file.import(
-      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "composeCvaFn, composeShouldForwardProps, defaultShouldForwardProp, getDisplayName",
       "./factory-helper"
     )}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
 
     function styledFn(element, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      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,
+        options.dataAttr && configOrCva.__name__
+          ? { 'data-recipe': configOrCva.__name__ }
+          : {},
+        options.defaultProps
       )
 
       const ${componentName} = (props) => {
-        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
-
-        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-
-        const forwardedKeys = createMemo(() =>
-          Object.keys(props).filter((prop) => !normalizeHTMLProps.keys.includes(prop) && shouldForwardProp(prop)),
+        const mergedProps = mergeProps(
+          { as: element.__base__ || element },
+          defaultProps,
+          props
         )
 
-        const [localProps, htmlProps, forwardedProps, restProps] = splitProps(
-          mergedProps,
-          ['as', 'class', 'className'],
-          normalizeHTMLProps.keys,
-          forwardedKeys()
+        const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
+        
+        const __shouldForwardProps__ = composeShouldForwardProps(
+          element,
+          shouldForwardProp
         )
 
-        const cssPropertyKeys = createMemo(() => Object.keys(restProps).filter((prop) => isCssProperty(prop)))
+        const [localProps, restProps] = splitProps(mergedProps, [
+          'as',
+          'class',
+          'className',
+        ])
 
-        const [variantProps, styleProps, elementProps] = splitProps(
-          restProps,
-          __cvaFn__.variantKeys,
-          cssPropertyKeys(),
-        )
+        const [htmlProps, aProps] = splitProps(restProps, normalizeHTMLProps.keys)
+
+        const forwardedKeys = createMemo(() => {
+          const keys = Object.keys(aProps)
+          return keys.filter((prop) => __shouldForwardProps__(prop))
+        })
+
+        const [forwardedProps, variantProps, bProps] = splitProps(aProps, forwardedKeys(), __cvaFn__.variantKeys)
+
+        const cssPropKeys = createMemo(() => {
+          const keys = Object.keys(bProps)
+          return keys.filter((prop) => isCssProperty(prop))
+        })
+
+        const [styleProps, elementProps] = splitProps(bProps, cssPropKeys())
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          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)
-          return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          return cx(
+            css(cvaStyles, propStyles, cssStyles),
+            localProps.class,
+            localProps.className
+          )
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1970,19 +1995,14 @@ function generateSolidJsxFactory(ctx) {
 
         return createComponent(
           Dynamic,
-          mergeProps(
-            forwardedProps,
-            elementProps,
-            normalizeHTMLProps(htmlProps),
-            {
-              get component() {
-                return localProps.as
-              },
-              get class() {
-                return classes()
-              }
+          mergeProps(forwardedProps, elementProps, normalizeHTMLProps(htmlProps), {
+            get component() {
+              return localProps.as
             },
-          )
+            get class() {
+              return classes()
+            },
+          })
         )
       }
 
@@ -2288,8 +2308,11 @@ function generateVueJsxFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
           const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
@@ -2315,17 +2338,48 @@ function generateVueJsxFactory(ctx) {
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
+
           return () => {
             const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
+            
             return h(
               props.as,
               {
                 ...forwardedProps,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                ...vModelProps.value,
                 class: classes.value,
               },
-              slots.default && slots.default(),
+              slots,
             )
           }
         },
@@ -2339,19 +2393,13 @@ function generateVueJsxFactory(ctx) {
       return ${componentName}
     }
 
-    function createJsxFactory() {
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-         return styledFn(el)
-        },
-      })
-    }
+    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
+    tags.split(', ').forEach((tag) => {
+      styled[tag] = styled(tag);
+    });
     `
   };
 }
@@ -2375,11 +2423,43 @@ function generateVueJsxStringLiteralFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           })
+
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
           
           return () => {
             return h(
@@ -2387,8 +2467,9 @@ function generateVueJsxStringLiteralFactory(ctx) {
               {
                 class: classes.value,
                 ...elementProps,
+                ...vModelProps.value,
               },
-              slots.default && slots.default(),
+             slots
             )
           }
         },
@@ -2401,23 +2482,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
     }
   }
 
-    function createJsxFactory() {
-      const cache = new Map()
+  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-      return new Proxy(createStyled, {
-        apply(_, __, args) {
-          return createStyled(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyled(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
+  export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+  tags.split(', ').forEach((tag) => {
+    styled[tag] = styled(tag);
+  });
     `
   };
 }

package/dist/index.mjs

@@ -1867,63 +1867,88 @@ function generateSolidJsxFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
     js: outdent29`
-    import { Dynamic } from 'solid-js/web'
     import { createMemo, mergeProps, splitProps } from 'solid-js'
-    import { createComponent } from 'solid-js/web'
+    import { Dynamic, createComponent } from 'solid-js/web'
+    ${ctx.file.import("css, cx, cva", "../css/index")}
+    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
     ${ctx.file.import(
-      "defaultShouldForwardProp, composeShouldForwardProps, composeCvaFn, getDisplayName",
+      "composeCvaFn, composeShouldForwardProps, defaultShouldForwardProp, getDisplayName",
       "./factory-helper"
     )}
     ${ctx.file.import("isCssProperty", "./is-valid-prop")}
-    ${ctx.file.import("css, cx, cva", "../css/index")}
-    ${ctx.file.import("normalizeHTMLProps", "../helpers")}
 
     function styledFn(element, configOrCva = {}, options = {}) {
-      const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
+      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,
+        options.dataAttr && configOrCva.__name__
+          ? { 'data-recipe': configOrCva.__name__ }
+          : {},
+        options.defaultProps
       )
 
       const ${componentName} = (props) => {
-        const mergedProps = mergeProps({ as: element.__base__ || element }, defaultProps, props)
-
-        const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
-        const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
-
-        const forwardedKeys = createMemo(() =>
-          Object.keys(props).filter((prop) => !normalizeHTMLProps.keys.includes(prop) && shouldForwardProp(prop)),
+        const mergedProps = mergeProps(
+          { as: element.__base__ || element },
+          defaultProps,
+          props
         )
 
-        const [localProps, htmlProps, forwardedProps, restProps] = splitProps(
-          mergedProps,
-          ['as', 'class', 'className'],
-          normalizeHTMLProps.keys,
-          forwardedKeys()
+        const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
+        
+        const __shouldForwardProps__ = composeShouldForwardProps(
+          element,
+          shouldForwardProp
         )
 
-        const cssPropertyKeys = createMemo(() => Object.keys(restProps).filter((prop) => isCssProperty(prop)))
+        const [localProps, restProps] = splitProps(mergedProps, [
+          'as',
+          'class',
+          'className',
+        ])
 
-        const [variantProps, styleProps, elementProps] = splitProps(
-          restProps,
-          __cvaFn__.variantKeys,
-          cssPropertyKeys(),
-        )
+        const [htmlProps, aProps] = splitProps(restProps, normalizeHTMLProps.keys)
+
+        const forwardedKeys = createMemo(() => {
+          const keys = Object.keys(aProps)
+          return keys.filter((prop) => __shouldForwardProps__(prop))
+        })
+
+        const [forwardedProps, variantProps, bProps] = splitProps(aProps, forwardedKeys(), __cvaFn__.variantKeys)
+
+        const cssPropKeys = createMemo(() => {
+          const keys = Object.keys(bProps)
+          return keys.filter((prop) => isCssProperty(prop))
+        })
+
+        const [styleProps, elementProps] = splitProps(bProps, cssPropKeys())
 
         function recipeClass() {
           const { css: cssStyles, ...propStyles } = styleProps
-          const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps);
-          return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          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)
-          return cx(css(cvaStyles, propStyles, cssStyles), localProps.class, localProps.className)
+          return cx(
+            css(cvaStyles, propStyles, cssStyles),
+            localProps.class,
+            localProps.className
+          )
         }
 
         const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
@@ -1934,19 +1959,14 @@ function generateSolidJsxFactory(ctx) {
 
         return createComponent(
           Dynamic,
-          mergeProps(
-            forwardedProps,
-            elementProps,
-            normalizeHTMLProps(htmlProps),
-            {
-              get component() {
-                return localProps.as
-              },
-              get class() {
-                return classes()
-              }
+          mergeProps(forwardedProps, elementProps, normalizeHTMLProps(htmlProps), {
+            get component() {
+              return localProps.as
             },
-          )
+            get class() {
+              return classes()
+            },
+          })
         )
       }
 
@@ -2252,8 +2272,11 @@ function generateVueJsxFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic.__base__ || Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
           const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
 
@@ -2279,17 +2302,48 @@ function generateVueJsxFactory(ctx) {
 
           const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
 
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
+
           return () => {
             const [htmlProps, forwardedProps, _variantProps, _styleProps, elementProps] = splittedProps.value
+            
             return h(
               props.as,
               {
                 ...forwardedProps,
                 ...elementProps,
                 ...normalizeHTMLProps(htmlProps),
+                ...vModelProps.value,
                 class: classes.value,
               },
-              slots.default && slots.default(),
+              slots,
             )
           }
         },
@@ -2303,19 +2357,13 @@ function generateVueJsxFactory(ctx) {
       return ${componentName}
     }
 
-    function createJsxFactory() {
-      return new Proxy(styledFn, {
-        apply(_, __, args) {
-          return styledFn(...args)
-        },
-        get(_, el) {
-         return styledFn(el)
-        },
-      })
-    }
+    const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+    export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
+    tags.split(', ').forEach((tag) => {
+      styled[tag] = styled(tag);
+    });
     `
   };
 }
@@ -2339,11 +2387,43 @@ function generateVueJsxStringLiteralFactory(ctx) {
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
-        props: { as: { type: [String, Object], default: Dynamic } },
-        setup(props, { slots, attrs }) {
+        props: {
+          modelValue: null,
+          as: { type: [String, Object], default: Dynamic }
+        },
+        setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
             return cx(css(Dynamic.__styles__, styles), elementProps.className)
           })
+
+          const vModelProps = computed(() => {
+            const result = {};
+    
+            if (
+              props.as === 'input' &&
+              (props.type === 'checkbox' || props.type === 'radio')
+            ) {
+              result.checked = props.modelValue;
+              result.onChange = (event) => {
+                const checked = !event.currentTarget.checked;
+                emit('change', checked, event);
+                emit('update:modelValue', checked, event);
+              };
+            } else if (
+              props.as === 'input' ||
+              props.as === 'textarea' ||
+              props.as === 'select'
+            ) {
+              result.value = props.modelValue;
+              result.onInput = (event) => {
+                const value = event.currentTarget.value;
+                emit('input', value, event);
+                emit('update:modelValue', value, event);
+              };
+            }
+    
+            return result;
+          });
           
           return () => {
             return h(
@@ -2351,8 +2431,9 @@ function generateVueJsxStringLiteralFactory(ctx) {
               {
                 class: classes.value,
                 ...elementProps,
+                ...vModelProps.value,
               },
-              slots.default && slots.default(),
+             slots
             )
           }
         },
@@ -2365,23 +2446,13 @@ function generateVueJsxStringLiteralFactory(ctx) {
     }
   }
 
-    function createJsxFactory() {
-      const cache = new Map()
+  const tags = 'a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, main, map, mark, marquee, menu, menuitem, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, picture, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr, circle, clipPath, defs, ellipse, foreignObject, g, image, line, linearGradient, mask, path, pattern, polygon, polyline, radialGradient, rect, stop, svg, text, tspan';
 
-      return new Proxy(createStyled, {
-        apply(_, __, args) {
-          return createStyled(...args)
-        },
-        get(_, el) {
-          if (!cache.has(el)) {
-            cache.set(el, createStyled(el))
-          }
-          return cache.get(el)
-        },
-      })
-    }
+  export const ${factoryName} = /* @__PURE__ */ styledFn.bind();
 
-    export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
+  tags.split(', ').forEach((tag) => {
+    styled[tag] = styled(tag);
+  });
     `
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.30.1",
+  "version": "0.30.2",
   "description": "The css generator for css panda",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -37,12 +37,12 @@
     "pluralize": "8.0.0",
     "postcss": "^8.4.31",
     "ts-pattern": "5.0.5",
-    "@pandacss/core": "0.30.1",
-    "@pandacss/is-valid-prop": "^0.30.1",
-    "@pandacss/logger": "0.30.1",
-    "@pandacss/shared": "0.30.1",
-    "@pandacss/token-dictionary": "0.30.1",
-    "@pandacss/types": "0.30.1"
+    "@pandacss/core": "0.30.2",
+    "@pandacss/is-valid-prop": "^0.30.2",
+    "@pandacss/logger": "0.30.2",
+    "@pandacss/shared": "0.30.2",
+    "@pandacss/token-dictionary": "0.30.2",
+    "@pandacss/types": "0.30.2"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"