@pandacss/generator 0.0.0-dev-20250424111015 → 0.0.0-dev-20250425183451

package/dist/index.js

@@ -1193,13 +1193,13 @@ function generatePreactJsxStringLiteralFactory(ctx) {
     function createStyledFn(Dynamic) {
       const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
-        const styles = css.raw(template)
+        const styles = css.raw(Dynamic.__styles__, template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
           const { as: Element = __base__, ...elementProps } = props
 
           function classes() {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(styles), elementProps.className)
           }
 
           return h(Element, {
@@ -1522,13 +1522,13 @@ function generateQwikJsxStringLiteralFactory(ctx) {
     function createStyledFn(Dynamic) {
       const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
-          const styles = css.raw(template)
+          const styles = css.raw(Dynamic.__styles__, template)
 
           const ${componentName} = (props) => {
             const { as: Element = __base__, ...elementProps } = props
 
             function classes() {
-              return cx(css(__base__.__styles__, styles), elementProps.className)
+              return cx(css(styles), elementProps.className)
             }
 
             return h(Element, {
@@ -1855,13 +1855,13 @@ function generateReactJsxStringLiteralFactory(ctx) {
     function createStyledFn(Dynamic) {
       const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
-        const styles = css.raw(template)
+        const styles = css.raw(Dynamic.__styles__, template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
           const { as: Element = __base__, ...elementProps } = props
 
           function classes() {
-            return cx(css(__base__.__styles__, styles), elementProps.className)
+            return cx(css(styles), elementProps.className)
           }
 
           return createElement(Element, {
@@ -1898,7 +1898,6 @@ function generateReactJsxStringLiteralFactory(ctx) {
     }
 
     export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-
     `
   };
 }
@@ -2236,11 +2235,12 @@ ${ctx.file.import("getDisplayName", "./factory-helper")}
 ${ctx.file.import("css, cx", "../css/index")}
 
 function createStyled(element) {
+  const __base__ = element.__base__ || element
   return function styledFn(template) {
-    const styles = css.raw(template)
+    const styles = css.raw(element.__styles__, template)
 
     const ${componentName} = (props) => {
-      const mergedProps = mergeProps({ as: element.__base__ || element }, props)
+      const mergedProps = mergeProps({ as: __base__ }, props)
       const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
       
       return createComponent(
@@ -2251,7 +2251,7 @@ function createStyled(element) {
               return localProps.as
             },
             get class() {
-              return cx(css(element.__styles__, styles), localProps.class)
+              return cx(css(styles), localProps.class)
             },
           },
           elementProps,
@@ -2259,11 +2259,11 @@ function createStyled(element) {
       )
     }
 
-    const name = getDisplayName(element)
+    const name = getDisplayName(__base__)
 
     ${componentName}.displayName = \`${factoryName}.\${name}\`
     ${componentName}.__styles__ = styles
-    ${componentName}.__base__ = element
+    ${componentName}.__base__ = __base__
 
     return ${componentName}
   }
@@ -2354,16 +2354,18 @@ function generateVueJsxFactory(ctx) {
         options.defaultProps,
       )
 
-      const name = getDisplayName(Dynamic)
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      
+      const __base__ = Dynamic.__base__ || Dynamic
+      const name = getDisplayName(__base__)
 
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: {
           modelValue: null,
-          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+          as: { type: [String, Object], default: __base__ }
         },
         setup(props, { slots, attrs, emit }) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
@@ -2437,7 +2439,7 @@ function generateVueJsxFactory(ctx) {
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -2460,26 +2462,27 @@ function generateVueJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
     js: import_outdent35.outdent`
-    import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    ${ctx.file.import("css, cx", "../css/index")}
+  import { defineComponent, h, computed } from 'vue'
+  ${ctx.file.import("getDisplayName", "./factory-helper")}
+  ${ctx.file.import("css, cx", "../css/index")}
 
   function createStyled(Dynamic) {
     const name = getDisplayName(Dynamic)
+    const __base__ = Dynamic.__base__ || Dynamic
 
     function styledFn(template) {
-      const styles = css.raw(template)
+      const styles = css.raw(Dynamic.__styles__, template)
       
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: {
           modelValue: null,
-          as: { type: [String, Object], default: Dynamic }
+          as: { type: [String, Object], default: __base__ }
         },
         setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(styles), attrs.className)
           })
 
           const vModelProps = computed(() => {
@@ -2516,7 +2519,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
               props.as,
               {
                 class: classes.value,
-                ...elementProps,
+                ...attrs,
                 ...vModelProps.value,
               },
              slots
@@ -2526,18 +2529,20 @@ function generateVueJsxStringLiteralFactory(ctx) {
       })
 
       ${componentName}.__styles__ = styles
-      ${componentName}.__base__ = element
+      ${componentName}.__base__ = __base__
 
       return ${componentName}
     }
+
+    return styledFn
   }
 
   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__ */ styledFn.bind();
+  export const ${factoryName} = /* @__PURE__ */ createStyled.bind();
 
   tags.split(', ').forEach((tag) => {
-    styled[tag] = styled(tag);
+    ${factoryName}[tag] = createStyled(tag);
   });
     `
   };
@@ -2714,8 +2719,9 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-export type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
->
+export type ${componentName}<T extends ElementType> = {
+  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T>>
+}
 
 export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>

package/dist/index.mjs

@@ -1157,13 +1157,13 @@ function generatePreactJsxStringLiteralFactory(ctx) {
     function createStyledFn(Dynamic) {
       const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
-        const styles = css.raw(template)
+        const styles = css.raw(Dynamic.__styles__, template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
           const { as: Element = __base__, ...elementProps } = props
 
           function classes() {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(styles), elementProps.className)
           }
 
           return h(Element, {
@@ -1486,13 +1486,13 @@ function generateQwikJsxStringLiteralFactory(ctx) {
     function createStyledFn(Dynamic) {
       const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
-          const styles = css.raw(template)
+          const styles = css.raw(Dynamic.__styles__, template)
 
           const ${componentName} = (props) => {
             const { as: Element = __base__, ...elementProps } = props
 
             function classes() {
-              return cx(css(__base__.__styles__, styles), elementProps.className)
+              return cx(css(styles), elementProps.className)
             }
 
             return h(Element, {
@@ -1819,13 +1819,13 @@ function generateReactJsxStringLiteralFactory(ctx) {
     function createStyledFn(Dynamic) {
       const __base__ = Dynamic.__base__ || Dynamic
       return function styledFn(template) {
-        const styles = css.raw(template)
+        const styles = css.raw(Dynamic.__styles__, template)
 
         const ${componentName} = /* @__PURE__ */ forwardRef(function ${componentName}(props, ref) {
           const { as: Element = __base__, ...elementProps } = props
 
           function classes() {
-            return cx(css(__base__.__styles__, styles), elementProps.className)
+            return cx(css(styles), elementProps.className)
           }
 
           return createElement(Element, {
@@ -1862,7 +1862,6 @@ function generateReactJsxStringLiteralFactory(ctx) {
     }
 
     export const ${factoryName} = /* @__PURE__ */ createJsxFactory()
-
     `
   };
 }
@@ -2200,11 +2199,12 @@ ${ctx.file.import("getDisplayName", "./factory-helper")}
 ${ctx.file.import("css, cx", "../css/index")}
 
 function createStyled(element) {
+  const __base__ = element.__base__ || element
   return function styledFn(template) {
-    const styles = css.raw(template)
+    const styles = css.raw(element.__styles__, template)
 
     const ${componentName} = (props) => {
-      const mergedProps = mergeProps({ as: element.__base__ || element }, props)
+      const mergedProps = mergeProps({ as: __base__ }, props)
       const [localProps, elementProps] = splitProps(mergedProps, ['as', 'class'])
       
       return createComponent(
@@ -2215,7 +2215,7 @@ function createStyled(element) {
               return localProps.as
             },
             get class() {
-              return cx(css(element.__styles__, styles), localProps.class)
+              return cx(css(styles), localProps.class)
             },
           },
           elementProps,
@@ -2223,11 +2223,11 @@ function createStyled(element) {
       )
     }
 
-    const name = getDisplayName(element)
+    const name = getDisplayName(__base__)
 
     ${componentName}.displayName = \`${factoryName}.\${name}\`
     ${componentName}.__styles__ = styles
-    ${componentName}.__base__ = element
+    ${componentName}.__base__ = __base__
 
     return ${componentName}
   }
@@ -2318,16 +2318,18 @@ function generateVueJsxFactory(ctx) {
         options.defaultProps,
       )
 
-      const name = getDisplayName(Dynamic)
       const __cvaFn__ = composeCvaFn(Dynamic.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(Dynamic, shouldForwardProp)
+      
+      const __base__ = Dynamic.__base__ || Dynamic
+      const name = getDisplayName(__base__)
 
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: {
           modelValue: null,
-          as: { type: [String, Object], default: Dynamic.__base__ || Dynamic }
+          as: { type: [String, Object], default: __base__ }
         },
         setup(props, { slots, attrs, emit }) {
           const combinedProps = computed(() => Object.assign({}, defaultProps, attrs))
@@ -2401,7 +2403,7 @@ function generateVueJsxFactory(ctx) {
 
       ${componentName}.displayName = \`${factoryName}.\${name}\`
       ${componentName}.__cva__ = __cvaFn__
-      ${componentName}.__base__ = Dynamic
+      ${componentName}.__base__ = __base__
       ${componentName}.__shouldForwardProps__ = shouldForwardProp
 
       return ${componentName}
@@ -2424,26 +2426,27 @@ function generateVueJsxStringLiteralFactory(ctx) {
   const { componentName, factoryName } = ctx.jsx;
   return {
     js: outdent35`
-    import { defineComponent, h, computed } from 'vue'
-    ${ctx.file.import("getDisplayName", "./factory-helper")}
-    ${ctx.file.import("css, cx", "../css/index")}
+  import { defineComponent, h, computed } from 'vue'
+  ${ctx.file.import("getDisplayName", "./factory-helper")}
+  ${ctx.file.import("css, cx", "../css/index")}
 
   function createStyled(Dynamic) {
     const name = getDisplayName(Dynamic)
+    const __base__ = Dynamic.__base__ || Dynamic
 
     function styledFn(template) {
-      const styles = css.raw(template)
+      const styles = css.raw(Dynamic.__styles__, template)
       
       const ${componentName} = defineComponent({
         name: \`${factoryName}.\${name}\`,
         inheritAttrs: false,
         props: {
           modelValue: null,
-          as: { type: [String, Object], default: Dynamic }
+          as: { type: [String, Object], default: __base__ }
         },
         setup(props, { slots, attrs, emit }) {
           const classes = computed(() => {
-            return cx(css(Dynamic.__styles__, styles), elementProps.className)
+            return cx(css(styles), attrs.className)
           })
 
           const vModelProps = computed(() => {
@@ -2480,7 +2483,7 @@ function generateVueJsxStringLiteralFactory(ctx) {
               props.as,
               {
                 class: classes.value,
-                ...elementProps,
+                ...attrs,
                 ...vModelProps.value,
               },
              slots
@@ -2490,18 +2493,20 @@ function generateVueJsxStringLiteralFactory(ctx) {
       })
 
       ${componentName}.__styles__ = styles
-      ${componentName}.__base__ = element
+      ${componentName}.__base__ = __base__
 
       return ${componentName}
     }
+
+    return styledFn
   }
 
   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__ */ styledFn.bind();
+  export const ${factoryName} = /* @__PURE__ */ createStyled.bind();
 
   tags.split(', ').forEach((tag) => {
-    styled[tag] = styled(tag);
+    ${factoryName}[tag] = createStyled(tag);
   });
     `
   };
@@ -2678,8 +2683,9 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
-export type ${componentName}<T extends ElementType> = FunctionalComponent<ComponentProps<T>>
->
+export type ${componentName}<T extends ElementType> = {
+  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T>>
+}
 
 export interface JsxFactory {
   <T extends ElementType>(component: T): ${componentName}<T>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "0.0.0-dev-20250424111015",
+  "version": "0.0.0-dev-20250425183451",
   "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.49",
     "ts-pattern": "5.0.8",
-    "@pandacss/core": "0.0.0-dev-20250424111015",
-    "@pandacss/is-valid-prop": "^0.0.0-dev-20250424111015",
-    "@pandacss/logger": "0.0.0-dev-20250424111015",
-    "@pandacss/shared": "0.0.0-dev-20250424111015",
-    "@pandacss/token-dictionary": "0.0.0-dev-20250424111015",
-    "@pandacss/types": "0.0.0-dev-20250424111015"
+    "@pandacss/core": "0.0.0-dev-20250425183451",
+    "@pandacss/is-valid-prop": "^0.0.0-dev-20250425183451",
+    "@pandacss/logger": "0.0.0-dev-20250425183451",
+    "@pandacss/shared": "0.0.0-dev-20250425183451",
+    "@pandacss/token-dictionary": "0.0.0-dev-20250425183451",
+    "@pandacss/types": "0.0.0-dev-20250425183451"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"