@bearmenu/ui 0.5.2 → 0.6.1

package/dist/components/scroll-fade.js

@@ -0,0 +1,116 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var fromMap = {
+  background: "from-background",
+  card: "from-card",
+  muted: "from-muted"
+};
+var sizeMap = {
+  vertical: { sm: "h-6", md: "h-12", lg: "h-20" },
+  horizontal: { sm: "w-8", md: "w-16", lg: "w-28" }
+};
+var ScrollFade = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      orientation = "vertical",
+      fadeColor = "background",
+      size = "md",
+      className,
+      scrollClassName,
+      children
+    } = _b, props = __objRest(_b, [
+      "orientation",
+      "fadeColor",
+      "size",
+      "className",
+      "scrollClassName",
+      "children"
+    ]);
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const [atStart, setAtStart] = React.useState(true);
+    const [atEnd, setAtEnd] = React.useState(true);
+    const update = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      if (orientation === "vertical") {
+        const overflow = el.scrollHeight - el.clientHeight;
+        setAtStart(el.scrollTop <= 1);
+        setAtEnd(overflow <= 1 || el.scrollTop >= overflow - 1);
+      } else {
+        const overflow = el.scrollWidth - el.clientWidth;
+        setAtStart(el.scrollLeft <= 1);
+        setAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 1);
+      }
+    }, [orientation]);
+    React.useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      update();
+      el.addEventListener("scroll", update, { passive: true });
+      const ro = new ResizeObserver(update);
+      ro.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        ro.disconnect();
+      };
+    }, [update]);
+    const fromClass = fromMap[fadeColor];
+    const fadeSize = sizeMap[orientation][size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative isolate flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            __spreadProps(__spreadValues({
+              ref: innerRef,
+              className: cn(
+                "min-h-0 min-w-0 flex-1",
+                orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto",
+                scrollClassName
+              )
+            }, props), {
+              children
+            })
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute z-10 transition-opacity duration-300",
+                orientation === "vertical" ? `inset-x-0 top-0 ${fadeSize} bg-gradient-to-b` : `inset-y-0 left-0 ${fadeSize} bg-gradient-to-r`,
+                fromClass,
+                atStart ? "opacity-0" : "opacity-100"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              className: cn(
+                "pointer-events-none absolute z-10 transition-opacity duration-300",
+                orientation === "vertical" ? `inset-x-0 bottom-0 ${fadeSize} bg-gradient-to-t` : `inset-y-0 right-0 ${fadeSize} bg-gradient-to-l`,
+                fromClass,
+                atEnd ? "opacity-0" : "opacity-100"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ScrollFade.displayName = "ScrollFade";
+
+export { ScrollFade };

package/dist/components/search-bar.d.ts

@@ -10,8 +10,7 @@ interface SearchBarProps {
     autoFocus?: boolean;
     inputAriaLabel?: string;
     size?: "default" | "compact";
-    variant?: "primary" | "secondary" | "editorial";
 }
-declare function SearchBar({ placeholder, value, onChange, isSearching, className, inputClassName, autoFocus, inputAriaLabel, size, variant, }: SearchBarProps): react_jsx_runtime.JSX.Element;
+declare function SearchBar({ placeholder, value, onChange, isSearching, className, inputClassName, autoFocus, inputAriaLabel, size, }: SearchBarProps): react_jsx_runtime.JSX.Element;
 
 export { SearchBar };

package/dist/components/search-bar.js

@@ -1,5 +1,3 @@
-import { Card } from '../chunk-QJ54Z7TC.js';
-import '../chunk-4KOMHDZD.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
 import { Search, Loader2 } from 'lucide-react';
@@ -14,79 +12,58 @@ function SearchBar({
   inputClassName,
   autoFocus = false,
   inputAriaLabel,
-  size = "default",
-  variant = "editorial"
+  size = "default"
 }) {
   const handleInputChange = (e) => {
-    const newValue = e.target.value;
-    onChange == null ? void 0 : onChange(newValue);
+    onChange == null ? void 0 : onChange(e.target.value);
   };
-  const Wrapper = variant === "editorial" ? "div" : Card;
-  const wrapperClassName = variant === "editorial" ? cn(
-    "bg-surface border border-border rounded-[14px] h-12 flex items-center transition-colors focus-within:border-primary",
-    className
-  ) : cn(
-    "border-2 border-primary-foreground/20 backdrop-blur-xl rounded-lg p-0",
-    size === "compact" ? "md:p-1.5" : "md:p-2",
-    variant === "primary" ? "!bg-primary-foreground/10 !text-primary !border-primary/20" : "!bg-primary !text-primary-foreground !border-primary/20",
-    className
-  );
-  return /* @__PURE__ */ jsx(Wrapper, { className: wrapperClassName, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "absolute top-1/2 z-10 -translate-y-1/2",
-          size === "compact" ? "left-3.5" : "left-4"
-        ),
-        children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center rounded-[14px] border border-border bg-surface transition-colors focus-within:border-primary",
+        size === "compact" ? "h-10" : "h-12",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "relative flex w-full items-center", children: [
+        /* @__PURE__ */ jsx(
           Search,
           {
             className: cn(
-              variant === "editorial" ? "text-muted-foreground" : variant === "primary" ? "text-primary" : "text-primary-foreground",
-              size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
+              "pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-muted-foreground",
+              size === "compact" ? "left-3.5 h-3.5 w-3.5" : "left-4 h-4 w-4"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            placeholder,
+            value,
+            onChange: handleInputChange,
+            autoFocus,
+            "aria-label": inputAriaLabel != null ? inputAriaLabel : placeholder,
+            className: cn(
+              "w-full border-0 bg-transparent text-foreground placeholder:text-muted-foreground focus:outline-none focus-visible:outline-none",
+              size === "compact" ? "rounded-lg py-2.5 pl-9 pr-3 text-base placeholder:text-base md:text-sm md:placeholder:text-sm" : "rounded-[14px] py-3 pl-10 pr-4 text-base placeholder:text-base md:text-[14px] md:placeholder:text-[14px]",
+              inputClassName
             )
           }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        placeholder,
-        value,
-        onChange: handleInputChange,
-        autoFocus,
-        "aria-label": inputAriaLabel != null ? inputAriaLabel : placeholder,
-        className: cn(
-          "w-full bg-transparent border-0 focus:outline-none focus-visible:outline-none",
-          size === "compact" ? "pl-9 pr-3 py-2.5 text-sm placeholder:text-sm rounded-lg" : "pl-10 pr-4 py-3 text-[14px] placeholder:text-[14px] rounded-[14px]",
-          variant === "editorial" ? "text-foreground placeholder:text-muted-foreground" : variant === "primary" ? "!text-primary placeholder:text-primary/60" : "!text-primary-foreground placeholder:text-primary-foreground/60",
-          inputClassName
-        )
-      }
-    ),
-    isSearching && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: cn(
-          "absolute top-1/2 -translate-y-1/2",
-          size === "compact" ? "right-3.5" : "right-4"
         ),
-        children: /* @__PURE__ */ jsx(
+        isSearching && /* @__PURE__ */ jsx(
           Loader2,
           {
+            "aria-hidden": true,
             className: cn(
-              "animate-spin",
-              variant === "editorial" ? "text-muted-foreground" : "text-primary/60",
-              size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
+              "absolute top-1/2 -translate-y-1/2 animate-spin text-muted-foreground",
+              size === "compact" ? "right-3.5 h-3.5 w-3.5" : "right-4 h-4 w-4"
             )
           }
         )
-      }
-    )
-  ] }) });
+      ] })
+    }
+  );
 }
 
 export { SearchBar };

