@chakra-ui/panda-preset 3.33.0 → 3.35.0

package/dist/cjs/slot-recipes/date-picker.cjs

@@ -0,0 +1,462 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const datePickerSlotRecipe = def.defineSlotRecipe({
+  className: "date-picker",
+  slots: [
+    "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",
+    "valueText",
+    "indicatorGroup"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      width: "full",
+      "--datepicker-indicators-offset": "sizes.3",
+      _disabled: {
+        opacity: 0.5
+      }
+    },
+    label: {
+      textStyle: "sm",
+      fontWeight: "medium"
+    },
+    indicatorGroup: {
+      position: "absolute",
+      insetEnd: "var(--datepicker-indicators-offset)",
+      top: "50%",
+      transform: "translateY(-50%)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1"
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      width: "full",
+      position: "relative"
+    },
+    input: {
+      flex: "1",
+      minWidth: "0",
+      height: "var(--datepicker-input-height)",
+      "--input-height": "var(--datepicker-input-height)",
+      px: "var(--datepicker-input-px)",
+      textStyle: "sm",
+      bg: "transparent",
+      borderRadius: "l2",
+      outline: "0",
+      appearance: "none",
+      color: "fg",
+      "--focus-color": "colors.colorPalette.focusRing",
+      "--error-color": "colors.border.error",
+      _placeholder: {
+        color: "fg.muted"
+      },
+      _invalid: {
+        focusRingColor: "var(--error-color)",
+        borderColor: "var(--error-color)"
+      }
+    },
+    trigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "6",
+      height: "6",
+      borderRadius: "l1",
+      color: "fg.muted",
+      outline: "none",
+      _hover: {
+        color: "fg"
+      },
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      _icon: {
+        boxSize: "4"
+      }
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3",
+      p: "3",
+      minW: "18rem",
+      bg: "bg.panel",
+      borderRadius: "l2",
+      boxShadow: "lg",
+      color: "fg",
+      "--date-picker-z-index": "zIndex.popover",
+      zIndex: "calc(var(--date-picker-z-index) + var(--layer-index, 0))",
+      outline: "none",
+      _open: {
+        animationStyle: "scale-fade-in",
+        animationDuration: "fast"
+      },
+      _closed: {
+        animationStyle: "scale-fade-out",
+        animationDuration: "faster"
+      }
+    },
+    view: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3"
+    },
+    viewControl: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "2",
+      height: "var(--datepicker-nav-trigger-size)"
+    },
+    viewTrigger: {
+      display: "inline-flex",
+      flex: "1",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "1",
+      py: "1.5",
+      px: "2",
+      textStyle: "sm",
+      fontWeight: "semibold",
+      borderRadius: "l2",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      _hover: {
+        bg: "colorPalette.subtle"
+      }
+    },
+    prevTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxSize: "var(--datepicker-nav-trigger-size)",
+      borderRadius: "l2",
+      color: "fg",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      _hover: {
+        bg: "colorPalette.subtle"
+      },
+      _focusVisible: {
+        boxShadow: "0 0 0 2px var(--colors-color-palette-focus-ring)"
+      },
+      _disabled: {
+        opacity: 0.5
+      },
+      _icon: {
+        boxSize: "4"
+      }
+    },
+    nextTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      boxSize: "var(--datepicker-nav-trigger-size)",
+      borderRadius: "l2",
+      color: "fg",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      _hover: {
+        bg: "colorPalette.subtle"
+      },
+      _focusVisible: {
+        boxShadow: "0 0 0 2px var(--colors-color-palette-focus-ring)"
+      },
+      _disabled: {
+        opacity: 0.5
+      },
+      _icon: {
+        boxSize: "4"
+      }
+    },
+    rangeText: {
+      textStyle: "sm",
+      fontWeight: "semibold"
+    },
+    table: {
+      borderCollapse: "separate",
+      borderSpacing: "0"
+    },
+    tableHeader: {
+      width: "var(--table-cell-size)",
+      py: "2",
+      textStyle: "xs",
+      fontWeight: "medium",
+      color: "fg.muted",
+      textAlign: "center",
+      textTransform: "uppercase",
+      "&[data-type='week-number']": {
+        color: "fg.subtle"
+      }
+    },
+    tableCell: {
+      py: "0.5",
+      "&[data-type='week-number']": {
+        color: "fg.subtle"
+      }
+    },
+    tableCellTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minWidth: "var(--table-cell-size)",
+      minHeight: "var(--table-cell-size)",
+      textStyle: "sm",
+      borderRadius: "l2",
+      focusVisibleRing: "inside",
+      focusRingWidth: "2px",
+      focusRingOffset: "0px",
+      cursor: "default",
+      position: "relative",
+      _hover: {
+        bg: "colorPalette.subtle"
+      },
+      "[data-view=month] &, [data-view=year] &": {
+        width: "calc(var(--table-cell-size) * 1.75)"
+      },
+      _today: {
+        color: "colorPalette.fg",
+        fontWeight: "semibold",
+        textDecoration: "underline",
+        textUnderlineOffset: "3px",
+        textDecorationThickness: "2px"
+      },
+      "&[data-selected]": {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast",
+        _hover: {
+          bg: "colorPalette.solid"
+        }
+      },
+      "&[data-in-range]": {
+        bg: "colorPalette.subtle",
+        color: "colorPalette.fg",
+        borderRadius: "0",
+        _hover: {
+          bg: "colorPalette.subtle"
+        }
+      },
+      "&[data-in-range][data-selected]": {
+        bg: "colorPalette.solid",
+        color: "colorPalette.contrast",
+        borderRadius: "0",
+        _hover: {
+          bg: "colorPalette.solid"
+        },
+        "&[data-range-start][data-range-end]": {
+          borderRadius: "l2"
+        },
+        "&[data-range-start]:not([data-range-end])": {
+          borderStartRadius: "l2",
+          borderEndRadius: "0"
+        },
+        "&[data-range-end]:not([data-range-start])": {
+          borderEndRadius: "l2",
+          borderStartRadius: "0"
+        }
+      },
+      _disabled: {
+        opacity: 0.4
+      }
+    },
+    monthSelect: {
+      height: "var(--datepicker-select-height)",
+      ps: "2",
+      pe: "8",
+      textStyle: "sm",
+      borderWidth: "1px",
+      borderRadius: "l2",
+      outline: "none",
+      focusVisibleRing: "inside",
+      appearance: "none",
+      fieldSizing: "content",
+      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "right 0.375rem center",
+      backgroundSize: "1.25em"
+    },
+    yearSelect: {
+      height: "var(--datepicker-select-height)",
+      ps: "2",
+      pe: "8",
+      textStyle: "sm",
+      borderWidth: "1px",
+      borderRadius: "l2",
+      outline: "none",
+      focusVisibleRing: "inside",
+      appearance: "none",
+      fieldSizing: "content",
+      backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`,
+      backgroundRepeat: "no-repeat",
+      backgroundPosition: "right 0.375rem center",
+      backgroundSize: "1.25em"
+    },
+    clearTrigger: {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "6",
+      height: "6",
+      flexShrink: 0,
+      textStyle: "xs",
+      borderRadius: "l2",
+      color: "fg.muted",
+      _hover: {
+        color: "fg"
+      },
+      focusVisibleRing: "inside",
+      _icon: {
+        width: "4",
+        height: "4"
+      }
+    }
+  },
+  variants: {
+    size: {
+      xs: {
+        root: {
+          "--datepicker-input-height": "sizes.8",
+          "--datepicker-input-px": "sizes.2",
+          "--datepicker-indicators-offset": "sizes.2"
+        },
+        view: {
+          "--table-cell-size": "sizes.8",
+          "--datepicker-nav-trigger-size": "sizes.7",
+          "--datepicker-select-height": "sizes.8"
+        }
+      },
+      sm: {
+        root: {
+          "--datepicker-input-height": "sizes.9",
+          "--datepicker-input-px": "sizes.2.5",
+          "--datepicker-indicators-offset": "sizes.2.5"
+        },
+        view: {
+          "--table-cell-size": "sizes.9",
+          "--datepicker-nav-trigger-size": "sizes.8",
+          "--datepicker-select-height": "sizes.9"
+        }
+      },
+      md: {
+        root: {
+          "--datepicker-input-height": "sizes.10",
+          "--datepicker-input-px": "sizes.3"
+        },
+        view: {
+          "--table-cell-size": "sizes.10",
+          "--datepicker-nav-trigger-size": "sizes.8",
+          "--datepicker-select-height": "sizes.10"
+        }
+      },
+      lg: {
+        root: {
+          "--datepicker-input-height": "sizes.11",
+          "--datepicker-input-px": "sizes.4"
+        },
+        view: {
+          "--table-cell-size": "sizes.10",
+          "--datepicker-nav-trigger-size": "sizes.9",
+          "--datepicker-select-height": "sizes.10"
+        }
+      },
+      xl: {
+        root: {
+          "--datepicker-input-height": "sizes.12",
+          "--datepicker-input-px": "sizes.4.5"
+        },
+        view: {
+          "--table-cell-size": "sizes.10",
+          "--datepicker-nav-trigger-size": "sizes.9",
+          "--datepicker-select-height": "sizes.10"
+        }
+      }
+    },
+    hideOutsideDays: {
+      true: {
+        tableCellTrigger: {
+          "&[data-outside-range]": {
+            visibility: "hidden"
+          }
+        }
+      }
+    },
+    variant: {
+      outline: {
+        input: {
+          bg: "transparent",
+          borderWidth: "1px",
+          borderColor: "border",
+          focusVisibleRing: "inside",
+          focusRingColor: "var(--focus-color)"
+        }
+      },
+      subtle: {
+        input: {
+          borderWidth: "1px",
+          borderColor: "transparent",
+          bg: "bg.muted",
+          focusVisibleRing: "inside",
+          focusRingColor: "var(--focus-color)"
+        }
+      },
+      flushed: {
+        input: {
+          bg: "transparent",
+          borderBottomWidth: "1px",
+          borderBottomColor: "border",
+          borderRadius: "0",
+          px: "0",
+          _focusVisible: {
+            borderColor: "var(--focus-color)",
+            boxShadow: "0px 1px 0px 0px var(--focus-color)",
+            _invalid: {
+              borderColor: "var(--error-color)",
+              boxShadow: "0px 1px 0px 0px var(--error-color)"
+            }
+          }
+        },
+        indicatorGroup: {
+          insetEnd: "0"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "outline"
+  }
+});
+
+exports.datePickerSlotRecipe = datePickerSlotRecipe;

package/dist/cjs/slot-recipes/dialog.cjs

@@ -26,7 +26,8 @@ const dialogSlotRecipe = def.defineSlotRecipe({
       top: 0,
       w: "100dvw",
       h: "100dvh",
-      zIndex: "var(--z-index)",
+      "--dialog-z-index": "zIndex.popover",
+      zIndex: "calc(var(--dialog-z-index) + var(--layer-index, 0) - 1)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"

package/dist/cjs/slot-recipes/drawer.cjs

@@ -26,7 +26,8 @@ const drawerSlotRecipe = def.defineSlotRecipe({
       top: 0,
       w: "100vw",
       h: "100dvh",
-      zIndex: "var(--z-index)",
+      "--drawer-z-index": "zIndex.popover",
+      zIndex: "calc(var(--drawer-z-index) + var(--layer-index, 0) - 1)",
       _open: {
         animationName: "fade-in",
         animationDuration: "slow"

package/dist/cjs/slot-recipes/index.cjs

@@ -16,6 +16,7 @@ var collapsible = require('./collapsible.cjs');
 var colorPicker = require('./color-picker.cjs');
 var combobox = require('./combobox.cjs');
 var dataList = require('./data-list.cjs');
+var datePicker = require('./date-picker.cjs');
 var dialog = require('./dialog.cjs');
 var drawer = require('./drawer.cjs');
 var editable = require('./editable.cjs');
@@ -70,6 +71,7 @@ const slotRecipes = {
   codeBlock: codeBlock.codeBlockSlotRecipe,
   collapsible: collapsible.collapsibleSlotRecipe,
   dataList: dataList.dataListSlotRecipe,
+  datePicker: datePicker.datePickerSlotRecipe,
   dialog: dialog.dialogSlotRecipe,
   drawer: drawer.drawerSlotRecipe,
   editable: editable.editableSlotRecipe,

package/dist/esm/keyframes.js

@@ -175,7 +175,7 @@ const keyframes = {
   },
   "slide-from-top": {
     "0%": {
-      translate: "0 -0.5rem"
+      translate: "0 calc(var(--slide-from-top-distance, 0.5rem) * -1)"
     },
     to: {
       translate: "0"
@@ -183,7 +183,7 @@ const keyframes = {
   },
   "slide-from-bottom": {
     "0%": {
-      translate: "0 0.5rem"
+      translate: "0 var(--slide-from-bottom-distance, 0.5rem)"
     },
     to: {
       translate: "0"
@@ -191,7 +191,7 @@ const keyframes = {
   },
   "slide-from-left": {
     "0%": {
-      translate: "-0.5rem 0"
+      translate: "calc(var(--slide-from-left-distance, 0.5rem) * -1) 0"
     },
     to: {
       translate: "0"
@@ -199,7 +199,7 @@ const keyframes = {
   },
   "slide-from-right": {
     "0%": {
-      translate: "0.5rem 0"
+      translate: "var(--slide-from-right-distance, 0.5rem) 0"
     },
     to: {
       translate: "0"
@@ -210,7 +210,7 @@ const keyframes = {
       translate: "0"
     },
     to: {
-      translate: "0 -0.5rem"
+      translate: "0 calc(var(--slide-to-top-distance, 0.5rem) * -1)"
     }
   },
   "slide-to-bottom": {
@@ -218,7 +218,7 @@ const keyframes = {
       translate: "0"
     },
     to: {
-      translate: "0 0.5rem"
+      translate: "0 var(--slide-to-bottom-distance, 0.5rem)"
     }
   },
   "slide-to-left": {
@@ -226,7 +226,7 @@ const keyframes = {
       translate: "0"
     },
     to: {
-      translate: "-0.5rem 0"
+      translate: "calc(var(--slide-to-left-distance, 0.5rem) * -1) 0"
     }
   },
   "slide-to-right": {
@@ -234,7 +234,7 @@ const keyframes = {
       translate: "0"
     },
     to: {
-      translate: "0.5rem 0"
+      translate: "var(--slide-to-right-distance, 0.5rem) 0"
     }
   },
   "scale-in": {

package/dist/esm/recipes/index.js

@@ -4,7 +4,6 @@ import { buttonRecipe } from './button.js';
 import { checkmarkRecipe } from './checkmark.js';
 import { codeRecipe } from './code.js';
 import { colorSwatchRecipe } from './color-swatch.js';
-import { containerRecipe } from './container.js';
 import { headingRecipe } from './heading.js';
 import { iconRecipe } from './icon.js';
 import { inputRecipe } from './input.js';
@@ -23,7 +22,6 @@ const recipes = {
   badge: badgeRecipe,
   button: buttonRecipe,
   code: codeRecipe,
-  container: containerRecipe,
   heading: headingRecipe,
   input: inputRecipe,
   inputAddon: inputAddonRecipe,

package/dist/esm/semantic-tokens/shadows.js

@@ -5,48 +5,48 @@ const shadows = defineSemanticTokens.shadows({
   xs: {
     value: {
       _light: "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
-      _dark: "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
+      _dark: "0px 1px 1px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/20}"
     }
   },
   sm: {
     value: {
       _light: "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
-      _dark: "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+      _dark: "0px 2px 4px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   md: {
     value: {
       _light: "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
-      _dark: "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+      _dark: "0px 4px 8px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   lg: {
     value: {
       _light: "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
-      _dark: "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+      _dark: "0px 8px 16px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   xl: {
     value: {
       _light: "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
-      _dark: "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+      _dark: "0px 16px 24px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   "2xl": {
     value: {
       _light: "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
-      _dark: "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+      _dark: "0px 24px 40px {colors.black/64}, 0px 0px 1px inset {colors.gray.300/30}"
     }
   },
   inner: {
     value: {
-      _light: "inset 0 2px 4px 0 {black/5}",
-      _dark: "inset 0 2px 4px 0 black"
+      _light: "inset 0 2px 4px 0 {colors.black/5}",
+      _dark: "inset 0 2px 4px 0 {colors.black}"
     }
   },
   inset: {
     value: {
-      _light: "inset 0 0 0 1px {black/5}",
+      _light: "inset 0 0 0 1px {colors.black/5}",
       _dark: "inset 0 0 0 1px {colors.gray.300/5}"
     }
   }