@pandacss/studio 1.2.0 → 1.3.1

package/dist/studio.d.mts

@@ -1,9 +1,9 @@
 interface BuildOpts {
     outDir: string;
     configPath: string;
-    port?: string;
-    host?: boolean;
-    base?: string;
+    port?: string | undefined;
+    host?: boolean | undefined;
+    base?: string | undefined;
 }
 declare function buildStudio({ outDir, configPath, base }: BuildOpts): Promise<void>;
 declare function serveStudio({ configPath, port, host, outDir, base }: BuildOpts): Promise<void>;

package/dist/studio.d.ts

@@ -1,9 +1,9 @@
 interface BuildOpts {
     outDir: string;
     configPath: string;
-    port?: string;
-    host?: boolean;
-    base?: string;
+    port?: string | undefined;
+    host?: boolean | undefined;
+    base?: string | undefined;
 }
 declare function buildStudio({ outDir, configPath, base }: BuildOpts): Promise<void>;
 declare function serveStudio({ configPath, port, host, outDir, base }: BuildOpts): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "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.2.0",
-    "@pandacss/logger": "1.2.0",
-    "@pandacss/shared": "1.2.0",
-    "@pandacss/token-dictionary": "1.2.0",
-    "@pandacss/types": "1.2.0",
-    "@pandacss/astro-plugin-studio": "1.2.0"
+    "@pandacss/config": "1.3.1",
+    "@pandacss/logger": "1.3.1",
+    "@pandacss/shared": "1.3.1",
+    "@pandacss/token-dictionary": "1.3.1",
+    "@pandacss/types": "1.3.1",
+    "@pandacss/astro-plugin-studio": "1.3.1"
   },
   "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/jsx/factory.mjs

@@ -57,7 +57,7 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
       ...elementProps,
       ...normalizeHTMLProps(htmlProps),
       className: classes(),
-    }, combinedProps.children ?? children)
+    }, children ?? combinedProps.children)
   })
 
   const name = getDisplayName(__base__)

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

