@wow-two-beta/ui 0.0.41 → 0.0.42

package/dist/{chunk-7GDZNTC6.js → chunk-I7UOT7TA.js}

@@ -1,4 +1,4 @@
-import { listboxVariants, listboxItemVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-G4H4EDAC.js';
+import { listboxItemVariants, listboxVariants, listboxGroupLabelVariants, listboxSeparatorVariants, listboxEmptyVariants } from './chunk-G4H4EDAC.js';
 import { PopoverTrigger, Popover, PopoverContent } from './chunk-VDE5B3IY.js';
 import { startOfMonth, isSameDay, isToday, isDateDisabled, parseISODate, formatISODate, parseISOTime, Tag, addMonths, Kbd, addDays, buildMonthGrid, MONTHS_LONG, WEEKDAYS_SHORT, formatISOTime, startOfDay, isInRange } from './chunk-LFZV2XTZ.js';
 import { useControlled } from './chunk-NUMFGKPY.js';
@@ -8,9 +8,9 @@ import { useFormControl, FormControlProvider, RovingFocusGroup, useRovingFocusIt
 import { useId } from './chunk-KDXJQNB6.js';
 import { cn, composeRefs } from './chunk-LDRFQG44.js';
 import * as React from 'react';
-import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useMemo, useCallback, useEffect, Fragment as Fragment$1, useContext } from 'react';
+import { forwardRef, useRef, useImperativeHandle, useState, Children, isValidElement, cloneElement, useId as useId$1, createContext, useEffect, useMemo, useCallback, Fragment as Fragment$1, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronRight, Copy, Zap, Wallet, Video, User, Trash, Tag as Tag$1, Sun, Star, ShoppingCart, Share2, Settings, Send, Play, Pin, Phone, Pencil, Paperclip, Music, Moon, Mic, MessageCircle, Map as Map$1, Mail, Lock, Link2, Lightbulb, Layers, Info, Inbox, Image, Home, Heart, Globe, Folder, File, ExternalLink, Edit, Download, Compass, Coffee, Code, Cloud, Camera, Bookmark, Bell, ChevronLeft, Heading1, Heading2, Bold, Italic, List, Quote } from 'lucide-react';
+import { Minus, Plus, EyeOff, Eye, Search, X, Check, Upload, Loader2, ChevronDown, Calendar as Calendar$1, Clock, UploadCloud, ChevronRight, Copy, Zap, Wallet, Video, User, Trash, Tag as Tag$1, Sun, Star, ShoppingCart, Share2, Settings, Send, Play, Pin, Phone, Pencil, Paperclip, Music, Moon, Mic, MessageCircle, Map as Map$1, Mail, Lock, Link2, Lightbulb, Layers, Info, Inbox, Image, Home, Heart, Globe, Folder, File, ExternalLink, Edit, Download, Compass, Coffee, Code, Cloud, Camera, Bookmark, Bell, ChevronLeft, Heading1, Heading2, Bold, Italic, List, Quote } from 'lucide-react';
 import { marked } from 'marked';
 
 var Label = forwardRef(
@@ -432,13 +432,133 @@ var Textarea = forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
+
+// src/forms/checkbox/Checkbox.variants.ts
+var checkboxVariants = tv({
+  base: "pointer-events-none grid h-full w-full place-items-center rounded-sm border transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1 peer-disabled:opacity-50",
+  variants: {
+    variant: {
+      solid: "border-input bg-background",
+      soft: "border-transparent",
+      outline: "bg-transparent",
+      ghost: "border-transparent bg-transparent",
+      glass: "border-white/40 bg-black/40 backdrop-blur-sm",
+      "glass-surface": "border-white/60 bg-black/40 backdrop-blur-sm"
+    },
+    tone: {
+      primary: "",
+      neutral: "",
+      danger: "",
+      success: "",
+      warning: ""
+    }
+  },
+  compoundVariants: [
+    // === SOLID × tone — bg-background unchecked → tone fill checked ===
+    { variant: "solid", tone: "primary", class: "text-primary-foreground peer-checked:border-primary peer-checked:bg-primary" },
+    { variant: "solid", tone: "neutral", class: "text-background peer-checked:border-foreground peer-checked:bg-foreground" },
+    { variant: "solid", tone: "danger", class: "text-destructive-foreground peer-checked:border-destructive peer-checked:bg-destructive" },
+    { variant: "solid", tone: "success", class: "text-success-foreground peer-checked:border-success peer-checked:bg-success" },
+    { variant: "solid", tone: "warning", class: "text-warning-foreground peer-checked:border-warning peer-checked:bg-warning" },
+    // === SOFT × tone — soft bg unchecked → strong tone fill checked ===
+    { variant: "soft", tone: "primary", class: "bg-primary-soft text-primary-soft-foreground peer-checked:bg-primary peer-checked:text-primary-foreground" },
+    { variant: "soft", tone: "neutral", class: "bg-muted text-foreground peer-checked:bg-foreground peer-checked:text-background" },
+    { variant: "soft", tone: "danger", class: "bg-destructive-soft text-destructive-soft-foreground peer-checked:bg-destructive peer-checked:text-destructive-foreground" },
+    { variant: "soft", tone: "success", class: "bg-success-soft text-success-soft-foreground peer-checked:bg-success peer-checked:text-success-foreground" },
+    { variant: "soft", tone: "warning", class: "bg-warning-soft text-warning-soft-foreground peer-checked:bg-warning peer-checked:text-warning-foreground" },
+    // === OUTLINE × tone — tone border unchecked → tone fill checked ===
+    { variant: "outline", tone: "primary", class: "border-primary text-primary peer-checked:bg-primary peer-checked:text-primary-foreground" },
+    { variant: "outline", tone: "neutral", class: "border-border-strong text-foreground peer-checked:bg-foreground peer-checked:text-background" },
+    { variant: "outline", tone: "danger", class: "border-destructive text-destructive peer-checked:bg-destructive peer-checked:text-destructive-foreground" },
+    { variant: "outline", tone: "success", class: "border-success text-success peer-checked:bg-success peer-checked:text-success-foreground" },
+    { variant: "outline", tone: "warning", class: "border-warning text-warning peer-checked:bg-warning peer-checked:text-warning-foreground" },
+    // === GHOST × tone — no border/bg unchecked → tone-tinted bg + tone check checked ===
+    { variant: "ghost", tone: "primary", class: "text-primary peer-checked:bg-primary/10" },
+    { variant: "ghost", tone: "neutral", class: "text-foreground peer-checked:bg-muted" },
+    { variant: "ghost", tone: "danger", class: "text-destructive peer-checked:bg-destructive/10" },
+    { variant: "ghost", tone: "success", class: "text-success peer-checked:bg-success/10" },
+    { variant: "ghost", tone: "warning", class: "text-warning peer-checked:bg-warning/10" },
+    // === GLASS × tone — dark glass unchecked → tone fill checked, white check throughout ===
+    { variant: "glass", tone: "primary", class: "text-white peer-checked:bg-primary peer-checked:border-primary" },
+    { variant: "glass", tone: "neutral", class: "text-white peer-checked:bg-foreground peer-checked:border-foreground peer-checked:text-background" },
+    { variant: "glass", tone: "danger", class: "text-white peer-checked:bg-destructive peer-checked:border-destructive" },
+    { variant: "glass", tone: "success", class: "text-white peer-checked:bg-success peer-checked:border-success" },
+    { variant: "glass", tone: "warning", class: "text-white peer-checked:bg-warning peer-checked:border-warning" },
+    // === GLASS-SURFACE × tone — same as glass but border stays light when checked ===
+    { variant: "glass-surface", tone: "primary", class: "text-white peer-checked:bg-primary peer-checked:border-white/60" },
+    { variant: "glass-surface", tone: "neutral", class: "text-white peer-checked:bg-foreground peer-checked:border-white/60 peer-checked:text-background" },
+    { variant: "glass-surface", tone: "danger", class: "text-white peer-checked:bg-destructive peer-checked:border-white/60" },
+    { variant: "glass-surface", tone: "success", class: "text-white peer-checked:bg-success peer-checked:border-white/60" },
+    { variant: "glass-surface", tone: "warning", class: "text-white peer-checked:bg-warning peer-checked:border-white/60" }
+  ],
+  defaultVariants: {
+    variant: "solid",
+    tone: "primary"
+  }
+});
+var COMPONENT_NAME = "Checkbox";
 var SIZE_CLASS = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
 };
+var INDETERMINATE_CHECKED_CLASS = {
+  solid: {
+    primary: "bg-primary border-primary text-primary-foreground",
+    neutral: "bg-foreground border-foreground text-background",
+    danger: "bg-destructive border-destructive text-destructive-foreground",
+    success: "bg-success border-success text-success-foreground",
+    warning: "bg-warning border-warning text-warning-foreground"
+  },
+  soft: {
+    primary: "bg-primary text-primary-foreground",
+    neutral: "bg-foreground text-background",
+    danger: "bg-destructive text-destructive-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground"
+  },
+  outline: {
+    primary: "bg-primary text-primary-foreground",
+    neutral: "bg-foreground text-background",
+    danger: "bg-destructive text-destructive-foreground",
+    success: "bg-success text-success-foreground",
+    warning: "bg-warning text-warning-foreground"
+  },
+  ghost: {
+    primary: "bg-primary/10 text-primary",
+    neutral: "bg-muted text-foreground",
+    danger: "bg-destructive/10 text-destructive",
+    success: "bg-success/10 text-success",
+    warning: "bg-warning/10 text-warning"
+  },
+  glass: {
+    primary: "bg-primary border-primary text-white",
+    neutral: "bg-foreground border-foreground text-background",
+    danger: "bg-destructive border-destructive text-white",
+    success: "bg-success border-success text-white",
+    warning: "bg-warning border-warning text-white"
+  },
+  "glass-surface": {
+    primary: "bg-primary border-white/60 text-white",
+    neutral: "bg-foreground border-white/60 text-background",
+    danger: "bg-destructive border-white/60 text-white",
+    success: "bg-success border-white/60 text-white",
+    warning: "bg-warning border-white/60 text-white"
+  }
+};
 var Checkbox = forwardRef(
-  ({ className, size = "md", indeterminate, id, disabled, required, checked, ...props }, ref) => {
+  ({
+    className,
+    size = "md",
+    indeterminate,
+    variant = "solid",
+    tone = "primary",
+    id,
+    disabled,
+    required,
+    checked,
+    ...props
+  }, ref) => {
     const ctx = useFormControl();
     const isDisabled = disabled ?? ctx?.isDisabled;
     return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-flex shrink-0", SIZE_CLASS[size], className), children: [
@@ -462,19 +582,16 @@ var Checkbox = forwardRef(
         {
           "aria-hidden": "true",
           className: cn(
-            "pointer-events-none grid h-full w-full place-items-center rounded-sm border border-input bg-background text-primary-foreground transition-colors",
-            "peer-checked:border-primary peer-checked:bg-primary",
-            "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-1",
-            "peer-disabled:opacity-50",
-            indeterminate && "border-primary bg-primary"
+            checkboxVariants({ variant, tone }),
+            indeterminate && INDETERMINATE_CHECKED_CLASS[variant][tone]
           ),
-          children: indeterminate ? /* @__PURE__ */ jsx(Minus, { size: Math.round(SIZE_CLASS[size].length * 1.4), className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 opacity-0 peer-checked:opacity-100" })
+          children: indeterminate ? /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 opacity-0 peer-checked:opacity-100" })
         }
       )
     ] });
   }
 );
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = COMPONENT_NAME;
 var SIZE_CLASS2 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
@@ -1117,42 +1234,43 @@ var FilePicker = forwardRef(
   }
 );
 FilePicker.displayName = "FilePicker";
