@pandacss/studio 0.0.0-dev-20240126232947 → 0.0.0-dev-20240128131310

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pandacss/studio",
-  "version": "0.0.0-dev-20240126232947",
+  "version": "0.0.0-dev-20240128131310",
   "description": "The automated token documentation for Panda CSS",
   "main": "dist/studio.js",
   "module": "dist/studio.mjs",
@@ -48,12 +48,12 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "vite": "5.0.12",
-    "@pandacss/logger": "0.0.0-dev-20240126232947",
-    "@pandacss/config": "0.0.0-dev-20240126232947",
-    "@pandacss/shared": "0.0.0-dev-20240126232947",
-    "@pandacss/token-dictionary": "0.0.0-dev-20240126232947",
-    "@pandacss/types": "0.0.0-dev-20240126232947",
-    "@pandacss/astro-plugin-studio": "0.0.0-dev-20240126232947"
+    "@pandacss/config": "0.0.0-dev-20240128131310",
+    "@pandacss/logger": "0.0.0-dev-20240128131310",
+    "@pandacss/shared": "0.0.0-dev-20240128131310",
+    "@pandacss/token-dictionary": "0.0.0-dev-20240128131310",
+    "@pandacss/types": "0.0.0-dev-20240128131310",
+    "@pandacss/astro-plugin-studio": "0.0.0-dev-20240128131310"
   },
   "devDependencies": {
     "@types/react": "18.2.42",

package/styled-system/helpers.mjs

@@ -14,7 +14,7 @@ function filterBaseConditions(c) {
   return c.slice().filter((v) => !isBaseCondition(v));
 }
 
-// src/css-important.ts
+// src/important.ts
 var importantRegex = /\s*!(important)?/i;
 function isImportant(value) {
   return typeof value === "string" ? importantRegex.test(value) : false;
@@ -211,6 +211,34 @@ var hypenateProperty = memo((property) => {
   return property.replace(wordRegex, "-$1").replace(msRegex, "-ms-").toLowerCase();
 });
 
+// src/is-css-function.ts
+var fns = ["min", "max", "clamp", "calc"];
+var fnRegExp = new RegExp(`^(${fns.join("|")})\\(.*\\)`);
+var isCssFunction = (v) => typeof v === "string" && fnRegExp.test(v);
+
+// src/is-css-unit.ts
+var lengthUnits = "cm,mm,Q,in,pc,pt,px,em,ex,ch,rem,lh,rlh,vw,vh,vmin,vmax,vb,vi,svw,svh,lvw,lvh,dvw,dvh,cqw,cqh,cqi,cqb,cqmin,cqmax,%";
+var lengthUnitsPattern = `(?:${lengthUnits.split(",").join("|")})`;
+var lengthRegExp = new RegExp(`^[+-]?[0-9]*.?[0-9]+(?:[eE][+-]?[0-9]+)?${lengthUnitsPattern}$`);
+var isCssUnit = (v) => typeof v === "string" && lengthRegExp.test(v);
+
+// src/is-css-var.ts
+var isCssVar = (v) => typeof v === "string" && /^var\(--.+\)$/.test(v);
+
+// src/pattern-fns.ts
+var patternFns = {
+  map: mapObject,
+  isCssFunction,
+  isCssVar,
+  isCssUnit
+};
+var getPatternStyles = (pattern, styles) => {
+  if (!pattern.defaultValues)
+    return styles;
+  const defaults = typeof pattern.defaultValues === "function" ? pattern.defaultValues(styles) : pattern.defaultValues;
+  return Object.assign({}, defaults, compact(styles));
+};
+
 // src/slot.ts
 var getSlotRecipes = (recipe = {}) => {
   const init = (slot) => ({
@@ -260,6 +288,7 @@ export {
   createCss,
   createMergeCss,
   filterBaseConditions,
+  getPatternStyles,
   getSlotCompoundVariant,
   getSlotRecipes,
   hypenateProperty,
@@ -268,6 +297,7 @@ export {
   mapObject,
   memo,
   mergeProps,
+  patternFns,
   splitProps,
   toHash,
   uniq,

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

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
@@ -29,7 +29,10 @@ transform(props, { map }) {
   };
 }}
 
-export const getAspectRatioStyle = (styles = {}) => aspectRatioConfig.transform(styles, { map: mapObject })
+export const getAspectRatioStyle = (styles = {}) => {
+  const _styles = getPatternStyles(aspectRatioConfig, styles)
+  return aspectRatioConfig.transform(_styles, patternFns)
+}
 
 export const aspectRatio = (styles) => css(getAspectRatioStyle(styles))
 aspectRatio.raw = getAspectRatioStyle

package/styled-system/patterns/bleed.mjs

@@ -1,19 +1,24 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const bleedConfig = {
-transform(props) {
-  const { inline = "0", block = "0", ...rest } = props;
+transform(props, { map, isCssUnit, isCssVar }) {
+  const { inline, block, ...rest } = props;
+  const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
-    "--bleed-x": `spacing.${inline}`,
-    "--bleed-y": `spacing.${block}`,
+    "--bleed-x": map(inline, valueFn),
+    "--bleed-y": map(block, valueFn),
     marginInline: "calc(var(--bleed-x, 0) * -1)",
     marginBlock: "calc(var(--bleed-y, 0) * -1)",
     ...rest
   };
-}}
+},
+defaultValues:{inline:'0',block:'0'}}
 
-export const getBleedStyle = (styles = {}) => bleedConfig.transform(styles, { map: mapObject })
+export const getBleedStyle = (styles = {}) => {
+  const _styles = getPatternStyles(bleedConfig, styles)
+  return bleedConfig.transform(_styles, patternFns)
+}
 
 export const bleed = (styles) => css(getBleedStyle(styles))
 bleed.raw = getBleedStyle

package/styled-system/patterns/box.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const boxConfig = {
@@ -6,7 +6,10 @@ transform(props) {
   return props;
 }}
 
-export const getBoxStyle = (styles = {}) => boxConfig.transform(styles, { map: mapObject })
+export const getBoxStyle = (styles = {}) => {
+  const _styles = getPatternStyles(boxConfig, styles)
+  return boxConfig.transform(_styles, patternFns)
+}
 
 export const box = (styles) => css(getBoxStyle(styles))
 box.raw = getBoxStyle

package/styled-system/patterns/center.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const centerConfig = {
@@ -12,7 +12,10 @@ transform(props) {
   };
 }}
 
-export const getCenterStyle = (styles = {}) => centerConfig.transform(styles, { map: mapObject })
+export const getCenterStyle = (styles = {}) => {
+  const _styles = getPatternStyles(centerConfig, styles)
+  return centerConfig.transform(_styles, patternFns)
+}
 
 export const center = (styles) => css(getCenterStyle(styles))
 center.raw = getCenterStyle

package/styled-system/patterns/circle.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const circleConfig = {
@@ -16,7 +16,10 @@ transform(props) {
   };
 }}
 
-export const getCircleStyle = (styles = {}) => circleConfig.transform(styles, { map: mapObject })
+export const getCircleStyle = (styles = {}) => {
+  const _styles = getPatternStyles(circleConfig, styles)
+  return circleConfig.transform(_styles, patternFns)
+}
 
 export const circle = (styles) => css(getCircleStyle(styles))
 circle.raw = getCircleStyle

package/styled-system/patterns/container.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const containerConfig = {
@@ -12,7 +12,10 @@ transform(props) {
   };
 }}
 
