fix(style-context): root provider types

Author: segunadebayo

.changeset/fix-root-provider-jsx-props.md

@@ -0,0 +1,5 @@
+---
+"@pandacss/generator": patch
+---
+
+Fix type issue where `withRootProvider` from style context incorrectly allowed JSX style props to be passed through to the root component. The root provider now correctly accepts only component props, unstyled prop, and recipe variant props, excluding JSX style props.

packages/generator/src/artifacts/preact-jsx/create-style-context.ts

@@ -140,7 +140,11 @@ export function generatePreactCreateStyleContext(ctx: Context) {
     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>
     >
@@ -149,7 +153,7 @@ export function generatePreactCreateStyleContext(ctx: Context) {
       withRootProvider: <T extends ElementType>(
         Component: T,
         options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,

packages/generator/src/artifacts/react-jsx/create-style-context.ts

@@ -141,6 +141,10 @@ export function generateReactCreateStyleContext(ctx: Context) {
     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>
@@ -150,7 +154,7 @@ export function generateReactCreateStyleContext(ctx: Context) {
       withRootProvider: <T extends ElementType>(
         Component: T,
         options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,

packages/generator/src/artifacts/solid-jsx/create-style-context.ts

@@ -162,7 +162,11 @@ export function generateSolidCreateStyleContext(ctx: Context) {
     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>
     >
@@ -171,7 +175,7 @@ export function generateSolidCreateStyleContext(ctx: Context) {
       withRootProvider: <T extends ElementType>(
         Component: T,
         options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,

packages/generator/src/artifacts/vue-jsx/create-style-context.ts

@@ -177,7 +177,11 @@ export function generateVueCreateStyleContext(ctx: Context) {
     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>
     >
@@ -186,7 +190,7 @@ export function generateVueCreateStyleContext(ctx: Context) {
       withRootProvider: <T extends ElementType>(
         Component: T,
         options?: WithProviderOptions<ComponentProps<T>> | undefined
-      ) => StyleContextProvider<T, R>
+      ) => StyleContextRootProvider<T, R>
       withProvider: <T extends ElementType>(
         Component: T,
         slot: InferSlot<R>,

packages/studio/styled-system/jsx/create-style-context.d.ts

@@ -30,6 +30,10 @@ type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = Compone
   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>
 >
@@ -38,7 +42,7 @@ export interface StyleContext<R extends SlotRecipe> {
   withRootProvider: <T extends ElementType>(
     Component: T,
     options?: WithProviderOptions<ComponentProps<T>> | undefined
-  ) => StyleContextProvider<T, R>
+  ) => StyleContextRootProvider<T, R>
   withProvider: <T extends ElementType>(
     Component: T,
     slot: InferSlot<R>,