@underverse-ui/underverse 1.0.39 → 1.0.41

package/api-reference.json

@@ -1,8 +1,8 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "sourceEntry": "src/index.ts",
-  "totalExports": 232,
+  "totalExports": 238,
   "exports": [
     {
       "name": "*",
@@ -322,6 +322,13 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "Category",
+      "kind": "type",
+      "source": "./components/CategoryTreeSelect",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "CategoryTreeSelect",
       "kind": "value",
@@ -329,6 +336,41 @@
       "reexport": true,
       "local": false
     },
+    {
+      "name": "CategoryTreeSelectBaseProps",
+      "kind": "type",
+      "source": "./components/CategoryTreeSelect",
+      "reexport": true,
+      "local": false
+    },
+    {
+      "name": "CategoryTreeSelectLabels",
+      "kind": "type",
+      "source": "./components/CategoryTreeSelect",
+      "reexport": true,
+      "local": false
+    },
+    {
+      "name": "CategoryTreeSelectMultiProps",
+      "kind": "type",
+      "source": "./components/CategoryTreeSelect",
+      "reexport": true,
+      "local": false
+    },
+    {
+      "name": "CategoryTreeSelectProps",
+      "kind": "type",
+      "source": "./components/CategoryTreeSelect",
+      "reexport": true,
+      "local": false
+    },
+    {
+      "name": "CategoryTreeSelectSingleProps",
+      "kind": "type",
+      "source": "./components/CategoryTreeSelect",
+      "reexport": true,
+      "local": false
+    },
     {
       "name": "Checkbox",
       "kind": "value",

package/dist/index.cjs

@@ -14947,9 +14947,18 @@ var defaultLabels = {
 };
 function CategoryTreeSelect(props) {
   const {
+    id,
+    label,
+    labelClassName,
     categories,
     placeholder = "Select category",
     disabled,
+    required = false,
+    size = "md",
+    variant = "default",
+    allowClear = false,
+    error,
+    helperText,
     viewOnly = false,
     defaultExpanded = false,
     enableSearch,
@@ -14966,6 +14975,12 @@ function CategoryTreeSelect(props) {
   const searchInputRef = (0, import_react19.useRef)(null);
   const dropdownViewportRef = (0, import_react19.useRef)(null);
   useOverlayScrollbarTarget(dropdownViewportRef, { enabled: useOverlayScrollbar });
+  const autoId = (0, import_react19.useId)();
+  const resolvedId = id ? String(id) : `category-tree-select-${autoId}`;
+  const labelId = label ? `${resolvedId}-label` : void 0;
+  const helperId = helperText && !error ? `${resolvedId}-helper` : void 0;
+  const errorId = error ? `${resolvedId}-error` : void 0;
+  const describedBy = errorId || helperId;
   const mergedLabels = { ...defaultLabels, ...labels };
   const valueArray = singleSelect ? props.value != null ? [props.value] : [] : props.value || [];
   const { parentCategories, childrenMap, byId } = (0, import_react19.useMemo)(() => {
@@ -15009,8 +15024,8 @@ function CategoryTreeSelect(props) {
       const stack = [rootId];
       let guard = 0;
       while (stack.length > 0 && guard++ < categories.length * 3) {
-        const id = stack.pop();
-        const children = childrenMap.get(id) ?? [];
+        const id2 = stack.pop();
+        const children = childrenMap.get(id2) ?? [];
         for (const child of children) {
           if (visible.has(child.id)) continue;
           visible.add(child.id);
@@ -15040,13 +15055,13 @@ function CategoryTreeSelect(props) {
       setExpandedNodes(new Set(allParentIds));
     }
   }, [viewOnly, inline, defaultExpanded, categories]);
-  const toggleExpand = (id) => {
+  const toggleExpand = (id2) => {
     if (isSearchMode) return;
     const newExpanded = new Set(expandedNodes);
-    if (newExpanded.has(id)) {
-      newExpanded.delete(id);
+    if (newExpanded.has(id2)) {
+      newExpanded.delete(id2);
     } else {
-      newExpanded.add(id);
+      newExpanded.add(id2);
     }
     setExpandedNodes(newExpanded);
   };
@@ -15190,29 +15205,112 @@ function CategoryTreeSelect(props) {
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-12 h-12 rounded-2xl bg-muted/50 flex items-center justify-center mb-3", children: isSearchMode ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.SearchX, { className: "w-6 h-6 text-muted-foreground/50" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.Layers, { className: "w-6 h-6 text-muted-foreground/50" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm text-muted-foreground", children: isSearchMode ? mergedLabels.noResultsText : mergedLabels.emptyText })
   ] }) : effectiveParentCategories.map((cat) => renderCategory(cat)) });
+  const renderLabel = () => label ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+    Label,
+    {
+      id: labelId,
+      htmlFor: resolvedId,
+      className: cn(
+        size === "sm" ? "text-xs" : size === "lg" ? "text-base" : "text-sm",
+        disabled ? "text-muted-foreground" : "text-foreground",
+        error && "text-destructive",
+        labelClassName
+      ),
+      children: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ml-1 text-destructive", children: "*" })
+      ]
+    }
+  ) }) : null;
+  const renderAssistiveText = () => error ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { id: errorId, className: "text-sm text-destructive", children: error }) : helperText ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { id: helperId, className: "text-sm text-muted-foreground", children: helperText }) : null;
   if (viewOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50", className), children: [
-      renderSearch(),
-      renderTreeContent()
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
+      renderLabel(),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        "div",
+        {
+          id: resolvedId,
+          "aria-labelledby": labelId,
+          "aria-describedby": describedBy,
+          className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50"),
+          children: [
+            renderSearch(),
+            renderTreeContent()
+          ]
+        }
+      ),
+      renderAssistiveText()
     ] });
   }
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-      "div",
-      {
-        className: cn(
-          "rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm",
-          disabled && "opacity-50 pointer-events-none",
-          className
-        ),
-        children: [
-          renderSearch(),
-          renderTreeContent()
-        ]
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
+      renderLabel(),
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+        "div",
+        {
+          id: resolvedId,
+          "aria-labelledby": labelId,
+          "aria-describedby": describedBy,
+          className: cn("rounded-2xl border border-border/60 bg-card/50 backdrop-blur-sm p-3 shadow-sm", disabled && "opacity-50 pointer-events-none"),
+          children: [
+            renderSearch(),
+            renderTreeContent()
+          ]
+        }
+      ),
+      renderAssistiveText()
+    ] });
   }
   const selectedCount = valueArray.length;
