@underverse-ui/underverse 0.1.20 → 0.1.21

package/dist/index.cjs

@@ -3962,7 +3962,11 @@ var Combobox = ({
   const autoId = (0, import_react10.useId)();
   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(() => {
@@ -4029,12 +4033,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__ */ (0, import_jsx_runtime23.jsx)(
@@ -4057,7 +4061,7 @@ var Combobox = ({
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("rounded-md border bg-popover text-popover-foreground shadow-md", "backdrop-blur-sm bg-popover/95 border-border/60"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
+        enableSearch && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative p-3 border-b border-border/50 bg-muted/20", children: [
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react12.Search, { className: "absolute left-6 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground transition-colors" }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "input",
@@ -4186,11 +4190,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: [
@@ -5191,7 +5196,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);
@@ -5248,14 +5255,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]);
       }
     }
   };
@@ -5267,7 +5282,7 @@ var MultiCombobox = ({
     if (e.key === "Enter") {
       e.preventDefault();
       if (activeIndex !== null && filtered[activeIndex]) {
-        toggleSelect(filtered[activeIndex]);
+        toggleSelect(filtered[activeIndex].value);
       }
     }
   };
@@ -5275,12 +5290,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",
@@ -5309,6 +5324,20 @@ var MultiCombobox = ({
   const labelId = label ? `${resolvedId}-label` : void 0;
   const labelSize = size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm";
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("w-full space-y-2 group", className), children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "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__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-destructive ml-1", children: "*" })
+        ]
+      }
+    ) }),
     label && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "label",
       {
@@ -5325,148 +5354,152 @@ var MultiCombobox = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-        showTags && value.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: cn("flex items-center gap-1 rounded bg-accent text-accent-foreground", sizeStyles8[size].tag), children: [
-          item,
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            "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__ */ (0, import_jsx_runtime28.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              handleClearAll();
-            },
-            className: "ml-auto text-xs text-muted-foreground hover:underline",
-            children: "Clear all"
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "relative w-full" }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      "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__ */ (0, import_jsx_runtime28.jsxs)(
-        "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__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleRemove(itemValue);
+                  },
+                  className: "hover:text-destructive transition-colors cursor-pointer",
+                  children: "\xD7"
+                }
+              )
+            ] }, itemValue);
+          }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "truncate text-sm", children: [
+            value.length,
+            " selected"
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "text-muted-foreground", children: placeholder || "Select..." }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
+        ]
+      }
+    ),
+    open && dropdownPosition && typeof window !== "undefined" ? (0, import_react_dom8.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        "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__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate", children: value.length ? `${value.length} selected` : placeholder || "Select..." }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.ChevronDown, { className: cn("opacity-50 transition-transform", sizeStyles8[size].icon, open && "rotate-180") })
-          ]
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+            "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__ */ (0, import_jsx_runtime28.jsx)("div", { className: "px-3 py-2 border-b border-border/60 flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  "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__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative border-b border-border/60", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    "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__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsxs)(
+                    "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__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Check, { className: sizeStyles8[size].icon })
+                      ]
+                    },
+                    item.value
+                  );
+                }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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" && (0, import_react_dom8.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-          "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__ */ (0, import_jsx_runtime28.jsxs)(
-              "div",
-              {
-                className: cn(
-                  "rounded-md border bg-popover text-popover-foreground shadow-md",
-                  "backdrop-blur-sm bg-popover/95 border-border/60"
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative border-b border-border/60", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Search, { className: cn("absolute left-2 top-2.5 text-muted-foreground", sizeStyles8[size].icon) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                      "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__ */ (0, import_jsx_runtime28.jsx)("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__ */ (0, import_jsx_runtime28.jsxs)(
-                      "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__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react15.Check, { className: sizeStyles8[size].icon })
-                        ]
-                      },
-                      item
-                    );
-                  }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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
   ] });
 };