@pandacss/generator 1.6.1 → 1.7.0

package/dist/index.js

@@ -37,8 +37,8 @@ module.exports = __toCommonJS(index_exports);
 
 // src/generator.ts
 var import_core5 = require("@pandacss/core");
-var import_shared7 = require("@pandacss/shared");
-var import_ts_pattern15 = require("ts-pattern");
+var import_shared11 = require("@pandacss/shared");
+var import_ts_pattern14 = require("ts-pattern");
 
 // src/artifacts/setup-artifacts.ts
 var import_outdent48 = __toESM(require("outdent"));
@@ -553,7 +553,6 @@ function generatedJsxHelpers(ctx) {
 var import_shared = require("@pandacss/shared");
 var import_javascript_stringify = require("javascript-stringify");
 var import_outdent10 = require("outdent");
-var import_ts_pattern3 = require("ts-pattern");
 function generatePattern(ctx, filters) {
   if (ctx.patterns.isEmpty()) return;
   const details = ctx.patterns.filterDetails(filters);
@@ -580,18 +579,8 @@ function generatePattern(ctx, filters) {
       export interface ${upperName}Properties {
          ${Object.keys(properties ?? {}).map((key) => {
         const value = properties[key];
-        return (0, import_ts_pattern3.match)(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<${(0, import_shared.unionType)(value2.value)}>`;
-        }).otherwise(() => {
-          return `${key}?: ConditionalValue<${value.type}>`;
-        });
+        const typeString = ctx.patterns.getPropertyType(value);
+        return `${key}?: ${typeString}`;
       }).join("\n	")}
       }
 
@@ -642,7 +631,7 @@ defaultValues`)}
 var import_core = require("@pandacss/core");
 var import_shared2 = require("@pandacss/shared");
 var import_outdent11 = require("outdent");
-var import_ts_pattern4 = require("ts-pattern");
+var import_ts_pattern3 = require("ts-pattern");
 var stringify2 = (value) => JSON.stringify(value, null, 2);
 var isBooleanValue = (value) => value === "true" || value === "false";
 var hasOwn = (obj, key) => {
@@ -759,7 +748,7 @@ function generateRecipes(ctx, filters) {
       }
       return ctx.file.jsDocComment("", { default: defaultValue });
     };
-    const jsCode = (0, import_ts_pattern4.match)(config).when(
+    const jsCode = (0, import_ts_pattern3.match)(config).when(
       import_core.Recipes.isSlotRecipeConfig,
       (config2) => import_outdent11.outdent`
         ${ctx.file.import("compact, getSlotCompoundVariant, memo, splitProps", "../helpers")}
@@ -1069,7 +1058,7 @@ function generatePreactJsxFactory(ctx) {
 
 // src/artifacts/preact-jsx/pattern.ts
 var import_outdent15 = require("outdent");
-var import_ts_pattern5 = require("ts-pattern");
+var import_ts_pattern4 = require("ts-pattern");
 function generatePreactJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -1087,7 +1076,7 @@ function generatePreactJsxPattern(ctx, filters) {
       ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern5.match)(jsxStyleProps2).with(
+        ${(0, import_ts_pattern4.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent15.outdent`
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -1221,7 +1210,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/preact-jsx/create-style-context.ts
 var import_outdent17 = require("outdent");
-var import_ts_pattern6 = require("ts-pattern");
+var import_ts_pattern5 = require("ts-pattern");
 function generatePreactCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -1265,7 +1254,7 @@ function generatePreactCreateStyleContext(ctx) {
            return { ...restProps, className: cx(slotStyles, restProps.className) }
         }
         ${import_outdent17.outdent.string(
-      (0, import_ts_pattern6.match)(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`)
+      (0, import_ts_pattern5.match)(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`)
     )}
       }
 
@@ -1618,7 +1607,7 @@ function generateQwikJsxFactory(ctx) {
 
 // src/artifacts/qwik-jsx/pattern.ts
 var import_outdent21 = require("outdent");
-var import_ts_pattern7 = require("ts-pattern");
+var import_ts_pattern6 = require("ts-pattern");
 function generateQwikJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -1635,7 +1624,7 @@ function generateQwikJsxPattern(ctx, filters) {
       ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
-        ${(0, import_ts_pattern7.match)(jsxStyleProps2).with(
+        ${(0, import_ts_pattern6.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent21.outdent`
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -1985,7 +1974,7 @@ function generateReactJsxFactory(ctx) {
 
 // src/artifacts/react-jsx/pattern.ts
 var import_outdent26 = require("outdent");
-var import_ts_pattern8 = require("ts-pattern");
+var import_ts_pattern7 = require("ts-pattern");
 function generateReactJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -2002,7 +1991,7 @@ function generateReactJsxPattern(ctx, filters) {
       ${ctx.file.import(factoryName, "./factory")}
 
       export const ${jsxName} = /* @__PURE__ */ forwardRef(function ${jsxName}(props, ref) {
-        ${(0, import_ts_pattern8.match)(jsxStyleProps2).with(
+        ${(0, import_ts_pattern7.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent26.outdent`
           const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -2138,7 +2127,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/react-jsx/create-style-context.ts
 var import_outdent28 = require("outdent");
-var import_ts_pattern9 = require("ts-pattern");
+var import_ts_pattern8 = require("ts-pattern");
 function generateReactCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -2180,7 +2169,7 @@ function generateReactCreateStyleContext(ctx) {
            return { ...restProps, className: cx(slotStyles, restProps.className) }
         }
         ${import_outdent28.outdent.string(
-      (0, import_ts_pattern9.match)(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`)
+      (0, import_ts_pattern8.match)(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`)
     )}
       }
 
@@ -2582,7 +2571,7 @@ function generateSolidJsxFactory(ctx) {
 
 // src/artifacts/solid-jsx/pattern.ts
 var import_outdent32 = require("outdent");
-var import_ts_pattern10 = require("ts-pattern");
+var import_ts_pattern9 = require("ts-pattern");
 function generateSolidJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -2599,7 +2588,7 @@ function generateSolidJsxPattern(ctx, filters) {
     ${ctx.file.import(factoryName, "./factory")}
 
     export const ${jsxName} = /* @__PURE__ */ function ${jsxName}(props) {
-      ${(0, import_ts_pattern10.match)(jsxStyleProps2).with(
+      ${(0, import_ts_pattern9.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent32.outdent`
         const [patternProps, restProps] = splitProps(props, ${JSON.stringify(props)})
@@ -2739,7 +2728,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/solid-jsx/create-style-context.ts
 var import_outdent34 = require("outdent");
-var import_ts_pattern11 = require("ts-pattern");
+var import_ts_pattern10 = require("ts-pattern");
 function generateSolidCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -2782,7 +2771,7 @@ function generateSolidCreateStyleContext(ctx) {
           return { ...restProps, class: cx(slotStyles, restProps.class) }
         }
         ${import_outdent34.outdent.string(
-      (0, import_ts_pattern11.match)(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`)
+      (0, import_ts_pattern10.match)(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`)
     )}
       }
 
@@ -3228,7 +3217,7 @@ function generateVueJsxFactory(ctx) {
 
 // src/artifacts/vue-jsx/pattern.ts
 var import_outdent38 = require("outdent");
-var import_ts_pattern12 = require("ts-pattern");
+var import_ts_pattern11 = require("ts-pattern");
 function generateVueJsxPattern(ctx, filters) {
   const { typeName, factoryName, styleProps: jsxStyleProps2 } = ctx.jsx;
   const details = ctx.patterns.filterDetails(filters);
@@ -3248,7 +3237,7 @@ function generateVueJsxPattern(ctx, filters) {
         inheritAttrs: false,
         props: ${JSON.stringify(props)},
         setup(props, { attrs, slots }) {
-          ${(0, import_ts_pattern12.match)(jsxStyleProps2).with(
+          ${(0, import_ts_pattern11.match)(jsxStyleProps2).with(
         "none",
         () => import_outdent38.outdent`
             const cssProps = computed(() => {
@@ -3397,7 +3386,7 @@ export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${c
 
 // src/artifacts/vue-jsx/create-style-context.ts
 var import_outdent40 = require("outdent");
-var import_ts_pattern13 = require("ts-pattern");
+var import_ts_pattern12 = require("ts-pattern");
 function generateVueCreateStyleContext(ctx) {
   const { factoryName } = ctx.jsx;
   return {
@@ -3434,7 +3423,7 @@ function generateVueCreateStyleContext(ctx) {
            return { ...restProps, class: cx(slotStyles, restProps.class) }
         }
         ${import_outdent40.outdent.string(
-      (0, import_ts_pattern13.match)(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`)
+      (0, import_ts_pattern12.match)(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`)
     )}
       }
 
@@ -3823,7 +3812,7 @@ function generateJsxCreateStyleContext(ctx) {
 }
 
 // src/artifacts/types/generated.ts
-var import_ts_pattern14 = require("ts-pattern");
+var import_ts_pattern13 = require("ts-pattern");
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
@@ -4532,7 +4521,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
@@ -4571,7 +4560,7 @@ var jsxStyleProps = "export type JsxStyleProps = SystemStyleObject & WithCss";
 function getGeneratedSystemTypes(ctx) {
   return {
     system: ctx.file.rewriteTypeImport(
-      (0, import_ts_pattern14.match)(ctx.jsx.styleProps).with("all", () => system_types_d_ts_default.content).with(
+      (0, import_ts_pattern13.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")
       ).with(
@@ -5738,6 +5727,424 @@ 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
+  };
+};
+
+// 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
+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
+  };
+};
+
+// 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
+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
+  };
+};
+
+// src/spec/tokens.ts
+var import_shared10 = require("@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 = [];
+      (0, import_shared10.walkObject)(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 import_core5.Context {
   constructor(conf) {
@@ -5747,8 +6154,8 @@ var Generator = class extends import_core5.Context {
     return generateArtifacts(this, ids);
   };
   appendCssOfType = (type, sheet) => {
-    (0, import_ts_pattern15.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_shared7.PandaError(
+    (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(
         "UNKNOWN_ARTIFACT",
         `Unknown CSS artifact type: "${type}". Expected one of: preflight, tokens, static, global, keyframes`
       );
@@ -5821,7 +6228,7 @@ var Generator = class extends import_core5.Context {
       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");
@@ -5829,7 +6236,7 @@ var Generator = class extends import_core5.Context {
         recipes.push({
           type: "recipe",
           name: recipeName,
-          file: `${(0, import_shared7.dashCase)(recipeName)}.css`,
+          file: `${(0, import_shared11.dashCase)(recipeName)}.css`,
           code,
           dir: "recipes"
         });
@@ -5843,7 +6250,7 @@ var Generator = class extends import_core5.Context {
           themes.push({
             type: "theme",
             name: themeName,
-            file: `${(0, import_shared7.dashCase)(themeName)}.css`,
+            file: `${(0, import_shared11.dashCase)(themeName)}.css`,
             code: `@layer ${layerNames.tokens} {
 ${css}
 }`,
@@ -5869,6 +6276,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;
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {