@tamagui/slider 1.0.1-beta.99 → 1.0.1-rc.0

package/dist/cjs/Slider.js

@@ -1,38 +1,10 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -45,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Slider_exports = {};
 __export(Slider_exports, {
@@ -61,6 +36,7 @@ __export(Slider_exports, {
   Track: () => Track
 });
 module.exports = __toCommonJS(Slider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_compose_refs = require("@tamagui/compose-refs");
 var import_core = require("@tamagui/core");
 var import_helpers = require("@tamagui/helpers");
@@ -71,109 +47,115 @@ var React = __toESM(require("react"));
 var import_constants = require("./constants");
 var import_helpers2 = require("./helpers");
 var import_SliderImpl = require("./SliderImpl");
-const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown } = _a, sliderProps = __objRest(_a, ["min", "max", "dir", "onSlideStart", "onSlideMove", "onStepKeyDown"]);
-  const direction = (0, import_use_direction.useDirection)(dir);
-  const isDirectionLTR = direction === "ltr";
-  const sliderRef = React.useRef(null);
-  const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
-  function getValueFromPointer(pointerPosition) {
-    const input = [0, state.size];
-    const output = isDirectionLTR ? [min, max] : [max, min];
-    const value = (0, import_helpers2.linearScale)(input, output);
-    return value(pointerPosition);
-  }
-  return /* @__PURE__ */ React.createElement(import_constants.SliderOrientationProvider, {
-    scope: props.__scopeSlider,
-    startEdge: isDirectionLTR ? "left" : "right",
-    endEdge: isDirectionLTR ? "right" : "left",
-    direction: isDirectionLTR ? 1 : -1,
-    sizeProp: "width",
-    size: state.size
-  }, /* @__PURE__ */ React.createElement(import_SliderImpl.SliderImpl, __spreadProps(__spreadValues({
-    ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
-    dir: direction
-  }, sliderProps), {
-    orientation: "horizontal",
-    onLayout: () => {
-      var _a2;
-      (_a2 = sliderRef.current) == null ? void 0 : _a2.measure((_x, _y, width, _height, pageX, _pageY) => {
-        setState({
-          size: width,
-          offset: pageX
-        });
-      });
-    },
-    onSlideStart: (event, target) => {
-      const value = getValueFromPointer(event.nativeEvent.locationX);
-      if (value) {
-        onSlideStart == null ? void 0 : onSlideStart(value, target);
-      }
-    },
-    onSlideMove: (event) => {
-      const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-      if (value) {
-        onSlideMove == null ? void 0 : onSlideMove(value);
-      }
-    },
-    onSlideEnd: () => {
-    },
-    onStepKeyDown: (event) => {
-      const isBackKey = import_constants.BACK_KEYS[direction].includes(event.key);
-      onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+const SliderHorizontal = React.forwardRef(
+  (props, forwardedRef) => {
+    const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
+    const direction = (0, import_use_direction.useDirection)(dir);
+    const isDirectionLTR = direction === "ltr";
+    const sliderRef = React.useRef(null);
+    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
+    function getValueFromPointer(pointerPosition) {
+      const input = [0, state.size];
+      const output = isDirectionLTR ? [min, max] : [max, min];
+      const value = (0, import_helpers2.linearScale)(input, output);
+      return value(pointerPosition);
     }
-  })));
-});
-const SliderVertical = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { min, max, onSlideStart, onSlideMove, onStepKeyDown } = _a, sliderProps = __objRest(_a, ["min", "max", "onSlideStart", "onSlideMove", "onStepKeyDown"]);
-  const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
-  const sliderRef = React.useRef(null);
-  function getValueFromPointer(pointerPosition) {
-    const input = [0, state.size];
-    const output = [max, min];
-    const value = (0, import_helpers2.linearScale)(input, output);
-    return value(pointerPosition);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants.SliderOrientationProvider, {
+      scope: props.__scopeSlider,
+      startEdge: isDirectionLTR ? "left" : "right",
+      endEdge: isDirectionLTR ? "right" : "left",
+      direction: isDirectionLTR ? 1 : -1,
+      sizeProp: "width",
+      size: state.size,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImpl.SliderImpl, {
+        ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
+        dir: direction,
+        ...sliderProps,
+        orientation: "horizontal",
+        onLayout: () => {
+          var _a;
+          (_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, width, _height, pageX, _pageY) => {
+            setState({
+              size: width,
+              offset: pageX
+            });
+          });
+        },
+        onSlideStart: (event, target) => {
+          const value = getValueFromPointer(event.nativeEvent.locationX);
+          if (value) {
+            onSlideStart == null ? void 0 : onSlideStart(value, target);
+          }
+        },
+        onSlideMove: (event) => {
+          const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+          if (value) {
+            onSlideMove == null ? void 0 : onSlideMove(value);
+          }
+        },
+        onSlideEnd: () => {
+        },
+        onStepKeyDown: (event) => {
+          const isBackKey = import_constants.BACK_KEYS[direction].includes(event.key);
+          onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+        }
+      })
+    });
   }
