@choice-ui/react 1.8.6 → 1.8.8

package/dist/components/range/src/range-tuple.js

@@ -1,8 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { clamp } from "es-toolkit";
-import { forwardRef, useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { forwardRef, useMemo, Children, isValidElement, useState, useCallback, useRef, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
+import { RangeTupleConnects, RangeTupleContainer } from "./components/connects.js";
+import { RangeTupleDot } from "./components/dot.js";
+import { RangeTupleThumb } from "./components/thumb.js";
 import { rangeTv } from "./tv.js";
+import { RangeTupleContext } from "./context/range-tuple-context.js";
 import { useIsomorphicLayoutEffect } from "../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcx } from "../../../shared/utils/tcx/tcx.js";
 import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
@@ -16,281 +20,174 @@ function normalizeTuple(value, min, max) {
   }
   return [clamp(value, min, max), max];
 }
-const RangeTuple = forwardRef(
-  function RangeTuple2(props, ref) {
-    const {
-      defaultValue,
-      value,
-      onChange,
-      onChangeStart,
-      onChangeEnd,
-      min = 0,
-      max = 100,
-      step = 1,
-      disabled = false,
-      readOnly = false,
-      className,
-      connectsClassName = {
-        positive: "bg-accent-background",
-        negative: "bg-accent-background"
-      },
-      trackSize = {
-        width: 256,
-        height: 16
-      },
-      thumbSize = 14
-    } = props;
-    const [actualTrackWidth, setActualTrackWidth] = useState();
-    const valueToPosition = useCallback((val) => (val - min) / (max - min), [min, max]);
-    const positionToValue = useCallback(
-      (position) => min + position * (max - min),
-      [min, max]
-    );
-    const normalizedDefaultValue = useMemo(
-      () => defaultValue ? normalizeTuple(defaultValue, min, max) : void 0,
-      [defaultValue, min, max]
-    );
-    const defaultStepValue = useMemo(() => {
-      if (!normalizedDefaultValue) return null;
-      if (step > 1) {
-        return normalizedDefaultValue.map((v) => Math.round((v - min) / step) * step + min);
-      }
-      return normalizedDefaultValue;
-    }, [normalizedDefaultValue, step, min]);
-    const sliderRef = useRef(null);
-    const thumb0Ref = useRef(null);
-    const thumb1Ref = useRef(null);
-    const input0Ref = useRef(null);
-    const input1Ref = useRef(null);
-    const isDragging = useRef(null);
-    const [internalValue, setInternalValue] = useState(
-      normalizeTuple(value, min, max)
-    );
-    const currentValue = useMemo(
-      () => value ? normalizeTuple(value, min, max) : internalValue,
-      [value, min, max, internalValue]
-    );
-    const currentStepValue = useMemo(() => {
-      if (step > 1) {
-        return currentValue.map((v) => Math.round(v / step) * step);
-      }
-      return currentValue;
-    }, [currentValue, step]);
-    const [transforms, setTransforms] = useState({
-      minTransform: 1,
-      maxTransform: 0,
-      transformX0: 0,
-      transformX1: 0
-    });
-    const trackWidth = useMemo(() => {
-      if ((trackSize == null ? void 0 : trackSize.width) === "auto") {
-        return actualTrackWidth;
-      }
-      return trackSize == null ? void 0 : trackSize.width;
-    }, [trackSize == null ? void 0 : trackSize.width, actualTrackWidth]);
-    useIsomorphicLayoutEffect(() => {
-      if ((trackSize == null ? void 0 : trackSize.width) === "auto" && sliderRef.current) {
-        const updateWidth = () => {
-          if (sliderRef.current) {
-            const width = sliderRef.current.getBoundingClientRect().width;
-            if (width > 0) {
-              setActualTrackWidth(width);
-            }
+const RangeTupleRoot = forwardRef(function RangeTuple2(props, ref) {
+  const {
+    children,
+    defaultValue,
+    value,
+    onChange,
+    onChangeStart,
+    onChangeEnd,
+    min = 0,
+    max = 100,
+    step = 1,
+    disabled = false,
+    readOnly = false,
+    className,
+    width: propsWidth = 256,
+    thumbSize: propsThumbSize = 14
+  } = props;
+  const {
+    hasCustomChildren,
+    hasCustomDot,
+    hasCustomConnects,
+    extractedThumbSize,
+    extractedTrackHeight
+  } = useMemo(() => {
+    const childArray = Children.toArray(children);
+    let hasCustom = false;
+    let hasDot = false;
+    let hasConnects = false;
+    let thumbSizeFromChild;
+    let trackHeightFromChild;
+    for (const child of childArray) {
+      if (isValidElement(child)) {
+        const type = child.type;
+        if (child.type === RangeTupleThumb || (type == null ? void 0 : type.displayName) === "RangeTupleThumb") {
+          hasCustom = true;
+          const childProps = child.props;
+          if (childProps.size !== void 0) {
+            thumbSizeFromChild = childProps.size;
           }
-        };
-        updateWidth();
-        const resizeObserver = new ResizeObserver(() => {
-          updateWidth();
-        });
-        resizeObserver.observe(sliderRef.current);
-        return () => {
-          resizeObserver.disconnect();
-        };
-      }
-    }, [trackSize == null ? void 0 : trackSize.width]);
-    useEffect(() => {
-      const position0 = valueToPosition(currentValue[0]);
-      const position1 = valueToPosition(currentValue[1]);
-      const minTransform = 1;
-      const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
-      const transformX0 = minTransform + position0 * (maxTransform - minTransform);
-      const transformX1 = minTransform + position1 * (maxTransform - minTransform);
-      setTransforms({
-        minTransform,
-        maxTransform,
-        transformX0,
-        transformX1
-      });
-    }, [currentValue, trackWidth, thumbSize, valueToPosition]);
-    const dotsData = useMemo(() => {
-      if (!step || step <= 1) return null;
-      return Array.from({ length: Math.ceil((max - min) / step) + 1 }, (_, i) => {
-        const dotValue = min + i * step;
-        const dotPosition = valueToPosition(dotValue);
-        return {
-          value: dotValue,
-          position: dotPosition
-        };
-      });
-    }, [step, min, max, valueToPosition]);
-    const defaultDotPositions = useMemo(() => {
-      if (!normalizedDefaultValue || step > 1) return null;
-      return normalizedDefaultValue.map((v) => valueToPosition(v));
-    }, [normalizedDefaultValue, step, valueToPosition]);
-    const updatePosition = useEventCallback(
-      (clientX, thumbIndex, isEnd) => {
-        var _a;
-        if (readOnly) return;
-        const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
-        if (!rect) return;
-        const newPosition = clamp((clientX - rect.left) / rect.width, 0, 1);
-        const newValue = Math.round(positionToValue(newPosition) / step) * step;
-        let clampedValue = clamp(newValue, min, max);
-        if (normalizedDefaultValue && step === 1) {
-          const snapThreshold = (max - min) * 0.05;
-          for (const defVal of normalizedDefaultValue) {
-            const distanceToDefault = Math.abs(clampedValue - defVal);
-            if (distanceToDefault <= snapThreshold) {
-              clampedValue = defVal;
-              break;
-            }
-          }
-        }
-        const newTuple = [...currentValue];
-        newTuple[thumbIndex] = clampedValue;
-        if (newTuple[0] > newTuple[1]) {
-          if (thumbIndex === 0) {
-            newTuple[0] = newTuple[1];
-          } else {
-            newTuple[1] = newTuple[0];
+        } else if (child.type === RangeTupleContainer || (type == null ? void 0 : type.displayName) === "RangeTupleContainer") {
+          hasCustom = true;
+          const childProps = child.props;
+          if (childProps.height !== void 0) {
+            trackHeightFromChild = childProps.height;
           }
+        } else if (child.type === RangeTupleConnects || (type == null ? void 0 : type.displayName) === "RangeTupleConnects") {
+          hasCustom = true;
+          hasConnects = true;
+        } else if (child.type === RangeTupleDot || (type == null ? void 0 : type.displayName) === "RangeTupleDot") {
+          hasCustom = true;
+          hasDot = true;
         }
-        if (isEnd) {
-          isDragging.current = null;
-        }
-        if (value === void 0) {
-          setInternalValue(newTuple);
-        }
-        onChange == null ? void 0 : onChange(newTuple);
-      }
-    );
-    useEffect(() => {
-      if (value !== void 0) {
-        setInternalValue(normalizeTuple(value, min, max));
       }
-    }, [value, min, max]);
-    const handlePointerDown = useCallback(
-      (e, thumbIndex) => {
-        var _a;
-        if (disabled || readOnly) return;
-        e.preventDefault();
-        e.stopPropagation();
-        const thumb = thumbIndex === 0 ? thumb0Ref.current : thumb1Ref.current;
-        const inputRef = thumbIndex === 0 ? input0Ref : input1Ref;
-        if (!thumb) return;
-        onChangeStart == null ? void 0 : onChangeStart();
-        isDragging.current = thumbIndex;
-        thumb.setPointerCapture(e.pointerId);
-        updatePosition(e.clientX, thumbIndex);
-        (_a = inputRef.current) == null ? void 0 : _a.focus();
-        const handleMove = (e2) => {
-          if (isDragging.current !== thumbIndex) return;
-          e2.preventDefault();
-          updatePosition(e2.clientX, thumbIndex);
-        };
-        const handleUp = (e2) => {
-          var _a2;
-          if (isDragging.current !== thumbIndex) return;
-          e2.preventDefault();
-          if (thumb.hasPointerCapture(e2.pointerId)) {
-            thumb.releasePointerCapture(e2.pointerId);
+    }
+    return {
+      hasCustomChildren: hasCustom,
+      hasCustomDot: hasDot,
+      hasCustomConnects: hasConnects,
+      extractedThumbSize: thumbSizeFromChild,
+      extractedTrackHeight: trackHeightFromChild
+    };
+  }, [children]);
+  const thumbSize = extractedThumbSize ?? propsThumbSize;
+  const trackHeight = extractedTrackHeight ?? 16;
+  const safeStep = step > 0 ? step : 1;
+  const range = max - min || 1;
+  const [actualTrackWidth, setActualTrackWidth] = useState();
+  const valueToPosition = useCallback((val) => (val - min) / range, [min, range]);
+  const positionToValue = useCallback((position) => min + position * range, [min, range]);
+  const normalizedDefaultValue = useMemo(
+    () => defaultValue ? normalizeTuple(defaultValue, min, max) : void 0,
+    [defaultValue, min, max]
+  );
+  const defaultStepValue = useMemo(() => {
+    if (!normalizedDefaultValue) return null;
+    if (safeStep > 1) {
+      return normalizedDefaultValue.map(
+        (v) => Math.round((v - min) / safeStep) * safeStep + min
+      );
+    }
+    return normalizedDefaultValue;
+  }, [normalizedDefaultValue, safeStep, min]);
+  const sliderRef = useRef(null);
+  const thumb0Ref = useRef(null);
+  const thumb1Ref = useRef(null);
+  const input0Ref = useRef(null);
+  const input1Ref = useRef(null);
+  const isDragging = useRef(null);
+  const cleanupRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(
+    normalizeTuple(value, min, max)
+  );
+  const currentValue = useMemo(
+    () => value ? normalizeTuple(value, min, max) : internalValue,
+    [value, min, max, internalValue]
+  );
+  const currentStepValue = useMemo(() => {
+    if (safeStep > 1) {
+      return currentValue.map((v) => Math.round(v / safeStep) * safeStep);
+    }
+    return currentValue;
+  }, [currentValue, safeStep]);
+  const trackWidth = typeof propsWidth === "number" ? propsWidth : actualTrackWidth;
+  useIsomorphicLayoutEffect(() => {
+    if (typeof propsWidth !== "number" && sliderRef.current) {
+      const updateWidth = () => {
+        if (sliderRef.current) {
+          const width = sliderRef.current.getBoundingClientRect().width;
+          if (width > 0) {
+            setActualTrackWidth(width);
           }
-          updatePosition(e2.clientX, thumbIndex, true);
-          isDragging.current = null;
-          const rect = (_a2 = sliderRef.current) == null ? void 0 : _a2.getBoundingClientRect();
-          if (rect) {
-            const newPosition = clamp((e2.clientX - rect.left) / rect.width, 0, 1);
-            const newValue = Math.round(positionToValue(newPosition) / step) * step;
-            let clampedValue = clamp(newValue, min, max);
-            if (normalizedDefaultValue && step === 1) {
-              const snapThreshold = (max - min) * 0.05;
-              for (const defVal of normalizedDefaultValue) {
-                const distanceToDefault = Math.abs(clampedValue - defVal);
-                if (distanceToDefault <= snapThreshold) {
-                  clampedValue = defVal;
-                  break;
-                }
-              }
-            }
-            const finalTuple = [...currentValue];
-            finalTuple[thumbIndex] = clampedValue;
-            if (finalTuple[0] > finalTuple[1]) {
-              if (thumbIndex === 0) {
-                finalTuple[0] = finalTuple[1];
-              } else {
-                finalTuple[1] = finalTuple[0];
-              }
-            }
-            onChangeEnd == null ? void 0 : onChangeEnd(finalTuple);
+        }
+      };
+      updateWidth();
+      const resizeObserver = new ResizeObserver(() => {
+        updateWidth();
+      });
+      resizeObserver.observe(sliderRef.current);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [propsWidth]);
+  const transforms = useMemo(() => {
+    const position0 = valueToPosition(currentValue[0]);
+    const position1 = valueToPosition(currentValue[1]);
+    const minTransform = 1;
+    const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
+    const transformX0 = minTransform + position0 * (maxTransform - minTransform);
+    const transformX1 = minTransform + position1 * (maxTransform - minTransform);
+    return { minTransform, maxTransform, transformX0, transformX1 };
+  }, [currentValue, trackWidth, thumbSize, valueToPosition]);
+  const dotsData = useMemo(() => {
+    if (safeStep <= 1) return null;
+    return Array.from({ length: Math.ceil((max - min) / safeStep) + 1 }, (_, i) => {
+      const dotValue = min + i * safeStep;
+      const dotPosition = valueToPosition(dotValue);
+      return {
+        value: dotValue,
+        position: dotPosition
+      };
+    });
+  }, [safeStep, min, max, valueToPosition]);
+  const defaultDotPositions = useMemo(() => {
+    if (!normalizedDefaultValue || safeStep > 1) return null;
+    return normalizedDefaultValue.map((v) => valueToPosition(v));
+  }, [normalizedDefaultValue, safeStep, valueToPosition]);
+  const updatePosition = useEventCallback(
+    (clientX, thumbIndex, isEnd) => {
+      var _a;
+      if (readOnly) return;
+      const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const newPosition = clamp((clientX - rect.left) / rect.width, 0, 1);
+      const newValue = Math.round(positionToValue(newPosition) / safeStep) * safeStep;
+      let clampedValue = clamp(newValue, min, max);
+      if (normalizedDefaultValue && safeStep <= 1) {
+        const snapThreshold = (max - min) * 0.05;
+        for (const defVal of normalizedDefaultValue) {
+          const distanceToDefault = Math.abs(clampedValue - defVal);
+          if (distanceToDefault <= snapThreshold) {
+            clampedValue = defVal;
+            break;
           }
-          window.removeEventListener("pointermove", handleMove);
-          window.removeEventListener("pointerup", handleUp);
-          window.removeEventListener("pointercancel", handleUp);
-        };
-        window.addEventListener("pointermove", handleMove);
-        window.addEventListener("pointerup", handleUp);
-        window.addEventListener("pointercancel", handleUp);
-      },
-      [
-        disabled,
-        readOnly,
-        onChangeEnd,
-        onChangeStart,
-        updatePosition,
-        positionToValue,
-        step,
-        min,
-        max,
-        normalizedDefaultValue,
-        currentValue
-      ]
-    );
-    const handleSliderPointerDown = useCallback(
-      (e) => {
-        var _a;
-        if (disabled || readOnly) return;
-        if (e.target === thumb0Ref.current || e.target === thumb1Ref.current) return;
-        const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
-        if (!rect) return;
-        const clickPosition = (e.clientX - rect.left) / rect.width;
-        const clickValue = positionToValue(clickPosition);
-        const dist0 = Math.abs(clickValue - currentValue[0]);
-        const dist1 = Math.abs(clickValue - currentValue[1]);
-        const thumbIndex = dist0 <= dist1 ? 0 : 1;
-        handlePointerDown(e, thumbIndex);
-      },
-      [disabled, readOnly, handlePointerDown, currentValue, positionToValue]
-    );
-    const handleKeyDown = useEventCallback((e, thumbIndex) => {
-      if (disabled || readOnly) return;
-      const stepValue = e.shiftKey ? step * 10 : step;
-      let newValue = currentValue[thumbIndex];
-      switch (e.key) {
-        case "ArrowLeft":
-        case "ArrowDown":
-          e.preventDefault();
-          newValue = clamp(newValue - stepValue, min, max);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          e.preventDefault();
-          newValue = clamp(newValue + stepValue, min, max);
-          break;
-        default:
-          return;
+        }
       }
       const newTuple = [...currentValue];
-      newTuple[thumbIndex] = newValue;
+      newTuple[thumbIndex] = clampedValue;
       if (newTuple[0] > newTuple[1]) {
         if (thumbIndex === 0) {
           newTuple[0] = newTuple[1];
@@ -298,184 +195,221 @@ const RangeTuple = forwardRef(
           newTuple[1] = newTuple[0];
         }
       }
-      onChange == null ? void 0 : onChange(newTuple);
-    });
-    useEffect(() => {
-      var _a, _b;
-      if (disabled) {
-        if (document.activeElement === input0Ref.current) {
-          (_a = input0Ref.current) == null ? void 0 : _a.blur();
-        }
-        if (document.activeElement === input1Ref.current) {
-          (_b = input1Ref.current) == null ? void 0 : _b.blur();
-        }
-      }
-    }, [disabled]);
-    const tv = useMemo(
-      () => rangeTv({
-        hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
-        disabled
-      }),
-      [step, normalizedDefaultValue, disabled]
-    );
-    const connectsClass = useMemo(() => {
-      if (disabled) return "bg-disabled-background";
-      return connectsClassName.positive;
-    }, [disabled, connectsClassName]);
-    const connectStyle = useMemo(() => {
-      return {
-        left: `${transforms.transformX0 + thumbSize / 2}px`,
-        right: `calc(100% - ${transforms.transformX1 + thumbSize / 2}px)`,
-        height: trackSize == null ? void 0 : trackSize.height
-      };
-    }, [transforms.transformX0, transforms.transformX1, thumbSize, trackSize == null ? void 0 : trackSize.height]);
-    const renderDots = useCallback(() => {
-      if (dotsData) {
-        return dotsData.map(({ value: dotValue, position: dotPosition }) => {
-          const { minTransform, maxTransform } = transforms;
-          const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
-          const isWithinRange = dotValue >= currentValue[0] && dotValue <= currentValue[1];
-          const isDefaultValue = defaultStepValue == null ? void 0 : defaultStepValue.includes(dotValue);
-          const { dot } = rangeTv({
-            defaultStepValue: isDefaultValue,
-            overStepValue: isWithinRange
-          });
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: dot(),
-              style: {
-                left: dotTransform + thumbSize / 2
-              }
-            },
-            dotValue
-          );
-        });
+      if (isEnd) {
+        isDragging.current = null;
       }
-      if (defaultDotPositions) {
-        return defaultDotPositions.map((position, idx) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: rangeTv({ defaultStepValue: true }).dot(),
-            style: {
-              left: transforms.minTransform + position * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
-            }
-          },
-          `default-${idx}`
-        ));
+      if (value === void 0) {
+        setInternalValue(newTuple);
       }
-      return null;
-    }, [dotsData, defaultDotPositions, defaultStepValue, transforms, thumbSize, currentValue]);
-    useEffect(() => {
-      const noop = () => {
+      onChange == null ? void 0 : onChange(newTuple);
+    }
+  );
+  useEffect(() => {
+    if (value !== void 0) {
+      setInternalValue(normalizeTuple(value, min, max));
+    }
+  }, [value, min, max]);
+  const latestValueRef = useRef(currentValue);
+  latestValueRef.current = currentValue;
+  const handlePointerDown = useCallback(
+    (e, thumbIndex) => {
+      var _a;
+      if (disabled || readOnly) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const thumb = thumbIndex === 0 ? thumb0Ref.current : thumb1Ref.current;
+      const inputRef = thumbIndex === 0 ? input0Ref : input1Ref;
+      if (!thumb) return;
+      onChangeStart == null ? void 0 : onChangeStart();
+      isDragging.current = thumbIndex;
+      thumb.setPointerCapture(e.pointerId);
+      updatePosition(e.clientX, thumbIndex);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      const handleMove = (e2) => {
+        if (isDragging.current !== thumbIndex) return;
+        e2.preventDefault();
+        updatePosition(e2.clientX, thumbIndex);
       };
-      return () => {
-        if (typeof window !== "undefined") {
-          window.removeEventListener("pointermove", noop);
-          window.removeEventListener("pointerup", noop);
-          window.removeEventListener("pointercancel", noop);
+      const cleanup = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+        cleanupRef.current = null;
+      };
+      const handleUp = (e2) => {
+        if (isDragging.current !== thumbIndex) return;
+        e2.preventDefault();
+        if (thumb.hasPointerCapture(e2.pointerId)) {
+          thumb.releasePointerCapture(e2.pointerId);
         }
+        updatePosition(e2.clientX, thumbIndex, true);
+        isDragging.current = null;
+        onChangeEnd == null ? void 0 : onChangeEnd(latestValueRef.current);
+        cleanup();
       };
-    }, []);
-    const thumb0IsDefault = useMemo(() => {
-      if (!defaultStepValue) return false;
-      return currentStepValue[0] === defaultStepValue[0];
-    }, [currentStepValue, defaultStepValue]);
-    const thumb1IsDefault = useMemo(() => {
-      if (!defaultStepValue) return false;
-      return currentStepValue[1] === defaultStepValue[1];
-    }, [currentStepValue, defaultStepValue]);
-    const thumbTv0 = useMemo(
-      () => rangeTv({
-        currentDefaultValue: thumb0IsDefault,
-        hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
-        disabled
-      }),
-      [thumb0IsDefault, step, normalizedDefaultValue, disabled]
-    );
-    const thumbTv1 = useMemo(
-      () => rangeTv({
-        currentDefaultValue: thumb1IsDefault,
-        hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
-        disabled
-      }),
-      [thumb1IsDefault, step, normalizedDefaultValue, disabled]
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: mergeRefs(sliderRef, ref),
-        onPointerDown: handleSliderPointerDown,
-        className: tcx(tv.container(), className),
-        style: {
-          "--width": `${trackWidth}px`,
-          "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: tcx(tv.connect(), connectsClass),
-              style: connectStyle
-            }
-          ),
-          (step > 1 || normalizedDefaultValue !== void 0) && /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: thumb0Ref,
-              onPointerDown: (e) => handlePointerDown(e, 0),
-              className: thumbTv0.thumb(),
-              style: {
-                width: thumbSize,
-                height: thumbSize,
-                transform: `translate(${transforms.transformX0}px, -50%)`,
-                willChange: isDragging.current === 0 ? "transform" : "auto"
-              },
-              children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: input0Ref,
-                  type: "text",
-                  onKeyDown: (e) => handleKeyDown(e, 0),
-                  className: tv.input(),
-                  tabIndex: disabled || readOnly ? -1 : 0,
-                  readOnly: true
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: thumb1Ref,
-              onPointerDown: (e) => handlePointerDown(e, 1),
-              className: thumbTv1.thumb(),
-              style: {
-                width: thumbSize,
-                height: thumbSize,
-                transform: `translate(${transforms.transformX1}px, -50%)`,
-                willChange: isDragging.current === 1 ? "transform" : "auto"
-              },
-              children: /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ref: input1Ref,
-                  type: "text",
-                  onKeyDown: (e) => handleKeyDown(e, 1),
-                  className: tv.input(),
-                  tabIndex: disabled || readOnly ? -1 : 0,
-                  readOnly: true
-                }
-              )
-            }
-          )
-        ]
+      cleanupRef.current = cleanup;
+      window.addEventListener("pointermove", handleMove);
+      window.addEventListener("pointerup", handleUp);
+      window.addEventListener("pointercancel", handleUp);
+    },
+    [disabled, readOnly, onChangeEnd, onChangeStart, updatePosition]
+  );
+  useEffect(() => {
+    return () => {
+      var _a;
+      (_a = cleanupRef.current) == null ? void 0 : _a.call(cleanupRef);
+    };
+  }, []);
+  const handleSliderPointerDown = useCallback(
+    (e) => {
+      var _a;
+      if (disabled || readOnly) return;
+      if (e.target === thumb0Ref.current || e.target === thumb1Ref.current) return;
+      const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return;
+      const clickPosition = (e.clientX - rect.left) / rect.width;
+      const clickValue = positionToValue(clickPosition);
+      const dist0 = Math.abs(clickValue - currentValue[0]);
+      const dist1 = Math.abs(clickValue - currentValue[1]);
+      const thumbIndex = dist0 <= dist1 ? 0 : 1;
+      handlePointerDown(e, thumbIndex);
+    },
+    [disabled, readOnly, handlePointerDown, currentValue, positionToValue]
+  );
+  const handleKeyDown = useEventCallback((e, thumbIndex) => {
+    if (disabled || readOnly) return;
+    const stepValue = e.shiftKey ? safeStep * 10 : safeStep;
+    let newValue = currentValue[thumbIndex];
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowDown":
+        e.preventDefault();
+        newValue = clamp(newValue - stepValue, min, max);
+        break;
+      case "ArrowRight":
+      case "ArrowUp":
+        e.preventDefault();
+        newValue = clamp(newValue + stepValue, min, max);
+        break;
+      default:
+        return;
+    }
+    const newTuple = [...currentValue];
+    newTuple[thumbIndex] = newValue;
+    if (newTuple[0] > newTuple[1]) {
+      if (thumbIndex === 0) {
+        newTuple[0] = newTuple[1];
+      } else {
+        newTuple[1] = newTuple[0];
       }
-    );
-  }
-);
-RangeTuple.displayName = "RangeTuple";
+    }
+    onChange == null ? void 0 : onChange(newTuple);
+  });
+  useEffect(() => {
+    var _a, _b;
+    if (disabled) {
+      if (document.activeElement === input0Ref.current) {
+        (_a = input0Ref.current) == null ? void 0 : _a.blur();
+      }
+      if (document.activeElement === input1Ref.current) {
+        (_b = input1Ref.current) == null ? void 0 : _b.blur();
+      }
+    }
+  }, [disabled]);
+  const hasStepOrDefault = safeStep > 1 || normalizedDefaultValue !== void 0;
+  const tv = useMemo(() => rangeTv({ hasStepOrDefault, disabled }), [hasStepOrDefault, disabled]);
+  const thumb0IsDefault = defaultStepValue ? currentStepValue[0] === defaultStepValue[0] : false;
+  const thumb1IsDefault = defaultStepValue ? currentStepValue[1] === defaultStepValue[1] : false;
+  const thumbTv0 = useMemo(
+    () => rangeTv({ currentDefaultValue: thumb0IsDefault, hasStepOrDefault, disabled }),
+    [thumb0IsDefault, hasStepOrDefault, disabled]
+  );
+  const thumbTv1 = useMemo(
+    () => rangeTv({ currentDefaultValue: thumb1IsDefault, hasStepOrDefault, disabled }),
+    [thumb1IsDefault, hasStepOrDefault, disabled]
+  );
+  const contextValue = useMemo(
+    () => ({
+      currentValue,
+      disabled,
+      readOnly,
+      min,
+      max,
+      step: safeStep,
+      thumbSize,
+      trackHeight,
+      transforms,
+      defaultStepValue,
+      currentStepValue,
+      dotsData,
+      defaultDotPositions,
+      normalizedDefaultValue,
+      thumb0Ref,
+      thumb1Ref,
+      input0Ref,
+      input1Ref,
+      isDragging,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      thumbTv0,
+      thumbTv1,
+      hasCustomDot,
+      hasCustomConnects,
+      isDefaultValue: thumb0IsDefault && thumb1IsDefault
+    }),
+    [
+      currentValue,
+      disabled,
+      readOnly,
+      min,
+      max,
+      safeStep,
+      thumbSize,
+      trackHeight,
+      transforms,
+      defaultStepValue,
+      currentStepValue,
+      dotsData,
+      defaultDotPositions,
+      normalizedDefaultValue,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      thumbTv0,
+      thumbTv1,
+      hasCustomDot,
+      hasCustomConnects,
+      thumb0IsDefault,
+      thumb1IsDefault
+    ]
+  );
+  return /* @__PURE__ */ jsx(RangeTupleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: mergeRefs(sliderRef, ref),
+      onPointerDown: handleSliderPointerDown,
+      className: tcx(tv.container(), className),
+      style: {
+        "--width": `${trackWidth}px`,
+        "--height": `${trackHeight}px`,
+        "--thumb-size": `${thumbSize}px`
+      },
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(RangeTupleContainer, {}),
+        /* @__PURE__ */ jsx(RangeTupleThumb, { index: 0 }),
+        /* @__PURE__ */ jsx(RangeTupleThumb, { index: 1 })
+      ] })
+    }
+  ) });
+});
+RangeTupleRoot.displayName = "RangeTuple";
+const RangeTuple = Object.assign(RangeTupleRoot, {
+  Container: RangeTupleContainer,
+  Connects: RangeTupleConnects,
+  Thumb: RangeTupleThumb,
+  Dot: RangeTupleDot
+});
 export {
   RangeTuple
 };