@pandacss/studio 0.27.3 → 0.29.0

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/cq.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import type { SystemStyleObject, ConditionalValue } from '../types/index';
+import type { Properties } from '../types/csstype';
+import type { PropertyValue } from '../types/prop-type';
+import type { DistributiveOmit } from '../types/system-types';
+import type { Tokens } from '../tokens/index';
+
+export interface CqProperties {
+   name?: ConditionalValue<Tokens["containerNames"] | Properties["containerName"]>
+	type?: PropertyValue<'containerType'>
+}
+
+
+interface CqStyles extends CqProperties, DistributiveOmit<SystemStyleObject, keyof CqProperties > {}
+
+interface CqPatternFn {
+  (styles?: CqStyles): string
+  raw: (styles?: CqStyles) => SystemStyleObject
+}
+
+
+export declare const cq: CqPatternFn;

package/styled-system/patterns/cq.mjs

@@ -0,0 +1,21 @@
+import { getPatternStyles, patternFns } from '../helpers.mjs';
+import { css } from '../css/index.mjs';
+
+const cqConfig = {
+transform(props) {
+  const { name, type, ...rest } = props;
+  return {
+    containerType: type,
+    containerName: name,
+    ...rest
+  };
+},
+defaultValues:{type:'inline-size'}}
+
+export const getCqStyle = (styles = {}) => {
+  const _styles = getPatternStyles(cqConfig, styles)
+  return cqConfig.transform(_styles, patternFns)
+}
+
+export const cq = (styles) => css(getCqStyle(styles))
+cq.raw = getCqStyle

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/index.d.ts

@@ -19,4 +19,4 @@ export * from './divider';
 export * from './float';
 export * from './bleed';
 export * from './visually-hidden';
-export * from './styled-link';
+export * from './cq';

package/styled-system/patterns/index.mjs

@@ -18,4 +18,4 @@ export * from './divider.mjs';
 export * from './float.mjs';
 export * from './bleed.mjs';
 export * from './visually-hidden.mjs';
-export * from './styled-link.mjs';
+export * from './cq.mjs';

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