-  return /* @__PURE__ */ React.createElement(import_constants.SliderOrientationProvider, {
-    scope: props.__scopeSlider,
-    startEdge: "bottom",
-    endEdge: "top",
-    sizeProp: "height",
-    size: state.size,
-    direction: 1
-  }, /* @__PURE__ */ React.createElement(import_SliderImpl.SliderImpl, __spreadProps(__spreadValues({
-    ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef)
-  }, sliderProps), {
-    orientation: "vertical",
-    onLayout: () => {
-      var _a2;
-      (_a2 = sliderRef.current) == null ? void 0 : _a2.measure((_x, _y, _width, height, _pageX, pageY) => {
-        setState({
-          size: height,
-          offset: pageY
-        });
-      });
-    },
-    onSlideStart: (event, target) => {
-      const value = getValueFromPointer(event.nativeEvent.locationY);
-      if (value) {
-        onSlideStart == null ? void 0 : onSlideStart(value, target);
-      }
-    },
-    onSlideMove: (event) => {
-      const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-      if (value) {
-        onSlideMove == null ? void 0 : onSlideMove(value);
-      }
-    },
-    onSlideEnd: () => {
-    },
-    onStepKeyDown: (event) => {
-      const isBackKey = import_constants.BACK_KEYS.ltr.includes(event.key);
-      onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+);
+const SliderVertical = React.forwardRef(
+  (props, forwardedRef) => {
+    const { min, max, onSlideStart, onSlideMove, onStepKeyDown, ...sliderProps } = props;
+    const [state, setState] = React.useState(() => ({ size: 0, offset: 0 }));
+    const sliderRef = React.useRef(null);
+    function getValueFromPointer(pointerPosition) {
+      const input = [0, state.size];
+      const output = [max, min];
+      const value = (0, import_helpers2.linearScale)(input, output);
+      return value(pointerPosition);
     }
-  })));
-});
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants.SliderOrientationProvider, {
+      scope: props.__scopeSlider,
+      startEdge: "bottom",
+      endEdge: "top",
+      sizeProp: "height",
+      size: state.size,
+      direction: 1,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SliderImpl.SliderImpl, {
+        ref: (0, import_compose_refs.composeRefs)(forwardedRef, sliderRef),
+        ...sliderProps,
+        orientation: "vertical",
+        onLayout: ({ nativeEvent: { layout } }) => {
+          var _a;
+          (_a = sliderRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height, _pageX, pageY) => {
+            setState({
+              size: height,
+              offset: pageY
+            });
+          });
+        },
+        onSlideStart: (event, target) => {
+          const value = getValueFromPointer(event.nativeEvent.locationY);
+          if (value) {
+            onSlideStart == null ? void 0 : onSlideStart(value, target);
+          }
+        },
+        onSlideMove: (event) => {
+          const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+          if (value) {
+            onSlideMove == null ? void 0 : onSlideMove(value);
+          }
+        },
+        onSlideEnd: () => {
+        },
+        onStepKeyDown: (event) => {
+          const isBackKey = import_constants.BACK_KEYS.ltr.includes(event.key);
+          onStepKeyDown == null ? void 0 : onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
+        }
+      })
+    });
+  }
+);
 const TRACK_NAME = "SliderTrack";
 const SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
   name: "SliderTrack",
