@tamagui/slider 1.89.26 → 1.89.27-1708112217600

package/dist/esm/Slider.native.js

@@ -8,166 +8,267 @@ import { ThemeableStack } from "@tamagui/stacks";
 import { useControllableState } from "@tamagui/use-controllable-state";
 import { useDirection } from "@tamagui/use-direction";
 import * as React from "react";
-import {
-  ARROW_KEYS,
-  BACK_KEYS,
-  PAGE_KEYS,
-  SLIDER_NAME,
-  SliderOrientationProvider,
-  SliderProvider,
-  useSliderContext,
-  useSliderOrientationContext
-} from "./constants";
-import {
-  convertValueToPercentage,
-  getClosestValueIndex,
-  getDecimalCount,
-  getLabel,
-  getNextSortedValues,
-  getThumbInBoundsOffset,
-  hasMinStepsBetweenValues,
-  linearScale,
-  roundValue
-} from "./helpers";
+import { ARROW_KEYS, BACK_KEYS, PAGE_KEYS, SLIDER_NAME, SliderOrientationProvider, SliderProvider, useSliderContext, useSliderOrientationContext } from "./constants";
+import { convertValueToPercentage, getClosestValueIndex, getDecimalCount, getLabel, getNextSortedValues, getThumbInBoundsOffset, hasMinStepsBetweenValues, linearScale, roundValue } from "./helpers";
 import { SliderFrame, SliderImpl } from "./SliderImpl";