package/dist/components/searchable-select.js

@@ -1,12 +1,12 @@
-import { Popover, PopoverTrigger, PopoverContent } from '../chunk-4UO73SKC.js';
-import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-7H54PTVH.js';
-import '../chunk-4AVS6CV4.js';
-import { Button } from '../chunk-2BMJRXQX.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../chunk-UUJVXN2O.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-PSR7N36A.js';
+import '../chunk-WKMLZDUT.js';
+import { Button } from '../chunk-ZFNOCP6W.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';
 import * as React from 'react';
-import { X, ChevronsUpDown, Check } from 'lucide-react';
+import { ChevronsUpDown, Check, X } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function SearchableSelect({
@@ -22,82 +22,86 @@ function SearchableSelect({
   onSearchChange
 }) {
   const [open, setOpen] = React.useState(false);
+  const listboxId = React.useId();
   const selectedOption = options.find((opt) => opt.value === value);
   const displayLabel = (selectedOption == null ? void 0 : selectedOption.label) || (value ? value : void 0);
   const handleSelect = (selectedValue) => {
     onValueChange(selectedValue === value ? void 0 : selectedValue);
     setOpen(false);
   };
-  const handleClear = (e) => {
-    e.stopPropagation();
-    onValueChange(void 0);
-  };
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
-      Button,
-      {
-        variant: "outline",
-        role: "combobox",
-        "aria-expanded": open,
-        className: cn(
-          "w-full justify-between h-10",
-          !value && "text-muted-foreground",
-          className
-        ),
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel || placeholder }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            value && /* @__PURE__ */ jsx(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                className: "rounded-full p-0.5 hover:bg-accent cursor-pointer",
-                onClick: handleClear,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleClear(e);
-                  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          role: "combobox",
+          "aria-expanded": open,
+          "aria-haspopup": "listbox",
+          "aria-controls": open ? listboxId : void 0,
+          className: cn(
+            "w-full justify-between font-normal",
+            value && "pr-16",
+            !value && "text-muted-foreground"
+          ),
+          disabled,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: displayLabel || placeholder }),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          id: listboxId,
+          className: "w-[var(--radix-popover-trigger-width)] p-0",
+          align: "start",
+          children: /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearchChange, children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearchChange }),
+            /* @__PURE__ */ jsxs(CommandList, { children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: loading ? "Loading\u2026" : emptyText }),
+              /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: option.value,
+                  onSelect: () => handleSelect(option.value),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Check,
+                      {
+                        className: cn(
+                          "mr-2 size-4",
+                          value === option.value ? "opacity-100" : "opacity-0"
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsx("span", { children: option.label }),
+                      option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
+                    ] })
+                  ]
                 },
