@choice-ui/react 1.8.9 → 1.9.0

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

@@ -1,28 +1,10 @@
 import { clamp } from "es-toolkit";
-import { forwardRef, useMemo, Children, isValidElement, useState, useCallback, useRef, useEffect, createContext, useContext } from "react";
+import { forwardRef, useState, useCallback, useMemo, useRef, useEffect } from "react";
 import { useEventCallback } from "usehooks-ts";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } 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: [
@@ -31,19 +13,19 @@ var rangeTv = tcv({
       "bg-secondary-background shadow-inset-border rounded-full"
     ],
     connect: [
-      "pointer-events-none absolute h-(--height)",
+      "pointer-events-none absolute",
       "after:absolute",
       "after:content-['']",
       "after:rounded-full",
-      "after:[background:inherit]",
-      "after:h-[inherit]",
+      "after:bg-inherit",
+      "after:h-[var(--height)]",
       "after:left-[calc(var(--height)/-2)]",
       "after:right-[calc(var(--height)/-2)]"
     ],
-    thumbWrapper: ["absolute top-1/2 box-border origin-center z-2"],
     thumb: [
-      "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"
+      "absolute top-1/2 box-border origin-center rounded-full",
+      "shadow-range-thumb border-2 border-white",
+      "bg-white"
     ],
     dotContainer: "pointer-events-none absolute inset-0",
     dot: ["size-1 rounded-full", "absolute top-1/2", "-translate-x-1/2 -translate-y-1/2"],
@@ -73,12 +55,9 @@ var rangeTv = tcv({
     },
     disabled: {
       true: {
-        connect: "bg-disabled-background",
         thumb: "bg-secondary-background"
       },
-      false: {
-        connect: "bg-accent-background"
-      }
+      false: {}
     }
   },
   compoundVariants: [
@@ -114,477 +93,8 @@ var rangeTv = tcv({
     disabled: false
   }
 });
-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) {
+var Range = forwardRef(function Range2(props, ref) {
   const {
-    children,
     defaultValue,
     value,
     onChange,
@@ -596,82 +106,52 @@ var RangeRoot = forwardRef(function Range(props, ref) {
     disabled = false,
     readOnly = false,
     className,
-    width: propsWidth = 256,
-    thumbSize: propsThumbSize = 14
+    connectsClassName = {
+      positive: "bg-accent-background",
+      negative: "bg-accent-background"
+    },
+    trackSize = {
+      width: 256,
+      height: 16
+    },
+    thumbSize = 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) / range, [min, range]);
-  const positionToValue = useCallback((position) => min + position * range, [min, range]);
+  const valueToPosition = useCallback((val) => (val - min) / (max - min), [min, max]);
+  const positionToValue = useCallback(
+    (position) => min + position * (max - min),
+    [min, max]
+  );
   const defaultStepValue = useMemo(() => {
     if (defaultValue === void 0 || defaultValue === null) return null;
-    if (safeStep > 1) {
-      return Math.round((defaultValue - min) / safeStep) * safeStep + min;
+    if (step > 1) {
+      return Math.round((defaultValue - min) / step) * step + min;
     }
     return defaultValue;
-  }, [defaultValue, safeStep, min]);
+  }, [defaultValue, step, 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(
-    () => safeStep > 1 ? Math.round(currentValue / safeStep) * safeStep : currentValue,
-    [currentValue, safeStep]
+    () => step > 1 ? Math.round(currentValue / step) * step : currentValue,
+    [currentValue, step]
   );
-  const trackWidth = typeof propsWidth === "number" ? propsWidth : actualTrackWidth;
+  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]);
   useIsomorphicLayoutEffect(() => {
-    if (typeof propsWidth !== "number" && sliderRef.current) {
+    if ((trackSize == null ? void 0 : trackSize.width) === "auto" && sliderRef.current) {
       const updateWidth = () => {
         if (sliderRef.current) {
           const width = sliderRef.current.getBoundingClientRect().width;
@@ -689,39 +169,43 @@ var RangeRoot = forwardRef(function Range(props, ref) {
         resizeObserver.disconnect();
       };
     }
-  }, [propsWidth]);
-  const transforms = useMemo(() => {
+  }, [trackSize == null ? void 0 : trackSize.width]);
+  useEffect(() => {
     const position = valueToPosition(currentValue);
     const minTransform = 1;
-    const maxTransform = (typeof trackWidth === "number" ? trackWidth : 0) - thumbSize - 1;
+    const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
     const transformX = minTransform + position * (maxTransform - minTransform);
-    return { minTransform, maxTransform, transformX };
+    setTransforms({
+      minTransform,
+      maxTransform,
+      transformX
+    });
   }, [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;
+    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
       };
     });
-  }, [safeStep, min, max, valueToPosition]);
+  }, [step, min, max, valueToPosition]);
   const defaultDotPosition = useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null || safeStep > 1) return null;
+    if (defaultValue === void 0 || defaultValue === null || step > 1) return null;
     return valueToPosition(defaultValue);
-  }, [defaultValue, safeStep, valueToPosition]);
+  }, [defaultValue, step, 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) / safeStep) * safeStep;
+    const newValue = Math.round(positionToValue(newPosition) / step) * step;
     let clampedValue = clamp(newValue, min, max);
