@underverse-ui/underverse 1.0.48 → 1.0.50

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.48",
+  "version": "1.0.50",
   "sourceEntry": "src/index.ts",
   "totalExports": 239,
   "exports": [

package/dist/index.cjs

@@ -665,18 +665,18 @@ var Card = import_react2.default.forwardRef(
               )
             }
           ),
-          (title || description) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("relative flex flex-col space-y-2 p-4 md:p-6 max-md:space-y-1.5 max-md:p-3", headerClassName), children: [
+          (title || description) && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("relative flex min-w-0 flex-col space-y-2 p-4 md:p-6 max-md:space-y-1.5 max-md:p-3", headerClassName), children: [
             title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               "h3",
               {
                 className: cn(
-                  "text-base md:text-lg font-semibold leading-none tracking-tight transition-colors duration-200 max-md:text-sm",
+                  "min-w-0 text-base md:text-lg font-semibold leading-tight tracking-tight break-words [overflow-wrap:anywhere] transition-colors duration-200 max-md:text-sm",
                   hoverable && "group-hover:text-primary"
                 ),
                 children: title
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm md:text-base text-muted-foreground leading-relaxed", children: description })
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "min-w-0 text-sm md:text-base text-muted-foreground leading-relaxed break-words [overflow-wrap:anywhere]", children: description })
           ] }),
           children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("relative", defaultPaddingX, defaultPaddingY, contentClassName), children }),
           footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("relative flex items-center p-4 md:p-6 pt-0 border-t border-border mt-4 max-md:mt-3 max-md:p-3 max-md:pt-0", footerClassName), children: footer })