-export const getContainerStyle = (styles = {}) => containerConfig.transform(styles, { map: mapObject })
+export const getContainerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(containerConfig, styles)
+  return containerConfig.transform(_styles, patternFns)
+}
 
 export const container = (styles) => css(getContainerStyle(styles))
 container.raw = getContainerStyle

package/styled-system/patterns/divider.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const dividerConfig = {
 transform(props, { map }) {
-  const { orientation = "horizontal", thickness = "1px", color, ...rest } = props;
+  const { orientation, thickness, color, ...rest } = props;
   return {
     "--thickness": thickness,
     width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),
@@ -13,9 +13,13 @@ transform(props, { map }) {
     borderColor: color,
     ...rest
   };
-}}
+},
+defaultValues:{orientation:'horizontal',thickness:'1px'}}
 
-export const getDividerStyle = (styles = {}) => dividerConfig.transform(styles, { map: mapObject })
+export const getDividerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(dividerConfig, styles)
+  return dividerConfig.transform(_styles, patternFns)
+}
 
 export const divider = (styles) => css(getDividerStyle(styles))
 divider.raw = getDividerStyle

package/styled-system/patterns/flex.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const flexConfig = {
@@ -17,7 +17,10 @@ transform(props) {
   };
 }}
 
-export const getFlexStyle = (styles = {}) => flexConfig.transform(styles, { map: mapObject })
+export const getFlexStyle = (styles = {}) => {
+  const _styles = getPatternStyles(flexConfig, styles)
+  return flexConfig.transform(_styles, patternFns)
+}
 
 export const flex = (styles) => css(getFlexStyle(styles))
 flex.raw = getFlexStyle

package/styled-system/patterns/float.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const floatConfig = {
 transform(props, { map }) {
-  const { offset = "0", offsetX = offset, offsetY = offset, placement = "top-end", ...rest } = props;
+  const { offset, offsetX, offsetY, placement, ...rest } = props;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -37,9 +37,16 @@ transform(props, { map }) {
     }),
     ...rest
   };
