@underverse-ui/underverse 1.0.89 → 1.0.90

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.89",
+  "version": "1.0.90",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -16863,6 +16863,11 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
+var TREE_NODE_BASE_PADDING_REM = 0.75;
+var TREE_NODE_INDENT_REM = 1;
+var TREE_BRANCH_OFFSET_CLASS = "ml-1.5 pl-1.5";
+var TREE_NODE_GAP_CLASS = "gap-1.5";
+var TREE_EXPANDER_PLACEHOLDER_CLASS = "w-5";
 function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline) {
   if (!(viewOnly || inline) || !defaultExpanded) return /* @__PURE__ */ new Set();
   const parentIds = /* @__PURE__ */ new Set();
@@ -17051,13 +17056,14 @@ function CategoryTreeSelect(props) {
             {
               onClick: () => !viewOnly && handleSelect(category.id, category),
               className: cn(
-                "relative flex min-w-0 items-center gap-2.5 px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                "relative flex min-w-0 items-center px-3 py-2.5 min-h-11 transition-all duration-200 rounded-3xl",
+                TREE_NODE_GAP_CLASS,
                 !viewOnly && (isSelectable ? "cursor-pointer" : "cursor-default"),
                 isSelectable && !isSelected && "hover:bg-accent/50",
                 // Selected state - đồng bộ cho tất cả
                 !viewOnly && isSelected && "bg-accent/40"
               ),
-              style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
+              style: { paddingLeft: `${level * TREE_NODE_INDENT_REM + TREE_NODE_BASE_PADDING_REM}rem` },
               children: [
                 hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                   "button",
@@ -17068,7 +17074,7 @@ function CategoryTreeSelect(props) {
                       toggleExpand(category.id);
                     },
                     className: cn(
-                      "p-1.5 rounded-lg transition-all duration-200",
+                      "p-0.5 rounded-lg transition-all duration-200",
                       "hover:scale-110 active:scale-95",
                       "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                       isExpanded && "text-primary",
@@ -17077,16 +17083,16 @@ function CategoryTreeSelect(props) {
                     disabled: isSearchMode,
                     children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.ChevronRight, { className: "w-4 h-4" }) })
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "w-7" }),
+                ) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: TREE_EXPANDER_PLACEHOLDER_CLASS }),
                 viewOnly ? (
                   // View-only mode: just display the name with folder icon
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex min-w-0 items-center", TREE_NODE_GAP_CLASS), children: [
                     category.icon ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_lucide_react26.FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
                     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "min-w-0 text-sm font-medium leading-snug break-words [overflow-wrap:anywhere]", children: category.name })
                   ] })
                 ) : (
                   // Single/Multi select mode: icon + text + badge
-                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex min-w-0 flex-1 items-center overflow-hidden", TREE_NODE_GAP_CLASS), children: [
                     category.icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-current", children: category.icon }),
                     /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                       "span",
@@ -17105,7 +17111,17 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("ml-2 pl-2 border-l-2 border-dashed border-border/50", "animate-in slide-in-from-top-2 fade-in-50 duration-200"), children: children.map((child) => renderCategory(child, level + 1)) })
+          hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            "div",
+            {
+              className: cn(
+                TREE_BRANCH_OFFSET_CLASS,
+                "border-l-2 border-dashed border-border/50",
+                "animate-in slide-in-from-top-2 fade-in-50 duration-200"
+              ),
+              children: children.map((child) => renderCategory(child, level + 1))
+            }
+          )
         ]
       },
       category.id