@pandacss/generator 1.7.0 → 1.7.2

package/dist/index.js

@@ -37,7 +37,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/generator.ts
 var import_core5 = require("@pandacss/core");
-var import_shared11 = require("@pandacss/shared");
+var import_shared17 = require("@pandacss/shared");
 var import_ts_pattern14 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
@@ -629,11 +629,81 @@ defaultValues`)}
 
 // src/artifacts/js/recipe.ts
 var import_core = require("@pandacss/core");
-var import_shared2 = require("@pandacss/shared");
+var import_shared3 = require("@pandacss/shared");
 var import_outdent11 = require("outdent");
 var import_ts_pattern3 = require("ts-pattern");
-var stringify2 = (value) => JSON.stringify(value, null, 2);
+
+// src/shared.ts
+var import_shared2 = require("@pandacss/shared");
 var isBooleanValue = (value) => value === "true" || value === "false";
+var formatFunctionValue = (value) => isBooleanValue(value) ? value : `'${value}'`;
+var formatJsxValue = (value) => isBooleanValue(value) ? `{${value}}` : `"${value}"`;
+var buildFunctionProps = (key, value) => `${key}: ${formatFunctionValue(value)}`;
+var buildJsxProps = (key, value) => `${key}=${formatJsxValue(value)}`;
+var formatProps = (props, options = {}) => {
+  const { keyValueSeparator = ": ", propSeparator = ", ", quoteStyle = "single" } = options;
+  const quote = quoteStyle === "single" ? "'" : quoteStyle === "double" ? '"' : "";
+  return Object.entries(props).filter(([_, value]) => value != null).map(([key, value]) => `${key}${keyValueSeparator}${quote}${value}${quote}`).join(propSeparator);
+};
+var formatJsxComponent = (component, props) => {
+  const formattedProps = formatProps(props, { keyValueSeparator: "=", propSeparator: " ", quoteStyle: "double" });
+  return `<${component}${formattedProps ? " " + formattedProps : ""} />`;
+};
+var collectCompositionStyles = (values) => {
+  const result = [];
+  (0, import_shared2.walkObject)(
+    values,
+    (token, paths) => {
+      if (token && (0, import_shared2.isObject)(token) && "value" in token) {
+        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
+        result.push({
+          name: filteredPaths.join("."),
+          description: token.description
+        });
+      }
+    },
+    {
+      stop: (v) => (0, import_shared2.isObject)(v) && "value" in v
+    }
+  );
+  return result;
+};
+var generateJsxExample = (props, jsxStyleProps2 = "all", component = "Box") => {
+  if (jsxStyleProps2 === "all") {
+    return formatJsxComponent(component, props);
+  }
+  if (jsxStyleProps2 === "minimal") {
+    return `<${component} css={{ ${formatProps(props)} }} />`;
+  }
+  return null;
+};
+var generateJsxExamples = (props, jsxStyleProps2 = "all", component = "Box") => {
+  const functionExamples = [`css({ ${formatProps(props)} })`];
+  const jsxExamples = [];
+  const jsxExample = generateJsxExample(props, jsxStyleProps2, component);
+  if (jsxExample) {
+    jsxExamples.push(jsxExample);
+  }
+  return { functionExamples, jsxExamples };
+};
+var COMPOSITION_STYLE_CONFIG = {
+  "text-styles": { prop: "textStyle", themeKey: "textStyles" },
+  "layer-styles": { prop: "layerStyle", themeKey: "layerStyles" },
+  "animation-styles": { prop: "animationStyle", themeKey: "animationStyles" }
+};
+function generateCompositionStyleSpec(type, theme, jsxStyleProps2) {
+  const { prop, themeKey } = COMPOSITION_STYLE_CONFIG[type];
+  const styles = collectCompositionStyles(theme?.[themeKey] ?? {});
+  const data = styles.map((style) => ({
+    name: style.name,
+    description: style.description,
+    ...generateJsxExamples({ [prop]: style.name }, jsxStyleProps2)
+  }));
+  return { type, data };
+}
+
+// src/artifacts/js/recipe.ts
+var stringify2 = (value) => JSON.stringify(value, null, 2);
 var hasOwn = (obj, key) => {
   if (!obj) return false;
   return Object.prototype.hasOwnProperty.call(obj, key);
@@ -741,7 +811,7 @@ function generateRecipes(ctx, filters) {
     const getDefaultValueJsDoc = (key) => {
       if (!hasOwn(defaultVariants, key)) return;
       let defaultValue = defaultVariants[key];
-      if ((0, import_shared2.isBoolean)(defaultValue)) {
+      if ((0, import_shared3.isBoolean)(defaultValue)) {
         defaultValue = defaultValue ? `true` : `false`;
       } else {
         defaultValue = JSON.stringify(defaultValue);
@@ -820,7 +890,7 @@ function generateRecipes(ctx, filters) {
         interface ${upperName}Variant {
           ${Object.keys(variantKeyMap).map((key) => {
         const values = variantKeyMap[key];
-        const valueStr = values.every(isBooleanValue) ? `${key}: boolean` : `${key}: ${(0, import_shared2.unionType)(values)}`;
+        const valueStr = values.every(isBooleanValue) ? `${key}: boolean` : `${key}: ${(0, import_shared3.unionType)(values)}`;
         return [getDefaultValueJsDoc(key), valueStr].filter(Boolean).join("\n");
       }).join("\n")}
         }
@@ -829,7 +899,7 @@ function generateRecipes(ctx, filters) {
           [key in keyof ${upperName}Variant]: Array<${upperName}Variant[key]>
         }
 
-        ${import_core.Recipes.isSlotRecipeConfig(config) ? `type ${upperName}Slot = ${(0, import_shared2.unionType)(config.slots)}` : ""}
+        ${import_core.Recipes.isSlotRecipeConfig(config) ? `type ${upperName}Slot = ${(0, import_shared3.unionType)(config.slots)}` : ""}
 
         export type ${upperName}VariantProps = {
           [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`} | undefined
