@chakra-ui/panda-preset 3.33.0 → 3.35.0

package/dist/esm/slot-recipes/date-picker.js

@@ -0,0 +1,460 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const datePickerSlotRecipe = 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"
+  }
+});
+
+export { datePickerSlotRecipe };

package/dist/esm/slot-recipes/dialog.js

@@ -24,7 +24,8 @@ const dialogSlotRecipe = 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/esm/slot-recipes/drawer.js

@@ -24,7 +24,8 @@ const drawerSlotRecipe = 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/esm/slot-recipes/index.js

@@ -14,6 +14,7 @@ import { collapsibleSlotRecipe } from './collapsible.js';
 import { colorPickerSlotRecipe } from './color-picker.js';
 import { comboboxSlotRecipe } from './combobox.js';
 import { dataListSlotRecipe } from './data-list.js';
+import { datePickerSlotRecipe } from './date-picker.js';
 import { dialogSlotRecipe } from './dialog.js';
 import { drawerSlotRecipe } from './drawer.js';
 import { editableSlotRecipe } from './editable.js';
@@ -68,6 +69,7 @@ const slotRecipes = {
   codeBlock: codeBlockSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   dataList: dataListSlotRecipe,
+  datePicker: datePickerSlotRecipe,
   dialog: dialogSlotRecipe,
   drawer: drawerSlotRecipe,
   editable: editableSlotRecipe,

package/dist/types/recipes/index.d.ts

@@ -2,7 +2,6 @@ export declare const recipes: {
     badge: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
     button: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
     code: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
-    container: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
     heading: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
     input: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;
     inputAddon: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;

package/dist/types/slot-recipes/date-picker.d.ts

@@ -0,0 +1 @@
+export declare const datePickerSlotRecipe: import("@pandacss/types").SlotRecipeConfig;

package/dist/types/slot-recipes/index.d.ts

@@ -12,6 +12,7 @@ export declare const slotRecipes: {
     codeBlock: import("@pandacss/types").SlotRecipeConfig;
     collapsible: import("@pandacss/types").SlotRecipeConfig;
     dataList: import("@pandacss/types").SlotRecipeConfig;
+    datePicker: import("@pandacss/types").SlotRecipeConfig;
     dialog: import("@pandacss/types").SlotRecipeConfig;
     drawer: import("@pandacss/types").SlotRecipeConfig;
     editable: import("@pandacss/types").SlotRecipeConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.33.0",
+  "version": "3.35.0",
   "description": "Panda preset for Chakra UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -48,8 +48,8 @@
     "@pandacss/types": "^1.4.2"
   },
   "devDependencies": {
-    "globby": "14.1.0",
-    "@chakra-ui/cli": "3.33.0"
+    "globby": "16.1.1",
+    "@chakra-ui/cli": "3.35.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",

package/dist/cjs/recipes/container.cjs

@@ -1,35 +0,0 @@
-"use strict";
-'use strict';
-
-var def = require('../def.cjs');
-
-const containerRecipe = def.defineRecipe({
-  className: "container",
-  base: {
-    position: "relative",
-    maxWidth: "8xl",
-    w: "100%",
-    mx: "auto",
-    px: {
-      base: "4",
-      md: "6",
-      lg: "8"
-    }
-  },
-  variants: {
-    centerContent: {
-      true: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center"
-      }
-    },
-    fluid: {
-      true: {
-        maxWidth: "full"
-      }
-    }
-  }
-});
-
-exports.containerRecipe = containerRecipe;

package/dist/esm/recipes/container.js

@@ -1,33 +0,0 @@
-"use strict";
-import { defineRecipe } from '../def.js';
-
-const containerRecipe = defineRecipe({
-  className: "container",
-  base: {
-    position: "relative",
-    maxWidth: "8xl",
-    w: "100%",
-    mx: "auto",
-    px: {
-      base: "4",
-      md: "6",
-      lg: "8"
-    }
-  },
-  variants: {
-    centerContent: {
-      true: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center"
-      }
-    },
-    fluid: {
-      true: {
-        maxWidth: "full"
-      }
-    }
-  }
-});
-
-export { containerRecipe };

package/dist/types/recipes/container.d.ts

@@ -1 +0,0 @@
-export declare const containerRecipe: import("@pandacss/types").RecipeConfig<import("@pandacss/types").RecipeVariantRecord>;