@tamagui/slider 2.7.7 → 3.0.0-beta.1093.1

package/dist/esm/Slider.native.js

@@ -1,490 +1,416 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { composeRefs, useComposedRefs } from "@tamagui/compose-refs";
 import { isIos, isWeb } from "@tamagui/constants";
-import { getTokens, getVariableValue, styled, useConfiguration, useCreateShallowSetState } from "@tamagui/core";
-import { getSize } from "@tamagui/get-token";
+import { createRefComponent, createStyledHOC, getVariableValue, resolveSize, styled, useConfiguration, useCreateShallowSetState } from "@tamagui/core";
 import { clamp, composeEventHandlers, withStaticProperties } from "@tamagui/helpers";
-import { ThemeableStack } from "@tamagui/stacks";
+import { YStack } 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.native.js";
 import { convertValueToPercentage, getClosestValueIndex, getDecimalCount, getLabel, getNextSortedValues, getThumbInBoundsOffset, hasMinStepsBetweenValues, linearScale, roundValue } from "./helpers.native.js";
 import { SliderFrame, SliderImpl } from "./SliderImpl.native.js";
-var SliderHorizontal = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    min,
-    max,
-    dir,
-    onSlideStart,
-    onSlideMove,
-    onStepKeyDown,
-    onSlideEnd,
-    ...sliderProps
-  } = props;
-  var direction = useDirection(dir);
-  var isDirectionLTR = direction === "ltr";
-  var sliderRef = React.useRef(null);
-  var [state, setState_] = React.useState(function () {
-    return {
-      size: 0,
-      offset: 0
-    };
-  });
-  var setState = useCreateShallowSetState(setState_);
-  function getValueFromPointer(pointerPosition) {
-    return linearScale([0, state.size], isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
-  }
-  var 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 /* @__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: function (event, target) {
-        var value = getValueFromPointer(event.nativeEvent.locationX);
-        if (value) onSlideStart === null || onSlideStart === void 0 || onSlideStart(value, target, event);
-      },
-      onSlideMove: function (event) {
-        var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        if (value) onSlideMove === null || onSlideMove === void 0 || onSlideMove(value, event);
-      },
-      onSlideEnd: function (event) {
-        var value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        if (value) onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(event, value);
-      },
-      onStepKeyDown: function (event) {
-        var isBackKey = BACK_KEYS[direction].includes(event.key);
-        onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+
+var getTrackPosition = function(event, offset, orientation) {
+	var { locationX, locationY, pageX, pageY } = event.nativeEvent;
+	if (isWeb) return orientation === "horizontal" ? locationX : locationY;
+	return (orientation === "horizontal" ? pageX : pageY) - offset;
+};
+var SliderHorizontal = createRefComponent(function(props, forwardedRef) {
+	var { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	var direction = useDirection(dir);
+	var isDirectionLTR = direction === "ltr";
+	var sliderRef = React.useRef(null);
+	var [state, setState_] = React.useState(function() {
+		return {
+			size: 0,
+			offset: 0
+		};
+	});
+	var setState = useCreateShallowSetState(setState_);
+	function getValueFromPointer(pointerPosition) {
+		return linearScale([0, state.size], isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
+	}
+	var 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 /* @__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: function(event, target) {
+				var value = getValueFromPointer(event.nativeEvent.locationX);
+				if (value) onSlideStart === null || onSlideStart === void 0 || onSlideStart(value, target, event);
+			},
+			onSlideMove: function(event) {
+				var value = getValueFromPointer(getTrackPosition(event, state.offset, "horizontal"));
+				if (value) onSlideMove === null || onSlideMove === void 0 || onSlideMove(value, event);
+			},
+			onSlideEnd: function(event) {
+				var value = getValueFromPointer(getTrackPosition(event, state.offset, "horizontal"));
+				if (value) onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(event, value);
+			},
+			onStepKeyDown: function(event) {
+				var isBackKey = BACK_KEYS[direction].includes(event.key);
+				onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
 });
-var SliderVertical = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    min,
-    max,
-    onSlideStart,
-    onSlideMove,
-    onStepKeyDown,
-    onSlideEnd,
-    ...sliderProps
-  } = props;
-  var [state, setState_] = React.useState(function () {
-    return {
-      size: 0,
-      offset: 0
-    };
-  });
-  var setState = useCreateShallowSetState(setState_);
-  var sliderRef = React.useRef(null);
-  var configuration = useConfiguration();
-  var insets = isIos && configuration.insets ? configuration.insets : {
-    top: 0,
-    bottom: 0
-  };
-  function getValueFromPointer(pointerPosition) {
-    return linearScale([0, state.size], [max, min])(pointerPosition);
-  }
-  var 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 + (isIos ? insets.top : 0)
-      });
-    });
-  };
-  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: function (event, target) {
-        var value = getValueFromPointer(event.nativeEvent.locationY);
-        if (value) onSlideStart === null || onSlideStart === void 0 || onSlideStart(value, target, event);
-      },
-      onSlideMove: function (event) {
-        var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        if (value) onSlideMove === null || onSlideMove === void 0 || onSlideMove(value, event);
-      },
-      onSlideEnd: function (event) {
-        var value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(event, value);
-      },
-      onStepKeyDown: function (event) {
-        var isBackKey = BACK_KEYS.ltr.includes(event.key);
-        onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+var SliderVertical = createRefComponent(function(props, forwardedRef) {
+	var { min, max, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	var [state, setState_] = React.useState(function() {
+		return {
+			size: 0,
+			offset: 0
+		};
+	});
+	var setState = useCreateShallowSetState(setState_);
+	var sliderRef = React.useRef(null);
+	var configuration = useConfiguration();
+	var insets = isIos && configuration.insets ? configuration.insets : {
+		top: 0,
+		bottom: 0
+	};
+	function getValueFromPointer(pointerPosition) {
+		return linearScale([0, state.size], [max, min])(pointerPosition);
+	}
+	var 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 + (isIos ? insets.top : 0)
+			});
+		});
+	};
+	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: function(event, target) {
+				var value = getValueFromPointer(event.nativeEvent.locationY);
+				if (value) onSlideStart === null || onSlideStart === void 0 || onSlideStart(value, target, event);
+			},
+			onSlideMove: function(event) {
+				var value = getValueFromPointer(getTrackPosition(event, state.offset, "vertical"));
+				if (value) onSlideMove === null || onSlideMove === void 0 || onSlideMove(value, event);
+			},
+			onSlideEnd: function(event) {
+				var value = getValueFromPointer(getTrackPosition(event, state.offset, "vertical"));
+				onSlideEnd === null || onSlideEnd === void 0 || onSlideEnd(event, value);
+			},
+			onStepKeyDown: function(event) {
+				var isBackKey = BACK_KEYS.ltr.includes(event.key);
+				onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
 });
 var 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"
-  }
+	displayName: "Slider",
+	height: "100%",
+	width: "100%",
+	position: "relative",
+	overflow: "hidden"
 });
-var SliderTrack = /* @__PURE__ */React.forwardRef(function SliderTrack2(props, forwardedRef) {
-  var {
-    __scopeSlider,
-    ...trackProps
-  } = props;
-  var 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
-  });
+var SliderTrack = createStyledHOC(SliderTrackFrame, function SliderTrack2(props, forwardedRef) {
+	var { __scopeSlider, ...trackProps } = props;
+	var context = useSliderContext(__scopeSlider);
+	var _context_size;
+	return /* @__PURE__ */ jsx(SliderTrackFrame, {
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-orientation": context.orientation,
+		orientation: context.orientation,
+		size: (_context_size = context.size) !== null && _context_size !== void 0 ? _context_size : void 0,
+		...trackProps,
+		ref: forwardedRef
+	});
 });
 var SliderActiveFrame = styled(SliderFrame, {
-  name: "SliderActive",
-  position: "absolute",
-  pointerEvents: "box-none",
-  variants: {
-    unstyled: {
-      false: {
-        backgroundColor: "$background",
-        borderRadius: 1e5
-      }
-    }
-  },
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === "1"
-  }
+	displayName: "SliderActive",
+	position: "absolute",
+	pointerEvents: "box-none"
 });
