@pandacss/studio 0.0.0-dev-20230613163214

package/styled-system/helpers.mjs

@@ -0,0 +1,251 @@
+// src/assert.ts
+function isObject(value) {
+  return typeof value === 'object' && value != null && !Array.isArray(value)
+}
+
+// src/compact.ts
+function compact(value) {
+  return Object.fromEntries(Object.entries(value ?? {}).filter(([_, value2]) => value2 !== void 0))
+}
+
+// src/condition.ts
+var isBaseCondition = (v) => v === 'base'
+function filterBaseConditions(c) {
+  return c.slice().filter((v) => !isBaseCondition(v))
+}
+
+// src/css-important.ts
+var importantRegex = /!(important)?$/
+function isImportant(value) {
+  return typeof value === 'string' ? importantRegex.test(value) : false
+}
+function withoutImportant(value) {
+  return typeof value === 'string' ? value.replace(importantRegex, '').trim() : value
+}
+function withoutSpace(str) {
+  return typeof str === 'string' ? str.replaceAll(' ', '_') : str
+}
+
+// src/hash.ts
+function toChar(code) {
+  return String.fromCharCode(code + (code > 25 ? 39 : 97))
+}
+function toName(code) {
+  let name = ''
+  let x
+  for (x = Math.abs(code); x > 52; x = (x / 52) | 0) name = toChar(x % 52) + name
+  return toChar(x % 52) + name
+}
+function toPhash(h, x) {
+  let i = x.length
+  while (i) h = (h * 33) ^ x.charCodeAt(--i)
+  return h
+}
+function toHash(value) {
+  return toName(toPhash(5381, value) >>> 0)
+}
+
+// src/merge-props.ts
+function mergeProps(...sources) {
+  const result = {}
+  for (const source of sources) {
+    for (const [key, value] of Object.entries(source)) {
+      if (isObject(value)) {
+        result[key] = mergeProps(result[key] || {}, value)
+      } else {
+        result[key] = value
+      }
+    }
+  }
+  return result
+}
+
+// src/walk-object.ts
+function walkObject(target, predicate, options = {}) {
+  const { stop, getKey } = options
+  function inner(value, path = []) {
+    if (isObject(value) || Array.isArray(value)) {
+      const result = {}
+      for (const [prop, child] of Object.entries(value)) {
+        const key = getKey?.(prop) ?? prop
+        const childPath = [...path, key]
+        if (stop?.(value, childPath)) {
+          return predicate(value, path)
+        }
+        result[key] = inner(child, childPath)
+      }
+      return result
+    }
+    return predicate(value, path)
+  }
+  return inner(target)
+}
+function mapObject(obj, fn) {
+  if (!isObject(obj)) return fn(obj)
+  return walkObject(obj, (value) => fn(value))
+}
+
+// src/normalize-style-object.ts
+function toResponsiveObject(values, breakpoints) {
+  return values.reduce((acc, current, index) => {
+    const key = breakpoints[index]
+    if (current != null) {
+      acc[key] = current
+    }
+    return acc
+  }, {})
+}
+function normalizeShorthand(styles, context) {
+  const { hasShorthand, resolveShorthand } = context.utility
+  return walkObject(styles, (v) => v, {
+    getKey: (prop) => {
+      return hasShorthand ? resolveShorthand(prop) : prop
+    },
+  })
+}
+function normalizeStyleObject(styles, context) {
+  const { utility, conditions } = context
+  const { hasShorthand, resolveShorthand } = utility
+  return walkObject(
+    styles,
+    (value) => {
+      return Array.isArray(value) ? toResponsiveObject(value, conditions.breakpoints.keys) : value
+    },
+    {
+      stop: (value) => Array.isArray(value),
+      getKey: (prop) => {
+        return hasShorthand ? resolveShorthand(prop) : prop
+      },
+    },
+  )
+}
+
+// src/classname.ts
+var fallbackCondition = {
+  shift: (v) => v,
+  finalize: (v) => v,
+  breakpoints: { keys: [] },
+}
+var sanitize = (value) => (typeof value === 'string' ? value.replaceAll(/[\n\s]+/g, ' ') : value)
+function createCss(context) {
+  const { utility, hash, conditions: conds = fallbackCondition } = context
+  const formatClassName = (str) => [utility.prefix, str].filter(Boolean).join('-')
+  const hashFn = (conditions, className) => {
+    let result
+    if (hash) {
+      const baseArray = [...conds.finalize(conditions), className]
+      result = formatClassName(toHash(baseArray.join(':')))
+    } else {
+      const baseArray = [...conds.finalize(conditions), formatClassName(className)]
+      result = baseArray.join(':')
+    }
+    return result
+  }
+  return (styleObject = {}) => {
+    const normalizedObject = normalizeStyleObject(styleObject, context)
+    const classNames = /* @__PURE__ */ new Set()
+    walkObject(normalizedObject, (value, paths) => {
+      const important = isImportant(value)
+      if (value == null) return
+      const [prop, ...allConditions] = conds.shift(paths)
+      const conditions = filterBaseConditions(allConditions)
+      const transformed = utility.transform(prop, withoutImportant(sanitize(value)))
+      let className = hashFn(conditions, transformed.className)
+      if (important) className = `${className}!`
+      classNames.add(className)
+    })
+    return Array.from(classNames).join(' ')
+  }
+}
+function compactStyles(...styles) {
+  return styles.filter((style) => isObject(style) && Object.keys(compact(style)).length > 0)
+}
+function createMergeCss(context) {
+  function resolve(styles) {
+    const allStyles = compactStyles(...styles)
+    if (allStyles.length === 1) return allStyles
+    return allStyles.map((style) => normalizeShorthand(style, context))
+  }
+  function mergeCss(...styles) {
+    return mergeProps(...resolve(styles))
+  }
+  function assignCss(...styles) {
+    return Object.assign({}, ...resolve(styles))
+  }
+  return { mergeCss, assignCss }
+}
+
+// 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
+
+// src/split-props.ts
+function splitProps(props, ...keys) {
+  const descriptors = Object.getOwnPropertyDescriptors(props)
+  const dKeys = Object.keys(descriptors)
+  const split = (k) => {
+    const clone = {}
+    for (let i = 0; i < k.length; i++) {
+      const key = k[i]
+      if (descriptors[key]) {
+        Object.defineProperty(clone, key, descriptors[key])
+        delete descriptors[key]
+      }
+    }
+    return clone
+  }
+  const fn = (key) => split(Array.isArray(key) ? key : dKeys.filter(key))
+  return keys.map(fn).concat(split(dKeys))
+}
+
+// src/memo.ts
+var memo = (fn) => {
+  const cache = /* @__PURE__ */ new Map()
+  const get = (...args) => {
+    const key = JSON.stringify(args)
+    if (cache.has(key)) {
+      return cache.get(key)
+    }
+    const result = fn(...args)
+    cache.set(key, result)
+    return result
+  }
+  return get
+}
+
+// src/hypenate.ts
+var dashCaseRegex = /[A-Z]/g
+var hypenateProperty = memo((property) => {
+  if (property.startsWith('--')) return property
+  return property.replace(dashCaseRegex, (match) => `-${match.toLowerCase()}`)
+})
+export {
+  compact,
+  createCss,
+  createMergeCss,
+  filterBaseConditions,
+  hypenateProperty,
+  isBaseCondition,
+  isObject,
+  mapObject,
+  mergeProps,
+  normalizeHTMLProps,
+  splitProps,
+  toHash,
+  walkObject,
+  withoutSpace,
+}
+
+export function __spreadValues(a, b) {
+  return { ...a, ...b }
+}
+
+export function __objRest(source, exclude) {
+  return Object.fromEntries(Object.entries(source).filter(([key]) => !exclude.includes(key)))
+}

