@bearmenu/ui 0.1.0

package/dist/components/pagination.js

@@ -0,0 +1,101 @@
+import { buttonVariants } from '../chunk-2CUFS5LF.js';
+import '../chunk-R47NEOSI.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues, __spreadProps } from '../chunk-3GWWZKX7.js';
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Pagination(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "nav",
+    __spreadValues({
+      role: "navigation",
+      "aria-label": "pagination",
+      "data-slot": "pagination",
+      className: cn("mx-auto flex w-full justify-center", className)
+    }, props)
+  );
+}
+function PaginationContent(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "ul",
+    __spreadValues({
+      "data-slot": "pagination-content",
+      className: cn("flex flex-row items-center gap-1", className)
+    }, props)
+  );
+}
+function PaginationItem(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx("li", __spreadValues({ "data-slot": "pagination-item" }, props));
+}
+function PaginationLink(_a) {
+  var _b = _a, { className, isActive, size = "icon" } = _b, props = __objRest(_b, ["className", "isActive", "size"]);
+  return /* @__PURE__ */ jsx(
+    "a",
+    __spreadValues({
+      "aria-current": isActive ? "page" : void 0,
+      "data-slot": "pagination-link",
+      "data-active": isActive,
+      className: cn(
+        buttonVariants({
+          variant: isActive ? "outline" : "ghost",
+          size
+        }),
+        className
+      )
+    }, props)
+  );
+}
+function PaginationPrevious(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    __spreadProps(__spreadValues({
+      "aria-label": "Go to previous page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pl-2.5", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Previous" })
+      ]
+    })
+  );
+}
+function PaginationNext(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxs(
+    PaginationLink,
+    __spreadProps(__spreadValues({
+      "aria-label": "Go to next page",
+      size: "default",
+      className: cn("gap-1 px-2.5 sm:pr-2.5", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:block", children: "Next" }),
+        /* @__PURE__ */ jsx(ChevronRightIcon, {})
+      ]
+    })
+  );
+}
+function PaginationEllipsis(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    __spreadProps(__spreadValues({
+      "aria-hidden": true,
+      "data-slot": "pagination-ellipsis",
+      className: cn("flex size-9 items-center justify-center", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-4" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
+      ]
+    })
+  );
+}
+
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };

package/dist/components/popover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Popover, PopoverContent, PopoverTrigger };

package/dist/components/popover.js

@@ -0,0 +1,3 @@
+export { Popover, PopoverContent, PopoverTrigger } from '../chunk-4UO73SKC.js';
+import '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';

package/dist/components/progress.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressPrimitive.ProgressProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Progress };

package/dist/components/progress.js

@@ -0,0 +1,30 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { jsx } from 'react/jsx-runtime';
+
+var Progress = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, value } = _b, props = __objRest(_b, ["className", "value"]);
+  return /* @__PURE__ */ jsx(
+    ProgressPrimitive.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "relative h-2 w-full overflow-hidden rounded-full glass border border-border/50",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(
+        ProgressPrimitive.Indicator,
+        {
+          className: "h-full w-full flex-1 bg-gradient-to-r from-primary to-secondary transition-all duration-500 ease-out shadow-lg",
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    })
+  );
+});
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

package/dist/components/radio-group.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+export { RadioGroup, RadioGroupItem };

package/dist/components/radio-group.js

@@ -0,0 +1,30 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+
+var RadioGroup = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, __spreadProps(__spreadValues({ className: cn("grid gap-2", className) }, props), { ref }));
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Item,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn(
+        "aspect-square h-5 w-5 rounded-full border border-border glass text-primary transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:border-accent/50 hover:shadow-md",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(Circle, { className: "h-2.5 w-2.5 fill-current text-current animate-in zoom-in-50 duration-200" }) })
+    })
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/dist/components/rating.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface RatingProps {
+    value: number;
+    max?: number;
+    size?: "sm" | "md" | "lg";
+    showCount?: boolean;
+    reviewCount?: number;
+    readonly?: boolean;
+    onRatingChange?: (rating: number) => void;
+    className?: string;
+}
+declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Rating };

