@tamagui/slider 2.0.0-rc.9 → 2.0.0

package/dist/esm/Slider.mjs

@@ -12,33 +12,32 @@ import { convertValueToPercentage, getClosestValueIndex, getDecimalCount, getLab
 import { SliderFrame, SliderImpl } from "./SliderImpl.mjs";
 import { jsx } from "react/jsx-runtime";
 const activeSliderMeasureListeners = /* @__PURE__ */new Set();
-process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL || setInterval?.(() => {
+if (!process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) setInterval?.(() => {
   activeSliderMeasureListeners.forEach(cb => cb());
 },
 // really doesn't need to be super often
 1e3);
 const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
   const {
-      min,
-      max,
-      dir,
-      onSlideStart,
-      onSlideMove,
-      onStepKeyDown,
-      onSlideEnd,
-      ...sliderProps
-    } = props,
-    direction = useDirection(dir),
-    isDirectionLTR = direction === "ltr",
-    sliderRef = React.useRef(null),
-    [state, setState_] = React.useState(() => ({
-      size: 0,
-      offset: 0
-    })),
-    setState = useCreateShallowSetState(setState_);
+    min,
+    max,
+    dir,
+    onSlideStart,
+    onSlideMove,
+    onStepKeyDown,
+    onSlideEnd,
+    ...sliderProps
+  } = props;
+  const direction = useDirection(dir);
+  const isDirectionLTR = direction === "ltr";
+  const sliderRef = React.useRef(null);
+  const [state, setState_] = React.useState(() => ({
+    size: 0,
+    offset: 0
+  }));
+  const setState = useCreateShallowSetState(setState_);
   function getValueFromPointer(pointerPosition) {
-    const input = [0, state.size];
-    return linearScale(input, isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
+    return linearScale([0, state.size], isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
   }
   const measure = () => {
     sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
@@ -48,7 +47,8 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
       });
     });
   };
