@tamagui/slider 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/Slider.cjs

@@ -1,3 +1,4 @@
+
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -5,50 +6,42 @@ 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_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");
@@ -58,502 +51,452 @@ var import_constants2 = require("./constants.cjs");
 var import_helpers2 = require("./helpers.cjs");
 var import_SliderImpl = require("./SliderImpl.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
-const activeSliderMeasureListeners = /* @__PURE__ */new Set();
-if (!process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) setInterval?.(() => {
-  activeSliderMeasureListeners.forEach(cb => cb());
-},
-// really doesn't need to be super often
-1e3);
-const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
-  const {
-    min,
-    max,
-    dir,
-    onSlideStart,
-    onSlideMove,
-    onStepKeyDown,
-    onSlideEnd,
-    ...sliderProps
-  } = props;
-  const direction = (0, import_use_direction.useDirection)(dir);
-  const isDirectionLTR = direction === "ltr";
-  const sliderRef = React.useRef(null);
-  const [state, setState_] = React.useState(() => ({
-    size: 0,
-    offset: 0
-  }));
-  const setState = (0, import_core.useCreateShallowSetState)(setState_);
-  function getValueFromPointer(pointerPosition) {
-    const input = [0, state.size];
-    const output = isDirectionLTR ? [min, max] : [max, min];
-    return (0, import_helpers2.linearScale)(input, output)(pointerPosition);
-  }
-  const measure = () => {
-    sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
-      setState({
-        size: width,
-        offset: pageX
-      });
-    });
-  };
-  useSliderMeasure(sliderRef, measure);
-  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: (event, target) => {
-        const value = getValueFromPointer(event.nativeEvent.locationX);
-        if (value) onSlideStart?.(value, target, event);
-      },
-      onSlideMove: event => {
-        const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        if (value) onSlideMove?.(value, event);
-      },
-      onSlideEnd: event => {
-        const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
-        if (value) onSlideEnd?.(event, value);
-      },
-      onStepKeyDown: event => {
-        const isBackKey = import_constants2.BACK_KEYS[direction].includes(event.key);
-        onStepKeyDown?.({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+const activeSliderMeasureListeners = /* @__PURE__ */ new Set();
+let activeSliderMeasureInterval;
+function startSliderMeasureInterval() {
+	if (activeSliderMeasureInterval !== void 0 || process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) return;
+	activeSliderMeasureInterval = setInterval(() => {
+		activeSliderMeasureListeners.forEach((cb) => cb());
+	}, 1e3);
+}
+function addActiveSliderMeasureListener(listener) {
+	activeSliderMeasureListeners.add(listener);
+	startSliderMeasureInterval();
+}
+function removeActiveSliderMeasureListener(listener) {
+	activeSliderMeasureListeners.delete(listener);
+	if (!activeSliderMeasureListeners.size && activeSliderMeasureInterval !== void 0) {
+		clearInterval(activeSliderMeasureInterval);
+		activeSliderMeasureInterval = void 0;
+	}
+}
+const SliderHorizontal = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	const direction = (0, import_use_direction.useDirection)(dir);
+	const isDirectionLTR = direction === "ltr";
+	const sliderRef = React.useRef(null);
+	const [state, setState_] = React.useState(() => ({
+		size: 0,
+		offset: 0
+	}));
+	const setState = (0, import_core.useCreateShallowSetState)(setState_);
+	function getValueFromPointer(pointerPosition) {
+		const input = [0, state.size];
+		const output = isDirectionLTR ? [min, max] : [max, min];
+		return (0, import_helpers2.linearScale)(input, output)(pointerPosition);
+	}
+	const measure = () => {
+		sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
+			setState({
+				size: width,
+				offset: pageX
+			});
+		});
+	};
+	useSliderMeasure(sliderRef, measure);
+	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: (event, target) => {
+				const value = getValueFromPointer(event.nativeEvent.locationX);
+				if (value) onSlideStart?.(value, target, event);
+			},
+			onSlideMove: (event) => {
+				const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+				if (value) onSlideMove?.(value, event);
+			},
+			onSlideEnd: (event) => {
+				const value = getValueFromPointer(event.nativeEvent.pageX - state.offset);
+				if (value) onSlideEnd?.(event, value);
+			},
+			onStepKeyDown: (event) => {
+				const isBackKey = import_constants2.BACK_KEYS[direction].includes(event.key);
+				onStepKeyDown?.({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
 });
 function useOnDebouncedWindowResize(callback, amt = 200) {
-  React.useEffect(() => {
-    let last;
-    const onResize = () => {
-      clearTimeout(last);
-      last = setTimeout(callback, amt);
-    };
-    window.addEventListener("resize", onResize);
-    return () => {
-      clearTimeout(last);
-      window.removeEventListener("resize", onResize);
-    };
-  }, []);
+	React.useEffect(() => {
+		let last;
+		const onResize = () => {
+			clearTimeout(last);
+			last = setTimeout(callback, amt);
+		};
+		window.addEventListener("resize", onResize);
+		return () => {
+			clearTimeout(last);
+			window.removeEventListener("resize", onResize);
+		};
+	}, []);
 }
 function useSliderMeasure(sliderRef, measure) {
-  useOnDebouncedWindowResize(measure);
-  React.useEffect(() => {
-    const node = sliderRef.current;
-    if (!node) return;
-    let measureTm;
-    const debouncedMeasure = () => {
-      clearTimeout(measureTm);
-      measureTm = setTimeout(() => {
-        measure();
-      }, 200);
-    };
-    const io = new IntersectionObserver(entries => {
-      debouncedMeasure();
-      if (entries?.[0].isIntersecting) activeSliderMeasureListeners.add(debouncedMeasure);else activeSliderMeasureListeners.delete(debouncedMeasure);
-    }, {
-      root: null,
-      rootMargin: "0px",
-      threshold: [0, .5, 1]
-    });
-    io.observe(node);
-    return () => {
-      activeSliderMeasureListeners.delete(debouncedMeasure);
-      io.disconnect();
-    };
-  }, []);
+	useOnDebouncedWindowResize(measure);
+	React.useEffect(() => {
+		const node = sliderRef.current;
+		if (!node) return;
+		let measureTm;
+		const debouncedMeasure = () => {
+			clearTimeout(measureTm);
+			measureTm = setTimeout(() => {
+				measure();
+			}, 200);
+		};
+		const io = new IntersectionObserver((entries) => {
+			debouncedMeasure();
+			if (entries?.[0].isIntersecting) addActiveSliderMeasureListener(debouncedMeasure);
+			else removeActiveSliderMeasureListener(debouncedMeasure);
+		}, {
+			root: null,
+			rootMargin: "0px",
+			threshold: [
+				0,
+				.5,
+				1
+			]
+		});
+		io.observe(node);
+		return () => {
+			removeActiveSliderMeasureListener(debouncedMeasure);
+			io.disconnect();
+		};
+	}, []);
 }
-const SliderVertical = React.forwardRef((props, forwardedRef) => {
-  const {
-    min,
-    max,
-    onSlideStart,
-    onSlideMove,
-    onStepKeyDown,
-    onSlideEnd,
-    ...sliderProps
-  } = props;
-  const [state, setState_] = React.useState(() => ({
-    size: 0,
-    offset: 0
-  }));
-  const setState = (0, import_core.useCreateShallowSetState)(setState_);
-  const sliderRef = React.useRef(null);
-  const configuration = (0, import_core.useConfiguration)();
-  const insets = import_constants.isIos && configuration.insets ? configuration.insets : {
-    top: 0,
-    bottom: 0
-  };
-  function getValueFromPointer(pointerPosition) {
-    const input = [0, state.size];
-    const output = [max, min];
-    return (0, import_helpers2.linearScale)(input, output)(pointerPosition);
-  }
-  const measure = () => {
-    sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
-      setState({
-        size: height,
-        offset: pageY + (import_constants.isIos ? insets.top : 0)
-      });
-    });
-  };
-  useSliderMeasure(sliderRef, measure);
-  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: (event, target) => {
-        const value = getValueFromPointer(event.nativeEvent.locationY);
-        if (value) onSlideStart?.(value, target, event);
-      },
-      onSlideMove: event => {
-        const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        if (value) onSlideMove?.(value, event);
-      },
-      onSlideEnd: event => {
-        const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
-        onSlideEnd?.(event, value);
-      },
-      onStepKeyDown: event => {
-        const isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
-        onStepKeyDown?.({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+const SliderVertical = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { min, max, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	const [state, setState_] = React.useState(() => ({
+		size: 0,
+		offset: 0
+	}));
+	const setState = (0, import_core.useCreateShallowSetState)(setState_);
+	const sliderRef = React.useRef(null);
+	const configuration = (0, import_core.useConfiguration)();
+	const insets = import_constants.isIos && configuration.insets ? configuration.insets : {
+		top: 0,
+		bottom: 0
+	};
+	function getValueFromPointer(pointerPosition) {
+		const input = [0, state.size];
+		const output = [max, min];
+		return (0, import_helpers2.linearScale)(input, output)(pointerPosition);
+	}
+	const measure = () => {
+		sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+			setState({
+				size: height,
+				offset: pageY + (import_constants.isIos ? insets.top : 0)
+			});
+		});
+	};
+	useSliderMeasure(sliderRef, measure);
+	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: (event, target) => {
+				const value = getValueFromPointer(event.nativeEvent.locationY);
+				if (value) onSlideStart?.(value, target, event);
+			},
+			onSlideMove: (event) => {
+				const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+				if (value) onSlideMove?.(value, event);
+			},
+			onSlideEnd: (event) => {
+				const value = getValueFromPointer(event.nativeEvent.pageY - state.offset);
+				onSlideEnd?.(event, value);
+			},
+			onStepKeyDown: (event) => {
+				const isBackKey = import_constants2.BACK_KEYS.ltr.includes(event.key);
+				onStepKeyDown?.({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
 });
 const 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"
 });
-const SliderTrack = React.forwardRef(function SliderTrack2(props, forwardedRef) {
-  const {
-    __scopeSlider,
-    ...trackProps
-  } = props;
-  const 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
-  });
+const SliderTrack = (0, import_core.createStyledHOC)(SliderTrackFrame, function SliderTrack2(props, forwardedRef) {
+	const { __scopeSlider, ...trackProps } = props;
+	const 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
+	});
 });
 const 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"
 });