-    if (defaultValue !== void 0 && defaultValue !== null && safeStep <= 1) {
-      const snapThreshold = range * 0.05;
+    if (defaultValue !== void 0 && defaultValue !== null && step === 1) {
+      const snapThreshold = (max - min) * 0.05;
       const distanceToDefault = Math.abs(clampedValue - defaultValue);
       if (distanceToDefault <= snapThreshold) {
         clampedValue = defaultValue;
@@ -758,12 +242,6 @@ var RangeRoot = forwardRef(function Range(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();
@@ -773,21 +251,16 @@ var RangeRoot = forwardRef(function Range(props, ref) {
         updatePosition(e2.clientX, true);
         isDragging.current = false;
         onChangeEnd == null ? void 0 : onChangeEnd();
-        cleanup();
+        window.removeEventListener("pointermove", handleMove);
+        window.removeEventListener("pointerup", handleUp);
+        window.removeEventListener("pointercancel", handleUp);
       };
-      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;
@@ -797,7 +270,7 @@ var RangeRoot = forwardRef(function Range(props, ref) {
   );
   const handleKeyDown = useEventCallback((e) => {
     if (disabled || readOnly) return;
-    const stepValue = e.shiftKey ? safeStep * 10 : safeStep;
+    const stepValue = e.shiftKey ? step * 10 : step;
     let newValue = currentValue;
     switch (e.key) {
       case "ArrowLeft":
@@ -823,266 +296,405 @@ var RangeRoot = forwardRef(function Range(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,
+      hasStepOrDefault: step > 1 || defaultValue !== void 0,
       disabled
     }),
-    [defaultStepValue, currentStepValue, hasStepOrDefault, disabled]
-  );
-  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
-    ]
+    [defaultStepValue, currentStepValue, step, defaultValue, disabled]
   );
-  return /* @__PURE__ */ jsx(RangeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: mergeRefs(sliderRef, ref),
-      onPointerDown: handleSliderPointerDown,
-      className: tcx(tv.container(), className),
-      style: {
-        "--width": `${typeof trackWidth === "number" ? trackWidth : actualTrackWidth}px`,
-        "--height": `${trackHeight}px`,
-        "--thumb-size": `${thumbSize}px`
-      },
-      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
-});
-function normalizeTuple(value, min, max) {
-  if (value === void 0) {
-    return [min, max];
-  }
-  if (Array.isArray(value)) {
-    const [v0, v1] = value;
-    return [clamp(Math.min(v0, v1), min, max), clamp(Math.max(v0, v1), min, max)];
-  }
-  return [clamp(value, min, max), max];
-}
-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;
-          }
-        } 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;
+  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
           }
-        } 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;
         }
-      }
+      );
     }
-    return {
-      hasCustomChildren: hasCustom,
-      hasCustomDot: hasDot,
-      hasCustomConnects: hasConnects,
-      extractedThumbSize: thumbSizeFromChild,
-      extractedTrackHeight: trackHeightFromChild
+    return null;
+  }, [dotsData, defaultDotPosition, transforms, defaultStepValue, currentValue, thumbSize]);
+  useEffect(() => {
+    const noop = () => {
     };
-  }, [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 () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("pointermove", noop);
+        window.removeEventListener("pointerup", noop);
+        window.removeEventListener("pointercancel", noop);
+      }
+    };
+  }, []);
+  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 || 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
+              }
+            )
+          }
+        )
+      ]
     }
-    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);
+});
+Range.displayName = "Range";
+function normalizeTuple(value, min, max) {
+  if (value === void 0) {
+    return [min, max];
+  }
+  if (Array.isArray(value)) {
+    const [v0, v1] = value;
+    return [clamp(Math.min(v0, v1), min, max), clamp(Math.max(v0, v1), 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();
+        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
       });
-      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;
+    }, [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];
           }
         }
+        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);
+          }
+          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);
+          }
+          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] = clampedValue;
+      newTuple[thumbIndex] = newValue;
       if (newTuple[0] > newTuple[1]) {
         if (thumbIndex === 0) {
           newTuple[0] = newTuple[1];
@@ -1090,225 +702,185 @@ var RangeTupleRoot = forwardRef(function RangeTuple(props, ref) {
           newTuple[1] = newTuple[0];
         }
       }
-      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 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);
-      };
-      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);
+    });
+    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();
         }
-        updatePosition(e2.clientX, thumbIndex, true);
-        isDragging.current = null;
-        onChangeEnd == null ? void 0 : onChangeEnd(latestValueRef.current);
-        cleanup();
+      }
+    }, [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
       };
-      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];
+    }, [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
+          );
+        });
       }
-    }
-    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 (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 (document.activeElement === input1Ref.current) {
-        (_b = input1Ref.current) == null ? void 0 : _b.blur();
+      return null;
+    }, [dotsData, defaultDotPositions, defaultStepValue, transforms, thumbSize, currentValue]);
+    useEffect(() => {
+      const noop = () => {
+      };
+      return () => {
+        if (typeof window !== "undefined") {
+          window.removeEventListener("pointermove", noop);
+          window.removeEventListener("pointerup", noop);
+          window.removeEventListener("pointercancel", noop);
+        }
+      };
+    }, []);
+    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
+                }
+              )
+            }
+          )
+        ]
       }
-    }
-  }, [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
-});
+    );
+  }
+);
+RangeTuple.displayName = "RangeTuple";
 export {
-  Range2 as Range,
-  RangeContext,
-  RangeTupleContext,
-  useRangeContext,
-  useRangeTupleContext
+  Range,
+  RangeTuple
 };