@choice-ui/react 1.3.11 → 1.4.0

package/dist/cjs/components/range/dist/index.cjs

@@ -1,886 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const esToolkit = require("es-toolkit");
-const React = require("react");
-const usehooksTs = require("usehooks-ts");
-const require$$0 = require("react/jsx-runtime");
-const useIsomorphicLayoutEffect = require("../../../shared/hooks/use-isomorphic-layout-effect/use-isomorphic-layout-effect.cjs");
-const tcx = require("../../../shared/utils/tcx/tcx.cjs");
-const mergeRefs = require("../../../shared/utils/merge-refs/merge-refs.cjs");
-var rangeTv = tcx.tcv({
-  slots: {
-    container: [
-      "h-(--height) w-(--width)",
-      "relative touch-none select-none",
-      "bg-secondary-background shadow-inset-border rounded-full"
-    ],
-    connect: [
-      "pointer-events-none absolute",
-      "after:absolute",
-      "after:content-['']",
-      "after:rounded-full",
-      "after:bg-inherit",
-      "after:h-[var(--height)]",
-      "after:left-[calc(var(--height)/-2)]",
-      "after:right-[calc(var(--height)/-2)]"
-    ],
-    thumb: [
-      "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"],
-    input: "absolute -inset-1 cursor-default opacity-0"
-  },
-  variants: {
-    overStepValue: {
-      true: {
-        dot: "bg-black/20"
-      },
-      false: {
-        dot: "bg-black/10"
-      }
-    },
-    defaultStepValue: {
-      true: {
-        dot: "bg-black"
-      }
-    },
-    hasStepOrDefault: {
-      true: {},
-      false: {}
-    },
-    currentDefaultValue: {
-      true: {},
-      false: {}
-    },
-    disabled: {
-      true: {
-        thumb: "bg-secondary-background"
-      },
-      false: {}
-    }
-  },
-  compoundVariants: [
-    {
-      defaultStepValue: true,
-      overStepValue: true,
-      class: {
-        dot: "bg-black"
-      }
-    },
-    {
-      hasStepOrDefault: true,
-      currentDefaultValue: true,
-      disabled: false,
-      class: {
-        thumb: "bg-white"
-      }
-    },
-    {
-      hasStepOrDefault: true,
-      currentDefaultValue: false,
-      disabled: false,
-      class: {
-        thumb: "bg-accent-background"
-      }
-    }
-  ],
-  defaultVariants: {
-    defaultStepValue: false,
-    overStepValue: false,
-    hasStepOrDefault: false,
-    currentDefaultValue: false,
-    disabled: false
-  }
-});
-var Range = React.forwardRef(function Range2(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] = React.useState();
-  const valueToPosition = React.useCallback((val) => (val - min) / (max - min), [min, max]);
-  const positionToValue = React.useCallback(
-    (position) => min + position * (max - min),
-    [min, max]
-  );
-  const defaultStepValue = React.useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null) return null;
-    if (step > 1) {
-      return Math.round((defaultValue - min) / step) * step + min;
-    }
-    return defaultValue;
-  }, [defaultValue, step, min]);
-  const sliderRef = React.useRef(null);
-  const thumbRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const isDragging = React.useRef(false);
-  const [internalValue, setInternalValue] = React.useState(value ?? min);
-  const currentValue = value ?? internalValue;
-  const currentStepValue = React.useMemo(
-    () => step > 1 ? Math.round(currentValue / step) * step : currentValue,
-    [currentValue, step]
-  );
-  const [transforms, setTransforms] = React.useState({
-    minTransform: 1,
-    maxTransform: 0,
-    transformX: 0
-  });
-  const trackWidth = React.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.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]);
-  React.useEffect(() => {
-    const position = valueToPosition(currentValue);
-    const minTransform = 1;
-    const maxTransform = (trackWidth ?? 0) - thumbSize - 1;
-    const transformX = minTransform + position * (maxTransform - minTransform);
-    setTransforms({
-      minTransform,
-      maxTransform,
-      transformX
-    });
-  }, [currentValue, trackWidth, thumbSize, valueToPosition]);
-  const dotsData = React.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 defaultDotPosition = React.useMemo(() => {
-    if (defaultValue === void 0 || defaultValue === null || step > 1) return null;
-    return valueToPosition(defaultValue);
-  }, [defaultValue, step, valueToPosition]);
-  const updatePosition = usehooksTs.useEventCallback((clientX, isEnd) => {
-    var _a;
-    if (readOnly) return;
-    const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
-    if (!rect) return;
-    const newPosition = esToolkit.clamp((clientX - rect.left) / rect.width, 0, 1);
-    const newValue = Math.round(positionToValue(newPosition) / step) * step;
-    let clampedValue = esToolkit.clamp(newValue, min, max);
-    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;
-      }
-    }
-    if (isEnd) {
-      isDragging.current = false;
-    }
-    if (value === void 0) {
-      setInternalValue(clampedValue);
-    }
-    onChange == null ? void 0 : onChange(clampedValue);
-  });
-  React.useEffect(() => {
-    if (value !== void 0) {
-      setInternalValue(value);
-    }
-  }, [value]);
-  const handlePointerDown = React.useCallback(
-    (e) => {
-      var _a;
-      if (disabled || readOnly) return;
-      e.preventDefault();
-      e.stopPropagation();
-      const thumb = thumbRef.current;
-      if (!thumb) return;
-      onChangeStart == null ? void 0 : onChangeStart();
-      isDragging.current = true;
-      thumb.setPointerCapture(e.pointerId);
-      updatePosition(e.clientX);
-      (_a = inputRef.current) == null ? void 0 : _a.focus();
-      const handleMove = (e2) => {
-        if (!isDragging.current) return;
-        e2.preventDefault();
-        updatePosition(e2.clientX);
-      };
-      const handleUp = (e2) => {
-        if (!isDragging.current) return;
-        e2.preventDefault();
-        if (thumb.hasPointerCapture(e2.pointerId)) {
-          thumb.releasePointerCapture(e2.pointerId);
-        }
-        updatePosition(e2.clientX, true);
-        isDragging.current = false;
-        onChangeEnd == null ? void 0 : onChangeEnd();
-        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]
-  );
-  const handleSliderPointerDown = React.useCallback(
-    (e) => {
-      if (disabled || readOnly || e.target === thumbRef.current) return;
-      handlePointerDown(e);
-    },
-    [disabled, readOnly, handlePointerDown]
-  );
-  const handleKeyDown = usehooksTs.useEventCallback((e) => {
-    if (disabled || readOnly) return;
-    const stepValue = e.shiftKey ? step * 10 : step;
-    let newValue = currentValue;
-    switch (e.key) {
-      case "ArrowLeft":
-      case "ArrowDown":
-        e.preventDefault();
-        newValue = esToolkit.clamp(newValue - stepValue, min, max);
-        break;
-      case "ArrowRight":
-      case "ArrowUp":
-        e.preventDefault();
-        newValue = esToolkit.clamp(newValue + stepValue, min, max);
-        break;
-      default:
-        return;
-    }
-    if (newValue !== value) {
-      onChange == null ? void 0 : onChange(newValue);
-    }
-  });
-  React.useEffect(() => {
-    var _a;
-    if (disabled && document.activeElement === inputRef.current) {
-      (_a = inputRef.current) == null ? void 0 : _a.blur();
-    }
-  }, [disabled]);
-  const styles = React.useMemo(
-    () => rangeTv({
-      currentDefaultValue: defaultStepValue === currentStepValue,
-      hasStepOrDefault: step > 1 || defaultValue !== void 0,
-      disabled
-    }),
-    [defaultStepValue, currentStepValue, step, defaultValue, disabled]
-  );
-  const connectsClass = React.useMemo(() => {
-    if (disabled) return "bg-disabled-background";
-    if (currentValue < 0) return connectsClassName.negative;
-    return connectsClassName.positive;
-  }, [disabled, currentValue, connectsClassName]);
-  const connectStyle = React.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 = React.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__ */ require$$0.jsx(
-          "div",
-          {
-            className: dot(),
-            style: {
-              left: dotTransform + thumbSize / 2
-            }
-          },
-          dotValue
-        );
-      });
-    }
-    if (defaultDotPosition !== null && defaultDotPosition !== void 0) {
-      return /* @__PURE__ */ require$$0.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]);
-  React.useEffect(() => {
-    const noop = () => {
-    };
-    return () => {
-      if (typeof window !== "undefined") {
-        window.removeEventListener("pointermove", noop);
-        window.removeEventListener("pointerup", noop);
-        window.removeEventListener("pointercancel", noop);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ require$$0.jsxs(
-    "div",
-    {
-      ref: mergeRefs.mergeRefs(sliderRef, ref),
-      onPointerDown: handleSliderPointerDown,
-      className: tcx.tcx(styles.container(), className),
-      style: {
-        "--width": `${trackWidth}px`,
-        "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
-      },
-      children: [
-        /* @__PURE__ */ require$$0.jsx(
-          "div",
-          {
-            className: tcx.tcx(styles.connect(), connectsClass),
-            style: connectStyle
-          }
-        ),
-        step > 1 || defaultValue !== void 0 ? /* @__PURE__ */ require$$0.jsx("div", { className: styles.dotContainer(), children: renderDots() }) : "",
-        /* @__PURE__ */ require$$0.jsx(
-          "div",
-          {
-            ref: thumbRef,
-            onPointerDown: handlePointerDown,
-            className: styles.thumb(),
-            style: {
-              width: thumbSize,
-              height: thumbSize,
-              transform: `translate(${transforms.transformX}px, -50%)`,
-              willChange: isDragging.current ? "transform" : "auto"
-            },
-            children: /* @__PURE__ */ require$$0.jsx(
-              "input",
-              {
-                ref: inputRef,
-                type: "text",
-                onKeyDown: handleKeyDown,
-                className: styles.input(),
-                tabIndex: disabled || readOnly ? -1 : 0,
-                readOnly: true
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-});
-Range.displayName = "Range";
-function normalizeTuple(value, min, max) {
-  if (value === void 0) {
-    return [min, max];
-  }
-  if (Array.isArray(value)) {
-    const [v0, v1] = value;
-    return [esToolkit.clamp(Math.min(v0, v1), min, max), esToolkit.clamp(Math.max(v0, v1), min, max)];
-  }
-  return [esToolkit.clamp(value, min, max), max];
-}
-var RangeTuple = React.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] = React.useState();
-    const valueToPosition = React.useCallback((val) => (val - min) / (max - min), [min, max]);
-    const positionToValue = React.useCallback(
-      (position) => min + position * (max - min),
-      [min, max]
-    );
-    const normalizedDefaultValue = React.useMemo(
-      () => defaultValue ? normalizeTuple(defaultValue, min, max) : void 0,
-      [defaultValue, min, max]
-    );
-    const defaultStepValue = React.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 = React.useRef(null);
-    const thumb0Ref = React.useRef(null);
-    const thumb1Ref = React.useRef(null);
-    const input0Ref = React.useRef(null);
-    const input1Ref = React.useRef(null);
-    const isDragging = React.useRef(null);
-    const [internalValue, setInternalValue] = React.useState(
-      normalizeTuple(value, min, max)
-    );
-    const currentValue = React.useMemo(
-      () => value ? normalizeTuple(value, min, max) : internalValue,
-      [value, min, max, internalValue]
-    );
-    const currentStepValue = React.useMemo(() => {
-      if (step > 1) {
-        return currentValue.map((v) => Math.round(v / step) * step);
-      }
-      return currentValue;
-    }, [currentValue, step]);
-    const [transforms, setTransforms] = React.useState({
-      minTransform: 1,
-      maxTransform: 0,
-      transformX0: 0,
-      transformX1: 0
-    });
-    const trackWidth = React.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.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]);
-    React.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 = React.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 = React.useMemo(() => {
-      if (!normalizedDefaultValue || step > 1) return null;
-      return normalizedDefaultValue.map((v) => valueToPosition(v));
-    }, [normalizedDefaultValue, step, valueToPosition]);
-    const updatePosition = usehooksTs.useEventCallback(
-      (clientX, thumbIndex, isEnd) => {
-        var _a;
-        if (readOnly) return;
-        const rect = (_a = sliderRef.current) == null ? void 0 : _a.getBoundingClientRect();
-        if (!rect) return;
-        const newPosition = esToolkit.clamp((clientX - rect.left) / rect.width, 0, 1);
-        const newValue = Math.round(positionToValue(newPosition) / step) * step;
-        let clampedValue = esToolkit.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);
-      }
-    );
-    React.useEffect(() => {
-      if (value !== void 0) {
-        setInternalValue(normalizeTuple(value, min, max));
-      }
-    }, [value, min, max]);
-    const handlePointerDown = React.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 = esToolkit.clamp((e2.clientX - rect.left) / rect.width, 0, 1);
-            const newValue = Math.round(positionToValue(newPosition) / step) * step;
-            let clampedValue = esToolkit.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 = React.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 = usehooksTs.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 = esToolkit.clamp(newValue - stepValue, min, max);
-          break;
-        case "ArrowRight":
-        case "ArrowUp":
-          e.preventDefault();
-          newValue = esToolkit.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];
-        }
-      }
-      onChange == null ? void 0 : onChange(newTuple);
-    });
-    React.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 styles = React.useMemo(
-      () => rangeTv({
-        hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
-        disabled
-      }),
-      [step, normalizedDefaultValue, disabled]
-    );
-    const connectsClass = React.useMemo(() => {
-      if (disabled) return "bg-disabled-background";
-      return connectsClassName.positive;
-    }, [disabled, connectsClassName]);
-    const connectStyle = React.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 = React.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__ */ require$$0.jsx(
-            "div",
-            {
-              className: dot(),
-              style: {
-                left: dotTransform + thumbSize / 2
-              }
-            },
-            dotValue
-          );
-        });
-      }
-      if (defaultDotPositions) {
-        return defaultDotPositions.map((position, idx) => /* @__PURE__ */ require$$0.jsx(
-          "div",
-          {
-            className: rangeTv({ defaultStepValue: true }).dot(),
-            style: {
-              left: transforms.minTransform + position * (transforms.maxTransform - transforms.minTransform) + thumbSize / 2
-            }
-          },
-          `default-${idx}`
-        ));
-      }
-      return null;
-    }, [dotsData, defaultDotPositions, defaultStepValue, transforms, thumbSize, currentValue]);
-    React.useEffect(() => {
-      const noop = () => {
-      };
-      return () => {
-        if (typeof window !== "undefined") {
-          window.removeEventListener("pointermove", noop);
-          window.removeEventListener("pointerup", noop);
-          window.removeEventListener("pointercancel", noop);
-        }
-      };
-    }, []);
-    const thumb0IsDefault = React.useMemo(() => {
-      if (!defaultStepValue) return false;
-      return currentStepValue[0] === defaultStepValue[0];
-    }, [currentStepValue, defaultStepValue]);
-    const thumb1IsDefault = React.useMemo(() => {
-      if (!defaultStepValue) return false;
-      return currentStepValue[1] === defaultStepValue[1];
-    }, [currentStepValue, defaultStepValue]);
-    const thumb0Styles = React.useMemo(
-      () => rangeTv({
-        currentDefaultValue: thumb0IsDefault,
-        hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
-        disabled
-      }),
-      [thumb0IsDefault, step, normalizedDefaultValue, disabled]
-    );
-    const thumb1Styles = React.useMemo(
-      () => rangeTv({
-        currentDefaultValue: thumb1IsDefault,
-        hasStepOrDefault: step > 1 || normalizedDefaultValue !== void 0,
-        disabled
-      }),
-      [thumb1IsDefault, step, normalizedDefaultValue, disabled]
-    );
-    return /* @__PURE__ */ require$$0.jsxs(
-      "div",
-      {
-        ref: mergeRefs.mergeRefs(sliderRef, ref),
-        onPointerDown: handleSliderPointerDown,
-        className: tcx.tcx(styles.container(), className),
-        style: {
-          "--width": `${trackWidth}px`,
-          "--height": `${(trackSize == null ? void 0 : trackSize.height) ?? 16}px`
-        },
-        children: [
-          /* @__PURE__ */ require$$0.jsx(
-            "div",
-            {
-              className: tcx.tcx(styles.connect(), connectsClass),
-              style: connectStyle
-            }
-          ),
-          (step > 1 || normalizedDefaultValue !== void 0) && /* @__PURE__ */ require$$0.jsx("div", { className: styles.dotContainer(), children: renderDots() }),
-          /* @__PURE__ */ require$$0.jsx(
-            "div",
-            {
-              ref: thumb0Ref,
-              onPointerDown: (e) => handlePointerDown(e, 0),
-              className: thumb0Styles.thumb(),
-              style: {
-                width: thumbSize,
-                height: thumbSize,
-                transform: `translate(${transforms.transformX0}px, -50%)`,
-                willChange: isDragging.current === 0 ? "transform" : "auto"
-              },
-              children: /* @__PURE__ */ require$$0.jsx(
-                "input",
-                {
-                  ref: input0Ref,
-                  type: "text",
-                  onKeyDown: (e) => handleKeyDown(e, 0),
-                  className: styles.input(),
-                  tabIndex: disabled || readOnly ? -1 : 0,
-                  readOnly: true
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ require$$0.jsx(
-            "div",
-            {
-              ref: thumb1Ref,
-              onPointerDown: (e) => handlePointerDown(e, 1),
-              className: thumb1Styles.thumb(),
-              style: {
-                width: thumbSize,
-                height: thumbSize,
-                transform: `translate(${transforms.transformX1}px, -50%)`,
-                willChange: isDragging.current === 1 ? "transform" : "auto"
-              },
-              children: /* @__PURE__ */ require$$0.jsx(
-                "input",
-                {
-                  ref: input1Ref,
-                  type: "text",
-                  onKeyDown: (e) => handleKeyDown(e, 1),
-                  className: styles.input(),
-                  tabIndex: disabled || readOnly ? -1 : 0,
-                  readOnly: true
-                }
-              )
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-RangeTuple.displayName = "RangeTuple";
-exports.Range = Range;
-exports.RangeTuple = RangeTuple;