@pandacss/generator 1.5.0 → 1.5.1

package/dist/index.js

@@ -1228,12 +1228,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 +1294,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 +1320,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 +1334,6 @@ function generatePreactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -1328,7 +1349,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 +1373,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 +1381,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 +2147,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 +2235,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 +2249,6 @@ function generateReactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -2223,7 +2264,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 +2286,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 +2294,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 +2455,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 +2474,7 @@ function generateSolidJsxFactory(ctx) {
       const ${componentName} = (props) => {
         const mergedProps = mergeProps(
           { as: element.__base__ || element },
-          defaultProps,
+          getDefaultProps(),
           props
         )
 
@@ -2620,12 +2664,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 +2699,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 +2749,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 +2798,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 +2873,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 +2899,6 @@ function generateSolidCreateStyleContext(ctx) {
           )
         }
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         return WithContext
       }
@@ -2847,7 +2913,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 +2921,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 +2941,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 +2949,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 +3409,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 +3507,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 +3518,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 +3528,6 @@ function generateVueCreateStyleContext(ctx) {
           },
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -3462,7 +3543,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 +3580,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 +3588,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> {

package/dist/index.mjs

@@ -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> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/generator",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "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.5.1",
+    "@pandacss/is-valid-prop": "^1.5.1",
+    "@pandacss/logger": "1.5.1",
+    "@pandacss/shared": "1.5.1",
+    "@pandacss/token-dictionary": "1.5.1",
+    "@pandacss/types": "1.5.1"
   },
   "devDependencies": {
     "@types/pluralize": "0.0.33"