@underverse-ui/underverse 1.0.89 → 1.0.91

package/dist/index.js

@@ -16236,6 +16236,25 @@ Slider.displayName = "Slider";
 import { Dot as Dot2, Maximize2, Pause, Play, RotateCcw, RotateCw, Volume2, VolumeX } from "lucide-react";
 import React42 from "react";
 import { Fragment as Fragment15, jsx as jsx48, jsxs as jsxs38 } from "react/jsx-runtime";
+function resolveKeyboardEventElement(target) {
+  if (target instanceof Element) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
+}
+function isEditableKeyboardTarget(target) {
+  const element = resolveKeyboardEventElement(target);
+  if (!element) return false;
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+    return true;
+  }
+  if (element instanceof HTMLElement && element.isContentEditable) {
+    return true;
+  }
+  if (element.closest?.('[contenteditable=""],[contenteditable="true"],[contenteditable="plaintext-only"]') || element.closest?.('[role="textbox"]')) {
+    return true;
+  }
+  return false;
+}
 function OverlayControls({
   mode,
   value,
@@ -16334,7 +16353,7 @@ function OverlayControls({
   React42.useEffect(() => {
     if (!enableKeyboardShortcuts) return;
     const handleKeyDown2 = (e) => {
-      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (isEditableKeyboardTarget(e.target)) return;
       switch (e.key) {
         case " ":
         case "k":
@@ -16678,6 +16697,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();
@@ -16866,13 +16890,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__ */ jsx49(
                   "button",
@@ -16883,7 +16908,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",
@@ -16892,16 +16917,16 @@ function CategoryTreeSelect(props) {
                     disabled: isSearchMode,
                     children: /* @__PURE__ */ jsx49("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx49(ChevronRight6, { className: "w-4 h-4" }) })
                   }
-                ) : /* @__PURE__ */ jsx49("span", { className: "w-7" }),
+                ) : /* @__PURE__ */ jsx49("span", { className: TREE_EXPANDER_PLACEHOLDER_CLASS }),
                 viewOnly ? (
                   // View-only mode: just display the name with folder icon
-                  /* @__PURE__ */ jsxs39("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsxs39("div", { className: cn("flex min-w-0 items-center", TREE_NODE_GAP_CLASS), children: [
                     category.icon ? /* @__PURE__ */ jsx49("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ jsx49(FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ jsx49("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
                     /* @__PURE__ */ jsx49("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__ */ jsxs39("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
+                  /* @__PURE__ */ jsxs39("div", { className: cn("flex min-w-0 flex-1 items-center overflow-hidden", TREE_NODE_GAP_CLASS), children: [
                     category.icon && /* @__PURE__ */ jsx49("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-current", children: category.icon }),
                     /* @__PURE__ */ jsx49(
                       "span",
@@ -16920,7 +16945,17 @@ function CategoryTreeSelect(props) {
               ]
             }
           ),
-          hasChildren && isExpanded && /* @__PURE__ */ jsx49("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__ */ jsx49(
+            "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