@pandacss/generator 1.4.3 → 1.5.1

package/dist/index.js

@@ -1158,6 +1158,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -1183,7 +1185,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -1226,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) => {
@@ -1271,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)
@@ -1297,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])
@@ -1310,7 +1334,6 @@ function generatePreactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -1326,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
 
     interface UnstyledProps {
@@ -1334,7 +1357,7 @@ function generatePreactCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P = {}> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: (Partial<P> & DataAttrs) | undefined
     }
 
     type ElementType = JSX.ElementType
@@ -1350,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<
@@ -1358,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> {
@@ -1689,6 +1712,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -1711,7 +1736,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2046,6 +2071,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -2075,7 +2102,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2120,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) => {
@@ -2188,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])
@@ -2201,7 +2249,6 @@ function generateReactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -2217,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ElementType } from 'react'
 
     interface UnstyledProps {
@@ -2231,15 +2278,15 @@ function generateReactCreateStyleContext(ctx) {
       (props?: any): any
     }
     type SlotRecipe = SvaFn | SlotRecipeFn
-    
+
     type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
-    
+
     interface WithProviderOptions<P = {}> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: (Partial<P> & DataAttrs) | undefined
     }
 
     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<
@@ -2247,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> {
@@ -2408,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(
@@ -2424,7 +2474,7 @@ function generateSolidJsxFactory(ctx) {
       const ${componentName} = (props) => {
         const mergedProps = mergeProps(
           { as: element.__base__ || element },
-          defaultProps,
+          getDefaultProps(),
           props
         )
 
@@ -2614,17 +2664,16 @@ ${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
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -2650,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>
+  defaultProps?: MaybeAccessor<Partial<TProps> & DataAttrs>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2698,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) => {
@@ -2727,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, {
@@ -2799,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(() => {
@@ -2824,7 +2899,6 @@ function generateSolidCreateStyleContext(ctx) {
           )
         }
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         return WithContext
       }
@@ -2839,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, MaybeAccessor, AsProps", "../types/jsx")}
     import type { Component, JSX, ComponentProps } from 'solid-js'
 
     interface UnstyledProps {
@@ -2847,7 +2921,7 @@ function generateSolidCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: MaybeAccessor<Partial<P> & DataAttrs> | undefined
     }
     
     type ElementType = keyof JSX.IntrinsicElements | Component<any>
@@ -2867,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<
@@ -2875,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> {
@@ -3261,6 +3335,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -3285,7 +3361,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -3333,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
@@ -3416,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"],
@@ -3426,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])
@@ -3436,7 +3528,6 @@ function generateVueCreateStyleContext(ctx) {
           },
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -3452,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
     interface UnstyledProps {
@@ -3460,7 +3551,7 @@ function generateVueCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P = {}> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: (Partial<P> & DataAttrs) | undefined
     }
 
     // Add v-model support types
@@ -3489,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<
@@ -3497,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

@@ -1122,6 +1122,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -1147,7 +1149,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -1190,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) => {
@@ -1235,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)
@@ -1261,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])
@@ -1274,7 +1298,6 @@ function generatePreactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -1290,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
 
     interface UnstyledProps {
@@ -1298,7 +1321,7 @@ function generatePreactCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P = {}> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: (Partial<P> & DataAttrs) | undefined
     }
 
     type ElementType = JSX.ElementType
@@ -1314,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<
@@ -1322,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> {
@@ -1653,6 +1676,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -1675,7 +1700,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2010,6 +2035,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -2039,7 +2066,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2084,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) => {
@@ -2152,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])
@@ -2165,7 +2213,6 @@ function generateReactCreateStyleContext(ctx) {
           })
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -2181,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, ComponentProps, DataAttrs, AsProps", "../types/jsx")}
     import type { ComponentType, ElementType } from 'react'
 
     interface UnstyledProps {
@@ -2195,15 +2242,15 @@ function generateReactCreateStyleContext(ctx) {
       (props?: any): any
     }
     type SlotRecipe = SvaFn | SlotRecipeFn
-    
+
     type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
-    
+
     interface WithProviderOptions<P = {}> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: (Partial<P> & DataAttrs) | undefined
     }
 
     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<
@@ -2211,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> {
@@ -2372,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(
@@ -2388,7 +2438,7 @@ function generateSolidJsxFactory(ctx) {
       const ${componentName} = (props) => {
         const mergedProps = mergeProps(
           { as: element.__base__ || element },
-          defaultProps,
+          getDefaultProps(),
           props
         )
 
@@ -2578,17 +2628,16 @@ ${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
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -2614,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>
+  defaultProps?: MaybeAccessor<Partial<TProps> & DataAttrs>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -2662,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) => {
@@ -2691,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, {
@@ -2763,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(() => {
@@ -2788,7 +2863,6 @@ function generateSolidCreateStyleContext(ctx) {
           )
         }
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         return WithContext
       }
@@ -2803,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, MaybeAccessor, AsProps", "../types/jsx")}
     import type { Component, JSX, ComponentProps } from 'solid-js'
 
     interface UnstyledProps {
@@ -2811,7 +2885,7 @@ function generateSolidCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: MaybeAccessor<Partial<P> & DataAttrs> | undefined
     }
     
     type ElementType = keyof JSX.IntrinsicElements | Component<any>
@@ -2831,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<
@@ -2839,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> {
@@ -3225,6 +3299,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<\`data-\${string}\`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -3249,7 +3325,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
@@ -3297,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
@@ -3380,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"],
@@ -3390,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])
@@ -3400,7 +3492,6 @@ function generateVueCreateStyleContext(ctx) {
           },
         })
         
-        const componentName = getDisplayName(Component)
         WithContext.displayName = \`withContext(\${componentName})\`
         
         return WithContext
@@ -3416,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", "../types/jsx")}
+    ${ctx.file.importType("JsxFactoryOptions, DataAttrs, AsProps", "../types/jsx")}
     import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
     interface UnstyledProps {
@@ -3424,7 +3515,7 @@ function generateVueCreateStyleContext(ctx) {
     }
 
     interface WithProviderOptions<P = {}> {
-      defaultProps?: Partial<P> | undefined
+      defaultProps?: (Partial<P> & DataAttrs) | undefined
     }
 
     // Add v-model support types
@@ -3453,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<
@@ -3461,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.4.3",
+  "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.4.3",
-    "@pandacss/is-valid-prop": "^1.4.3",
-    "@pandacss/logger": "1.4.3",
-    "@pandacss/shared": "1.4.3",
-    "@pandacss/token-dictionary": "1.4.3",
-    "@pandacss/types": "1.4.3"
+    "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"