@pandacss/generator 1.5.0 → 1.6.0

package/dist/index.d.mts

@@ -2,6 +2,26 @@ import * as _pandacss_types from '@pandacss/types';
 import { LoadConfigResult, ArtifactId, CssArtifactType } from '@pandacss/types';
 import { Context, Stylesheet, StyleDecoder } from '@pandacss/core';
 
+interface SplitCssArtifact {
+    type: 'layer' | 'recipe' | 'theme';
+    name: string;
+    file: string;
+    code: string;
+    /** Directory relative to styles/ */
+    dir?: string;
+}
+interface SplitCssResult {
+    /** Layer CSS files (reset, global, tokens, utilities) */
+    layers: SplitCssArtifact[];
+    /** Recipe CSS files */
+    recipes: SplitCssArtifact[];
+    /** Theme CSS files (not auto-imported) */
+    themes: SplitCssArtifact[];
+    /** Content for recipes.css */
+    recipesIndex: string;
+    /** Content for main styles.css */
+    index: string;
+}
 declare class Generator extends Context {
     constructor(conf: LoadConfigResult);
     getArtifacts: (ids?: ArtifactId[] | undefined) => _pandacss_types.Artifact[];
@@ -11,6 +31,28 @@ declare class Generator extends Context {
     appendParserCss: (sheet: Stylesheet) => void;
     getParserCss: (decoder: StyleDecoder) => string;
     getCss: (stylesheet?: Stylesheet) => string;
+    /**
+     * Get CSS for a specific layer from the stylesheet
+     */
+    getLayerCss: (sheet: Stylesheet, layer: "reset" | "base" | "tokens" | "recipes" | "utilities") => string;
+    /**
+     * Get CSS for a specific recipe
+     */
+    getRecipeCss: (recipeName: string) => string;
+    /**
+     * Get all recipe names from the decoder
+     */
+    getRecipeNames: () => string[];
+    /**
+     * Get all split CSS artifacts for the stylesheet
+     * Used when --splitting flag is enabled
+     */
+    getSplitCssArtifacts: (sheet: Stylesheet) => SplitCssResult;
 }
 
-export { Generator };
+/**
+ * Get CSS for a specific theme
+ */
+declare function getThemeCss(ctx: Context, themeName: string): string;
+
+export { Generator, type SplitCssArtifact, type SplitCssResult, getThemeCss };

package/dist/index.d.ts

@@ -2,6 +2,26 @@ import * as _pandacss_types from '@pandacss/types';
 import { LoadConfigResult, ArtifactId, CssArtifactType } from '@pandacss/types';
 import { Context, Stylesheet, StyleDecoder } from '@pandacss/core';
 
+interface SplitCssArtifact {
+    type: 'layer' | 'recipe' | 'theme';
+    name: string;
+    file: string;
+    code: string;
+    /** Directory relative to styles/ */
+    dir?: string;
+}
+interface SplitCssResult {
+    /** Layer CSS files (reset, global, tokens, utilities) */
+    layers: SplitCssArtifact[];
+    /** Recipe CSS files */
+    recipes: SplitCssArtifact[];
+    /** Theme CSS files (not auto-imported) */
+    themes: SplitCssArtifact[];
+    /** Content for recipes.css */
+    recipesIndex: string;
+    /** Content for main styles.css */
+    index: string;
+}
 declare class Generator extends Context {
     constructor(conf: LoadConfigResult);
     getArtifacts: (ids?: ArtifactId[] | undefined) => _pandacss_types.Artifact[];
@@ -11,6 +31,28 @@ declare class Generator extends Context {
     appendParserCss: (sheet: Stylesheet) => void;
     getParserCss: (decoder: StyleDecoder) => string;
     getCss: (stylesheet?: Stylesheet) => string;
+    /**
+     * Get CSS for a specific layer from the stylesheet
+     */
+    getLayerCss: (sheet: Stylesheet, layer: "reset" | "base" | "tokens" | "recipes" | "utilities") => string;
+    /**
+     * Get CSS for a specific recipe
+     */
+    getRecipeCss: (recipeName: string) => string;
+    /**
+     * Get all recipe names from the decoder
+     */
+    getRecipeNames: () => string[];
+    /**
+     * Get all split CSS artifacts for the stylesheet
+     * Used when --splitting flag is enabled
+     */
+    getSplitCssArtifacts: (sheet: Stylesheet) => SplitCssResult;
 }
 
-export { Generator };
+/**
+ * Get CSS for a specific theme
+ */
+declare function getThemeCss(ctx: Context, themeName: string): string;
+
+export { Generator, type SplitCssArtifact, type SplitCssResult, getThemeCss };

package/dist/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Generator: () => Generator
+  Generator: () => Generator,
+  getThemeCss: () => getThemeCss
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -1228,12 +1229,33 @@ function generatePreactCreateStyleContext(ctx) {
     ${ctx.file.import("cx, css, sva", "../css/index")}
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import("getDisplayName", "./factory-helper")}
-    import { createContext, useContext, createElement, forwardRef } from 'preact/compat'
+    import { createContext } from 'preact'
+    import { useContext } from 'preact/hooks'
+    import { createElement, forwardRef } from 'preact/compat'
+
+    function createSafeContext(contextName) {
+      const Context = createContext(undefined)
+      const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
+      return [Context, useStyleContext]
+    }
 
-    
     export function createStyleContext(recipe) {
-      const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
+      
+      const [StyleContext, useStyleContext] = createSafeContext(contextName)
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
       const getResolvedProps = (props, slotStyles) => {
@@ -1273,7 +1295,7 @@ function generatePreactCreateStyleContext(ctx) {
       const withProvider = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
         
-        const WithProvider = forwardRef((props, ref) => {
+        const WithProvider = forwardRef(function WithProvider(props, ref) {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
           
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
@@ -1299,9 +1321,10 @@ function generatePreactCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
-        const WithContext = forwardRef((props, ref) => {
-          const slotStyles = useContext(StyleContext)
+        const WithContext = forwardRef(function WithContext(props, ref) {
+          const slotStyles = useStyleContext(componentName, slot)
           
           const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
           const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
@@ -1312,7 +1335,6 @@ function generatePreactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -1328,7 +1350,7 @@ function generatePreactCreateStyleContext(ctx) {
     dts: import_outdent17.outdent`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
 
     interface UnstyledProps {
@@ -1352,7 +1374,7 @@ function generatePreactCreateStyleContext(ctx) {
     type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -1360,7 +1382,7 @@ function generatePreactCreateStyleContext(ctx) {
     >
 
     type StyleContextConsumer<T extends ElementType> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -2126,9 +2148,29 @@ function generateReactCreateStyleContext(ctx) {
     ${ctx.file.import("getDisplayName", "./factory-helper")}
     import { createContext, useContext, createElement, forwardRef } from 'react'
     
+    function createSafeContext(contextName) {
+      const Context = createContext(undefined)
+      const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
+      return [Context, useStyleContext]
+    }
+    
     export function createStyleContext(recipe) {
-      const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
+      
+      const [StyleContext, useStyleContext] = createSafeContext(contextName)
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
       const getResolvedProps = (props, slotStyles) => {
@@ -2194,9 +2236,10 @@ function generateReactCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
         const WithContext = forwardRef((props, ref) => {
-          const slotStyles = useContext(StyleContext)
+          const slotStyles = useStyleContext(componentName, slot)
   
           const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
           const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
@@ -2207,7 +2250,6 @@ function generateReactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -2223,7 +2265,7 @@ function generateReactCreateStyleContext(ctx) {
     dts: import_outdent28.outdent`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ElementType } from 'react'
 
     interface UnstyledProps {
@@ -2245,7 +2287,7 @@ function generateReactCreateStyleContext(ctx) {
     }
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -2253,7 +2295,7 @@ function generateReactCreateStyleContext(ctx) {
     >
     
     type StyleContextConsumer<T extends ElementType> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -2414,12 +2456,15 @@ function generateSolidJsxFactory(ctx) {
         return forwardFn(prop, cvaFn.variantKeys)
       }
 
-      const defaultProps = Object.assign(
-        options.dataAttr && configOrCva.__name__
+      const getDefaultProps = () => {
+        const baseDefaults = options.dataAttr && configOrCva.__name__
           ? { 'data-recipe': configOrCva.__name__ }
-          : {},
-        options.defaultProps
-      )
+          : {}
+        const defaults = typeof options.defaultProps === 'function'
+          ? options.defaultProps()
+          : options.defaultProps
+        return Object.assign(baseDefaults, defaults)
+      }
 
       const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(
@@ -2430,7 +2475,7 @@ function generateSolidJsxFactory(ctx) {
       const ${componentName} = (props) => {
         const mergedProps = mergeProps(
           { as: element.__base__ || element },
-          defaultProps,
+          getDefaultProps(),
           props
         )
 
@@ -2620,12 +2665,9 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent33.outdent`
-import type { ComponentProps, Component, JSX } from 'solid-js'
+import type { Accessor, ComponentProps, Component, JSX } from 'solid-js'
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType(
-      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
-      "./system-types"
-    )}
+${ctx.file.importType("Assign, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty", "./system-types")}
 
 interface Dict {
   [k: string]: unknown
@@ -2658,9 +2700,11 @@ interface RecipeFn {
   __type: any
 }
 
+export type MaybeAccessor<T> = T | Accessor<T>
+
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps> & DataAttrs
+  defaultProps?: MaybeAccessor<Partial<TProps> & DataAttrs>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2706,9 +2750,29 @@ function generateSolidCreateStyleContext(ctx) {
     import { createComponent, mergeProps } from 'solid-js/web'
     import { createContext, createMemo, splitProps, useContext } from 'solid-js'
 
+    function createSafeContext(contextName) {
+      const Context = createContext(undefined)
+      const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
+      return [Context, useStyleContext]
+    }
+
     export function createStyleContext(recipe) {
-      const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
+      
+      const [StyleContext, useStyleContext] = createSafeContext(contextName)
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
       const getResolvedProps = (props, slotStyles) => {
@@ -2735,7 +2799,10 @@ function generateSolidCreateStyleContext(ctx) {
             
           const mergedProps = createMemo(() => {
             if (!options?.defaultProps) return propsWithoutChildren
-            return { ...options.defaultProps, ...propsWithoutChildren }
+            const defaults = typeof options.defaultProps === 'function'
+              ? options.defaultProps()
+              : options.defaultProps
+            return { ...defaults, ...propsWithoutChildren }
           })
 
           return createComponent(StyleContext.Provider, {
@@ -2807,9 +2874,10 @@ function generateSolidCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
         const WithContext = (props) => {
-          const slotStyles = useContext(StyleContext)
+          const slotStyles = useStyleContext(componentName, slot)
           const [local, propsWithoutChildren] = splitProps(props, ["children"])
 
           const resolvedProps = createMemo(() => {
@@ -2832,7 +2900,6 @@ function generateSolidCreateStyleContext(ctx) {
           )
         }
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         return WithContext
       }
@@ -2847,7 +2914,7 @@ function generateSolidCreateStyleContext(ctx) {
     dts: import_outdent34.outdent`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, MaybeAccessor, AsProps", "../types/jsx")}
     import type { Component, JSX, ComponentProps } from 'solid-js'
 
     interface UnstyledProps {
@@ -2855,7 +2922,7 @@ function generateSolidCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P> {
-      defaultProps?: (Partial<P> & DataAttrs) | undefined
+      defaultProps?: MaybeAccessor<Partial<P> & DataAttrs> | undefined
     }
     
     type ElementType = keyof JSX.IntrinsicElements | Component<any>
@@ -2875,7 +2942,7 @@ function generateSolidCreateStyleContext(ctx) {
         : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = Component<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = Component<
@@ -2883,7 +2950,7 @@ function generateSolidCreateStyleContext(ctx) {
     >
 
     type StyleContextConsumer<T extends ElementType> = Component<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -3343,7 +3410,22 @@ function generateVueCreateStyleContext(ctx) {
     export function createStyleContext(recipe) {
       const StyleContext = Symbol('StyleContext')
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
+      
+      function useStyleContext(componentName, slot) {
+        const context = inject(StyleContext)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
  
       const getResolvedProps = (props, slotStyles) => {
         const { unstyled, ...restProps } = props
@@ -3426,6 +3508,7 @@ function generateVueCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
         const WithContext = defineComponent({
           props: ["unstyled"],
@@ -3436,7 +3519,7 @@ function generateVueCreateStyleContext(ctx) {
               propsWithClass.class = propsWithClass.class ?? options?.defaultProps?.class
               return propsWithClass
             })
-            const slotStyles = inject(StyleContext)
+            const slotStyles = useStyleContext(componentName, slot)
 
             return () => {
               const resolvedProps = getResolvedProps(props.value, slotStyles.value[slot])
@@ -3446,7 +3529,6 @@ function generateVueCreateStyleContext(ctx) {
           },
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -3462,7 +3544,7 @@ function generateVueCreateStyleContext(ctx) {
     dts: import_outdent40.outdent`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
     interface UnstyledProps {
@@ -3499,7 +3581,7 @@ function generateVueCreateStyleContext(ctx) {
       : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & VModelProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps & VModelProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
@@ -3507,7 +3589,7 @@ function generateVueCreateStyleContext(ctx) {
     >
 
     type StyleContextConsumer<T extends ElementType> = FunctionalComponent<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & VModelProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps & VModelProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -4910,34 +4992,35 @@ function cleanupSelectors(css, varSelector) {
 
 // src/artifacts/js/themes.ts
 var getThemeId = (themeName) => "panda-theme-" + themeName;
-function generateThemes(ctx) {
-  const { themes } = ctx.config;
-  if (!themes) return;
+function getThemeCss(ctx, themeName) {
   const { tokens, conditions } = ctx;
-  return Object.entries(themes).map(([name, _themeVariant]) => {
-    const results = [];
-    const condName = ctx.conditions.getThemeName(name);
-    for (const [key, values] of tokens.view.vars.entries()) {
-      if (key.startsWith(condName)) {
-        const css = stringifyVars({ values, conditionKey: key, root: "", conditions });
-        if (css) {
-          results.push(css);
-        }
+  const results = [];
+  const condName = conditions.getThemeName(themeName);
+  for (const [key, values] of tokens.view.vars.entries()) {
+    if (key.startsWith(condName)) {
+      const css = stringifyVars({ values, conditionKey: key, root: "", conditions });
+      if (css) {
+        results.push(css);
       }
     }
-    return {
-      name: `theme-${name}`,
-      json: JSON.stringify(
-        (0, import_shared5.compact)({
-          name,
-          id: getThemeId(name),
-          css: results.join("\n\n")
-        }),
-        null,
-        2
-      )
-    };
-  });
+  }
+  return results.join("\n\n");
+}
+function generateThemes(ctx) {
+  const { themes } = ctx.config;
+  if (!themes) return;
+  return Object.entries(themes).map(([name, _themeVariant]) => ({
+    name: `theme-${name}`,
+    json: JSON.stringify(
+      (0, import_shared5.compact)({
+        name,
+        id: getThemeId(name),
+        css: getThemeCss(ctx, name)
+      }),
+      null,
+      2
+    )
+  }));
 }
 function generateThemesIndex(ctx, files) {
   const { themes } = ctx.config;
@@ -5696,8 +5779,99 @@ var Generator = class extends import_core5.Context {
     }
     return css;
   };
+  /**
+   * Get CSS for a specific layer from the stylesheet
+   */
+  getLayerCss = (sheet, layer) => {
+    return sheet.getLayerCss(layer);
+  };
+  /**
+   * Get CSS for a specific recipe
+   */
+  getRecipeCss = (recipeName) => {
+    const sheet = this.createSheet();
+    const decoder = this.decoder.collect(this.encoder);
+    sheet.processDecoderForRecipe(decoder, recipeName);
+    return sheet.getLayerCss("recipes");
+  };
+  /**
+   * Get all recipe names from the decoder
+   */
+  getRecipeNames = () => {
+    const decoder = this.decoder.collect(this.encoder);
+    return Array.from(decoder.recipes.keys());
+  };
+  /**
+   * Get all split CSS artifacts for the stylesheet
+   * Used when --splitting flag is enabled
+   */
+  getSplitCssArtifacts = (sheet) => {
+    const layerNames = this.config.layers;
+    const decoder = this.decoder.collect(this.encoder);
+    const layerDefs = [
+      { name: "reset", file: "reset.css", css: sheet.getLayerCss("reset") },
+      { name: "global", file: "global.css", css: sheet.getLayerCss("base") },
+      { name: "tokens", file: "tokens.css", css: sheet.getLayerCss("tokens") },
+      { name: "utilities", file: "utilities.css", css: sheet.getLayerCss("utilities") }
+    ];
+    const layers = layerDefs.filter((l) => l.css.trim()).map((l) => ({
+      type: "layer",
+      name: l.name,
+      file: l.file,
+      code: l.css
+    }));
+    const recipes = [];
+    for (const recipeName of decoder.recipes.keys()) {
+      const recipeSheet = this.createSheet();
+      recipeSheet.processDecoderForRecipe(decoder, recipeName);
+      const code = recipeSheet.getLayerCss("recipes");
+      if (code.trim()) {
+        recipes.push({
+          type: "recipe",
+          name: recipeName,
+          file: `${(0, import_shared7.dashCase)(recipeName)}.css`,
+          code,
+          dir: "recipes"
+        });
+      }
+    }
+    const themes = [];
+    if (this.config.themes) {
+      for (const themeName of Object.keys(this.config.themes)) {
+        const css = getThemeCss(this, themeName);
+        if (css.trim()) {
+          themes.push({
+            type: "theme",
+            name: themeName,
+            file: `${(0, import_shared7.dashCase)(themeName)}.css`,
+            code: `@layer ${layerNames.tokens} {
+${css}
+}`,
+            dir: "themes"
+          });
+        }
+      }
+    }
+    const recipesIndex = recipes.map((r) => `@import './recipes/${r.file}';`).join("\n");
+    const layerOrder = [layerNames.reset, layerNames.base, layerNames.tokens, layerNames.recipes, layerNames.utilities];
+    const imports = [`@layer ${layerOrder.join(", ")};`, ""];
+    for (const layer of layers) {
+      imports.push(`@import './styles/${layer.file}';`);
+    }
+    if (recipes.length) {
+      imports.push(`@import './styles/recipes.css';`);
+    }
+    return {
+      layers,
+      recipes,
+      themes,
+      recipesIndex,
+      index: imports.join("\n")
+    };
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Generator
+  Generator,
+  getThemeCss
 });

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/generator.ts
 import { Context as Context2 } from "@pandacss/core";
-import { PandaError } from "@pandacss/shared";
+import { dashCase, PandaError } from "@pandacss/shared";
 import { match as match15 } from "ts-pattern";
 
 // src/artifacts/setup-artifacts.ts
@@ -1192,12 +1192,33 @@ function generatePreactCreateStyleContext(ctx) {
     ${ctx.file.import("cx, css, sva", "../css/index")}
     ${ctx.file.import(factoryName, "./factory")}
     ${ctx.file.import("getDisplayName", "./factory-helper")}
-    import { createContext, useContext, createElement, forwardRef } from 'preact/compat'
+    import { createContext } from 'preact'
+    import { useContext } from 'preact/hooks'
+    import { createElement, forwardRef } from 'preact/compat'
+
+    function createSafeContext(contextName) {
+      const Context = createContext(undefined)
+      const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
+      return [Context, useStyleContext]
+    }
 
-    
     export function createStyleContext(recipe) {
-      const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
+      
+      const [StyleContext, useStyleContext] = createSafeContext(contextName)
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
       const getResolvedProps = (props, slotStyles) => {
@@ -1237,7 +1258,7 @@ function generatePreactCreateStyleContext(ctx) {
       const withProvider = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
         
-        const WithProvider = forwardRef((props, ref) => {
+        const WithProvider = forwardRef(function WithProvider(props, ref) {
           const [variantProps, restProps] = svaFn.splitVariantProps(props)
           
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
@@ -1263,9 +1284,10 @@ function generatePreactCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
-        const WithContext = forwardRef((props, ref) => {
-          const slotStyles = useContext(StyleContext)
+        const WithContext = forwardRef(function WithContext(props, ref) {
+          const slotStyles = useStyleContext(componentName, slot)
           
           const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
           const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
@@ -1276,7 +1298,6 @@ function generatePreactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -1292,7 +1313,7 @@ function generatePreactCreateStyleContext(ctx) {
     dts: outdent17`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
 
     interface UnstyledProps {
@@ -1316,7 +1337,7 @@ function generatePreactCreateStyleContext(ctx) {
     type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -1324,7 +1345,7 @@ function generatePreactCreateStyleContext(ctx) {
     >
 
     type StyleContextConsumer<T extends ElementType> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -2090,9 +2111,29 @@ function generateReactCreateStyleContext(ctx) {
     ${ctx.file.import("getDisplayName", "./factory-helper")}
     import { createContext, useContext, createElement, forwardRef } from 'react'
     
+    function createSafeContext(contextName) {
+      const Context = createContext(undefined)
+      const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
+      return [Context, useStyleContext]
+    }
+    
     export function createStyleContext(recipe) {
-      const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
+      
+      const [StyleContext, useStyleContext] = createSafeContext(contextName)
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
       const getResolvedProps = (props, slotStyles) => {
@@ -2158,9 +2199,10 @@ function generateReactCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
         const WithContext = forwardRef((props, ref) => {
-          const slotStyles = useContext(StyleContext)
+          const slotStyles = useStyleContext(componentName, slot)
   
           const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
           const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
@@ -2171,7 +2213,6 @@ function generateReactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -2187,7 +2228,7 @@ function generateReactCreateStyleContext(ctx) {
     dts: outdent28`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ElementType } from 'react'
 
     interface UnstyledProps {
@@ -2209,7 +2250,7 @@ function generateReactCreateStyleContext(ctx) {
     }
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -2217,7 +2258,7 @@ function generateReactCreateStyleContext(ctx) {
     >
     
     type StyleContextConsumer<T extends ElementType> = ComponentType<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -2378,12 +2419,15 @@ function generateSolidJsxFactory(ctx) {
         return forwardFn(prop, cvaFn.variantKeys)
       }
 
-      const defaultProps = Object.assign(
-        options.dataAttr && configOrCva.__name__
+      const getDefaultProps = () => {
+        const baseDefaults = options.dataAttr && configOrCva.__name__
           ? { 'data-recipe': configOrCva.__name__ }
-          : {},
-        options.defaultProps
-      )
+          : {}
+        const defaults = typeof options.defaultProps === 'function'
+          ? options.defaultProps()
+          : options.defaultProps
+        return Object.assign(baseDefaults, defaults)
+      }
 
       const __cvaFn__ = composeCvaFn(element.__cva__, cvaFn)
       const __shouldForwardProps__ = composeShouldForwardProps(
@@ -2394,7 +2438,7 @@ function generateSolidJsxFactory(ctx) {
       const ${componentName} = (props) => {
         const mergedProps = mergeProps(
           { as: element.__base__ || element },
-          defaultProps,
+          getDefaultProps(),
           props
         )
 
@@ -2584,12 +2628,9 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: outdent33`
-import type { ComponentProps, Component, JSX } from 'solid-js'
+import type { Accessor, ComponentProps, Component, JSX } from 'solid-js'
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
-${ctx.file.importType(
-      "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
-      "./system-types"
-    )}
+${ctx.file.importType("Assign, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty", "./system-types")}
 
 interface Dict {
   [k: string]: unknown
@@ -2622,9 +2663,11 @@ interface RecipeFn {
   __type: any
 }
 
+export type MaybeAccessor<T> = T | Accessor<T>
+
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps> & DataAttrs
+  defaultProps?: MaybeAccessor<Partial<TProps> & DataAttrs>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2670,9 +2713,29 @@ function generateSolidCreateStyleContext(ctx) {
     import { createComponent, mergeProps } from 'solid-js/web'
     import { createContext, createMemo, splitProps, useContext } from 'solid-js'
 
+    function createSafeContext(contextName) {
+      const Context = createContext(undefined)
+      const useStyleContext = (componentName, slot) => {
+        const context = useContext(Context)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
+      return [Context, useStyleContext]
+    }
+
     export function createStyleContext(recipe) {
-      const StyleContext = createContext({})
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
+      
+      const [StyleContext, useStyleContext] = createSafeContext(contextName)
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
       const getResolvedProps = (props, slotStyles) => {
@@ -2699,7 +2762,10 @@ function generateSolidCreateStyleContext(ctx) {
             
           const mergedProps = createMemo(() => {
             if (!options?.defaultProps) return propsWithoutChildren
-            return { ...options.defaultProps, ...propsWithoutChildren }
+            const defaults = typeof options.defaultProps === 'function'
+              ? options.defaultProps()
+              : options.defaultProps
+            return { ...defaults, ...propsWithoutChildren }
           })
 
           return createComponent(StyleContext.Provider, {
@@ -2771,9 +2837,10 @@ function generateSolidCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
         const WithContext = (props) => {
-          const slotStyles = useContext(StyleContext)
+          const slotStyles = useStyleContext(componentName, slot)
           const [local, propsWithoutChildren] = splitProps(props, ["children"])
 
           const resolvedProps = createMemo(() => {
@@ -2796,7 +2863,6 @@ function generateSolidCreateStyleContext(ctx) {
           )
         }
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         return WithContext
       }
@@ -2811,7 +2877,7 @@ function generateSolidCreateStyleContext(ctx) {
     dts: outdent34`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, MaybeAccessor, AsProps", "../types/jsx")}
     import type { Component, JSX, ComponentProps } from 'solid-js'
 
     interface UnstyledProps {
@@ -2819,7 +2885,7 @@ function generateSolidCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P> {
-      defaultProps?: (Partial<P> & DataAttrs) | undefined
+      defaultProps?: MaybeAccessor<Partial<P> & DataAttrs> | undefined
     }
     
     type ElementType = keyof JSX.IntrinsicElements | Component<any>
@@ -2839,7 +2905,7 @@ function generateSolidCreateStyleContext(ctx) {
         : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = Component<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = Component<
@@ -2847,7 +2913,7 @@ function generateSolidCreateStyleContext(ctx) {
     >
 
     type StyleContextConsumer<T extends ElementType> = Component<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -3307,7 +3373,22 @@ function generateVueCreateStyleContext(ctx) {
     export function createStyleContext(recipe) {
       const StyleContext = Symbol('StyleContext')
       const isConfigRecipe = '__recipe__' in recipe
+      const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+      const contextName = recipeName ? \`createStyleContext("\${recipeName}")\` : 'createStyleContext'
       const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
+      
+      function useStyleContext(componentName, slot) {
+        const context = inject(StyleContext)
+        if (context === undefined) {
+          const componentInfo = componentName ? \`Component "\${componentName}"\` : 'A component'
+          const slotInfo = slot ? \` (slot: "\${slot}")\` : ''
+          
+          throw new Error(
+            \`\${componentInfo}\${slotInfo} cannot access \${contextName} because it's missing its Provider.\`
+          )
+        }
+        return context
+      }
  
       const getResolvedProps = (props, slotStyles) => {
         const { unstyled, ...restProps } = props
@@ -3390,6 +3471,7 @@ function generateVueCreateStyleContext(ctx) {
 
       const withContext = (Component, slot, options) => {
         const StyledComponent = ${factoryName}(Component, {}, options)
+        const componentName = getDisplayName(Component)
         
         const WithContext = defineComponent({
           props: ["unstyled"],
@@ -3400,7 +3482,7 @@ function generateVueCreateStyleContext(ctx) {
               propsWithClass.class = propsWithClass.class ?? options?.defaultProps?.class
               return propsWithClass
             })
-            const slotStyles = inject(StyleContext)
+            const slotStyles = useStyleContext(componentName, slot)
 
             return () => {
               const resolvedProps = getResolvedProps(props.value, slotStyles.value[slot])
@@ -3410,7 +3492,6 @@ function generateVueCreateStyleContext(ctx) {
           },
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -3426,7 +3507,7 @@ function generateVueCreateStyleContext(ctx) {
     dts: outdent40`
     ${ctx.file.importType("SlotRecipeRuntimeFn, RecipeVariantProps", "../types/recipe")}
     ${ctx.file.importType("JsxHTMLProps, JsxStyleProps, Assign", "../types/system-types")}
-    ${ctx.file.importType("JsxFactoryOptions, DataAttrs", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
     interface UnstyledProps {
@@ -3463,7 +3544,7 @@ function generateVueCreateStyleContext(ctx) {
       : never
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & VModelProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps & VModelProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
 
     type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
@@ -3471,7 +3552,7 @@ function generateVueCreateStyleContext(ctx) {
     >
 
     type StyleContextConsumer<T extends ElementType> = FunctionalComponent<
-      JsxHTMLProps<ComponentProps<T> & UnstyledProps & VModelProps, JsxStyleProps>
+      JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps & VModelProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
@@ -4874,34 +4955,35 @@ function cleanupSelectors(css, varSelector) {
 
 // src/artifacts/js/themes.ts
 var getThemeId = (themeName) => "panda-theme-" + themeName;
-function generateThemes(ctx) {
-  const { themes } = ctx.config;
-  if (!themes) return;
+function getThemeCss(ctx, themeName) {
   const { tokens, conditions } = ctx;
-  return Object.entries(themes).map(([name, _themeVariant]) => {
-    const results = [];
-    const condName = ctx.conditions.getThemeName(name);
-    for (const [key, values] of tokens.view.vars.entries()) {
-      if (key.startsWith(condName)) {
-        const css = stringifyVars({ values, conditionKey: key, root: "", conditions });
-        if (css) {
-          results.push(css);
-        }
+  const results = [];
+  const condName = conditions.getThemeName(themeName);
+  for (const [key, values] of tokens.view.vars.entries()) {
+    if (key.startsWith(condName)) {
+      const css = stringifyVars({ values, conditionKey: key, root: "", conditions });
+      if (css) {
+        results.push(css);
       }
     }
-    return {
-      name: `theme-${name}`,
-      json: JSON.stringify(
-        compact2({
-          name,
-          id: getThemeId(name),
-          css: results.join("\n\n")
-        }),
-        null,
-        2
-      )
-    };
-  });
+  }
+  return results.join("\n\n");
+}
+function generateThemes(ctx) {
+  const { themes } = ctx.config;
+  if (!themes) return;
+  return Object.entries(themes).map(([name, _themeVariant]) => ({
+    name: `theme-${name}`,
+    json: JSON.stringify(
+      compact2({
+        name,
+        id: getThemeId(name),
+        css: getThemeCss(ctx, name)
+      }),
+      null,
+      2
+    )
+  }));
 }
 function generateThemesIndex(ctx, files) {
   const { themes } = ctx.config;
@@ -5660,7 +5742,98 @@ var Generator = class extends Context2 {
     }
     return css;
   };
+  /**
+   * Get CSS for a specific layer from the stylesheet
+   */
+  getLayerCss = (sheet, layer) => {
+    return sheet.getLayerCss(layer);
+  };
+  /**
+   * Get CSS for a specific recipe
+   */
+  getRecipeCss = (recipeName) => {
+    const sheet = this.createSheet();
+    const decoder = this.decoder.collect(this.encoder);
+    sheet.processDecoderForRecipe(decoder, recipeName);
+    return sheet.getLayerCss("recipes");
+  };
+  /**
+   * Get all recipe names from the decoder
+   */
+  getRecipeNames = () => {
+    const decoder = this.decoder.collect(this.encoder);
+    return Array.from(decoder.recipes.keys());
+  };
+  /**
+   * Get all split CSS artifacts for the stylesheet
+   * Used when --splitting flag is enabled
+   */
+  getSplitCssArtifacts = (sheet) => {
+    const layerNames = this.config.layers;
+    const decoder = this.decoder.collect(this.encoder);
+    const layerDefs = [
+      { name: "reset", file: "reset.css", css: sheet.getLayerCss("reset") },
+      { name: "global", file: "global.css", css: sheet.getLayerCss("base") },
+      { name: "tokens", file: "tokens.css", css: sheet.getLayerCss("tokens") },
+      { name: "utilities", file: "utilities.css", css: sheet.getLayerCss("utilities") }
+    ];
+    const layers = layerDefs.filter((l) => l.css.trim()).map((l) => ({
+      type: "layer",
+      name: l.name,
+      file: l.file,
+      code: l.css
+    }));
+    const recipes = [];
+    for (const recipeName of decoder.recipes.keys()) {
+      const recipeSheet = this.createSheet();
+      recipeSheet.processDecoderForRecipe(decoder, recipeName);
+      const code = recipeSheet.getLayerCss("recipes");
+      if (code.trim()) {
+        recipes.push({
+          type: "recipe",
+          name: recipeName,
+          file: `${dashCase(recipeName)}.css`,
+          code,
+          dir: "recipes"
+        });
+      }
+    }
+    const themes = [];
+    if (this.config.themes) {
+      for (const themeName of Object.keys(this.config.themes)) {
+        const css = getThemeCss(this, themeName);
+        if (css.trim()) {
+          themes.push({
+            type: "theme",
+            name: themeName,
+            file: `${dashCase(themeName)}.css`,
+            code: `@layer ${layerNames.tokens} {
+${css}
+}`,
+            dir: "themes"
+          });
+        }
+      }
+    }
+    const recipesIndex = recipes.map((r) => `@import './recipes/${r.file}';`).join("\n");
+    const layerOrder = [layerNames.reset, layerNames.base, layerNames.tokens, layerNames.recipes, layerNames.utilities];
+    const imports = [`@layer ${layerOrder.join(", ")};`, ""];
+    for (const layer of layers) {
+      imports.push(`@import './styles/${layer.file}';`);
+    }
+    if (recipes.length) {
+      imports.push(`@import './styles/recipes.css';`);
+    }
+    return {
+      layers,
+      recipes,
+      themes,
+      recipesIndex,
+      index: imports.join("\n")
+    };
+  };
 };
 export {
-  Generator
+  Generator,
+  getThemeCss
 };

package/package.json

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