@pandacss/generator 1.2.0 → 1.3.1

package/dist/index.js

@@ -1031,7 +1031,7 @@ function generatePreactJsxFactory(ctx) {
           ...normalizeHTMLProps(htmlProps),
           ref,
           className: classes()
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       })
 
       const name = getDisplayName(__base__)
@@ -1164,9 +1164,16 @@ export interface UnstyledProps {
   unstyled?: boolean | undefined
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -1175,12 +1182,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, P>
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1201,7 +1208,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -1237,16 +1244,20 @@ function generatePreactCreateStyleContext(ctx) {
     )}
       }
 
-      const withRootProvider = (Component) => {
+      const withRootProvider = (Component, options) => {
         const WithRootProvider = (props) => {
           const [variantProps, otherProps] = svaFn.splitVariantProps(props)
           
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
           slotStyles._classNameMap = svaFn.classNameMap
 
+          const mergedProps = options?.defaultProps 
+            ? { ...options.defaultProps, ...otherProps } 
+            : otherProps
+
           return createElement(StyleContext.Provider, {
             value: slotStyles,
-            children: createElement(Component, otherProps)
+            children: createElement(Component, mergedProps)
           })
         }
         
@@ -1318,7 +1329,11 @@ function generatePreactCreateStyleContext(ctx) {
     import type { ComponentType, ComponentProps, JSX } from 'preact/compat'
 
     interface UnstyledProps {
-      unstyled?: boolean
+      unstyled?: boolean | undefined
+    }
+
+    interface WithProviderOptions<P = {}> {
+      defaultProps?: Partial<P> | undefined
     }
 
     type ElementType = JSX.ElementType
@@ -1336,22 +1351,29 @@ function generatePreactCreateStyleContext(ctx) {
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
-    
+
+    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+      ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
+    >
+
     type StyleContextConsumer<T extends ElementType> = ComponentType<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
+      withRootProvider: <T extends ElementType>(
+        Component: T,
+        options?: WithProviderOptions<ComponentProps<T>> | undefined
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextProvider<T, R>
       withContext: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextConsumer<T>
     }
 
@@ -1439,9 +1461,16 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
+  displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -1527,7 +1556,7 @@ function generateQwikJsxFactory(ctx) {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           class: classes(),
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       }
 
       const name = getDisplayName(__base__)
@@ -1666,7 +1695,14 @@ export interface UnstyledProps {
   unstyled?: boolean | undefined
 }
 
-export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T> & UnstyledProps, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
+export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends Component<Assign<ComponentProps<T> & UnstyledProps & AsProps, Assign<PatchedHTMLProps, Assign<JsxStyleProps, P>>>> {}
 
 interface RecipeFn {
   __type: any
@@ -1674,12 +1710,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -1700,7 +1736,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = Assign<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -1791,8 +1827,15 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
+  (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
 }
 
 export interface JsxFactory {
@@ -1878,7 +1921,7 @@ function generateReactJsxFactory(ctx) {
           ...elementProps,
           ...normalizeHTMLProps(htmlProps),
           className: classes(),
-        }, combinedProps.children ?? children)
+        }, children ?? combinedProps.children)
       })
 
       const name = getDisplayName(__base__)
@@ -1991,7 +2034,7 @@ ${ctx.file.importType(upperName, "../types/jsx")}
 export declare const ${factoryName}: ${upperName}
     `,
     jsxType: import_outdent27.outdent`
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 ${ctx.file.importType("RecipeDefinition, RecipeSelection, RecipeVariantRecord", "./recipe")}
 ${ctx.file.importType(
       "Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty",
@@ -2009,27 +2052,34 @@ export interface UnstyledProps {
   unstyled?: boolean | undefined
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
 }
 
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
   __type: any
 }
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -2050,7 +2100,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -2085,16 +2135,20 @@ function generateReactCreateStyleContext(ctx) {
     )}
       }
 