+  const triggerSizeStyles = {
+    sm: {
+      button: "h-8 px-3 py-1.5 text-sm md:h-7 md:text-xs",
+      iconWrap: "p-1",
+      icon: "w-3.5 h-3.5 md:w-3 md:h-3",
+      text: "text-xs md:text-[11px]",
+      badge: "px-1.5 py-0.5 text-[10px]",
+      actionIcon: "w-3.5 h-3.5",
+      clearIcon: "h-3 w-3"
+    },
+    md: {
+      button: "h-10 px-3 py-2.5 text-sm",
+      iconWrap: "p-1.5",
+      icon: "w-4 h-4",
+      text: "text-sm",
+      badge: "px-2 py-0.5 text-xs",
+      actionIcon: "w-4 h-4",
+      clearIcon: "h-3.5 w-3.5"
+    },
+    lg: {
+      button: "h-12 px-4 py-3 text-base",
+      iconWrap: "p-1.5",
+      icon: "w-5 h-5",
+      text: "text-base",
+      badge: "px-2.5 py-1 text-sm",
+      actionIcon: "w-5 h-5",
+      clearIcon: "h-4 w-4"
+    }
+  };
+  const triggerVariantStyles = {
+    default: "border border-input bg-background shadow-sm hover:border-primary/50",
+    outline: "border-2 border-input bg-transparent hover:border-primary",
+    ghost: "border border-transparent bg-muted/50 hover:bg-muted",
+    filled: "border border-transparent bg-muted/70 hover:bg-muted"
+  };
+  const clearSelection = () => {
+    if (!props.onChange) return;
+    if (singleSelect) {
+      props.onChange(null);
+      return;
+    }
+    props.onChange([]);
+  };
+  const handleClear = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    clearSelection();
+    setIsOpen(false);
+  };
   let displayText;
   if (singleSelect) {
     displayText = selectedCount > 0 ? categories.find((c) => c.id === valueArray[0])?.name || placeholder : placeholder;
@@ -15220,69 +15318,111 @@ function CategoryTreeSelect(props) {
     if (selectedCount === 0) {
       displayText = placeholder;
     } else if (selectedCount <= 3) {
-      const selectedNames = valueArray.map((id) => categories.find((c) => c.id === id)?.name).filter(Boolean).join(", ");
+      const selectedNames = valueArray.map((id2) => categories.find((c) => c.id === id2)?.name).filter(Boolean).join(", ");
       displayText = selectedNames || placeholder;
     } else {
       displayText = mergedLabels.selectedText(selectedCount);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: () => !disabled && setIsOpen(!isOpen),
-        disabled,
-        className: cn(
-          // Modern trigger button styling
-          "group flex w-full items-center justify-between px-3 py-2.5",
-          "bg-background/80 backdrop-blur-sm border border-border/60",
-          "rounded-full h-11 text-sm",
-          "hover:bg-accent/10 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5 hover:-translate-y-0.5",
-          "transition-all duration-300 ease-out",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-          disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
-          isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10"
-        ),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              "div",
-              {
-                className: cn(
-                  "flex items-center justify-center rounded-lg p-1.5 transition-all duration-300",
-                  isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
-                ),
-                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.FolderTree, { className: cn("w-4 h-4 transition-transform duration-300", isOpen && "scale-110") })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("font-medium transition-colors duration-200", selectedCount === 0 ? "text-muted-foreground" : "text-foreground"), children: displayText }),
-            selectedCount > 0 && !singleSelect && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ml-1 px-2 py-0.5 text-xs font-bold rounded-full bg-primary/15 text-primary", children: selectedCount })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.ChevronDown, { className: "w-4 h-4" }) })
-        ]
-      }
-    ),
-    isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cn("w-full space-y-2", className), children: [
+    renderLabel(),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-        "div",
+        "button",
         {
-          ref: dropdownViewportRef,
+          id: resolvedId,
+          type: "button",
+          onClick: () => !disabled && setIsOpen(!isOpen),
+          disabled,
+          role: "combobox",
+          "aria-haspopup": "tree",
+          "aria-expanded": isOpen,
+          "aria-controls": `${resolvedId}-tree`,
+          "aria-labelledby": labelId,
+          "aria-describedby": describedBy,
+          "aria-invalid": !!error,
           className: cn(
-            "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
-            "rounded-2xl md:rounded-3xl border border-border/40 bg-popover/95 text-popover-foreground",
-            "shadow-2xl backdrop-blur-xl",
-            "p-2",
-            "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+            "group flex w-full items-center justify-between rounded-full transition-all duration-200",
+            "backdrop-blur-sm",
+            triggerSizeStyles[size].button,
+            triggerVariantStyles[variant],
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+            disabled && "opacity-50 cursor-not-allowed hover:transform-none hover:shadow-none",
+            isOpen && "ring-2 ring-primary/30 border-primary/50 shadow-lg shadow-primary/10",
+            error && "border-destructive focus-visible:ring-destructive/30"
           ),
           children: [
-            renderSearch(),
-            renderTreeContent()
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 text-left", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "shrink-0 flex items-center justify-center rounded-lg transition-all duration-300",
+                    triggerSizeStyles[size].iconWrap,
+                    isOpen ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground group-hover:bg-primary/10 group-hover:text-primary"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.FolderTree, { className: cn(triggerSizeStyles[size].icon, "transition-transform duration-300", isOpen && "scale-110") })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0 flex-1 truncate font-medium transition-colors duration-200",
+                    triggerSizeStyles[size].text,
+                    selectedCount === 0 ? "text-muted-foreground" : "text-foreground"
+                  ),
+                  title: displayText,
+                  children: displayText
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "ml-2 flex shrink-0 items-center gap-1.5", children: [
+              allowClear && selectedCount > 0 && !disabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                "div",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": "Clear selection",
+                  onClick: handleClear,
+                  onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && handleClear(event),
+                  className: cn(
+                    "opacity-0 group-hover:opacity-100 transition-all duration-200",
+                    "p-1 rounded-lg hover:bg-destructive/10 text-muted-foreground hover:text-destructive",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.X, { className: triggerSizeStyles[size].clearIcon })
+                }
+              ),
+              selectedCount > 0 && !singleSelect && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("rounded-full bg-primary/15 font-bold text-primary", triggerSizeStyles[size].badge), children: selectedCount }),
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: cn("transition-all duration-300 text-muted-foreground group-hover:text-foreground", isOpen && "rotate-180 text-primary"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.ChevronDown, { className: triggerSizeStyles[size].actionIcon }) })
+            ] })
           ]
         }
-      )
-    ] })
+      ),
+      isOpen && !disabled && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "fixed inset-0 z-10", onClick: () => setIsOpen(false) }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "div",
+          {
+            ref: dropdownViewportRef,
+            id: `${resolvedId}-tree`,
+            className: cn(
+              "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
+              "rounded-2xl md:rounded-3xl border border-border/40 bg-popover/95 text-popover-foreground",
+              "shadow-2xl backdrop-blur-xl",
+              "p-2",
+              "animate-in fade-in-0 zoom-in-95 slide-in-from-top-2 duration-300"
+            ),
+            children: [
+              renderSearch(),
+              renderTreeContent()
+            ]
+          }
+        )
+      ] })
+    ] }),
+    renderAssistiveText()
   ] });
 }