-  return useSliderMeasure(sliderRef, measure), /* @__PURE__ */jsx(SliderOrientationProvider, {
+  useSliderMeasure(sliderRef, measure);
+  return /* @__PURE__ */jsx(SliderOrientationProvider, {
     scope: props.__scopeSlider,
     startEdge: isDirectionLTR ? "left" : "right",
     endEdge: isDirectionLTR ? "right" : "left",
@@ -63,15 +63,15 @@ const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
       onLayout: measure,
       onSlideStart: (event, target) => {
         const value = getValueFromPointer(event.nativeEvent.locationX);
-        value && onSlideStart?.(value, target, event);
+        if (value) onSlideStart?.(value, target, event);
       },
       onSlideMove: event => {
         const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        value && onSlideMove?.(value, event);
+        if (value) onSlideMove?.(value, event);
       },
       onSlideEnd: event => {
         const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        value && onSlideEnd?.(event, value);
+        if (value) onSlideEnd?.(event, value);
       },
       onStepKeyDown: event => {
         const isBackKey = BACK_KEYS[direction].includes(event.key);
@@ -87,409 +87,421 @@ function useOnDebouncedWindowResize(callback, amt = 200) {
   React.useEffect(() => {
     let last;
     const onResize = () => {
-      clearTimeout(last), last = setTimeout(callback, amt);
+      clearTimeout(last);
+      last = setTimeout(callback, amt);
     };
-    return window.addEventListener("resize", onResize), () => {
-      clearTimeout(last), window.removeEventListener("resize", onResize);
+    window.addEventListener("resize", onResize);
+    return () => {
+      clearTimeout(last);
+      window.removeEventListener("resize", onResize);
     };
   }, []);
 }
 function useSliderMeasure(sliderRef, measure) {
-  useOnDebouncedWindowResize(measure), React.useEffect(() => {
+  useOnDebouncedWindowResize(measure);
+  React.useEffect(() => {
     const node = sliderRef.current;
     if (!node) return;
     let measureTm;
     const debouncedMeasure = () => {
-        clearTimeout(measureTm), measureTm = setTimeout(() => {
-          measure();
-        }, 200);
-      },
-      io = new IntersectionObserver(entries => {
-        debouncedMeasure(), entries?.[0].isIntersecting ? activeSliderMeasureListeners.add(debouncedMeasure) : activeSliderMeasureListeners.delete(debouncedMeasure);
-      }, {
-        root: null,
-        rootMargin: "0px",
-        threshold: [0, 0.5, 1]
-      });
-    return io.observe(node), () => {
-      activeSliderMeasureListeners.delete(debouncedMeasure), io.disconnect();
+      clearTimeout(measureTm);
+      measureTm = setTimeout(() => {
+        measure();
+      }, 200);
+    };
+    const io = new IntersectionObserver(entries => {
+      debouncedMeasure();
+      if (entries?.[0].isIntersecting) activeSliderMeasureListeners.add(debouncedMeasure);else activeSliderMeasureListeners.delete(debouncedMeasure);
+    }, {
+      root: null,
+      rootMargin: "0px",
+      threshold: [0, .5, 1]
+    });
+    io.observe(node);
+    return () => {
+      activeSliderMeasureListeners.delete(debouncedMeasure);
+      io.disconnect();
     };
   }, []);
 }
 const SliderVertical = React.forwardRef((props, forwardedRef) => {
-    const {
-        min,
-        max,
-        onSlideStart,
-        onSlideMove,
-        onStepKeyDown,
-        onSlideEnd,
-        ...sliderProps
-      } = props,
-      [state, setState_] = React.useState(() => ({
-        size: 0,
-        offset: 0
-      })),
-      setState = useCreateShallowSetState(setState_),
-      sliderRef = React.useRef(null),
-      configuration = useConfiguration(),
-      insets = isIos && configuration.insets ? configuration.insets : {
-        top: 0,
-        bottom: 0
-      };
-    function getValueFromPointer(pointerPosition) {
-      const input = [0, state.size];
-      return linearScale(input, [max, min])(pointerPosition);
-    }
-    const measure = () => {
-      sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
-        setState({
-          size: height,
-          offset: pageY + (isIos ? insets.top : 0)
-        });
+  const {
+    min,
+    max,
+    onSlideStart,
+    onSlideMove,
+    onStepKeyDown,
+    onSlideEnd,
+    ...sliderProps
+  } = props;
+  const [state, setState_] = React.useState(() => ({
+    size: 0,
+    offset: 0
+  }));
+  const setState = useCreateShallowSetState(setState_);
+  const sliderRef = React.useRef(null);
+  const configuration = useConfiguration();
+  const insets = isIos && configuration.insets ? configuration.insets : {
+    top: 0,
+    bottom: 0
+  };
+  function getValueFromPointer(pointerPosition) {
+    return linearScale([0, state.size], [max, min])(pointerPosition);
+  }
+  const measure = () => {
+    sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+      setState({
+        size: height,
+        offset: pageY + (isIos ? insets.top : 0)
       });
-    };
-    return useSliderMeasure(sliderRef, measure), /* @__PURE__ */jsx(SliderOrientationProvider, {
-      scope: props.__scopeSlider,
-      startEdge: "bottom",
-      endEdge: "top",
-      sizeProp: "height",
-      size: state.size,
-      direction: 1,
-      children: /* @__PURE__ */jsx(SliderImpl, {
-        ref: composeRefs(forwardedRef, sliderRef),
-        ...sliderProps,
-        orientation: "vertical",
-        onLayout: measure,
-        onSlideStart: (event, target) => {
-          const value = getValueFromPointer(event.nativeEvent.locationY);
-          value && onSlideStart?.(value, target, event);
-        },
-        onSlideMove: event => {
-          const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-          value && onSlideMove?.(value, event);
-        },
-        onSlideEnd: event => {
-          const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-          onSlideEnd?.(event, value);
-        },
-        onStepKeyDown: event => {
-          const isBackKey = BACK_KEYS.ltr.includes(event.key);
-          onStepKeyDown?.({
-            event,
-            direction: isBackKey ? -1 : 1
-          });
-        }
-      })
     });
-  }),
-  SliderTrackFrame = styled(SliderFrame, {
-    name: "Slider",
-    variants: {
-      unstyled: {
-        false: {
-          height: "100%",
-          width: "100%",
-          backgroundColor: "$background",
-          position: "relative",
-          borderRadius: 1e5,
-          overflow: "hidden"
-        }
+  };
+  useSliderMeasure(sliderRef, measure);
+  return /* @__PURE__ */jsx(SliderOrientationProvider, {
+    scope: props.__scopeSlider,
+    startEdge: "bottom",
+    endEdge: "top",
+    sizeProp: "height",
+    size: state.size,
+    direction: 1,
+    children: /* @__PURE__ */jsx(SliderImpl, {
+      ref: composeRefs(forwardedRef, sliderRef),
+      ...sliderProps,
+      orientation: "vertical",
+      onLayout: measure,
+      onSlideStart: (event, target) => {
+        const value = getValueFromPointer(event.nativeEvent.locationY);
+        if (value) onSlideStart?.(value, target, event);
+      },
+      onSlideMove: event => {
+        const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+        if (value) onSlideMove?.(value, event);
+      },
+      onSlideEnd: event => {
+        const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+        onSlideEnd?.(event, value);
+      },
+      onStepKeyDown: event => {
+        const isBackKey = BACK_KEYS.ltr.includes(event.key);
+        onStepKeyDown?.({
+          event,
+          direction: isBackKey ? -1 : 1
+        });
+      }
+    })
+  });
+});
+const SliderTrackFrame = styled(SliderFrame, {
+  name: "Slider",
+  variants: {
+    unstyled: {
+      false: {
+        height: "100%",
+        width: "100%",
+        backgroundColor: "$background",
+        position: "relative",
+        borderRadius: 1e5,
+        overflow: "hidden"
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  SliderTrack = React.forwardRef(function (props, forwardedRef) {
-    const {
-        __scopeSlider,
-        ...trackProps
-      } = props,
-      context = useSliderContext(__scopeSlider);
-    return /* @__PURE__ */jsx(SliderTrackFrame, {
-      "data-disabled": context.disabled ? "" : void 0,
-      "data-orientation": context.orientation,
-      orientation: context.orientation,
-      size: context.size,
-      ...trackProps,
-      ref: forwardedRef
-    });
-  }),
-  SliderActiveFrame = styled(SliderFrame, {
-    name: "SliderActive",
-    position: "absolute",
-    pointerEvents: "box-none",
-    variants: {
-      unstyled: {
-        false: {
-          backgroundColor: "$background",
-          borderRadius: 1e5
-        }
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SliderTrack = React.forwardRef(function SliderTrack2(props, forwardedRef) {
+  const {
+    __scopeSlider,
+    ...trackProps
+  } = props;
+  const context = useSliderContext(__scopeSlider);
+  return /* @__PURE__ */jsx(SliderTrackFrame, {
+    "data-disabled": context.disabled ? "" : void 0,
+    "data-orientation": context.orientation,
+    orientation: context.orientation,
+    size: context.size,
+    ...trackProps,
+    ref: forwardedRef
+  });
+});
+const SliderActiveFrame = styled(SliderFrame, {
+  name: "SliderActive",
+  position: "absolute",
+  pointerEvents: "box-none",
+  variants: {
+    unstyled: {
+      false: {
+        backgroundColor: "$background",
+        borderRadius: 1e5
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  SliderActive = React.forwardRef(function (props, forwardedRef) {
-    const {
-        __scopeSlider,
-        ...rangeProps
-      } = props,
-      context = useSliderContext(__scopeSlider),
-      orientation = useSliderOrientationContext(__scopeSlider),
-      ref = React.useRef(null),
-      composedRefs = useComposedRefs(forwardedRef, ref),
-      valuesCount = context.values.length,
-      percentages = context.values.map(value => convertValueToPercentage(value, context.min, context.max)),
-      offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0,
-      offsetEnd = 100 - Math.max(...percentages);
-    return /* @__PURE__ */jsx(SliderActiveFrame, {
-      orientation: context.orientation,
-      "data-orientation": context.orientation,
-      "data-disabled": context.disabled ? "" : void 0,
-      size: context.size,
-      animateOnly: ["left", "top", "right", "bottom"],
-      ...rangeProps,
-      ref: composedRefs,
-      [orientation.startEdge]: `${offsetStart}%`,
-      [orientation.endEdge]: `${offsetEnd}%`,
-      ...(orientation.sizeProp === "width" ? {
-        height: "100%"
-      } : {
-        left: 0,
-        right: 0
-      })
-    });
-  }),
-  getThumbSize = val => {
-    const tokens = getTokens(),
-      size = typeof val == "number" ? val : getSize(tokens.size[val], {
-        shift: -1
-      });
-    return {
-      width: size,
-      height: size,
-      minWidth: size,
-      minHeight: size
-    };
   },
-  SliderThumbFrame = styled(ThemeableStack, {
-    name: "SliderThumb",
-    variants: {
-      size: {
-        "...size": getThumbSize,
-        ":number": getThumbSize
-      },
-      unstyled: {
-        false: {
-          position: "absolute",
-          borderWidth: 2,
-          borderColor: "$borderColor",
-          backgroundColor: "$background",
-          pressStyle: {
-            backgroundColor: "$backgroundPress",
-            borderColor: "$borderColorPress"
-          },
-          hoverStyle: {
-            backgroundColor: "$backgroundHover",
-            borderColor: "$borderColorHover"
-          },
-          focusVisibleStyle: {
-            outlineStyle: "solid",
-            outlineWidth: 2,
-            outlineColor: "$outlineColor"
-          }
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SliderActive = React.forwardRef(function SliderActive2(props, forwardedRef) {
+  const {
+    __scopeSlider,
+    ...rangeProps
+  } = props;
+  const context = useSliderContext(__scopeSlider);
+  const orientation = useSliderOrientationContext(__scopeSlider);
+  const composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
+  const valuesCount = context.values.length;
+  const percentages = context.values.map(value => convertValueToPercentage(value, context.min, context.max));
+  const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+  const offsetEnd = 100 - Math.max(...percentages);
+  return /* @__PURE__ */jsx(SliderActiveFrame, {
+    orientation: context.orientation,
+    "data-orientation": context.orientation,
+    "data-disabled": context.disabled ? "" : void 0,
+    size: context.size,
+    animateOnly: ["left", "top", "right", "bottom"],
+    ...rangeProps,
+    ref: composedRefs,
+    [orientation.startEdge]: `${offsetStart}%`,
+    [orientation.endEdge]: `${offsetEnd}%`,
+    ...(orientation.sizeProp === "width" ? {
+      height: "100%"
+    } : {
+      left: 0,
+      right: 0
+    })
+  });
+});
+const getThumbSize = val => {
+  const tokens = getTokens();
+  const size = typeof val === "number" ? val : getSize(tokens.size[val], {
+    shift: -1
+  });
+  return {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size
+  };
+};
+const SliderThumbFrame = styled(ThemeableStack, {
+  name: "SliderThumb",
+  variants: {
+    size: {
+      "...size": getThumbSize,
+      ":number": getThumbSize
+    },
+    unstyled: {
+      false: {
+        position: "absolute",
+        borderWidth: 2,
+        borderColor: "$borderColor",
+        backgroundColor: "$background",
+        pressStyle: {
+          backgroundColor: "$backgroundPress",
+          borderColor: "$borderColorPress"
+        },
+        hoverStyle: {
+          backgroundColor: "$backgroundHover",
+          borderColor: "$borderColorHover"
+        },
+        focusVisibleStyle: {
+          outlineStyle: "solid",
+          outlineWidth: 2,
+          outlineColor: "$outlineColor"
         }
       }
-    },
-    defaultVariants: {
-      unstyled: process.env.TAMAGUI_HEADLESS === "1"
     }
-  }),
-  SliderThumb = SliderThumbFrame.styleable(function (props, forwardedRef) {
-    const {
-        __scopeSlider,
-        index = 0,
-        circular,
-        size: sizeProp,
-        ...thumbProps
-      } = props,
-      context = useSliderContext(__scopeSlider),
-      orientation = useSliderOrientationContext(__scopeSlider),
-      [thumb, setThumb] = React.useState(null),
-      composedRefs = useComposedRefs(forwardedRef, setThumb),
-      value = context.values[index],
-      percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max),
-      label = getLabel(index, context.values.length),
-      sizeIn = sizeProp ?? context.size ?? "$true",
-      [size, setSize] = React.useState(() => getVariableValue(getThumbSize(sizeIn).width)),
-      thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
-    React.useEffect(() => {
-      if (thumb) return context.thumbs.set(thumb, index), () => {
+  },
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === "1"
+  }
+});
+const SliderThumb = SliderThumbFrame.styleable(function SliderThumb2(props, forwardedRef) {
+  const {
+    __scopeSlider,
+    index = 0,
+    circular,
+    size: sizeProp,
+    ...thumbProps
+  } = props;
+  const context = useSliderContext(__scopeSlider);
+  const orientation = useSliderOrientationContext(__scopeSlider);
+  const [thumb, setThumb] = React.useState(null);
+  const composedRefs = useComposedRefs(forwardedRef, setThumb);
+  const value = context.values[index];
+  const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
+  const label = getLabel(index, context.values.length);
+  const sizeIn = sizeProp ?? context.size ?? "$true";
+  const [size, setSize] = React.useState(() => {
+    return getVariableValue(getThumbSize(sizeIn).width);
+  });
+  const thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
+  React.useEffect(() => {
+    if (thumb) {
+      context.thumbs.set(thumb, index);
+      return () => {
         context.thumbs.delete(thumb);
       };
-    }, [thumb, context.thumbs, index]);
-    const positionalStyles = context.orientation === "horizontal" ? {
-      x: (thumbInBoundsOffset - size / 2) * orientation.direction,
-      y: -size / 2,
-      top: "50%",
-      ...(size === 0 && {
-        top: "auto",
-        bottom: "auto"
-      })
-    } : {
-      x: -size / 2,
-      y: size / 2,
-      left: "50%",
-      ...(size === 0 && {
-        left: "auto",
-        right: "auto"
-      })
-    };
-    return /* @__PURE__ */jsx(SliderThumbFrame, {
-      ref: composedRefs,
-      role: "slider",
-      "aria-label": props["aria-label"] || label,
-      "aria-valuemin": context.min,
-      "aria-valuenow": value,
-      "aria-valuemax": context.max,
-      "aria-orientation": context.orientation,
-      "data-orientation": context.orientation,
-      "data-disabled": context.disabled ? "" : void 0,
-      tabIndex: context.disabled ? void 0 : 0,
-      animateOnly: ["transform", "left", "top", "right", "bottom"],
-      ...positionalStyles,
-      [orientation.startEdge]: `${percent}%`,
-      size: sizeIn,
-      circular,
-      ...thumbProps,
-      onLayout: e => {
-        setSize(e.nativeEvent.layout[orientation.sizeProp]);
-      },
-      onFocus: composeEventHandlers(props.onFocus, () => {
-        context.valueIndexToChangeRef.current = index;
-      })
-    });
-  }, {
-    staticConfig: {
-      memo: !0
     }
-  }),
-  SliderComponent = React.forwardRef((props, forwardedRef) => {
-    const {
-        name,
-        min = 0,
-        max = 100,
-        step = 1,
-        orientation = "horizontal",
-        disabled = !1,
-        minStepsBetweenThumbs = 0,
-        defaultValue = [min],
-        value,
-        onValueChange = () => {},
-        size: sizeProp,
-        onSlideEnd,
-        onSlideMove,
-        onSlideStart,
-        ...sliderProps
-      } = props,
-      sliderRef = React.useRef(null),
-      composedRefs = useComposedRefs(sliderRef, forwardedRef),
-      thumbRefs = React.useRef(/* @__PURE__ */new Map()),
-      valueIndexToChangeRef = React.useRef(0),
-      isHorizontal = orientation === "horizontal",
-      [values = [], setValues] = useControllableState({
-        prop: value,
-        defaultProp: defaultValue,
-        transition: !0,
-        onChange: value2 => {
-          updateThumbFocus(valueIndexToChangeRef.current), onValueChange(value2);
-        }
-      });
-    isWeb && React.useEffect(() => {
-      const node = sliderRef.current;
-      if (!node) return;
-      const preventDefault = e => {
-        e.preventDefault();
-      };
-      return node.addEventListener("touchstart", preventDefault), () => {
-        node.removeEventListener("touchstart", preventDefault);
-      };
-    }, []);
-    function updateThumbFocus(focusIndex) {
-      if (isWeb) {
-        for (const [node, index] of thumbRefs.current.entries()) if (index === focusIndex) {
-          node.focus();
-          return;
-        }
-      }
-    }
-    function handleSlideMove(value2, event) {
-      updateValues(value2, valueIndexToChangeRef.current), onSlideMove?.(event, value2);
+  }, [thumb, context.thumbs, index]);
+  const positionalStyles = context.orientation === "horizontal" ? {
+    x: (thumbInBoundsOffset - size / 2) * orientation.direction,
+    y: -size / 2,
+    top: "50%",
+    ...(size === 0 && {
+      top: "auto",
+      bottom: "auto"
+    })
+  } : {
+    x: -size / 2,
+    y: size / 2,
+    left: "50%",
+    ...(size === 0 && {
+      left: "auto",
+      right: "auto"
+    })
+  };
+  return /* @__PURE__ */jsx(SliderThumbFrame, {
+    ref: composedRefs,
+    role: "slider",
+    "aria-label": props["aria-label"] || label,
+    "aria-valuemin": context.min,
+    "aria-valuenow": value,
+    "aria-valuemax": context.max,
+    "aria-orientation": context.orientation,
+    "data-orientation": context.orientation,
+    "data-disabled": context.disabled ? "" : void 0,
+    tabIndex: context.disabled ? void 0 : 0,
+    animateOnly: ["transform", "left", "top", "right", "bottom"],
+    ...positionalStyles,
+    [orientation.startEdge]: `${percent}%`,
+    size: sizeIn,
+    circular,
+    ...thumbProps,
+    onLayout: e => {
+      setSize(e.nativeEvent.layout[orientation.sizeProp]);
+    },
+    onFocus: composeEventHandlers(props.onFocus, () => {
+      context.valueIndexToChangeRef.current = index;
+    })
+  });
+}, {
+  staticConfig: {
+    memo: true
+  }
+});
+const Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
+  const {
+    name,
+    min = 0,
+    max = 100,
+    step = 1,
+    orientation = "horizontal",
+    disabled = false,
+    minStepsBetweenThumbs = 0,
+    defaultValue = [min],
+    value,
+    onValueChange = () => {},
+    size: sizeProp,
+    onSlideEnd,
+    onSlideMove,
+    onSlideStart,
+    ...sliderProps
+  } = props;
+  const sliderRef = React.useRef(null);
+  const composedRefs = useComposedRefs(sliderRef, forwardedRef);
+  const thumbRefs = React.useRef(/* @__PURE__ */new Map());
+  const valueIndexToChangeRef = React.useRef(0);
+  const isHorizontal = orientation === "horizontal";
+  const [values = [], setValues] = useControllableState({
+    prop: value,
+    defaultProp: defaultValue,
+    transition: true,
+    onChange: value2 => {
+      updateThumbFocus(valueIndexToChangeRef.current);
+      onValueChange(value2);
     }
-    function updateValues(value2, atIndex) {
-      const decimalCount = getDecimalCount(step),
-        snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount),
-        nextValue = clamp(snapToStep, [min, max]);
-      setValues((prevValues = []) => {
-        const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
-        return hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step) ? (valueIndexToChangeRef.current = nextValues.indexOf(nextValue), String(nextValues) === String(prevValues) ? prevValues : nextValues) : prevValues;
-      });
+  });
+  if (isWeb) React.useEffect(() => {
+    const node = sliderRef.current;
+    if (!node) return;
+    const preventDefault = e => {
+      e.preventDefault();
+    };
+    node.addEventListener("touchstart", preventDefault);
+    return () => {
+      node.removeEventListener("touchstart", preventDefault);
+    };
+  }, []);
+  function updateThumbFocus(focusIndex) {
+    if (!isWeb) return;
+    for (const [node, index] of thumbRefs.current.entries()) if (index === focusIndex) {
+      node.focus();
+      return;
     }
-    const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
-    return /* @__PURE__ */jsx(SliderProvider, {
-      scope: props.__scopeSlider,
-      disabled,
+  }
+  function handleSlideMove(value2, event) {
+    updateValues(value2, valueIndexToChangeRef.current);
+    onSlideMove?.(event, value2);
+  }
+  function updateValues(value2, atIndex) {
+    const decimalCount = getDecimalCount(step);
+    const nextValue = clamp(roundValue(Math.round((value2 - min) / step) * step + min, decimalCount), [min, max]);
+    setValues((prevValues = []) => {
+      const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+      if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
+        valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+        return String(nextValues) === String(prevValues) ? prevValues : nextValues;
+      }
+      return prevValues;
+    });
+  }
+  const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+  return /* @__PURE__ */jsx(SliderProvider, {
+    scope: props.__scopeSlider,
+    disabled,
+    min,
+    max,
+    valueIndexToChangeRef,
+    thumbs: thumbRefs.current,
+    values,
+    orientation,
+    size: sizeProp,
+    children: /* @__PURE__ */jsx(SliderOriented, {
+      "aria-disabled": disabled,
+      "data-disabled": disabled ? "" : void 0,
+      ...sliderProps,
+      ref: composedRefs,
       min,
       max,
-      valueIndexToChangeRef,
-      thumbs: thumbRefs.current,
-      values,
-      orientation,
-      size: sizeProp,
-      children: /* @__PURE__ */jsx(SliderOriented, {
-        "aria-disabled": disabled,
-        "data-disabled": disabled ? "" : void 0,
-        ...sliderProps,
-        ref: composedRefs,
-        min,
-        max,
-        onSlideEnd,
-        onSlideStart: disabled ? void 0 : (value2, target, event) => {
-          if (target !== "thumb") {
-            const closestIndex = getClosestValueIndex(values, value2);
-            updateValues(value2, closestIndex);
-          }
-          onSlideStart?.(event, value2, target);
-        },
-        onSlideMove: disabled ? void 0 : handleSlideMove,
-        onHomeKeyDown: () => !disabled && updateValues(min, 0),
-        onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
-        onStepKeyDown: ({
-          event,
-          direction: stepDirection
-        }) => {
-          if (!disabled) {
-            const multiplier = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1,
-              atIndex = valueIndexToChangeRef.current,
-              value2 = values[atIndex],
-              stepInDirection = step * multiplier * stepDirection;
-            updateValues(value2 + stepInDirection, atIndex);
-          }
+      onSlideEnd,
+      onSlideStart: disabled ? void 0 : (value2, target, event) => {
+        if (target !== "thumb") updateValues(value2, getClosestValueIndex(values, value2));
+        onSlideStart?.(event, value2, target);
+      },
+      onSlideMove: disabled ? void 0 : handleSlideMove,
+      onHomeKeyDown: () => !disabled && updateValues(min, 0),
+      onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
+      onStepKeyDown: ({
+        event,
+        direction: stepDirection
+      }) => {
+        if (!disabled) {
+          const multiplier = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1;
+          const atIndex = valueIndexToChangeRef.current;
+          const value2 = values[atIndex];
+          updateValues(value2 + step * multiplier * stepDirection, atIndex);
         }
-      })
-    });
-  }),
-  Slider = withStaticProperties(SliderComponent, {
-    Track: SliderTrack,
-    TrackActive: SliderActive,
-    Thumb: SliderThumb
+      }
+    })
   });
+}), {
+  Track: SliderTrack,
+  TrackActive: SliderActive,
+  Thumb: SliderThumb
+});
 Slider.displayName = SLIDER_NAME;
-const Track = SliderTrack,
-  Range = SliderActive,
-  Thumb = SliderThumb;
+const Track = SliderTrack;
+const Range = SliderActive;
+const Thumb = SliderThumb;
 export { Range, Slider, SliderActive, SliderActiveFrame, SliderThumb, SliderThumbFrame, SliderTrack, SliderTrackFrame, Thumb, Track };
 //# sourceMappingURL=Slider.mjs.map