package/dist/components/rating.js

@@ -0,0 +1,120 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import { Star, StarHalf } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Rating = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      value,
+      max = 5,
+      size = "md",
+      showCount = true,
+      reviewCount,
+      readonly = true,
+      onRatingChange,
+      className
+    } = _b, props = __objRest(_b, [
+      "value",
+      "max",
+      "size",
+      "showCount",
+      "reviewCount",
+      "readonly",
+      "onRatingChange",
+      "className"
+    ]);
+    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;
+    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)
+      }, 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,
+              {
+                className: cn(
+                  sizeClasses[size],
+                  "text-muted-foreground/30 transition-colors",
+                  !readonly && "hover:text-primary/50"
+                ),
+                onClick: () => handleClick(fullStars + (hasHalfStar ? 1 : 0) + i + 1),
+                onMouseEnter: () => handleMouseEnter(fullStars + (hasHalfStar ? 1 : 0) + i + 1),
+                onMouseLeave: handleMouseLeave
+              },
+              `empty-${i}`
+            ))
+          ] }),
+          showCount && reviewCount !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn("text-muted-foreground ml-1", textSizeClasses[size]), children: [
+            "(",
+            reviewCount,
+            ")"
+          ] })
+        ]
+      })
+    );
+  }
+);
+Rating.displayName = "Rating";
+
+export { Rating };

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, ScrollBar };

package/dist/components/scroll-area.js

@@ -0,0 +1,44 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ScrollArea = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    __spreadProps(__spreadValues({
+      ref,
+      className: cn("relative overflow-hidden", className)
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    })
+  );
+});
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+var ScrollBar = React.forwardRef((_a, ref) => {
+  var _b = _a, { className, orientation = "vertical" } = _b, props = __objRest(_b, ["className", "orientation"]);
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    __spreadProps(__spreadValues({
+      ref,
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      )
+    }, props), {
+      children: /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border/50 backdrop-blur-sm hover:bg-border transition-colors" })
+    })
+  );
+});
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SearchBarProps {
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    isSearching?: boolean;
+    className?: string;
+    inputClassName?: string;
+    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;
+
+export { SearchBar };

package/dist/components/search-bar.js

@@ -0,0 +1,92 @@
+import { Card } from '../chunk-UXAYXRFN.js';
+import '../chunk-4KOMHDZD.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { Search, Loader2 } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function SearchBar({
+  placeholder = "Search...",
+  value = "",
+  onChange,
+  isSearching = false,
+  className,
+  inputClassName,
+  autoFocus = false,
+  inputAriaLabel,
+  size = "default",
+  variant = "editorial"
+}) {
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  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(
+          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"
+            )
+          }
+        )
+      }
+    ),
+    /* @__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(
+          Loader2,
+          {
+            className: cn(
+              "animate-spin",
+              variant === "editorial" ? "text-muted-foreground" : "text-primary/60",
+              size === "compact" ? "h-3.5 w-3.5" : "h-4 w-4"
+            )
+          }
+        )
+      }
+    )
+  ] }) });
+}
+
+export { SearchBar };

package/dist/components/searchable-select.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+interface SearchableSelectProps {
+    options: SelectOption[];
+    value: string | undefined;
+    onValueChange: (value: string | undefined) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    className?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    onSearchChange?: (search: string) => void;
+}
+declare function SearchableSelect({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, className, disabled, loading, onSearchChange, }: SearchableSelectProps): react_jsx_runtime.JSX.Element;
+
+export { SearchableSelect, type SelectOption };

package/dist/components/searchable-select.js

@@ -0,0 +1,104 @@
+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-2CUFS5LF.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 { jsxs, jsx } from 'react/jsx-runtime';
+
+function SearchableSelect({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select...",
+  searchPlaceholder = "Search...",
+  emptyText = "No items found.",
+  className,
+  disabled = false,
+  loading = false,
+  onSearchChange
+}) {
+  const [open, setOpen] = React.useState(false);
+  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);
+                  }
+                },
+                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              }
+            ),
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__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
+        )) })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { SearchableSelect };

package/dist/components/select.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+
+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 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>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };