@underverse-ui/underverse 0.1.20 → 0.1.22

package/dist/index.d.cts

@@ -660,7 +660,7 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & Re
 interface DatePickerProps {
     id?: string;
     value?: Date;
-    onChange: (date: Date) => void;
+    onChange: (date: Date | undefined) => void;
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -704,9 +704,13 @@ interface ComboboxProps {
 }
 declare const Combobox: React$1.FC<ComboboxProps>;
 
+interface MultiComboboxOption {
+    value: string;
+    label: string;
+}
 interface MultiComboboxProps {
     id?: string;
-    options: string[];
+    options: Array<string | MultiComboboxOption>;
     value: string[];
     onChange: (value: string[]) => void;
     placeholder?: string;
@@ -718,7 +722,9 @@ interface MultiComboboxProps {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     label?: string;
+    title?: string;
     required?: boolean;
+    displayFormat?: (option: MultiComboboxOption) => string;
 }
 declare const MultiCombobox: React$1.FC<MultiComboboxProps>;
 

package/dist/index.d.ts

@@ -660,7 +660,7 @@ declare const ScrollArea: React$1.ForwardRefExoticComponent<ScrollAreaProps & Re
 interface DatePickerProps {
     id?: string;
     value?: Date;
-    onChange: (date: Date) => void;
+    onChange: (date: Date | undefined) => void;
     placeholder?: string;
     className?: string;
     disabled?: boolean;
@@ -704,9 +704,13 @@ interface ComboboxProps {
 }
 declare const Combobox: React$1.FC<ComboboxProps>;
 
+interface MultiComboboxOption {
+    value: string;
+    label: string;
+}
 interface MultiComboboxProps {
     id?: string;
-    options: string[];
+    options: Array<string | MultiComboboxOption>;
     value: string[];
     onChange: (value: string[]) => void;
     placeholder?: string;
@@ -718,7 +722,9 @@ interface MultiComboboxProps {
     disabled?: boolean;
     size?: 'sm' | 'md' | 'lg';
     label?: string;
+    title?: string;
     required?: boolean;
+    displayFormat?: (option: MultiComboboxOption) => string;
 }
 declare const MultiCombobox: React$1.FC<MultiComboboxProps>;
 

package/dist/index.js

@@ -3819,7 +3819,11 @@ var Combobox = ({
   const autoId = useId2();
   const resolvedId = id ? String(id) : `combobox-${autoId}`;
   const labelId = label ? `${resolvedId}-label` : void 0;
-  const filteredOptions = React18.useMemo(() => options.filter((o) => getOptionLabel(o).toLowerCase().includes(query.toLowerCase())), [options, query]);
+  const enableSearch = options.length > 10;
+  const filteredOptions = React18.useMemo(
+    () => enableSearch ? options.filter((o) => getOptionLabel(o).toLowerCase().includes(query.toLowerCase())) : options,
+    [options, query, enableSearch]
+  );
   const [dropdownPosition, setDropdownPosition] = React18.useState(null);
   const triggerRef = React18.useRef(null);
   const calculatePosition = React18.useCallback(() => {
@@ -3886,12 +3890,12 @@ var Combobox = ({
     if (!open) {
       setQuery("");
       setActiveIndex(null);
-    } else {
+    } else if (enableSearch) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
     }
-  }, [open]);
+  }, [open, enableSearch]);
   const selectedOption = findOptionByValue(options, value);
   const displayValue = selectedOption ? getOptionLabel(selectedOption) : "";
   const dropdownContent = /* @__PURE__ */ jsx23(
@@ -3914,7 +3918,7 @@ var Combobox = ({
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
       children: /* @__PURE__ */ jsxs21("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
-        /* @__PURE__ */ jsxs21("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
+        enableSearch && /* @__PURE__ */ jsxs21("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
           /* @__PURE__ */ jsx23(Search2, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
           /* @__PURE__ */ jsx23(
             "input",
@@ -4043,11 +4047,12 @@ var Combobox = ({
           setOpen(next);
         },
         className: cn(
-          "flex w-full items-center justify-between border border-input bg-background px-3 vanh",
+          "flex w-full items-center justify-between border border-input bg-background px-3",
           radiusClass,
           sizeStyles8[size],
-          "ring-offset-background placeholder:text-muted-foreground outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-offset-0",
+          "focus-visible: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",
+          "hover:bg-accent/5 transition-colors hover:border-primary/40 focus:border-primary",
           className
         ),
         children: [
@@ -4412,7 +4417,7 @@ ScrollArea.displayName = "ScrollArea";
 import * as React21 from "react";
 import { useId as useId3 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
-import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3 } from "lucide-react";
+import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, X as XIcon } from "lucide-react";
 import { useTranslations as useTranslations5, useLocale } from "next-intl";
 
 // ../../lib/utils/date.ts
@@ -4616,6 +4621,7 @@ var DatePicker = ({
   const [dropdownPosition, setDropdownPosition] = React21.useState(null);
   const [viewDate, setViewDate] = React21.useState(value || /* @__PURE__ */ new Date());
   const triggerRef = React21.useRef(null);
+  const dropdownRef = React21.useRef(null);
   useShadCNAnimations();
   const calculatePosition = React21.useCallback(() => {
     if (!triggerRef.current) return null;
@@ -4641,15 +4647,24 @@ var DatePicker = ({
       window.removeEventListener("scroll", handler, true);
     };
   }, [isOpen, calculatePosition]);
+  React21.useEffect(() => {
+    if (value) {
+      setViewDate(value);
+    } else {
+      setViewDate(/* @__PURE__ */ new Date());
+    }
+  }, [value]);
   React21.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector("[data-datepicker]");
-        if (dropdown && !dropdown.contains(target)) {
-          setIsOpen(false);
-        }
+      const trigger = triggerRef.current;
+      const dropdown = dropdownRef.current;
+      if (!trigger || !dropdown) return;
+      const clickedOutsideTrigger = !trigger.contains(target);
+      const clickedOutsideDropdown = !dropdown.contains(target);
+      if (clickedOutsideTrigger && clickedOutsideDropdown) {
+        setIsOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -4665,11 +4680,18 @@ var DatePicker = ({
     };
   }, [isOpen]);
   const handleDateSelect = (date) => {
-    onChange(date);
+    let selectedDate;
+    if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), value.getHours(), value.getMinutes(), value.getSeconds());
+    } else {
+      const now = /* @__PURE__ */ new Date();
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    onChange(selectedDate);
     setIsOpen(false);
   };
   const formatDateDisplay = (date) => {
-    return locale === "vi" /* VI */ ? formatDate(date) : formatDateShort(date);
+    return formatDate(date);
   };
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -4730,7 +4752,8 @@ var DatePicker = ({
         top: dropdownPosition?.top || 0,
         left: dropdownPosition?.left || 0,
         width: size === "sm" ? dropdownPosition?.width || 224 : dropdownPosition?.width || 256,
-        zIndex: 9999
+        zIndex: 9999,
+        pointerEvents: "none"
       },
       "data-state": isOpen ? "open" : "closed",
       className: cn(
@@ -4741,11 +4764,13 @@ var DatePicker = ({
       children: /* @__PURE__ */ jsxs23(
         "div",
         {
+          ref: dropdownRef,
           className: cn(
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60",
             size === "sm" ? "p-3 w-56" : "p-4 w-64"
           ),
+          style: { pointerEvents: "auto" },
           children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-4", children: [
               /* @__PURE__ */ jsx27(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx27(ChevronLeft2, { className: "h-4 w-4" }) }),
@@ -4753,7 +4778,20 @@ var DatePicker = ({
               /* @__PURE__ */ jsx27(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ jsx27(ChevronRight3, { className: "h-4 w-4" }) })
             ] }),
             /* @__PURE__ */ jsx27("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ jsx27("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
-            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() })
+            /* @__PURE__ */ jsx27("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
+            /* @__PURE__ */ jsx27("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ jsx27(
+              Button_default,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                  setViewDate(/* @__PURE__ */ new Date());
+                },
+                children: clearLabel || t("clear")
+              }
+            ) })
           ]
         }
       )
@@ -4811,6 +4849,31 @@ var DatePicker = ({
         ),
         children: [
           /* @__PURE__ */ jsx27("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
+          value && /* @__PURE__ */ jsx27(
+            "span",
+            {
+              role: "button",
+              "aria-label": clearLabel || t("clear"),
+              tabIndex: 0,
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onChange(void 0);
+                setViewDate(/* @__PURE__ */ new Date());
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onChange(void 0);
+                  setViewDate(/* @__PURE__ */ new Date());
+                }
+              },
+              className: "absolute right-8 inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer",
+              style: { width: 20, height: 20 },
+              children: /* @__PURE__ */ jsx27(XIcon, { className: "h-3.5 w-3.5" })
+            }
+          ),
           /* @__PURE__ */ jsx27(Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }
@@ -5048,7 +5111,9 @@ var MultiCombobox = ({
   disabled = false,
   size = "md",
   label,
-  required
+  title,
+  required,
+  displayFormat = (option) => option.label
 }) => {
   const [query, setQuery] = React22.useState("");
   const [open, setOpen] = React22.useState(false);
@@ -5105,14 +5170,22 @@ var MultiCombobox = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [open]);
-  const filtered = options.filter((o) => o.toLowerCase().includes(query.toLowerCase()));
-  const toggleSelect = (val) => {
-    if (disabledOptions.includes(val)) return;
-    if (value.includes(val)) {
-      onChange(value.filter((v) => v !== val));
+  const normalizedOptions = React22.useMemo(
+    () => options.map((o) => typeof o === "string" ? { value: o, label: o } : { value: o.value, label: o.label }),
+    [options]
+  );
+  const enableSearch = normalizedOptions.length > 10;
+  const filtered = React22.useMemo(
+    () => enableSearch ? normalizedOptions.filter((opt) => opt.label.toLowerCase().includes(query.toLowerCase())) : normalizedOptions,
+    [normalizedOptions, query, enableSearch]
+  );
+  const toggleSelect = (optionValue) => {
+    if (disabledOptions.includes(optionValue)) return;
+    if (value.includes(optionValue)) {
+      onChange(value.filter((v) => v !== optionValue));
     } else {
       if (!maxSelected || value.length < maxSelected) {
-        onChange([...value, val]);
+        onChange([...value, optionValue]);
       }
     }
   };
@@ -5124,7 +5197,7 @@ var MultiCombobox = ({
     if (e.key === "Enter") {
       e.preventDefault();
       if (activeIndex !== null && filtered[activeIndex]) {
-        toggleSelect(filtered[activeIndex]);
+        toggleSelect(filtered[activeIndex].value);
       }
     }
   };
@@ -5132,12 +5205,12 @@ var MultiCombobox = ({
     onChange([]);
   };
   React22.useEffect(() => {
-    if (open) {
+    if (open && enableSearch) {
       setTimeout(() => {
         inputRef.current?.focus();
       }, 100);
     }
-  }, [open]);
+  }, [open, enableSearch]);
   const sizeStyles8 = {
     sm: {
       trigger: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
@@ -5166,6 +5239,20 @@ var MultiCombobox = ({
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
   return /* @__PURE__ */ jsxs24("div", { className: cn("w-full space-y-2 group", className), children: [
+    title && /* @__PURE__ */ jsx28("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs24(
+      "label",
+      {
+        className: cn(
+          size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+          "font-medium transition-colors duration-200",
+          disabled ? "text-muted-foreground" : "text-foreground group-focus-within:text-primary"
+        ),
+        children: [
+          title,
+          required && /* @__PURE__ */ jsx28("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ) }),
     label && /* @__PURE__ */ jsxs24(
       "label",
       {
@@ -5182,148 +5269,152 @@ var MultiCombobox = ({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs24("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ jsxs24("div", { className: "flex flex-wrap gap-1", children: [
-        showTags && value.map((item) => /* @__PURE__ */ jsxs24("span", { className: cn("flex items-center gap-1 rounded bg-accent text-accent-foreground", sizeStyles8[size].tag), children: [
-          item,
-          /* @__PURE__ */ jsx28(
-            "button",
-            {
-              type: "button",
-              onClick: (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                handleRemove(item);
-              },
-              className: "text-xs hover:text-destructive",
-              children: "\xD7"
-            }
-          )
-        ] }, item)),
-        showClear && value.length > 0 && /* @__PURE__ */ jsx28(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleClearAll();
-            },
-            className: "ml-auto text-xs text-muted-foreground hover:underline",
-            children: "Clear all"
+    /* @__PURE__ */ jsx28("div", { className: "relative w-full" }),
+    /* @__PURE__ */ jsxs24(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        disabled,
+        id: resolvedId,
+        "aria-labelledby": labelId,
+        onClick: () => {
+          const next = !open;
+          if (next) {
+            const pos = calculatePosition();
+            if (pos) setDropdownPosition(pos);
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs24(
-        "button",
+          setOpen(next);
+        },
+        className: cn(
+          "flex w-full items-center gap-2 rounded-lg border border-input bg-background shadow-sm min-h-[2.5rem]",
+          "px-3 py-2",
+          "focus-visible: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"
+        ),
+        children: [
+          /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-1 flex-wrap min-h-[1.5rem] flex-1", children: value.length > 0 ? showTags ? value.map((itemValue) => {
+            const option = normalizedOptions.find((o) => o.value === itemValue);
+            return /* @__PURE__ */ jsxs24("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
+              /* @__PURE__ */ jsx28("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
+              /* @__PURE__ */ jsx28(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemove(itemValue);
+                  },
+                  className: "hover:text-destructive transition-colors cursor-pointer",
+                  children: "\xD7"
+                }
+              )
+            ] }, itemValue);
+          }) : /* @__PURE__ */ jsxs24("span", { className: "truncate text-sm", children: [
+            value.length,
+            " selected"
+          ] }) : /* @__PURE__ */ jsx28("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
+          /* @__PURE__ */ jsx28(ChevronDown2, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+        ]
+      }
+    ),
+    open && dropdownPosition && typeof window !== "undefined" ? createPortal8(
+      /* @__PURE__ */ jsx28(
+        "div",
         {
-          ref: triggerRef,
-          type: "button",
-          disabled,
-          id: resolvedId,
-          "aria-labelledby": labelId,
-          onClick: () => {
-            const next = !open;
-            if (next) {
-              const pos = calculatePosition();
-              if (pos) setDropdownPosition(pos);
-            }
-            setOpen(next);
+          "data-dropdown": "multicombobox",
+          style: {
+            position: "absolute",
+            top: dropdownPosition?.top || 0,
+            left: dropdownPosition?.left || 0,
+            width: dropdownPosition?.width || 200,
+            zIndex: 9999
           },
+          "data-state": open ? "open" : "closed",
           className: cn(
-            "flex w-full items-center justify-between rounded-lg border border-input bg-background shadow-sm",
-            sizeStyles8[size].trigger,
-            "outline-none focus:outline-none focus-visible:outline-none focus:ring-0 focus-visible:ring-0 focus:ring-offset-0",
-            "disabled:cursor-not-allowed disabled:opacity-50"
+            "z-[9999]",
+            "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
           ),
-          children: [
-            /* @__PURE__ */ jsx28("span", { className: "truncate", children: value.length ? `${value.length} selected` : placeholder || "Select..." }),
-            /* @__PURE__ */ jsx28(ChevronDown2, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
-          ]
+          children: /* @__PURE__ */ jsxs24(
+            "div",
+            {
+              className: cn(
+                "rounded-md border bg-popover text-popover-foreground shadow-md",
+                "backdrop-blur-sm bg-popover/95 border-border/60"
+              ),
+              children: [
+                showClear && value.length > 0 && /* @__PURE__ */ jsx28("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ jsx28(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleClearAll();
+                    },
+                    className: "text-xs text-muted-foreground hover:underline cursor-pointer",
+                    children: "Clear all"
+                  }
+                ) }),
+                enableSearch && /* @__PURE__ */ jsxs24("div", { className: "relative border-b border-border/60", children: [
+                  /* @__PURE__ */ jsx28(Search3, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+                  /* @__PURE__ */ jsx28(
+                    "input",
+                    {
+                      ref: inputRef,
+                      value: query,
+                      onChange: (e) => {
+                        setQuery(e.target.value);
+                        setActiveIndex(null);
+                      },
+                      onKeyDown: handleKeyDown,
+                      placeholder,
+                      className: cn("w-full rounded-t-md bg-transparent focus:outline-none cursor-text", sizeStyles8[size].search)
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx28("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
+                  const isSelected = value.includes(item.value);
+                  const isDisabled = disabledOptions.includes(item.value);
+                  return /* @__PURE__ */ jsxs24(
+                    "li",
+                    {
+                      ref: (node) => {
+                        listRef.current[index] = node;
+                      },
+                      onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        toggleSelect(item.value);
+                        inputRef.current?.focus();
+                      },
+                      style: {
+                        animationDelay: open ? `${index * 25}ms` : "0ms"
+                      },
+                      className: cn(
+                        "dropdown-item flex cursor-pointer items-center justify-between rounded-sm transition-colors",
+                        sizeStyles8[size].item,
+                        "hover:bg-accent hover:text-accent-foreground",
+                        index === activeIndex && "bg-accent text-accent-foreground",
+                        isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
+                      ),
+                      children: [
+                        item.label,
+                        isSelected && /* @__PURE__ */ jsx28(Check4, { className: sizeStyles8[size].icon })
+                      ]
+                    },
+                    item.value
+                  );
+                }) : /* @__PURE__ */ jsx28("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
+              ]
+            }
+          )
         }
       ),
-      open && dropdownPosition && typeof window !== "undefined" && createPortal8(
-        /* @__PURE__ */ jsx28(
-          "div",
-          {
-            "data-dropdown": "multicombobox",
-            style: {
-              position: "absolute",
-              top: dropdownPosition?.top || 0,
-              left: dropdownPosition?.left || 0,
-              width: dropdownPosition?.width || 200,
-              zIndex: 9999
-            },
-            "data-state": open ? "open" : "closed",
-            className: cn(
-              "z-[9999]",
-              "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-              "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-            ),
-            children: /* @__PURE__ */ jsxs24(
-              "div",
-              {
-                className: cn(
-                  "rounded-md border bg-popover text-popover-foreground shadow-md",
-                  "backdrop-blur-sm bg-popover/95 border-border/60"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxs24("div", { className: "relative border-b border-border/60", children: [
-                    /* @__PURE__ */ jsx28(Search3, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
-                    /* @__PURE__ */ jsx28(
-                      "input",
-                      {
-                        ref: inputRef,
-                        value: query,
-                        onChange: (e) => {
-                          setQuery(e.target.value);
-                          setActiveIndex(null);
-                        },
-                        onKeyDown: handleKeyDown,
-                        placeholder,
-                        className: cn("w-full rounded-t-md bg-transparent focus:outline-none", sizeStyles8[size].search)
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx28("ul", { className: cn("max-h-60 overflow-y-auto p-1", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: filtered.length ? filtered.map((item, index) => {
-                    const isSelected = value.includes(item);
-                    const isDisabled = disabledOptions.includes(item);
-                    return /* @__PURE__ */ jsxs24(
-                      "li",
-                      {
-                        ref: (node) => {
-                          listRef.current[index] = node;
-                        },
-                        onClick: () => {
-                          toggleSelect(item);
-                          inputRef.current?.focus();
-                        },
-                        style: {
-                          animationDelay: open ? `${index * 25}ms` : "0ms"
-                        },
-                        className: cn(
-                          "dropdown-item flex cursor-pointer items-center justify-between rounded-sm transition-colors",
-                          sizeStyles8[size].item,
-                          "hover:bg-accent hover:text-accent-foreground",
-                          index === activeIndex && "bg-accent text-accent-foreground",
-                          isDisabled && "opacity-50 cursor-not-allowed pointer-events-none"
-                        ),
-                        children: [
-                          item,
-                          isSelected && /* @__PURE__ */ jsx28(Check4, { className: sizeStyles8[size].icon })
-                        ]
-                      },
-                      item
-                    );
-                  }) : /* @__PURE__ */ jsx28("li", { className: cn("px-3 py-2 text-muted-foreground", size === "lg" ? "text-base" : size === "sm" ? "text-xs" : "text-sm"), children: "No result." }) })
-                ]
-              }
-            )
-          }
-        ),
-        document.body
-      )
-    ] })
+      document.body
+    ) : null
   ] });
 };