-var SliderActive = /* @__PURE__ */React.forwardRef(function SliderActive2(props, forwardedRef) {
-  var {
-    __scopeSlider,
-    ...rangeProps
-  } = props;
-  var context = useSliderContext(__scopeSlider);
-  var orientation = useSliderOrientationContext(__scopeSlider);
-  var composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
-  var valuesCount = context.values.length;
-  var percentages = context.values.map(function (value) {
-    return convertValueToPercentage(value, context.min, context.max);
-  });
-  var offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
-  var 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
-    })
-  });
+var SliderActive = createStyledHOC(SliderActiveFrame, function SliderActive2(props, forwardedRef) {
+	var { __scopeSlider, ...rangeProps } = props;
+	var context = useSliderContext(__scopeSlider);
+	var orientation = useSliderOrientationContext(__scopeSlider);
+	var composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
+	var valuesCount = context.values.length;
+	var percentages = context.values.map(function(value) {
+		return convertValueToPercentage(value, context.min, context.max);
+	});
+	var offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+	var offsetEnd = 100 - Math.max(...percentages);
+	var _context_size;
+	return /* @__PURE__ */ jsx(SliderActiveFrame, {
+		orientation: context.orientation,
+		"data-orientation": context.orientation,
+		"data-disabled": context.disabled ? "" : void 0,
+		size: (_context_size = context.size) !== null && _context_size !== void 0 ? _context_size : void 0,
+		...rangeProps,
+		ref: composedRefs,
+		[orientation.startEdge]: `${offsetStart}%`,
+		[orientation.endEdge]: `${offsetEnd}%`,
+		...orientation.sizeProp === "width" ? { height: "100%" } : {
+			left: 0,
+			right: 0
+		}
+	});
 });
