@pandacss/studio 0.0.0-dev-20230613163214

package/styled-system/css/css.mjs

@@ -0,0 +1,391 @@
+import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs'
+import { sortConditions, finalizeConditions } from './conditions.mjs'
+
+const classNameMap = {
+  aspectRatio: 'aspect',
+  boxDecorationBreak: 'decoration',
+  zIndex: 'z',
+  boxSizing: 'box',
+  objectPosition: 'object',
+  objectFit: 'object',
+  overscrollBehavior: 'overscroll',
+  overscrollBehaviorX: 'overscroll-x',
+  overscrollBehaviorY: 'overscroll-y',
+  position: 'pos',
+  top: 'top',
+  left: 'left',
+  insetInline: 'inset-x',
+  insetBlock: 'inset-y',
+  inset: 'inset',
+  insetBlockEnd: 'inset-b',
+  insetBlockStart: 'inset-t',
+  insetInlineEnd: 'end',
+  insetInlineStart: 'start',
+  right: 'right',
+  bottom: 'bottom',
+  insetX: 'inset-x',
+  insetY: 'inset-y',
+  float: 'float',
+  visibility: 'vis',
+  display: 'd',
+  hideFrom: 'hide',
+  hideBelow: 'show',
+  flexBasis: 'basis',
+  flex: 'flex',
+  flexDirection: 'flex',
+  flexGrow: 'grow',
+  flexShrink: 'shrink',
+  gridTemplateColumns: 'grid-cols',
+  gridTemplateRows: 'grid-cols',
+  gridColumn: 'col-span',
+  gridRow: 'row-span',
+  gridColumnStart: 'col-start',
+  gridColumnEnd: 'col-end',
+  gridAutoFlow: 'grid-flow',
+  gridAutoColumns: 'auto-cols',
+  gridAutoRows: 'auto-rows',
+  gap: 'gap',
+  gridGap: 'gap',
+  gridRowGap: 'gap-x',
+  gridColumnGap: 'gap-y',
+  rowGap: 'gap-x',
+  columnGap: 'gap-y',
+  justifyContent: 'justify',
+  alignContent: 'content',
+  alignItems: 'items',
+  alignSelf: 'self',
+  padding: 'p',
+  paddingLeft: 'pl',
+  paddingRight: 'pr',
+  paddingTop: 'pt',
+  paddingBottom: 'pb',
+  paddingBlock: 'py',
+  paddingBlockEnd: 'pb',
+  paddingBlockStart: 'pt',
+  paddingInline: 'px',
+  paddingInlineEnd: 'pe',
+  paddingInlineStart: 'ps',
+  marginLeft: 'ml',
+  marginRight: 'mr',
+  marginTop: 'mt',
+  marginBottom: 'mb',
+  margin: 'm',
+  marginBlock: 'my',
+  marginBlockEnd: 'mb',
+  marginBlockStart: 'mt',
+  marginInline: 'mx',
+  marginInlineEnd: 'me',
+  marginInlineStart: 'ms',
+  outlineWidth: 'ring',
+  outlineColor: 'ring',
+  outline: 'ring',
+  outlineOffset: 'ring',
+  divideX: 'divide-x',
+  divideY: 'divide-y',
+  divideColor: 'divide',
+  divideStyle: 'divide',
+  width: 'w',
+  inlineSize: 'w',
+  minWidth: 'min-w',
+  minInlineSize: 'min-w',
+  maxWidth: 'max-w',
+  maxInlineSize: 'max-w',
+  height: 'h',
+  blockSize: 'h',
+  minHeight: 'min-h',
+  minBlockSize: 'min-h',
+  maxHeight: 'max-h',
+  maxBlockSize: 'max-b',
+  color: 'text',
+  fontFamily: 'font',
+  fontSize: 'fs',
+  fontWeight: 'font',
+  fontSmoothing: 'smoothing',
+  fontVariantNumeric: 'numeric',
+  letterSpacing: 'tracking',
+  lineHeight: 'leading',
+  textAlign: 'text',
+  textDecoration: 'text-decor',
+  textDecorationColor: 'text-decor',
+  textEmphasisColor: 'text-emphasis',
+  textDecorationStyle: 'decoration',
+  textDecorationThickness: 'decoration',
+  textUnderlineOffset: 'underline-offset',
+  textTransform: 'text',
+  textIndent: 'indent',
+  textShadow: 'text-shadow',
+  textOverflow: 'text',
+  verticalAlign: 'align',
+  wordBreak: 'break',
+  textWrap: 'text',
+  truncate: 'truncate',
+  lineClamp: 'clamp',
+  listStyleType: 'list',
+  listStylePosition: 'list',
+  listStyleImage: 'list-img',
+  backgroundPosition: 'bg',
+  backgroundPositionX: 'bg-x',
+  backgroundPositionY: 'bg-y',
+  backgroundAttachment: 'bg',
+  backgroundClip: 'bg-clip',
+  background: 'bg',
+  backgroundColor: 'bg',
+  backgroundOrigin: 'bg-origin',
+  backgroundImage: 'bg-img',
+  backgroundRepeat: 'bg-repeat',
+  backgroundBlendMode: 'bg-blend',
+  backgroundSize: 'bg',
+  backgroundGradient: 'bg-gradient',
+  textGradient: 'text-gradient',
+  gradientFrom: 'from',
+  gradientTo: 'to',
+  gradientVia: 'via',
+  borderRadius: 'rounded',
+  borderTopLeftRadius: 'rounded-tl',
+  borderTopRightRadius: 'rounded-tr',
+  borderBottomRightRadius: 'rounded-br',
+  borderBottomLeftRadius: 'rounded-bl',
+  borderTopRadius: 'rounded-t',
+  borderRightRadius: 'rounded-r',
+  borderBottomRadius: 'rounded-b',
+  borderLeftRadius: 'rounded-l',
+  borderStartStartRadius: 'rounded-ss',
+  borderStartEndRadius: 'rounded-se',
+  borderStartRadius: 'rounded-s',
+  borderEndStartRadius: 'rounded-es',
+  borderEndEndRadius: 'rounded-ee',
+  borderEndRadius: 'rounded-e',
+  border: 'border',
+  borderColor: 'border',
+  borderInline: 'border-x',
+  borderInlineWidth: 'border-x',
+  borderInlineColor: 'border-x',
+  borderBlock: 'border-y',
+  borderBlockWidth: 'border-y',
+  borderBlockColor: 'border-y',
+  borderLeft: 'border-l',
+  borderLeftColor: 'border-l',
+  borderInlineStart: 'border-s',
+  borderInlineStartColor: 'border-s',
+  borderRight: 'border-r',
+  borderRightColor: 'border-r',
+  borderInlineEnd: 'border-e',
+  borderInlineEndColor: 'border-e',
+  borderTop: 'border-t',
+  borderTopColor: 'border-t',
+  borderBottom: 'border-b',
+  borderBottomColor: 'border-b',
+  borderBlockEnd: 'border-be',
+  borderBlockEndColor: 'border-be',
+  borderBlockStart: 'border-bs',
+  borderBlockStartColor: 'border-bs',
+  boxShadow: 'shadow',
+  boxShadowColor: 'shadow',
+  mixBlendMode: 'mix-blend',
+  filter: 'filter',
+  brightness: 'brightness',
+  contrast: 'contrast',
+  grayscale: 'grayscale',
+  hueRotate: 'hue-rotate',
+  invert: 'invert',
+  saturate: 'saturate',
+  sepia: 'sepia',
+  dropShadow: 'drop-shadow',
+  blur: 'blur',
+  backdropFilter: 'backdrop',
+  backdropBlur: 'backdrop-blur',
+  backdropBrightness: 'backdrop-brightness',
+  backdropContrast: 'backdrop-contrast',
+  backdropGrayscale: 'backdrop-grayscale',
+  backdropHueRotate: 'backdrop-hue-rotate',
+  backdropInvert: 'backdrop-invert',
+  backdropOpacity: 'backdrop-opacity',
+  backdropSaturate: 'backdrop-saturate',
+  backdropSepia: 'backdrop-sepia',
+  borderCollapse: 'border',
+  borderSpacing: 'border-spacing',
+  borderSpacingX: 'border-spacing-x',
+  borderSpacingY: 'border-spacing-y',
+  tableLayout: 'table',
+  transitionTimingFunction: 'ease',
+  transitionDelay: 'delay',
+  transitionDuration: 'duration',
+  transitionProperty: 'transition',
+  animation: 'animation',
+  animationDelay: 'animation-delay',
+  transform: 'transform',
+  transformOrigin: 'origin',
+  scale: 'scale',
+  scaleX: 'scale-x',
+  scaleY: 'scale-y',
+  rotate: 'rotate',
+  translateX: 'translate-x',
+  translateY: 'translate-y',
+  skewX: 'skew-x',
+  skewY: 'skew-y',
+  accentColor: 'accent',
+  caretColor: 'caret',
+  scrollBehavior: 'scroll',
+  scrollbar: 'scrollbar',
+  scrollMargin: 'scroll-m',
+  scrollMarginX: 'scroll-mx',
+  scrollMarginY: 'scroll-my',
+  scrollMarginLeft: 'scroll-ml',
+  scrollMarginRight: 'scroll-mr',
+  scrollMarginTop: 'scroll-mt',
+  scrollMarginBottom: 'scroll-mb',
+  scrollMarginBlock: 'scroll-my',
+  scrollMarginBlockEnd: 'scroll-mb',
+  scrollMarginBlockStart: 'scroll-mt',
+  scrollMarginInline: 'scroll-mx',
+  scrollMarginInlineEnd: 'scroll-me',
+  scrollMarginInlineStart: 'scroll-ms',
+  scrollPadding: 'scroll-p',
+  scrollPaddingBlock: 'scroll-pb',
+  scrollPaddingBlockStart: 'scroll-pt',
+  scrollPaddingBlockEnd: 'scroll-pb',
+  scrollPaddingInline: 'scroll-px',
+  scrollPaddingInlineEnd: 'scroll-pe',
+  scrollPaddingInlineStart: 'scroll-ps',
+  scrollPaddingX: 'scroll-px',
+  scrollPaddingY: 'scroll-py',
+  scrollPaddingLeft: 'scroll-pl',
+  scrollPaddingRight: 'scroll-pr',
+  scrollPaddingTop: 'scroll-pt',
+  scrollPaddingBottom: 'scroll-pb',
+  scrollSnapAlign: 'snap',
+  scrollSnapStop: 'snap',
+  scrollSnapType: 'snap',
+  scrollSnapStrictness: 'strictness',
+  scrollSnapMargin: 'snap-m',
+  scrollSnapMarginTop: 'snap-mt',
+  scrollSnapMarginBottom: 'snap-mb',
+  scrollSnapMarginLeft: 'snap-ml',
+  scrollSnapMarginRight: 'snap-mr',
+  touchAction: 'touch',
+  userSelect: 'select',
+  fill: 'fill',
+  stroke: 'stroke',
+  srOnly: 'sr',
+  debug: 'debug',
+  textStyle: 'textStyle',
+}
+
+const shorthands = {
+  pos: 'position',
+  insetEnd: 'insetInlineEnd',
+  end: 'insetInlineEnd',
+  insetStart: 'insetInlineStart',
+  start: 'insetInlineStart',
+  flexDir: 'flexDirection',
+  p: 'padding',
+  pl: 'paddingLeft',
+  pr: 'paddingRight',
+  pt: 'paddingTop',
+  pb: 'paddingBottom',
+  py: 'paddingBlock',
+  paddingY: 'paddingBlock',
+  paddingX: 'paddingInline',
+  px: 'paddingInline',
+  pe: 'paddingInlineEnd',
+  paddingEnd: 'paddingInlineEnd',
+  ps: 'paddingInlineStart',
+  paddingStart: 'paddingInlineStart',
+  ml: 'marginLeft',
+  mr: 'marginRight',
+  mt: 'marginTop',
+  mb: 'marginBottom',
+  m: 'margin',
+  my: 'marginBlock',
+  marginY: 'marginBlock',
+  mx: 'marginInline',
+  marginX: 'marginInline',
+  me: 'marginInlineEnd',
+  marginEnd: 'marginInlineEnd',
+  ms: 'marginInlineStart',
+  marginStart: 'marginInlineStart',
+  ringWidth: 'outlineWidth',
+  ringColor: 'outlineColor',
+  ring: 'outline',
+  ringOffset: 'outlineOffset',
+  w: 'width',
+  minW: 'minWidth',
+  maxW: 'maxWidth',
+  h: 'height',
+  minH: 'minHeight',
+  maxH: 'maxHeight',
+  bgPosition: 'backgroundPosition',
+  bgPositionX: 'backgroundPositionX',
+  bgPositionY: 'backgroundPositionY',
+  bgAttachment: 'backgroundAttachment',
+  bgClip: 'backgroundClip',
+  bg: 'background',
+  bgColor: 'backgroundColor',
+  bgOrigin: 'backgroundOrigin',
+  bgImage: 'backgroundImage',
+  bgRepeat: 'backgroundRepeat',
+  bgBlendMode: 'backgroundBlendMode',
+  bgSize: 'backgroundSize',
+  bgGradient: 'backgroundGradient',
+  rounded: 'borderRadius',
+  roundedTopLeft: 'borderTopLeftRadius',
+  roundedTopRight: 'borderTopRightRadius',
+  roundedBottomRight: 'borderBottomRightRadius',
+  roundedBottomLeft: 'borderBottomLeftRadius',
+  roundedTop: 'borderTopRadius',
+  roundedRight: 'borderRightRadius',
+  roundedBottom: 'borderBottomRadius',
+  roundedLeft: 'borderLeftRadius',
+  roundedStartStart: 'borderStartStartRadius',
+  roundedStartEnd: 'borderStartEndRadius',
+  roundedStart: 'borderStartRadius',
+  roundedEndStart: 'borderEndStartRadius',
+  roundedEndEnd: 'borderEndEndRadius',
+  roundedEnd: 'borderEndRadius',
+  borderX: 'borderInline',
+  borderXWidth: 'borderInlineWidth',
+  borderXColor: 'borderInlineColor',
+  borderY: 'borderBlock',
+  borderYWidth: 'borderBlockWidth',
+  borderYColor: 'borderBlockColor',
+  borderStart: 'borderInlineStart',
+  borderStartColor: 'borderInlineStartColor',
+  borderEnd: 'borderInlineEnd',
+  borderEndColor: 'borderInlineEndColor',
+  shadow: 'boxShadow',
+  shadowColor: 'boxShadowColor',
+  x: 'translateX',
+  y: 'translateY',
+}
+
+const breakpointKeys = ['base', 'sm', 'md', 'lg', 'xl', '2xl']
+
+const hasShorthand = true
+
+const resolveShorthand = (prop) => shorthands[prop] || prop
+
+function transform(prop, value) {
+  const key = resolveShorthand(prop)
+  const propKey = classNameMap[key] || hypenateProperty(key)
+  const className = `${propKey}_${withoutSpace(value)}`
+  return { className }
+}
+
+const context = {
+  hash: false,
+  conditions: {
+    shift: sortConditions,
+    finalize: finalizeConditions,
+    breakpoints: { keys: breakpointKeys },
+  },
+  utility: {
+    prefix: undefined,
+    transform,
+    hasShorthand,
+    resolveShorthand,
+  },
+}
+
+export const css = createCss(context)
+
+export const { mergeCss, assignCss } = createMergeCss(context)

