@pandacss/generator 1.6.0 → 1.7.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/generator.ts
 import { Context as Context2 } from "@pandacss/core";
 import { dashCase, PandaError } from "@pandacss/shared";
-import { match as match15 } from "ts-pattern";
+import { match as match14 } from "ts-pattern";
 
 // src/artifacts/setup-artifacts.ts
 import outdent48 from "outdent";
@@ -513,10 +513,9 @@ function generatedJsxHelpers(ctx) {
 }
 
 // src/artifacts/js/pattern.ts
-import { compact, unionType } from "@pandacss/shared";
+import { compact } from "@pandacss/shared";
 import { stringify } from "javascript-stringify";
 import { outdent as outdent10 } from "outdent";
-import { match as match3 } from "ts-pattern";
 function generatePattern(ctx, filters) {
   if (ctx.patterns.isEmpty()) return;
   const details = ctx.patterns.filterDetails(filters);
@@ -543,18 +542,8 @@ function generatePattern(ctx, filters) {
       export interface ${upperName}Properties {
          ${Object.keys(properties ?? {}).map((key) => {
         const value = properties[key];
-        return match3(value).with({ type: "property" }, (value2) => {
-          return `${key}?: SystemProperties["${value2.value}"]`;
-        }).with({ type: "token" }, (value2) => {
-          if (value2.property) {
-            return `${key}?: ConditionalValue<Tokens["${value2.value}"] | Properties["${value2.property}"]>`;
-          }
-          return `${key}?: ConditionalValue<Tokens["${value2.value}"]>`;
-        }).with({ type: "enum" }, (value2) => {
-          return `${key}?: ConditionalValue<${unionType(value2.value)}>`;
-        }).otherwise(() => {
-          return `${key}?: ConditionalValue<${value.type}>`;
-        });
+        const typeString = ctx.patterns.getPropertyType(value);
+        return `${key}?: ${typeString}`;
       }).join("\n	")}
       }
 
@@ -603,9 +592,9 @@ defaultValues`)}
 
 // src/artifacts/js/recipe.ts
 import { Recipes } from "@pandacss/core";
-import { isBoolean, unionType as unionType2 } from "@pandacss/shared";
+import { isBoolean, unionType } from "@pandacss/shared";
 import { outdent as outdent11 } from "outdent";
-import { match as match4 } from "ts-pattern";
+import { match as match3 } from "ts-pattern";
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 var hasOwn = (obj, key) => {
@@ -722,7 +711,7 @@ function generateRecipes(ctx, filters) {
       }
       return ctx.file.jsDocComment("", { default: defaultValue });
     };
-    const jsCode = match4(config).when(
+    const jsCode = match3(config).when(
       Recipes.isSlotRecipeConfig,
       (config2) => outdent11`
         ${ctx.file.import("compact, getSlotCompoundVariant, memo, splitProps", "../helpers")}
@@ -794,7 +783,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}: ${unionType2(values)}`;
+        const valueStr = values.every(isBooleanValue) ? `${key}: boolean` : `${key}: ${unionType(values)}`;
         return [getDefaultValueJsDoc(key), valueStr].filter(Boolean).join("\n");
       }).join("\n")}
         }
@@ -803,7 +792,7 @@ function generateRecipes(ctx, filters) {
           [key in keyof ${upperName}Variant]: Array<${upperName}Variant[key]>
         }
 
-        ${Recipes.isSlotRecipeConfig(config) ? `type ${upperName}Slot = ${unionType2(config.slots)}` : ""}
+        ${Recipes.isSlotRecipeConfig(config) ? `type ${upperName}Slot = ${unionType(config.slots)}` : ""}
 
         export type ${upperName}VariantProps = {
           [key in keyof ${upperName}Variant]?: ${compoundVariants?.length ? `${upperName}Variant[key]` : `ConditionalValue<${upperName}Variant[key]>`} | undefined
@@ -1032,7 +1021,7 @@ function generatePreactJsxFactory(ctx) {
 
 // src/artifacts/preact-jsx/pattern.ts
 import { outdent as outdent15 } from "outdent";
-import { match as match5 } from "ts-pattern";
+import { match as match4 } from "ts-pattern";
 function generatePreactJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -1050,7 +1039,7 @@ function generatePreactJsxPattern(ctx, filters) {
       ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${match5(jsxStyleProps2).with(
+        ${match4(jsxStyleProps2).with(
         "none",
         () => outdent15`
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -1184,7 +1173,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/preact-jsx/create-style-context.ts
 import { outdent as outdent17 } from "outdent";
-import { match as match6 } from "ts-pattern";
+import { match as match5 } from "ts-pattern";
 function generatePreactCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -1228,7 +1217,7 @@ function generatePreactCreateStyleContext(ctx) {
            return { ...restProps, className: cx(slotStyles, restProps.className) }
         }
         ${outdent17.string(
-      match6(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, className: cx(css(slotStyles), restProps.className) }`).otherwise(() => `return restProps`)
+      match5(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, className: cx(css(slotStyles), restProps.className) }`).otherwise(() => `return restProps`)
     )}
       }
 
