@pandacss/studio 0.8.0 → 0.10.0

package/styled-system/jsx/link-box.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getLinkBoxStyle } from '../patterns/link-box.mjs'
 
-export const LinkBox = forwardRef(function LinkBox(props, ref) {
+export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) {
   const styleProps = getLinkBoxStyle()
   return createElement(panda.div, { ref, ...styleProps, ...props })
 })

package/styled-system/jsx/link-overlay.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs'
 
-export const LinkOverlay = forwardRef(function LinkOverlay(props, ref) {
+export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
   const styleProps = getLinkOverlayStyle()
   return createElement(panda.a, { ref, ...styleProps, ...props })
 })

package/styled-system/jsx/spacer.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getSpacerStyle } from '../patterns/spacer.mjs'
 
-export const Spacer = forwardRef(function Spacer(props, ref) {
+export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
   const { size, ...restProps } = props
   const styleProps = getSpacerStyle({ size })
   return createElement(panda.div, { ref, ...styleProps, ...restProps })

package/styled-system/jsx/square.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getSquareStyle } from '../patterns/square.mjs'
 
-export const Square = forwardRef(function Square(props, ref) {
+export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
   const { size, ...restProps } = props
   const styleProps = getSquareStyle({ size })
   return createElement(panda.div, { ref, ...styleProps, ...restProps })

package/styled-system/jsx/stack.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getStackStyle } from '../patterns/stack.mjs'
 
-export const Stack = forwardRef(function Stack(props, ref) {
+export const Stack = /* @__PURE__ */ forwardRef(function Stack(props, ref) {
   const { align, justify, direction, gap, ...restProps } = props
   const styleProps = getStackStyle({ align, justify, direction, gap })
   return createElement(panda.div, { ref, ...styleProps, ...restProps })

package/styled-system/jsx/styled-link.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getStyledLinkStyle } from '../patterns/styled-link.mjs'
 
-export const StyledLink = forwardRef(function StyledLink(props, ref) {
+export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) {
   const styleProps = getStyledLinkStyle()
   return createElement(panda.div, { ref, ...styleProps, ...props })
 })

package/styled-system/jsx/vstack.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getVstackStyle } from '../patterns/vstack.mjs'
 
-export const VStack = forwardRef(function VStack(props, ref) {
+export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
   const { justify, gap, ...restProps } = props
   const styleProps = getVstackStyle({ justify, gap })
   return createElement(panda.div, { ref, ...styleProps, ...restProps })

package/styled-system/jsx/wrap.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getWrapStyle } from '../patterns/wrap.mjs'
 
-export const Wrap = forwardRef(function Wrap(props, ref) {
+export const Wrap = /* @__PURE__ */ forwardRef(function Wrap(props, ref) {
   const { gap, rowGap, columnGap, align, justify, ...restProps } = props
   const styleProps = getWrapStyle({ gap, rowGap, columnGap, align, justify })
   return createElement(panda.div, { ref, ...styleProps, ...restProps })

package/styled-system/tokens/index.css

@@ -414,7 +414,7 @@
     --colors-neutral-800: #262626;
     --colors-neutral-900: #171717;
     --colors-neutral-950: #0a0a0a;
-    --assets-check: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A);
+    --assets-check: url('data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A');
     --breakpoints-sm: 640px;
     --breakpoints-md: 768px;
     --breakpoints-lg: 1024px;

package/styled-system/tokens/index.mjs

@@ -1654,7 +1654,7 @@ const tokens = {
   },
   'assets.check': {
     value:
-      'url(data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A)',
+      "url('data:image/svg+xml;utf8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200H3V3H0V0Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M3%200H6V3H3V0Z%22%20fill%3D%22white%22/%3E%3Cpath%20d%3D%22M3%203H6V6H3V3Z%22%20fill%3D%22%23E1E1E1%22/%3E%3Cpath%20d%3D%22M0%203H3V6H0V3Z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A')",
     variable: 'var(--assets-check)',
   },
   'breakpoints.sm': {

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

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import type { RecipeVariantRecord, RecipeConfig } from './recipe'
+import type { RecipeVariantRecord, RecipeConfig, SlotRecipeVariantRecord, SlotRecipeConfig } from './recipe'
 import type { Parts } from './parts'
 import type { PatternConfig, PatternProperties } from './pattern'
 import type { GlobalStyleObject, SystemStyleObject } from './system-types'
@@ -7,10 +7,11 @@ import type { CompositionStyles } from './composition'
 
 declare module '@pandacss/dev' {
   export function defineRecipe<V extends RecipeVariantRecord>(config: RecipeConfig<V>): RecipeConfig
+  export function defineSlotRecipe<S extends string, V extends SlotRecipeVariantRecord<S>>(config: SlotRecipeConfig<S, V>): SlotRecipeConfig
   export function defineStyles(definition: SystemStyleObject): SystemStyleObject
   export function defineGlobalStyles(definition: GlobalStyleObject): GlobalStyleObject
   export function defineTextStyles(definition: CompositionStyles['textStyles']): CompositionStyles['textStyles']
   export function defineLayerStyles(definition: CompositionStyles['layerStyles']): CompositionStyles['layerStyles']
   export function definePattern<T extends PatternProperties>(config: PatternConfig<T>): PatternConfig
-  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>;
+  export function defineParts<T extends Parts>(parts: T): (config: Partial<Record<keyof T, SystemStyleObject>>) => Partial<Record<keyof T, SystemStyleObject>>
 }

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

@@ -40,7 +40,14 @@ export type PatternConfig<T extends PatternProperties = PatternProperties> = {
   /**
    * The jsx element name this pattern will generate.
    */
-  jsx?: string
+  jsxName?: string
+  /**
+   * The jsx elements to track for this pattern. Can be string or Regexp.
+   *
+   * @default capitalize(pattern.name)
+   * @example ['Button', 'Link', /Button$/]
+   */
+  jsx?: Array<string | RegExp>
   /**
    * Whether to only generate types for the specified properties.
    * This will disallow css properties

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

@@ -125,10 +125,12 @@ type PropertyValueTypes  = {
 	borderLeft: Tokens["borders"];
 	borderLeftColor: Tokens["colors"];
 	borderInlineStart: Tokens["borders"];
+	borderInlineStartWidth: Tokens["borderWidths"];
 	borderInlineStartColor: Tokens["colors"];
 	borderRight: Tokens["borders"];
 	borderRightColor: Tokens["colors"];
 	borderInlineEnd: Tokens["borders"];
+	borderInlineEndWidth: Tokens["borderWidths"];
 	borderInlineEndColor: Tokens["colors"];
 	borderTop: Tokens["borders"];
 	borderTopColor: Tokens["colors"];
@@ -138,6 +140,7 @@ type PropertyValueTypes  = {
 	borderBlockEndColor: Tokens["colors"];
 	borderBlockStart: Tokens["borders"];
 	borderBlockStartColor: Tokens["colors"];
+	opacity: Tokens["opacity"];
 	boxShadow: Tokens["shadows"];
 	boxShadowColor: Tokens["colors"];
 	filter: "auto";
@@ -287,8 +290,10 @@ type PropertyValueTypes  = {
 	borderYWidth: Shorthand<"borderBlockWidth">;
 	borderYColor: Shorthand<"borderBlockColor">;
 	borderStart: Shorthand<"borderInlineStart">;
+	borderStartWidth: Shorthand<"borderInlineStartWidth">;
 	borderStartColor: Shorthand<"borderInlineStartColor">;
 	borderEnd: Shorthand<"borderInlineEnd">;
+	borderEndWidth: Shorthand<"borderInlineEndWidth">;
 	borderEndColor: Shorthand<"borderInlineEndColor">;
 	shadow: Shorthand<"boxShadow">;
 	shadowColor: Shorthand<"boxShadowColor">;

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

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SystemStyleObject } from './system-types'
 
-type Pretty<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
+type Pretty<T> = { [K in keyof T]: T[K] } & {}
 
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T
 
@@ -15,12 +15,18 @@ export type RecipeSelection<T extends RecipeVariantRecord> = keyof any extends k
 
 export type RecipeVariantFn<T extends RecipeVariantRecord> = (props?: RecipeSelection<T>) => string
 
-export type RecipeVariantProps<T extends RecipeVariantFn<RecipeVariantRecord>> = Pretty<Parameters<T>[0]>
+export type RecipeVariantProps<
+  T extends RecipeVariantFn<RecipeVariantRecord> | SlotRecipeVariantFn<string, SlotRecipeVariantRecord<string>>,
+> = Pretty<Parameters<T>[0]>
 
 type RecipeVariantMap<T extends RecipeVariantRecord> = {
   [K in keyof T]: Array<keyof T[K]>
 }
 
+/* -----------------------------------------------------------------------------
+ * Recipe / Standard
+ * -----------------------------------------------------------------------------*/
+
 export type RecipeRuntimeFn<T extends RecipeVariantRecord> = RecipeVariantFn<T> & {
   __type: RecipeSelection<T>
   variantKeys: (keyof T)[]
@@ -59,11 +65,11 @@ export type RecipeDefinition<T extends RecipeVariantRecord> = {
 
 export type RecipeCreatorFn = <T extends RecipeVariantRecord>(config: RecipeDefinition<T>) => RecipeRuntimeFn<T>
 
-export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & {
+type RecipeConfigMeta = {
   /**
    * The name of the recipe.
    */
-  name: string
+  className: string
   /**
    * The description of the recipe. This will be used in the JSDoc comment.
    */
@@ -76,3 +82,59 @@ export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> =
    */
   jsx?: Array<string | RegExp>
 }
+
+export type RecipeConfig<T extends RecipeVariantRecord = RecipeVariantRecord> = RecipeDefinition<T> & RecipeConfigMeta
+
+/* -----------------------------------------------------------------------------
+ * Recipe / Slot
+ * -----------------------------------------------------------------------------*/
+
+type SlotRecord<S extends string, T> = Partial<Record<S, T>>
+
+export type SlotRecipeVariantRecord<S extends string> = Record<any, Record<any, SlotRecord<S, SystemStyleObject>>>
+
+export type SlotRecipeVariantFn<S extends string, T extends RecipeVariantRecord> = (
+  props?: RecipeSelection<T>,
+) => SlotRecord<S, string>
+
+export type SlotRecipeRuntimeFn<S extends string, T extends SlotRecipeVariantRecord<S>> = SlotRecipeVariantFn<S, T> & {
+  variantKeys: (keyof T)[]
+  variantMap: RecipeVariantMap<T>
+  splitVariantProps<Props extends RecipeSelection<T>>(props: Props): [RecipeSelection<T>, Pretty<Omit<Props, keyof T>>]
+}
+
+export type SlotRecipeCompoundVariant<S extends string, T extends RecipeVariantRecord> = RecipeCompoundSelection<T> & {
+  css: SlotRecord<S, SystemStyleObject>
+}
+
+export type SlotRecipeDefinition<S extends string, T extends SlotRecipeVariantRecord<S>> = {
+  /**
+   * The parts/slots of the recipe.
+   */
+  slots: S[] | Readonly<S[]>
+  /**
+   * The base styles of the recipe.
+   */
+  base?: SlotRecord<S, SystemStyleObject>
+  /**
+   * The multi-variant styles of the recipe.
+   */
+  variants?: T | SlotRecipeVariantRecord<S>
+  /**
+   * The default variants of the recipe.
+   */
+  defaultVariants?: RecipeSelection<T>
+  /**
+   * The styles to apply when a combination of variants is selected.
+   */
+  compoundVariants?: Array<SlotRecipeCompoundVariant<S, T>>
+}
+
+export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(
+  config: SlotRecipeDefinition<S, T>,
+) => SlotRecipeRuntimeFn<S, T>
+
+export type SlotRecipeConfig<
+  S extends string = string,
+  T extends SlotRecipeVariantRecord<S> = SlotRecipeVariantRecord<S>,
+> = SlotRecipeDefinition<S, T> & RecipeConfigMeta

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

@@ -8,78 +8,7 @@ export type CssVarProperties = {
 }
 
 export type SystemProperties = {
-  	MsAccelerator?: PropertyValue<'MsAccelerator'>
-	MsBlockProgression?: PropertyValue<'MsBlockProgression'>
-	MsContentZoomChaining?: PropertyValue<'MsContentZoomChaining'>
-	MsContentZooming?: PropertyValue<'MsContentZooming'>
-	MsContentZoomLimit?: PropertyValue<'MsContentZoomLimit'>
-	MsContentZoomLimitMax?: PropertyValue<'MsContentZoomLimitMax'>
-	MsContentZoomLimitMin?: PropertyValue<'MsContentZoomLimitMin'>
-	MsContentZoomSnap?: PropertyValue<'MsContentZoomSnap'>
-	MsContentZoomSnapPoints?: PropertyValue<'MsContentZoomSnapPoints'>
-	MsContentZoomSnapType?: PropertyValue<'MsContentZoomSnapType'>
-	MsFilter?: PropertyValue<'MsFilter'>
-	MsFlowFrom?: PropertyValue<'MsFlowFrom'>
-	MsFlowInto?: PropertyValue<'MsFlowInto'>
-	MsGridColumns?: PropertyValue<'MsGridColumns'>
-	MsGridRows?: PropertyValue<'MsGridRows'>
-	MsHighContrastAdjust?: PropertyValue<'MsHighContrastAdjust'>
-	MsHyphenateLimitChars?: PropertyValue<'MsHyphenateLimitChars'>
-	MsHyphenateLimitLines?: PropertyValue<'MsHyphenateLimitLines'>
-	MsHyphenateLimitZone?: PropertyValue<'MsHyphenateLimitZone'>
-	MsImeAlign?: PropertyValue<'MsImeAlign'>
-	MsOverflowStyle?: PropertyValue<'MsOverflowStyle'>
-	MsScrollbar3dlightColor?: PropertyValue<'MsScrollbar3dlightColor'>
-	MsScrollbarArrowColor?: PropertyValue<'MsScrollbarArrowColor'>
-	MsScrollbarBaseColor?: PropertyValue<'MsScrollbarBaseColor'>
-	MsScrollbarDarkshadowColor?: PropertyValue<'MsScrollbarDarkshadowColor'>
-	MsScrollbarFaceColor?: PropertyValue<'MsScrollbarFaceColor'>
-	MsScrollbarHighlightColor?: PropertyValue<'MsScrollbarHighlightColor'>
-	MsScrollbarShadowColor?: PropertyValue<'MsScrollbarShadowColor'>
-	MsScrollbarTrackColor?: PropertyValue<'MsScrollbarTrackColor'>
-	MsScrollChaining?: PropertyValue<'MsScrollChaining'>
-	MsScrollLimit?: PropertyValue<'MsScrollLimit'>
-	MsScrollLimitXMax?: PropertyValue<'MsScrollLimitXMax'>
-	MsScrollLimitXMin?: PropertyValue<'MsScrollLimitXMin'>
-	MsScrollLimitYMax?: PropertyValue<'MsScrollLimitYMax'>
-	MsScrollLimitYMin?: PropertyValue<'MsScrollLimitYMin'>
-	MsScrollRails?: PropertyValue<'MsScrollRails'>
-	MsScrollSnapPointsX?: PropertyValue<'MsScrollSnapPointsX'>
-	MsScrollSnapPointsY?: PropertyValue<'MsScrollSnapPointsY'>
-	MsScrollSnapType?: PropertyValue<'MsScrollSnapType'>
-	MsScrollSnapX?: PropertyValue<'MsScrollSnapX'>
-	MsScrollSnapY?: PropertyValue<'MsScrollSnapY'>
-	MsScrollTranslation?: PropertyValue<'MsScrollTranslation'>
-	MsTextAutospace?: PropertyValue<'MsTextAutospace'>
-	MsTouchSelect?: PropertyValue<'MsTouchSelect'>
-	MsUserSelect?: PropertyValue<'MsUserSelect'>
-	MsWrapFlow?: PropertyValue<'MsWrapFlow'>
-	MsWrapMargin?: PropertyValue<'MsWrapMargin'>
-	MsWrapThrough?: PropertyValue<'MsWrapThrough'>
-	MozAppearance?: PropertyValue<'MozAppearance'>
-	MozBinding?: PropertyValue<'MozBinding'>
-	MozBorderBottomColors?: PropertyValue<'MozBorderBottomColors'>
-	MozBorderLeftColors?: PropertyValue<'MozBorderLeftColors'>
-	MozBorderRightColors?: PropertyValue<'MozBorderRightColors'>
-	MozBorderTopColors?: PropertyValue<'MozBorderTopColors'>
-	MozContextProperties?: PropertyValue<'MozContextProperties'>
-	MozFloatEdge?: PropertyValue<'MozFloatEdge'>
-	MozForceBrokenImageIcon?: PropertyValue<'MozForceBrokenImageIcon'>
-	MozImageRegion?: PropertyValue<'MozImageRegion'>
-	MozOrient?: PropertyValue<'MozOrient'>
-	MozOutlineRadius?: PropertyValue<'MozOutlineRadius'>
-	MozOutlineRadiusBottomleft?: PropertyValue<'MozOutlineRadiusBottomleft'>
-	MozOutlineRadiusBottomright?: PropertyValue<'MozOutlineRadiusBottomright'>
-	MozOutlineRadiusTopleft?: PropertyValue<'MozOutlineRadiusTopleft'>
-	MozOutlineRadiusTopright?: PropertyValue<'MozOutlineRadiusTopright'>
-	MozStackSizing?: PropertyValue<'MozStackSizing'>
-	MozTextBlink?: PropertyValue<'MozTextBlink'>
-	MozUserFocus?: PropertyValue<'MozUserFocus'>
-	MozUserInput?: PropertyValue<'MozUserInput'>
-	MozUserModify?: PropertyValue<'MozUserModify'>
-	MozWindowDragging?: PropertyValue<'MozWindowDragging'>
-	MozWindowShadow?: PropertyValue<'MozWindowShadow'>
-	WebkitAppearance?: PropertyValue<'WebkitAppearance'>
+  	WebkitAppearance?: PropertyValue<'WebkitAppearance'>
 	WebkitBorderBefore?: PropertyValue<'WebkitBorderBefore'>
 	WebkitBorderBeforeColor?: PropertyValue<'WebkitBorderBeforeColor'>
 	WebkitBorderBeforeStyle?: PropertyValue<'WebkitBorderBeforeStyle'>
@@ -620,8 +549,10 @@ export type SystemProperties = {
 	borderYWidth?: PropertyValue<'borderYWidth'>
 	borderYColor?: PropertyValue<'borderYColor'>
 	borderStart?: PropertyValue<'borderStart'>
+	borderStartWidth?: PropertyValue<'borderStartWidth'>
 	borderStartColor?: PropertyValue<'borderStartColor'>
 	borderEnd?: PropertyValue<'borderEnd'>
+	borderEndWidth?: PropertyValue<'borderEndWidth'>
 	borderEndColor?: PropertyValue<'borderEndColor'>
 	shadow?: PropertyValue<'shadow'>
 	shadowColor?: PropertyValue<'shadowColor'>

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

@@ -51,11 +51,10 @@ export type CompositionStyleObject<Property extends string> = Nested<{
 /* -----------------------------------------------------------------------------
  * Jsx style props
  * -----------------------------------------------------------------------------*/
+type WithCss = { css?: SystemStyleObject }
+type StyleProps = SystemProperties & MinimalNested<SystemStyleObject>
 
-export type JsxStyleProps = SystemProperties &
-  MinimalNested<SystemStyleObject> & {
-    css?: SystemStyleObject
-  }
+export type JsxStyleProps = StyleProps & WithCss
 
 export type Assign<T, U> = Omit<T, keyof U> & U