package/styled-system/css/cva.d.ts

@@ -0,0 +1,5 @@
+import type { RecipeCreatorFn } from '../types/recipe'
+
+export declare const cva: RecipeCreatorFn
+
+export type { RecipeVariantProps } from '../types/recipe'

package/styled-system/css/cva.mjs

@@ -0,0 +1,63 @@
+import { compact, splitProps } from '../helpers.mjs'
+import { css, mergeCss } from './css.mjs'
+
+export function cva(config) {
+  const { base = {}, variants = {}, defaultVariants = {}, compoundVariants = [] } = config
+
+  function resolve(props) {
+    const computedVariants = { ...defaultVariants, ...compact(props) }
+    let variantCss = { ...base }
+    for (const [key, value] of Object.entries(computedVariants)) {
+      if (variants[key]?.[value]) {
+        variantCss = mergeCss(variantCss, variants[key][value])
+      }
+    }
+    const compoundVariantCss = getCompoundVariantCss(compoundVariants, computedVariants)
+    return mergeCss(variantCss, compoundVariantCss)
+  }
+
+  function cvaFn(props) {
+    return css(resolve(props))
+  }
+
+  const variantKeys = Object.keys(variants)
+
+  function splitVariantProps(props) {
+    return splitProps(props, variantKeys)
+  }
+
+  const variantMap = Object.fromEntries(Object.entries(variants).map(([key, value]) => [key, Object.keys(value)]))
+
+  return Object.assign(cvaFn, {
+    __cva__: true,
+    variants: variantMap,
+    variantKeys,
+    resolve,
+    config,
+    splitVariantProps,
+  })
+}
+
+export function getCompoundVariantCss(compoundVariants, variantMap) {
+  let result = {}
+  compoundVariants.forEach((compoundVariant) => {
+    const isMatching = Object.entries(compoundVariant).every(([key, value]) => {
+      if (key === 'css') return true
+
+      const values = Array.isArray(value) ? value : [value]
+      return values.some((value) => variantMap[key] === value)
+    })
+
+    if (isMatching) {
+      result = mergeCss(result, compoundVariant.css)
+    }
+  })
+
+  return result
+}
+
+export function assertCompoundVariant(name, compoundVariants, variants, prop) {
+  if (compoundVariants.length > 0 && typeof variants[prop] === 'object') {
+    throw new Error(`[recipe:${name}:${prop}] Conditions are not supported when using compound variants.`)
+  }
+}

