@bearmenu/ui 0.5.1 → 0.6.0

package/dist/components/rating.d.ts

@@ -9,6 +9,8 @@ interface RatingProps {
     readonly?: boolean;
     onRatingChange?: (rating: number) => void;
     className?: string;
+    /** Accessible label for the rating control. Defaults to "Rating". */
+    label?: string;
 }
 declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
 

package/dist/components/rating.js

@@ -4,6 +4,18 @@ import * as React from 'react';
 import { Star, StarHalf } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+var sizeClasses = {
+  sm: "size-3",
+  md: "size-4",
+  lg: "size-5"
+};
+var textSizeClasses = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var FILLED_CLASSES = "fill-amber-400 text-amber-400";
+var EMPTY_CLASSES = "fill-transparent text-muted-foreground/40";
 var Rating = React.forwardRef(
   (_a, ref) => {
     var _b = _a, {
@@ -14,7 +26,8 @@ var Rating = React.forwardRef(
       reviewCount,
       readonly = true,
       onRatingChange,
-      className
+      className,
+      label = "Rating"
     } = _b, props = __objRest(_b, [
       "value",
       "max",
@@ -23,89 +36,94 @@ var Rating = React.forwardRef(
       "reviewCount",
       "readonly",
       "onRatingChange",
-      "className"
+      "className",
+      "label"
     ]);
     const [hoverValue, setHoverValue] = React.useState(null);
-    const sizeClasses = {
-      sm: "h-3 w-3",
-      md: "h-4 w-4",
-      lg: "h-5 w-5"
-    };
-    const textSizeClasses = {
-      sm: "text-xs",
-      md: "text-sm",
-      lg: "text-base"
-    };
-    const handleClick = (rating) => {
-      if (!readonly && onRatingChange) {
-        onRatingChange(rating);
-      }
-    };
-    const handleMouseEnter = (rating) => {
-      if (!readonly) {
-        setHoverValue(rating);
-      }
-    };
-    const handleMouseLeave = () => {
-      if (!readonly) {
-        setHoverValue(null);
+    const displayValue = hoverValue != null ? hoverValue : value;
+    if (readonly) {
+      const fullStars = Math.floor(displayValue);
+      const hasHalfStar = displayValue % 1 !== 0;
+      const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        __spreadProps(__spreadValues({
+          ref,
+          role: "img",
+          "aria-label": `${label}: ${value} out of ${max}`,
+          className: cn("flex items-center gap-1", className)
+        }, props), {
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+              Array.from({ length: fullStars }).map((_, i) => /* @__PURE__ */ jsx(Star, { className: cn(sizeClasses[size], FILLED_CLASSES) }, `full-${i}`)),
+              hasHalfStar && /* @__PURE__ */ jsx(StarHalf, { className: cn(sizeClasses[size], FILLED_CLASSES) }),
+              Array.from({ length: emptyStars }).map((_, i) => /* @__PURE__ */ jsx(Star, { className: cn(sizeClasses[size], EMPTY_CLASSES) }, `empty-${i}`))
+            ] }),
+            showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("ml-1 text-muted-foreground", textSizeClasses[size]), children: [
+              "(",
+              reviewCount,
+              ")"
+            ] })
+          ]
+        })
+      );
+    }
+    const handleKeyDown = (e) => {
+      if (!onRatingChange) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowUp") {
+        e.preventDefault();
+        onRatingChange(Math.min(max, value + 1));
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
+        e.preventDefault();
+        onRatingChange(Math.max(0, value - 1));
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        onRatingChange(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        onRatingChange(max);
       }
     };
-    const displayValue = hoverValue != null ? hoverValue : value;
-    const fullStars = Math.floor(displayValue);
-    const hasHalfStar = displayValue % 1 !== 0;
-    const emptyStars = max - fullStars - (hasHalfStar ? 1 : 0);
     return /* @__PURE__ */ jsxs(
       "div",
       __spreadProps(__spreadValues({
         ref,
-        className: cn("flex items-center gap-1", !readonly && "cursor-pointer", className)
+        role: "radiogroup",
+        "aria-label": label,
+        onKeyDown: handleKeyDown,
+        className: cn("flex items-center gap-1", className)
       }, props), {
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
-            Array.from({ length: fullStars }).map((_, i) => /* @__PURE__ */ jsx(
-              Star,
-              {
-                className: cn(
-                  sizeClasses[size],
-                  "fill-primary text-primary transition-colors",
-                  !readonly && "hover:fill-primary/80"
-                ),
-                onClick: () => handleClick(i + 1),
-                onMouseEnter: () => handleMouseEnter(i + 1),
-                onMouseLeave: handleMouseLeave
-              },
-              `full-${i}`
-            )),
-            hasHalfStar && /* @__PURE__ */ jsx(
-              StarHalf,
-              {
-                className: cn(
-                  sizeClasses[size],
-                  "fill-primary text-primary transition-colors",
-                  !readonly && "hover:fill-primary/80"
-                ),
-                onClick: () => handleClick(fullStars + 1),
-                onMouseEnter: () => handleMouseEnter(fullStars + 1),
-                onMouseLeave: handleMouseLeave
-              }
-            ),
-            Array.from({ length: emptyStars }).map((_, i) => /* @__PURE__ */ jsx(
-              Star,
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5", onMouseLeave: () => setHoverValue(null), children: Array.from({ length: max }).map((_, i) => {
+            const starValue = i + 1;
+            const isActive = starValue <= displayValue;
+            return /* @__PURE__ */ jsx(
+              "button",
               {
+                type: "button",
+                role: "radio",
+                "aria-checked": value === starValue,
+                "aria-label": `${starValue} star${starValue === 1 ? "" : "s"}`,
+                onClick: () => onRatingChange == null ? void 0 : onRatingChange(starValue),
+                onMouseEnter: () => setHoverValue(starValue),
                 className: cn(
-                  sizeClasses[size],
-                  "text-muted-foreground/30 transition-colors",
-                  !readonly && "hover:text-primary/50"
+                  "rounded-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
                 ),
-                onClick: () => handleClick(fullStars + (hasHalfStar ? 1 : 0) + i + 1),
-                onMouseEnter: () => handleMouseEnter(fullStars + (hasHalfStar ? 1 : 0) + i + 1),
-                onMouseLeave: handleMouseLeave
+                children: /* @__PURE__ */ jsx(
+                  Star,
+                  {
+                    className: cn(
+                      sizeClasses[size],
+                      isActive ? FILLED_CLASSES : EMPTY_CLASSES,
+                      "transition-colors"
+                    )
+                  }
+                )
               },
-              `empty-${i}`
-            ))
-          ] }),
-          showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground ml-1", textSizeClasses[size]), children: [
+              starValue
+            );
+          }) }),
+          showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("ml-1 text-muted-foreground", textSizeClasses[size]), children: [
             "(",
             reviewCount,
             ")"

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)
   );
 });