-      const withRootProvider = (Component) => {
+      const withRootProvider = (Component, options) => {
         const WithRootProvider = (props) => {
           const [variantProps, otherProps] = svaFn.splitVariantProps(props)
           
           const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
           slotStyles._classNameMap = svaFn.classNameMap
 
+          const mergedProps = options?.defaultProps 
+            ? { ...options.defaultProps, ...otherProps } 
+            : otherProps
+
           return createElement(StyleContext.Provider, {
             value: slotStyles,
-            children: createElement(Component, otherProps)
+            children: createElement(Component, mergedProps)
           })
         }
         
@@ -2162,11 +2216,11 @@ 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", "../types/jsx")}
-    import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
+    ${ctx.file.importType("JsxFactoryOptions, ComponentProps", "../types/jsx")}
+    import type { ComponentType, ElementType } from 'react'
 
     interface UnstyledProps {
-      unstyled?: boolean
+      unstyled?: boolean | undefined
     }
 
     type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
@@ -2179,29 +2233,36 @@ function generateReactCreateStyleContext(ctx) {
     
     type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
     
-    type ComponentProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'ref'> & {
-      ref?: Ref<ElementRef<T>>
+    interface WithProviderOptions<P = {}> {
+      defaultProps?: Partial<P> | undefined
     }
 
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
+
+    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
+      ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
+    >
     
     type StyleContextConsumer<T extends ElementType> = ComponentType<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
+      withRootProvider: <T extends ElementType>(
+        Component: T,
+        options?: WithProviderOptions<ComponentProps<T>> | undefined
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextProvider<T, R>
       withContext: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextConsumer<T>
     }
 
@@ -2287,13 +2348,20 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
-}
+} & AsProps
 
 export type ${componentName}<T extends ElementType> = {
   (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-  displayName?: string
+  displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -2563,11 +2631,18 @@ export interface UnstyledProps {
   unstyled?: boolean | undefined
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -2576,12 +2651,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -2602,7 +2677,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -2639,15 +2714,17 @@ function generateSolidCreateStyleContext(ctx) {
       }
       
 
-      const withRootProvider = (Component) => {
+      const withRootProvider = (Component, options) => {
         const WithRootProvider = (props) => {
           const finalProps = createMemo(() => {
             const [variantProps, restProps] = svaFn.splitVariantProps(props)
             
             const slotStyles = isConfigRecipe ? svaFn(variantProps) : svaFn.raw(variantProps)
             slotStyles._classNameMap = svaFn.classNameMap
+            
+            const mergedProps = options?.defaultProps ? mergeProps(options.defaultProps, restProps) : restProps
       
-            return { restProps, slotStyles }
+            return { mergedProps, slotStyles }
           })
 
           return createComponent(StyleContext.Provider, {
@@ -2655,7 +2732,7 @@ function generateSolidCreateStyleContext(ctx) {
             get children() {
               return createComponent(
                 Component,
-                mergeProps(finalProps().restProps, {
+                mergeProps(finalProps().mergedProps, {
                   get children() {
                     return props.children
                   },
@@ -2744,7 +2821,11 @@ function generateSolidCreateStyleContext(ctx) {
     import type { Component, JSX, ComponentProps } from 'solid-js'
 
     interface UnstyledProps {
-      unstyled?: boolean
+      unstyled?: boolean | undefined
+    }
+
+    interface WithProviderOptions<P = {}> {
+      defaultProps?: Partial<P> | undefined
     }
     type ElementType<P extends Record<string, any> = {}> = keyof JSX.IntrinsicElements | Component<P>
 
@@ -2761,22 +2842,29 @@ function generateSolidCreateStyleContext(ctx) {
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = Component<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
-    
+
+    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = Component<
+      ComponentProps<T> & UnstyledProps & RecipeVariantProps<R>
+    >
+
     type StyleContextConsumer<T extends ElementType> = Component<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
+      withRootProvider: <T extends ElementType>(
+        Component: T,
+        options?: WithProviderOptions<ComponentProps<T>> | undefined
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextProvider<T, R>
       withContext: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextConsumer<T>
     }
 
@@ -2868,11 +2956,18 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ElementType<P = any> = keyof JSX.IntrinsicElements | Component<P>
 
 export type ${componentName}<T extends ElementType> = {
-    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T>) => JSX.Element
-    displayName?: string
+    (args: { raw: readonly string[] | ArrayLike<string> }): (props: ComponentProps<T> & AsProps) => JSX.Element
+    displayName?: string | undefined
 }
 
 export interface JsxFactory {
@@ -3146,8 +3241,15 @@ export interface UnstyledProps {
   unstyled?: boolean | undefined
 }
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export interface ${componentName}<T extends ElementType, P extends Dict = {}> extends FunctionalComponent<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<JsxStyleProps, P>>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>
 > {}
 
 interface RecipeFn {
@@ -3156,12 +3258,12 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<JsxStyleProps, P['__type']>>;
+export type JsxRecipeProps<T extends ElementType, P extends RecipeFn> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P['__type']>>;
 
 export type JsxElement<T extends ElementType, P> = T extends ${componentName}<infer A, infer B>
   ? ${componentName}<A, Pretty<DistributiveUnion<P, B>>>
@@ -3182,7 +3284,7 @@ export type JsxElements = {
 
 export type ${upperName} = JsxFactory & JsxElements
 
-export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+export type ${typeName}<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type ${variantName}<T extends ${componentName}<any, any>> = T extends ${componentName}<any, infer Props> ? Props : never
   `
@@ -3217,7 +3319,7 @@ function generateVueCreateStyleContext(ctx) {
     )}
       }
 
-      const withRootProvider = (Component) => {
+      const withRootProvider = (Component, options) => {
         const WithRootProvider = defineComponent({
           props: svaFn.variantKeys,
           setup(props, { slots }) {
@@ -3231,7 +3333,12 @@ function generateVueCreateStyleContext(ctx) {
 
             provide(StyleContext, slotStyles)
 
-            return () => h(Component, otherProps, slots)
+            const mergedProps = computed(() => {
+              if (!options?.defaultProps) return otherProps
+              return { ...options.defaultProps, ...otherProps }
+            })
+
+            return () => h(Component, mergedProps.value, slots)
           },
         })
         
@@ -3322,7 +3429,11 @@ function generateVueCreateStyleContext(ctx) {
     import type { Component, FunctionalComponent, NativeElements } from 'vue'
 
     interface UnstyledProps {
-      unstyled?: boolean
+      unstyled?: boolean | undefined
+    }
+
+    interface WithProviderOptions<P = {}> {
+      defaultProps?: Partial<P> | undefined
     }
 
     // Add v-model support types
@@ -3353,22 +3464,29 @@ function generateVueCreateStyleContext(ctx) {
     type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps & VModelProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
     >
-    
+
+    type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = FunctionalComponent<
+      ComponentProps<T> & UnstyledProps & VModelProps & RecipeVariantProps<R>
+    >
+
     type StyleContextConsumer<T extends ElementType> = FunctionalComponent<
       JsxHTMLProps<ComponentProps<T> & UnstyledProps & VModelProps, JsxStyleProps>
     >
 
     export interface StyleContext<R extends SlotRecipe> {
-      withRootProvider: <T extends ElementType>(Component: T) => StyleContextProvider<T, R>
+      withRootProvider: <T extends ElementType>(
+        Component: T,
+        options?: WithProviderOptions<ComponentProps<T>> | undefined
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextProvider<T, R>
       withContext: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,
-        options?: JsxFactoryOptions<ComponentProps<T>>
+        options?: JsxFactoryOptions<ComponentProps<T>> | undefined
       ) => StyleContextConsumer<T>
     }
 
@@ -3492,8 +3610,15 @@ export type ComponentProps<T extends ElementType> = T extends IntrinsicElement
   ? Props
   : never
 
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ${componentName}<T extends ElementType> = {
-  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T>>
+  (args: { raw: readonly string[] | ArrayLike<string> }): FunctionalComponent<ComponentProps<T> & AsProps>
 }
 
 export interface JsxFactory {
@@ -3583,7 +3708,7 @@ var import_ts_pattern14 = require("ts-pattern");
 
 // src/artifacts/generated/composition.d.ts.json
 var composition_d_ts_default = {
-  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkipInk'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype Placement =\n  | 'Top'\n  | 'Right'\n  | 'Bottom'\n  | 'Left'\n  | 'Inline'\n  | 'Block'\n  | 'InlineStart'\n  | 'InlineEnd'\n  | 'BlockStart'\n  | 'BlockEnd'\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'borderRadius'\n  | 'border'\n  | 'borderWidth'\n  | 'borderColor'\n  | 'borderStyle'\n  | 'boxShadow'\n  | 'filter'\n  | 'backdropFilter'\n  | 'transform'\n  | 'color'\n  | 'opacity'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n  | `border${Placement}`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | 'padding'\n  | `padding${Placement}`\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n"
+  content: "import type { CompositionStyleObject } from './system-types'\n\ninterface Token<T> {\n  value: T\n  description?: string\n}\n\ninterface Recursive<T> {\n  [key: string]: Recursive<T> | T\n}\n\n/* -----------------------------------------------------------------------------\n * Text styles\n * -----------------------------------------------------------------------------*/\n\ntype TextStyleProperty =\n  | 'color'\n  | 'direction'\n  | 'font'\n  | 'fontFamily'\n  | 'fontFeatureSettings'\n  | 'fontKerning'\n  | 'fontLanguageOverride'\n  | 'fontOpticalSizing'\n  | 'fontPalette'\n  | 'fontSize'\n  | 'fontSizeAdjust'\n  | 'fontStretch'\n  | 'fontStyle'\n  | 'fontSynthesis'\n  | 'fontVariant'\n  | 'fontVariantAlternates'\n  | 'fontVariantCaps'\n  | 'fontVariantLigatures'\n  | 'fontVariantNumeric'\n  | 'fontVariantPosition'\n  | 'fontVariationSettings'\n  | 'fontWeight'\n  | 'hangingPunctuation'\n  | 'hypens'\n  | 'hyphenateCharacter'\n  | 'hyphenateLimitChars'\n  | 'letterSpacing'\n  | 'lineBreak'\n  | 'lineHeight'\n  | 'quotes'\n  | 'overflowWrap'\n  | 'tabSize'\n  | 'textAlign'\n  | 'textAlignLast'\n  | 'textCombineUpright'\n  | 'textDecoration'\n  | 'textDecorationColor'\n  | 'textDecorationLine'\n  | 'textDecorationSkip'\n  | 'textDecorationSkipBox'\n  | 'textDecorationSkipInk'\n  | 'textDecorationSkipInset'\n  | 'textDecorationStyle'\n  | 'textDecorationThickness'\n  | 'textEmphasis'\n  | 'textEmphasisColor'\n  | 'textEmphasisPosition'\n  | 'textEmphasisStyle'\n  | 'textIndent'\n  | 'textJustify'\n  | 'textOrientation'\n  | 'textOverflow'\n  | 'textRendering'\n  | 'textShadow'\n  | 'textStroke'\n  | 'textStrokeColor'\n  | 'textStrokeWidth'\n  | 'textTransform'\n  | 'textUnderlineOffset'\n  | 'textUnderlinePosition'\n  | 'textWrap'\n  | 'textWrapMode'\n  | 'textWrapStyle'\n  | 'unicodeBidi'\n  | 'verticalAlign'\n  | 'whiteSpace'\n  | 'wordBreak'\n  | 'wordSpacing'\n  | 'writingMode'\n\nexport type TextStyle = CompositionStyleObject<TextStyleProperty>\n\nexport type TextStyles = Recursive<Token<TextStyle>>\n\n/* -----------------------------------------------------------------------------\n * Layer styles\n * -----------------------------------------------------------------------------*/\n\ntype LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'\n\ntype PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'\n\ntype Placement = PhysicalPlacement | LogicalPlacement\n\ntype Radius =\n  | `Top${'Right' | 'Left'}`\n  | `Bottom${'Right' | 'Left'}`\n  | `Start${'Start' | 'End'}`\n  | `End${'Start' | 'End'}`\n\ntype LayerStyleProperty =\n  | 'aspectRatio'\n  | 'background'\n  | 'backgroundColor'\n  | 'backgroundImage'\n  | 'border'\n  | 'borderColor'\n  | 'borderImage'\n  | 'borderImageOutset'\n  | 'borderImageRepeat'\n  | 'borderImageSlice'\n  | 'borderImageSource'\n  | 'borderImageWidth'\n  | 'borderRadius'\n  | 'borderStyle'\n  | 'borderWidth'\n  | `border${Placement}`\n  | `border${Placement}Color`\n  | `border${Placement}Style`\n  | `border${Placement}Width`\n  | 'borderRadius'\n  | `border${Radius}Radius`\n  | 'boxShadow'\n  | 'boxShadowColor'\n  | 'clipPath'\n  | 'color'\n  | 'contain'\n  | 'content'\n  | 'contentVisibility'\n  | 'cursor'\n  | 'display'\n  | 'filter'\n  | 'backdropFilter'\n  | 'height'\n  | 'width'\n  | 'minHeight'\n  | 'minWidth'\n  | 'maxHeight'\n  | 'maxWidth'\n  | `margin${Placement}`\n  | 'inset'\n  | `inset${LogicalPlacement}`\n  | Lowercase<PhysicalPlacement>\n  | 'isolation'\n  | 'mask'\n  | 'maskClip'\n  | 'maskComposite'\n  | 'maskImage'\n  | 'maskMode'\n  | 'maskOrigin'\n  | 'maskPosition'\n  | 'maskRepeat'\n  | 'maskSize'\n  | 'mixBlendMode'\n  | 'objectFit'\n  | 'objectPosition'\n  | 'opacity'\n  | 'outline'\n  | 'outlineColor'\n  | 'outlineOffset'\n  | 'outlineStyle'\n  | 'outlineWidth'\n  | 'overflow'\n  | 'overflowX'\n  | 'overflowY'\n  | 'padding'\n  | `padding${Placement}`\n  | 'pointerEvents'\n  | 'position'\n  | 'resize'\n  | 'transform'\n  | 'transition'\n  | 'visibility'\n  | 'willChange'\n  | 'zIndex'\n  | 'backgroundBlendMode'\n  | 'backgroundAttachment'\n  | 'backgroundClip'\n  | 'backgroundOrigin'\n  | 'backgroundPosition'\n  | 'backgroundRepeat'\n  | 'backgroundSize'\n\nexport type LayerStyle = CompositionStyleObject<LayerStyleProperty>\n\nexport type LayerStyles = Recursive<Token<LayerStyle>>\n\n/* -----------------------------------------------------------------------------\n * Motion styles\n * -----------------------------------------------------------------------------*/\n\ntype AnimationStyleProperty =\n  | 'animation'\n  | 'animationComposition'\n  | 'animationDelay'\n  | 'animationDirection'\n  | 'animationDuration'\n  | 'animationFillMode'\n  | 'animationIterationCount'\n  | 'animationName'\n  | 'animationPlayState'\n  | 'animationTimingFunction'\n  | 'animationRange'\n  | 'animationRangeStart'\n  | 'animationRangeEnd'\n  | 'animationTimeline'\n  | 'transformOrigin'\n\nexport type AnimationStyle = CompositionStyleObject<AnimationStyleProperty>\n\nexport type AnimationStyles = Recursive<Token<AnimationStyle>>\n\nexport interface CompositionStyles {\n  textStyles: TextStyles\n  layerStyles: LayerStyles\n  animationStyles: AnimationStyles\n}\n"
 };
 
 // src/artifacts/generated/csstype.d.ts.json