@pandacss/studio 0.38.0 → 0.39.0

package/package.json

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

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

@@ -1,9 +1,18 @@
 /* eslint-disable */
 import type { SystemStyleObject } from '../types/index';
 
+type Styles = SystemStyleObject | undefined | null | false
+
 interface CssFunction {
-  (...styles: Array<SystemStyleObject | undefined | null | false>): string
-  raw: (...styles: Array<SystemStyleObject | undefined | null | false>) => SystemStyleObject
+  (styles: Styles): string
+  (styles: Styles[]): string
+  (...styles: Array<Styles | Styles[]>): string
+  (styles: Styles): string
+
+  raw: (styles: Styles) => string
+  raw: (styles: Styles[]) => string
+  raw: (...styles: Array<Styles | Styles[]>) => string
+  raw: (styles: Styles) => string
 }
 
 export declare const css: CssFunction;

package/styled-system/helpers.mjs

@@ -180,7 +180,7 @@ function createCss(context) {
   });
 }
 function compactStyles(...styles) {
-  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
+  return styles.flat().filter((style) => isObject(style) && Object.keys(compact(style)).length > 0);
 }
 function createMergeCss(context) {
   function resolve(styles) {

package/styled-system/jsx/aspect-ratio.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/bleed.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getBleedStyle } from '../patterns/bleed.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/box.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/center.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCenterStyle } from '../patterns/center.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/circle.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCircleStyle } from '../patterns/circle.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/container.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/cq.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getCqStyle } from '../patterns/cq.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/divider.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getDividerStyle } from '../patterns/divider.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/factory.mjs

@@ -31,13 +31,13 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
     function recipeClass() {
       const { css: cssStyles, ...propStyles } = styleProps
       const compoundVariantStyles = __cvaFn__.__getCompoundVariantCss__?.(variantProps)
-      return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.className)
+      return cx(__cvaFn__(variantProps, false), css(compoundVariantStyles, propStyles, cssStyles), combinedProps.className)
     }
 
     function cvaClass() {
       const { css: cssStyles, ...propStyles } = styleProps
       const cvaStyles = __cvaFn__.raw(variantProps)
-      return cx(css(cvaStyles, propStyles, ...(Array.isArray(cssStyles) ? cssStyles : [cssStyles])), combinedProps.className)
+      return cx(css(cvaStyles, propStyles, cssStyles), combinedProps.className)
     }
 
     const classes = configOrCva.__recipe__ ? recipeClass : cvaClass

package/styled-system/jsx/flex.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getFlexStyle } from '../patterns/flex.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/float.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getFloatStyle } from '../patterns/float.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/grid-item.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getGridItemStyle } from '../patterns/grid-item.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/grid.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getGridStyle } from '../patterns/grid.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/hstack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getHstackStyle } from '../patterns/hstack.mjs';
 import { panda } from './factory.mjs';

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

@@ -10,7 +10,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

package/styled-system/jsx/index.mjs

@@ -9,7 +9,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

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

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getLinkBoxStyle } from '../patterns/link-box.mjs';
 import { panda } from './factory.mjs';

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

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/spacer.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getSpacerStyle } from '../patterns/spacer.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/square.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getSquareStyle } from '../patterns/square.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/stack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getStackStyle } from '../patterns/stack.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/visually-hidden.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/vstack.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getVstackStyle } from '../patterns/vstack.mjs';
 import { panda } from './factory.mjs';

package/styled-system/jsx/wrap.mjs

@@ -1,5 +1,5 @@
 import { createElement, forwardRef } from 'react'
-import { mergeCss } from '../css/css.mjs';
+
 import { splitProps } from '../helpers.mjs';
 import { getWrapStyle } from '../patterns/wrap.mjs';
 import { panda } from './factory.mjs';

package/styled-system/patterns/index.d.ts

@@ -8,7 +8,6 @@ export * from './spacer';
 export * from './square';
 export * from './circle';
 export * from './center';
-export * from './link-box';
 export * from './link-overlay';
 export * from './aspect-ratio';
 export * from './grid';

package/styled-system/patterns/index.mjs

@@ -7,7 +7,6 @@ export * from './spacer.mjs';
 export * from './square.mjs';
 export * from './circle.mjs';
 export * from './center.mjs';
-export * from './link-box.mjs';
 export * from './link-overlay.mjs';
 export * from './aspect-ratio.mjs';
 export * from './grid.mjs';

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

