@tamagui/slider 2.7.7 → 3.0.0-beta.637.1

package/dist/cjs/Slider.native.js

@@ -1,5 +1,6 @@
 "use strict";
 
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -7,51 +8,43 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, {
-    get: all[name],
-    enumerable: true
-  });
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
 };
 var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-  }
-  return to;
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Slider_exports = {};
 __export(Slider_exports, {
-  Range: () => Range,
-  Slider: () => Slider,
-  SliderActive: () => SliderActive,
-  SliderActiveFrame: () => SliderActiveFrame,
-  SliderThumb: () => SliderThumb,
-  SliderThumbFrame: () => SliderThumbFrame,
-  SliderTrack: () => SliderTrack,
-  SliderTrackFrame: () => SliderTrackFrame,
-  Thumb: () => Thumb,
-  Track: () => Track
+	Range: () => Range,
+	Slider: () => Slider,
+	SliderActive: () => SliderActive,
+	SliderActiveFrame: () => SliderActiveFrame,
+	SliderThumb: () => SliderThumb,
+	SliderThumbFrame: () => SliderThumbFrame,
+	SliderTrack: () => SliderTrack,
+	SliderTrackFrame: () => SliderTrackFrame,
+	Thumb: () => Thumb,
+	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_constants = require("@tamagui/constants");
 var import_core = require("@tamagui/core");
-var import_get_token = require("@tamagui/get-token");
 var import_helpers = require("@tamagui/helpers");
 var import_stacks = require("@tamagui/stacks");
 var import_use_controllable_state = require("@tamagui/use-controllable-state");
@@ -60,486 +53,419 @@ var React = __toESM(require("react"), 1);
 var import_constants2 = require("./constants.native.js");
 var import_helpers2 = require("./helpers.native.js");
 var import_SliderImpl = require("./SliderImpl.native.js");
-var SliderHorizontal = /* @__PURE__ */React.forwardRef(function (props, forwardedRef) {
-  var {
-    min,
-    max,
-    dir,
-    onSlideStart,
-    onSlideMove,
-    onStepKeyDown,
-    onSlideEnd,
-    ...sliderProps
-  } = props;
-  var direction = (0, import_use_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 = (0, import_core.useCreateShallowSetState)(setState_);
-  function getValueFromPointer(pointerPosition) {
-    var input = [0, state.size];
-    var output = isDirectionLTR ? [min, max] : [max, min];
-    return (0, import_helpers2.linearScale)(input, output)(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__ */(0, import_jsx_runtime.jsx)(import_constants2.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: 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 = import_constants2.BACK_KEYS[direction].includes(event.key);
-        onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+var SliderHorizontal = (0, import_core.createRefComponent)(function(props, forwardedRef) {
+	var { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	var direction = (0, import_use_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 = (0, import_core.useCreateShallowSetState)(setState_);
+	function getValueFromPointer(pointerPosition) {
+		var input = [0, state.size];
+		var output = isDirectionLTR ? [min, max] : [max, min];
+		return (0, import_helpers2.linearScale)(input, output)(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__ */ (0, import_jsx_runtime.jsx)(import_constants2.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: 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 = import_constants2.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 = (0, import_core.useCreateShallowSetState)(setState_);
-  var sliderRef = React.useRef(null);
-  var configuration = (0, import_core.useConfiguration)();
-  var insets = import_constants.isIos && configuration.insets ? configuration.insets : {
-    top: 0,
-    bottom: 0
-  };
-  function getValueFromPointer(pointerPosition) {
-    var input = [0, state.size];
-    var output = [max, min];
-    return (0, import_helpers2.linearScale)(input, output)(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 + (import_constants.isIos ? insets.top : 0)
-      });
-    });
-  };
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_constants2.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: 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 = import_constants2.BACK_KEYS.ltr.includes(event.key);
-        onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+var SliderVertical = (0, import_core.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 = (0, import_core.useCreateShallowSetState)(setState_);
+	var sliderRef = React.useRef(null);
+	var configuration = (0, import_core.useConfiguration)();
+	var insets = import_constants.isIos && configuration.insets ? configuration.insets : {
+		top: 0,
+		bottom: 0
+	};
+	function getValueFromPointer(pointerPosition) {
+		var input = [0, state.size];
+		var output = [max, min];
+		return (0, import_helpers2.linearScale)(input, output)(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 + (import_constants.isIos ? insets.top : 0)
+			});
+		});
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_constants2.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: 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 = import_constants2.BACK_KEYS.ltr.includes(event.key);
+				onStepKeyDown === null || onStepKeyDown === void 0 || onStepKeyDown({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
 });
 var SliderTrackFrame = (0, import_core.styled)(import_SliderImpl.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 = (0, import_constants2.useSliderContext)(__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
-  });
+var SliderTrack = (0, import_core.createStyledHOC)(SliderTrackFrame, function SliderTrack2(props, forwardedRef) {
+	var { __scopeSlider, ...trackProps } = props;
+	var context = (0, import_constants2.useSliderContext)(__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
+	});
 });
 var SliderActiveFrame = (0, import_core.styled)(import_SliderImpl.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 = (0, import_constants2.useSliderContext)(__scopeSlider);
-  var orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
-  var ref = React.useRef(null);
-  var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  var valuesCount = context.values.length;
-  var percentages = context.values.map(function (value) {
-    return (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
-  });
-  var offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
-  var offsetEnd = 100 - Math.max(...percentages);
-  return /* @__PURE__ */(0, import_jsx_runtime.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 = (0, import_core.createStyledHOC)(SliderActiveFrame, function SliderActive2(props, forwardedRef) {
+	var { __scopeSlider, ...rangeProps } = props;
+	var context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	var orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
+	var ref = React.useRef(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+	var valuesCount = context.values.length;
+	var percentages = context.values.map(function(value) {
+		return (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
+	});
+	var offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+	var offsetEnd = 100 - Math.max(...percentages);
+	return /* @__PURE__ */ (0, import_jsx_runtime.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 getThumbSize = function (val) {
-  var tokens = (0, import_core.getTokens)();
-  var size = typeof val === "number" ? val : (0, import_get_token.getSize)(tokens.size[val], {
-    shift: -1
-  });
-  return {
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size
-  };
+var getThumbSize = function(val) {
+	var tokens = (0, import_core.getTokens)();
+	var sizeToken = (0, import_core.resolveSizeToken)(val !== null && val !== void 0 ? val : true, "size");
+	var resolved = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	var size = typeof val === "number" ? val : (0, import_core.getVariableValue)(resolved) * .86;
+	return {
+		width: size,
+		height: size,
+		minWidth: size,
+		minHeight: size
+	};
 };
-var SliderThumbFrame = (0, import_core.styled)(import_stacks.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 = (0, import_constants2.useSliderContext)(__scopeSlider);
-  var orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
-  var [thumb, setThumb] = React.useState(null);
-  var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setThumb);
-  var value = context.values[index];
-  var percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
-  var label = (0, import_helpers2.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 (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
-  });
-  var thumbInBoundsOffset = size ? (0, import_helpers2.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__ */(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,
-    animateOnly: ["transform", "left", "top", "right", "bottom"],
-    ...positionalStyles,
-    [orientation.startEdge]: `${percent}%`,
-    size: sizeIn,
-    circular,
-    ...thumbProps,
-    onLayout: function (e) {
-      setSize(e.nativeEvent.layout[orientation.sizeProp]);
-    },
-    onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, function () {
-      context.valueIndexToChangeRef.current = index;
-    })
-  });
-}, {
-  staticConfig: {
-    memo: true
-  }
+var SliderThumbFrame = (0, import_core.styled)(import_stacks.YStack, {
+	displayName: "SliderThumb",
+	position: "absolute",
+	variants: {
+		size: {
+			number: getThumbSize,
+			Size: getThumbSize
+		},
+		circular: { true: {
+			borderRadius: 1e5,
+			padding: 0
+		} },
+		elevate: { true: {
+			shadowColor: "shadow-color",
+			shadowRadius: 4,
+			shadowOffset: {
+				width: 0,
+				height: 2
+			}
+		} }
+	}
 });
-var SliderComponent = /* @__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 = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
-  var thumbRefs = React.useRef(/* @__PURE__ */new Map());
-  var valueIndexToChangeRef = React.useRef(0);
-  var isHorizontal = orientation === "horizontal";
-  var [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
-    prop: value,
-    defaultProp: defaultValue,
-    transition: true,
-    onChange: function (value2) {
-      updateThumbFocus(valueIndexToChangeRef.current);
-      onValueChange(value2);
-    }
-  });
-  if (import_constants.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 (!import_constants.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 = (0, import_helpers2.getDecimalCount)(step);
-    var snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
-    var nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
-    setValues(function () {
-      var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-      var 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;
-      }
-      return prevValues;
-    });
-  }
-  var SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_constants2.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,
-      onSlideEnd,
-      onSlideStart: disabled ? void 0 : function (value2, target, event) {
-        if (target !== "thumb") updateValues(value2, (0, import_helpers2.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 = import_constants2.PAGE_KEYS.includes(event.key) || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key) ? 10 : 1;
-          var atIndex = valueIndexToChangeRef.current;
-          var value2 = values[atIndex];
-          updateValues(value2 + step * multiplier * stepDirection, atIndex);
-        }
-      }
-    })
-  });
+var SliderThumb = (0, import_core.createStyledHOC)(SliderThumbFrame, function SliderThumb2(props, forwardedRef) {
+	var { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props;
+	var context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	var orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
+	var [thumb, setThumb] = React.useState(null);
+	var composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setThumb);
+	var value = context.values[index];
+	var percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
+	var label = (0, import_helpers2.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 (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
+	});
+	var thumbInBoundsOffset = size ? (0, import_helpers2.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__ */ (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,
+		animateOnly: [
+			"transform",
+			"left",
+			"top",
+			"right",
+			"bottom"
+		],
+		...positionalStyles,
+		[orientation.startEdge]: `${percent}%`,
+		size: sizeIn,
+		circular,
+		...thumbProps,
+		onLayout: function(e) {
+			setSize(e.nativeEvent.layout[orientation.sizeProp]);
+		},
+		onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, function() {
+			context.valueIndexToChangeRef.current = index;
+		})
+	});
+}, { staticConfig: { memo: true } });
+var SliderComponent = (0, import_core.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 = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
+	var thumbRefs = React.useRef(/* @__PURE__ */ new Map());
+	var valueIndexToChangeRef = React.useRef(0);
+	var isHorizontal = orientation === "horizontal";
+	var [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
+		prop: value,
+		defaultProp: defaultValue,
+		transition: true,
+		onChange: function(value2) {
+			updateThumbFocus(valueIndexToChangeRef.current);
+			onValueChange(value2);
+		}
+	});
+	if (import_constants.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 (!import_constants.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 = (0, import_helpers2.getDecimalCount)(step);
+		var snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
+		var nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
+		setValues(function() {
+			var prevValues = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
+			var 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;
+			}
+			return prevValues;
+		});
+	}
+	var SliderOriented = isHorizontal ? SliderHorizontal : SliderVertical;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_constants2.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,
+			onSlideEnd,
+			onSlideStart: disabled ? void 0 : function(value2, target, event) {
+				if (target !== "thumb") updateValues(value2, (0, import_helpers2.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 = import_constants2.PAGE_KEYS.includes(event.key) || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key) ? 10 : 1;
+					var atIndex = valueIndexToChangeRef.current;
+					var value2 = values[atIndex];
+					updateValues(value2 + step * multiplier * stepDirection, atIndex);
+				}
+			}
+		}), import_constants.isWeb && name && values.map(function(value2, index) {
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+				type: "hidden",
+				name,
+				value: value2
+			}, index);
+		})]
+	});
 });
 var Slider = (0, import_helpers.withStaticProperties)(SliderComponent, {
-  Track: SliderTrack,
-  TrackActive: SliderActive,
-  Thumb: SliderThumb
+	Track: SliderTrack,
+	TrackActive: SliderActive,
+	Thumb: SliderThumb
 });
 Slider.displayName = import_constants2.SLIDER_NAME;
 var Track = SliderTrack;
 var Range = SliderActive;
 var Thumb = SliderThumb;
+
 //# sourceMappingURL=Slider.native.js.map