@underverse-ui/underverse 0.2.113 → 0.2.115

package/dist/index.d.cts

@@ -1384,6 +1384,9 @@ interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
     disabled?: boolean;
     orientation?: "horizontal" | "vertical";
     noFocus?: boolean;
+    showTooltip?: boolean;
+    tooltipClassName?: string;
+    useGradient?: boolean;
 }
 declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -1420,6 +1423,7 @@ interface Category {
     id: number;
     name: string;
     parent_id?: number | null;
+    icon?: React__default.ReactNode;
 }
 interface CategoryTreeSelectLabels {
     /** Text shown when no categories available */

package/dist/index.d.ts

@@ -1384,6 +1384,9 @@ interface SliderProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
     disabled?: boolean;
     orientation?: "horizontal" | "vertical";
     noFocus?: boolean;
+    showTooltip?: boolean;
+    tooltipClassName?: string;
+    useGradient?: boolean;
 }
 declare const Slider: React$1.ForwardRefExoticComponent<SliderProps & React$1.RefAttributes<HTMLInputElement>>;
 
@@ -1420,6 +1423,7 @@ interface Category {
     id: number;
     name: string;
     parent_id?: number | null;
+    icon?: React__default.ReactNode;
 }
 interface CategoryTreeSelectLabels {
     /** Text shown when no categories available */

package/dist/index.js

@@ -11467,17 +11467,20 @@ var SIZE_STYLES = {
   sm: {
     track: "h-1",
     thumb: "w-3 h-3",
-    container: "py-1"
+    container: "py-1",
+    tooltip: "text-xs px-2 py-1"
   },
   md: {
     track: "h-2",
     thumb: "w-4 h-4",
-    container: "py-2"
+    container: "py-2",
+    tooltip: "text-sm px-2.5 py-1.5"
   },
   lg: {
     track: "h-3",
     thumb: "w-5 h-5",
-    container: "py-3"
+    container: "py-3",
+    tooltip: "text-sm px-3 py-2"
   }
 };
 var clamp5 = (n, min, max) => Math.min(max, Math.max(min, n));
@@ -11510,6 +11513,9 @@ var Slider = React35.forwardRef(
     disabled = false,
     orientation = "horizontal",
     noFocus = true,
+    showTooltip = true,
+    tooltipClassName,
+    useGradient = true,
     ...props
   }, ref) => {
     const isRange = mode === "range";
@@ -11522,6 +11528,8 @@ var Slider = React35.forwardRef(
     });
     const [activeThumb, setActiveThumb] = React35.useState(null);
     const dragRef = React35.useRef(null);
+    const [isHovering, setIsHovering] = React35.useState(false);
+    const [isDragging, setIsDragging] = React35.useState(false);
     const isControlled = value !== void 0;
     const currentValue = isControlled ? value : internalValue;
     const isRangeControlled = rangeValue !== void 0;
