@underverse-ui/underverse 0.1.19 → 0.1.21

package/dist/index.d.cts

@@ -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>;
 
@@ -752,7 +758,7 @@ interface RadioGroupItemProps {
 }
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     value?: number;
     defaultValue?: number;
     min?: number;
@@ -771,6 +777,7 @@ interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
     orientation?: "horizontal" | "vertical";
+    noFocus?: boolean;
 }
 declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLInputElement>>;
 

package/dist/index.d.ts

@@ -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>;
 
@@ -752,7 +758,7 @@ interface RadioGroupItemProps {
 }
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>>;
 
-interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size'> {
+interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> {
     value?: number;
     defaultValue?: number;
     min?: number;
@@ -771,6 +777,7 @@ interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
     orientation?: "horizontal" | "vertical";
+    noFocus?: boolean;
 }
 declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLInputElement>>;
 

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: [
@@ -5048,7 +5053,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 +5112,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 +5139,7 @@ var MultiCombobox = ({
     if (e.key === "Enter") {
       e.preventDefault();
       if (activeIndex !== null && filtered[activeIndex]) {
-        toggleSelect(filtered[activeIndex]);
+        toggleSelect(filtered[activeIndex].value);
       }
     }
   };
@@ -5132,12 +5147,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 +5181,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 +5211,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
   ] });
 };
 
@@ -5669,6 +5702,7 @@ var Slider = React24.forwardRef(
     size = "md",
     disabled = false,
     orientation = "horizontal",
+    noFocus = false,
     ...props
   }, ref) => {
     const [internalValue, setInternalValue] = React24.useState(defaultValue);
@@ -5693,23 +5727,13 @@ var Slider = React24.forwardRef(
         showValue && /* @__PURE__ */ jsx30("span", { className: cn("text-xs font-mono text-muted-foreground min-w-[2rem] text-right", valueClassName), children: displayValue })
       ] }),
       /* @__PURE__ */ jsxs26("div", { className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx30("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: /* @__PURE__ */ jsx30(
           "div",
           {
-            className: cn(
-              "w-full rounded-full bg-secondary relative overflow-hidden",
-              sizeStyles8.track,
-              trackClassName
-            ),
-            children: /* @__PURE__ */ jsx30(
-              "div",
-              {
-                className: "absolute left-0 top-0 h-full bg-primary rounded-full transition-all duration-150 ease-out",
-                style: { width: `${percentage}%` }
-              }
-            )
+            className: "absolute left-0 top-0 h-full bg-primary rounded-full transition-all duration-150 ease-out",
+            style: { width: `${percentage}%` }
           }
-        ),
+        ) }),
         /* @__PURE__ */ jsx30(
           "input",
           {
@@ -5724,7 +5748,8 @@ var Slider = React24.forwardRef(
             className: cn(
               // Base styles
               "absolute w-full h-full appearance-none bg-transparent cursor-pointer",
-              "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-full",
+              !noFocus && "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-full",
+              noFocus && "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none",
               // Webkit styles for thumb
               "[&::-webkit-slider-thumb]:appearance-none",
               "[&::-webkit-slider-thumb]:bg-primary",