-                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
-              }
-            ),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+                option.value
+              )) })
+            ] })
           ] })
-        ]
+        }
+      )
+    ] }),
+    value && !disabled && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Clear selection",
+        onClick: (e) => {
+          e.stopPropagation();
+          onValueChange(void 0);
+        },
+        className: "absolute right-9 top-1/2 -translate-y-1/2 inline-flex size-6 items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 transition-colors",
+        children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
       }
-    ) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-full p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { shouldFilter: !onSearchChange, children: [
-      /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, onValueChange: onSearchChange }),
-      /* @__PURE__ */ jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsx(CommandEmpty, { children: loading ? "Loading..." : emptyText }),
-        /* @__PURE__ */ jsx(CommandGroup, { children: options.map((option) => /* @__PURE__ */ jsxs(
-          CommandItem,
-          {
-            value: option.value,
-            onSelect: () => handleSelect(option.value),
-            children: [
-              /* @__PURE__ */ jsx(
-                Check,
-                {
-                  className: cn(
-                    "mr-2 h-4 w-4",
-                    value === option.value ? "opacity-100" : "opacity-0"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                /* @__PURE__ */ jsx("span", { children: option.label }),
-                option.description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: option.description })
-              ] })
-            ]
-          },
-          option.value
-        )) })
-      ] })
-    ] }) })
+    )
   ] });
 }
 

package/dist/components/select.d.ts

@@ -1,10 +1,14 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { VariantProps } from 'class-variance-authority';
 
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
-declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/select.js

@@ -2,26 +2,40 @@ import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
 import * as React from 'react';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import { cva } from 'class-variance-authority';
 import { ChevronDown, ChevronUp, Check } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
+var selectTriggerVariants = cva(
+  "flex w-full items-center justify-between rounded-xl bg-background border border-border text-sm font-medium text-foreground transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 hover:border-foreground/30 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-3",
+        default: "h-11 px-4 py-2",
+        lg: "h-12 px-5"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
 var SelectTrigger = React.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  var _b = _a, { className, size, children } = _b, props = __objRest(_b, ["className", "size", "children"]);
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Trigger,
     __spreadProps(__spreadValues({
       ref,
-      className: cn(
-        "flex h-11 w-full items-center justify-between rounded-xl bg-surface border border-border px-4 py-2 text-sm font-medium text-muted-foreground transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 hover:border-foreground/20 hover:text-foreground",
-        className
-      )
+      "data-slot": "select-trigger",
+      className: cn(selectTriggerVariants({ size }), className)
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) })
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 opacity-60" }) })
       ]
     })
   );
