@pandacss/studio 0.22.1 → 0.24.0

package/dist/studio.d.mts

@@ -13,4 +13,4 @@ declare function printUrls(options: {
     https: boolean;
 }): void;
 
-export { BuildOpts, buildStudio, previewStudio, printUrls, serveStudio };
+export { type BuildOpts, buildStudio, previewStudio, printUrls, serveStudio };

package/dist/studio.d.ts

@@ -13,4 +13,4 @@ declare function printUrls(options: {
     https: boolean;
 }): void;
 
-export { BuildOpts, buildStudio, previewStudio, printUrls, serveStudio };
+export { type BuildOpts, buildStudio, previewStudio, printUrls, serveStudio };

package/dist/studio.mjs

@@ -1,4 +1,4 @@
-// ../../node_modules/.pnpm/tsup@7.1.0_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
+// ../../node_modules/.pnpm/tsup@8.0.1_typescript@5.3.3/node_modules/tsup/assets/esm_shims.js
 import { fileURLToPath } from "url";
 import path from "path";
 var getFilename = () => fileURLToPath(import.meta.url);

package/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.22.1",
+  "version": "0.24.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
   "types": "dist/studio.d.ts",
   "sideEffects": false,
+  "homepage": "https://panda-css.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/panda.git",
+    "directory": "packages/studio"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +43,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.1",
-    "@pandacss/logger": "0.22.1",
-    "@pandacss/shared": "0.22.1",
-    "@pandacss/token-dictionary": "0.22.1",
-    "@pandacss/types": "0.22.1",
-    "@pandacss/astro-plugin-studio": "0.22.1"
+    "@pandacss/config": "0.24.0",
+    "@pandacss/logger": "0.24.0",
+    "@pandacss/shared": "0.24.0",
+    "@pandacss/token-dictionary": "0.24.0",
+    "@pandacss/types": "0.24.0",
+    "@pandacss/astro-plugin-studio": "0.24.0"
   },
   "devDependencies": {
     "@types/react": "18.2.42",

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/static-css.d.ts

@@ -1,29 +1,29 @@
 /* eslint-disable */
-interface CssRule {
+interface WithConditions {
   /**
-   * The css properties to generate utilities for.
-   * @example ['margin', 'padding']
-   */
-  properties: {
-    [property: string]: string[]
-  }
-  /**
-   * The css conditions to generate utilities for.
+   * The css conditions to generate for the rule.
    * @example ['hover', 'focus']
    */
   conditions?: string[]
+  responsive?: boolean
+}
+
+export interface CssRule extends WithConditions {
   /**
-   * Whether to generate responsive utilities.
+   * The css properties to generate utilities for.
+   * @example ['margin', 'padding']
    */
-  responsive?: boolean
+  properties: {
+    [property: string]: Array<string | number>
+  }
 }
 
-export type RecipeRule =
-  | '*'
-  | ({
-      conditions?: string[]
-      responsive?: boolean
-    } & { [variant: string]: boolean | string[] })
+interface RecipeRuleVariants {
+  [variant: string]: boolean | string[]
+}
+
+export type RecipeRule = '*' | (RecipeRuleVariants & WithConditions)
+export type PatternRule = '*' | CssRule
 
 export interface StaticCssOptions {
   /**
@@ -36,4 +36,10 @@ export interface StaticCssOptions {
   recipes?: {
     [recipe: string]: RecipeRule[]
   }
+  /**
+   * The css patterns to generate.
+   */
+  patterns?: {
+    [pattern: string]: PatternRule[]
+  }
 }

package/index.ts

@@ -1 +0,0 @@
-export * from './scripts/studio'