@chakra-ui/panda-preset 3.25.0 → 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');
@@ -73,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,

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/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';
@@ -71,6 +72,7 @@ const slotRecipes = {
   fileUpload: fileUploadSlotRecipe,
   hoverCard: hoverCardSlotRecipe,
   list: listSlotRecipe,
+  listbox: listboxSlotRecipe,
   menu: menuSlotRecipe,
   nativeSelect: nativeSelectSlotRecipe,
   numberInput: numberInputSlotRecipe,

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/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;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chakra-ui/panda-preset",
-  "version": "3.25.0",
+  "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.25.0"
+    "@chakra-ui/cli": "3.26.0"
   },
   "scripts": {
     "theme:eject": "chakra eject --outdir=src",