@pandacss/studio 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,12 +48,12 @@
     "react": "19.1.1",
     "react-dom": "19.1.1",
     "vite": "7.0.6",
-    "@pandacss/config": "1.3.0",
-    "@pandacss/logger": "1.3.0",
-    "@pandacss/shared": "1.3.0",
-    "@pandacss/token-dictionary": "1.3.0",
-    "@pandacss/types": "1.3.0",
-    "@pandacss/astro-plugin-studio": "1.3.0"
+    "@pandacss/config": "1.4.0",
+    "@pandacss/logger": "1.4.0",
+    "@pandacss/shared": "1.4.0",
+    "@pandacss/token-dictionary": "1.4.0",
+    "@pandacss/types": "1.4.0",
+    "@pandacss/astro-plugin-studio": "1.4.0"
   },
   "devDependencies": {
     "@types/react": "18.2.55",

package/styled-system/jsx/create-style-context.d.ts

@@ -1,11 +1,11 @@
 /* eslint-disable */
 import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
 import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
-import type { JsxFactoryOptions } from '../types/jsx';
-import type { ComponentType, ElementType, ComponentPropsWithoutRef, ElementRef, Ref } from 'react'
+import type { JsxFactoryOptions, ComponentProps } from '../types/jsx';
+import type { ComponentType, ElementType } from 'react'
 
 interface UnstyledProps {
-  unstyled?: boolean
+  unstyled?: boolean | undefined
 }
 
 type SvaFn<S extends string = any> = SlotRecipeRuntimeFn<S, any>
@@ -18,29 +18,36 @@ type SlotRecipe = SvaFn | SlotRecipeFn
 
 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>
 }
 

package/styled-system/jsx/create-style-context.mjs

@@ -19,16 +19,20 @@ export function createStyleContext(recipe) {
     return { ...slotStyles, ...restProps }
   }
 
-  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)
       })
     }
     

package/styled-system/patterns/grid.mjs

@@ -15,7 +15,7 @@ transform(props, { map, isCssUnit }) {
   };
 },
 defaultValues(props) {
-  return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
+  return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
 }}
 
 export const getGridStyle = (styles = {}) => {

package/styled-system/patterns/hstack.mjs

@@ -13,7 +13,7 @@ transform(props) {
     ...rest
   };
 },
-defaultValues:{gap:'10px'}}
+defaultValues:{gap:'8px'}}
 
 export const getHstackStyle = (styles = {}) => {
   const _styles = getPatternStyles(hstackConfig, styles)

package/styled-system/patterns/stack.mjs

@@ -13,7 +13,7 @@ transform(props) {
     ...rest
   };
 },
-defaultValues:{direction:'column',gap:'10px'}}
+defaultValues:{direction:'column',gap:'8px'}}
 
 export const getStackStyle = (styles = {}) => {
   const _styles = getPatternStyles(stackConfig, styles)

package/styled-system/patterns/vstack.mjs

@@ -13,7 +13,7 @@ transform(props) {
     ...rest
   };
 },
-defaultValues:{gap:'10px'}}
+defaultValues:{gap:'8px'}}
 
 export const getVstackStyle = (styles = {}) => {
   const _styles = getPatternStyles(vstackConfig, styles)

package/styled-system/patterns/wrap.mjs

@@ -3,7 +3,7 @@ import { css } from '../css/index.mjs';
 
 const wrapConfig = {
 transform(props) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
   return {
     display: "flex",
     flexWrap: "wrap",

package/styled-system/styles.css

@@ -355,6 +355,7 @@
     --spacing-2\.5: 0.625rem;
     --spacing-3\.5: 0.875rem;
     --spacing-4\.5: 1.125rem;
+    --spacing-5\.5: 1.375rem;
     --sizes-0: 0rem;
     --sizes-1: 0.25rem;
     --sizes-2: 0.5rem;
@@ -390,6 +391,7 @@
     --sizes-2\.5: 0.625rem;
     --sizes-3\.5: 0.875rem;
     --sizes-4\.5: 1.125rem;
+    --sizes-5\.5: 1.375rem;
     --sizes-xs: 20rem;
     --sizes-sm: 24rem;
     --sizes-md: 28rem;
@@ -742,8 +744,8 @@
     background: var(--colors-neutral-800);
 }
 
-  .gap_10px {
-    gap: 10px;
+  .gap_8px {
+    gap: 8px;
 }
 
   .flex_1 {

package/styled-system/tokens/index.mjs

@@ -471,6 +471,10 @@ const tokens = {
     "value": "1.125rem",
     "variable": "var(--spacing-4\\.5)"
   },
+  "spacing.5.5": {
+    "value": "1.375rem",
+    "variable": "var(--spacing-5\\.5)"
+  },
   "sizes.0": {
     "value": "0rem",
     "variable": "var(--sizes-0)"
@@ -611,6 +615,10 @@ const tokens = {
     "value": "1.125rem",
     "variable": "var(--sizes-4\\.5)"
   },
+  "sizes.5.5": {
+    "value": "1.375rem",
+    "variable": "var(--sizes-5\\.5)"
+  },
   "sizes.xs": {
     "value": "20rem",
     "variable": "var(--sizes-xs)"
@@ -1883,6 +1891,10 @@ const tokens = {
     "value": "calc(var(--spacing-4\\.5) * -1)",
     "variable": "var(--spacing-4\\.5)"
   },
+  "spacing.-5.5": {
+    "value": "calc(var(--spacing-5\\.5) * -1)",
+    "variable": "var(--spacing-5\\.5)"
+  },
   "colors.colorPalette": {
     "value": "var(--colors-color-palette)",
     "variable": "var(--colors-color-palette)"

package/styled-system/tokens/tokens.d.ts

@@ -27,9 +27,9 @@ export type ShadowToken = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "in
 
 export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
 
-export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5"
+export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5"
 
-export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
+export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
 
 export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 

package/styled-system/types/conditions.d.ts

@@ -46,7 +46,7 @@ export interface Conditions {
 	"_firstLetter": string
 	/** `&::first-line` */
 	"_firstLine": string
-	/** `&:is(::marker, ::-webkit-details-marker)` */
+	/** `&::marker, &::-webkit-details-marker` */
 	"_marker": string
 	/** `&::selection` */
 	"_selection": string

package/styled-system/types/jsx.d.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
+import type { ElementType, JSX, ComponentPropsWithRef, ComponentType, Component } from 'react'
 import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
 import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';
 
@@ -21,9 +21,9 @@ export interface AsProps {
   as?: ElementType | undefined
 }
 
-export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
-  ref?: Ref<ElementRef<T>>
-}
+export type ComponentProps<T extends ElementType> = T extends ComponentType<infer P> | Component<infer P>
+  ? JSX.LibraryManagedAttributes<T, P>
+  : ComponentPropsWithRef<T>
 
 export interface PandaComponent<T extends ElementType, P extends Dict = {}> {
   (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
@@ -34,7 +34,7 @@ interface RecipeFn {
   __type: any
 }
 
-interface JsxFactoryOptions<TProps extends Dict> {
+export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
   defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean