@pandacss/studio 0.21.0 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -37,23 +37,20 @@
   "license": "MIT",
   "dependencies": {
     "@astrojs/react": "2.3.2",
-    "astro": "2.10.15",
-    "javascript-stringify": "2.1.0",
+    "astro": "4.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "vite": "4.0.5",
-    "@pandacss/config": "0.21.0",
-    "@pandacss/logger": "0.21.0",
-    "@pandacss/node": "0.21.0",
-    "@pandacss/shared": "0.21.0",
-    "@pandacss/token-dictionary": "0.21.0",
-    "@pandacss/types": "0.21.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"
   },
   "devDependencies": {
-    "@types/react": "18.2.37",
-    "@types/react-dom": "18.2.15",
-    "@vitejs/plugin-react": "4.0.4",
-    "execa": "7.2.0"
+    "@types/react": "18.2.42",
+    "@types/react-dom": "18.2.17"
   },
   "scripts": {
     "panda": "node ../cli/bin.js",

package/src/components/sizes.tsx

@@ -1,4 +1,5 @@
 import { toPx } from '@pandacss/shared'
+import { Fragment } from 'react'
 import { Grid, panda } from '../../styled-system/jsx'
 import { getSortedSizes } from '../lib/sizes-sort'
 import { TokenGroup } from './token-group'
@@ -36,8 +37,8 @@ export function Sizes(props: SizesProps) {
         <panda.hr gridColumn="span 5 / span 5" />
         {sizes
           .sort((a, b) => a.extensions.prop - b.extensions.prop)
-          .map((size) => (
-            <>
+          .map((size, index) => (
+            <Fragment key={index}>
               <b>{size.extensions.prop}</b>
               <span>{size.value}</span>
               <span>{toPx(size.value as string)}</span>
@@ -47,7 +48,7 @@ export function Sizes(props: SizesProps) {
                 gridColumn="span 2 / span 2"
                 style={{ width: size.value }}
               />
-            </>
+            </Fragment>
           ))}
       </Grid>
     </TokenGroup>

package/styled-system/helpers.mjs

@@ -89,6 +89,8 @@ function walkObject(target, predicate, options = {}) {
   return inner(target);
 }
 function mapObject(obj, fn) {
+  if (Array.isArray(obj))
+    return obj.map(fn);
   if (!isObject(obj))
     return fn(obj);
   return walkObject(obj, (value) => fn(value));

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

@@ -5,8 +5,5 @@ import { getAspectRatioStyle } from '../patterns/aspect-ratio.mjs';
 export const AspectRatio = /* @__PURE__ */ forwardRef(function AspectRatio(props, ref) {
   const { ratio, ...restProps } = props
 const styleProps = getAspectRatioStyle({ratio})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/bleed.mjs

@@ -5,8 +5,5 @@ import { getBleedStyle } from '../patterns/bleed.mjs';
 export const Bleed = /* @__PURE__ */ forwardRef(function Bleed(props, ref) {
   const { inline, block, ...restProps } = props
 const styleProps = getBleedStyle({inline, block})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/box.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getBoxStyle } from '../patterns/box.mjs';
 
 export const Box = /* @__PURE__ */ forwardRef(function Box(props, ref) {
-  const restProps = props
-const styleProps = getBoxStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getBoxStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

package/styled-system/jsx/center.mjs

@@ -5,8 +5,5 @@ import { getCenterStyle } from '../patterns/center.mjs';
 export const Center = /* @__PURE__ */ forwardRef(function Center(props, ref) {
   const { inline, ...restProps } = props
 const styleProps = getCenterStyle({inline})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/circle.mjs

@@ -5,8 +5,5 @@ import { getCircleStyle } from '../patterns/circle.mjs';
 export const Circle = /* @__PURE__ */ forwardRef(function Circle(props, ref) {
   const { size, ...restProps } = props
 const styleProps = getCircleStyle({size})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/container.mjs

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getContainerStyle } from '../patterns/container.mjs';
 
 export const Container = /* @__PURE__ */ forwardRef(function Container(props, ref) {
-  const restProps = props
-const styleProps = getContainerStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getContainerStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

package/styled-system/jsx/divider.mjs

@@ -5,8 +5,5 @@ import { getDividerStyle } from '../patterns/divider.mjs';
 export const Divider = /* @__PURE__ */ forwardRef(function Divider(props, ref) {
   const { orientation, thickness, color, ...restProps } = props
 const styleProps = getDividerStyle({orientation, thickness, color})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/factory.mjs

@@ -46,9 +46,8 @@ function styledFn(Dynamic, configOrCva = {}, options = {}) {
       ...forwardedProps,
       ...elementProps,
       ...normalizeHTMLProps(htmlProps),
-      children,
       className: classes(),
-    })
+    }, combinedProps.children ?? children)
   })
 
   const name = getDisplayName(Dynamic)

package/styled-system/jsx/flex.mjs

@@ -5,8 +5,5 @@ import { getFlexStyle } from '../patterns/flex.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})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/float.mjs

@@ -5,8 +5,5 @@ import { getFloatStyle } from '../patterns/float.mjs';
 export const Float = /* @__PURE__ */ forwardRef(function Float(props, ref) {
   const { offsetX, offsetY, offset, placement, ...restProps } = props
 const styleProps = getFloatStyle({offsetX, offsetY, offset, placement})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -5,8 +5,5 @@ import { getGridItemStyle } from '../patterns/grid-item.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})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/grid.mjs

@@ -5,8 +5,5 @@ import { getGridStyle } from '../patterns/grid.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})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/hstack.mjs

@@ -5,8 +5,5 @@ import { getHstackStyle } from '../patterns/hstack.mjs';
 export const HStack = /* @__PURE__ */ forwardRef(function HStack(props, ref) {
   const { justify, gap, ...restProps } = props
 const styleProps = getHstackStyle({justify, gap})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -1,8 +1,6 @@
 /* eslint-disable */
 export * from './factory';
-
 export * from './is-valid-prop';
-
 export * from './box';
 export * from './flex';
 export * from './stack';
@@ -24,5 +22,4 @@ export * from './float';
 export * from './bleed';
 export * from './visually-hidden';
 export * from './styled-link';
-
 export type { HTMLPandaProps, PandaComponent } from '../types/jsx';

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

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getLinkBoxStyle } from '../patterns/link-box.mjs';
 
 export const LinkBox = /* @__PURE__ */ forwardRef(function LinkBox(props, ref) {
-  const restProps = props
-const styleProps = getLinkBoxStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getLinkBoxStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getLinkOverlayStyle } from '../patterns/link-overlay.mjs';
 
 export const LinkOverlay = /* @__PURE__ */ forwardRef(function LinkOverlay(props, ref) {
-  const restProps = props
-const styleProps = getLinkOverlayStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.a, mergedProps)
-  })
+  const styleProps = getLinkOverlayStyle()
+return createElement(panda.a, { ref, ...styleProps, ...props })
+})

package/styled-system/jsx/spacer.mjs

@@ -5,8 +5,5 @@ import { getSpacerStyle } from '../patterns/spacer.mjs';
 export const Spacer = /* @__PURE__ */ forwardRef(function Spacer(props, ref) {
   const { size, ...restProps } = props
 const styleProps = getSpacerStyle({size})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/square.mjs

@@ -5,8 +5,5 @@ import { getSquareStyle } from '../patterns/square.mjs';
 export const Square = /* @__PURE__ */ forwardRef(function Square(props, ref) {
   const { size, ...restProps } = props
 const styleProps = getSquareStyle({size})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/stack.mjs

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

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

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getStyledLinkStyle } from '../patterns/styled-link.mjs';
 
 export const StyledLink = /* @__PURE__ */ forwardRef(function StyledLink(props, ref) {
-  const restProps = props
-const styleProps = getStyledLinkStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getStyledLinkStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

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

@@ -3,10 +3,6 @@ import { panda } from './factory.mjs';
 import { getVisuallyHiddenStyle } from '../patterns/visually-hidden.mjs';
 
 export const VisuallyHidden = /* @__PURE__ */ forwardRef(function VisuallyHidden(props, ref) {
-  const restProps = props
-const styleProps = getVisuallyHiddenStyle()
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+  const styleProps = getVisuallyHiddenStyle()
+return createElement(panda.div, { ref, ...styleProps, ...props })
+})

package/styled-system/jsx/vstack.mjs

@@ -5,8 +5,5 @@ import { getVstackStyle } from '../patterns/vstack.mjs';
 export const VStack = /* @__PURE__ */ forwardRef(function VStack(props, ref) {
   const { justify, gap, ...restProps } = props
 const styleProps = getVstackStyle({justify, gap})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/wrap.mjs

@@ -5,8 +5,5 @@ import { getWrapStyle } from '../patterns/wrap.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})
-const cssProps = styleProps
-const mergedProps = { ref, ...cssProps, ...restProps }
-
-return createElement(panda.div, mergedProps)
-  })
+return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})