package/styled-system/jsx/absolute-center.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { AbsoluteCenterProperties } from '../patterns/absolute-center'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type AbsoluteCenterProps = AbsoluteCenterProperties & Omit<HTMLPandaProps<'div'>, keyof AbsoluteCenterProperties >
+
+
+export declare const AbsoluteCenter: FunctionComponent<AbsoluteCenterProps>

package/styled-system/jsx/absolute-center.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getAbsoluteCenterStyle } from '../patterns/absolute-center.mjs'
+
+export const AbsoluteCenter = forwardRef(function AbsoluteCenter(props, ref) {
+  const { axis, ...restProps } = props
+  const styleProps = getAbsoluteCenterStyle({ axis })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

package/styled-system/jsx/aspect-ratio.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { AspectRatioProperties } from '../patterns/aspect-ratio'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type AspectRatioProps = AspectRatioProperties & Omit<HTMLPandaProps<'div'>, keyof AspectRatioProperties | 'aspectRatio'>
+
+
+export declare const AspectRatio: FunctionComponent<AspectRatioProps>

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

@@ -0,0 +1,9 @@
+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) {
+  const { ratio, ...restProps } = props
+  const styleProps = getAspectRatioStyle({ ratio })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { BoxProperties } from '../patterns/box'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type BoxProps = BoxProperties & Omit<HTMLPandaProps<'div'>, keyof BoxProperties >
+
+
+export declare const Box: FunctionComponent<BoxProps>

package/styled-system/jsx/box.mjs

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

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { CenterProperties } from '../patterns/center'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type CenterProps = CenterProperties & Omit<HTMLPandaProps<'div'>, keyof CenterProperties >
+
+
+export declare const Center: FunctionComponent<CenterProps>

package/styled-system/jsx/center.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getCenterStyle } from '../patterns/center.mjs'
+
+export const Center = 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.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { CircleProperties } from '../patterns/circle'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type CircleProps = CircleProperties & Omit<HTMLPandaProps<'div'>, keyof CircleProperties >
+
+
+export declare const Circle: FunctionComponent<CircleProps>

package/styled-system/jsx/circle.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getCircleStyle } from '../patterns/circle.mjs'
+
+export const Circle = 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.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { ContainerProperties } from '../patterns/container'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type ContainerProps = ContainerProperties & Omit<HTMLPandaProps<'div'>, keyof ContainerProperties >
+
+
+export declare const Container: FunctionComponent<ContainerProps>