+},
+defaultValues(props) {
+  const offset = props.offset || "0";
+  return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
 }}
 
-export const getFloatStyle = (styles = {}) => floatConfig.transform(styles, { map: mapObject })
+export const getFloatStyle = (styles = {}) => {
+  const _styles = getPatternStyles(floatConfig, styles)
+  return floatConfig.transform(_styles, patternFns)
+}
 
 export const float = (styles) => css(getFloatStyle(styles))
 float.raw = getFloatStyle

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

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
@@ -16,7 +16,10 @@ transform(props, { map }) {
   };
 }}
 
-export const getGridItemStyle = (styles = {}) => gridItemConfig.transform(styles, { map: mapObject })
+export const getGridItemStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridItemConfig, styles)
+  return gridItemConfig.transform(_styles, patternFns)
+}
 
 export const gridItem = (styles) => css(getGridItemStyle(styles))
 gridItem.raw = getGridItemStyle

package/styled-system/patterns/grid.mjs

@@ -1,11 +1,10 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridConfig = {
-transform(props, { map }) {
-  const regex = /\d+(cm|in|pt|em|px|rem|vh|vmax|vmin|vw|ch|lh|%)$/;
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", columns, minChildWidth, ...rest } = props;
-  const getValue = (v) => regex.test(v) ? v : `token(sizes.${v}, ${v})`;
+transform(props, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
+  const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
     gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,
@@ -14,9 +13,15 @@ transform(props, { map }) {
     rowGap,
     ...rest
   };
+},
+defaultValues(props) {
+  return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
 }}
 
-export const getGridStyle = (styles = {}) => gridConfig.transform(styles, { map: mapObject })
+export const getGridStyle = (styles = {}) => {
+  const _styles = getPatternStyles(gridConfig, styles)
+  return gridConfig.transform(_styles, patternFns)
+}
 
 export const grid = (styles) => css(getGridStyle(styles))
 grid.raw = getGridStyle

package/styled-system/patterns/hstack.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const hstackConfig = {
 transform(props) {
-  const { justify, gap = "10px", ...rest } = props;
+  const { justify, gap, ...rest } = props;
   return {
     display: "flex",
     alignItems: "center",
@@ -12,9 +12,13 @@ transform(props) {
     flexDirection: "row",
     ...rest
   };
-}}
+},
+defaultValues:{gap:'10px'}}
 
-export const getHstackStyle = (styles = {}) => hstackConfig.transform(styles, { map: mapObject })
+export const getHstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(hstackConfig, styles)
+  return hstackConfig.transform(_styles, patternFns)
+}
 
 export const hstack = (styles) => css(getHstackStyle(styles))
 hstack.raw = getHstackStyle

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

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkBoxConfig = {
@@ -13,7 +13,10 @@ transform(props) {
   };
 }}
 
-export const getLinkBoxStyle = (styles = {}) => linkBoxConfig.transform(styles, { map: mapObject })
+export const getLinkBoxStyle = (styles = {}) => {
+  const _styles = getPatternStyles(linkBoxConfig, styles)
+  return linkBoxConfig.transform(_styles, patternFns)
+}
 
 export const linkBox = (styles) => css(getLinkBoxStyle(styles))
 linkBox.raw = getLinkBoxStyle

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

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
@@ -18,7 +18,10 @@ transform(props) {
   };
 }}
 
-export const getLinkOverlayStyle = (styles = {}) => linkOverlayConfig.transform(styles, { map: mapObject })
+export const getLinkOverlayStyle = (styles = {}) => {
+  const _styles = getPatternStyles(linkOverlayConfig, styles)
+  return linkOverlayConfig.transform(_styles, patternFns)
+}
 
 export const linkOverlay = (styles) => css(getLinkOverlayStyle(styles))
 linkOverlay.raw = getLinkOverlayStyle

package/styled-system/patterns/spacer.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
@@ -12,7 +12,10 @@ transform(props, { map }) {
   };
 }}
 
-export const getSpacerStyle = (styles = {}) => spacerConfig.transform(styles, { map: mapObject })
+export const getSpacerStyle = (styles = {}) => {
+  const _styles = getPatternStyles(spacerConfig, styles)
+  return spacerConfig.transform(_styles, patternFns)
+}
 
 export const spacer = (styles) => css(getSpacerStyle(styles))
 spacer.raw = getSpacerStyle

package/styled-system/patterns/square.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const squareConfig = {
@@ -15,7 +15,10 @@ transform(props) {
   };
 }}
 