@@ -184,18 +166,20 @@ const SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame,
   borderRadius: 1e5,
   overflow: "hidden"
 });
-const SliderTrack = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSlider } = _a, trackProps = __objRest(_a, ["__scopeSlider"]);
-  const context = (0, import_constants.useSliderContext)(TRACK_NAME, __scopeSlider);
-  return /* @__PURE__ */ React.createElement(SliderTrackFrame, __spreadProps(__spreadValues({
-    "data-disabled": context.disabled ? "" : void 0,
-    "data-orientation": context.orientation,
-    orientation: context.orientation,
-    size: context.size
-  }, trackProps), {
-    ref: forwardedRef
-  }));
-});
+const SliderTrack = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...trackProps } = props;
+    const context = (0, import_constants.useSliderContext)(TRACK_NAME, __scopeSlider);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderTrackFrame, {
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-orientation": context.orientation,
+      orientation: context.orientation,
+      size: context.size,
+      ...trackProps,
+      ref: forwardedRef
+    });
+  }
+);
 SliderTrack.displayName = TRACK_NAME;
 const RANGE_NAME = "SliderTrackActive";
 const SliderTrackActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderFrame, {
@@ -203,33 +187,39 @@ const SliderTrackActiveFrame = (0, import_core.styled)(import_SliderImpl.SliderF
   backgroundColor: "$background",
   position: "absolute"
 });
-const SliderTrackActive = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSlider } = _a, rangeProps = __objRest(_a, ["__scopeSlider"]);
-  const context = (0, import_constants.useSliderContext)(RANGE_NAME, __scopeSlider);
-  const orientation = (0, import_constants.useSliderOrientationContext)(RANGE_NAME, __scopeSlider);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  const valuesCount = context.values.length;
-  const percentages = context.values.map((value) => (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max));
-  const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
-  const offsetEnd = 100 - Math.max(...percentages);
-  return /* @__PURE__ */ React.createElement(SliderTrackActiveFrame, __spreadValues(__spreadValues(__spreadProps(__spreadValues({
-    orientation: context.orientation,
-    "data-orientation": context.orientation,
-    "data-disabled": context.disabled ? "" : void 0,
-    size: context.size
-  }, rangeProps), {
-    ref: composedRefs
-  }), {
-    [orientation.startEdge]: offsetStart + "%",
-    [orientation.endEdge]: offsetEnd + "%"
-  }), orientation.sizeProp === "width" ? {
-    height: "100%"
-  } : {
-    left: 0,
-    right: 0
-  }));
-});
+const SliderTrackActive = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, ...rangeProps } = props;
+    const context = (0, import_constants.useSliderContext)(RANGE_NAME, __scopeSlider);
+    const orientation = (0, import_constants.useSliderOrientationContext)(RANGE_NAME, __scopeSlider);
+    const ref = React.useRef(null);
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+    const valuesCount = context.values.length;
+    const percentages = context.values.map(
+      (value) => (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max)
+    );
+    const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+    const offsetEnd = 100 - Math.max(...percentages);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderTrackActiveFrame, {
+      orientation: context.orientation,
+      "data-orientation": context.orientation,
+      "data-disabled": context.disabled ? "" : void 0,
+      size: context.size,
+      ...rangeProps,
+      ref: composedRefs,
+      ...{
+        [orientation.startEdge]: offsetStart + "%",
+        [orientation.endEdge]: offsetEnd + "%"
+      },
+      ...orientation.sizeProp === "width" ? {
+        height: "100%"
+      } : {
+        left: 0,
+        right: 0
+      }
+    });
+  }
+);
 SliderTrackActive.displayName = RANGE_NAME;
 const THUMB_NAME = "SliderThumb";
 const getThumbSize = (val) => {
@@ -256,186 +246,185 @@ const SliderThumbFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
     }
   }
 });