@@ -4678,12 +4748,12 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 var import_is_valid_prop = require("@pandacss/is-valid-prop");
-var import_shared3 = require("@pandacss/shared");
+var import_shared5 = require("@pandacss/shared");
 var import_outdent45 = __toESM(require("outdent"));
 function generateStyleProps(ctx) {
   const props = new Set(import_is_valid_prop.allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
   const propTypes = ctx.utility.getTypes();
-  const cssVars = (0, import_shared3.unionType)(ctx.globalVars.vars);
+  const cssVars = (0, import_shared5.unionType)(ctx.globalVars.vars);
   return import_outdent45.default`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("OnlyKnown, UtilityValues, WithEscapeHatch", "./prop-type")}
@@ -4805,7 +4875,7 @@ var restrict = (key, value, config) => {
 };
 
 // src/artifacts/types/token-types.ts
-var import_shared4 = require("@pandacss/shared");
+var import_shared6 = require("@pandacss/shared");
 var import_outdent46 = require("outdent");
 var import_pluralize = __toESM(require("pluralize"));
 var categories = [
@@ -4843,22 +4913,22 @@ function generateTokenTypes(ctx) {
   } else {
     const colorPaletteKeys = Array.from(tokens.view.colorPalettes.keys());
     if (colorPaletteKeys.length) {
-      set.add(`export type ColorPalette = ${(0, import_shared4.unionType)(colorPaletteKeys)}`);
+      set.add(`export type ColorPalette = ${(0, import_shared6.unionType)(colorPaletteKeys)}`);
     }
     for (const [key, value] of tokens.view.categoryMap.entries()) {
-      const typeName = (0, import_shared4.capitalize)(import_pluralize.default.singular(key));
+      const typeName = (0, import_shared6.capitalize)(import_pluralize.default.singular(key));
       const categoryName = `${typeName}Token`;
-      set.add(`export type ${categoryName} = ${(0, import_shared4.unionType)(value.keys())}`);
+      set.add(`export type ${categoryName} = ${(0, import_shared6.unionType)(value.keys())}`);
       tokenSet.add(`${key}.\${${categoryName}}`);
       result.add(`		${key}: ${categoryName}`);
     }
   }
   result.add("} & { [token: string]: never }");
   set.add(Array.from(result).join("\n"));
-  set.add(`export type TokenCategory = ${(0, import_shared4.unionType)(categories)}`);
+  set.add(`export type TokenCategory = ${(0, import_shared6.unionType)(categories)}`);
   const arr = Array.from(set);
   arr.unshift(
-    `export type Token = ${(0, import_shared4.unionType)(tokenSet, {
+    `export type Token = ${(0, import_shared6.unionType)(tokenSet, {
       stringify: (t) => `\`${t}\``,
       fallback: "string"
     })}`
@@ -4867,7 +4937,7 @@ function generateTokenTypes(ctx) {
 }
 
 // src/artifacts/js/themes.ts
-var import_shared5 = require("@pandacss/shared");
+var import_shared7 = require("@pandacss/shared");
 var import_outdent47 = __toESM(require("outdent"));
 
 // src/artifacts/css/token-css.ts
@@ -5001,7 +5071,7 @@ function generateThemes(ctx) {
   return Object.entries(themes).map(([name, _themeVariant]) => ({
     name: `theme-${name}`,
     json: JSON.stringify(
-      (0, import_shared5.compact)({
+      (0, import_shared7.compact)({
         name,
         id: getThemeId(name),
         css: getThemeCss(ctx, name)
@@ -5543,10 +5613,10 @@ var generateParserCss = (ctx, decoder) => {
 
 // src/artifacts/css/reset-css.ts
 var import_core4 = require("@pandacss/core");
-var import_shared6 = require("@pandacss/shared");
+var import_shared8 = require("@pandacss/shared");
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
-  const { scope = "", level = "parent" } = (0, import_shared6.isObject)(preflight) ? preflight : {};
+  const { scope = "", level = "parent" } = (0, import_shared8.isObject)(preflight) ? preflight : {};
   let selector = "";
   if (scope && level === "parent") {
     selector = `${scope} `;
@@ -5695,7 +5765,7 @@ function generateResetCss(ctx, sheet) {
     }
   };
   if (level === "element") {
-    const modified = (0, import_shared6.mapEntries)(scoped, (k, v) => {
+    const modified = (0, import_shared8.mapEntries)(scoped, (k, v) => {
       const [trailingPseudo, rebuiltSelector] = (0, import_core4.extractTrailingPseudos)(k.toString());
       if (trailingPseudo) {
         const scopeClass = selector.replace("&", "");
@@ -5728,72 +5798,50 @@ var generateStaticCss = (ctx, sheet) => {
 };
 
 // src/spec/animation-styles.ts
-var import_shared7 = require("@pandacss/shared");
-var collectAnimationStyles = (values) => {
-  const result = [];
-  (0, import_shared7.walkObject)(
-    values,
-    (token, paths) => {
-      if (token && (0, import_shared7.isObject)(token) && "value" in token) {
-        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
-        result.push({
-          name: filteredPaths.join("."),
-          description: token.description
-        });
-      }
-    },
-    {
-      stop: (v) => (0, import_shared7.isObject)(v) && "value" in v
-    }
-  );
-  return result;
-};
 var generateAnimationStylesSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
-  const animationStyles = collectAnimationStyles(ctx.config.theme?.animationStyles ?? {});
-  const animationStylesSpec = animationStyles.map((style) => {
-    const functionExamples = [`css({ animationStyle: '${style.name}' })`];
-    const jsxExamples = [];
-    if (jsxStyleProps2 === "all") {
-      jsxExamples.push(`<Box animationStyle="${style.name}" />`);
-    } else if (jsxStyleProps2 === "minimal") {
-      jsxExamples.push(`<Box css={{ animationStyle: '${style.name}' }} />`);
-    }
-    return {
-      name: style.name,
-      description: style.description,
-      functionExamples,
-      jsxExamples
-    };
-  });
-  return {
-    type: "animation-styles",
-    data: animationStylesSpec
-  };
+  return generateCompositionStyleSpec("animation-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
 // src/spec/color-palette.ts
+var getColorPaletteExampleValues = (ctx, paletteValues) => {
+  const examplePalette = paletteValues[0];
+  const availableTokens = ctx.tokens.view.getColorPaletteValues(examplePalette);
+  if (availableTokens.length === 0) {
+    return { examplePalette, bgToken: null, colorToken: null };
+  }
+  if (availableTokens.length === 1) {
+    return { examplePalette, bgToken: availableTokens[0], colorToken: null };
+  }
+  const bgToken = availableTokens[0];
+  const colorToken = availableTokens[1];
+  return { examplePalette, bgToken, colorToken };
+};
 var generateColorPaletteSpec = (ctx) => {
   const colorPaletteConfig = ctx.config.theme?.colorPalette;
   if (colorPaletteConfig?.enabled === false) {
     return null;
   }
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const values = Array.from(ctx.tokens.view.colorPalettes.keys()).sort();
   if (!values.length) {
     return null;
   }
-  const functionExamples = [
-    `css({ colorPalette: 'blue' })`,
-    `css({ colorPalette: 'blue', bg: 'colorPalette.500', color: 'colorPalette.50' })`
-  ];
+  const { examplePalette, bgToken, colorToken } = getColorPaletteExampleValues(ctx, values);
+  const functionExamples = [];
   const jsxExamples = [];
-  if (jsxStyleProps2 === "all") {
-    jsxExamples.push(`<Box colorPalette="blue" />`);
-    jsxExamples.push(`<Box colorPalette="blue" bg="colorPalette.500" color="colorPalette.50" />`);
-  } else if (jsxStyleProps2 === "minimal") {
-    jsxExamples.push(`<Box css={{ colorPalette: 'blue' }} />`);
-    jsxExamples.push(`<Box css={{ colorPalette: 'blue', bg: 'colorPalette.500', color: 'colorPalette.50' }} />`);
+  const basicProps = { colorPalette: examplePalette };
+  functionExamples.push(`css({ ${formatProps(basicProps)} })`);
+  const basicJsx = generateJsxExample(basicProps, jsxStyleProps2);
+  if (basicJsx) {
+    jsxExamples.push(basicJsx);
+  }
+  if (bgToken || colorToken) {
+    const extendedProps = { colorPalette: examplePalette, bg: bgToken, color: colorToken };
+    functionExamples.push(`css({ ${formatProps(extendedProps)} })`);
+    const extendedJsx = generateJsxExample(extendedProps, jsxStyleProps2);
+    if (extendedJsx) {
+      jsxExamples.push(extendedJsx);
+    }
   }
   return {
     type: "color-palette",
@@ -5806,7 +5854,23 @@ var generateColorPaletteSpec = (ctx) => {
 };
 
 // src/spec/conditions.ts
+var generateConditionJsxExamples = (conditionName, jsxStyleProps2 = "all") => {
+  if (jsxStyleProps2 === "all") {
+    return [
+      `<Box margin={{ base: '2', ${conditionName}: '4' }} />`,
+      `<Box margin="2" ${conditionName}={{ margin: '4' }} />`
+    ];
+  }
+  if (jsxStyleProps2 === "minimal") {
+    return [
+      `<Box css={{ margin: { base: '2', ${conditionName}: '4' } }} />`,
+      `<Box css={{ margin: '2', ${conditionName}: { margin: '4' } }} />`
+    ];
+  }
+  return [];
+};
 var generateConditionsSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const breakpointKeys = new Set(Object.keys(ctx.conditions.breakpoints.conditions));
   const conditions = Object.entries(ctx.conditions.values).map(([name, detail]) => {
     const value = Array.isArray(detail.raw) ? detail.raw.join(", ") : detail.raw;
@@ -5820,10 +5884,7 @@ var generateConditionsSpec = (ctx) => {
         `css({ margin: { base: '2', ${conditionName}: '4' } })`,
         `css({ margin: '2', ${conditionName}: { margin: '4' } })`
       ],
-      jsxExamples: [
-        `<Box margin={{ base: '2', ${conditionName}: '4'}} />`,
-        `<Box margin='2' ${conditionName}={{ margin: '4' }} />`
-      ]
+      jsxExamples: generateConditionJsxExamples(conditionName, jsxStyleProps2)
     };
   });
   return {
@@ -5833,11 +5894,25 @@ var generateConditionsSpec = (ctx) => {
 };
 
 // src/spec/keyframes.ts
+var generateKeyframeJsxExamples = (name, jsxStyleProps2 = "all") => {
+  const jsxExamples = [];
+  const example1 = generateJsxExample({ animationName: name }, jsxStyleProps2);
+  if (example1) {
+    jsxExamples.push(example1);
+  }
+  const animationValue = `${name} 1s ease-in-out infinite`;
+  const example2 = generateJsxExample({ animation: animationValue }, jsxStyleProps2);
+  if (example2) {
+    jsxExamples.push(example2);
+  }
+  return jsxExamples;
+};
 var generateKeyframesSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const keyframes = Object.keys(ctx.config.theme?.keyframes ?? {}).map((name) => ({
     name,
     functionExamples: [`css({ animationName: '${name}' })`, `css({ animation: '${name} 1s ease-in-out infinite' })`],
-    jsxExamples: [`<Box animationName="${name}" />`, `<Box animation="${name} 1s ease-in-out infinite" />`]
+    jsxExamples: generateKeyframeJsxExamples(name, jsxStyleProps2)
   }));
   return {
     type: "keyframes",
@@ -5846,52 +5921,28 @@ var generateKeyframesSpec = (ctx) => {
 };
 
 // src/spec/layer-styles.ts
-var import_shared8 = require("@pandacss/shared");
-var collectLayerStyles = (values) => {
-  const result = [];
-  (0, import_shared8.walkObject)(
-    values,
-    (token, paths) => {
-      if (token && (0, import_shared8.isObject)(token) && "value" in token) {
-        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
-        result.push({
-          name: filteredPaths.join("."),
-          description: token.description
-        });
-      }
-    },
-    {
-      stop: (v) => (0, import_shared8.isObject)(v) && "value" in v
-    }
-  );
-  return result;
-};
 var generateLayerStylesSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
-  const layerStyles = collectLayerStyles(ctx.config.theme?.layerStyles ?? {});
-  const layerStylesSpec = layerStyles.map((style) => {
-    const functionExamples = [`css({ layerStyle: '${style.name}' })`];
-    const jsxExamples = [];
-    if (jsxStyleProps2 === "all") {
-      jsxExamples.push(`<Box layerStyle="${style.name}" />`);
-    } else if (jsxStyleProps2 === "minimal") {
-      jsxExamples.push(`<Box css={{ layerStyle: '${style.name}' }} />`);
-    }
-    return {
-      name: style.name,
-      description: style.description,
-      functionExamples,
-      jsxExamples
-    };
-  });
-  return {
-    type: "layer-styles",
-    data: layerStylesSpec
-  };
+  return generateCompositionStyleSpec("layer-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
 // src/spec/patterns.ts
+var getExampleValue = (prop) => {
+  if (prop.type === "enum" && Array.isArray(prop.value) && prop.value.length > 0) {
+    return `"${prop.value[0]}"`;
+  }
+  if (prop.type === "boolean") {
+    return "true";
+  }
+  if (prop.type === "number") {
+    return "4";
+  }
+  if (prop.type === "token") {
+    return '"md"';
+  }
+  return "<value>";
+};
 var generatePatternsSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const patterns = ctx.patterns.details.map((node) => {
     const patternName = node.baseName;
     const jsxName = node.jsxName;
@@ -5900,21 +5951,16 @@ var generatePatternsSpec = (ctx) => {
     const jsxExamples = [];
     if (properties.length === 0) {
       functionExamples.push(`${patternName}()`);
-      jsxExamples.push(`<${jsxName} />`);
+      if (jsxStyleProps2 !== "none") {
+        jsxExamples.push(`<${jsxName} />`);
+      }
     } else {
       properties.forEach(([propName, prop]) => {
-        let exampleValue = "<value>";
-        if (prop.type === "enum" && prop.value?.length > 0) {
-          exampleValue = `"${prop.value[0]}"`;
-        } else if (prop.type === "boolean") {
-          exampleValue = "true";
-        } else if (prop.type === "number") {
-          exampleValue = "4";
-        } else if (prop.type === "token") {
-          exampleValue = '"md"';
-        }
+        const exampleValue = getExampleValue(prop);
         functionExamples.push(`${patternName}({ ${propName}: ${exampleValue} })`);
-        jsxExamples.push(`<${jsxName} ${propName}={${exampleValue}} />`);
+        if (jsxStyleProps2 !== "none") {
+          jsxExamples.push(`<${jsxName} ${propName}={${exampleValue}} />`);
+        }
       });
     }
     const defaultValues = typeof node.config.defaultValues === "object" ? node.config.defaultValues : {};
@@ -5963,13 +6009,13 @@ var generateRecipesSpec = (ctx) => {
       variantKeys.forEach((variantKey) => {
         const firstValue = getFirstVariantValue(node.variantKeyMap, variantKey);
         if (firstValue) {
-          functionExamples.push(`${recipeName}({ ${variantKey}: '${firstValue}' })`);
-          jsxExamples.push(`<${jsxName} ${variantKey}="${firstValue}" />`);
+          functionExamples.push(`${recipeName}({ ${variantKey}: ${formatFunctionValue(firstValue)} })`);
+          jsxExamples.push(`<${jsxName} ${variantKey}=${formatJsxValue(firstValue)} />`);
         }
       });
       if (variantKeys.length > 1) {
-        const props = buildVariantProps(variantKeys, node.variantKeyMap, (key, value) => `${key}: '${value}'`, ", ");
-        const jsxProps = buildVariantProps(variantKeys, node.variantKeyMap, (key, value) => `${key}="${value}"`, " ");
+        const props = buildVariantProps(variantKeys, node.variantKeyMap, buildFunctionProps, ", ");
+        const jsxProps = buildVariantProps(variantKeys, node.variantKeyMap, buildJsxProps, " ");
         if (props && jsxProps) {
           functionExamples.push(`${recipeName}({ ${props} })`);
           jsxExamples.push(`<${jsxName} ${jsxProps} />`);
@@ -5992,52 +6038,12 @@ var generateRecipesSpec = (ctx) => {
 };
 
 // src/spec/text-styles.ts
-var import_shared9 = require("@pandacss/shared");
-var collectTextStyles = (values) => {
-  const result = [];
-  (0, import_shared9.walkObject)(
-    values,
-    (token, paths) => {
-      if (token && (0, import_shared9.isObject)(token) && "value" in token) {
-        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
-        result.push({
-          name: filteredPaths.join("."),
-          description: token.description
-        });
-      }
-    },
-    {
-      stop: (v) => (0, import_shared9.isObject)(v) && "value" in v
-    }
-  );
-  return result;
-};
 var generateTextStylesSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
-  const textStyles = collectTextStyles(ctx.config.theme?.textStyles ?? {});
-  const textStylesSpec = textStyles.map((style) => {
-    const functionExamples = [`css({ textStyle: '${style.name}' })`];
-    const jsxExamples = [];
-    if (jsxStyleProps2 === "all") {
-      jsxExamples.push(`<Box textStyle="${style.name}" />`);
-    } else if (jsxStyleProps2 === "minimal") {
-      jsxExamples.push(`<Box css={{ textStyle: '${style.name}' }} />`);
-    }
-    return {
-      name: style.name,
-      description: style.description,
-      functionExamples,
-      jsxExamples
-    };
-  });
-  return {
-    type: "text-styles",
-    data: textStylesSpec
-  };
+  return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
 // src/spec/tokens.ts
-var import_shared10 = require("@pandacss/shared");
+var import_shared15 = require("@pandacss/shared");
 var CATEGORY_PROPERTY_MAP = {
   colors: "color",
   spacing: "padding",
@@ -6070,10 +6076,9 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
   const functionExamples = [`css({ ${prop}: '${tokenName}' })`];
   const tokenFunctionExamples = [`token('${fullTokenName}')`];
   const jsxExamples = [];
-  if (jsxStyleProps2 === "all") {
-    jsxExamples.push(`<Box ${prop}="${tokenName}" />`);
-  } else if (jsxStyleProps2 === "minimal") {
-    jsxExamples.push(`<Box css={{ ${prop}: '${tokenName}' }} />`);
+  const jsxExample = generateJsxExample({ [prop]: tokenName }, jsxStyleProps2);
+  if (jsxExample) {
+    jsxExamples.push(jsxExample);
   }
   if (token.extensions.varRef) {
     tokenFunctionExamples.push(`token.var('${fullTokenName}')`);
@@ -6081,7 +6086,7 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
   return { functionExamples, tokenFunctionExamples, jsxExamples };
 };
 var generateTokensSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
     const typeTokens = Array.from(tokenMap.values()).filter(
       (token) => !token.extensions.isSemantic && !token.extensions.isVirtual && !token.extensions.conditions && !token.extensions.isNegative
@@ -6110,7 +6115,7 @@ var generateTokensSpec = (ctx) => {
   };
 };
 var generateSemanticTokensSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
     const typeTokens = Array.from(tokenMap.values()).filter(
       (token) => (token.extensions.isSemantic || token.extensions.conditions) && !token.extensions.isVirtual
@@ -6120,7 +6125,7 @@ var generateSemanticTokensSpec = (ctx) => {
     const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
     const values = typeTokens.map((token) => {
       const conditions = [];
-      (0, import_shared10.walkObject)(token.extensions.rawValue, (value, path) => {
+      (0, import_shared15.walkObject)(token.extensions.rawValue, (value, path) => {
         conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
       });
       return {
@@ -6155,7 +6160,7 @@ var Generator = class extends import_core5.Context {
   };
   appendCssOfType = (type, sheet) => {
     (0, import_ts_pattern14.match)(type).with("preflight", () => generateResetCss(this, sheet)).with("tokens", () => generateTokenCss(this, sheet)).with("static", () => generateStaticCss(this, sheet)).with("global", () => generateGlobalCss(this, sheet)).with("keyframes", () => generateKeyframeCss(this, sheet)).otherwise(() => {
-      throw new import_shared11.PandaError(
+      throw new import_shared17.PandaError(
         "UNKNOWN_ARTIFACT",
         `Unknown CSS artifact type: "${type}". Expected one of: preflight, tokens, static, global, keyframes`
       );
@@ -6236,7 +6241,7 @@ var Generator = class extends import_core5.Context {
         recipes.push({
           type: "recipe",
           name: recipeName,
-          file: `${(0, import_shared11.dashCase)(recipeName)}.css`,
+          file: `${(0, import_shared17.dashCase)(recipeName)}.css`,
           code,
           dir: "recipes"
         });
@@ -6250,7 +6255,7 @@ var Generator = class extends import_core5.Context {
           themes.push({
             type: "theme",
             name: themeName,
-            file: `${(0, import_shared11.dashCase)(themeName)}.css`,
+            file: `${(0, import_shared17.dashCase)(themeName)}.css`,
             code: `@layer ${layerNames.tokens} {
 ${css}
 }`,

package/dist/index.mjs

@@ -595,8 +595,78 @@ import { Recipes } from "@pandacss/core";
 import { isBoolean, unionType } from "@pandacss/shared";
 import { outdent as outdent11 } from "outdent";
 import { match as match3 } from "ts-pattern";
-var stringify2 = (value) => JSON.stringify(value, null, 2);
+
+// src/shared.ts
+import { isObject, walkObject } from "@pandacss/shared";
 var isBooleanValue = (value) => value === "true" || value === "false";
+var formatFunctionValue = (value) => isBooleanValue(value) ? value : `'${value}'`;
+var formatJsxValue = (value) => isBooleanValue(value) ? `{${value}}` : `"${value}"`;
+var buildFunctionProps = (key, value) => `${key}: ${formatFunctionValue(value)}`;
+var buildJsxProps = (key, value) => `${key}=${formatJsxValue(value)}`;
+var formatProps = (props, options = {}) => {
+  const { keyValueSeparator = ": ", propSeparator = ", ", quoteStyle = "single" } = options;
+  const quote = quoteStyle === "single" ? "'" : quoteStyle === "double" ? '"' : "";
+  return Object.entries(props).filter(([_, value]) => value != null).map(([key, value]) => `${key}${keyValueSeparator}${quote}${value}${quote}`).join(propSeparator);
+};
+var formatJsxComponent = (component, props) => {
+  const formattedProps = formatProps(props, { keyValueSeparator: "=", propSeparator: " ", quoteStyle: "double" });
+  return `<${component}${formattedProps ? " " + formattedProps : ""} />`;
+};
+var collectCompositionStyles = (values) => {
+  const result = [];
+  walkObject(
+    values,
+    (token, paths) => {
+      if (token && isObject(token) && "value" in token) {
+        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
+        result.push({
+          name: filteredPaths.join("."),
+          description: token.description
+        });
+      }
+    },
+    {
+      stop: (v) => isObject(v) && "value" in v
+    }
+  );
+  return result;
+};
+var generateJsxExample = (props, jsxStyleProps2 = "all", component = "Box") => {
+  if (jsxStyleProps2 === "all") {
+    return formatJsxComponent(component, props);
+  }
+  if (jsxStyleProps2 === "minimal") {
+    return `<${component} css={{ ${formatProps(props)} }} />`;
+  }
+  return null;
+};
+var generateJsxExamples = (props, jsxStyleProps2 = "all", component = "Box") => {
+  const functionExamples = [`css({ ${formatProps(props)} })`];
+  const jsxExamples = [];
+  const jsxExample = generateJsxExample(props, jsxStyleProps2, component);
+  if (jsxExample) {
+    jsxExamples.push(jsxExample);
+  }
+  return { functionExamples, jsxExamples };
+};
+var COMPOSITION_STYLE_CONFIG = {
+  "text-styles": { prop: "textStyle", themeKey: "textStyles" },
+  "layer-styles": { prop: "layerStyle", themeKey: "layerStyles" },
+  "animation-styles": { prop: "animationStyle", themeKey: "animationStyles" }
+};
+function generateCompositionStyleSpec(type, theme, jsxStyleProps2) {
+  const { prop, themeKey } = COMPOSITION_STYLE_CONFIG[type];
+  const styles = collectCompositionStyles(theme?.[themeKey] ?? {});
+  const data = styles.map((style) => ({
+    name: style.name,
+    description: style.description,
+    ...generateJsxExamples({ [prop]: style.name }, jsxStyleProps2)
+  }));
+  return { type, data };
+}
+
+// src/artifacts/js/recipe.ts
+var stringify2 = (value) => JSON.stringify(value, null, 2);
 var hasOwn = (obj, key) => {
   if (!obj) return false;
   return Object.prototype.hasOwnProperty.call(obj, key);
@@ -5506,10 +5576,10 @@ var generateParserCss = (ctx, decoder) => {
 
 // src/artifacts/css/reset-css.ts
 import { extractTrailingPseudos } from "@pandacss/core";
-import { isObject, mapEntries } from "@pandacss/shared";
+import { isObject as isObject2, mapEntries } from "@pandacss/shared";
 function generateResetCss(ctx, sheet) {
   const { preflight } = ctx.config;
-  const { scope = "", level = "parent" } = isObject(preflight) ? preflight : {};
+  const { scope = "", level = "parent" } = isObject2(preflight) ? preflight : {};
   let selector = "";
   if (scope && level === "parent") {
     selector = `${scope} `;
@@ -5691,72 +5761,50 @@ var generateStaticCss = (ctx, sheet) => {
 };
 
 // src/spec/animation-styles.ts
-import { isObject as isObject2, walkObject } from "@pandacss/shared";
-var collectAnimationStyles = (values) => {
-  const result = [];
-  walkObject(
-    values,
-    (token, paths) => {
-      if (token && isObject2(token) && "value" in token) {
-        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
-        result.push({
-          name: filteredPaths.join("."),
-          description: token.description
-        });
-      }
-    },
-    {
-      stop: (v) => isObject2(v) && "value" in v
-    }
-  );
-  return result;
-};
 var generateAnimationStylesSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
-  const animationStyles = collectAnimationStyles(ctx.config.theme?.animationStyles ?? {});
-  const animationStylesSpec = animationStyles.map((style) => {
-    const functionExamples = [`css({ animationStyle: '${style.name}' })`];
-    const jsxExamples = [];
-    if (jsxStyleProps2 === "all") {
-      jsxExamples.push(`<Box animationStyle="${style.name}" />`);
-    } else if (jsxStyleProps2 === "minimal") {
-      jsxExamples.push(`<Box css={{ animationStyle: '${style.name}' }} />`);
-    }
-    return {
-      name: style.name,
-      description: style.description,
-      functionExamples,
-      jsxExamples
-    };
-  });
-  return {
-    type: "animation-styles",
-    data: animationStylesSpec
-  };
+  return generateCompositionStyleSpec("animation-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
 // src/spec/color-palette.ts
+var getColorPaletteExampleValues = (ctx, paletteValues) => {
+  const examplePalette = paletteValues[0];
+  const availableTokens = ctx.tokens.view.getColorPaletteValues(examplePalette);
+  if (availableTokens.length === 0) {
+    return { examplePalette, bgToken: null, colorToken: null };
+  }
+  if (availableTokens.length === 1) {
+    return { examplePalette, bgToken: availableTokens[0], colorToken: null };
+  }
+  const bgToken = availableTokens[0];
+  const colorToken = availableTokens[1];
+  return { examplePalette, bgToken, colorToken };
+};
 var generateColorPaletteSpec = (ctx) => {
   const colorPaletteConfig = ctx.config.theme?.colorPalette;
   if (colorPaletteConfig?.enabled === false) {
     return null;
   }
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const values = Array.from(ctx.tokens.view.colorPalettes.keys()).sort();
   if (!values.length) {
     return null;
   }
-  const functionExamples = [
-    `css({ colorPalette: 'blue' })`,
-    `css({ colorPalette: 'blue', bg: 'colorPalette.500', color: 'colorPalette.50' })`
-  ];
+  const { examplePalette, bgToken, colorToken } = getColorPaletteExampleValues(ctx, values);
+  const functionExamples = [];
   const jsxExamples = [];
-  if (jsxStyleProps2 === "all") {
-    jsxExamples.push(`<Box colorPalette="blue" />`);
-    jsxExamples.push(`<Box colorPalette="blue" bg="colorPalette.500" color="colorPalette.50" />`);
-  } else if (jsxStyleProps2 === "minimal") {
-    jsxExamples.push(`<Box css={{ colorPalette: 'blue' }} />`);
-    jsxExamples.push(`<Box css={{ colorPalette: 'blue', bg: 'colorPalette.500', color: 'colorPalette.50' }} />`);
+  const basicProps = { colorPalette: examplePalette };
+  functionExamples.push(`css({ ${formatProps(basicProps)} })`);
+  const basicJsx = generateJsxExample(basicProps, jsxStyleProps2);
+  if (basicJsx) {
+    jsxExamples.push(basicJsx);
+  }
+  if (bgToken || colorToken) {
+    const extendedProps = { colorPalette: examplePalette, bg: bgToken, color: colorToken };
+    functionExamples.push(`css({ ${formatProps(extendedProps)} })`);
+    const extendedJsx = generateJsxExample(extendedProps, jsxStyleProps2);
+    if (extendedJsx) {
+      jsxExamples.push(extendedJsx);
+    }
   }
   return {
     type: "color-palette",
@@ -5769,7 +5817,23 @@ var generateColorPaletteSpec = (ctx) => {
 };
 
 // src/spec/conditions.ts
+var generateConditionJsxExamples = (conditionName, jsxStyleProps2 = "all") => {
+  if (jsxStyleProps2 === "all") {
+    return [
+      `<Box margin={{ base: '2', ${conditionName}: '4' }} />`,
+      `<Box margin="2" ${conditionName}={{ margin: '4' }} />`
+    ];
+  }
+  if (jsxStyleProps2 === "minimal") {
+    return [
+      `<Box css={{ margin: { base: '2', ${conditionName}: '4' } }} />`,
+      `<Box css={{ margin: '2', ${conditionName}: { margin: '4' } }} />`
+    ];
+  }
+  return [];
+};
 var generateConditionsSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const breakpointKeys = new Set(Object.keys(ctx.conditions.breakpoints.conditions));
   const conditions = Object.entries(ctx.conditions.values).map(([name, detail]) => {
     const value = Array.isArray(detail.raw) ? detail.raw.join(", ") : detail.raw;
@@ -5783,10 +5847,7 @@ var generateConditionsSpec = (ctx) => {
         `css({ margin: { base: '2', ${conditionName}: '4' } })`,
         `css({ margin: '2', ${conditionName}: { margin: '4' } })`
       ],
-      jsxExamples: [
-        `<Box margin={{ base: '2', ${conditionName}: '4'}} />`,
-        `<Box margin='2' ${conditionName}={{ margin: '4' }} />`
-      ]
+      jsxExamples: generateConditionJsxExamples(conditionName, jsxStyleProps2)
     };
   });
   return {
@@ -5796,11 +5857,25 @@ var generateConditionsSpec = (ctx) => {
 };
 
 // src/spec/keyframes.ts
+var generateKeyframeJsxExamples = (name, jsxStyleProps2 = "all") => {
+  const jsxExamples = [];
+  const example1 = generateJsxExample({ animationName: name }, jsxStyleProps2);
+  if (example1) {
+    jsxExamples.push(example1);
+  }
+  const animationValue = `${name} 1s ease-in-out infinite`;
+  const example2 = generateJsxExample({ animation: animationValue }, jsxStyleProps2);
+  if (example2) {
+    jsxExamples.push(example2);
+  }
+  return jsxExamples;
+};
 var generateKeyframesSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const keyframes = Object.keys(ctx.config.theme?.keyframes ?? {}).map((name) => ({
     name,
     functionExamples: [`css({ animationName: '${name}' })`, `css({ animation: '${name} 1s ease-in-out infinite' })`],
-    jsxExamples: [`<Box animationName="${name}" />`, `<Box animation="${name} 1s ease-in-out infinite" />`]
+    jsxExamples: generateKeyframeJsxExamples(name, jsxStyleProps2)
   }));
   return {
     type: "keyframes",
@@ -5809,52 +5884,28 @@ var generateKeyframesSpec = (ctx) => {
 };
 
 // src/spec/layer-styles.ts
-import { isObject as isObject3, walkObject as walkObject2 } from "@pandacss/shared";
-var collectLayerStyles = (values) => {
-  const result = [];
-  walkObject2(
-    values,
-    (token, paths) => {
-      if (token && isObject3(token) && "value" in token) {
-        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
-        result.push({
-          name: filteredPaths.join("."),
-          description: token.description
-        });
-      }
-    },
-    {
-      stop: (v) => isObject3(v) && "value" in v
-    }
-  );
-  return result;
-};
 var generateLayerStylesSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
-  const layerStyles = collectLayerStyles(ctx.config.theme?.layerStyles ?? {});
-  const layerStylesSpec = layerStyles.map((style) => {
-    const functionExamples = [`css({ layerStyle: '${style.name}' })`];
-    const jsxExamples = [];
-    if (jsxStyleProps2 === "all") {
-      jsxExamples.push(`<Box layerStyle="${style.name}" />`);
-    } else if (jsxStyleProps2 === "minimal") {
-      jsxExamples.push(`<Box css={{ layerStyle: '${style.name}' }} />`);
-    }
-    return {
-      name: style.name,
-      description: style.description,
-      functionExamples,
-      jsxExamples
-    };
-  });
-  return {
-    type: "layer-styles",
-    data: layerStylesSpec
-  };
+  return generateCompositionStyleSpec("layer-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
 // src/spec/patterns.ts
+var getExampleValue = (prop) => {
+  if (prop.type === "enum" && Array.isArray(prop.value) && prop.value.length > 0) {
+    return `"${prop.value[0]}"`;
+  }
+  if (prop.type === "boolean") {
+    return "true";
+  }
+  if (prop.type === "number") {
+    return "4";
+  }
+  if (prop.type === "token") {
+    return '"md"';
+  }
+  return "<value>";
+};
 var generatePatternsSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const patterns = ctx.patterns.details.map((node) => {
     const patternName = node.baseName;
     const jsxName = node.jsxName;
@@ -5863,21 +5914,16 @@ var generatePatternsSpec = (ctx) => {
     const jsxExamples = [];
     if (properties.length === 0) {
       functionExamples.push(`${patternName}()`);
-      jsxExamples.push(`<${jsxName} />`);
+      if (jsxStyleProps2 !== "none") {
+        jsxExamples.push(`<${jsxName} />`);
+      }
     } else {
       properties.forEach(([propName, prop]) => {
-        let exampleValue = "<value>";
-        if (prop.type === "enum" && prop.value?.length > 0) {
-          exampleValue = `"${prop.value[0]}"`;
-        } else if (prop.type === "boolean") {
-          exampleValue = "true";
-        } else if (prop.type === "number") {
-          exampleValue = "4";
-        } else if (prop.type === "token") {
-          exampleValue = '"md"';
-        }
+        const exampleValue = getExampleValue(prop);
         functionExamples.push(`${patternName}({ ${propName}: ${exampleValue} })`);
-        jsxExamples.push(`<${jsxName} ${propName}={${exampleValue}} />`);
+        if (jsxStyleProps2 !== "none") {
+          jsxExamples.push(`<${jsxName} ${propName}={${exampleValue}} />`);
+        }
       });
     }
     const defaultValues = typeof node.config.defaultValues === "object" ? node.config.defaultValues : {};
@@ -5926,13 +5972,13 @@ var generateRecipesSpec = (ctx) => {
       variantKeys.forEach((variantKey) => {
         const firstValue = getFirstVariantValue(node.variantKeyMap, variantKey);
         if (firstValue) {
-          functionExamples.push(`${recipeName}({ ${variantKey}: '${firstValue}' })`);
-          jsxExamples.push(`<${jsxName} ${variantKey}="${firstValue}" />`);
+          functionExamples.push(`${recipeName}({ ${variantKey}: ${formatFunctionValue(firstValue)} })`);
+          jsxExamples.push(`<${jsxName} ${variantKey}=${formatJsxValue(firstValue)} />`);
         }
       });
       if (variantKeys.length > 1) {
-        const props = buildVariantProps(variantKeys, node.variantKeyMap, (key, value) => `${key}: '${value}'`, ", ");
-        const jsxProps = buildVariantProps(variantKeys, node.variantKeyMap, (key, value) => `${key}="${value}"`, " ");
+        const props = buildVariantProps(variantKeys, node.variantKeyMap, buildFunctionProps, ", ");
+        const jsxProps = buildVariantProps(variantKeys, node.variantKeyMap, buildJsxProps, " ");
         if (props && jsxProps) {
           functionExamples.push(`${recipeName}({ ${props} })`);
           jsxExamples.push(`<${jsxName} ${jsxProps} />`);
@@ -5955,52 +6001,12 @@ var generateRecipesSpec = (ctx) => {
 };
 
 // src/spec/text-styles.ts
-import { isObject as isObject4, walkObject as walkObject3 } from "@pandacss/shared";
-var collectTextStyles = (values) => {
-  const result = [];
-  walkObject3(
-    values,
-    (token, paths) => {
-      if (token && isObject4(token) && "value" in token) {
-        const filteredPaths = paths.filter((item) => item !== "DEFAULT");
-        result.push({
-          name: filteredPaths.join("."),
-          description: token.description
-        });
-      }
-    },
-    {
-      stop: (v) => isObject4(v) && "value" in v
-    }
-  );
-  return result;
-};
 var generateTextStylesSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
-  const textStyles = collectTextStyles(ctx.config.theme?.textStyles ?? {});
-  const textStylesSpec = textStyles.map((style) => {
-    const functionExamples = [`css({ textStyle: '${style.name}' })`];
-    const jsxExamples = [];
-    if (jsxStyleProps2 === "all") {
-      jsxExamples.push(`<Box textStyle="${style.name}" />`);
-    } else if (jsxStyleProps2 === "minimal") {
-      jsxExamples.push(`<Box css={{ textStyle: '${style.name}' }} />`);
-    }
-    return {
-      name: style.name,
-      description: style.description,
-      functionExamples,
-      jsxExamples
-    };
-  });
-  return {
-    type: "text-styles",
-    data: textStylesSpec
-  };
+  return generateCompositionStyleSpec("text-styles", ctx.config.theme, ctx.config.jsxStyleProps);
 };
 
 // src/spec/tokens.ts
-import { walkObject as walkObject4 } from "@pandacss/shared";
+import { walkObject as walkObject2 } from "@pandacss/shared";
 var CATEGORY_PROPERTY_MAP = {
   colors: "color",
   spacing: "padding",
@@ -6033,10 +6039,9 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
   const functionExamples = [`css({ ${prop}: '${tokenName}' })`];
   const tokenFunctionExamples = [`token('${fullTokenName}')`];
   const jsxExamples = [];
-  if (jsxStyleProps2 === "all") {
-    jsxExamples.push(`<Box ${prop}="${tokenName}" />`);
-  } else if (jsxStyleProps2 === "minimal") {
-    jsxExamples.push(`<Box css={{ ${prop}: '${tokenName}' }} />`);
+  const jsxExample = generateJsxExample({ [prop]: tokenName }, jsxStyleProps2);
+  if (jsxExample) {
+    jsxExamples.push(jsxExample);
   }
   if (token.extensions.varRef) {
     tokenFunctionExamples.push(`token.var('${fullTokenName}')`);
@@ -6044,7 +6049,7 @@ var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
   return { functionExamples, tokenFunctionExamples, jsxExamples };
 };
 var generateTokensSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
     const typeTokens = Array.from(tokenMap.values()).filter(
       (token) => !token.extensions.isSemantic && !token.extensions.isVirtual && !token.extensions.conditions && !token.extensions.isNegative
@@ -6073,7 +6078,7 @@ var generateTokensSpec = (ctx) => {
   };
 };
 var generateSemanticTokensSpec = (ctx) => {
-  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  const jsxStyleProps2 = ctx.config.jsxStyleProps;
   const groupedData = Array.from(ctx.tokens.view.categoryMap.entries()).map(([category, tokenMap]) => {
     const typeTokens = Array.from(tokenMap.values()).filter(
       (token) => (token.extensions.isSemantic || token.extensions.conditions) && !token.extensions.isVirtual
@@ -6083,7 +6088,7 @@ var generateSemanticTokensSpec = (ctx) => {
     const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
     const values = typeTokens.map((token) => {
       const conditions = [];
-      walkObject4(token.extensions.rawValue, (value, path) => {
+      walkObject2(token.extensions.rawValue, (value, path) => {
         conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
       });
       return {

package/package.json

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