@pandacss/studio 0.8.0 → 0.10.0

package/styled-system/helpers.mjs

@@ -3,18 +3,6 @@ function isObject(value) {
   return typeof value === 'object' && value != null && !Array.isArray(value)
 }
 
-// src/astish.ts
-var newRule = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g
-var ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g
-var astish = (val, tree = [{}]) => {
-  const block = newRule.exec((val ?? '').replace(ruleClean, ''))
-  if (!block) return tree[0]
-  if (block[4]) tree.shift()
-  else if (block[3]) tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {}))
-  else tree[0][block[1]] = block[2]
-  return astish(val, tree)
-}
-
 // src/compact.ts
 function compact(value) {
   return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0))
@@ -214,15 +202,53 @@ var hypenateProperty = memo((property) => {
   return property.replace(wordRegex, '-$1').replace(msRegex, '-ms-').toLowerCase()
 })
 
-// src/normalize-html.ts
-var htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
-function convert(key) {
-  return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
+// src/slot.ts
+var assign = (obj, path, value) => {
+  const last = path.pop()
+  const target = path.reduce((acc, key) => {
+    if (acc[key] == null) acc[key] = {}
+    return acc[key]
+  }, obj)
+  if (last != null) target[last] = value
 }
-function normalizeHTMLProps(props) {
-  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]))
+var getSlotRecipes = (recipe) => {
+  const parts = recipe.slots
+    .map((slot) => [
+      slot,
+      // setup base recipe
+      {
+        // create class-base on BEM
+        className: [recipe.className ?? '', slot].join('__'),
+        base: {},
+        variants: {},
+        defaultVariants: recipe.defaultVariants ?? {},
+        compoundVariants: [],
+      },
+    ])
+    .map(([slot, cva]) => {
+      const base = recipe.base[slot]
+      if (base) cva.base = base
+      walkObject(
+        recipe.variants ?? {},
+        (variant, path) => {
+          if (!variant[slot]) return
+          assign(cva, ['variants', ...path], variant[slot])
+        },
+        {
+          stop: (_value, path) => path.includes(slot),
+        },
+      )
+      if (recipe.compoundVariants) {
+        cva.compoundVariants = getSlotCompoundVariant(recipe.compoundVariants, slot)
+      }
+      return [slot, cva]
+    })
+  return Object.fromEntries(parts)
 }
-normalizeHTMLProps.keys = htmlProps
+var getSlotCompoundVariant = (compoundVariants, slotName) =>
+  compoundVariants
+    .filter((compoundVariant) => compoundVariant.css[slotName])
+    .map((compoundVariant) => ({ ...compoundVariant, css: compoundVariant.css[slotName] }))
 
 // src/split-props.ts
 function splitProps(props, ...keys) {
@@ -243,23 +269,35 @@ function splitProps(props, ...keys) {
   return keys.map(fn).concat(split(dKeys))
 }
 export {
-  astish,
   compact,
   createCss,
   createMergeCss,
   filterBaseConditions,
+  getSlotCompoundVariant,
+  getSlotRecipes,
   hypenateProperty,
   isBaseCondition,
   isObject,
   mapObject,
+  memo,
   mergeProps,
-  normalizeHTMLProps,
   splitProps,
   toHash,
   walkObject,
   withoutSpace,
 }
 
+// src/normalize-html.ts
+var htmlProps = ['htmlSize', 'htmlTranslate', 'htmlWidth', 'htmlHeight']
+function convert(key) {
+  return htmlProps.includes(key) ? key.replace('html', '').toLowerCase() : key
+}
+function normalizeHTMLProps(props) {
+  return Object.fromEntries(Object.entries(props).map(([key, value]) => [convert(key), value]))
+}
+normalizeHTMLProps.keys = htmlProps
+export { normalizeHTMLProps }
+
 export function __spreadValues(a, b) {
   return { ...a, ...b }
 }

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

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

package/styled-system/jsx/box.mjs

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

package/styled-system/jsx/center.mjs

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

package/styled-system/jsx/circle.mjs

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

package/styled-system/jsx/container.mjs

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

package/styled-system/jsx/divider.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getDividerStyle } from '../patterns/divider.mjs'
 
-export const Divider = forwardRef(function Divider(props, ref) {
+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 })

package/styled-system/jsx/factory.mjs

@@ -6,7 +6,7 @@ import { isCssProperty } from './is-valid-prop.mjs'
 function styledFn(Dynamic, configOrCva = {}) {
   const cvaFn = configOrCva.__cva__ || configOrCva.__recipe__ ? configOrCva : cva(configOrCva)
 
-  const PandaComponent = forwardRef(function PandaComponent(props, ref) {
+  const PandaComponent = /* @__PURE__ */ forwardRef(function PandaComponent(props, ref) {
     const { as: Element = Dynamic, ...restProps } = props
 
     const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
@@ -56,4 +56,4 @@ function createJsxFactory() {
   })
 }
 
-export const panda = createJsxFactory()
+export const panda = /* @__PURE__ */ createJsxFactory()

package/styled-system/jsx/flex.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getFlexStyle } from '../patterns/flex.mjs'
 
-export const Flex = forwardRef(function Flex(props, ref) {
+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 })

package/styled-system/jsx/float.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getFloatStyle } from '../patterns/float.mjs'
 
-export const Float = forwardRef(function Float(props, ref) {
+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 })

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

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getGridItemStyle } from '../patterns/grid-item.mjs'
 
-export const GridItem = forwardRef(function GridItem(props, ref) {
+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 })

package/styled-system/jsx/grid.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getGridStyle } from '../patterns/grid.mjs'
 
-export const Grid = forwardRef(function Grid(props, ref) {
+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 })

package/styled-system/jsx/hstack.mjs

@@ -2,7 +2,7 @@ import { createElement, forwardRef } from 'react'
 import { panda } from './factory.mjs'
 import { getHstackStyle } from '../patterns/hstack.mjs'
 
-export const HStack = forwardRef(function HStack(props, ref) {
+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 })