-const SliderActive = React.forwardRef(function SliderActive2(props, forwardedRef) {
-  const {
-    __scopeSlider,
-    ...rangeProps
-  } = props;
-  const context = (0, import_constants2.useSliderContext)(__scopeSlider);
-  const orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
-  const ref = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
-  const valuesCount = context.values.length;
-  const percentages = context.values.map(value => (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max));
-  const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
-  const offsetEnd = 100 - Math.max(...percentages);
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(SliderActiveFrame, {
-    orientation: context.orientation,
-    "data-orientation": context.orientation,
-    "data-disabled": context.disabled ? "" : void 0,
-    size: context.size,
-    animateOnly: ["left", "top", "right", "bottom"],
-    ...rangeProps,
-    ref: composedRefs,
-    [orientation.startEdge]: `${offsetStart}%`,
-    [orientation.endEdge]: `${offsetEnd}%`,
-    ...(orientation.sizeProp === "width" ? {
-      height: "100%"
-    } : {
-      left: 0,
-      right: 0
-    })
-  });
+const SliderActive = (0, import_core.createStyledHOC)(SliderActiveFrame, function SliderActive2(props, forwardedRef) {
+	const { __scopeSlider, ...rangeProps } = props;
+	const context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	const orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
+	const ref = React.useRef(null);
+	const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, ref);
+	const valuesCount = context.values.length;
+	const percentages = context.values.map((value) => (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max));
+	const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+	const offsetEnd = 100 - Math.max(...percentages);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SliderActiveFrame, {
+		orientation: context.orientation,
+		"data-orientation": context.orientation,
+		"data-disabled": context.disabled ? "" : void 0,
+		size: context.size,
+		animateOnly: [
+			"left",
+			"top",
+			"right",
+			"bottom"
+		],
+		...rangeProps,
+		ref: composedRefs,
+		[orientation.startEdge]: `${offsetStart}%`,
+		[orientation.endEdge]: `${offsetEnd}%`,
+		...orientation.sizeProp === "width" ? { height: "100%" } : {
+			left: 0,
+			right: 0
+		}
+	});
 });
