@bubo-squared/ui-framework 0.1.97 → 0.1.99

package/dist/index.cjs

@@ -2349,10 +2349,16 @@ SearchInput.displayName = "SearchInput";
 var React29 = __toESM(require("react"), 1);
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var wrapperBase2 = "flex flex-col gap-2 items-start";
+var isRangeProps = (props) => {
+  return Array.isArray(props.value) || Array.isArray(props.defaultValue);
+};
+var toArray = (value) => {
+  if (value === void 0) return void 0;
+  return Array.isArray(value) ? value : [value];
+};
 var Slider = (props) => {
   const {
     display = "flat",
-    type = "single",
     tooltipPlacement = "top",
     tooltipFormatter,
     showPercentage = true,
@@ -2362,11 +2368,11 @@ var Slider = (props) => {
     disabled = false,
     value,
     defaultValue,
-    onValueChange,
     className
   } = props;
+  const isRange = isRangeProps(props);
   const isControlled = value !== void 0;
-  const expectedLength = type === "multi" ? 2 : 1;
+  const expectedLength = isRange ? 2 : 1;
   const normalizeArray = React29.useCallback(
     (arr, fallback) => {
       if (!arr || arr.length === 0) return fallback;
@@ -2380,22 +2386,25 @@ var Slider = (props) => {
     [expectedLength, max]
   );
   const defaultInternal = React29.useMemo(() => {
-    if (defaultValue) return normalizeArray(defaultValue, []);
-    if (type === "multi") return [min, Math.min(min + (max - min) / 4, max)];
+    const defaultValueArray = toArray(defaultValue);
+    if (defaultValueArray) return normalizeArray(defaultValueArray, []);
+    if (isRange) return [min, Math.min(min + (max - min) / 4, max)];
     return [min + (max - min) / 3];
-  }, [defaultValue, min, max, type, normalizeArray]);
+  }, [defaultValue, min, max, isRange, normalizeArray]);
   const [internalValue, setInternalValue] = React29.useState(
-    () => normalizeArray(isControlled ? value : defaultInternal, defaultInternal)
+    () => normalizeArray(isControlled ? toArray(value) : defaultInternal, defaultInternal)
   );
   React29.useEffect(() => {
     if (isControlled) {
       setInternalValue(
-        (current2) => normalizeArray(value, current2.length ? current2 : defaultInternal)
+        (current2) => normalizeArray(toArray(value), current2.length ? current2 : defaultInternal)
       );
     }
   }, [isControlled, value, normalizeArray, defaultInternal]);
   const current = internalValue;
   const trackRef = React29.useRef(null);
+  const [draggingThumbIndex, setDraggingThumbIndex] = React29.useState(null);
+  const [hoveredThumbIndex, setHoveredThumbIndex] = React29.useState(null);
   const clamp = (val) => {
     if (val < min) return min;
     if (val > max) return max;
@@ -2405,13 +2414,13 @@ var Slider = (props) => {
     if (!isControlled) {
       setInternalValue((prev) => {
         const clamped = prev.map((v) => clamp(v));
-        if (type === "multi" && clamped.length === 2 && step > 0) {
+        if (isRange && clamped.length === 2 && step > 0) {
           return enforceMinGap(clamped, prev);
         }
         return clamped;
       });
     }
-  }, [isControlled, min, max]);
+  }, [isControlled, min, max, isRange]);
   const snap = (val) => {
     const range = max - min;
     if (range <= 0 || step <= 0) return clamp(val);
@@ -2419,7 +2428,7 @@ var Slider = (props) => {
     return clamp(min + stepsFromMin * step);
   };
   const enforceMinGap = (next, prev) => {
-    if (type !== "multi" || next.length !== 2 || step <= 0) return next;
+    if (!isRange || next.length !== 2 || step <= 0) return next;
     let [low, high] = next;
     const [prevLow, prevHigh] = prev.length === 2 ? prev : next;
     if (low > high) {
@@ -2444,13 +2453,17 @@ var Slider = (props) => {
   };
   const updateValue = (next) => {
     let normalized = normalizeArray(next, current);
-    if (type === "multi" && normalized.length === 2) {
+    if (isRange && normalized.length === 2) {
       normalized = enforceMinGap(normalized, current);
     }
     if (!isControlled) {
       setInternalValue(normalized);
     }
-    onValueChange?.(normalized);
+    if (isRangeProps(props)) {
+      props.onValueChange?.([normalized[0] ?? min, normalized[1] ?? max]);
+    } else {
+      props.onValueChange?.(normalized[0] ?? min);
+    }
   };
   const getSnappedValueFromClientX = (clientX, track) => {
     const rect = track.getBoundingClientRect();
@@ -2463,10 +2476,11 @@ var Slider = (props) => {
     if (disabled) return;
     const track = trackRef.current;
     if (!track) return;
+    setDraggingThumbIndex(thumbIndex);
     const handlePointerMove = (event) => {
       if (disabled) return;
       const snapped = getSnappedValueFromClientX(event.clientX, track);
-      if (type === "multi" && current.length === 2) {
+      if (isRange && current.length === 2) {
         const [a, b] = current;
         if (thumbIndex === 0) {
           updateValue([snapped, b]);
@@ -2480,9 +2494,11 @@ var Slider = (props) => {
     const handlePointerUp = () => {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
+      window.removeEventListener("pointercancel", handlePointerUp);
+      setDraggingThumbIndex(null);
     };
     const initialSnapped = getSnappedValueFromClientX(clientX, track);
-    if (type === "multi" && current.length === 2) {
+    if (isRange && current.length === 2) {
       const [a, b] = current;
       if (thumbIndex === 0) {
         updateValue([initialSnapped, b]);
@@ -2494,6 +2510,7 @@ var Slider = (props) => {
     }
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
   };
   const handleTrackPointerDown = (event) => {
     if (disabled) return;
@@ -2502,7 +2519,7 @@ var Slider = (props) => {
     if (!track) return;
     const snapped = getSnappedValueFromClientX(event.clientX, track);
     let thumbIndex = 0;
-    if (type === "multi" && current.length === 2) {
+    if (isRange && current.length === 2) {
       const [a, b] = current;
       const distToA = Math.abs(snapped - a);
       const distToB = Math.abs(snapped - b);
@@ -2540,7 +2557,7 @@ var Slider = (props) => {
       event.preventDefault();
     }
   };
-  const [primary, secondary] = type === "multi" && current.length === 2 ? [current[0], current[1]] : [current[0], void 0];
+  const [primary, secondary] = isRange && current.length === 2 ? [current[0], current[1]] : [current[0], void 0];
   const valueToPercent = (val) => {
     if (val === void 0) return 0;
     if (max === min) return 0;
@@ -2573,7 +2590,7 @@ var Slider = (props) => {
     return formatNumber(value2);
   };
   const formatNumericLabel = () => {
-    if (type === "multi" && secondary !== void 0) {
+    if (isRange && secondary !== void 0) {
       if (!tooltipFormatter && showPercentage && display === "numeric") {
         const first = formatNumber(valueToPercent(primary));
         const second = formatNumber(valueToPercent(secondary));
@@ -2586,10 +2603,14 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const renderTooltipBubble = (key, percent, labelText, isVisible) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
-      className: "absolute -translate-x-1/2 flex flex-col items-center",
+      className: cn(
+        "absolute -translate-x-1/2 flex flex-col items-center",
+        "transition-[opacity,transform] duration-150",
+        isVisible ? "opacity-100 scale-100 pointer-events-auto" : "opacity-0 scale-95 pointer-events-none"
+      ),
       style: {
         left: `${percent}%`,
         bottom: isTooltipAbove ? "100%" : void 0,
@@ -2600,17 +2621,14 @@ var Slider = (props) => {
       children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
         "div",
         {
-          className: cn(
-            "relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4)",
-            disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)"
-          ),
+          className: cn("relative rounded-4 shadow-card-md px-(--space-8) py-(--space-4) bg-(--background-tooltip)"),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "p",
               {
                 className: cn(
                   "paragraph-s",
-                  disabled ? "text-primary-disabled" : "text-primary"
+                  disabled ? "text-secondary" : "text-primary"
                 ),
                 children: labelText
               }
@@ -2619,8 +2637,7 @@ var Slider = (props) => {
               "div",
               {
                 className: cn(
-                  "absolute left-1/2 -translate-x-1/2 w-2 h-2 rotate-45",
-                  disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-neutral)",
+                  "absolute left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 bg-(--background-tooltip)",
                   isTooltipAbove ? "-bottom-1" : "-top-1"
                 )
               }
@@ -2633,6 +2650,7 @@ var Slider = (props) => {
   );
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
+    const isDragging = draggingThumbIndex === index;
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "button",
       {
@@ -2646,12 +2664,21 @@ var Slider = (props) => {
         tabIndex: disabled ? -1 : 0,
         className: cn(
           "absolute -translate-x-1/2 flex items-center justify-center",
-          "h-8 w-[18px] rounded-4",
+          "h-8 w-4.5 rounded-4",
+          "transition-shadow duration-150",
+          !disabled && (isDragging ? "shadow-[0_0_0_12px_var(--slider-halo-color)]" : "hover:shadow-[0_0_0_8px_var(--slider-halo-color)]"),
           disabled ? "bg-(--icon-primary-disabled) cursor-default" : "bg-(--icon-primary-hover) outline-none focus-visible:shadow-[0_0_0_var(--focus-ring-spread)_var(--focus-primary)] cursor-pointer"
         ),
         style: {
           left: `${percent}%`,
-          top: `calc(50% - ${trackHeight / 2}px)`
+          top: `calc(50% - ${trackHeight / 2}px)`,
+          ["--slider-halo-color"]: "color-mix(in srgb, var(--color-brand) 10%, transparent)"
+        },
+        onPointerEnter: () => {
+          setHoveredThumbIndex(index);
+        },
+        onPointerLeave: () => {
+          setHoveredThumbIndex((prev) => prev === index ? null : prev);
         },
         onPointerDown: (event) => {
           if (disabled) return;
@@ -2664,51 +2691,68 @@ var Slider = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: wrapperBase2, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative w-full", children: [
-      showTooltip && primary !== void 0 && renderTooltipBubble("primary", primaryPercent, formatDisplayValue(primary)),
-      showTooltip && type === "multi" && secondary !== void 0 && renderTooltipBubble("secondary", secondaryPercent, formatDisplayValue(secondary)),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-        "div",
-        {
-          className: cn(
-            "relative w-full flex items-center rounded-4",
-            disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      className: wrapperBase2,
+      style: { marginInline: `${thumbRadius}px` },
+      children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("w-full flex flex-col gap-1", className), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative w-full", children: [
+          showTooltip && primary !== void 0 && renderTooltipBubble(
+            "primary",
+            primaryPercent,
+            formatDisplayValue(primary),
+            hoveredThumbIndex === 0 || draggingThumbIndex === 0
           ),
-          style: { height: `${trackHeight}px` },
-          ref: trackRef,
-          onPointerDown: handleTrackPointerDown,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              "div",
-              {
-                className: cn(
-                  "absolute h-full rounded-4",
-                  disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
+          showTooltip && isRange && secondary !== void 0 && renderTooltipBubble(
+            "secondary",
+            secondaryPercent,
+            formatDisplayValue(secondary),
+            hoveredThumbIndex === 1 || draggingThumbIndex === 1
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+            "div",
+            {
+              className: cn(
+                "relative w-full flex items-center rounded-4",
+                disabled ? "bg-(--background-primary-disabled) cursor-default" : "bg-(--background-secondary) cursor-pointer"
+              ),
+              style: { height: `${trackHeight}px` },
+              ref: trackRef,
+              onPointerDown: handleTrackPointerDown,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "absolute h-full rounded-4",
+                      disabled ? "bg-(--background-primary-disabled)" : "bg-(--background-secondary)"
+                    ),
+                    style: {
+                      width: `calc(100% + ${thumbWidth}px)`,
+                      left: `-${thumbRadius}px`
+                    }
+                  }
                 ),
-                style: {
-                  width: `calc(100% + ${thumbWidth}px)`,
-                  left: `-${thumbRadius}px`
-                }
-              }
+                renderHandle(0, primaryPercent, formatDisplayValue(primary)),
+                isRange && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
+              ]
+            }
+          )
+        ] }),
+        showNumeric && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          "p",
+          {
+            className: cn(
+              "paragraph-s text-primary",
+              disabled && "text-primary-disabled"
             ),
-            renderHandle(0, primaryPercent, formatDisplayValue(primary)),
-            type === "multi" && secondary !== void 0 && renderHandle(1, secondaryPercent, formatDisplayValue(secondary))
-          ]
-        }
-      )
-    ] }),
-    showNumeric && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      "p",
-      {
-        className: cn(
-          "paragraph-s text-primary",
-          disabled && "text-primary-disabled"
-        ),
-        children: formatNumericLabel()
-      }
-    )
-  ] }) });
+            children: formatNumericLabel()
+          }
+        )
+      ] })
+    }
+  );
 };
 Slider.displayName = "Slider";