@@ -15,6 +15,8 @@ interface Recursive<T> {
  * -----------------------------------------------------------------------------*/
 
 type TextStyleProperty =
+  | 'color'
+  | 'direction'
   | 'font'
   | 'fontFamily'
   | 'fontFeatureSettings'
@@ -35,6 +37,7 @@ type TextStyleProperty =
   | 'fontVariantPosition'
   | 'fontVariationSettings'
   | 'fontWeight'
+  | 'hangingPunctuation'
   | 'hypens'
   | 'hyphenateCharacter'
   | 'hyphenateLimitChars'
@@ -43,11 +46,17 @@ type TextStyleProperty =
   | 'lineHeight'
   | 'quotes'
   | 'overflowWrap'
+  | 'tabSize'
+  | 'textAlign'
+  | 'textAlignLast'
   | 'textCombineUpright'
   | 'textDecoration'
   | 'textDecorationColor'
   | 'textDecorationLine'
+  | 'textDecorationSkip'
+  | 'textDecorationSkipBox'
   | 'textDecorationSkipInk'
+  | 'textDecorationSkipInset'
   | 'textDecorationStyle'
   | 'textDecorationThickness'
   | 'textEmphasis'
@@ -60,16 +69,21 @@ type TextStyleProperty =
   | 'textOverflow'
   | 'textRendering'
   | 'textShadow'
+  | 'textStroke'
+  | 'textStrokeColor'
+  | 'textStrokeWidth'
   | 'textTransform'
   | 'textUnderlineOffset'
   | 'textUnderlinePosition'
   | 'textWrap'
   | 'textWrapMode'
   | 'textWrapStyle'
+  | 'unicodeBidi'
   | 'verticalAlign'
   | 'whiteSpace'
   | 'wordBreak'
   | 'wordSpacing'
+  | 'writingMode'
 
 export type TextStyle = CompositionStyleObject<TextStyleProperty>
 
@@ -79,17 +93,11 @@ export type TextStyles = Recursive<Token<TextStyle>>
  * Layer styles
  * -----------------------------------------------------------------------------*/
 
-type Placement =
-  | 'Top'
-  | 'Right'
-  | 'Bottom'
-  | 'Left'
-  | 'Inline'
-  | 'Block'
-  | 'InlineStart'
-  | 'InlineEnd'
-  | 'BlockStart'
-  | 'BlockEnd'
+type LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'
+
+type PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'
+
+type Placement = PhysicalPlacement | LogicalPlacement
 
 type Radius =
   | `Top${'Right' | 'Left'}`
@@ -98,20 +106,80 @@ type Radius =
   | `End${'Start' | 'End'}`
 
 type LayerStyleProperty =
+  | 'aspectRatio'
   | 'background'
   | 'backgroundColor'
   | 'backgroundImage'
-  | 'borderRadius'
   | 'border'
-  | 'borderWidth'
   | 'borderColor'
+  | 'borderImage'
+  | 'borderImageOutset'
+  | 'borderImageRepeat'
+  | 'borderImageSlice'
+  | 'borderImageSource'
+  | 'borderImageWidth'
+  | 'borderRadius'
   | 'borderStyle'
+  | 'borderWidth'
+  | `border${Placement}`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
   | 'boxShadow'
+  | 'boxShadowColor'
+  | 'clipPath'
+  | 'color'
+  | 'contain'
+  | 'content'
+  | 'contentVisibility'
+  | 'cursor'
+  | 'display'
   | 'filter'
   | 'backdropFilter'
-  | 'transform'
-  | 'color'
+  | 'height'
+  | 'width'
+  | 'minHeight'
+  | 'minWidth'
+  | 'maxHeight'
+  | 'maxWidth'
+  | `margin${Placement}`
+  | 'inset'
+  | `inset${LogicalPlacement}`
+  | Lowercase<PhysicalPlacement>
+  | 'isolation'
+  | 'mask'
+  | 'maskClip'
+  | 'maskComposite'
+  | 'maskImage'
+  | 'maskMode'
+  | 'maskOrigin'
+  | 'maskPosition'
+  | 'maskRepeat'
+  | 'maskSize'
+  | 'mixBlendMode'
+  | 'objectFit'
+  | 'objectPosition'
   | 'opacity'
+  | 'outline'
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'outlineStyle'
+  | 'outlineWidth'
+  | 'overflow'
+  | 'overflowX'
+  | 'overflowY'
+  | 'padding'
+  | `padding${Placement}`
+  | 'pointerEvents'
+  | 'position'
+  | 'resize'
+  | 'transform'
+  | 'transition'
+  | 'visibility'
+  | 'willChange'
+  | 'zIndex'
   | 'backgroundBlendMode'
   | 'backgroundAttachment'
   | 'backgroundClip'
@@ -119,14 +187,6 @@ type LayerStyleProperty =
   | 'backgroundPosition'
   | 'backgroundRepeat'
   | 'backgroundSize'
-  | `border${Placement}`
-  | `border${Placement}Width`
-  | 'borderRadius'
-  | `border${Radius}Radius`
-  | `border${Placement}Color`
-  | `border${Placement}Style`
-  | 'padding'
-  | `padding${Placement}`
 
 export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
 

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';
 
@@ -14,27 +14,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 PandaComponent<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 PandaComponent<infer A, infer B>
   ? PandaComponent<A, Pretty<DistributiveUnion<P, B>>>
@@ -55,6 +62,6 @@ export type JsxElements = {
 
 export type Panda = JsxFactory & JsxElements
 
-export type HTMLPandaProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+export type HTMLPandaProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type PandaVariantProps<T extends PandaComponent<any, any>> = T extends PandaComponent<any, infer Props> ? Props : never

package/styled-system/types/prop-type.d.ts

@@ -150,7 +150,8 @@ export interface UtilityValues {
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
 	animationName: "spin" | "ping" | "pulse" | "bounce";
 	animationTimingFunction: Tokens["easings"];

package/styled-system/types/style-props.d.ts

@@ -5907,7 +5907,7 @@ transitionDuration?: ConditionalValue<UtilityValues["transitionDuration"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
    */
-transitionProperty?: ConditionalValue<CssProperties["transitionProperty"] | AnyString>
+transitionProperty?: ConditionalValue<UtilityValues["transitionProperty"] | CssVars | CssProperties["transitionProperty"] | AnyString>
  /**
    * The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
    *

package/tsconfig.json

@@ -1,8 +1,24 @@
 {
-  "extends": "astro/tsconfigs/strict",
-  "include": ["src", "__tests__"],
+  "include": ["src", "__tests__", "astro.config.mjs"],
   "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["ES2022"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noEmit": true,
     "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // "exactOptionalPropertyTypes": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "allowJs": true,
     "customConditions": ["source"]
   }
 }