-const getThumbSize = val => {
-  const tokens = (0, import_core.getTokens)();
-  const size = typeof val === "number" ? val : (0, import_get_token.getSize)(tokens.size[val], {
-    shift: -1
-  });
-  return {
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size
-  };
+const getThumbSize = (val) => {
+	const tokens = (0, import_core.getTokens)();
+	const sizeToken = (0, import_core.resolveSizeToken)(val ?? true, "size");
+	const resolved = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	const size = typeof val === "number" ? val : (0, import_core.getVariableValue)(resolved) * .86;
+	return {
+		width: size,
+		height: size,
+		minWidth: size,
+		minHeight: size
+	};
 };
-const 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"
-  }
-});
-const SliderThumb = SliderThumbFrame.styleable(function SliderThumb2(props, forwardedRef) {
-  const {
-    __scopeSlider,
-    index = 0,
-    circular,
-    size: sizeProp,
-    ...thumbProps
-  } = props;
-  const context = (0, import_constants2.useSliderContext)(__scopeSlider);
-  const orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
-  const [thumb, setThumb] = React.useState(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setThumb);
-  const value = context.values[index];
-  const percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
-  const label = (0, import_helpers2.getLabel)(index, context.values.length);
-  const sizeIn = sizeProp ?? context.size ?? "$true";
-  const [size, setSize] = React.useState(() => {
-    return (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
-  });
-  const thumbInBoundsOffset = size ? (0, import_helpers2.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
-  React.useEffect(() => {
-    if (thumb) {
-      context.thumbs.set(thumb, index);
-      return () => {
-        context.thumbs.delete(thumb);
-      };
-    }
-  }, [thumb, context.thumbs, index]);
-  const positionalStyles = context.orientation === "horizontal" ? {
-    x: (thumbInBoundsOffset - size / 2) * orientation.direction,
-    y: -size / 2,
-    top: "50%",
-    ...(size === 0 && {
-      top: "auto",
-      bottom: "auto"
-    })
-  } : {
-    x: -size / 2,
-    y: size / 2,
-    left: "50%",
-    ...(size === 0 && {
-      left: "auto",
-      right: "auto"
-    })
-  };
-  return /* @__PURE__ */(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: e => {
-      setSize(e.nativeEvent.layout[orientation.sizeProp]);
-    },
-    onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, () => {
-      context.valueIndexToChangeRef.current = index;
-    })
-  });
-}, {
-  staticConfig: {
-    memo: true
-  }
+const 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
+			}
+		} }
+	}
 });