@@ -35,7 +49,7 @@ var SelectScrollUpButton = React.forwardRef((_a, ref) => {
       ref,
       className: cn("flex cursor-default items-center justify-center py-1", className)
     }, props), {
-      children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx(ChevronUp, { className: "size-4" })
     })
   );
 });
@@ -48,7 +62,7 @@ var SelectScrollDownButton = React.forwardRef((_a, ref) => {
       ref,
       className: cn("flex cursor-default items-center justify-center py-1", className)
     }, props), {
-      children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-4" })
     })
   );
 });
@@ -59,8 +73,9 @@ var SelectContent = React.forwardRef((_a, ref) => {
     SelectPrimitive.Content,
     __spreadProps(__spreadValues({
       ref,
+      "data-slot": "select-content",
       className: cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
       ),
@@ -72,7 +87,7 @@ var SelectContent = React.forwardRef((_a, ref) => {
           SelectPrimitive.Viewport,
           {
             className: cn(
-              "p-1 flex flex-col gap-1",
+              "p-1 flex flex-col gap-0.5",
               position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
             ),
             children
@@ -90,7 +105,7 @@ var SelectLabel = React.forwardRef((_a, ref) => {
     SelectPrimitive.Label,
     __spreadValues({
       ref,
-      className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)
+      className: cn("py-1.5 pl-8 pr-2 text-xs font-semibold text-muted-foreground", className)
     }, props)
   );
 });
@@ -101,13 +116,14 @@ var SelectItem = React.forwardRef((_a, ref) => {
     SelectPrimitive.Item,
     __spreadProps(__spreadValues({
       ref,
+      "data-slot": "select-item",
       className: cn(
-        "relative flex w-full cursor-default select-none items-center rounded-lg py-2 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:bg-primary/10 data-[state=checked]:text-primary data-[state=checked]:font-medium",
+        "relative flex w-full cursor-default select-none items-center rounded-md py-2 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[state=checked]:font-medium",
         className
       )
     }, props), {
       children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
         /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
       ]
     })
@@ -120,7 +136,7 @@ var SelectSeparator = React.forwardRef((_a, ref) => {
     SelectPrimitive.Separator,
     __spreadValues({
       ref,
-      className: cn("-mx-1 my-1 h-px bg-muted", className)
+      className: cn("-mx-1 my-1 h-px bg-border", className)
     }, props)
   );
 });

package/dist/components/selection-bar.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+declare const SelectionBar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    count: number;
+    /** Hide bar when count is 0. Defaults to true. */
+    hideWhenEmpty?: boolean;
+    onClear?: () => void;
+    itemNoun?: string;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { SelectionBar };

package/dist/components/selection-bar.js

@@ -0,0 +1,65 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SelectionBar = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      count,
+      hideWhenEmpty = true,
+      onClear,
+      itemNoun = "item",
+      children
+    } = _b, props = __objRest(_b, [
+      "className",
+      "count",
+      "hideWhenEmpty",
+      "onClear",
+      "itemNoun",
+      "children"
+    ]);
+    if (hideWhenEmpty && count <= 0) return null;
+    const noun = count === 1 ? itemNoun : `${itemNoun}s`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        role: "region",
+        "aria-label": `${count} ${noun} selected`,
+        "data-slot": "selection-bar",
+        className: cn(
+          "flex w-full items-center gap-3 rounded-2xl border border-border bg-card px-4 py-3 shadow-lg",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-foreground", children: [
+            onClear && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-label": "Clear selection",
+                onClick: onClear,
+                className: "inline-flex size-6 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
+              count,
+              " ",
+              noun,
+              " selected"
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center gap-2", children })
+        ]
+      })
+    );
+  }
+);
+SelectionBar.displayName = "SelectionBar";
+
+export { SelectionBar };

package/dist/components/separator.js

@@ -10,11 +10,12 @@ var Separator = React.forwardRef((_a, ref) => {
     SeparatorPrimitive.Root,
     __spreadValues({
       ref,
+      "data-slot": "separator",
       decorative,
       orientation,
       className: cn(
-        "shrink-0 bg-gradient-to-r from-transparent via-border to-transparent backdrop-blur-sm",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        "shrink-0",
+        orientation === "horizontal" ? "h-px w-full bg-gradient-to-r from-transparent via-border to-transparent" : "h-full w-px bg-gradient-to-b from-transparent via-border to-transparent",
         className
       )
     }, props)