@@ -15016,6 +15016,7 @@ function CategoryTreeSelect(props) {
   const describedBy = errorId || helperId;
   const mergedLabels = { ...defaultLabels, ...labels };
   const valueArray = singleSelect ? props.value != null ? [props.value] : [] : props.value || [];
+  const selectedIds = (0, import_react19.useMemo)(() => new Set(valueArray), [valueArray]);
   const { parentCategories, childrenMap, byId } = (0, import_react19.useMemo)(() => {
     const byId2 = /* @__PURE__ */ new Map();
     const childrenMap2 = /* @__PURE__ */ new Map();
@@ -15130,69 +15131,84 @@ function CategoryTreeSelect(props) {
     }
   };
   const renderCategory = (category, level = 0) => {
-    const allChildren = childrenMap.get(category.id) || [];
-    const children = isSearchMode ? allChildren.filter((c) => visibleIds?.has(c.id)) : allChildren;
+    const children = effectiveChildrenMap.get(category.id) || [];
     const hasChildren = children.length > 0;
     const isExpanded = hasChildren && (isSearchMode || expandedNodes.has(category.id));
-    const isSelected = valueArray.includes(category.id);
-    const isParent = level === 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "animate-in fade-in-50 duration-200", style: { animationDelay: `${level * 30}ms` }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-        "div",
-        {
-          onClick: () => !viewOnly && handleSelect(category.id, category),
-          className: cn(
-            "relative flex items-center gap-2.5 px-3 py-2.5 min-h-11 transition-all duration-200 rounded-full",
-            // Không phân biệt parent/child - đồng bộ màu
-            !viewOnly && "cursor-pointer",
-            !viewOnly && !isSelected && "hover:bg-accent/50",
-            // Selected state - đồng bộ cho tất cả
-            !viewOnly && isSelected && "bg-accent/40"
+    const isSelected = selectedIds.has(category.id);
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+      "div",
+      {
+        className: "min-w-0 animate-in fade-in-50 duration-200 [content-visibility:auto] [contain-intrinsic-size:44px]",
+        style: { animationDelay: `${level * 30}ms` },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+            "div",
+            {
+              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",
+                // Không phân biệt parent/child - đồng bộ màu
+                !viewOnly && "cursor-pointer",
+                !viewOnly && !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` },
+              children: [
+                hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      toggleExpand(category.id);
+                    },
+                    className: cn(
+                      "p-1.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",
+                      isSearchMode && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
+                    ),
+                    disabled: isSearchMode,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.ChevronRight, { className: "w-4 h-4" }) })
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "w-7" }),
+                viewOnly ? (
+                  // View-only mode: just display the name with folder icon
+                  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex min-w-0 items-center gap-2.5", children: [
+                    category.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)(import_lucide_react25.FolderTree, { className: "h-4 w-4 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/40" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2.5 overflow-hidden", children: [
+                    category.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "h-4 w-4 shrink-0 flex items-center justify-center text-current", children: category.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                      "span",
+                      {
+                        className: cn(
+                          "min-w-0 flex-1 text-sm leading-snug break-words [overflow-wrap:anywhere] transition-all duration-200",
+                          isSelected ? "font-semibold text-primary" : "text-foreground/80"
+                        ),
+                        children: category.name
+                      }
+                    ),
+                    hasChildren && !isSelected && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/50 bg-muted/50 px-1.5 py-0.5 rounded-md", children: children.length })
+                  ] })
+                )
+              ]
+            }
           ),
-          style: { paddingLeft: `${level * 1.25 + 0.75}rem` },
-          children: [
-            hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  toggleExpand(category.id);
-                },
-                className: cn(
-                  "p-1.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",
-                  isSearchMode && "opacity-60 cursor-not-allowed hover:scale-100 active:scale-100"
-                ),
-                disabled: isSearchMode,
-                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.ChevronRight, { className: "w-4 h-4" }) })
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "w-7" }),
-            viewOnly ? (
-              // View-only mode: just display the name with folder icon
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-                category.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-4 h-4 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium", children: category.name })
-              ] })
-            ) : (
-              // Single/Multi select mode: icon + text + badge
-              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2.5 flex-1", children: [
-                category.icon && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "w-4 h-4 flex items-center justify-center text-current", children: category.icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.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 })
-              ] })
-            )
-          ]
-        }
-      ),
-      hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime46.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)) })
-    ] }, category.id);
+          hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime46.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)) })
+        ]
+      },
+      category.id
+    );
   };
-  const renderSearch = () => {
+  const renderSearch = ({ sticky = true, className: className2 } = {}) => {
     if (!isSearchEnabled) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "sticky top-0 z-10 bg-popover/85 backdrop-blur-xl pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cn(sticky && "sticky top-0 z-10 bg-popover/85 pb-2 backdrop-blur-xl", className2), children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "relative", children: [
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_lucide_react25.Search, { className: "absolute left-3.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground/60 transition-colors peer-focus:text-primary" }),
       /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         "input",
@@ -15234,7 +15250,18 @@ function CategoryTreeSelect(props) {
     if (!isSearchMode) return parentCategories;
     return parentCategories.filter((c) => visibleIds?.has(c.id));
   }, [isSearchMode, parentCategories, visibleIds]);
-  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "space-y-0.5", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
+  const effectiveChildrenMap = (0, import_react19.useMemo)(() => {
+    if (!isSearchMode || !visibleIds) return childrenMap;
+    const next = /* @__PURE__ */ new Map();
+    for (const [parentId, children] of childrenMap.entries()) {
+      next.set(
+        parentId,
+        children.filter((child) => visibleIds.has(child.id))
+      );
+    }
+    return next;
+  }, [childrenMap, isSearchMode, visibleIds]);
+  const renderTreeContent = () => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "space-y-0.5 overflow-x-hidden", children: effectiveParentCategories.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex flex-col items-center justify-center py-8 text-center", children: [
     /* @__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)) });
@@ -15357,104 +15384,108 @@ function CategoryTreeSelect(props) {
       displayText = mergedLabels.selectedText(selectedCount);
     }
   }
+  const dropdownBody = /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex max-h-80 flex-col overflow-hidden", children: [
+    renderSearch({ sticky: false, className: "border-b border-border/30 p-2 pb-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "div",
+      {
+        ref: dropdownViewportRef,
+        id: `${resolvedId}-tree`,
+        className: cn("min-h-0 flex-1 overflow-auto overflow-x-hidden p-2 pt-2"),
+        children: 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", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-        "button",
-        {
-          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(
-            "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: [
-            /* @__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",
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      Popover,
+      {
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        disabled,
+        placement: "bottom-start",
+        matchTriggerWidth: true,
+        className: "z-9999",
+        contentClassName: cn(
+          "p-0 overflow-hidden rounded-2xl md:rounded-3xl",
+          "border-border/40 bg-popover/95 text-popover-foreground",
+          "shadow-2xl backdrop-blur-xl"
+        ),
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          "button",
           {
-            ref: dropdownViewportRef,
-            id: `${resolvedId}-tree`,
+            id: resolvedId,
+            type: "button",
+            disabled,
+            role: "combobox",
+            "aria-haspopup": "tree",
+            "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 }) })
+              ] })
             ]
           }
-        )
-      ] })
-    ] }),
+        ),
+        children: dropdownBody
+      }
+    ),
     renderAssistiveText()
   ] });
 }