@choice-ui/react 1.9.0 → 1.9.2

package/dist/components/range/dist/index.js

@@ -1,10 +1,28 @@
 import { clamp } from "es-toolkit";
-import { forwardRef, useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { forwardRef, useMemo, Children, isValidElement, useState, useCallback, useRef, useEffect, createContext, useContext } from "react";
 import { useEventCallback } from "usehooks-ts";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useIsomorphicLayoutEffect } from "../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.js";
 import { tcv, tcx } from "../../../shared/utils/tcx/tcx.js";
 import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
+var RangeContext = createContext(null);
+function useRangeContext() {
+  const context = useContext(RangeContext);
+  if (!context) {
+    throw new Error("Range.Connects and Range.Thumb must be used within a Range component");
+  }
+  return context;
+}
+var RangeTupleContext = createContext(null);
+function useRangeTupleContext() {
+  const context = useContext(RangeTupleContext);
+  if (!context) {
+    throw new Error(
+      "RangeTuple.Connects and RangeTuple.Thumb must be used within a RangeTuple component"
+    );
+  }
+  return context;
+}
 var rangeTv = tcv({
   slots: {
     container: [
@@ -13,19 +31,19 @@ var rangeTv = tcv({
       "bg-secondary-background shadow-inset-border rounded-full"
     ],
     connect: [
-      "pointer-events-none absolute",
+      "pointer-events-none absolute h-(--height)",
       "after:absolute",
       "after:content-['']",
       "after:rounded-full",
-      "after:bg-inherit",
-      "after:h-[var(--height)]",
+      "after:[background:inherit]",
+      "after:h-[inherit]",
       "after:left-[calc(var(--height)/-2)]",
       "after:right-[calc(var(--height)/-2)]"
     ],
+    thumbWrapper: ["absolute top-1/2 box-border origin-center z-2"],
     thumb: [
-      "absolute top-1/2 box-border origin-center rounded-full",
-      "shadow-range-thumb border-2 border-white",
-      "bg-white"
+      "shadow-range-thumb border-2 border-white rounded-full size-(--thumb-size)",
+      "bg-white absolute -translate-y-1/2 -translate-x-1/2 left-1/2 top-1/2"
     ],
     dotContainer: "pointer-events-none absolute inset-0",
     dot: ["size-1 rounded-full", "absolute top-1/2", "-translate-x-1/2 -translate-y-1/2"],
@@ -55,9 +73,12 @@ var rangeTv = tcv({
     },
     disabled: {
       true: {
+        connect: "bg-disabled-background",
         thumb: "bg-secondary-background"
       },
-      false: {}
+      false: {
+        connect: "bg-accent-background"
+      }
     }
   },
   compoundVariants: [
@@ -93,8 +114,477 @@ var rangeTv = tcv({
     disabled: false
   }
 });
-var Range = forwardRef(function Range2(props, ref) {
+var RangeConnects = forwardRef(
+  function RangeConnects2(props, ref) {
+    const { className } = props;
+    const { currentValue, disabled, min, transforms, thumbSize, trackHeight, tv } = useRangeContext();
+    const connectsStatus = useMemo(() => {
+      if (disabled) return "disabled";
+      if (currentValue < 0) return "negative";
+      return "positive";
+    }, [disabled, currentValue]);
+    const connectStyle = useMemo(() => {
+      return {
+        left: min < 0 ? currentValue < 0 ? `${transforms.transformX + thumbSize / 2}px` : "50%" : trackHeight / 2 + "px",
+        right: min < 0 ? currentValue >= 0 ? `calc(100% - ${transforms.transformX + thumbSize / 2}px)` : "50%" : `calc(100% - ${transforms.transformX + thumbSize / 2}px)`,
+        height: trackHeight
+      };
+    }, [min, currentValue, transforms.transformX, thumbSize, trackHeight]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.connect(), disabled && "bg-disabled-background", className),
+        "data-connect-status": connectsStatus,
+        style: connectStyle
+      }
+    );
+  }
+);
+RangeConnects.displayName = "RangeConnects";
+function RangeContainer(props) {
+  const { children, className, height: _height, ...rest } = props;
+  const {
+    currentValue,
+    step,
+    transforms,
+    thumbSize,
+    defaultStepValue,
+    dotsData,
+    defaultDotPosition,
+    defaultValue,
+    tv,
+    hasCustomDot,
+    hasCustomConnects
+  } = useRangeContext();
+  const hasStepOrDefault = step > 1 || defaultValue !== void 0;
+  const renderDots = () => {
+    if (dotsData) {
+      const { minTransform, maxTransform } = transforms;
+      return dotsData.map(({ value: dotValue, position: dotPosition }) => {
+        const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
+        const { dot } = rangeTv({
+          defaultStepValue: defaultStepValue === dotValue,
+          overStepValue: dotValue <= currentValue
+        });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: dot(),
+            style: {
+              left: dotTransform + thumbSize / 2
+            }
+          },
+          dotValue
+        );
+      });
+    }
+    if (defaultDotPosition !== null && defaultDotPosition !== void 0) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: rangeTv({ defaultStepValue: true }).dot(),
+          style: {
+            left: transforms.minTransform + defaultDotPosition * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
+          }
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hasCustomConnects && /* @__PURE__ */ jsx(
+      RangeConnects,
+      {
+        className: tcx(tv.connect(), className),
+        ...rest
+      }
+    ),
+    children,
+    hasStepOrDefault && !hasCustomDot && /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() })
+  ] });
+}
+RangeContainer.displayName = "RangeContainer";
+var RangeTupleConnects = forwardRef(
+  function RangeTupleConnects2(props, ref) {
+    const { className, ...rest } = props;
+    const { transforms, thumbSize, trackHeight, tv } = useRangeTupleContext();
+    const connectStyle = useMemo(() => {
+      return {
+        left: `${transforms.transformX0 + thumbSize / 2}px`,
+        right: `calc(100% - ${transforms.transformX1 + thumbSize / 2}px)`,
+        height: trackHeight
+      };
+    }, [transforms.transformX0, transforms.transformX1, thumbSize, trackHeight]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: tcx(tv.connect(), className),
+        style: connectStyle,
+        ...rest
+      }
+    );
+  }
+);
+RangeTupleConnects.displayName = "RangeTupleConnects";
+function RangeTupleContainer(props) {
+  const { children, className, height: _height, ...rest } = props;
+  const {
+    currentValue,
+    step,
+    transforms,
+    thumbSize,
+    defaultStepValue,
+    dotsData,
+    defaultDotPositions,
+    normalizedDefaultValue,
+    tv,
+    hasCustomDot,
+    hasCustomConnects
+  } = useRangeTupleContext();
+  const hasStepOrDefault = step > 1 || normalizedDefaultValue !== void 0;
+  const renderDots = () => {
+    if (dotsData) {
+      const { minTransform, maxTransform } = transforms;
+      return dotsData.map(({ value: dotValue, position: dotPosition }) => {
+        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 (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}`
+      ));
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hasCustomConnects && /* @__PURE__ */ jsx(
+      RangeTupleConnects,
+      {
+        className: tcx(tv.connect(), className),
+        ...rest
+      }
+    ),
+    children,
+    hasStepOrDefault && !hasCustomDot && /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() })
+  ] });
+}
+RangeTupleContainer.displayName = "RangeTupleContainer";
+var BaseThumb = forwardRef(function BaseThumb2(props, ref) {
+  const {
+    className,
+    thumbRef,
+    inputRef,
+    thumbSize,
+    transformX,
+    isDragging,
+    disabled,
+    readOnly,
+    tv,
+    thumbTv,
+    onPointerDown,
+    onKeyDown,
+    isDefaultValue
+  } = props;
+  const thumbStyle = useMemo(
+    () => ({
+      width: thumbSize,
+      height: thumbSize,
+      transform: `translate(${transformX}px, -50%)`,
+      willChange: isDragging ? "transform" : "auto"
+    }),
+    [thumbSize, transformX, isDragging]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: (node) => {
+        if (thumbRef && "current" in thumbRef) {
+          thumbRef.current = node;
+        }
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      onPointerDown,
+      className: tv.thumbWrapper(),
+      style: thumbStyle,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: tcx(thumbTv.thumb(), className),
+          "data-status": isDefaultValue ? "default" : void 0,
+          children: /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: (node) => {
+                if (inputRef && "current" in inputRef) {
+                  inputRef.current = node;
+                }
+              },
+              type: "text",
+              onKeyDown,
+              className: tv.input(),
+              tabIndex: disabled || readOnly ? -1 : 0,
+              readOnly: true
+            }
+          )
+        }
+      )
+    }
+  );
+});
+var RangeThumb = forwardRef(
+  function RangeThumb2(props, ref) {
+    const { className, size: _size } = props;
+    const {
+      disabled,
+      readOnly,
+      transforms,
+      thumbSize,
+      thumbRef,
+      inputRef,
+      isDragging,
+      isDefaultValue,
+      handlePointerDown,
+      handleKeyDown,
+      tv
+    } = useRangeContext();
+    return /* @__PURE__ */ jsx(
+      BaseThumb,
+      {
+        ref,
+        className,
+        thumbRef,
+        inputRef,
+        thumbSize,
+        transformX: transforms.transformX,
+        isDragging: isDragging.current,
+        disabled,
+        readOnly,
+        tv,
+        thumbTv: tv,
+        onPointerDown: handlePointerDown,
+        onKeyDown: handleKeyDown,
+        isDefaultValue
+      }
+    );
+  }
+);
+RangeThumb.displayName = "RangeThumb";
+var RangeTupleThumb = forwardRef(
+  function RangeTupleThumb2(props, ref) {
+    const { className, size: _size, index } = props;
+    const {
+      disabled,
+      readOnly,
+      transforms,
+      thumbSize,
+      thumb0Ref,
+      thumb1Ref,
+      input0Ref,
+      input1Ref,
+      isDragging,
+      isDefaultValue,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      thumbTv0,
+      thumbTv1
+    } = useRangeTupleContext();
+    const thumbRef = index === 0 ? thumb0Ref : thumb1Ref;
+    const inputRef = index === 0 ? input0Ref : input1Ref;
+    const thumbTv = index === 0 ? thumbTv0 : thumbTv1;
+    const transformX = index === 0 ? transforms.transformX0 : transforms.transformX1;
+    return /* @__PURE__ */ jsx(
+      BaseThumb,
+      {
+        ref,
+        className,
+        thumbRef,
+        inputRef,
+        thumbSize,
+        transformX,
+        isDragging: isDragging.current === index,
+        disabled,
+        readOnly,
+        tv,
+        thumbTv,
+        onPointerDown: (e) => handlePointerDown(e, index),
+        onKeyDown: (e) => handleKeyDown(e, index),
+        isDefaultValue
+      }
+    );
+  }
+);
+RangeTupleThumb.displayName = "RangeTupleThumb";
+function getDotStatus(isOver, isDefault) {
+  if (isOver && isDefault) return "default-over";
+  if (isOver) return "over";
+  if (isDefault) return "default";
+  return "under";
+}
+var RangeDot = forwardRef(function RangeDot2(props, ref) {
+  const { className, ...rest } = props;
+  const {
+    currentValue,
+    step,
+    transforms,
+    thumbSize,
+    defaultStepValue,
+    dotsData,
+    defaultDotPosition,
+    defaultValue,
+    tv
+  } = useRangeContext();
+  const hasStepOrDefault = step > 1 || defaultValue !== void 0;
+  if (!hasStepOrDefault) {
+    return null;
+  }
+  const renderDots = () => {
+    if (dotsData) {
+      const { minTransform, maxTransform } = transforms;
+      return dotsData.map(({ value: dotValue, position: dotPosition }, idx) => {
+        const dotTransform = minTransform + dotPosition * (maxTransform - minTransform);
+        const isDefault = defaultStepValue === dotValue;
+        const isOver = dotValue <= currentValue;
+        const { dot } = rangeTv({
+          defaultStepValue: isDefault,
+          overStepValue: isOver
+        });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: idx === 0 ? ref : void 0,
+            className: tcx(dot(), className),
+            "data-status": getDotStatus(isOver, isDefault),
+            style: {
+              left: dotTransform + thumbSize / 2
+            },
+            ...rest
+          },
+          dotValue
+        );
+      });
+    }
+    if (defaultDotPosition !== null && defaultDotPosition !== void 0 && defaultStepValue) {
+      const isOver = defaultStepValue <= currentValue;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          className: tcx(rangeTv({ defaultStepValue: true }).dot(), className),
+          "data-status": isOver ? "over" : "default",
+          style: {
+            left: transforms.minTransform + defaultDotPosition * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
+          },
+          ...rest
+        }
+      );
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() });
+});
+RangeDot.displayName = "RangeDot";
+var RangeTupleDot = forwardRef(
+  function RangeTupleDot2(props, ref) {
+    const { className, ...rest } = props;
+    const {
+      currentValue,
+      step,
+      transforms,
+      thumbSize,
+      defaultStepValue,
+      dotsData,
+      defaultDotPositions,
+      normalizedDefaultValue,
+      tv
+    } = useRangeTupleContext();
+    const hasStepOrDefault = step > 1 || normalizedDefaultValue !== void 0;
+    if (!hasStepOrDefault) {
+      return null;
+    }
+    const renderDots = () => {
+      if (dotsData) {
+        const { minTransform, maxTransform } = transforms;
+        return dotsData.map(({ value: dotValue, position: dotPosition }, idx) => {
+          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",
+            {
+              ref: idx === 0 ? ref : void 0,
+              className: tcx(dot(), className),
+              "data-status": getDotStatus(isWithinRange, !!isDefaultValue),
+              "data-position": idx === 0 ? "left" : "right",
+              style: {
+                left: dotTransform + thumbSize / 2
+              },
+              ...rest
+            },
+            dotValue
+          );
+        });
+      }
+      if (defaultDotPositions && defaultStepValue) {
+        const leftIsOver = defaultStepValue[0] >= currentValue[0];
+        const rightIsOver = defaultStepValue[1] <= currentValue[1];
+        return defaultDotPositions.map((position, idx) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: idx === 0 ? ref : void 0,
+            className: tcx(rangeTv({ defaultStepValue: true }).dot(), className),
+            "data-status": leftIsOver && idx === 0 ? "left-over" : rightIsOver && idx === 1 ? "right-over" : "default",
+            "data-position": idx === 0 ? "left" : "right",
+            style: {
+              left: transforms.minTransform + position * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
+            },
+            ...rest
+          },
+          `default-${idx}`
+        ));
+      }
+      return null;
+    };
+    return /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() });
+  }
+);
+RangeTupleDot.displayName = "RangeTupleDot";
+var RangeRoot = forwardRef(function Range(props, ref) {
   const {
+    children,
     defaultValue,
     value,
     onChange,
@@ -106,52 +596,82 @@ var Range = forwardRef(function Range2(props, ref) {
     disabled = false,
     readOnly = false,
     className,
-    connectsClassName = {
-      positive: "bg-accent-background",
-      negative: "bg-accent-background"
-    },
-    trackSize = {
-      width: 256,
-      height: 16
-    },
-    thumbSize = 14
+    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 === RangeThumb || (type == null ? void 0 : type.displayName) === "RangeThumb") {
+          hasCustom = true;
+          const childProps = child.props;
+          if (childProps.size !== void 0) {
+            thumbSizeFromChild = childProps.size;
+          }
+        } else if (child.type === RangeContainer || (type == null ? void 0 : type.displayName) === "RangeContainer") {
+          hasCustom = true;
+          const childProps = child.props;
+          if (childProps.height !== void 0) {
+            trackHeightFromChild = childProps.height;
+          }
+        } else if (child.type === RangeConnects || (type == null ? void 0 : type.displayName) === "RangeConnects") {
+          hasCustom = true;
+          hasConnects = true;
+        } else if (child.type === RangeDot || (type == null ? void 0 : type.displayName) === "RangeDot") {
+          hasCustom = true;
+          hasDot = true;
+        }
+      }
+    }
+    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) / (max - min), [min, max]);
-  const positionToValue = useCallback(
-    (position) => min + position * (max - min),
-    [min, max]
-  );
+  const valueToPosition = useCallback((val) => (val - min) / range, [min, range]);
+  const positionToValue = useCallback((position) => min + position * range, [min, range]);
   const defaultStepValue = useMemo(() => {
     if (defaultValue === void 0 || defaultValue === null) return null;
-    if (step > 1) {
-      return Math.round((defaultValue - min) / step) * step + min;
+    if (safeStep > 1) {
+      return Math.round((defaultValue - min) / safeStep) * safeStep + min;
     }
     return defaultValue;
-  }, [defaultValue, step, min]);
+  }, [defaultValue, safeStep, min]);
   const sliderRef = useRef(null);
   const thumbRef = useRef(null);
   const inputRef = useRef(null);
   const isDragging = useRef(false);
+  const cleanupRef = useRef(null);
   const [internalValue, setInternalValue] = useState(value ?? min);
   const currentValue = value ?? internalValue;
   const currentStepValue = useMemo(
-    () => step > 1 ? Math.round(currentValue / step) * step : currentValue,
-    [currentValue, step]
+    () => safeStep > 1 ? Math.round(currentValue / safeStep) * safeStep : currentValue,
+    [currentValue, safeStep]
   );
-  const [transforms, setTransforms] = useState({
-    minTransform: 1,
-    maxTransform: 0,
-    transformX: 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]);
+  const trackWidth = typeof propsWidth === "number" ? propsWidth : actualTrackWidth;
   useIsomorphicLayoutEffect(() => {
-    if ((trackSize == null ? void 0 : trackSize.width) === "auto" && sliderRef.current) {
+    if (typeof propsWidth !== "number" && sliderRef.current) {
       const updateWidth = () => {
         if (sliderRef.current) {
           const width = sliderRef.current.getBoundingClientRect().width;
@@ -169,43 +689,39 @@ var Range = forwardRef(function Range2(props, ref) {
         resizeObserver.disconnect();
       };
     }
-  }, [trackSize == null ? void 0 : trackSize.width]);
-  useEffect(() => {
+  }, [propsWidth]);
+  const transforms = useMemo(() => {
     const position = valueToPosition(currentValue);
     const minTransform = 1;
-    const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
+    const maxTransform = (typeof trackWidth === "number" ? trackWidth : 0) - thumbSize - 1;
     const transformX = minTransform + position * (maxTransform - minTransform);
-    setTransforms({
-      minTransform,
-      maxTransform,
-      transformX
-    });
+    return { minTransform, maxTransform, transformX };
   }, [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;
+    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
       };
     });
-  }, [step, min, max, valueToPosition]);
+  }, [safeStep, min, max, valueToPosition]);
   const defaultDotPosition = useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null || step > 1) return null;
+    if (defaultValue === void 0 || defaultValue === null || safeStep > 1) return null;
     return valueToPosition(defaultValue);
-  }, [defaultValue, step, valueToPosition]);
+  }, [defaultValue, safeStep, valueToPosition]);
   const updatePosition = useEventCallback((clientX, 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;
+    const newValue = Math.round(positionToValue(newPosition) / safeStep) * safeStep;
     let clampedValue = clamp(newValue, min, max);
-    if (defaultValue !== void 0 && defaultValue !== null && step === 1) {
-      const snapThreshold = (max - min) * 0.05;
+    if (defaultValue !== void 0 && defaultValue !== null && safeStep <= 1) {
+      const snapThreshold = range * 0.05;
       const distanceToDefault = Math.abs(clampedValue - defaultValue);
       if (distanceToDefault <= snapThreshold) {
         clampedValue = defaultValue;
@@ -242,6 +758,12 @@ var Range = forwardRef(function Range2(props, ref) {
         e2.preventDefault();
         updatePosition(e2.clientX);
       };
+      const cleanup = () => {
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
+        cleanupRef.current = null;
+      };
       const handleUp = (e2) => {
         if (!isDragging.current) return;
         e2.preventDefault();
@@ -251,16 +773,21 @@ var Range = forwardRef(function Range2(props, ref) {
         updatePosition(e2.clientX, true);
         isDragging.current = false;
         onChangeEnd == null ? void 0 : onChangeEnd();
-        window.removeEventListener("pointermove", handleMove);
-        window.removeEventListener("pointerup", handleUp);
-        window.removeEventListener("pointercancel", handleUp);
+        cleanup();
       };
+      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) => {
       if (disabled || readOnly || e.target === thumbRef.current) return;
@@ -270,7 +797,7 @@ var Range = forwardRef(function Range2(props, ref) {
   );
   const handleKeyDown = useEventCallback((e) => {
     if (disabled || readOnly) return;
-    const stepValue = e.shiftKey ? step * 10 : step;
+    const stepValue = e.shiftKey ? safeStep * 10 : safeStep;
     let newValue = currentValue;
     switch (e.key) {
       case "ArrowLeft":
@@ -296,120 +823,88 @@ var Range = forwardRef(function Range2(props, ref) {
       (_a = inputRef.current) == null ? void 0 : _a.blur();
     }
   }, [disabled]);
+  const hasStepOrDefault = safeStep > 1 || defaultValue !== void 0;
   const tv = useMemo(
     () => rangeTv({
       currentDefaultValue: defaultStepValue === currentStepValue,
-      hasStepOrDefault: step > 1 || defaultValue !== void 0,
+      hasStepOrDefault,
       disabled
     }),
-    [defaultStepValue, currentStepValue, step, defaultValue, disabled]
+    [defaultStepValue, currentStepValue, hasStepOrDefault, disabled]
   );
-  const connectsClass = useMemo(() => {
-    if (disabled) return "bg-disabled-background";
-    if (currentValue < 0) return connectsClassName.negative;
-    return connectsClassName.positive;
-  }, [disabled, currentValue, connectsClassName]);
-  const connectStyle = useMemo(() => {
-    return {
-      left: min < 0 ? currentValue < 0 ? `${transforms.transformX + thumbSize / 2}px` : "50%" : ((trackSize == null ? void 0 : trackSize.height) ?? 0) / 2 + "px",
-      right: min < 0 ? currentValue >= 0 ? `calc(100% - ${transforms.transformX + thumbSize / 2}px)` : "50%" : `calc(100% - ${transforms.transformX + thumbSize / 2}px)`,
-      height: trackSize == null ? void 0 : trackSize.height
-    };
-  }, [min, currentValue, transforms.transformX, 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 { dot } = rangeTv({
-          defaultStepValue: defaultStepValue === dotValue,
-          overStepValue: dotValue <= currentValue
-        });
-        return /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: dot(),
-            style: {
-              left: dotTransform + thumbSize / 2
-            }
-          },
-          dotValue
-        );
-      });
-    }
-    if (defaultDotPosition !== null && defaultDotPosition !== void 0) {
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: rangeTv({ defaultStepValue: true }).dot(),
-          style: {
-            left: transforms.minTransform + defaultDotPosition * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
-          }
-        }
-      );
-    }
-    return null;
-  }, [dotsData, defaultDotPosition, transforms, defaultStepValue, currentValue, thumbSize]);
-  useEffect(() => {
-    const noop = () => {
-    };
-    return () => {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("pointermove", noop);
-        window.removeEventListener("pointerup", noop);
-        window.removeEventListener("pointercancel", noop);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsxs(
+  const contextValue = useMemo(
+    () => ({
+      currentValue,
+      disabled,
+      readOnly,
+      min,
+      max,
+      step: safeStep,
+      thumbSize,
+      trackHeight,
+      transforms,
+      defaultStepValue,
+      currentStepValue,
+      dotsData,
+      defaultDotPosition,
+      thumbRef,
+      inputRef,
+      isDragging,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      defaultValue,
+      hasCustomDot,
+      hasCustomConnects,
+      isDefaultValue: defaultStepValue === currentStepValue && hasStepOrDefault
+    }),
+    [
+      currentValue,
+      disabled,
+      readOnly,
+      min,
+      max,
+      safeStep,
+      thumbSize,
+      trackHeight,
+      transforms,
+      defaultStepValue,
+      currentStepValue,
+      dotsData,
+      defaultDotPosition,
+      handlePointerDown,
+      handleKeyDown,
+      tv,
+      defaultValue,
+      hasCustomDot,
+      hasCustomConnects
+    ]
+  );
+  return /* @__PURE__ */ jsx(RangeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
     "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`
+        "--width": `${typeof trackWidth === "number" ? trackWidth : actualTrackWidth}px`,
+        "--height": `${trackHeight}px`,
+        "--thumb-size": `${thumbSize}px`
       },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: tcx(tv.connect(), connectsClass),
-            style: connectStyle
-          }
-        ),
-        step > 1 || defaultValue !== void 0 ? /* @__PURE__ */ jsx("div", { className: tv.dotContainer(), children: renderDots() }) : "",
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: thumbRef,
-            onPointerDown: handlePointerDown,
-            className: tv.thumb(),
-            style: {
-              width: thumbSize,
-              height: thumbSize,
-              transform: `translate(${transforms.transformX}px, -50%)`,
-              willChange: isDragging.current ? "transform" : "auto"
-            },
-            children: /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                onKeyDown: handleKeyDown,
-                className: tv.input(),
-                tabIndex: disabled || readOnly ? -1 : 0,
-                readOnly: true
-              }
-            )
-          }
-        )
-      ]
+      children: hasCustomChildren ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(RangeContainer, {}),
+        /* @__PURE__ */ jsx(RangeThumb, {})
+      ] })
     }
-  );
+  ) });
+});
+RangeRoot.displayName = "Range";
+var Range2 = Object.assign(RangeRoot, {
+  Container: RangeContainer,
+  Connects: RangeConnects,
+  Thumb: RangeThumb,
+  Dot: RangeDot
 });
-Range.displayName = "Range";
 function normalizeTuple(value, min, max) {
   if (value === void 0) {
     return [min, max];
@@ -420,281 +915,174 @@ function normalizeTuple(value, min, max) {
   }
   return [clamp(value, min, max), max];
 }
-var 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);
-            }
-          }
-        };
-        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;
-            }
+var RangeTupleRoot = forwardRef(function RangeTuple(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;
           }
-        }
-        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];
@@ -702,185 +1090,225 @@ var 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";
+Object.assign(RangeTupleRoot, {
+  Container: RangeTupleContainer,
+  Connects: RangeTupleConnects,
+  Thumb: RangeTupleThumb,
+  Dot: RangeTupleDot
+});
 export {
-  Range,
-  RangeTuple
+  Range2 as Range,
+  RangeContext,
+  RangeTupleContext,
+  useRangeContext,
+  useRangeTupleContext
 };