@stokelp/styled-system 2.92.0 → 2.93.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokelp/styled-system",
-  "version": "2.92.0",
+  "version": "2.93.0",
   "description": "Stokelp UI styled-system",
   "type": "module",
   "publishConfig": {
@@ -56,7 +56,7 @@
     "./panda.buildinfo.json": "./panda.buildinfo.json"
   },
   "devDependencies": {
-    "@pandacss/dev": "^0.53.0"
+    "@pandacss/dev": "^1.4.3"
   },
   "release": {
     "monorepo": {

package/panda.buildinfo.json

@@ -123,6 +123,13 @@
       "gap]___[value:20"
     ],
     "recipes": {
+      "icon": [
+        "size]___[value:md]___[recipe:icon",
+        "size]___[value:xs]___[recipe:icon",
+        "size]___[value:sm]___[recipe:icon",
+        "size]___[value:lg]___[recipe:icon",
+        "size]___[value:xl]___[recipe:icon"
+      ],
       "iconButton": [
         "size]___[value:sm]___[recipe:iconButton",
         "variant]___[value:tertiary]___[recipe:iconButton",
@@ -134,13 +141,6 @@
         "severity]___[value:danger]___[recipe:iconButton",
         "severity]___[value:success]___[recipe:iconButton"
       ],
-      "icon": [
-        "size]___[value:md]___[recipe:icon",
-        "size]___[value:xs]___[recipe:icon",
-        "size]___[value:sm]___[recipe:icon",
-        "size]___[value:lg]___[recipe:icon",
-        "size]___[value:xl]___[recipe:icon"
-      ],
       "priceTag": [
         "size]___[value:md]___[recipe:priceTag",
         "size]___[value:sm]___[recipe:priceTag",

package/patterns/aspect-ratio.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
-transform(props14, { map }) {
-  const { ratio = 4 / 3, ...rest } = props14;
+transform(props15, { map }) {
+  const { ratio = 4 / 3, ...rest } = props15;
   return {
     position: "relative",
     _before: {

package/patterns/bleed.mjs

@@ -2,11 +2,11 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const bleedConfig = {
-transform(props14, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props14;
+transform(props15, { map, isCssUnit, isCssVar }) {
+  const { inline: inline2, block, ...rest } = props15;
   const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
-    "--bleed-x": map(inline, valueFn),
+    "--bleed-x": map(inline2, valueFn),
     "--bleed-y": map(block, valueFn),
     marginInline: "calc(var(--bleed-x, 0) * -1)",
     marginBlock: "calc(var(--bleed-y, 0) * -1)",

package/patterns/box.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const boxConfig = {
-transform(props14) {
-  return props14;
+transform(props15) {
+  return props15;
 }}
 
 export const getBoxStyle = (styles = {}) => {

package/patterns/center.mjs

@@ -2,10 +2,10 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const centerConfig = {
-transform(props14) {
-  const { inline, ...rest } = props14;
+transform(props15) {
+  const { inline: inline2, ...rest } = props15;
   return {
-    display: inline ? "inline-flex" : "flex",
+    display: inline2 ? "inline-flex" : "flex",
     alignItems: "center",
     justifyContent: "center",
     ...rest

package/patterns/circle.mjs

@@ -2,15 +2,15 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const circleConfig = {
-transform(props14) {
-  const { size, ...rest } = props14;
+transform(props15) {
+  const { size: size3, ...rest } = props15;
   return {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flex: "0 0 auto",
-    width: size,
-    height: size,
+    width: size3,
+    height: size3,
     borderRadius: "9999px",
     ...rest
   };

package/patterns/container.mjs

@@ -2,13 +2,13 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const containerConfig = {
-transform(props14) {
+transform(props15) {
   return {
     position: "relative",
     maxWidth: "8xl",
     mx: "auto",
     px: { base: "4", md: "6", lg: "8" },
-    ...props14
+    ...props15
   };
 }}
 

package/patterns/cq.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const cqConfig = {
-transform(props14) {
-  const { name, type, ...rest } = props14;
+transform(props15) {
+  const { name, type, ...rest } = props15;
   return {
     containerType: type,
     containerName: name,

package/patterns/divider.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const dividerConfig = {
-transform(props14, { map }) {
-  const { orientation, thickness, color, ...rest } = props14;
+transform(props15, { map }) {
+  const { orientation, thickness, color, ...rest } = props15;
   return {
     "--thickness": thickness,
     width: map(orientation, (v) => v === "vertical" ? void 0 : "100%"),

package/patterns/flex.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const flexConfig = {
-transform(props14) {
-  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props14;
+transform(props15) {
+  const { direction, align, justify, wrap: wrap22, basis, grow, shrink, ...rest } = props15;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/float.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const floatConfig = {
-transform(props14, { map }) {
-  const { offset, offsetX, offsetY, placement, ...rest } = props14;
+transform(props15, { map }) {
+  const { offset: offset3, offsetX, offsetY, placement, ...rest } = props15;
   return {
     display: "inline-flex",
     justifyContent: "center",
@@ -38,9 +38,9 @@ transform(props14, { map }) {
     ...rest
   };
 },
-defaultValues(props14) {
-  const offset = props14.offset || "0";
-  return { offset, offsetX: offset, offsetY: offset, placement: "top-end" };
+defaultValues(props15) {
+  const offset3 = props15.offset || "0";
+  return { offset: offset3, offsetX: offset3, offsetY: offset3, placement: "top-end" };
 }}
 
 export const getFloatStyle = (styles = {}) => {

package/patterns/grid-item.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
-transform(props14, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props14;
+transform(props15, { map }) {
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props15;
   const spanFn = (v) => v === "auto" ? v : `span ${v}`;
   return {
     gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,

package/patterns/grid.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const gridConfig = {
-transform(props14, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props14;
+transform(props15, { map, isCssUnit }) {
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props15;
   const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
@@ -14,8 +14,8 @@ transform(props14, { map, isCssUnit }) {
     ...rest
   };
 },
-defaultValues(props14) {
-  return { gap: props14.columnGap || props14.rowGap ? void 0 : "10px" };
+defaultValues(props15) {
+  return { gap: props15.columnGap || props15.rowGap ? void 0 : "10px" };
 }}
 
 export const getGridStyle = (styles = {}) => {

package/patterns/hstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const hstackConfig = {
-transform(props14) {
-  const { justify, gap, ...rest } = props14;
+transform(props15) {
+  const { justify, gap, ...rest } = props15;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/link-overlay.mjs

@@ -2,16 +2,16 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const linkOverlayConfig = {
-transform(props14) {
+transform(props15) {
   return {
     _before: {
       content: '""',
       position: "absolute",
       inset: "0",
       zIndex: "0",
-      ...props14["_before"]
+      ...props15["_before"]
     },
-    ...props14
+    ...props15
   };
 }}
 

package/patterns/spacer.mjs

@@ -2,12 +2,12 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const spacerConfig = {
-transform(props14, { map }) {
-  const { size, ...rest } = props14;
+transform(props15, { map }) {
+  const { size: size3, ...rest } = props15;
   return {
     alignSelf: "stretch",
     justifySelf: "stretch",
-    flex: map(size, (v) => v == null ? "1" : `0 0 ${v}`),
+    flex: map(size3, (v) => v == null ? "1" : `0 0 ${v}`),
     ...rest
   };
 }}

package/patterns/square.mjs

@@ -2,15 +2,15 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const squareConfig = {
-transform(props14) {
-  const { size, ...rest } = props14;
+transform(props15) {
+  const { size: size3, ...rest } = props15;
   return {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     flex: "0 0 auto",
-    width: size,
-    height: size,
+    width: size3,
+    height: size3,
     ...rest
   };
 }}

package/patterns/stack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const stackConfig = {
-transform(props14) {
-  const { align, justify, direction, gap, ...rest } = props14;
+transform(props15) {
+  const { align, justify, direction, gap, ...rest } = props15;
   return {
     display: "flex",
     flexDirection: direction,

package/patterns/visually-hidden.mjs

@@ -2,10 +2,10 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const visuallyHiddenConfig = {
-transform(props14) {
+transform(props15) {
   return {
     srOnly: true,
-    ...props14
+    ...props15
   };
 }}
 

package/patterns/vstack.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const vstackConfig = {
-transform(props14) {
-  const { justify, gap, ...rest } = props14;
+transform(props15) {
+  const { justify, gap, ...rest } = props15;
   return {
     display: "flex",
     alignItems: "center",

package/patterns/wrap.mjs

@@ -2,8 +2,8 @@ import { getPatternStyles, patternFns } from '../helpers.mjs';
 import { css } from '../css/index.mjs';
 
 const wrapConfig = {
-transform(props14) {
-  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props14;
+transform(props15) {
+  const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props15;
   return {
     display: "flex",
     flexWrap: "wrap",

package/recipes/collapsible.d.ts

@@ -16,7 +16,7 @@ export type CollapsibleVariantProps = {
 
 export interface CollapsibleRecipe {
   __type: CollapsibleVariantProps
-  (props?: CollapsibleVariantProps): Pretty<Record<"root" | "trigger" | "content", string>>
+  (props?: CollapsibleVariantProps): Pretty<Record<"root" | "trigger" | "content" | "indicator", string>>
   raw: (props?: CollapsibleVariantProps) => CollapsibleVariantProps
   variantMap: CollapsibleVariantMap
   variantKeys: Array<keyof CollapsibleVariant>

package/recipes/collapsible.mjs

@@ -16,6 +16,10 @@ const collapsibleSlotNames = [
   [
     "content",
     "collapsible__content"
+  ],
+  [
+    "indicator",
+    "collapsible__indicator"
   ]
 ]
 const collapsibleSlotFns = /* @__PURE__ */ collapsibleSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, collapsibleDefaultVariants, getSlotCompoundVariant(collapsibleCompoundVariants, slotName))])

package/recipes/combobox.d.ts

@@ -20,7 +20,7 @@ export type ComboboxVariantProps = {
 
 export interface ComboboxRecipe {
   __type: ComboboxVariantProps
-  (props?: ComboboxVariantProps): Pretty<Record<"root" | "clearTrigger" | "content" | "control" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "label" | "list" | "positioner" | "trigger", string>>
+  (props?: ComboboxVariantProps): Pretty<Record<"root" | "clearTrigger" | "content" | "control" | "input" | "item" | "itemGroup" | "itemGroupLabel" | "itemIndicator" | "itemText" | "label" | "list" | "positioner" | "trigger" | "empty", string>>
   raw: (props?: ComboboxVariantProps) => ComboboxVariantProps
   variantMap: ComboboxVariantMap
   variantKeys: Array<keyof ComboboxVariant>

package/recipes/combobox.mjs

@@ -62,6 +62,10 @@ const comboboxSlotNames = [
   [
     "trigger",
     "combobox__trigger"
+  ],
+  [
+    "empty",
+    "combobox__empty"
   ]
 ]
 const comboboxSlotFns = /* @__PURE__ */ comboboxSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, comboboxDefaultVariants, getSlotCompoundVariant(comboboxCompoundVariants, slotName))])

package/recipes/datepicker.d.ts

@@ -16,7 +16,7 @@ export type DatepickerVariantProps = {
 
 export interface DatepickerRecipe {
   __type: DatepickerVariantProps
-  (props?: DatepickerVariantProps): Pretty<Record<"root" | "label" | "clearTrigger" | "content" | "control" | "input" | "monthSelect" | "nextTrigger" | "positioner" | "prevTrigger" | "rangeText" | "table" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "viewTrigger" | "viewControl" | "yearSelect" | "presetTrigger" | "view", string>>
+  (props?: DatepickerVariantProps): Pretty<Record<"clearTrigger" | "content" | "control" | "input" | "label" | "monthSelect" | "nextTrigger" | "positioner" | "presetTrigger" | "prevTrigger" | "rangeText" | "root" | "table" | "tableBody" | "tableCell" | "tableCellTrigger" | "tableHead" | "tableHeader" | "tableRow" | "trigger" | "view" | "viewControl" | "viewTrigger" | "yearSelect" | "view", string>>
   raw: (props?: DatepickerVariantProps) => DatepickerVariantProps
   variantMap: DatepickerVariantMap
   variantKeys: Array<keyof DatepickerVariant>

package/recipes/datepicker.mjs

@@ -5,14 +5,6 @@ const datepickerDefaultVariants = {}
 const datepickerCompoundVariants = []
 
 const datepickerSlotNames = [
-  [
-    "root",
-    "datepicker__root"
-  ],
-  [
-    "label",
-    "datepicker__label"
-  ],
   [
     "clearTrigger",
     "datepicker__clearTrigger"
@@ -29,6 +21,10 @@ const datepickerSlotNames = [
     "input",
     "datepicker__input"
   ],
+  [
+    "label",
+    "datepicker__label"
+  ],
   [
     "monthSelect",
     "datepicker__monthSelect"
@@ -41,6 +37,10 @@ const datepickerSlotNames = [
     "positioner",
     "datepicker__positioner"
   ],
+  [
+    "presetTrigger",
+    "datepicker__presetTrigger"
+  ],
   [
     "prevTrigger",
     "datepicker__prevTrigger"
@@ -49,6 +49,10 @@ const datepickerSlotNames = [
     "rangeText",
     "datepicker__rangeText"
   ],
+  [
+    "root",
+    "datepicker__root"
+  ],
   [
     "table",
     "datepicker__table"
@@ -82,20 +86,20 @@ const datepickerSlotNames = [
     "datepicker__trigger"
   ],
   [
-    "viewTrigger",
-    "datepicker__viewTrigger"
+    "view",
+    "datepicker__view"
   ],
   [
     "viewControl",
     "datepicker__viewControl"
   ],
   [
-    "yearSelect",
-    "datepicker__yearSelect"
+    "viewTrigger",
+    "datepicker__viewTrigger"
   ],
   [
-    "presetTrigger",
-    "datepicker__presetTrigger"
+    "yearSelect",
+    "datepicker__yearSelect"
   ],
   [
     "view",