-export const getSquareStyle = (styles = {}) => squareConfig.transform(styles, { map: mapObject })
+export const getSquareStyle = (styles = {}) => {
+  const _styles = getPatternStyles(squareConfig, styles)
+  return squareConfig.transform(_styles, patternFns)
+}
 
 export const square = (styles) => css(getSquareStyle(styles))
 square.raw = getSquareStyle

package/styled-system/patterns/stack.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const stackConfig = {
 transform(props) {
-  const { align, justify, direction = "column", gap = "10px", ...rest } = props;
+  const { align, justify, direction, gap, ...rest } = props;
   return {
     display: "flex",
     flexDirection: direction,
@@ -12,9 +12,13 @@ transform(props) {
     gap,
     ...rest
   };
-}}
+},
+defaultValues:{direction:'column',gap:'10px'}}
 
-export const getStackStyle = (styles = {}) => stackConfig.transform(styles, { map: mapObject })
+export const getStackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(stackConfig, styles)
+  return stackConfig.transform(_styles, patternFns)
+}
 
 export const stack = (styles) => css(getStackStyle(styles))
 stack.raw = getStackStyle

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

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
@@ -9,7 +9,10 @@ transform(props) {
   };
 }}
 
-export const getVisuallyHiddenStyle = (styles = {}) => visuallyHiddenConfig.transform(styles, { map: mapObject })
+export const getVisuallyHiddenStyle = (styles = {}) => {
+  const _styles = getPatternStyles(visuallyHiddenConfig, styles)
+  return visuallyHiddenConfig.transform(_styles, patternFns)
+}
 
 export const visuallyHidden = (styles) => css(getVisuallyHiddenStyle(styles))
 visuallyHidden.raw = getVisuallyHiddenStyle

package/styled-system/patterns/vstack.mjs

@@ -1,9 +1,9 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
 transform(props) {
-  const { justify, gap = "10px", ...rest } = props;
+  const { justify, gap, ...rest } = props;
   return {
     display: "flex",
     alignItems: "center",
@@ -12,9 +12,13 @@ transform(props) {
     flexDirection: "column",
     ...rest
   };
-}}
+},
+defaultValues:{gap:'10px'}}
 
-export const getVstackStyle = (styles = {}) => vstackConfig.transform(styles, { map: mapObject })
+export const getVstackStyle = (styles = {}) => {
+  const _styles = getPatternStyles(vstackConfig, styles)
+  return vstackConfig.transform(_styles, patternFns)
+}
 
 export const vstack = (styles) => css(getVstackStyle(styles))
 vstack.raw = getVstackStyle

package/styled-system/patterns/wrap.mjs

@@ -1,4 +1,4 @@
-import { mapObject } from '../helpers.mjs';
+import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const wrapConfig = {
@@ -16,7 +16,10 @@ transform(props) {
   };
 }}
 
-export const getWrapStyle = (styles = {}) => wrapConfig.transform(styles, { map: mapObject })
+export const getWrapStyle = (styles = {}) => {
+  const _styles = getPatternStyles(wrapConfig, styles)
+  return wrapConfig.transform(_styles, patternFns)
+}
 
 export const wrap = (styles) => css(getWrapStyle(styles))
 wrap.raw = getWrapStyle

package/styled-system/types/pattern.d.ts

@@ -13,13 +13,20 @@ export type PatternProperty =
 
 export interface PatternHelpers {
   map: (value: any, fn: (value: string) => string | undefined) => any
+  isCssUnit: (value: any) => boolean
+  isCssVar: (value: any) => boolean
+  isCssFunction: (value: any) => boolean
 }
 
 export interface PatternProperties {
   [key: string]: PatternProperty
 }
 
-type Props<T> = Record<LiteralUnion<keyof T>, any>
+type InferProps<T> = Record<LiteralUnion<keyof T>, any>
+
+export type PatternDefaultValue<T> = Partial<InferProps<T>>
+
+export type PatternDefaultValueFn<T> = (props: InferProps<T>) => PatternDefaultValue<T>
 
 export interface PatternConfig<T extends PatternProperties = PatternProperties> {
   /**
@@ -35,10 +42,14 @@ export interface PatternConfig<T extends PatternProperties = PatternProperties>
    * The properties of the pattern.
    */
   properties?: T
+  /**
+   * The default values of the pattern.
+   */
+  defaultValues?: PatternDefaultValue<T> | PatternDefaultValueFn<T>
   /**
    * The css object this pattern will generate.
    */
-  transform?: (props: Props<T>, helpers: PatternHelpers) => SystemStyleObject
+  transform?: (props: InferProps<T>, helpers: PatternHelpers) => SystemStyleObject
   /**
    * The jsx element name this pattern will generate.
    */