@@ -11600,6 +11608,7 @@ var Slider = React35.forwardRef(
       const distToMax = Math.abs(nextValue - curMax);
       const thumb = distToMin <= distToMax ? "min" : "max";
       setActiveThumb(thumb);
+      setIsDragging(true);
       dragRef.current = { pointerId: e.pointerId, thumb };
       try {
         e.currentTarget.setPointerCapture(e.pointerId);
@@ -11624,6 +11633,7 @@ var Slider = React35.forwardRef(
       if (!drag) return;
       if (e.pointerId !== drag.pointerId) return;
       dragRef.current = null;
+      setIsDragging(false);
       onMouseUp?.();
       onTouchEnd?.();
       try {
@@ -11633,135 +11643,198 @@ var Slider = React35.forwardRef(
     };
     if (orientation === "vertical") {
     }
+    const Tooltip2 = ({ value: value2, position }) => {
+      const shouldShow = showTooltip && !disabled && (isHovering || isDragging);
+      const displayVal = formatValue ? formatValue(value2) : value2.toString();
+      return /* @__PURE__ */ jsxs36(
+        "div",
+        {
+          className: cn(
+            "absolute pointer-events-none transition-all duration-200 ease-out",
+            "bg-popover text-popover-foreground rounded-lg shadow-lg border border-border",
+            "whitespace-nowrap font-medium -translate-x-1/2 z-50",
+            sizeStyles8.tooltip,
+            shouldShow ? "opacity-100 -translate-y-10 scale-100" : "opacity-0 -translate-y-8 scale-95",
+            tooltipClassName
+          ),
+          style: {
+            left: `${position}%`,
+            bottom: "100%"
+          },
+          children: [
+            displayVal,
+            /* @__PURE__ */ jsx41("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-4 border-transparent border-t-border" }),
+            /* @__PURE__ */ jsx41("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-[3px] border-transparent border-t-popover -mt-px" })
+          ]
+        }
+      );
+    };
     return /* @__PURE__ */ jsxs36("div", { className: cn("w-full space-y-2", containerClassName), children: [
       (label || showValue) && /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between", children: [
         label && /* @__PURE__ */ jsx41("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
         showValue && /* @__PURE__ */ jsx41("span", { className: cn("text-xs font-mono text-muted-foreground min-w-8 text-right", valueClassName), children: displayValue })
       ] }),
-      /* @__PURE__ */ jsxs36("div", { ref: trackRef, className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ jsx41("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: isRange ? /* @__PURE__ */ jsx41(
-          "div",
-          {
-            className: "absolute top-0 h-full bg-primary rounded-full",
-            style: { left: `${rangeStartPct}%`, width: `${Math.max(0, rangeEndPct - rangeStartPct)}%` }
-          }
-        ) : /* @__PURE__ */ jsx41("div", { className: "absolute left-0 top-0 h-full bg-primary rounded-full", style: { width: `${percentage}%` } }) }),
-        (() => {
-          const baseInputClassName = cn(
-            // Base styles
-            "absolute w-full h-full appearance-none bg-transparent cursor-pointer",
-            !noFocus && "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-full",
-            noFocus && "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none",
-            // Webkit styles for thumb
-            "[&::-webkit-slider-thumb]:appearance-none",
-            "[&::-webkit-slider-thumb]:bg-primary",
-            "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background",
-            "[&::-webkit-slider-thumb]:rounded-full",
-            "[&::-webkit-slider-thumb]:shadow-md",
-            "[&::-webkit-slider-thumb]:cursor-pointer",
-            "[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-150",
-            size === "sm" && "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
-            size === "md" && "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
-            size === "lg" && "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
-            // Firefox styles for thumb
-            "[&::-moz-range-thumb]:bg-primary",
-            "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background",
-            "[&::-moz-range-thumb]:rounded-full",
-            "[&::-moz-range-thumb]:shadow-md",
-            "[&::-moz-range-thumb]:cursor-pointer",
-            "[&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-150",
-            size === "sm" && "[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
-            size === "md" && "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
-            size === "lg" && "[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",
-            // Remove default track in Firefox
-            "[&::-moz-range-track]:bg-transparent",
-            "[&::-moz-range-track]:border-transparent",
-            // Hover effects
-            "hover:[&::-webkit-slider-thumb]:scale-110 hover:[&::-webkit-slider-thumb]:shadow-lg",
-            "hover:[&::-moz-range-thumb]:scale-110 hover:[&::-moz-range-thumb]:shadow-lg",
-            // Disabled styles
-            disabled && [
-              "cursor-not-allowed opacity-50",
-              "[&::-webkit-slider-thumb]:cursor-not-allowed [&::-webkit-slider-thumb]:opacity-50",
-              "[&::-moz-range-thumb]:cursor-not-allowed [&::-moz-range-thumb]:opacity-50"
-            ],
-            className,
-            thumbClassName
-          );
-          if (!isRange) {
-            return /* @__PURE__ */ jsx41(
-              "input",
-              {
-                ref,
-                type: "range",
-                min,
-                max,
-                step,
-                value: currentValue,
-                onChange: handleSingleChange,
-                onMouseUp,
-                onTouchEnd,
-                disabled,
-                className: baseInputClassName,
-                ...props
-              }
-            );
-          }
-          const minZ = activeThumb === "min" ? "z-20" : "z-10";
-          const maxZ = activeThumb === "max" ? "z-20" : "z-10";
-          return /* @__PURE__ */ jsxs36(Fragment14, { children: [
-            /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsxs36(
+        "div",
+        {
+          ref: trackRef,
+          className: cn("relative flex items-center", sizeStyles8.container),
+          onMouseEnter: () => setIsHovering(true),
+          onMouseLeave: () => setIsHovering(false),
+          children: [
+            /* @__PURE__ */ jsx41("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden shadow-inner", sizeStyles8.track, trackClassName), children: isRange ? /* @__PURE__ */ jsx41(
               "div",
               {
-                className: cn("absolute inset-0 z-30", disabled ? "cursor-not-allowed" : "cursor-pointer"),
-                onPointerDown: startRangeDrag,
-                onPointerMove: moveRangeDrag,
-                onPointerUp: endRangeDrag,
-                onPointerCancel: endRangeDrag
+                className: cn(
+                  "absolute top-0 h-full rounded-full transition-all duration-150",
+                  useGradient ? "bg-linear-to-r from-primary via-primary to-primary/80 shadow-[0_0_8px_rgba(var(--primary-rgb,147,51,234),0.3)]" : "bg-primary"
+                ),
+                style: { left: `${rangeStartPct}%`, width: `${Math.max(0, rangeEndPct - rangeStartPct)}%` }
               }
-            ),
-            /* @__PURE__ */ jsx41(
-              "input",
+            ) : /* @__PURE__ */ jsx41(
+              "div",
               {
-                ref,
-                type: "range",
-                min,
-                max,
-                step,
-                value: normalizedRange[0],
-                onChange: handleRangeChange("min"),
-                onMouseUp,
-                onTouchEnd,
-                disabled,
-                "aria-label": "Minimum value",
-                onPointerDown: () => setActiveThumb("min"),
-                onFocus: () => setActiveThumb("min"),
-                className: cn(baseInputClassName, minZ, "pointer-events-none"),
-                ...props
+                className: cn(
+                  "absolute left-0 top-0 h-full rounded-full transition-all duration-150",
+                  useGradient ? "bg-linear-to-r from-primary via-primary to-primary/80 shadow-[0_0_8px_rgba(var(--primary-rgb,147,51,234),0.3)]" : "bg-primary"
+                ),
+                style: { width: `${percentage}%` }
               }
-            ),
-            /* @__PURE__ */ jsx41(
-              "input",
-              {
-                type: "range",
-                min,
-                max,
-                step,
-                value: normalizedRange[1],
-                onChange: handleRangeChange("max"),
-                onMouseUp,
-                onTouchEnd,
-                disabled,
-                "aria-label": "Maximum value",
-                onPointerDown: () => setActiveThumb("max"),
-                onFocus: () => setActiveThumb("max"),
-                className: cn(baseInputClassName, maxZ, "pointer-events-none"),
-                ...props
+            ) }),
+            !isRange && /* @__PURE__ */ jsx41(Tooltip2, { value: currentValue, position: percentage }),
+            isRange && /* @__PURE__ */ jsxs36(Fragment14, { children: [
+              /* @__PURE__ */ jsx41(Tooltip2, { value: normalizedRange[0], position: rangeStartPct }),
+              /* @__PURE__ */ jsx41(Tooltip2, { value: normalizedRange[1], position: rangeEndPct })
+            ] }),
+            (() => {
+              const baseInputClassName = cn(
+                // Base styles
+                "absolute w-full h-full appearance-none bg-transparent cursor-pointer",
+                !noFocus && "focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-background rounded-full",
+                noFocus && "outline-none ring-0 focus:outline-none focus:ring-0 focus-visible:outline-none",
+                // Webkit styles for thumb
+                "[&::-webkit-slider-thumb]:appearance-none",
+                "[&::-webkit-slider-thumb]:bg-linear-to-br [&::-webkit-slider-thumb]:from-primary [&::-webkit-slider-thumb]:to-primary/80",
+                "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-background",
+                "[&::-webkit-slider-thumb]:rounded-full",
+                "[&::-webkit-slider-thumb]:shadow-[0_2px_8px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]",
+                "[&::-webkit-slider-thumb]:cursor-pointer",
+                "[&::-webkit-slider-thumb]:transition-all [&::-webkit-slider-thumb]:duration-200 [&::-webkit-slider-thumb]:ease-out",
+                size === "sm" && "[&::-webkit-slider-thumb]:w-3 [&::-webkit-slider-thumb]:h-3",
+                size === "md" && "[&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4",
+                size === "lg" && "[&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5",
+                // Firefox styles for thumb
+                "[&::-moz-range-thumb]:bg-linear-to-br [&::-moz-range-thumb]:from-primary [&::-moz-range-thumb]:to-primary/80",
+                "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-background",
+                "[&::-moz-range-thumb]:rounded-full",
+                "[&::-moz-range-thumb]:shadow-[0_2px_8px_rgba(0,0,0,0.15),0_0_0_1px_rgba(0,0,0,0.05)]",
+                "[&::-moz-range-thumb]:cursor-pointer",
+                "[&::-moz-range-thumb]:transition-all [&::-moz-range-thumb]:duration-200 [&::-moz-range-thumb]:ease-out",
+                size === "sm" && "[&::-moz-range-thumb]:w-3 [&::-moz-range-thumb]:h-3",
+                size === "md" && "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4",
+                size === "lg" && "[&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5",
+                // Remove default track in Firefox
+                "[&::-moz-range-track]:bg-transparent",
+                "[&::-moz-range-track]:border-transparent",
+                // Hover effects - Enhanced premium look
+                "hover:[&::-webkit-slider-thumb]:scale-110 hover:[&::-webkit-slider-thumb]:shadow-[0_4px_16px_rgba(0,0,0,0.2),0_0_12px_rgba(var(--primary-rgb,147,51,234),0.4)]",
+                "hover:[&::-moz-range-thumb]:scale-110 hover:[&::-moz-range-thumb]:shadow-[0_4px_16px_rgba(0,0,0,0.2),0_0_12px_rgba(var(--primary-rgb,147,51,234),0.4)]",
+                // Active/dragging effects
+                "active:[&::-webkit-slider-thumb]:scale-105 active:[&::-webkit-slider-thumb]:shadow-[0_2px_12px_rgba(0,0,0,0.25),0_0_16px_rgba(var(--primary-rgb,147,51,234),0.5)]",
+                "active:[&::-moz-range-thumb]:scale-105 active:[&::-moz-range-thumb]:shadow-[0_2px_12px_rgba(0,0,0,0.25),0_0_16px_rgba(var(--primary-rgb,147,51,234),0.5)]",
+                // Disabled styles
+                disabled && [
+                  "cursor-not-allowed opacity-50",
+                  "[&::-webkit-slider-thumb]:cursor-not-allowed [&::-webkit-slider-thumb]:opacity-50 [&::-webkit-slider-thumb]:shadow-none",
+                  "[&::-moz-range-thumb]:cursor-not-allowed [&::-moz-range-thumb]:opacity-50 [&::-moz-range-thumb]:shadow-none"
+                ],
+                className,
+                thumbClassName
+              );
+              if (!isRange) {
+                return /* @__PURE__ */ jsx41(
+                  "input",
+                  {
+                    ref,
+                    type: "range",
+                    min,
+                    max,
+                    step,
+                    value: currentValue,
+                    onChange: handleSingleChange,
+                    onMouseDown: () => setIsDragging(true),
+                    onMouseUp: () => {
+                      setIsDragging(false);
+                      onMouseUp?.();
+                    },
+                    onTouchStart: () => setIsDragging(true),
+                    onTouchEnd: () => {
+                      setIsDragging(false);
+                      onTouchEnd?.();
+                    },
+                    disabled,
+                    className: baseInputClassName,
+                    ...props
+                  }
+                );
               }
-            )
-          ] });
-        })()
-      ] })
+              const minZ = activeThumb === "min" ? "z-20" : "z-10";
+              const maxZ = activeThumb === "max" ? "z-20" : "z-10";
+              return /* @__PURE__ */ jsxs36(Fragment14, { children: [
+                /* @__PURE__ */ jsx41(
+                  "div",
+                  {
+                    className: cn("absolute inset-0 z-30", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+                    onPointerDown: startRangeDrag,
+                    onPointerMove: moveRangeDrag,
+                    onPointerUp: endRangeDrag,
+                    onPointerCancel: endRangeDrag
+                  }
+                ),
+                /* @__PURE__ */ jsx41(
+                  "input",
+                  {
+                    ref,
+                    type: "range",
+                    min,
+                    max,
+                    step,
+                    value: normalizedRange[0],
+                    onChange: handleRangeChange("min"),
+                    onMouseUp,
+                    onTouchEnd,
+                    disabled,
+                    "aria-label": "Minimum value",
+                    onPointerDown: () => setActiveThumb("min"),
+                    onFocus: () => setActiveThumb("min"),
+                    className: cn(baseInputClassName, minZ, "pointer-events-none"),
+                    ...props
+                  }
+                ),
+                /* @__PURE__ */ jsx41(
+                  "input",
+                  {
+                    type: "range",
+                    min,
+                    max,
+                    step,
+                    value: normalizedRange[1],
+                    onChange: handleRangeChange("max"),
+                    onMouseUp,
+                    onTouchEnd,
+                    disabled,
+                    "aria-label": "Maximum value",
+                    onPointerDown: () => setActiveThumb("max"),
+                    onFocus: () => setActiveThumb("max"),
+                    className: cn(baseInputClassName, maxZ, "pointer-events-none"),
+                    ...props
+                  }
+                )
+              ] });
+            })()
+          ]
+        }
+      )
     ] });
   }
 );