@@ -4,12 +4,9 @@ import { css } from '../css/index.mjs';
 const linkOverlayConfig = {
 transform(props) {
   return {
-    position: "static",
     _before: {
       content: '""',
-      display: "block",
       position: "absolute",
-      cursor: "inherit",
       inset: "0",
       zIndex: "0",
       ...props["_before"]

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

@@ -39,8 +39,6 @@ export type AssetToken = "check"
 
 export type BreakpointToken = "sm" | "md" | "lg" | "xl" | "2xl"
 
-export type AnimationName = "spin" | "ping" | "pulse" | "bounce"
-
 export type Tokens = {
 		aspectRatios: AspectRatioToken
 		borders: BorderToken
@@ -60,7 +58,6 @@ export type Tokens = {
 		colors: ColorToken
 		assets: AssetToken
 		breakpoints: BreakpointToken
-		animationName: AnimationName
 } & { [token: string]: never }
 
 export type TokenCategory = "aspectRatios" | "zIndex" | "opacity" | "colors" | "fonts" | "fontSizes" | "fontWeights" | "lineHeights" | "letterSpacings" | "sizes" | "shadows" | "spacing" | "radii" | "borders" | "borderWidths" | "durations" | "easings" | "animations" | "blurs" | "gradients" | "breakpoints" | "assets"

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

@@ -15,34 +15,61 @@ interface Recursive<T> {
  * -----------------------------------------------------------------------------*/
 
 type TextStyleProperty =
+  | 'font'
+  | 'fontFamily'
+  | 'fontFeatureSettings'
+  | 'fontKerning'
+  | 'fontLanguageOverride'
+  | 'fontOpticalSizing'
+  | 'fontPalette'
   | 'fontSize'
   | 'fontSizeAdjust'
-  | 'fontVariationSettings'
-  | 'fontVariantPosition'
-  | 'fontVariantCaps'
-  | 'fontVariantNumeric'
+  | 'fontStretch'
+  | 'fontStyle'
+  | 'fontSynthesis'
+  | 'fontVariant'
   | 'fontVariantAlternates'
+  | 'fontVariantCaps'
   | 'fontVariantLigatures'
-  | 'fontFamily'
+  | 'fontVariantNumeric'
+  | 'fontVariantPosition'
+  | 'fontVariationSettings'
   | 'fontWeight'
-  | 'fontSynthesis'
-  | 'fontStyle'
-  | 'fontVariant'
-  | 'lineHeight'
+  | 'hypens'
+  | 'hyphenateCharacter'
+  | 'hyphenateLimitChars'
   | 'letterSpacing'
+  | 'lineBreak'
+  | 'lineHeight'
+  | 'quotes'
+  | 'overflowWrap'
+  | 'textCombineUpright'
   | 'textDecoration'
-  | 'textTransform'
-  | 'textIndent'
   | 'textDecorationColor'
   | 'textDecorationLine'
+  | 'textDecorationSkipInk'
   | 'textDecorationStyle'
+  | 'textDecorationThickness'
+  | 'textEmphasis'
   | 'textEmphasisColor'
   | 'textEmphasisPosition'
   | 'textEmphasisStyle'
-  | 'hyphenateCharacter'
+  | 'textIndent'
+  | 'textJustify'
   | 'textOrientation'
   | 'textOverflow'
   | 'textRendering'
+  | 'textShadow'
+  | 'textTransform'
+  | 'textUnderlineOffset'
+  | 'textUnderlinePosition'
+  | 'textWrap'
+  | 'textWrapMode'
+  | 'textWrapStyle'
+  | 'verticalAlign'
+  | 'whiteSpace'
+  | 'wordBreak'
+  | 'wordSpacing'
 
 export type TextStyle = CompositionStyleObject<TextStyleProperty>
 

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

@@ -16,7 +16,7 @@ export interface UtilityValues {
 	insetInlineStart: Tokens["spacing"];
 	right: Tokens["spacing"];
 	bottom: Tokens["spacing"];
-	float: "left" | "right" | "start" | "end";
+	float: "start" | "end" | CssProperties["float"];
 	hideFrom: Tokens["breakpoints"];
 	hideBelow: Tokens["breakpoints"];
 	flexBasis: Tokens["spacing"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "full";
@@ -148,6 +148,7 @@ export interface UtilityValues {
 	transitionDuration: Tokens["durations"];
 	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
+	animationName: "spin" | "ping" | "pulse" | "bounce";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];

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

@@ -429,7 +429,7 @@ animationIterationCount?: ConditionalValue<CssProperties["animationIterationCoun
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-name
    */
-animationName?: ConditionalValue<CssProperties["animationName"] | AnyString>
+animationName?: ConditionalValue<UtilityValues["animationName"] | CssVars | CssProperties["animationName"] | AnyString>
  /**
    * The **`animation-play-state`** CSS property sets whether an animation is running or paused.
    *