@pandacss/studio 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -37,16 +37,16 @@
   "license": "MIT",
   "dependencies": {
     "@astrojs/react": "2.3.2",
-    "astro": "4.0.3",
+    "astro": "4.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "5.0.7",
-    "@pandacss/config": "0.22.0",
-    "@pandacss/logger": "0.22.0",
-    "@pandacss/shared": "0.22.0",
-    "@pandacss/token-dictionary": "0.22.0",
-    "@pandacss/types": "0.22.0",
-    "@pandacss/astro-plugin-studio": "0.22.0"
+    "@pandacss/config": "0.23.0",
+    "@pandacss/logger": "0.23.0",
+    "@pandacss/shared": "0.23.0",
+    "@pandacss/token-dictionary": "0.23.0",
+    "@pandacss/types": "0.23.0",
+    "@pandacss/astro-plugin-studio": "0.23.0"
   },
   "devDependencies": {
     "@types/react": "18.2.42",

package/styled-system/helpers.mjs

@@ -15,7 +15,7 @@ function filterBaseConditions(c) {
 }
 
 // src/css-important.ts
-var importantRegex = /!(important)?$/;
+var importantRegex = /!(important)?/;
 function isImportant(value) {
   return typeof value === "string" ? importantRegex.test(value) : false;
 }
@@ -90,7 +90,7 @@ function walkObject(target, predicate, options = {}) {
 }
 function mapObject(obj, fn) {
   if (Array.isArray(obj))
-    return obj.map(fn);
+    return obj.map((value) => fn(value));
   if (!isObject(obj))
     return fn(obj);
   return walkObject(obj, (value) => fn(value));

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

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
+import { panda } from './factory.mjs';
 
 export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) {
-  const { ratio, ...restProps } = props
-const styleProps = getAspectRatioStyle({ratio})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["ratio"])
+
+const styleProps = getAspectRatioStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/bleed.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getBleedStyle } from '../patterns/bleed.mjs';
+import { panda } from './factory.mjs';
 
 export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
-  const { inline, block, ...restProps } = props
-const styleProps = getBleedStyle({inline, block})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["inline","block"])
+
+const styleProps = getBleedStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/box.mjs

@@ -1,8 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
+import { panda } from './factory.mjs';
 
 export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
-  const styleProps = getBoxStyle()
-return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getBoxStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/center.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getCenterStyle } from '../patterns/center.mjs';
+import { panda } from './factory.mjs';
 
 export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
-  const { inline, ...restProps } = props
-const styleProps = getCenterStyle({inline})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["inline"])
+
+const styleProps = getCenterStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/circle.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getCircleStyle } from '../patterns/circle.mjs';
+import { panda } from './factory.mjs';
 
 export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
-  const { size, ...restProps } = props
-const styleProps = getCircleStyle({size})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["size"])
+
+const styleProps = getCircleStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/container.mjs

@@ -1,8 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
+import { panda } from './factory.mjs';
 
 export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
-  const styleProps = getContainerStyle()
-return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getContainerStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/divider.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getDividerStyle } from '../patterns/divider.mjs';
+import { panda } from './factory.mjs';
 
 export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
-  const { orientation, thickness, color, ...restProps } = props
-const styleProps = getDividerStyle({orientation, thickness, color})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["orientation","thickness","color"])
+
+const styleProps = getDividerStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/flex.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getFlexStyle } from '../patterns/flex.mjs';
+import { panda } from './factory.mjs';
 
 export const Flex = /* @__PURE__ */ forwardRef(function Flex(props, ref) {
-  const { align, justify, direction, wrap, basis, grow, shrink, ...restProps } = props
-const styleProps = getFlexStyle({align, justify, direction, wrap, basis, grow, shrink})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["align","justify","direction","wrap","basis","grow","shrink"])
+
+const styleProps = getFlexStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/float.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getFloatStyle } from '../patterns/float.mjs';
+import { panda } from './factory.mjs';
 
 export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
-  const { offsetX, offsetY, offset, placement, ...restProps } = props
-const styleProps = getFloatStyle({offsetX, offsetY, offset, placement})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["offsetX","offsetY","offset","placement"])
+
+const styleProps = getFloatStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

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

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getGridItemStyle } from '../patterns/grid-item.mjs';
+import { panda } from './factory.mjs';
 
 export const GridItem = /* @__PURE__ */ forwardRef(function GridItem(props, ref) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...restProps } = props