-const SliderComponent = React.forwardRef((props, forwardedRef) => {
-  const {
-    name,
-    min = 0,
-    max = 100,
-    step = 1,
-    orientation = "horizontal",
-    disabled = false,
-    minStepsBetweenThumbs = 0,
-    defaultValue = [min],
-    value,
-    onValueChange = () => {},
-    size: sizeProp,
-    onSlideEnd,
-    onSlideMove,
-    onSlideStart,
-    ...sliderProps
-  } = props;
-  const sliderRef = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
-  const thumbRefs = React.useRef(/* @__PURE__ */new Map());
-  const valueIndexToChangeRef = React.useRef(0);
-  const isHorizontal = orientation === "horizontal";
-  const [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
-    prop: value,
-    defaultProp: defaultValue,
-    transition: true,
-    onChange: value2 => {
-      updateThumbFocus(valueIndexToChangeRef.current);
-      onValueChange(value2);
-    }
-  });
-  if (import_constants.isWeb) React.useEffect(() => {
-    const node = sliderRef.current;
-    if (!node) return;
-    const preventDefault = e => {
-      e.preventDefault();
-    };
-    node.addEventListener("touchstart", preventDefault);
-    return () => {
-      node.removeEventListener("touchstart", preventDefault);
-    };
-  }, []);
-  function updateThumbFocus(focusIndex) {
-    if (!import_constants.isWeb) return;
-    for (const [node, index] of thumbRefs.current.entries()) if (index === focusIndex) {
-      node.focus();
-      return;
-    }
-  }
-  function handleSlideMove(value2, event) {
-    updateValues(value2, valueIndexToChangeRef.current);
-    onSlideMove?.(event, value2);
-  }
-  function updateValues(value2, atIndex) {
-    const decimalCount = (0, import_helpers2.getDecimalCount)(step);
-    const snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
-    const nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
-    setValues((prevValues = []) => {
-      const nextValues = (0, import_helpers2.getNextSortedValues)(prevValues, nextValue, atIndex);
-      if ((0, import_helpers2.hasMinStepsBetweenValues)(nextValues, minStepsBetweenThumbs * step)) {
-        valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
-        return String(nextValues) === String(prevValues) ? prevValues : nextValues;
-      }
-      return prevValues;
-    });
-  }
-  const 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 : (value2, target, event) => {
-        if (target !== "thumb") updateValues(value2, (0, import_helpers2.getClosestValueIndex)(values, value2));
-        onSlideStart?.(event, value2, target);
-      },
-      onSlideMove: disabled ? void 0 : handleSlideMove,
-      onHomeKeyDown: () => !disabled && updateValues(min, 0),
-      onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
-      onStepKeyDown: ({
-        event,
-        direction: stepDirection
-      }) => {
-        if (!disabled) {
-          const multiplier = import_constants2.PAGE_KEYS.includes(event.key) || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key) ? 10 : 1;
-          const atIndex = valueIndexToChangeRef.current;
-          const value2 = values[atIndex];
-          updateValues(value2 + step * multiplier * stepDirection, atIndex);
-        }
-      }
-    })
-  });
+const SliderThumb = (0, import_core.createStyledHOC)(SliderThumbFrame, function SliderThumb2(props, forwardedRef) {
+	const { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props;
+	const context = (0, import_constants2.useSliderContext)(__scopeSlider);
+	const orientation = (0, import_constants2.useSliderOrientationContext)(__scopeSlider);
+	const [thumb, setThumb] = React.useState(null);
+	const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, setThumb);
+	const value = context.values[index];
+	const percent = value === void 0 ? 0 : (0, import_helpers2.convertValueToPercentage)(value, context.min, context.max);
+	const label = (0, import_helpers2.getLabel)(index, context.values.length);
+	const sizeIn = sizeProp ?? context.size ?? true;
+	const [size, setSize] = React.useState(() => {
+		return (0, import_core.getVariableValue)(getThumbSize(sizeIn).width);
+	});
+	const thumbInBoundsOffset = size ? (0, import_helpers2.getThumbInBoundsOffset)(size, percent, orientation.direction) : 0;
+	React.useEffect(() => {
+		if (thumb) {
+			context.thumbs.set(thumb, index);
+			return () => {
+				context.thumbs.delete(thumb);
+			};
+		}
+	}, [
+		thumb,
+		context.thumbs,
+		index
+	]);
+	const positionalStyles = context.orientation === "horizontal" ? {
+		x: (thumbInBoundsOffset - size / 2) * orientation.direction,
+		y: -size / 2,
+		top: "50%",
+		...size === 0 && {
+			top: "auto",
+			bottom: "auto"
+		}
+	} : {
+		x: -size / 2,
+		y: size / 2,
+		left: "50%",
+		...size === 0 && {
+			left: "auto",
+			right: "auto"
+		}
+	};
+	return /* @__PURE__ */ (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: (e) => {
+			setSize(e.nativeEvent.layout[orientation.sizeProp]);
+		},
+		onFocus: (0, import_helpers.composeEventHandlers)(props.onFocus, () => {
+			context.valueIndexToChangeRef.current = index;
+		})
+	});
+}, { staticConfig: { memo: true } });
+const SliderComponent = (0, import_core.createRefComponent)((props, forwardedRef) => {
+	const { name, min = 0, max = 100, step = 1, orientation = "horizontal", disabled = false, minStepsBetweenThumbs = 0, defaultValue = [min], value, onValueChange = () => {}, size: sizeProp, onSlideEnd, onSlideMove, onSlideStart, ...sliderProps } = props;
+	const sliderRef = React.useRef(null);
+	const composedRefs = (0, import_compose_refs.useComposedRefs)(sliderRef, forwardedRef);
+	const thumbRefs = React.useRef(/* @__PURE__ */ new Map());
+	const valueIndexToChangeRef = React.useRef(0);
+	const isHorizontal = orientation === "horizontal";
+	const [values = [], setValues] = (0, import_use_controllable_state.useControllableState)({
+		prop: value,
+		defaultProp: defaultValue,
+		transition: true,
+		onChange: (value2) => {
+			updateThumbFocus(valueIndexToChangeRef.current);
+			onValueChange(value2);
+		}
+	});
+	if (import_constants.isWeb) React.useEffect(() => {
+		const node = sliderRef.current;
+		if (!node) return;
+		const preventDefault = (e) => {
+			e.preventDefault();
+		};
+		node.addEventListener("touchstart", preventDefault);
+		return () => {
+			node.removeEventListener("touchstart", preventDefault);
+		};
+	}, []);
+	function updateThumbFocus(focusIndex) {
+		if (!import_constants.isWeb) return;
+		for (const [node, index] of thumbRefs.current.entries()) if (index === focusIndex) {
+			node.focus();
+			return;
+		}
+	}
+	function handleSlideMove(value2, event) {
+		updateValues(value2, valueIndexToChangeRef.current);
+		onSlideMove?.(event, value2);
+	}
+	function updateValues(value2, atIndex) {
+		const decimalCount = (0, import_helpers2.getDecimalCount)(step);
+		const snapToStep = (0, import_helpers2.roundValue)(Math.round((value2 - min) / step) * step + min, decimalCount);
+		const nextValue = (0, import_helpers.clamp)(snapToStep, [min, max]);
+		setValues((prevValues = []) => {
+			const nextValues = (0, import_helpers2.getNextSortedValues)(prevValues, nextValue, atIndex);
+			if ((0, import_helpers2.hasMinStepsBetweenValues)(nextValues, minStepsBetweenThumbs * step)) {
+				valueIndexToChangeRef.current = nextValues.indexOf(nextValue);
+				return String(nextValues) === String(prevValues) ? prevValues : nextValues;
+			}
+			return prevValues;
+		});
+	}
+	const 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 : (value2, target, event) => {
+				if (target !== "thumb") updateValues(value2, (0, import_helpers2.getClosestValueIndex)(values, value2));
+				onSlideStart?.(event, value2, target);
+			},
+			onSlideMove: disabled ? void 0 : handleSlideMove,
+			onHomeKeyDown: () => !disabled && updateValues(min, 0),
+			onEndKeyDown: () => !disabled && updateValues(max, values.length - 1),
+			onStepKeyDown: ({ event, direction: stepDirection }) => {
+				if (!disabled) {
+					const multiplier = import_constants2.PAGE_KEYS.includes(event.key) || event.shiftKey && import_constants2.ARROW_KEYS.includes(event.key) ? 10 : 1;
+					const atIndex = valueIndexToChangeRef.current;
+					const value2 = values[atIndex];
+					updateValues(value2 + step * multiplier * stepDirection, atIndex);
+				}
+			}
+		}), import_constants.isWeb && name && values.map((value2, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
+			type: "hidden",
+			name,
+			value: value2
+		}, index))]
+	});
 });
 const Slider = (0, import_helpers.withStaticProperties)(SliderComponent, {
-  Track: SliderTrack,
-  TrackActive: SliderActive,
-  Thumb: SliderThumb
+	Track: SliderTrack,
+	TrackActive: SliderActive,
+	Thumb: SliderThumb
 });
 Slider.displayName = import_constants2.SLIDER_NAME;
 const Track = SliderTrack;
 const Range = SliderActive;
-const Thumb = SliderThumb;
+const Thumb = SliderThumb;