package/styled-system/jsx/container.mjs

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

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { DividerProperties } from '../patterns/divider'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type DividerProps = DividerProperties & Omit<HTMLPandaProps<'div'>, keyof DividerProperties >
+
+
+export declare const Divider: FunctionComponent<DividerProps>

package/styled-system/jsx/divider.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getDividerStyle } from '../patterns/divider.mjs'
+
+export const Divider = 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.d.ts

@@ -0,0 +1,2 @@
+import { Panda } from '../types/jsx'
+export declare const panda: Panda

package/styled-system/jsx/factory.mjs

@@ -0,0 +1,59 @@
+import { createElement, forwardRef, useMemo } from 'react'
+import { css, cx, cva, assignCss } from '../css/index.mjs'
+import { splitProps, normalizeHTMLProps } from '../helpers.mjs'
+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 { as: Element = Dynamic, ...restProps } = props
+
+    const [variantProps, styleProps, htmlProps, elementProps] = useMemo(() => {
+      return splitProps(restProps, cvaFn.variantKeys, isCssProperty, normalizeHTMLProps.keys)
+    }, [restProps])
+
+    function recipeClass() {
+      const { css: cssStyles, ...propStyles } = styleProps
+      const styles = assignCss(propStyles, cssStyles)
+      return cx(cvaFn(variantProps), css(styles), elementProps.className)
+    }
+
+    function cvaClass() {
+      const { css: cssStyles, ...propStyles } = styleProps
+      const cvaStyles = cvaFn.resolve(variantProps)
+      const styles = assignCss(cvaStyles, propStyles, cssStyles)
+      return cx(css(styles), elementProps.className)
+    }
+
+    const classes = configOrCva.__recipe__ ? recipeClass : cvaClass
+
+    return createElement(Element, {
+      ref,
+      ...elementProps,
+      ...normalizeHTMLProps(htmlProps),
+      className: classes(),
+    })
+  })
+
+  PandaComponent.displayName = `panda.${Dynamic}`
+  return PandaComponent
+}
+
+function createJsxFactory() {
+  const cache = new Map()
+
+  return new Proxy(styledFn, {
+    apply(_, __, args) {
+      return styledFn(...args)
+    },
+    get(_, el) {
+      if (!cache.has(el)) {
+        cache.set(el, styledFn(el))
+      }
+      return cache.get(el)
+    },
+  })
+}
+
+export const panda = createJsxFactory()

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

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { FlexProperties } from '../patterns/flex'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type FlexProps = FlexProperties & Omit<HTMLPandaProps<'div'>, keyof FlexProperties >
+
+
+export declare const Flex: FunctionComponent<FlexProps>