-const styleProps = getGridItemStyle({colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["colSpan","rowSpan","colStart","rowStart","colEnd","rowEnd"])
+
+const styleProps = getGridItemStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/grid.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getGridStyle } from '../patterns/grid.mjs';
+import { panda } from './factory.mjs';
 
 export const Grid = /* @__PURE__ */ forwardRef(function Grid(props, ref) {
-  const { gap, columnGap, rowGap, columns, minChildWidth, ...restProps } = props
-const styleProps = getGridStyle({gap, columnGap, rowGap, columns, minChildWidth})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["gap","columnGap","rowGap","columns","minChildWidth"])
+
+const styleProps = getGridStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/hstack.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getHstackStyle } from '../patterns/hstack.mjs';
+import { panda } from './factory.mjs';
 
 export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
-  const { justify, gap, ...restProps } = props
-const styleProps = getHstackStyle({justify, gap})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["justify","gap"])
+
+const styleProps = getHstackStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

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

@@ -1,8 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getLinkBoxStyle } from '../patterns/link-box.mjs';
+import { panda } from './factory.mjs';
 
 export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) {
-  const styleProps = getLinkBoxStyle()
-return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getLinkBoxStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

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

@@ -1,8 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
+import { panda } from './factory.mjs';
 
 export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
-  const styleProps = getLinkOverlayStyle()
-return createElement(panda.a, { ref, ...styleProps, ...props })
-})
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getLinkOverlayStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.a, mergedProps)
+  })

package/styled-system/jsx/spacer.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getSpacerStyle } from '../patterns/spacer.mjs';
+import { panda } from './factory.mjs';
 
 export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
-  const { size, ...restProps } = props
-const styleProps = getSpacerStyle({size})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["size"])
+
+const styleProps = getSpacerStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/square.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getSquareStyle } from '../patterns/square.mjs';
+import { panda } from './factory.mjs';
 
 export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
-  const { size, ...restProps } = props
-const styleProps = getSquareStyle({size})
-return createElement(panda.div, { ref, ...styleProps, ...restProps })
-})
+  const [patternProps, restProps] = splitProps(props, ["size"])
+
+const styleProps = getSquareStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/stack.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getStackStyle } from '../patterns/stack.mjs';
+import { panda } from './factory.mjs';
 
 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 })
-})
+  const [patternProps, restProps] = splitProps(props, ["align","justify","direction","gap"])
+
+const styleProps = getStackStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

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

@@ -1,8 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getStyledLinkStyle } from '../patterns/styled-link.mjs';
+import { panda } from './factory.mjs';
 
 export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) {
-  const styleProps = getStyledLinkStyle()
-return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getStyledLinkStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

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

@@ -1,8 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
+import { panda } from './factory.mjs';
 
 export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
-  const styleProps = getVisuallyHiddenStyle()
-return createElement(panda.div, { ref, ...styleProps, ...props })
-})
+  const [patternProps, restProps] = splitProps(props, [])
+
+const styleProps = getVisuallyHiddenStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/vstack.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getVstackStyle } from '../patterns/vstack.mjs';
+import { panda } from './factory.mjs';
 
 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 })
-})
+  const [patternProps, restProps] = splitProps(props, ["justify","gap"])
+
+const styleProps = getVstackStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

package/styled-system/jsx/wrap.mjs

@@ -1,9 +1,14 @@
 import { createElement, forwardRef } from 'react'
-import { panda } from './factory.mjs';
+import { mergeCss } from '../css/css.mjs';
+import { splitProps } from '../helpers.mjs';
 import { getWrapStyle } from '../patterns/wrap.mjs';
+import { panda } from './factory.mjs';
 
 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 })
-})
+  const [patternProps, restProps] = splitProps(props, ["gap","rowGap","columnGap","align","justify"])
+
+const styleProps = getWrapStyle(patternProps)
+const mergedProps = { ref, ...styleProps, ...restProps }
+
+return createElement(panda.div, mergedProps)
+  })

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

@@ -139,6 +139,10 @@ export interface SlotRecipeDefinition<S extends string, T extends SlotRecipeVari
    * The styles to apply when a combination of variants is selected.
    */
   compoundVariants?: Pretty<SlotRecipeCompoundVariant<S, RecipeCompoundSelection<T>>>[]
+  /**
+   * Variants to pre-generate, will be include in the final `config.staticCss`
+   */
+  staticCss?: RecipeRule[]
 }
 
 export type SlotRecipeCreatorFn = <S extends string, T extends SlotRecipeVariantRecord<S>>(