@pandacss/generator 0.40.0 → 0.41.0

package/dist/index.js

@@ -477,7 +477,7 @@ function generateIsValidProp(ctx) {
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
     'var userGeneratedStr = "";',
-    `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
+    `var userGeneratedStr = "${(0, import_ts_pattern.match)(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "css").exhaustive()}"`
   );
   content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
@@ -634,6 +634,11 @@ var import_outdent11 = require("outdent");
 var import_ts_pattern4 = require("ts-pattern");
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
+var hasOwn = (obj, key) => {
+  if (!obj)
+    return false;
+  return Object.prototype.hasOwnProperty.call(obj, key);
+};
 function generateCreateRecipe(ctx) {
   const { conditions, recipes, prefix, hash, utility } = ctx;
   if (recipes.isEmpty())
@@ -736,6 +741,17 @@ function generateRecipes(ctx, filters) {
   return details.map((recipe) => {
     const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
     const { description, defaultVariants, compoundVariants, deprecated } = config;
+    const getDefaultValueJsDoc = (key) => {
+      if (!hasOwn(defaultVariants, key))
+        return;
+      let defaultValue = defaultVariants[key];
+      if ((0, import_shared2.isBoolean)(defaultValue)) {
+        defaultValue = defaultValue ? `true` : `false`;
+      } else {
+        defaultValue = JSON.stringify(defaultValue);
+      }
+      return ctx.file.jsDocComment("", { default: defaultValue });
+    };
     const jsCode = (0, import_ts_pattern4.match)(config).when(
       import_core.Recipes.isSlotRecipeConfig,
       (config2) => import_outdent11.outdent`
@@ -807,9 +823,8 @@ function generateRecipes(ctx, filters) {
         interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
         const values = variantKeyMap[key];
-        if (values.every(isBooleanValue))
-          return `${key}: boolean`;
-        return `${key}: ${(0, import_shared2.unionType)(values)}`;
+        const valueStr = values.every(isBooleanValue) ? `${key}: boolean` : `${key}: ${(0, import_shared2.unionType)(values)}`;
+        return [getDefaultValueJsDoc(key), valueStr].filter(Boolean).join("\n");
       }).join("\n")}
         }
 
@@ -1053,9 +1068,9 @@ function generatePreactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, { ref, ...restProps })
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1380,9 +1395,9 @@ function generateQwikJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, restProps)
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1714,9 +1729,9 @@ function generateReactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return createElement(Comp, { ref, ...restProps })
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -2090,10 +2105,14 @@ function generateSolidJsxPattern(ctx, filters) {
         () => import_outdent30.outdent`
         const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
         
-        const styleProps = ${styleFnName}(patternProps)
-        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        const cssProps = createMemo(() => {
+          const styleProps = ${styleFnName}(patternProps)
+          return { css: styleProps }
+        })
         
-        return createComponent(Comp, restProps)
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
       ).with(
         "minimal",
@@ -2104,6 +2123,7 @@ function generateSolidJsxPattern(ctx, filters) {
           const styleProps = ${styleFnName}(patternProps)
           return { css: mergeCss(styleProps, props.css) }
         })
+
         const mergedProps = mergeProps(restProps, cssProps)
 
         return createComponent(${factoryName}.${jsxElement}, mergedProps)
@@ -2546,13 +2566,14 @@ function generateVueJsxPattern(ctx, filters) {
           ${(0, import_ts_pattern9.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent36.outdent`
-            const Comp = computed(() => {
+            const cssProps = computed(() => {
               const styleProps = ${styleFnName}(props)
-              return ${factoryName}("${jsxElement}", { base: styleProps })
+              return { css: styleProps }
             })
             
             return () => {
-              return h(Comp.value, attrs, slots)
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
             `
       ).with(
@@ -3555,22 +3576,20 @@ var system_types_d_ts_default = {
 
 // src/artifacts/types/generated.ts
 function getGeneratedTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     cssType: csstype_d_ts_default.content,
     static: static_css_d_ts_default.content,
-    recipe: rewriteImports(recipe_d_ts_default.content),
-    pattern: rewriteImports(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
-    parts: rewriteImports(parts_d_ts_default.content),
-    composition: rewriteImports(composition_d_ts_default.content),
-    selectors: rewriteImports(selectors_d_ts_default.content)
+    recipe: ctx.file.rewriteTypeImport(recipe_d_ts_default.content),
+    pattern: ctx.file.rewriteTypeImport(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
+    parts: ctx.file.rewriteTypeImport(parts_d_ts_default.content),
+    composition: ctx.file.rewriteTypeImport(composition_d_ts_default.content),
+    selectors: ctx.file.rewriteTypeImport(selectors_d_ts_default.content)
   };
 }
-var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
+var jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
-    system: rewriteImports(
+    system: ctx.file.rewriteTypeImport(
       (0, import_ts_pattern10.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
         "minimal",
         () => system_types_d_ts_default.content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")

package/dist/index.mjs

@@ -441,7 +441,7 @@ function generateIsValidProp(ctx) {
   let content = is_valid_prop_mjs_default.content;
   content = content.replace(
     'var userGeneratedStr = "";',
-    `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "").exhaustive()}"`
+    `var userGeneratedStr = "${match(ctx.jsx.styleProps).with("all", () => Array.from(ctx.properties).join(",")).with("minimal", () => "css").with("none", () => "css").exhaustive()}"`
   );
   content = content.replace(memoFnDeclarationRegex, "var cssPropertySelectorRegex");
   if (ctx.jsx.styleProps === "minimal" || ctx.jsx.styleProps === "none") {
@@ -593,11 +593,16 @@ defaultValues`)}
 
 // src/artifacts/js/recipe.ts
 import { Recipes } from "@pandacss/core";
-import { unionType as unionType2 } from "@pandacss/shared";
+import { isBoolean, unionType as unionType2 } from "@pandacss/shared";
 import { outdent as outdent11 } from "outdent";
 import { match as match4 } from "ts-pattern";
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
+var hasOwn = (obj, key) => {
+  if (!obj)
+    return false;
+  return Object.prototype.hasOwnProperty.call(obj, key);
+};
 function generateCreateRecipe(ctx) {
   const { conditions, recipes, prefix, hash, utility } = ctx;
   if (recipes.isEmpty())
@@ -700,6 +705,17 @@ function generateRecipes(ctx, filters) {
   return details.map((recipe) => {
     const { baseName, config, upperName, variantKeyMap, dashName } = recipe;
     const { description, defaultVariants, compoundVariants, deprecated } = config;
+    const getDefaultValueJsDoc = (key) => {
+      if (!hasOwn(defaultVariants, key))
+        return;
+      let defaultValue = defaultVariants[key];
+      if (isBoolean(defaultValue)) {
+        defaultValue = defaultValue ? `true` : `false`;
+      } else {
+        defaultValue = JSON.stringify(defaultValue);
+      }
+      return ctx.file.jsDocComment("", { default: defaultValue });
+    };
     const jsCode = match4(config).when(
       Recipes.isSlotRecipeConfig,
       (config2) => outdent11`
@@ -771,9 +787,8 @@ function generateRecipes(ctx, filters) {
         interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
         const values = variantKeyMap[key];
-        if (values.every(isBooleanValue))
-          return `${key}: boolean`;
-        return `${key}: ${unionType2(values)}`;
+        const valueStr = values.every(isBooleanValue) ? `${key}: boolean` : `${key}: ${unionType2(values)}`;
+        return [getDefaultValueJsDoc(key), valueStr].filter(Boolean).join("\n");
       }).join("\n")}
         }
 