+var defaultEquals = (a, b) => Object.is(a, b);
 var ListboxContext = createContext(null);
 function useListboxContext() {
   const ctx = useContext(ListboxContext);
   if (!ctx) throw new Error("Listbox.Item / Group / Separator must be used inside <Listbox>");
   return ctx;
 }
-var Listbox = forwardRef(function Listbox2(props, ref) {
+function ListboxImpl(props, ref) {
   const {
     multiple = false,
     value,
     defaultValue,
     onValueChange,
+    isEqual,
     disabled,
     className,
     children,
     onKeyDown,
     ...rest
   } = props;
-  const initial = defaultValue ?? (multiple ? [] : "");
+  const equals = isEqual ?? defaultEquals;
+  const initial = defaultValue ?? (multiple ? [] : void 0);
   const [current, setCurrent] = useControlled({
     controlled: value,
     default: initial,
     onChange: onValueChange
   });
-  const values = useMemo(
-    () => Array.isArray(current) ? current : current ? [current] : [],
-    [current]
-  );
+  const values = useMemo(() => {
+    if (Array.isArray(current)) return current;
+    return current === void 0 ? [] : [current];
+  }, [current]);
   const items = useRef([]);
   const [activeId, setActiveId] = useState(null);
   const registerItem = useCallback((entry) => {
-    if (!items.current.some((i) => i.id === entry.id)) items.current.push(entry);
-  }, []);
-  const updateItem = useCallback((entry) => {
     const idx = items.current.findIndex((i) => i.id === entry.id);
     if (idx >= 0) items.current[idx] = entry;
+    else items.current.push(entry);
   }, []);
   const unregisterItem = useCallback((id) => {
     items.current = items.current.filter((i) => i.id !== id);
@@ -1161,18 +1279,19 @@ var Listbox = forwardRef(function Listbox2(props, ref) {
     (next) => {
       if (multiple) {
         const cur = Array.isArray(current) ? current : [];
-        const has = cur.includes(next);
-        setCurrent(has ? cur.filter((v) => v !== next) : [...cur, next]);
+        const has = cur.some((v) => equals(v, next));
+        const out = has ? cur.filter((v) => !equals(v, next)) : [...cur, next];
+        setCurrent(out);
       } else {
         setCurrent(next);
       }
     },
-    [multiple, current, setCurrent]
+    [multiple, current, setCurrent, equals]
   );
   useEffect(() => {
     if (activeId) return;
     const firstSelected = items.current.find(
-      (i) => !i.disabled && values.includes(i.value)
+      (i) => !i.disabled && values.some((v) => equals(v, i.value))
     );
     const firstEnabled = items.current.find((i) => !i.disabled);
     setActiveId((firstSelected ?? firstEnabled)?.id ?? null);
@@ -1237,17 +1356,14 @@ var Listbox = forwardRef(function Listbox2(props, ref) {
     () => ({
       multiple,
       values,
+      isEqual: equals,
       activeId,
       onItemSelect,
-      registerItem: (e) => {
-        const existing = items.current.find((i) => i.id === e.id);
-        if (existing) updateItem(e);
-        else registerItem(e);
-      },
+      registerItem,
       unregisterItem,
       setActiveId
     }),
-    [multiple, values, activeId, onItemSelect, registerItem, unregisterItem, updateItem]
+    [multiple, values, equals, activeId, onItemSelect, registerItem, unregisterItem]
   );
   return /* @__PURE__ */ jsx(ListboxContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
     "div",
@@ -1264,16 +1380,17 @@ var Listbox = forwardRef(function Listbox2(props, ref) {
       children
     }
   ) });
-});
+}
+var ListboxForwardRef = forwardRef(ListboxImpl);
 var ListboxItem = forwardRef(function ListboxItem2({ value, disabled = false, className, children, onClick, onPointerEnter, ...rest }, forwardedRef) {
   const ctx = useListboxContext();
   const id = useId$1();
   const ref = useRef(null);
   useEffect(() => {
-    ctx.registerItem({ id, value, disabled, ref: ref.current });
+    ctx.registerItem({ id, value, disabled });
     return () => ctx.unregisterItem(id);
   }, [ctx, id, value, disabled]);
-  const isSelected = ctx.values.includes(value);
+  const isSelected = ctx.values.some((v) => ctx.isEqual(v, value));
   const isActive = ctx.activeId === id;
   const state = disabled ? "disabled" : isSelected ? "selected" : isActive ? "active" : "default";
   const setRefs = (node) => {
@@ -1324,6 +1441,7 @@ function ListboxSeparator(props) {
 function ListboxEmpty({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx("div", { role: "presentation", className: cn(listboxEmptyVariants(), className), ...rest, children });
 }
+var Listbox = ListboxForwardRef;
 Listbox.Item = ListboxItem;
 Listbox.Group = ListboxGroup;
 Listbox.Separator = ListboxSeparator;
@@ -1348,18 +1466,23 @@ var selectTriggerVariants = tv({
     state: "default"
   }
 });
+var defaultEquals2 = (a, b) => Object.is(a, b);
 var SelectContext = createContext(null);
 function useSelectContext() {
   const ctx = useContext(SelectContext);
   if (!ctx) throw new Error("Select.* must be used inside <Select>");
   return ctx;
 }
-function Select({
+function SelectImpl({
   value,
   defaultValue,
   onValueChange,
+  isEqual,
   disabled = false,
+  isLoading = false,
+  clearable = false,
   name,
+  serialize,
   invalid,
   defaultOpen = false,
   open: openProp,
@@ -1374,18 +1497,44 @@ function Select({
   });
   const [valueState, setValueState] = useControlled({
     controlled: value,
-    default: defaultValue ?? "",
+    default: defaultValue ?? null,
     onChange: onValueChange
   });
-  const [labels, setLabels] = useState({});
-  const registerLabel = useCallback((v, label) => {
-    setLabels((prev) => prev[v] === label ? prev : { ...prev, [v]: label });
+  const [items, setItems] = useState([]);
+  const [query, setQuery] = useState("");
+  const isEqualRef = useRef(isEqual);
+  isEqualRef.current = isEqual;
+  const serializeRef = useRef(serialize);
+  serializeRef.current = serialize;
+  const equals = useCallback((a, b) => {
+    const fn = isEqualRef.current;
+    return (fn ?? defaultEquals2)(a, b);
   }, []);
-  const unregisterLabel = useCallback((v) => {
-    setLabels((prev) => {
-      if (!(v in prev)) return prev;
-      const next = { ...prev };
-      delete next[v];
+  const serializer = useCallback((v) => {
+    const fn = serializeRef.current;
+    return (fn ?? ((x) => String(x)))(v);
+  }, []);
+  const registerItem = useCallback((entry) => {
+    setItems((prev) => {
+      const idx = prev.findIndex((p) => Object.is(p.value, entry.value));
+      if (idx >= 0) {
+        const existing = prev[idx];
+        if (existing && existing.label === entry.label && existing.text === entry.text) {
+          return prev;
+        }
+        const next = prev.slice();
+        next[idx] = entry;
+        return next;
+      }
+      return [...prev, entry];
+    });
+  }, []);
+  const unregisterItem = useCallback((v) => {
+    setItems((prev) => {
+      const idx = prev.findIndex((p) => Object.is(p.value, v));
+      if (idx === -1) return prev;
+      const next = prev.slice();
+      next.splice(idx, 1);
       return next;
     });
   }, []);
@@ -1393,19 +1542,32 @@ function Select({
     (next) => {
       setValueState(next);
       setOpenState(false);
+      setQuery("");
     },
     [setValueState, setOpenState]
   );
+  const onClear = useCallback(() => {
+    setValueState(null);
+  }, [setValueState]);
+  const hasValue = valueState !== null && valueState !== void 0;
   const ctx = useMemo(
     () => ({
       open: openState,
       setOpen: setOpenState,
       value: valueState,
+      hasValue,
       onSelect,
-      labels,
-      registerLabel,
-      unregisterLabel,
+      onClear,
+      isEqual: equals,
+      items,
+      registerItem,
+      unregisterItem,
+      query,
+      setQuery,
       disabled,
+      isLoading,
+      clearable,
+      serialize: serializer,
       name,
       invalid
     }),
@@ -1413,11 +1575,18 @@ function Select({
       openState,
       setOpenState,
       valueState,
+      hasValue,
       onSelect,
-      labels,
-      registerLabel,
-      unregisterLabel,
+      onClear,
+      equals,
+      items,
+      registerItem,
+      unregisterItem,
+      query,
       disabled,
+      isLoading,
+      clearable,
+      serializer,
       name,
       invalid
     ]
@@ -1426,36 +1595,66 @@ function Select({
     Popover,
     {
       open: openState,
-      onOpenChange: setOpenState,
+      onOpenChange: (o) => {
+        setOpenState(o);
+        if (!o) setQuery("");
+      },
       placement,
       offset: 6,
       children
     }
   ) });
 }
+var Select = SelectImpl;
 var SelectTrigger = forwardRef(
   function SelectTrigger2({ size, state, className, children, ...rest }, ref) {
     const ctx = useSelectContext();
     const triggerState = state ?? (ctx.invalid ? "invalid" : "default");
+    const showClear = ctx.clearable && ctx.hasValue && !ctx.isLoading && !ctx.disabled;
     return /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       "button",
       {
         ref,
         type: "button",
-        disabled: ctx.disabled,
+        disabled: ctx.disabled || ctx.isLoading,
+        "aria-busy": ctx.isLoading || void 0,
         className: cn(selectTriggerVariants({ size, state: triggerState }), className),
         ...rest,
         children: [
           children ?? /* @__PURE__ */ jsx(SelectValue, {}),
-          /* @__PURE__ */ jsx(
-            ChevronDown,
-            {
-              className: cn(
-                "h-4 w-4 text-muted-foreground transition-transform",
-                ctx.open && "rotate-180"
-              )
-            }
-          )
+          /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1", children: [
+            showClear && /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": "Clear selection",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  ctx.onClear();
+                },
+                onPointerDown: (e) => e.stopPropagation(),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    ctx.onClear();
+                  }
+                },
+                className: "grid h-4 w-4 place-items-center rounded-sm text-subtle-foreground hover:bg-muted hover:text-foreground",
+                children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              }
+            ),
+            ctx.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin text-subtle-foreground" }) : /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "h-4 w-4 text-muted-foreground transition-transform",
+                  ctx.open && "rotate-180"
+                )
+              }
+            )
+          ] })
         ]
       }
     ) });
@@ -1464,31 +1663,82 @@ var SelectTrigger = forwardRef(
 function SelectValue({ placeholder, children }) {
   const ctx = useSelectContext();
   if (children) return /* @__PURE__ */ jsx("span", { className: "truncate", children });
-  const label = ctx.value ? ctx.labels[ctx.value] ?? ctx.value : null;
-  return /* @__PURE__ */ jsx("span", { className: cn("truncate", !label && "text-subtle-foreground"), children: label ?? placeholder });
+  const match = ctx.hasValue ? ctx.items.find((i) => ctx.isEqual(i.value, ctx.value)) : void 0;
+  const label = match?.label ?? (ctx.hasValue ? ctx.serialize(ctx.value) : null);
+  return /* @__PURE__ */ jsx("span", { className: cn("truncate text-left", !label && "text-subtle-foreground"), children: label ?? placeholder });
 }
-function SelectContent({ className, children }) {
+function SelectContent({
+  className,
+  searchable = false,
+  searchPlaceholder = "Search\u2026",
+  noResultsLabel = "No results",
+  children
+}) {
   const ctx = useSelectContext();
-  return /* @__PURE__ */ jsxs(PopoverContent, { bare: true, children: [
-    /* @__PURE__ */ jsx(
-      Listbox,
-      {
-        value: ctx.value,
-        onValueChange: (v) => ctx.onSelect(v),
-        className: cn("min-w-[var(--anchor-width)]", className),
-        children
-      }
-    ),
-    ctx.name && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.value })
-  ] });
+  const hasItems = ctx.items.length > 0;
+  const visibleCount = ctx.query ? ctx.items.filter((i) => i.text.toLowerCase().includes(ctx.query.toLowerCase())).length : ctx.items.length;
+  const showEmpty = hasItems && visibleCount === 0;
+  return /* @__PURE__ */ jsx(PopoverContent, { bare: true, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("min-w-[var(--anchor-width)] overflow-hidden rounded-md", className),
+      children: [
+        searchable && /* @__PURE__ */ jsx("div", { className: "border-b border-border bg-popover p-1", children: /* @__PURE__ */ jsx(
+          SearchInput,
+          {
+            size: "sm",
+            autoFocus: true,
+            value: ctx.query,
+            onChange: (e) => ctx.setQuery(e.target.value),
+            placeholder: searchPlaceholder,
+            clearable: true,
+            onClear: () => ctx.setQuery(""),
+            className: "rounded-sm"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          Listbox,
+          {
+            value: ctx.value ?? void 0,
+            onValueChange: (v) => {
+              if (v !== null && v !== void 0) ctx.onSelect(v);
+            },
+            isEqual: ctx.isEqual,
+            className: "border-0 shadow-none rounded-none",
+            children: [
+              children,
+              showEmpty && /* @__PURE__ */ jsx(ListboxEmpty, { children: noResultsLabel })
+            ]
+          }
+        ),
+        ctx.name && ctx.hasValue && /* @__PURE__ */ jsx("input", { type: "hidden", name: ctx.name, value: ctx.serialize(ctx.value) })
+      ]
+    }
+  ) });
 }
-var SelectItem = forwardRef(function SelectItem2(props, ref) {
+function extractText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join(" ");
+  if (isValidElement(node)) {
+    const props = node.props;
+    return extractText(props.children);
+  }
+  return "";
+}
+var SelectItem = forwardRef(function SelectItem2({ value, disabled, text, className, children }, ref) {
   const ctx = useSelectContext();
+  const itemText = useMemo(
+    () => text ?? extractText(children),
+    [text, children]
+  );
   useEffect(() => {
-    ctx.registerLabel(props.value, props.children);
-    return () => ctx.unregisterLabel(props.value);
-  }, [ctx, props.value, props.children]);
-  return /* @__PURE__ */ jsx(ListboxItem, { ref, ...props });
+    ctx.registerItem({ value, label: children, text: itemText });
+    return () => ctx.unregisterItem(value);
+  }, [ctx, value, children, itemText]);
+  const matchesQuery = !ctx.query || itemText.toLowerCase().includes(ctx.query.toLowerCase());
+  if (!matchesQuery) return null;
+  return /* @__PURE__ */ jsx(ListboxItem, { ref, value, disabled, className, children });
 });
 Select.Trigger = SelectTrigger;
 Select.Value = SelectValue;
@@ -6983,5 +7233,5 @@ var ChatComposer = forwardRef(
 ChatComposer.displayName = "ChatComposer";
 
 export { ADDRESS_COUNTRIES, AddressForm, BUILT_IN_EMOJI, BUILT_IN_FONTS, Calendar, CharacterCount, ChatComposer, Checkbox, CheckboxField, CheckboxGroup, ChoiceCard, CodeEditor, ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, ColorWheel, Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxSeparator, CronInput, CurrencyInput, DateField, DatePicker, DateRangePicker, Editable, EditableCancel, EditableInput, EditablePreview, EditableSubmit, EmailInput, EmojiPicker, Fieldset, FilePicker, FileUpload, FontPicker, FormErrorMessage, FormField, FormHelperText, GradientPicker, IconPicker, InputAddon, InputGroup, JSONEditor, KeyboardShortcutPicker, Knob, Label, LabeledInput, Legend, Listbox, ListboxEmpty, ListboxGroup, ListboxItem, ListboxSeparator, MarkdownEditor, MaskedInput, MultiSelect, MultiSelectContent, MultiSelectItem, MultiSelectTags, MultiSelectTrigger, NumberInput, PHONE_COUNTRIES, PasswordInput, PasswordStrength, PercentInput, PhoneInput, PinInput, Radio, RadioField, RadioGroup, RangeCalendar, ReactionPicker, RecurrenceEditor, SearchInput, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Slider, Stepper, StepperList, StepperPanel, StepperStep, Switch, SwitchField, TagsInput, TelInput, TextInput, Textarea, TimeField, TimePicker, UrlInput, Wizard, WizardFooter, WizardStep, WizardSteps, colorSwatchVariants, gradientToCss, useWizard };
-//# sourceMappingURL=chunk-7GDZNTC6.js.map
-//# sourceMappingURL=chunk-7GDZNTC6.js.map
+//# sourceMappingURL=chunk-I7UOT7TA.js.map
+//# sourceMappingURL=chunk-I7UOT7TA.js.map