-import { jsx } from "react/jsx-runtime";
-const SliderHorizontal = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
+function _array_like_to_array(arr, len) {
+  (len == null || len > arr.length) && (len = arr.length);
+  for (var i = 0, arr2 = new Array(len); i < len; i++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _array_with_holes(arr) {
+  if (Array.isArray(arr))
+    return arr;
+}
+function _array_without_holes(arr) {
+  if (Array.isArray(arr))
+    return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _iterable_to_array(iter) {
+  if (typeof Symbol < "u" && iter[Symbol.iterator] != null || iter["@@iterator"] != null)
+    return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol < "u" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i != null) {
+    var _arr = [], _n = !0, _d = !1, _s, _e;
+    try {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !(i && _arr.length === i)); _n = !0)
+        ;
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        !_n && _i.return != null && _i.return();
+      } finally {
+        if (_d)
+          throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+function _non_iterable_rest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
+function _object_without_properties(source, excluded) {
+  if (source == null)
+    return {};
+  var target = _object_without_properties_loose(source, excluded), key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++)
+      key = sourceSymbolKeys[i], !(excluded.indexOf(key) >= 0) && Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]);
+  }
+  return target;
+}
+function _object_without_properties_loose(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {}, sourceKeys = Object.keys(source), key, i;
+  for (i = 0; i < sourceKeys.length; i++)
+    key = sourceKeys[i], !(excluded.indexOf(key) >= 0) && (target[key] = source[key]);
+  return target;
+}
+function _sliced_to_array(arr, i) {
+  return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+  return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+  if (o) {
+    if (typeof o == "string")
+      return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor && (n = o.constructor.name), n === "Map" || n === "Set")
+      return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+      return _array_like_to_array(o, minLen);
+  }
+}
+var SliderHorizontal = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var getValueFromPointer = function(pointerPosition) {
+    var input = [
+      0,
+      state.size
+    ], output = isDirectionLTR ? [
       min,
+      max
+    ] : [
       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 = createShallowSetState(setState_);
-    function getValueFromPointer(pointerPosition) {
-      const input = [0, state.size];
-      return linearScale(input, isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
-    }
-    const measure = () => {
-      var _a;
-      (_a = sliderRef.current) == null || _a.measure((_x, _y, width, _height, pageX, _pageY) => {
-        setState({
-          size: width,
-          offset: pageX
-        });
-      });
+      min
+    ], value = linearScale(input, output);
+    return value(pointerPosition);
+  }, min = props.min, max = props.max, dir = props.dir, onSlideStart = props.onSlideStart, onSlideMove = props.onSlideMove, onStepKeyDown = props.onStepKeyDown, onSlideEnd = props.onSlideEnd, sliderProps = _object_without_properties(props, [
+    "min",
+    "max",
+    "dir",
+    "onSlideStart",
+    "onSlideMove",
+    "onStepKeyDown",
+    "onSlideEnd"
+  ]), direction = useDirection(dir), isDirectionLTR = direction === "ltr", sliderRef = React.useRef(null), _React_useState = _sliced_to_array(React.useState(function() {
+    return {
+      size: 0,
+      offset: 0
     };
-    return isClient && useOnDebouncedWindowResize(measure), /* @__PURE__ */ jsx(
-      SliderOrientationProvider,
-      {
-        scope: props.__scopeSlider,
-        startEdge: isDirectionLTR ? "left" : "right",
-        endEdge: isDirectionLTR ? "right" : "left",
-        direction: isDirectionLTR ? 1 : -1,
-        sizeProp: "width",
-        size: state.size,
-        children: /* @__PURE__ */ jsx(
-          SliderImpl,
-          {
-            ref: composeRefs(forwardedRef, sliderRef),
-            dir: direction,
-            ...sliderProps,
-            orientation: "horizontal",
-            onLayout: measure,
-            onSlideStart: (event, target) => {
-              const value = getValueFromPointer(event.nativeEvent.locationX);
-              value && (onSlideStart == null || onSlideStart(value, target, event));
-            },
-            onSlideMove: (event) => {
-              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-              value && (onSlideMove == null || onSlideMove(value, event));
-            },
-            onSlideEnd: (event) => {
-              const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-              value && (onSlideEnd == null || onSlideEnd(event, value));
-            },
-            onStepKeyDown: (event) => {
-              const isBackKey = BACK_KEYS[direction].includes(event.key);
-              onStepKeyDown == null || onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-);
-function useOnDebouncedWindowResize(callback, amt = 200) {
-  React.useEffect(() => {
-    let last;
-    const onResize = () => {
+  }), 2), state = _React_useState[0], setState_ = _React_useState[1], setState = createShallowSetState(setState_), measure = function() {
+    var _sliderRef_current;
+    (_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function(_x, _y, width, _height, pageX, _pageY) {
+      setState({
+        size: width,
+        offset: pageX
+      });
+    });
+  };
+  return isClient && useOnDebouncedWindowResize(measure), /* @__PURE__ */ React.createElement(SliderOrientationProvider, {
+    scope: props.__scopeSlider,
+    startEdge: isDirectionLTR ? "left" : "right",
+    endEdge: isDirectionLTR ? "right" : "left",
+    direction: isDirectionLTR ? 1 : -1,
+    sizeProp: "width",
+    size: state.size
+  }, /* @__PURE__ */ React.createElement(SliderImpl, _object_spread_props(_object_spread({
+    ref: composeRefs(forwardedRef, sliderRef),
+    dir: direction
+  }, sliderProps), {
+    orientation: "horizontal",
+    onLayout: measure,
+    onSlideStart: function(event, target) {
+      var value = getValueFromPointer(event.nativeEvent.locationX);
+      value && (onSlideStart == null || onSlideStart(value, target, event));
+    },
+    onSlideMove: function(event) {
+      var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+      value && (onSlideMove == null || onSlideMove(value, event));
+    },
+    onSlideEnd: function(event) {
+      var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+      value && (onSlideEnd == null || onSlideEnd(event, value));
+    },
+    onStepKeyDown: function(event) {
+      var isBackKey = BACK_KEYS[direction].includes(event.key);
+      onStepKeyDown == null || onStepKeyDown({
+        event,
+        direction: isBackKey ? -1 : 1
+      });
+    }
+  })));
+});
+function useOnDebouncedWindowResize(callback) {
+  var amt = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 200;
+  React.useEffect(function() {
+    var last, onResize = function() {
       clearTimeout(last), last = setTimeout(callback, amt);
     };
-    return window.addEventListener("resize", onResize), () => {
+    return window.addEventListener("resize", onResize), function() {
       clearTimeout(last), window.removeEventListener("resize", onResize);
     };
   }, []);
 }
-const SliderVertical = React.forwardRef(
-  (props, forwardedRef) => {
-    const {
-      min,
+var SliderVertical = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var getValueFromPointer = function(pointerPosition) {
+    var input = [
+      0,
+      state.size
+    ], output = [
       max,
-      onSlideStart,
-      onSlideMove,
-      onStepKeyDown,
-      onSlideEnd,
-      ...sliderProps
-    } = props, [state, setState_] = React.useState(() => ({ size: 0, offset: 0 })), setState = createShallowSetState(setState_), sliderRef = React.useRef(null);
-    function getValueFromPointer(pointerPosition) {
-      const input = [0, state.size];
-      return linearScale(input, [max, min])(pointerPosition);
-    }
-    const measure = () => {
-      var _a;
-      (_a = sliderRef.current) == null || _a.measure((_x, _y, _width, height, _pageX, pageY) => {
-        setState({
-          size: height,
-          offset: pageY
-        });
-      });
+      min
+    ], value = linearScale(input, output);
+    return value(pointerPosition);
+  }, min = props.min, max = props.max, onSlideStart = props.onSlideStart, onSlideMove = props.onSlideMove, onStepKeyDown = props.onStepKeyDown, onSlideEnd = props.onSlideEnd, sliderProps = _object_without_properties(props, [
+    "min",
+    "max",
+    "onSlideStart",
+    "onSlideMove",
+    "onStepKeyDown",
+    "onSlideEnd"
+  ]), _React_useState = _sliced_to_array(React.useState(function() {
+    return {
+      size: 0,
+      offset: 0
     };
-    return isClient && useOnDebouncedWindowResize(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 == null || onSlideStart(value, target, event));
-            },
-            onSlideMove: (event) => {
-              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-              value && (onSlideMove == null || onSlideMove(value, event));
-            },
-            onSlideEnd: (event) => {
-              const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-              onSlideEnd == null || onSlideEnd(event, value);
-            },
-            onStepKeyDown: (event) => {
-              const isBackKey = BACK_KEYS.ltr.includes(event.key);
-              onStepKeyDown == null || onStepKeyDown({ event, direction: isBackKey ? -1 : 1 });
-            }
-          }
-        )
-      }
-    );
-  }
-), TRACK_NAME = "SliderTrack", SliderTrackFrame = styled(SliderFrame, {
+  }), 2), state = _React_useState[0], setState_ = _React_useState[1], setState = createShallowSetState(setState_), sliderRef = React.useRef(null), measure = function() {
+    var _sliderRef_current;
+    (_sliderRef_current = sliderRef.current) === null || _sliderRef_current === void 0 || _sliderRef_current.measure(function(_x, _y, _width, height, _pageX, pageY) {
+      setState({
+        size: height,
+        offset: pageY
+      });
+    });
+  };
+  return isClient && useOnDebouncedWindowResize(measure), /* @__PURE__ */ React.createElement(SliderOrientationProvider, {
+    scope: props.__scopeSlider,
+    startEdge: "bottom",
+    endEdge: "top",
+    sizeProp: "height",
+    size: state.size,
+    direction: 1
+  }, /* @__PURE__ */ React.createElement(SliderImpl, _object_spread_props(_object_spread({
+    ref: composeRefs(forwardedRef, sliderRef)
+  }, sliderProps), {
+    orientation: "vertical",
+    onLayout: measure,
+    onSlideStart: function(event, target) {
+      var value = getValueFromPointer(event.nativeEvent.locationY);
+      value && (onSlideStart == null || onSlideStart(value, target, event));
+    },
+    onSlideMove: function(event) {
+      var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+      value && (onSlideMove == null || onSlideMove(value, event));
+    },
+    onSlideEnd: function(event) {
+      var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+      onSlideEnd == null || onSlideEnd(event, value);
+    },
+    onStepKeyDown: function(event) {
+      var isBackKey = BACK_KEYS.ltr.includes(event.key);
+      onStepKeyDown == null || onStepKeyDown({
+        event,
+        direction: isBackKey ? -1 : 1
+      });
+    }
+  })));
+}), TRACK_NAME = "SliderTrack", SliderTrackFrame = styled(SliderFrame, {
   name: "SliderTrack",
   variants: {
     unstyled: {
@@ -184,57 +285,53 @@ const SliderVertical = React.forwardRef(
   defaultVariants: {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
-}), SliderTrack = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeSlider, ...trackProps } = props, context = useSliderContext(TRACK_NAME, __scopeSlider);
-    return /* @__PURE__ */ jsx(
-      SliderTrackFrame,
-      {
-        "data-disabled": context.disabled ? "" : void 0,
-        "data-orientation": context.orientation,
-        orientation: context.orientation,
-        size: context.size,
-        ...trackProps,
-        ref: forwardedRef
-      }
-    );
-  }
-);
+}), SliderTrack = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var __scopeSlider = props.__scopeSlider, trackProps = _object_without_properties(props, [
+    "__scopeSlider"
+  ]), context = useSliderContext(TRACK_NAME, __scopeSlider);
+  return /* @__PURE__ */ React.createElement(SliderTrackFrame, _object_spread_props(_object_spread({
+    "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", SliderTrackActiveFrame = styled(SliderFrame, {
+var RANGE_NAME = "SliderTrackActive", SliderTrackActiveFrame = styled(SliderFrame, {
   name: "SliderTrackActive",
   backgroundColor: "$background",
   position: "absolute"
-}), SliderTrackActive = React.forwardRef(
-  (props, forwardedRef) => {
-    const { __scopeSlider, ...rangeProps } = props, context = useSliderContext(RANGE_NAME, __scopeSlider), orientation = useSliderOrientationContext(RANGE_NAME, __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(
-      SliderTrackActiveFrame,
-      {
-        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
-        }
-      }
-    );
-  }
-);
+}), SliderTrackActive = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var _Math, _Math1, __scopeSlider = props.__scopeSlider, rangeProps = _object_without_properties(props, [
+    "__scopeSlider"
+  ]), context = useSliderContext(RANGE_NAME, __scopeSlider), orientation = useSliderOrientationContext(RANGE_NAME, __scopeSlider), ref = React.useRef(null), composedRefs = useComposedRefs(forwardedRef, ref), valuesCount = context.values.length, percentages = context.values.map(function(value) {
+    return convertValueToPercentage(value, context.min, context.max);
+  }), offsetStart = valuesCount > 1 ? (_Math = Math).min.apply(_Math, _to_consumable_array(percentages)) : 0, offsetEnd = 100 - (_Math1 = Math).max.apply(_Math1, _to_consumable_array(percentages)), _obj;
+  return /* @__PURE__ */ React.createElement(SliderTrackActiveFrame, _object_spread(_object_spread_props(_object_spread({
+    orientation: context.orientation,
+    "data-orientation": context.orientation,
+    "data-disabled": context.disabled ? "" : void 0,
+    size: context.size,
+    animateOnly: [
+      "left",
+      "top",
+      "right",
+      "bottom"
+    ]
+  }, rangeProps), (_obj = {
+    ref: composedRefs
+  }, _define_property(_obj, orientation.startEdge, "".concat(offsetStart, "%")), _define_property(_obj, orientation.endEdge, "".concat(offsetEnd, "%")), _obj)), orientation.sizeProp === "width" ? {
+    height: "100%"
+  } : {
+    left: 0,
+    right: 0
+  }));
+});
 SliderTrackActive.displayName = RANGE_NAME;
-const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
-  const tokens = getTokens(), size = typeof val == "number" ? val : getSize(tokens.size[val], {
+var THUMB_NAME = "SliderThumb", getThumbSize = function(val) {
+  var tokens = getTokens(), size = typeof val == "number" ? val : getSize(tokens.size[val], {
     shift: -1
   });
   return {
@@ -264,173 +361,194 @@ const THUMB_NAME = "SliderThumb", getThumbSize = (val) => {
   defaultVariants: {
     unstyled: process.env.TAMAGUI_HEADLESS === "1"
   }
-}), SliderThumb = React.memo(
-  SliderThumbFrame.styleable(function(props, forwardedRef) {
-    const { __scopeSlider, index, size: sizeProp, ...thumbProps } = props, context = useSliderContext(THUMB_NAME, __scopeSlider), orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider), [thumb, setThumb] = React.useState(null), composedRefs = useComposedRefs(
-      forwardedRef,
-      (node) => setThumb(node)
-    ), 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), () => {
-          context.thumbs.delete(thumb);
-        };
-    }, [thumb, context.thumbs, index]);
-    const positionalStyles = 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"
-      }
-    };
-    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,
-        ...thumbProps,
-        onLayout: (e) => {
-          setSize(e.nativeEvent.layout[orientation.sizeProp]);
-        },
-        onFocus: composeEventHandlers(props.onFocus, () => {
-          context.valueIndexToChangeRef.current = index;
-        })
-      }
-    );
-  })
-), 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);
+}), SliderThumb = /* @__PURE__ */ React.memo(SliderThumbFrame.styleable(function(props, forwardedRef) {
+  var __scopeSlider = props.__scopeSlider, index = props.index, sizeProp = props.size, thumbProps = _object_without_properties(props, [
+    "__scopeSlider",
+    "index",
+    "size"
+  ]), context = useSliderContext(THUMB_NAME, __scopeSlider), orientation = useSliderOrientationContext(THUMB_NAME, __scopeSlider), _React_useState = _sliced_to_array(React.useState(null), 2), thumb = _React_useState[0], setThumb = _React_useState[1], composedRefs = useComposedRefs(forwardedRef, function(node) {
+    return setThumb(node);
+  }), value = context.values[index], percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max), label = getLabel(index, context.values.length), _ref, sizeIn = (_ref = sizeProp ?? context.size) !== null && _ref !== void 0 ? _ref : "$true", _React_useState1 = _sliced_to_array(React.useState(function() {
+    var estimatedSize = getVariableValue(getThumbSize(sizeIn).width);
+    return estimatedSize;
+  }), 2), size = _React_useState1[0], setSize = _React_useState1[1], thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
+  React.useEffect(function() {
+    if (thumb)
+      return context.thumbs.set(thumb, index), function() {
+        context.thumbs.delete(thumb);
       };
-    }, []);
-    function updateThumbFocus(focusIndex) {
-      if (isWeb) {
-        for (const [node, index] of thumbRefs.current.entries())
+  }, [
+    thumb,
+    context.thumbs,
+    index
+  ]);
+  var positionalStyles = context.orientation === "horizontal" ? _object_spread({
+    x: thumbInBoundsOffset - size / 2,
+    y: -size / 2,
+    top: "50%"
+  }, size === 0 && {
+    top: "auto",
+    bottom: "auto"
+  }) : _object_spread({
+    x: -size / 2,
+    y: size / 2,
+    left: "50%"
+  }, size === 0 && {
+    left: "auto",
+    right: "auto"
+  }), _obj;
+  return /* @__PURE__ */ React.createElement(SliderThumbFrame, _object_spread_props(_object_spread(_object_spread_props(_object_spread({
+    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), (_obj = {}, _define_property(_obj, orientation.startEdge, "".concat(percent, "%")), _define_property(_obj, "size", sizeIn), _obj)), thumbProps), {
+    onLayout: function(e) {
+      setSize(e.nativeEvent.layout[orientation.sizeProp]);
+    },
+    /**
+     * There will be no value on initial render while we work out the index so we hide thumbs
+     * without a value, otherwise SSR will render them in the wrong position before they
+     * snap into the correct position during hydration which would be visually jarring for
+     * slower connections.
+     */
+    // style={value === undefined ? { display: 'none' } : props.style}
+    onFocus: composeEventHandlers(props.onFocus, function() {
+      context.valueIndexToChangeRef.current = index;
+    })
+  }));
+})), SliderComponent = /* @__PURE__ */ React.forwardRef(function(props, forwardedRef) {
+  var updateThumbFocus = function(focusIndex) {
+    if (isWeb) {
+      var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+      try {
+        for (var _iterator = thumbRefs.current.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+          var _step_value = _sliced_to_array(_step.value, 2), node = _step_value[0], index = _step_value[1];
           if (index === focusIndex) {
             node.focus();
             return;
           }
+        }
+      } catch (err) {
+        _didIteratorError = !0, _iteratorError = err;
+      } finally {
+        try {
+          !_iteratorNormalCompletion && _iterator.return != null && _iterator.return();
+        } finally {
+          if (_didIteratorError)
+            throw _iteratorError;
+        }
       }
     }
-    function handleSlideMove(value2, event) {
-      updateValues(value2, valueIndexToChangeRef.current), onSlideMove == null || onSlideMove(event, value2);
+  }, handleSlideMove = function(value2, event) {
+    updateValues(value2, valueIndexToChangeRef.current), onSlideMove == null || onSlideMove(event, value2);
+  }, updateValues = function(value2, atIndex) {
+    var decimalCount = getDecimalCount(step), snapToStep = roundValue(Math.round((value2 - min) / step) * step + min, decimalCount), nextValue = clamp(snapToStep, [
+      min,
+      max
+    ]);
+    setValues(function() {
+      var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [], nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+      return hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step) ? (valueIndexToChangeRef.current = nextValues.indexOf(nextValue), String(nextValues) === String(prevValues) ? prevValues : nextValues) : prevValues;
+    });
+  }, name = props.name, _props_min = props.min, min = _props_min === void 0 ? 0 : _props_min, _props_max = props.max, max = _props_max === void 0 ? 100 : _props_max, _props_step = props.step, step = _props_step === void 0 ? 1 : _props_step, _props_orientation = props.orientation, orientation = _props_orientation === void 0 ? "horizontal" : _props_orientation, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? !1 : _props_disabled, _props_minStepsBetweenThumbs = props.minStepsBetweenThumbs, minStepsBetweenThumbs = _props_minStepsBetweenThumbs === void 0 ? 0 : _props_minStepsBetweenThumbs, _props_defaultValue = props.defaultValue, defaultValue = _props_defaultValue === void 0 ? [
+    min
+  ] : _props_defaultValue, value = props.value, _props_onValueChange = props.onValueChange, onValueChange = _props_onValueChange === void 0 ? function() {
+  } : _props_onValueChange, sizeProp = props.size, onSlideEnd = props.onSlideEnd, onSlideMove = props.onSlideMove, onSlideStart = props.onSlideStart, sliderProps = _object_without_properties(props, [
+    "name",
+    "min",
+    "max",
+    "step",
+    "orientation",
+    "disabled",
+    "minStepsBetweenThumbs",
+    "defaultValue",
+    "value",
+    "onValueChange",
+    "size",
+    "onSlideEnd",
+    "onSlideMove",
+    "onSlideStart"
+  ]), sliderRef = React.useRef(null), composedRefs = useComposedRefs(sliderRef, forwardedRef), thumbRefs = React.useRef(/* @__PURE__ */ new Map()), valueIndexToChangeRef = React.useRef(0), isHorizontal = orientation === "horizontal", _useControllableState = _sliced_to_array(useControllableState({
+    prop: value,
+    defaultProp: defaultValue,
+    transition: !0,
+    onChange: function(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;
-      });
+  }), 2), tmp = _useControllableState[0], values = tmp === void 0 ? [] : tmp, setValues = _useControllableState[1];
+  isWeb && React.useEffect(function() {
+    var node = sliderRef.current;
+    if (node) {
+      var preventDefault = function(e) {
+        e.preventDefault();
+      };
+      return node.addEventListener("touchstart", preventDefault), function() {
+        node.removeEventListener("touchstart", preventDefault);
+      };
     }
-    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,
-            onSlideEnd,
-            onSlideStart: disabled ? void 0 : (value2, target, event) => {
-              if (target !== "thumb") {
-                const closestIndex = getClosestValueIndex(values, value2);
-                updateValues(value2, closestIndex);
-              }
-              onSlideStart == null || 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);
-              }
-            }
-          }
-        )
+  }, []);
+  var SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+  return /* @__PURE__ */ React.createElement(SliderProvider, {
+    scope: props.__scopeSlider,
+    disabled,
+    min,
+    max,
+    valueIndexToChangeRef,
+    thumbs: thumbRefs.current,
+    values,
+    orientation,
+    size: sizeProp
+  }, /* @__PURE__ */ React.createElement(SliderOriented, _object_spread_props(_object_spread({
+    "aria-disabled": disabled,
+    "data-disabled": disabled ? "" : void 0
+  }, sliderProps), {
+    ref: composedRefs,
+    min,
+    max,
+    onSlideEnd,
+    onSlideStart: disabled ? void 0 : function(value2, target, event) {
+      if (target !== "thumb") {
+        var closestIndex = getClosestValueIndex(values, value2);
+        updateValues(value2, closestIndex);
       }
-    );
-  }
-), Slider = withStaticProperties(SliderComponent, {
+      onSlideStart == null || onSlideStart(event, value2, target);
+    },
+    onSlideMove: disabled ? void 0 : handleSlideMove,
+    onHomeKeyDown: function() {
+      return !disabled && updateValues(min, 0);
+    },
+    onEndKeyDown: function() {
+      return !disabled && updateValues(max, values.length - 1);
+    },
+    onStepKeyDown: function(param) {
+      var event = param.event, stepDirection = param.direction;
+      if (!disabled) {
+        var isPageKey = PAGE_KEYS.includes(event.key), isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.includes(event.key), multiplier = isSkipKey ? 10 : 1, atIndex = valueIndexToChangeRef.current, value2 = values[atIndex], stepInDirection = step * multiplier * stepDirection;
+        updateValues(value2 + stepInDirection, atIndex);
+      }
+    }
+  })));
+}), Slider = withStaticProperties(SliderComponent, {
   Track: SliderTrack,
   TrackActive: SliderTrackActive,
   Thumb: SliderThumb
 });
 Slider.displayName = SLIDER_NAME;
-const Track = SliderTrack, Range = SliderTrackActive, Thumb = SliderThumb;
+var Track = SliderTrack, Range = SliderTrackActive, Thumb = SliderThumb;
 export {
   Range,
   Slider,