@@ -1017,9 +1032,9 @@ function generatePreactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, { ref, ...restProps })
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1344,9 +1359,9 @@ function generateQwikJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return h(Comp, restProps)
+          return h(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -1678,9 +1693,9 @@ function generateReactJsxPattern(ctx, filters) {
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
           
           const styleProps = ${styleFnName}(patternProps)
-          const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+          const mergedProps = { ref, ...restProps, css: styleProps }
           
-          return createElement(Comp, { ref, ...restProps })
+          return createElement(${factoryName}.${jsxElement}, mergedProps)
           `
       ).with(
         "minimal",
@@ -2054,10 +2069,14 @@ function generateSolidJsxPattern(ctx, filters) {
         () => outdent30`
         const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
         
-        const styleProps = ${styleFnName}(patternProps)
-        const Comp = ${factoryName}("${jsxElement}", { base: styleProps })
+        const cssProps = createMemo(() => {
+          const styleProps = ${styleFnName}(patternProps)
+          return { css: styleProps }
+        })
         
-        return createComponent(Comp, restProps)
+        const mergedProps = mergeProps(restProps, cssProps)
+
+        return createComponent(${factoryName}.${jsxElement}, mergedProps)
         `
       ).with(
         "minimal",
@@ -2068,6 +2087,7 @@ function generateSolidJsxPattern(ctx, filters) {
           const styleProps = ${styleFnName}(patternProps)
           return { css: mergeCss(styleProps, props.css) }
         })
+
         const mergedProps = mergeProps(restProps, cssProps)
 
         return createComponent(${factoryName}.${jsxElement}, mergedProps)
@@ -2510,13 +2530,14 @@ function generateVueJsxPattern(ctx, filters) {
           ${match9(jsxStyleProps2).with(
         "none",
         () => outdent36`
-            const Comp = computed(() => {
+            const cssProps = computed(() => {
               const styleProps = ${styleFnName}(props)
-              return ${factoryName}("${jsxElement}", { base: styleProps })
+              return { css: styleProps }
             })
             
             return () => {
-              return h(Comp.value, attrs, slots)
+              const mergedProps = { ...attrs, ...cssProps.value }
+              return h(${factoryName}.${jsxElement}, mergedProps, slots)
             }
             `
       ).with(
@@ -3519,22 +3540,20 @@ var system_types_d_ts_default = {
 
 // src/artifacts/types/generated.ts
 function getGeneratedTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
     cssType: csstype_d_ts_default.content,
     static: static_css_d_ts_default.content,
-    recipe: rewriteImports(recipe_d_ts_default.content),
-    pattern: rewriteImports(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
-    parts: rewriteImports(parts_d_ts_default.content),
-    composition: rewriteImports(composition_d_ts_default.content),
-    selectors: rewriteImports(selectors_d_ts_default.content)
+    recipe: ctx.file.rewriteTypeImport(recipe_d_ts_default.content),
+    pattern: ctx.file.rewriteTypeImport(pattern_d_ts_default.content.replace("../tokens", "../tokens/index")),
+    parts: ctx.file.rewriteTypeImport(parts_d_ts_default.content),
+    composition: ctx.file.rewriteTypeImport(composition_d_ts_default.content),
+    selectors: ctx.file.rewriteTypeImport(selectors_d_ts_default.content)
   };
 }
-var jsxStyleProps = "export type JsxStyleProps = StyleProps & WithCss";
+var jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
-  const rewriteImports = (code) => code.replace(/import\s+type\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"]/g, ctx.file.importType("$1", "$2"));
   return {
-    system: rewriteImports(
+    system: ctx.file.rewriteTypeImport(
       match10(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
         "minimal",
         () => system_types_d_ts_default.content.replace("WithHTMLProps<T>,", "T,").replace(jsxStyleProps, "export type JsxStyleProps = WithCss")

package/package.json

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