package/styled-system/css/cx.d.ts

@@ -0,0 +1,4 @@
+type Argument = string | boolean | null | undefined
+
+/** Conditionally join classNames into a single string */
+export declare function cx(...args: Argument[]): string

package/styled-system/css/cx.mjs

@@ -0,0 +1,15 @@
+function cx() {
+  let str = '',
+    i = 0,
+    arg
+
+  for (; i < arguments.length; ) {
+    if ((arg = arguments[i++]) && typeof arg === 'string') {
+      str && (str += ' ')
+      str += arg
+    }
+  }
+  return str
+}
+
+export { cx }

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

@@ -0,0 +1,3 @@
+export * from './css'
+export * from './cx'
+export * from './cva'

package/styled-system/css/index.mjs

@@ -0,0 +1,3 @@
+export * from './css.mjs'
+export * from './cx.mjs'
+export * from './cva.mjs'

package/styled-system/global.css

@@ -0,0 +1,61 @@
+@layer base {
+  :root {
+    --made-with-panda: '🐼';
+  }
+
+  *,
+  *::before,
+  *::after,
+  ::backdrop {
+    --blur: ;
+    --brightness: ;
+    --contrast: ;
+    --grayscale: ;
+    --hue-rotate: ;
+    --invert: ;
+    --saturate: ;
+    --sepia: ;
+    --drop-shadow: ;
+    --backdrop-blur: ;
+    --backdrop-brightness: ;
+    --backdrop-contrast: ;
+    --backdrop-grayscale: ;
+    --backdrop-hue-rotate: ;
+    --backdrop-invert: ;
+    --backdrop-opacity: ;
+    --backdrop-saturate: ;
+    --backdrop-sepia: ;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+  }
+
+  :root {
+    --global-color-border: var(--colors-border);
+    --global-color-placeholder: var(--colors-neutral-500);
+    font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+    font-size: var(--font-sizes-md);
+    line-height: var(--line-heights-normal);
+    font-weight: var(--font-weights-normal);
+    color-scheme: light dark;
+    color: var(--colors-text);
+    background: var(--colors-bg);
+  }
+
+  a {
+    color: unset;
+    text-decoration: none;
+  }
+
+  body {
+    margin: 0;
+    min-height: 100vh;
+  }
+}