@@ -1581,7 +1570,7 @@ function generateQwikJsxFactory(ctx) {
 
 // src/artifacts/qwik-jsx/pattern.ts
 import { outdent as outdent21 } from "outdent";
-import { match as match7 } from "ts-pattern";
+import { match as match6 } from "ts-pattern";
 function generateQwikJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -1598,7 +1587,7 @@ function generateQwikJsxPattern(ctx, filters) {
       ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
-        ${match7(jsxStyleProps2).with(
+        ${match6(jsxStyleProps2).with(
         "none",
         () => outdent21`
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -1948,7 +1937,7 @@ function generateReactJsxFactory(ctx) {
 
 // src/artifacts/react-jsx/pattern.ts
 import { outdent as outdent26 } from "outdent";
-import { match as match8 } from "ts-pattern";
+import { match as match7 } from "ts-pattern";
 function generateReactJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -1965,7 +1954,7 @@ function generateReactJsxPattern(ctx, filters) {
       ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${match8(jsxStyleProps2).with(
+        ${match7(jsxStyleProps2).with(
         "none",
         () => outdent26`
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -2101,7 +2090,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/react-jsx/create-style-context.ts
 import { outdent as outdent28 } from "outdent";
-import { match as match9 } from "ts-pattern";
+import { match as match8 } from "ts-pattern";
 function generateReactCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -2143,7 +2132,7 @@ function generateReactCreateStyleContext(ctx) {
            return { ...restProps, className: cx(slotStyles, restProps.className) }
         }
         ${outdent28.string(
-      match9(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, className: cx(css(slotStyles), restProps.className) }`).otherwise(() => `return restProps`)
+      match8(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, className: cx(css(slotStyles), restProps.className) }`).otherwise(() => `return restProps`)
     )}
       }
 
@@ -2545,7 +2534,7 @@ function generateSolidJsxFactory(ctx) {
 
 // src/artifacts/solid-jsx/pattern.ts
 import { outdent as outdent32 } from "outdent";
-import { match as match10 } from "ts-pattern";
+import { match as match9 } from "ts-pattern";
 function generateSolidJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -2562,7 +2551,7 @@ function generateSolidJsxPattern(ctx, filters) {
     ${ctx.file.import(factoryName, "./factory")}
 
     export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
-      ${match10(jsxStyleProps2).with(
+      ${match9(jsxStyleProps2).with(
         "none",
         () => outdent32`
         const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -2702,7 +2691,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/solid-jsx/create-style-context.ts
 import { outdent as outdent34 } from "outdent";
-import { match as match11 } from "ts-pattern";
+import { match as match10 } from "ts-pattern";
 function generateSolidCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -2745,7 +2734,7 @@ function generateSolidCreateStyleContext(ctx) {
           return { ...restProps, class: cx(slotStyles, restProps.class) }
         }
         ${outdent34.string(
-      match11(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, class: cx(css(slotStyles), restProps.class) }`).otherwise(() => `return restProps`)
+      match10(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, class: cx(css(slotStyles), restProps.class) }`).otherwise(() => `return restProps`)
     )}
       }
 
@@ -3191,7 +3180,7 @@ function generateVueJsxFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 import { outdent as outdent38 } from "outdent";
-import { match as match12 } from "ts-pattern";
+import { match as match11 } from "ts-pattern";
 function generateVueJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -3211,7 +3200,7 @@ function generateVueJsxPattern(ctx, filters) {
         inheritAttrs: false,
         props: ${JSON.stringify(props)},
         setup(props, { attrs, slots }) {
-          ${match12(jsxStyleProps2).with(
+          ${match11(jsxStyleProps2).with(
         "none",
         () => outdent38`
             const cssProps = computed(() => {
@@ -3360,7 +3349,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/vue-jsx/create-style-context.ts
 import { outdent as outdent40 } from "outdent";
-import { match as match13 } from "ts-pattern";
+import { match as match12 } from "ts-pattern";
 function generateVueCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -3397,7 +3386,7 @@ function generateVueCreateStyleContext(ctx) {
            return { ...restProps, class: cx(slotStyles, restProps.class) }
         }
         ${outdent40.string(
-      match13(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, class: cx(css(slotStyles), restProps.class) }`).otherwise(() => `return restProps`)
+      match12(ctx.config.jsxStyleProps).with("all", () => `return { ...slotStyles, ...restProps }`).with("minimal", () => `return { ...restProps, css: css.raw(slotStyles, restProps.css) }`).with("none", () => `return { ...restProps, class: cx(css(slotStyles), restProps.class) }`).otherwise(() => `return restProps`)
     )}
       }
 
@@ -3786,7 +3775,7 @@ function generateJsxCreateStyleContext(ctx) {
 }
 
 // src/artifacts/types/generated.ts
-import { match as match14 } from "ts-pattern";
+import { match as match13 } from "ts-pattern";
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
@@ -4495,7 +4484,7 @@ var parts_d_ts_default = {
 
 // src/artifacts/generated/pattern.d.ts.json
 var pattern_d_ts_default = {
-  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty }\n  | { type: 'enum'; value: string[] }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty }\n  | { type: 'string' | 'boolean' | 'number' }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * Whether the pattern is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
+  content: "import type { CssProperty, SystemStyleObject } from './system-types'\nimport type { TokenCategory } from '../tokens'\n\ntype Primitive = string | number | boolean | null | undefined\ntype LiteralUnion<T, K extends Primitive = string> = T | (K & Record<never, never>)\n\nexport type PatternProperty =\n  | { type: 'property'; value: CssProperty; description?: string }\n  | { type: 'enum'; value: string[]; description?: string }\n  | { type: 'token'; value: TokenCategory; property?: CssProperty; description?: string }\n  | { type: 'string' | 'boolean' | 'number'; description?: string }\n\nexport interface PatternHelpers {\n  map: (value: any, fn: (value: string) => string | undefined) => any\n  isCssUnit: (value: any) => boolean\n  isCssVar: (value: any) => boolean\n  isCssFunction: (value: any) => boolean\n}\n\nexport interface PatternProperties {\n  [key: string]: PatternProperty\n}\n\ntype InferProps<T> = Record<LiteralUnion<keyof T>, any>\n\nexport type PatternDefaultValue<T> = Partial<InferProps<T>>\n\nexport type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>\n\nexport interface PatternConfig<T extends PatternProperties = PatternProperties> {\n  /**\n   * The description of the pattern. This will be used in the JSDoc comment.\n   */\n  description?: string\n  /**\n   * The JSX element rendered by the pattern\n   * @default 'div'\n   */\n  jsxElement?: string\n  /**\n   * The properties of the pattern.\n   */\n  properties?: T\n  /**\n   * The default values of the pattern.\n   */\n  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>\n  /**\n   * The css object this pattern will generate.\n   */\n  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject\n  /**\n   * Whether the pattern is deprecated.\n   */\n  deprecated?: boolean | string\n  /**\n   * The jsx element name this pattern will generate.\n   */\n  jsxName?: string\n  /**\n   * The jsx elements to track for this pattern. Can be string or Regexp.\n   *\n   * @default capitalize(pattern.name)\n   * @example ['Button', 'Link', /Button$/]\n   */\n  jsx?: Array<string | RegExp>\n  /**\n   * Whether to only generate types for the specified properties.\n   * This will disallow css properties\n   */\n  strict?: boolean\n  /**\n   * @experimental\n   * Disallow certain css properties for this pattern\n   */\n  blocklist?: LiteralUnion<CssProperty>[]\n}\n"
 };
 
 // src/artifacts/generated/recipe.d.ts.json
@@ -4534,7 +4523,7 @@ var jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
   return {
     system: ctx.file.rewriteTypeImport(
-      match14(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
+      match13(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")
       ).with(
@@ -4652,12 +4641,12 @@ function generatePropTypes(ctx) {
 
 // src/artifacts/types/style-props.ts
 import { allCssProperties } from "@pandacss/is-valid-prop";
-import { unionType as unionType3 } from "@pandacss/shared";
+import { unionType as unionType2 } from "@pandacss/shared";
 import outdent45 from "outdent";
 function generateStyleProps(ctx) {
   const props = new Set(allCssProperties.concat(ctx.utility.keys()).filter(Boolean));
   const propTypes = ctx.utility.getTypes();
-  const cssVars = unionType3(ctx.globalVars.vars);
+  const cssVars = unionType2(ctx.globalVars.vars);
   return outdent45`
     ${ctx.file.importType("ConditionalValue", "./conditions")}
     ${ctx.file.importType("OnlyKnown, UtilityValues, WithEscapeHatch", "./prop-type")}
@@ -4779,7 +4768,7 @@ var restrict = (key, value, config) => {
 };
 
 // src/artifacts/types/token-types.ts
-import { capitalize, unionType as unionType4 } from "@pandacss/shared";
+import { capitalize, unionType as unionType3 } from "@pandacss/shared";
 import { outdent as outdent46 } from "outdent";
 import pluralize from "pluralize";
 var categories = [
@@ -4817,22 +4806,22 @@ function generateTokenTypes(ctx) {
   } else {
     const colorPaletteKeys = Array.from(tokens.view.colorPalettes.keys());
     if (colorPaletteKeys.length) {
-      set.add(`export type ColorPalette = ${unionType4(colorPaletteKeys)}`);
+      set.add(`export type ColorPalette = ${unionType3(colorPaletteKeys)}`);
     }
     for (const [key, value] of tokens.view.categoryMap.entries()) {
       const typeName = capitalize(pluralize.singular(key));
       const categoryName = `${typeName}Token`;
-      set.add(`export type ${categoryName} = ${unionType4(value.keys())}`);
+      set.add(`export type ${categoryName} = ${unionType3(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 = ${unionType4(categories)}`);
+  set.add(`export type TokenCategory = ${unionType3(categories)}`);
   const arr = Array.from(set);
   arr.unshift(
-    `export type Token = ${unionType4(tokenSet, {
+    `export type Token = ${unionType3(tokenSet, {
       stringify: (t) => `\`${t}\``,
       fallback: "string"
     })}`
@@ -5701,6 +5690,424 @@ 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
+  };
+};
+
+// src/spec/color-palette.ts
+var generateColorPaletteSpec = (ctx) => {
+  const colorPaletteConfig = ctx.config.theme?.colorPalette;
+  if (colorPaletteConfig?.enabled === false) {
+    return null;
+  }
+  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  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 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' }} />`);
+  }
+  return {
+    type: "color-palette",
+    data: {
+      values,
+      functionExamples,
+      jsxExamples
+    }
+  };
+};
+
+// src/spec/conditions.ts
+var generateConditionsSpec = (ctx) => {
+  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;
+    const nameWithoutUnderscore = name.startsWith("_") ? name.slice(1) : name;
+    const isBreakpoint = breakpointKeys.has(name) || breakpointKeys.has(nameWithoutUnderscore);
+    const conditionName = isBreakpoint ? nameWithoutUnderscore : name;
+    return {
+      name: conditionName,
+      value: value ?? "",
+      functionExamples: [
+        `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' }} />`
+      ]
+    };
+  });
+  return {
+    type: "conditions",
+    data: conditions
+  };
+};
+
+// src/spec/keyframes.ts
+var generateKeyframesSpec = (ctx) => {
+  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" />`]
+  }));
+  return {
+    type: "keyframes",
+    data: keyframes
+  };
+};
+
+// 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
+  };
+};
+
+// src/spec/patterns.ts
+var generatePatternsSpec = (ctx) => {
+  const patterns = ctx.patterns.details.map((node) => {
+    const patternName = node.baseName;
+    const jsxName = node.jsxName;
+    const properties = Object.entries(node.config.properties ?? {});
+    const functionExamples = [];
+    const jsxExamples = [];
+    if (properties.length === 0) {
+      functionExamples.push(`${patternName}()`);
+      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"';
+        }
+        functionExamples.push(`${patternName}({ ${propName}: ${exampleValue} })`);
+        jsxExamples.push(`<${jsxName} ${propName}={${exampleValue}} />`);
+      });
+    }
+    const defaultValues = typeof node.config.defaultValues === "object" ? node.config.defaultValues : {};
+    return {
+      name: patternName,
+      description: node.config.description,
+      properties: properties.map(([name, prop]) => ({
+        name,
+        type: ctx.patterns.getPropertyType(prop),
+        description: prop.description,
+        defaultValue: defaultValues[name]
+      })),
+      jsx: jsxName,
+      functionExamples,
+      jsxExamples
+    };
+  });
+  return {
+    type: "patterns",
+    data: patterns
+  };
+};
+
+// src/spec/recipes.ts
+var getFirstVariantValue = (variantKeyMap, key) => {
+  const values = variantKeyMap[key];
+  return values && values.length > 0 ? values[0] : null;
+};
+var buildVariantProps = (variantKeys, variantKeyMap, formatFn, separator) => {
+  return variantKeys.map((key) => {
+    const value = getFirstVariantValue(variantKeyMap, key);
+    return value ? formatFn(key, value) : null;
+  }).filter(Boolean).join(separator);
+};
+var generateRecipesSpec = (ctx) => {
+  const recipes = ctx.recipes.details.map((node) => {
+    const recipeName = node.baseName;
+    const jsxName = node.jsxName;
+    const variantKeys = Object.keys(node.variantKeyMap);
+    const functionExamples = [];
+    const jsxExamples = [];
+    if (variantKeys.length === 0) {
+      functionExamples.push(`${recipeName}()`);
+      jsxExamples.push(`<${jsxName} />`);
+    } else {
+      variantKeys.forEach((variantKey) => {
+        const firstValue = getFirstVariantValue(node.variantKeyMap, variantKey);
+        if (firstValue) {
+          functionExamples.push(`${recipeName}({ ${variantKey}: '${firstValue}' })`);
+          jsxExamples.push(`<${jsxName} ${variantKey}="${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}"`, " ");
+        if (props && jsxProps) {
+          functionExamples.push(`${recipeName}({ ${props} })`);
+          jsxExamples.push(`<${jsxName} ${jsxProps} />`);
+        }
+      }
+    }
+    return {
+      name: recipeName,
+      description: node.config.description,
+      variants: node.variantKeyMap,
+      defaultVariants: node.config.defaultVariants ?? {},
+      functionExamples,
+      jsxExamples
+    };
+  });
+  return {
+    type: "recipes",
+    data: recipes
+  };
+};
+
+// 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
+  };
+};
+
+// src/spec/tokens.ts
+import { walkObject as walkObject4 } from "@pandacss/shared";
+var CATEGORY_PROPERTY_MAP = {
+  colors: "color",
+  spacing: "padding",
+  sizes: "width",
+  fonts: "fontFamily",
+  fontSizes: "fontSize",
+  fontWeights: "fontWeight",
+  letterSpacings: "letterSpacing",
+  lineHeights: "lineHeight",
+  shadows: "boxShadow",
+  radii: "borderRadius",
+  durations: "transitionDuration",
+  easings: "transitionTimingFunction",
+  gradients: "backgroundImage",
+  aspectRatios: "aspectRatio",
+  cursor: "cursor",
+  borderWidths: "borderWidth",
+  borders: "border",
+  zIndex: "zIndex",
+  opacity: "opacity",
+  blurs: "filter"
+};
+var getCategoryProperty = (category) => {
+  return category ? CATEGORY_PROPERTY_MAP[category] ?? "color" : "color";
+};
+var generateTokenExamples = (token, jsxStyleProps2 = "all") => {
+  const prop = getCategoryProperty(token.extensions?.category);
+  const tokenName = token.extensions.prop;
+  const fullTokenName = token.name;
+  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}' }} />`);
+  }
+  if (token.extensions.varRef) {
+    tokenFunctionExamples.push(`token.var('${fullTokenName}')`);
+  }
+  return { functionExamples, tokenFunctionExamples, jsxExamples };
+};
+var generateTokensSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  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
+    );
+    if (!typeTokens.length) return null;
+    const firstToken = typeTokens[0];
+    const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
+    const values = typeTokens.map((token) => ({
+      name: token.extensions.prop || token.name,
+      value: token.value,
+      description: token.description,
+      deprecated: token.deprecated,
+      cssVar: token.extensions.varRef
+    }));
+    return {
+      type: category,
+      values,
+      tokenFunctionExamples,
+      functionExamples,
+      jsxExamples
+    };
+  }).filter(Boolean);
+  return {
+    type: "tokens",
+    data: groupedData
+  };
+};
+var generateSemanticTokensSpec = (ctx) => {
+  const jsxStyleProps2 = ctx.config.jsxStyleProps ?? "all";
+  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
+    );
+    if (!typeTokens.length) return null;
+    const firstToken = typeTokens[0];
+    const { functionExamples, tokenFunctionExamples, jsxExamples } = generateTokenExamples(firstToken, jsxStyleProps2);
+    const values = typeTokens.map((token) => {
+      const conditions = [];
+      walkObject4(token.extensions.rawValue, (value, path) => {
+        conditions.push({ value, condition: path.map((p) => p.replace(/^_/, "")).join(".") });
+      });
+      return {
+        name: token.extensions.prop || token.name,
+        values: conditions,
+        description: token.description,
+        deprecated: token.deprecated,
+        cssVar: token.extensions.varRef
+      };
+    });
+    return {
+      type: category,
+      values,
+      tokenFunctionExamples,
+      functionExamples,
+      jsxExamples
+    };
+  }).filter(Boolean);
+  return {
+    type: "semantic-tokens",
+    data: groupedData
+  };
+};
+
 // src/generator.ts
 var Generator = class extends Context2 {
   constructor(conf) {
@@ -5710,7 +6117,7 @@ var Generator = class extends Context2 {
     return generateArtifacts(this, ids);
   };
   appendCssOfType = (type, sheet) => {
-    match15(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(() => {
+    match14(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 PandaError(
         "UNKNOWN_ARTIFACT",
         `Unknown CSS artifact type: "${type}". Expected one of: preflight, tokens, static, global, keyframes`
@@ -5784,7 +6191,7 @@ var Generator = class extends Context2 {
       code: l.css
     }));
     const recipes = [];
-    for (const recipeName of decoder.recipes.keys()) {
+    for (const recipeName of this.recipes.keys) {
       const recipeSheet = this.createSheet();
       recipeSheet.processDecoderForRecipe(decoder, recipeName);
       const code = recipeSheet.getLayerCss("recipes");
@@ -5832,6 +6239,24 @@ ${css}
       index: imports.join("\n")
     };
   };
+  getSpec = () => {
+    const specs = [
+      generateTokensSpec(this),
+      generateRecipesSpec(this),
+      generatePatternsSpec(this),
+      generateConditionsSpec(this),
+      generateKeyframesSpec(this),
+      generateSemanticTokensSpec(this),
+      generateTextStylesSpec(this),
+      generateLayerStylesSpec(this),
+      generateAnimationStylesSpec(this)
+    ];
+    const colorPaletteSpec = generateColorPaletteSpec(this);
+    if (colorPaletteSpec) {
+      specs.push(colorPaletteSpec);
+    }
+    return specs;
+  };
 };
 export {
   Generator,