@@ -12202,7 +12275,7 @@ function OverlayControls({
 
 // ../../components/ui/CategoryTreeSelect.tsx
 import { useState as useState30, useEffect as useEffect20 } from "react";
-import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown4, Check as Check6, FolderTree, Layers } from "lucide-react";
+import { ChevronRight as ChevronRight6, ChevronDown as ChevronDown4, FolderTree, Layers } from "lucide-react";
 import { Fragment as Fragment16, jsx as jsx43, jsxs as jsxs38 } from "react/jsx-runtime";
 var defaultLabels = {
   emptyText: "No categories",
@@ -12291,8 +12364,9 @@ function CategoryTreeSelect(props) {
       /* @__PURE__ */ jsxs38(
         "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",
@@ -12311,9 +12385,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__ */ jsx43("div", { className: cn("transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx43(ChevronRight6, { className: "w-4 h-4" }) })
               }
@@ -12321,57 +12395,14 @@ function CategoryTreeSelect(props) {
             viewOnly ? (
               // View-only mode: just display the name with folder icon
               /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2.5", children: [
-                hasChildren ? /* @__PURE__ */ jsx43(FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ jsx43("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
+                category.icon ? /* @__PURE__ */ jsx43("div", { className: "w-4 h-4 flex items-center justify-center text-muted-foreground/60", children: category.icon }) : hasChildren ? /* @__PURE__ */ jsx43(FolderTree, { className: "w-4 h-4 text-muted-foreground/60" }) : /* @__PURE__ */ jsx43("div", { className: "w-1.5 h-1.5 rounded-full bg-muted-foreground/40" }),
                 /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium", children: category.name })
               ] })
-            ) : singleSelect ? (
-              // Single select mode: radio-style indicator
-              /* @__PURE__ */ jsxs38("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2.5 flex-1", children: [
-                /* @__PURE__ */ jsx43(
-                  "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__ */ jsx43("div", { className: "w-2.5 h-2.5 rounded-full bg-linear-to-br from-primary to-primary/80 shadow-sm" })
-                  }
-                ),
-                /* @__PURE__ */ jsx43(
-                  "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__ */ jsx43("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__ */ jsxs38("div", { onClick: () => handleSelect(category.id, category), className: "flex items-center gap-2.5 flex-1", children: [
-                /* @__PURE__ */ jsx43(
-                  "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__ */ jsx43(Check6, { className: "w-3 h-3 text-primary-foreground", strokeWidth: 3 })
-                  }
-                ),
-                /* @__PURE__ */ jsx43(
-                  "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__ */ jsxs38("div", { className: "flex items-center gap-2.5 flex-1", children: [
+                category.icon && /* @__PURE__ */ jsx43("div", { className: "w-4 h-4 flex items-center justify-center text-current", children: category.icon }),
+                /* @__PURE__ */ jsx43("span", { className: cn("text-sm transition-all duration-200", isSelected ? "font-semibold text-primary" : "text-foreground/80"), children: category.name }),
                 hasChildren && !isSelected && /* @__PURE__ */ jsx43("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 })
               ] })
             )
@@ -12402,7 +12433,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__ */ jsxs38("div", { className: cn("relative", className), children: [
     /* @__PURE__ */ jsxs38(
       "button",
@@ -12447,7 +12490,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"