@underverse-ui/underverse 0.2.113 → 0.2.114

package/dist/index.cjs

@@ -11642,17 +11642,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));
@@ -11685,6 +11688,9 @@ var Slider = React35.forwardRef(
     disabled = false,
     orientation = "horizontal",
     noFocus = true,
+    showTooltip = true,
+    tooltipClassName,
+    useGradient = true,
     ...props
   }, ref) => {
     const isRange = mode === "range";
@@ -11697,6 +11703,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;
@@ -11775,6 +11783,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);
@@ -11799,6 +11808,7 @@ var Slider = React35.forwardRef(
       if (!drag) return;
       if (e.pointerId !== drag.pointerId) return;
       dragRef.current = null;
+      setIsDragging(false);
       onMouseUp?.();
       onTouchEnd?.();
       try {
@@ -11808,135 +11818,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__ */ (0, import_jsx_runtime41.jsxs)(
+        "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__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute left-1/2 -translate-x-1/2 top-full w-0 h-0 border-4 border-transparent border-t-border" }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("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__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("w-full space-y-2", containerClassName), children: [
       (label || showValue) && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center justify-between", children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("label", { className: cn("text-sm font-medium text-foreground", labelClassName), children: label }),
         showValue && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("text-xs font-mono text-muted-foreground min-w-8 text-right", valueClassName), children: displayValue })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref: trackRef, className: cn("relative flex items-center", sizeStyles8.container), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden", sizeStyles8.track, trackClassName), children: isRange ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-          "div",
-          {
-            className: "absolute top-0 h-full bg-primary rounded-full",
-            style: { left: `${rangeStartPct}%`, width: `${Math.max(0, rangeEndPct - rangeStartPct)}%` }
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("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__ */ (0, import_jsx_runtime41.jsx)(
-              "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__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        "div",
+        {
+          ref: trackRef,
+          className: cn("relative flex items-center", sizeStyles8.container),
+          onMouseEnter: () => setIsHovering(true),
+          onMouseLeave: () => setIsHovering(false),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("w-full rounded-full bg-secondary relative overflow-hidden shadow-inner", sizeStyles8.track, trackClassName), children: isRange ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
               "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__ */ (0, import_jsx_runtime41.jsx)(
-              "input",
+            ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "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__ */ (0, import_jsx_runtime41.jsx)(
-              "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__ */ (0, import_jsx_runtime41.jsx)(Tooltip2, { value: currentValue, position: percentage }),
+            isRange && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Tooltip2, { value: normalizedRange[0], position: rangeStartPct }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(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__ */ (0, import_jsx_runtime41.jsx)(
+                  "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__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  "div",
+                  {
+                    className: cn("absolute inset-0 z-30", disabled ? "cursor-not-allowed" : "cursor-pointer"),
+                    onPointerDown: startRangeDrag,
+                    onPointerMove: moveRangeDrag,
+                    onPointerUp: endRangeDrag,
+                    onPointerCancel: endRangeDrag
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                  "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__ */ (0, import_jsx_runtime41.jsx)(
+                  "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
+                  }
+                )
+              ] });
+            })()
+          ]
+        }
+      )
     ] });
   }
 );