@chakra-ui/panda-preset 3.24.2 → 3.26.0

package/dist/cjs/recipes/checkmark.cjs

@@ -80,6 +80,11 @@ const checkmarkRecipe = def.defineRecipe({
           borderColor: "colorPalette.solid"
         }
       }
+    },
+    filled: {
+      true: {
+        bg: "bg"
+      }
     }
   },
   defaultVariants: {

package/dist/cjs/recipes/radiomark.cjs

@@ -91,6 +91,11 @@ const radiomarkRecipe = def.defineRecipe({
       lg: {
         boxSize: "6"
       }
+    },
+    filled: {
+      true: {
+        bg: "bg"
+      }
     }
   },
   defaultVariants: {

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

@@ -20,6 +20,7 @@ const comboboxSlotRecipe = def.defineSlotRecipe({
     "list",
     "positioner",
     "trigger",
+    "empty",
     "indicatorGroup",
     "empty"
   ],

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

@@ -24,6 +24,7 @@ var fieldset = require('./fieldset.cjs');
 var fileUpload = require('./file-upload.cjs');
 var hoverCard = require('./hover-card.cjs');
 var list = require('./list.cjs');
+var listbox = require('./listbox.cjs');
 var menu = require('./menu.cjs');
 var nativeSelect = require('./native-select.cjs');
 var numberInput = require('./number-input.cjs');
@@ -35,6 +36,7 @@ var qrCode = require('./qr-code.cjs');
 var radioCard = require('./radio-card.cjs');
 var radioGroup = require('./radio-group.cjs');
 var ratingGroup = require('./rating-group.cjs');
+var scrollArea = require('./scroll-area.cjs');
 var segmentGroup = require('./segment-group.cjs');
 var select = require('./select.cjs');
 var slider = require('./slider.cjs');
@@ -72,6 +74,7 @@ const slotRecipes = {
   fileUpload: fileUpload.fileUploadSlotRecipe,
   hoverCard: hoverCard.hoverCardSlotRecipe,
   list: list.listSlotRecipe,
+  listbox: listbox.listboxSlotRecipe,
   menu: menu.menuSlotRecipe,
   nativeSelect: nativeSelect.nativeSelectSlotRecipe,
   numberInput: numberInput.numberInputSlotRecipe,
@@ -82,6 +85,7 @@ const slotRecipes = {
   radioCard: radioCard.radioCardSlotRecipe,
   radioGroup: radioGroup.radioGroupSlotRecipe,
   ratingGroup: ratingGroup.ratingGroupSlotRecipe,
+  scrollArea: scrollArea.scrollAreaSlotRecipe,
   segmentGroup: segmentGroup.segmentGroupSlotRecipe,
   select: select.selectSlotRecipe,
   combobox: combobox.comboboxSlotRecipe,

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

@@ -0,0 +1,146 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const listboxSlotRecipe = def.defineSlotRecipe({
+  className: "listbox",
+  slots: [
+    "label",
+    "input",
+    "item",
+    "itemText",
+    "itemIndicator",
+    "itemGroup",
+    "itemGroupLabel",
+    "content",
+    "root",
+    "valueText",
+    "empty"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      width: "full"
+    },
+    content: {
+      display: "flex",
+      maxH: "96",
+      p: "1",
+      gap: "1",
+      textStyle: "sm",
+      outline: "none",
+      scrollPadding: "1",
+      _horizontal: {
+        flexDirection: "row",
+        overflowX: "auto"
+      },
+      _vertical: {
+        flexDirection: "column",
+        overflowY: "auto"
+      },
+      "--listbox-item-padding-x": "spacing.2",
+      "--listbox-item-padding-y": "spacing.1.5"
+    },
+    item: {
+      position: "relative",
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      cursor: "pointer",
+      justifyContent: "space-between",
+      flex: "1",
+      textAlign: "start",
+      borderRadius: "l1",
+      py: "var(--listbox-item-padding-y)",
+      px: "var(--listbox-item-padding-x)",
+      _highlighted: {
+        outline: "2px solid",
+        outlineColor: "border.emphasized"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        opacity: "0.5"
+      }
+    },
+    empty: {
+      py: "var(--listbox-item-padding-y)",
+      px: "var(--listbox-item-padding-x)"
+    },
+    itemText: {
+      flex: "1"
+    },
+    itemGroup: {
+      mt: "1.5",
+      _first: {
+        mt: "0"
+      }
+    },
+    itemGroupLabel: {
+      py: "1.5",
+      px: "2",
+      fontWeight: "medium"
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      textStyle: "sm",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    valueText: {
+      lineClamp: "1",
+      maxW: "80%"
+    },
+    itemIndicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      _icon: {
+        boxSize: "4"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        content: {
+          bg: "bg.panel",
+          borderWidth: "1px",
+          borderRadius: "l2"
+        },
+        item: {
+          _hover: {
+            bg: "bg.emphasized/60"
+          },
+          _selected: {
+            bg: "bg.muted"
+          }
+        }
+      },
+      solid: {
+        content: {
+          bg: "bg.panel",
+          borderWidth: "1px",
+          borderRadius: "l2"
+        },
+        item: {
+          _selected: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast"
+          }
+        }
+      },
+      plain: {}
+    }
+  },
+  defaultVariants: {
+    variant: "subtle"
+  }
+});
+
+exports.listboxSlotRecipe = listboxSlotRecipe;

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

@@ -121,7 +121,8 @@ const menuSlotRecipe = def.defineSlotRecipe({
       sm: {
         content: {
           minW: "8rem",
-          padding: "1"
+          padding: "1",
+          scrollPadding: "1"
         },
         item: {
           gap: "1",
@@ -133,7 +134,8 @@ const menuSlotRecipe = def.defineSlotRecipe({
       md: {
         content: {
           minW: "8rem",
-          padding: "1.5"
+          padding: "1.5",
+          scrollPadding: "1.5"
         },
         item: {
           gap: "2",

package/dist/cjs/slot-recipes/scroll-area.cjs

@@ -0,0 +1,144 @@
+"use strict";
+'use strict';
+
+var def = require('../def.cjs');
+
+const scrollAreaSlotRecipe = def.defineSlotRecipe({
+  className: "scroll-area",
+  slots: ["root", "viewport", "content", "scrollbar", "thumb", "corner"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      overflow: "hidden",
+      "--scrollbar-margin": "2px",
+      "--scrollbar-click-area": "calc(var(--scrollbar-size) + calc(var(--scrollbar-margin) * 2))"
+    },
+    viewport: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+      borderRadius: "inherit",
+      WebkitOverflowScrolling: "touch",
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      }
+    },
+    content: {
+      minWidth: "100%"
+    },
+    scrollbar: {
+      display: "flex",
+      userSelect: "none",
+      touchAction: "none",
+      borderRadius: "full",
+      colorPalette: "gray",
+      transition: "opacity 150ms 300ms",
+      position: "relative",
+      margin: "var(--scrollbar-margin)",
+      "&:not([data-overflow-x], [data-overflow-y])": {
+        display: "none"
+      },
+      bg: "{colors.colorPalette.solid/10}",
+      "--thumb-bg": "{colors.colorPalette.solid/25}",
+      "&:is(:hover, :active)": {
+        "--thumb-bg": "{colors.colorPalette.solid/50}"
+      },
+      _before: {
+        content: '""',
+        position: "absolute"
+      },
+      _vertical: {
+        width: "var(--scrollbar-size)",
+        flexDirection: "column",
+        "&::before": {
+          width: "var(--scrollbar-click-area)",
+          height: "100%",
+          insetInlineStart: "calc(var(--scrollbar-margin) * -1)"
+        }
+      },
+      _horizontal: {
+        height: "var(--scrollbar-size)",
+        flexDirection: "row",
+        "&::before": {
+          height: "var(--scrollbar-click-area)",
+          width: "100%",
+          top: "calc(var(--scrollbar-margin) * -1)"
+        }
+      }
+    },
+    thumb: {
+      borderRadius: "inherit",
+      bg: "var(--thumb-bg)",
+      transition: "backgrounds",
+      _vertical: {
+        width: "full"
+      },
+      _horizontal: {
+        height: "full"
+      }
+    },
+    corner: {
+      bg: "bg.muted",
+      margin: "var(--scrollbar-margin)",
+      opacity: 0,
+      transition: "opacity 150ms 300ms",
+      "&[data-hover]": {
+        transitionDelay: "0ms",
+        opacity: 1
+      }
+    }
+  },
+  variants: {
+    variant: {
+      hover: {
+        scrollbar: {
+          opacity: "0",
+          "&[data-hover], &[data-scrolling]": {
+            opacity: "1",
+            transitionDuration: "faster",
+            transitionDelay: "0ms"
+          }
+        }
+      },
+      always: {
+        scrollbar: {
+          opacity: "1"
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--scrollbar-size": "sizes.1"
+        }
+      },
+      sm: {
+        root: {
+          "--scrollbar-size": "sizes.1.5"
+        }
+      },
+      md: {
+        root: {
+          "--scrollbar-size": "sizes.2"
+        }
+      },
+      lg: {
+        root: {
+          "--scrollbar-size": "sizes.3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "hover"
+  }
+});
+
+exports.scrollAreaSlotRecipe = scrollAreaSlotRecipe;

package/dist/esm/recipes/checkmark.js

@@ -78,6 +78,11 @@ const checkmarkRecipe = defineRecipe({
           borderColor: "colorPalette.solid"
         }
       }
+    },
+    filled: {
+      true: {
+        bg: "bg"
+      }
     }
   },
   defaultVariants: {

package/dist/esm/recipes/radiomark.js

@@ -89,6 +89,11 @@ const radiomarkRecipe = defineRecipe({
       lg: {
         boxSize: "6"
       }
+    },
+    filled: {
+      true: {
+        bg: "bg"
+      }
     }
   },
   defaultVariants: {

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

@@ -18,6 +18,7 @@ const comboboxSlotRecipe = defineSlotRecipe({
     "list",
     "positioner",
     "trigger",
+    "empty",
     "indicatorGroup",
     "empty"
   ],

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

@@ -22,6 +22,7 @@ import { fieldsetSlotRecipe } from './fieldset.js';
 import { fileUploadSlotRecipe } from './file-upload.js';
 import { hoverCardSlotRecipe } from './hover-card.js';
 import { listSlotRecipe } from './list.js';
+import { listboxSlotRecipe } from './listbox.js';
 import { menuSlotRecipe } from './menu.js';
 import { nativeSelectSlotRecipe } from './native-select.js';
 import { numberInputSlotRecipe } from './number-input.js';
@@ -33,6 +34,7 @@ import { qrCodeSlotRecipe } from './qr-code.js';
 import { radioCardSlotRecipe } from './radio-card.js';
 import { radioGroupSlotRecipe } from './radio-group.js';
 import { ratingGroupSlotRecipe } from './rating-group.js';
+import { scrollAreaSlotRecipe } from './scroll-area.js';
 import { segmentGroupSlotRecipe } from './segment-group.js';
 import { selectSlotRecipe } from './select.js';
 import { sliderSlotRecipe } from './slider.js';
@@ -70,6 +72,7 @@ const slotRecipes = {
   fileUpload: fileUploadSlotRecipe,
   hoverCard: hoverCardSlotRecipe,
   list: listSlotRecipe,
+  listbox: listboxSlotRecipe,
   menu: menuSlotRecipe,
   nativeSelect: nativeSelectSlotRecipe,
   numberInput: numberInputSlotRecipe,
@@ -80,6 +83,7 @@ const slotRecipes = {
   radioCard: radioCardSlotRecipe,
   radioGroup: radioGroupSlotRecipe,
   ratingGroup: ratingGroupSlotRecipe,
+  scrollArea: scrollAreaSlotRecipe,
   segmentGroup: segmentGroupSlotRecipe,
   select: selectSlotRecipe,
   combobox: comboboxSlotRecipe,

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

@@ -0,0 +1,144 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const listboxSlotRecipe = defineSlotRecipe({
+  className: "listbox",
+  slots: [
+    "label",
+    "input",
+    "item",
+    "itemText",
+    "itemIndicator",
+    "itemGroup",
+    "itemGroupLabel",
+    "content",
+    "root",
+    "valueText",
+    "empty"
+  ],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "1.5",
+      width: "full"
+    },
+    content: {
+      display: "flex",
+      maxH: "96",
+      p: "1",
+      gap: "1",
+      textStyle: "sm",
+      outline: "none",
+      scrollPadding: "1",
+      _horizontal: {
+        flexDirection: "row",
+        overflowX: "auto"
+      },
+      _vertical: {
+        flexDirection: "column",
+        overflowY: "auto"
+      },
+      "--listbox-item-padding-x": "spacing.2",
+      "--listbox-item-padding-y": "spacing.1.5"
+    },
+    item: {
+      position: "relative",
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      gap: "2",
+      cursor: "pointer",
+      justifyContent: "space-between",
+      flex: "1",
+      textAlign: "start",
+      borderRadius: "l1",
+      py: "var(--listbox-item-padding-y)",
+      px: "var(--listbox-item-padding-x)",
+      _highlighted: {
+        outline: "2px solid",
+        outlineColor: "border.emphasized"
+      },
+      _disabled: {
+        pointerEvents: "none",
+        opacity: "0.5"
+      }
+    },
+    empty: {
+      py: "var(--listbox-item-padding-y)",
+      px: "var(--listbox-item-padding-x)"
+    },
+    itemText: {
+      flex: "1"
+    },
+    itemGroup: {
+      mt: "1.5",
+      _first: {
+        mt: "0"
+      }
+    },
+    itemGroupLabel: {
+      py: "1.5",
+      px: "2",
+      fontWeight: "medium"
+    },
+    label: {
+      fontWeight: "medium",
+      userSelect: "none",
+      textStyle: "sm",
+      _disabled: {
+        layerStyle: "disabled"
+      }
+    },
+    valueText: {
+      lineClamp: "1",
+      maxW: "80%"
+    },
+    itemIndicator: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      _icon: {
+        boxSize: "4"
+      }
+    }
+  },
+  variants: {
+    variant: {
+      subtle: {
+        content: {
+          bg: "bg.panel",
+          borderWidth: "1px",
+          borderRadius: "l2"
+        },
+        item: {
+          _hover: {
+            bg: "bg.emphasized/60"
+          },
+          _selected: {
+            bg: "bg.muted"
+          }
+        }
+      },
+      solid: {
+        content: {
+          bg: "bg.panel",
+          borderWidth: "1px",
+          borderRadius: "l2"
+        },
+        item: {
+          _selected: {
+            bg: "colorPalette.solid",
+            color: "colorPalette.contrast"
+          }
+        }
+      },
+      plain: {}
+    }
+  },
+  defaultVariants: {
+    variant: "subtle"
+  }
+});
+
+export { listboxSlotRecipe };

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

@@ -119,7 +119,8 @@ const menuSlotRecipe = defineSlotRecipe({
       sm: {
         content: {
           minW: "8rem",
-          padding: "1"
+          padding: "1",
+          scrollPadding: "1"
         },
         item: {
           gap: "1",
@@ -131,7 +132,8 @@ const menuSlotRecipe = defineSlotRecipe({
       md: {
         content: {
           minW: "8rem",
-          padding: "1.5"
+          padding: "1.5",
+          scrollPadding: "1.5"
         },
         item: {
           gap: "2",

package/dist/esm/slot-recipes/scroll-area.js

@@ -0,0 +1,142 @@
+"use strict";
+import { defineSlotRecipe } from '../def.js';
+
+const scrollAreaSlotRecipe = defineSlotRecipe({
+  className: "scroll-area",
+  slots: ["root", "viewport", "content", "scrollbar", "thumb", "corner"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      overflow: "hidden",
+      "--scrollbar-margin": "2px",
+      "--scrollbar-click-area": "calc(var(--scrollbar-size) + calc(var(--scrollbar-margin) * 2))"
+    },
+    viewport: {
+      display: "flex",
+      flexDirection: "column",
+      height: "100%",
+      width: "100%",
+      borderRadius: "inherit",
+      WebkitOverflowScrolling: "touch",
+      scrollbarWidth: "none",
+      "&::-webkit-scrollbar": {
+        display: "none"
+      }
+    },
+    content: {
+      minWidth: "100%"
+    },
+    scrollbar: {
+      display: "flex",
+      userSelect: "none",
+      touchAction: "none",
+      borderRadius: "full",
+      colorPalette: "gray",
+      transition: "opacity 150ms 300ms",
+      position: "relative",
+      margin: "var(--scrollbar-margin)",
+      "&:not([data-overflow-x], [data-overflow-y])": {
+        display: "none"
+      },
+      bg: "{colors.colorPalette.solid/10}",
+      "--thumb-bg": "{colors.colorPalette.solid/25}",
+      "&:is(:hover, :active)": {
+        "--thumb-bg": "{colors.colorPalette.solid/50}"
+      },
+      _before: {
+        content: '""',
+        position: "absolute"
+      },
+      _vertical: {
+        width: "var(--scrollbar-size)",
+        flexDirection: "column",
+        "&::before": {
+          width: "var(--scrollbar-click-area)",
+          height: "100%",
+          insetInlineStart: "calc(var(--scrollbar-margin) * -1)"
+        }
+      },
+      _horizontal: {
+        height: "var(--scrollbar-size)",
+        flexDirection: "row",
+        "&::before": {
+          height: "var(--scrollbar-click-area)",
+          width: "100%",
+          top: "calc(var(--scrollbar-margin) * -1)"
+        }
+      }
+    },
+    thumb: {
+      borderRadius: "inherit",
+      bg: "var(--thumb-bg)",
+      transition: "backgrounds",
+      _vertical: {
+        width: "full"
+      },
+      _horizontal: {
+        height: "full"
+      }
+    },
+    corner: {
+      bg: "bg.muted",
+      margin: "var(--scrollbar-margin)",
+      opacity: 0,
+      transition: "opacity 150ms 300ms",
+      "&[data-hover]": {
+        transitionDelay: "0ms",
+        opacity: 1
+      }
+    }
+  },
+  variants: {
+    variant: {
+      hover: {
+        scrollbar: {
+          opacity: "0",
+          "&[data-hover], &[data-scrolling]": {
+            opacity: "1",
+            transitionDuration: "faster",
+            transitionDelay: "0ms"
+          }
+        }
+      },
+      always: {
+        scrollbar: {
+          opacity: "1"
+        }
+      }
+    },
+    size: {
+      xs: {
+        root: {
+          "--scrollbar-size": "sizes.1"
+        }
+      },
+      sm: {
+        root: {
+          "--scrollbar-size": "sizes.1.5"
+        }
+      },
+      md: {
+        root: {
+          "--scrollbar-size": "sizes.2"
+        }
+      },
+      lg: {
+        root: {
+          "--scrollbar-size": "sizes.3"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "hover"
+  }
+});
+
+export { scrollAreaSlotRecipe };

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

@@ -20,6 +20,7 @@ export declare const slotRecipes: {
     fileUpload: import("@pandacss/types").SlotRecipeConfig;
     hoverCard: import("@pandacss/types").SlotRecipeConfig;
     list: import("@pandacss/types").SlotRecipeConfig;
+    listbox: import("@pandacss/types").SlotRecipeConfig;
     menu: import("@pandacss/types").SlotRecipeConfig;
     nativeSelect: import("@pandacss/types").SlotRecipeConfig;
     numberInput: import("@pandacss/types").SlotRecipeConfig;
@@ -30,6 +31,7 @@ export declare const slotRecipes: {
     radioCard: import("@pandacss/types").SlotRecipeConfig;
     radioGroup: import("@pandacss/types").SlotRecipeConfig;
     ratingGroup: import("@pandacss/types").SlotRecipeConfig;
+    scrollArea: import("@pandacss/types").SlotRecipeConfig;
     segmentGroup: import("@pandacss/types").SlotRecipeConfig;
     select: import("@pandacss/types").SlotRecipeConfig;
     combobox: import("@pandacss/types").SlotRecipeConfig;

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

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

package/dist/types/slot-recipes/scroll-area.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.24.2",
+  "version": "3.26.0",
   "description": "Panda preset for Chakra UI",
   "type": "module",
   "main": "dist/cjs/index.cjs",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "globby": "14.1.0",
-    "@chakra-ui/cli": "3.24.2"
+    "@chakra-ui/cli": "3.26.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",