-const SliderThumb = React.forwardRef((props, forwardedRef) => {
-  const _a = props, { __scopeSlider, index, size: sizeProp } = _a, thumbProps = __objRest(_a, ["__scopeSlider", "index", "size"]);
-  const context = (0, import_constants.useSliderContext)(THUMB_NAME, __scopeSlider);
-  const orientation = (0, import_constants.useSliderOrientationContext)(THUMB_NAME, __scopeSlider);
-  const [thumb, setThumb] = React.useState(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
-  const value = context.values[index];
-  const percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
-  const label = (0, import_helpers2.getLabel)(index, context.values.length);
-  const [size, setSize] = React.useState(() => {
-    const estimatedSize = (0, import_core.getVariableValue)(getThumbSize(sizeProp).width);
-    return estimatedSize;
-  });
-  const thumbInBoundsOffset = size ? (0, import_helpers2.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
-  React.useEffect(() => {
-    if (thumb) {
-      context.thumbs.add(thumb);
-      return () => {
-        context.thumbs.delete(thumb);
-      };
-    }
-  }, [thumb, context.thumbs]);
-  return /* @__PURE__ */ React.createElement(SliderThumbFrame, __spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({
-    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
-  }, thumbProps), context.orientation === "horizontal" ? __spreadValues({
-    x: thumbInBoundsOffset - size / 2,
-    y: -size / 2,
-    top: "50%"
-  }, size === 0 && {
-    top: "auto",
-    bottom: "auto"
-  }) : __spreadValues({
-    x: -size / 2,
-    y: size / 2,
-    left: "50%"
-  }, size === 0 && {
-    left: "auto",
-    right: "auto"
-  })), {
-    size: sizeProp ?? context.size ?? "$4",
-    onLayout: (e) => {
-      setSize(e.nativeEvent.layout[orientation.sizeProp]);
-    }
-  }), {
-    [orientation.startEdge]: `${percent}%`
-  }), {
-    onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, () => {
-      context.valueIndexToChangeRef.current = index;
-    })
-  }));
-});
-SliderThumb.displayName = THUMB_NAME;
-const Slider = (0, import_core.withStaticProperties)(React.forwardRef((props, forwardedRef) => {
-  const _a = props, {
-    name,
-    min = 0,
-    max = 100,
-    step = 1,
-    orientation = "horizontal",
-    disabled = false,
-    minStepsBetweenThumbs = 0,
-    defaultValue = [min],
-    value,
-    onValueChange = () => {
-    },
-    size: sizeProp
-  } = _a, sliderProps = __objRest(_a, [
-    "name",
-    "min",
-    "max",
-    "step",
-    "orientation",
-    "disabled",
-    "minStepsBetweenThumbs",
-    "defaultValue",
-    "value",
-    "onValueChange",
-    "size"
-  ]);
-  const sliderRef = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
-  const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
-  const valueIndexToChangeRef = React.useRef(0);
-  const isHorizontal = orientation === "horizontal";
-  const [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
-    prop: value,
-    defaultProp: defaultValue,
-    onChange: (value2) => {
-      var _a2;
-      if (import_core.isWeb) {
-        const thumbs = [...thumbRefs.current];
-        (_a2 = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a2.focus();
-      }
-      onValueChange(value2);
-    }
-  });
-  if (import_core.isWeb) {
+const SliderThumb = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props;
+    const context = (0, import_constants.useSliderContext)(THUMB_NAME, __scopeSlider);
+    const orientation = (0, import_constants.useSliderOrientationContext)(THUMB_NAME, __scopeSlider);
+    const [thumb, setThumb] = React.useState(null);
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, (node) => setThumb(node));
+    const value = context.values[index];
+    const percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
+    const label = (0, import_helpers2.getLabel)(index, context.values.length);
+    const sizeIn = sizeProp ?? context.size ?? "$4";
+    const [size, setSize] = React.useState(() => {
+      const estimatedSize = (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
+      return estimatedSize;
+    });
+    const thumbInBoundsOffset = size ? (0, import_helpers2.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
     React.useEffect(() => {
-      const node = sliderRef.current;
-      if (!node)
-        return;
-      const preventDefault = (e) => {
-        e.preventDefault();
-      };
-      node.addEventListener("touchstart", preventDefault);
-      return () => {
-        node.removeEventListener("touchstart", preventDefault);
-      };
-    }, []);
-  }
-  function handleSlideMove(value2) {
-    updateValues(value2, valueIndexToChangeRef.current);
-  }
-  function updateValues(value2, atIndex) {
-    const decimalCount = (0, import_helpers2.getDecimalCount)(step);
-    const snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
-    const nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
-    setValues((prevValues = []) => {
-      const nextValues = (0, import_helpers2.getNextSortedValues)(prevValues, nextValue, atIndex);
-      if ((0, import_helpers2.hasMinStepsBetweenValues)(nextValues, minStepsBetweenThumbs * step)) {
-        valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
-        return String(nextValues) === String(prevValues) ? prevValues : nextValues;
-      } else {
-        return prevValues;
+      if (thumb) {
+        context.thumbs.add(thumb);
+        return () => {
+          context.thumbs.delete(thumb);
+        };
       }
+    }, [thumb, context.thumbs]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.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,
+      ...thumbProps,
+      ...context.orientation === "horizontal" ? {
+        x: thumbInBoundsOffset - size / 2,
+        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"
+        }
+      },
+      size: sizeIn,
+      onLayout: (e) => {
+        setSize(e.nativeEvent.layout[orientation.sizeProp]);
+      },
+      ...{
+        [orientation.startEdge]: `${percent}%`
+      },
+      onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, () => {
+        context.valueIndexToChangeRef.current = index;
+      })
     });
   }
-  const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
-  return /* @__PURE__ */ React.createElement(import_constants.SliderProvider, {
-    scope: props.__scopeSlider,
-    disabled,
-    min,
-    max,
-    valueIndexToChangeRef,
-    thumbs: thumbRefs.current,
-    values,
-    orientation,
-    size: sizeProp
-  }, /* @__PURE__ */ React.createElement(SliderOriented, __spreadProps(__spreadValues({
-    "aria-disabled": disabled,
-    "data-disabled": disabled ? "" : void 0
-  }, sliderProps), {
-    ref: composedRefs,
-    min,
-    max,
-    onSlideStart: disabled ? void 0 : (value2, target) => {
-      if (target !== "thumb") {
-        const closestIndex = (0, import_helpers2.getClosestValueIndex)(values, value2);
-        updateValues(value2, closestIndex);
-      }
-    },
-    onSlideMove: disabled ? void 0 : handleSlideMove,
-    onHomeKeyDown: () => !disabled && updateValues(min, 0),
-    onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
-    onStepKeyDown: ({ event, direction: stepDirection }) => {
-      if (!disabled) {
-        const isPageKey = import_constants.PAGE_KEYS.includes(event.key);
-        const isSkipKey = isPageKey || event.shiftKey && import_constants.ARROW_KEYS.includes(event.key);
-        const multiplier = isSkipKey ? 10 : 1;
-        const atIndex = valueIndexToChangeRef.current;
-        const value2 = values[atIndex];
-        const stepInDirection = step * multiplier * stepDirection;
-        updateValues(value2 + stepInDirection, atIndex);
+);
+SliderThumb.displayName = THUMB_NAME;
+const Slider = (0, import_core.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,
+      ...sliderProps
+    } = props;
+    const sliderRef = React.useRef(null);
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
+    const thumbRefs = React.useRef(/* @__PURE__ */ new Set());
+    const valueIndexToChangeRef = React.useRef(0);
+    const isHorizontal = orientation === "horizontal";
+    const [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
+      prop: value,
+      defaultProp: defaultValue,
+      onChange: (value2) => {
+        var _a;
+        if (import_core.isWeb) {
+          const thumbs = [...thumbRefs.current];
+          (_a = thumbs[valueIndexToChangeRef.current]) == null ? void 0 : _a.focus();
+        }
+        onValueChange(value2);
       }
+    });
+    if (import_core.isWeb) {
+      React.useEffect(() => {
+        const node = sliderRef.current;
+        if (!node)
+          return;
+        const preventDefault = (e) => {
+          e.preventDefault();
+        };
+        node.addEventListener("touchstart", preventDefault);
+        return () => {
+          node.removeEventListener("touchstart", preventDefault);
+        };
+      }, []);
     }
-  })));
-}), {
-  Track: SliderTrack,
-  TrackActive: SliderTrackActive,
-  Thumb: SliderThumb
-});
+    function handleSlideMove(value2) {
+      updateValues(value2, valueIndexToChangeRef.current);
+    }
+    function updateValues(value2, atIndex) {
+      const decimalCount = (0, import_helpers2.getDecimalCount)(step);
+      const snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
+      const nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
+      setValues((prevValues = []) => {
+        const nextValues = (0, import_helpers2.getNextSortedValues)(prevValues, nextValue, atIndex);
+        if ((0, import_helpers2.hasMinStepsBetweenValues)(nextValues, minStepsBetweenThumbs * step)) {
+          valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+          return String(nextValues) === String(prevValues) ? prevValues : nextValues;
+        } else {
+          return prevValues;
+        }
+      });
+    }
+    const SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants.SliderProvider, {
+      scope: props.__scopeSlider,
+      disabled,
+      min,
+      max,
+      valueIndexToChangeRef,
+      thumbs: thumbRefs.current,
+      values,
+      orientation,
+      size: sizeProp,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderOriented, {
+        "aria-disabled": disabled,
+        "data-disabled": disabled ? "" : void 0,
+        ...sliderProps,
+        ref: composedRefs,
+        min,
+        max,
+        onSlideStart: disabled ? void 0 : (value2, target) => {
+          if (target !== "thumb") {
+            const closestIndex = (0, import_helpers2.getClosestValueIndex)(values, value2);
+            updateValues(value2, closestIndex);
+          }
+        },
+        onSlideMove: disabled ? void 0 : handleSlideMove,
+        onHomeKeyDown: () => !disabled && updateValues(min, 0),
+        onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
+        onStepKeyDown: ({ event, direction: stepDirection }) => {
+          if (!disabled) {
+            const isPageKey = import_constants.PAGE_KEYS.includes(event.key);
+            const isSkipKey = isPageKey || event.shiftKey && import_constants.ARROW_KEYS.includes(event.key);
+            const multiplier = isSkipKey ? 10 : 1;
+            const atIndex = valueIndexToChangeRef.current;
+            const value2 = values[atIndex];
+            const stepInDirection = step * multiplier * stepDirection;
+            updateValues(value2 + stepInDirection, atIndex);
+          }
+        }
+      })
+    });
+  }),
+  {
+    Track: SliderTrack,
+    TrackActive: SliderTrackActive,
+    Thumb: SliderThumb
+  }
+);
 Slider.displayName = import_constants.SLIDER_NAME;
 const Track = SliderTrack;
 const Range = SliderTrackActive;