@bubo-squared/ui-framework 0.1.97 → 0.1.99

package/dist/index.d.cts

@@ -382,11 +382,9 @@ interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
 declare const SearchInput: React$1.FC<SearchInputProps>;
 
 type SliderDisplay = "flat" | "numeric" | "tooltip";
-type SliderType = "single" | "multi";
 type SliderTooltipPlacement = "top" | "bottom";
-interface SliderProps {
+type SliderBaseProps = {
     display?: SliderDisplay;
-    type?: SliderType;
     tooltipPlacement?: SliderTooltipPlacement;
     /**
      * Custom formatter for tooltip / numeric / accessibility text.
@@ -404,18 +402,19 @@ interface SliderProps {
     max?: number;
     step?: number;
     disabled?: boolean;
-    /**
-     * Current value(s). For `type="single"`, use a single-element array, e.g. `[30]`.
-     * For `type="multi"`, use two values, e.g. `[0, 25]`.
-     */
-    value?: number[];
-    /**
-     * Initial value(s) for uncontrolled usage.
-     */
-    defaultValue?: number[];
-    onValueChange?: (value: number[]) => void;
     className?: string;
-}
+};
+type SliderSingleProps = SliderBaseProps & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+};
+type SliderRangeProps = SliderBaseProps & {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+};
+type SliderProps = SliderSingleProps | SliderRangeProps;
 declare const Slider: React$1.FC<SliderProps>;
 
 type TextAreaType = "responsive" | "character-limit" | "plain";

package/dist/index.d.ts

@@ -382,11 +382,9 @@ interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
 declare const SearchInput: React$1.FC<SearchInputProps>;
 
 type SliderDisplay = "flat" | "numeric" | "tooltip";
-type SliderType = "single" | "multi";
 type SliderTooltipPlacement = "top" | "bottom";
-interface SliderProps {
+type SliderBaseProps = {
     display?: SliderDisplay;
-    type?: SliderType;
     tooltipPlacement?: SliderTooltipPlacement;
     /**
      * Custom formatter for tooltip / numeric / accessibility text.
@@ -404,18 +402,19 @@ interface SliderProps {
     max?: number;
     step?: number;
     disabled?: boolean;
-    /**
-     * Current value(s). For `type="single"`, use a single-element array, e.g. `[30]`.
-     * For `type="multi"`, use two values, e.g. `[0, 25]`.
-     */
-    value?: number[];
-    /**
-     * Initial value(s) for uncontrolled usage.
-     */
-    defaultValue?: number[];
-    onValueChange?: (value: number[]) => void;
     className?: string;
-}
+};
+type SliderSingleProps = SliderBaseProps & {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+};
+type SliderRangeProps = SliderBaseProps & {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    onValueChange?: (value: [number, number]) => void;
+};
+type SliderProps = SliderSingleProps | SliderRangeProps;
 declare const Slider: React$1.FC<SliderProps>;
 
 type TextAreaType = "responsive" | "character-limit" | "plain";

package/dist/index.js

@@ -2288,10 +2288,16 @@ SearchInput.displayName = "SearchInput";
 import * as React29 from "react";
 import { jsx as jsx31, jsxs as jsxs21 } from "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,
@@ -2301,11 +2307,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;
@@ -2319,22 +2325,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;
@@ -2344,13 +2353,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);
@@ -2358,7 +2367,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) {
@@ -2383,13 +2392,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();
@@ -2402,10 +2415,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]);
@@ -2419,9 +2433,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]);
@@ -2433,6 +2449,7 @@ var Slider = (props) => {
     }
     window.addEventListener("pointermove", handlePointerMove);
     window.addEventListener("pointerup", handlePointerUp);
+    window.addEventListener("pointercancel", handlePointerUp);
   };
   const handleTrackPointerDown = (event) => {
     if (disabled) return;
@@ -2441,7 +2458,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);
@@ -2479,7 +2496,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;
@@ -2512,7 +2529,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));
@@ -2525,10 +2542,14 @@ var Slider = (props) => {
   const trackHeight = 32;
   const thumbWidth = 18;
   const thumbRadius = thumbWidth / 2;
-  const renderTooltipBubble = (key, percent, labelText) => /* @__PURE__ */ jsx31(
+  const renderTooltipBubble = (key, percent, labelText, isVisible) => /* @__PURE__ */ jsx31(
     "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,
@@ -2539,17 +2560,14 @@ var Slider = (props) => {
       children: /* @__PURE__ */ jsxs21(
         "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__ */ jsx31(
               "p",
               {
                 className: cn(
                   "paragraph-s",
-                  disabled ? "text-primary-disabled" : "text-primary"
+                  disabled ? "text-secondary" : "text-primary"
                 ),
                 children: labelText
               }
@@ -2558,8 +2576,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"
                 )
               }
@@ -2572,6 +2589,7 @@ var Slider = (props) => {
   );
   const renderHandle = (index, percent, ariaValueText) => {
     const val = index === 0 ? primary : secondary;
+    const isDragging = draggingThumbIndex === index;
     return /* @__PURE__ */ jsx31(
       "button",
       {
@@ -2585,12 +2603,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;
@@ -2603,51 +2630,68 @@ var Slider = (props) => {
       index
     );
   };
-  return /* @__PURE__ */ jsx31("div", { className: wrapperBase2, children: /* @__PURE__ */ jsxs21("div", { className: cn("w-full flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ jsxs21("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__ */ jsxs21(
-        "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__ */ jsx31(
+    "div",
+    {
+      className: wrapperBase2,
+      style: { marginInline: `${thumbRadius}px` },
+      children: /* @__PURE__ */ jsxs21("div", { className: cn("w-full flex flex-col gap-1", className), children: [
+        /* @__PURE__ */ jsxs21("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__ */ jsx31(
-              "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__ */ jsxs21(
+            "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__ */ jsx31(
+                  "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__ */ jsx31(
+          "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__ */ jsx31(
-      "p",
-      {
-        className: cn(
-          "paragraph-s text-primary",
-          disabled && "text-primary-disabled"
-        ),
-        children: formatNumericLabel()
-      }
-    )
-  ] }) });
+            children: formatNumericLabel()
+          }
+        )
+      ] })
+    }
+  );
 };
 Slider.displayName = "Slider";