-var getThumbSize = function (val) {
-  var tokens = getTokens();
-  var size = typeof val === "number" ? val : getSize(tokens.size[val], {
-    shift: -1
-  });
-  return {
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size
-  };
+var thumbSize = function(val, env) {
+	if (typeof val === "number") return val;
+	var { text } = resolveSize(val, env);
+	var _text_lineHeight;
+	return getVariableValue((_text_lineHeight = text.lineHeight) !== null && _text_lineHeight !== void 0 ? _text_lineHeight : text.fontSize);
 };
-var 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"
-  }
-});
-var SliderThumb = SliderThumbFrame.styleable(function SliderThumb2(props, forwardedRef) {
-  var {
-    __scopeSlider,
-    index = 0,
-    circular,
-    size: sizeProp,
-    ...thumbProps
-  } = props;
-  var context = useSliderContext(__scopeSlider);
-  var orientation = useSliderOrientationContext(__scopeSlider);
-  var [thumb, setThumb] = React.useState(null);
-  var composedRefs = useComposedRefs(forwardedRef, setThumb);
-  var value = context.values[index];
-  var percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
-  var label = getLabel(index, context.values.length);
-  var _ref;
-  var sizeIn = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size) !== null && _ref !== void 0 ? _ref : "$true";
-  var [size, setSize] = React.useState(function () {
-    return getVariableValue(getThumbSize(sizeIn).width);
-  });
-  var thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
-  React.useEffect(function () {
-    if (thumb) {
-      context.thumbs.set(thumb, index);
-      return function () {
-        context.thumbs.delete(thumb);
-      };
-    }
-  }, [thumb, context.thumbs, index]);
-  var 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: function (e) {
-      setSize(e.nativeEvent.layout[orientation.sizeProp]);
-    },
-    onFocus: composeEventHandlers(props.onFocus, function () {
-      context.valueIndexToChangeRef.current = index;
-    })
-  });
-}, {
-  staticConfig: {
-    memo: true
-  }
+var SliderThumbFrame = styled(YStack, {
+	displayName: "SliderThumb",
+	position: "absolute",
+	variants: {
+		size: styled.dynamic(function(val, env) {
+			var size = thumbSize(val, env);
+			return {
+				width: size,
+				height: size,
+				minWidth: size,
+				minHeight: size
+			};
+		}),
+		circular: { true: {
+			borderRadius: 1e5,
+			padding: 0
+		} },
+		elevate: { true: {
+			shadowColor: "shadow-color",
+			shadowRadius: 4,
+			shadowOffset: {
+				width: 0,
+				height: 2
+			}
+		} }
+	}
 });
-var Slider = withStaticProperties(/* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    name,
-    min = 0,
-    max = 100,
-    step = 1,
-    orientation = "horizontal",
-    disabled = false,
-    minStepsBetweenThumbs = 0,
-    defaultValue = [min],
-    value,
-    onValueChange = function () {},
-    size: sizeProp,
-    onSlideEnd,
-    onSlideMove,
-    onSlideStart,
-    ...sliderProps
-  } = props;
-  var sliderRef = React.useRef(null);
-  var composedRefs = useComposedRefs(sliderRef, forwardedRef);
-  var thumbRefs = React.useRef(/* @__PURE__ */new Map());
-  var valueIndexToChangeRef = React.useRef(0);
-  var isHorizontal = orientation === "horizontal";
-  var [values = [], setValues] = useControllableState({
-    prop: value,
-    defaultProp: defaultValue,
-    transition: true,
-    onChange: function (value2) {
-      updateThumbFocus(valueIndexToChangeRef.current);
-      onValueChange(value2);
-    }
-  });
-  if (isWeb) React.useEffect(function () {
-    var node = sliderRef.current;
-    if (!node) return;
-    var preventDefault = function (e) {
-      e.preventDefault();
-    };
-    node.addEventListener("touchstart", preventDefault);
-    return function () {
-      node.removeEventListener("touchstart", preventDefault);
-    };
-  }, []);
-  function updateThumbFocus(focusIndex) {
-    if (!isWeb) return;
-    var _iteratorNormalCompletion = true,
-      _didIteratorError = false,
-      _iteratorError = void 0;
-    try {
-      for (var _iterator = thumbRefs.current.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var [node, index] = _step.value;
-        if (index === focusIndex) {
-          node.focus();
-          return;
-        }
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
-      try {
-        if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
-      } finally {
-        if (_didIteratorError) throw _iteratorError;
-      }
-    }
-  }
-  function handleSlideMove(value2, event) {
-    updateValues(value2, valueIndexToChangeRef.current);
-    onSlideMove === null || onSlideMove === void 0 || onSlideMove(event, value2);
-  }
-  function updateValues(value2, atIndex) {
-    var decimalCount = getDecimalCount(step);
-    var nextValue = clamp(roundValue(Math.round((value2 - min) / step) * step + min, decimalCount), [min, max]);
-    setValues(function () {
-      var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-      var nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
-      if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
-        valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
-        return String(nextValues) === String(prevValues) ? prevValues : nextValues;
-      }
-      return prevValues;
-    });
-  }
-  var 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 : function (value2, target, event) {
-        if (target !== "thumb") updateValues(value2, getClosestValueIndex(values, value2));
-        onSlideStart === null || onSlideStart === void 0 || 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,
-          direction: stepDirection
-        } = param;
-        if (!disabled) {
-          var multiplier = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1;
-          var atIndex = valueIndexToChangeRef.current;
-          var value2 = values[atIndex];
-          updateValues(value2 + step * multiplier * stepDirection, atIndex);
-        }
-      }
-    })
-  });
+var SliderThumb = createStyledHOC(SliderThumbFrame, function SliderThumb2(props, forwardedRef) {
+	var { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props;
+	var context = useSliderContext(__scopeSlider);
+	var orientation = useSliderOrientationContext(__scopeSlider);
+	var [thumb, setThumb] = React.useState(null);
+	var composedRefs = useComposedRefs(forwardedRef, setThumb);
+	var value = context.values[index];
+	var percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
+	var label = getLabel(index, context.values.length);
+	var _ref;
+	var sizeIn = (_ref = sizeProp !== null && sizeProp !== void 0 ? sizeProp : context.size) !== null && _ref !== void 0 ? _ref : true;
+	var [size, setSize] = React.useState(function() {
+		return thumbSize(sizeIn);
+	});
+	var thumbInBoundsOffset = size ? getThumbInBoundsOffset(size, percent, orientation.direction) : 0;
+	React.useEffect(function() {
+		if (thumb) {
+			context.thumbs.set(thumb, index);
+			return function() {
+				context.thumbs.delete(thumb);
+			};
+		}
+	}, [
+		thumb,
+		context.thumbs,
+		index
+	]);
+	var 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,
+		...positionalStyles,
+		[orientation.startEdge]: `${percent}%`,
+		size: sizeIn,
+		circular,
+		...thumbProps,
+		onLayout: function(e) {
+			setSize(e.nativeEvent.layout[orientation.sizeProp]);
+		},
+		onFocus: composeEventHandlers(props.onFocus, function() {
+			context.valueIndexToChangeRef.current = index;
+		})
+	});
+}, { staticConfig: { memo: true } });
+var Slider = withStaticProperties(createRefComponent(function(props, forwardedRef) {
+	var { name, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, minStepsBetweenThumbs = 0, defaultValue = [min], value, onValueChange = function() {}, size: sizeProp, onSlideEnd, onSlideMove, onSlideStart, ...sliderProps } = props;
+	var sliderRef = React.useRef(null);
+	var composedRefs = useComposedRefs(sliderRef, forwardedRef);
+	var thumbRefs = React.useRef(/* @__PURE__ */ new Map());
+	var valueIndexToChangeRef = React.useRef(0);
+	var isHorizontal = orientation === "horizontal";
+	var [values = [], setValues] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		transition: true,
+		onChange: function(value2) {
+			updateThumbFocus(valueIndexToChangeRef.current);
+			onValueChange(value2);
+		}
+	});
+	if (isWeb) React.useEffect(function() {
+		var node = sliderRef.current;
+		if (!node) return;
+		var preventDefault = function(e) {
+			e.preventDefault();
+		};
+		node.addEventListener("touchstart", preventDefault);
+		return function() {
+			node.removeEventListener("touchstart", preventDefault);
+		};
+	}, []);
+	function updateThumbFocus(focusIndex) {
+		if (!isWeb) return;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = thumbRefs.current.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var [node, index] = _step.value;
+				if (index === focusIndex) {
+					node.focus();
+					return;
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) _iterator.return();
+			} finally {
+				if (_didIteratorError) throw _iteratorError;
+			}
+		}
+	}
+	function handleSlideMove(value2, event) {
+		updateValues(value2, valueIndexToChangeRef.current);
+		onSlideMove === null || onSlideMove === void 0 || onSlideMove(event, value2);
+	}
+	function updateValues(value2, atIndex) {
+		var decimalCount = getDecimalCount(step);
+		var nextValue = clamp(roundValue(Math.round((value2 - min) / step) * step + min, decimalCount), [min, max]);
+		setValues(function() {
+			var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			var nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+			if (hasMinStepsBetweenValues(nextValues, minStepsBetweenThumbs * step)) {
+				valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+				return String(nextValues) === String(prevValues) ? prevValues : nextValues;
+			}
+			return prevValues;
+		});
+	}
+	var SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+	return /* @__PURE__ */ jsxs(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 : function(value2, target, event) {
+				if (target !== "thumb") updateValues(value2, getClosestValueIndex(values, value2));
+				onSlideStart === null || onSlideStart === void 0 || 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, direction: stepDirection } = param;
+				if (!disabled) {
+					var multiplier = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1;
+					var atIndex = valueIndexToChangeRef.current;
+					var value2 = values[atIndex];
+					updateValues(value2 + step * multiplier * stepDirection, atIndex);
+				}
+			}
+		}), isWeb && name && values.map(function(value2, index) {
+			return /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value: value2
+			}, index);
+		})]
+	});
 }), {
-  Track: SliderTrack,
-  TrackActive: SliderActive,
-  Thumb: SliderThumb
+	Track: SliderTrack,
+	TrackActive: SliderActive,
+	Thumb: SliderThumb
 });
 Slider.displayName = SLIDER_NAME;
 var Track = SliderTrack;
 var Range = SliderActive;
 var Thumb = SliderThumb;
+
 export { Range, Slider, SliderActive, SliderActiveFrame, SliderThumb, SliderThumbFrame, SliderTrack, SliderTrackFrame, Thumb, Track };
 //# sourceMappingURL=Slider.native.js.map