package/styled-system/jsx/flex.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getFlexStyle } from '../patterns/flex.mjs'
+
+export const Flex = 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.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { FloatProperties } from '../patterns/float'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type FloatProps = FloatProperties & Omit<HTMLPandaProps<'div'>, keyof FloatProperties >
+
+
+export declare const Float: FunctionComponent<FloatProps>

package/styled-system/jsx/float.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getFloatStyle } from '../patterns/float.mjs'
+
+export const Float = 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.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { GridItemProperties } from '../patterns/grid-item'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type GridItemProps = GridItemProperties & Omit<HTMLPandaProps<'div'>, keyof GridItemProperties >
+
+
+export declare const GridItem: FunctionComponent<GridItemProps>

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

@@ -0,0 +1,9 @@
+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) {
+  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.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { GridProperties } from '../patterns/grid'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type GridProps = GridProperties & Omit<HTMLPandaProps<'div'>, keyof GridProperties >
+
+
+export declare const Grid: FunctionComponent<GridProps>

package/styled-system/jsx/grid.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getGridStyle } from '../patterns/grid.mjs'
+
+export const Grid = 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.d.ts

@@ -0,0 +1,8 @@
+import type { FunctionComponent } from 'react'
+import type { HstackProperties } from '../patterns/hstack'
+import type { HTMLPandaProps } from '../types/jsx'
+
+export type HstackProps = HstackProperties & Omit<HTMLPandaProps<'div'>, keyof HstackProperties >
+
+
+export declare const HStack: FunctionComponent<HstackProps>

package/styled-system/jsx/hstack.mjs

@@ -0,0 +1,9 @@
+import { createElement, forwardRef } from 'react'
+import { panda } from './factory.mjs'
+import { getHstackStyle } from '../patterns/hstack.mjs'
+
+export const HStack = forwardRef(function HStack(props, ref) {
+  const { justify, gap, ...restProps } = props
+  const styleProps = getHstackStyle({ justify, gap })
+  return createElement(panda.div, { ref, ...styleProps, ...restProps })
+})

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

@@ -0,0 +1,20 @@
+export * from './factory'
+export * from './box'
+export * from './flex'
+export * from './stack'
+export * from './vstack'
+export * from './hstack'
+export * from './spacer'
+export * from './square'
+export * from './circle'
+export * from './center'
+export * from './absolute-center'
+export * from './aspect-ratio'
+export * from './grid'
+export * from './grid-item'
+export * from './wrap'
+export * from './container'
+export * from './divider'
+export * from './float'
+export * from './styled-link'
+export type { HTMLPandaProps } from '../types/jsx'

package/styled-system/jsx/index.mjs

@@ -0,0 +1,19 @@
+export * from './factory.mjs'
+export * from './box.mjs'
+export * from './flex.mjs'
+export * from './stack.mjs'
+export * from './vstack.mjs'
+export * from './hstack.mjs'
+export * from './spacer.mjs'
+export * from './square.mjs'
+export * from './circle.mjs'
+export * from './center.mjs'
+export * from './absolute-center.mjs'
+export * from './aspect-ratio.mjs'
+export * from './grid.mjs'
+export * from './grid-item.mjs'
+export * from './wrap.mjs'
+export * from './container.mjs'
+export * from './divider.mjs'
+export * from './float.mjs'
+export * from './styled-link.mjs'