@underverse-ui/underverse 0.2.114 → 0.2.115

package/dist/index.cjs

@@ -12539,8 +12539,9 @@ function CategoryTreeSelect(props) {
       /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
         "div",
         {
+          onClick: () => !viewOnly && handleSelect(category.id, category),
           className: cn(
-            "relative flex items-center gap-2.5 px-3 py-2.5 transition-all duration-200 rounded-lg",
+            "relative flex items-center gap-2.5 px-3 py-2.5 min-h-11 transition-all duration-200 rounded-lg",
             // Không phân biệt parent/child - đồng bộ màu
             !viewOnly && "cursor-pointer",
             !viewOnly && !isSelected && "hover:bg-accent/50",
@@ -12559,9 +12560,9 @@ function CategoryTreeSelect(props) {
                 },
                 className: cn(
                   "p-1.5 rounded-lg transition-all duration-200",
-                  "hover:bg-accent hover:scale-110 active:scale-95",
+                  "hover:scale-110 active:scale-95",
                   "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
-                  isExpanded && "bg-accent/50 text-primary"
+                  isExpanded && "text-primary"
                 ),
                 children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.ChevronRight, { className: "w-4 h-4" }) })
               }
@@ -12569,57 +12570,14 @@ function CategoryTreeSelect(props) {
             viewOnly ? (
               // View-only mode: just display the name with folder icon
               /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-                hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
+                category.icon ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-4 h-4 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
                 /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "text-sm font-medium", children: category.name })
               ] })
-            ) : singleSelect ? (
-              // Single select mode: radio-style indicator
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2.5 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  "div",
-                  {
-                    className: cn(
-                      "w-5 h-5 border-2 rounded-full flex items-center justify-center transition-all duration-200",
-                      isSelected ? "border-primary bg-primary/10 shadow-sm shadow-primary/20" : "border-muted-foreground/30 hover:border-primary/50"
-                    ),
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-2.5 h-2.5 rounded-full bg-linear-to-br from-primary to-primary/80 shadow-sm" })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  "span",
-                  {
-                    className: cn(
-                      "text-sm transition-all duration-200",
-                      isSelected ? "font-semibold text-primary" : "text-foreground/80 hover:text-foreground"
-                    ),
-                    children: category.name
-                  }
-                ),
-                hasChildren && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-auto text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
-              ] })
             ) : (
-              // Multi select mode: checkbox-style indicator
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2.5 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  "div",
-                  {
-                    className: cn(
-                      "w-5 h-5 border-2 rounded-lg flex items-center justify-center transition-all duration-200",
-                      isSelected ? "bg-linear-to-br from-primary to-primary/80 border-primary shadow-sm shadow-primary/25" : "border-muted-foreground/30 hover:border-primary/50 hover:bg-primary/5"
-                    ),
-                    children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react24.Check, { className: "w-3 h-3 text-primary-foreground", strokeWidth: 3 })
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-                  "span",
-                  {
-                    className: cn(
-                      "text-sm transition-all duration-200",
-                      isSelected ? "font-semibold text-primary" : "text-foreground/80 hover:text-foreground"
-                    ),
-                    children: category.name
-                  }
-                ),
+              // Single/Multi select mode: icon + text + badge
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center gap-2.5 flex-1", children: [
+                category.icon && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-4 h-4 flex items-center justify-center text-current", children: category.icon }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cn("text-sm transition-all duration-200", isSelected ? "font-semibold text-primary" : "text-foreground/80"), children: category.name }),
                 hasChildren && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "ml-auto text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
               ] })
             )
@@ -12650,7 +12608,19 @@ function CategoryTreeSelect(props) {
     );
   }
   const selectedCount = valueArray.length;
-  const displayText = singleSelect ? selectedCount > 0 ? categories.find((c) => c.id === valueArray[0])?.name || placeholder : placeholder : selectedCount > 0 ? mergedLabels.selectedText(selectedCount) : placeholder;
+  let displayText;
+  if (singleSelect) {
+    displayText = selectedCount > 0 ? categories.find((c) => c.id === valueArray[0])?.name || placeholder : placeholder;
+  } else {
+    if (selectedCount === 0) {
+      displayText = placeholder;
+    } else if (selectedCount <= 3) {
+      const selectedNames = valueArray.map((id) => categories.find((c) => c.id === id)?.name).filter(Boolean).join(", ");
+      displayText = selectedNames || placeholder;
+    } else {
+      displayText = mergedLabels.selectedText(selectedCount);
+    }
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "button",
@@ -12695,7 +12665,7 @@ function CategoryTreeSelect(props) {
         {
           className: cn(
             "absolute z-20 mt-2 w-full max-h-80 overflow-auto",
-            "rounded-2xl md:rounded-3xl overflow-hidden border border-border/40 bg-popover/95 text-popover-foreground",
+            "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"