@tamagui/slider 2.7.7 → 3.0.0-beta.643.1

package/dist/esm/Slider.mjs

@@ -1,505 +1,458 @@
 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, getTokens, getVariableValue, resolveSizeToken, 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.mjs";
 import { convertValueToPercentage, getClosestValueIndex, getDecimalCount, getLabel, getNextSortedValues, getThumbInBoundsOffset, hasMinStepsBetweenValues, linearScale, roundValue } from "./helpers.mjs";
 import { SliderFrame, SliderImpl } from "./SliderImpl.mjs";
-import { jsx } from "react/jsx-runtime";
-const activeSliderMeasureListeners = /* @__PURE__ */new Set();
-if (!process.env.TAMAGUI_DISABLE_SLIDER_INTERVAL) setInterval?.(() => {
-  activeSliderMeasureListeners.forEach(cb => cb());
-}, 1e3);
-const SliderHorizontal = React.forwardRef((props, forwardedRef) => {
-  const {
-    min,
-    max,
-    dir,
-    onSlideStart,
-    onSlideMove,
-    onStepKeyDown,
-    onSlideEnd,
-    ...sliderProps
-  } = props;
-  const direction = useDirection(dir);
-  const isDirectionLTR = direction === "ltr";
-  const sliderRef = React.useRef(null);
-  const [state, setState_] = React.useState(() => ({
-    size: 0,
-    offset: 0
-  }));
-  const setState = useCreateShallowSetState(setState_);
-  function getValueFromPointer(pointerPosition) {
-    return linearScale([0, state.size], isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
-  }
-  const measure = () => {
-    sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
-      setState({
-        size: width,
-        offset: pageX
-      });
-    });
-  };
-  useSliderMeasure(sliderRef, measure);
-  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: (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 = BACK_KEYS[direction].includes(event.key);
-        onStepKeyDown?.({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+import { jsx, jsxs } from "react/jsx-runtime";
+
+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 = createRefComponent((props, forwardedRef) => {
+	const { min, max, dir, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	const direction = useDirection(dir);
+	const isDirectionLTR = direction === "ltr";
+	const sliderRef = React.useRef(null);
+	const [state, setState_] = React.useState(() => ({
+		size: 0,
+		offset: 0
+	}));
+	const setState = useCreateShallowSetState(setState_);
+	function getValueFromPointer(pointerPosition) {
+		return linearScale([0, state.size], isDirectionLTR ? [min, max] : [max, min])(pointerPosition);
+	}
+	const measure = () => {
+		sliderRef.current?.measure((_x, _y, width, _height, pageX, _pageY) => {
+			setState({
+				size: width,
+				offset: pageX
+			});
+		});
+	};
+	useSliderMeasure(sliderRef, measure);
+	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: (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 = 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 = useCreateShallowSetState(setState_);
-  const sliderRef = React.useRef(null);
-  const configuration = useConfiguration();
-  const insets = isIos && configuration.insets ? configuration.insets : {
-    top: 0,
-    bottom: 0
-  };
-  function getValueFromPointer(pointerPosition) {
-    return linearScale([0, state.size], [max, min])(pointerPosition);
-  }
-  const measure = () => {
-    sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
-      setState({
-        size: height,
-        offset: pageY + (isIos ? insets.top : 0)
-      });
-    });
-  };
-  useSliderMeasure(sliderRef, measure);
-  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: (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 = BACK_KEYS.ltr.includes(event.key);
-        onStepKeyDown?.({
-          event,
-          direction: isBackKey ? -1 : 1
-        });
-      }
-    })
-  });
+const SliderVertical = createRefComponent((props, forwardedRef) => {
+	const { min, max, onSlideStart, onSlideMove, onStepKeyDown, onSlideEnd, ...sliderProps } = props;
+	const [state, setState_] = React.useState(() => ({
+		size: 0,
+		offset: 0
+	}));
+	const setState = useCreateShallowSetState(setState_);
+	const sliderRef = React.useRef(null);
+	const configuration = useConfiguration();
+	const insets = isIos && configuration.insets ? configuration.insets : {
+		top: 0,
+		bottom: 0
+	};
+	function getValueFromPointer(pointerPosition) {
+		return linearScale([0, state.size], [max, min])(pointerPosition);
+	}
+	const measure = () => {
+		sliderRef.current?.measure((_x, _y, _width, height, _pageX, pageY) => {
+			setState({
+				size: height,
+				offset: pageY + (isIos ? insets.top : 0)
+			});
+		});
+	};
+	useSliderMeasure(sliderRef, measure);
+	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: (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 = BACK_KEYS.ltr.includes(event.key);
+				onStepKeyDown?.({
+					event,
+					direction: isBackKey ? -1 : 1
+				});
+			}
+		})
+	});
 });
 const 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"
 });
-const SliderTrack = React.forwardRef(function SliderTrack2(props, forwardedRef) {
-  const {
-    __scopeSlider,
-    ...trackProps
-  } = props;
-  const 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
-  });
+const SliderTrack = createStyledHOC(SliderTrackFrame, function SliderTrack2(props, forwardedRef) {
+	const { __scopeSlider, ...trackProps } = props;
+	const 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
+	});
 });
 const 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"
 });
-const SliderActive = React.forwardRef(function SliderActive2(props, forwardedRef) {
-  const {
-    __scopeSlider,
-    ...rangeProps
-  } = props;
-  const context = useSliderContext(__scopeSlider);
-  const orientation = useSliderOrientationContext(__scopeSlider);
-  const composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
-  const valuesCount = context.values.length;
-  const percentages = context.values.map(value => convertValueToPercentage(value, context.min, context.max));
-  const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
-  const 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
-    })
-  });
+const SliderActive = createStyledHOC(SliderActiveFrame, function SliderActive2(props, forwardedRef) {
+	const { __scopeSlider, ...rangeProps } = props;
+	const context = useSliderContext(__scopeSlider);
+	const orientation = useSliderOrientationContext(__scopeSlider);
+	const composedRefs = useComposedRefs(forwardedRef, React.useRef(null));
+	const valuesCount = context.values.length;
+	const percentages = context.values.map((value) => convertValueToPercentage(value, context.min, context.max));
+	const offsetStart = valuesCount > 1 ? Math.min(...percentages) : 0;
+	const 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
+		}
+	});
 });
-const getThumbSize = val => {
-  const tokens = getTokens();
-  const size = typeof val === "number" ? val : getSize(tokens.size[val], {
-    shift: -1
-  });
-  return {
-    width: size,
-    height: size,
-    minWidth: size,
-    minHeight: size
-  };
+const getThumbSize = (val) => {
+	const tokens = getTokens();
+	const sizeToken = resolveSizeToken(val ?? true, "size");
+	const resolved = typeof sizeToken === "number" ? sizeToken : tokens.size[sizeToken];
+	const size = typeof val === "number" ? val : getVariableValue(resolved) * .86;
+	return {
+		width: size,
+		height: size,
+		minWidth: size,
+		minHeight: size
+	};
 };
-const 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"
-  }
-});
-const SliderThumb = SliderThumbFrame.styleable(function SliderThumb2(props, forwardedRef) {
-  const {
-    __scopeSlider,
-    index = 0,
-    circular,
-    size: sizeProp,
-    ...thumbProps
-  } = props;
-  const context = useSliderContext(__scopeSlider);
-  const orientation = useSliderOrientationContext(__scopeSlider);
-  const [thumb, setThumb] = React.useState(null);
-  const composedRefs = useComposedRefs(forwardedRef, setThumb);
-  const value = context.values[index];
-  const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
-  const label = getLabel(index, context.values.length);
-  const sizeIn = sizeProp ?? context.size ?? "$true";
-  const [size, setSize] = React.useState(() => {
-    return getVariableValue(getThumbSize(sizeIn).width);
-  });
-  const thumbInBoundsOffset = size ? 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__ */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: composeEventHandlers(props.onFocus, () => {
-      context.valueIndexToChangeRef.current = index;
-    })
-  });
-}, {
-  staticConfig: {
-    memo: true
-  }
+const SliderThumbFrame = styled(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 Slider = withStaticProperties(React.forwardRef((props, forwardedRef) => {
-  const {
-    name,
-    min = 0,
-    max = 100,
-    step = 1,
-    orientation = "horizontal",
-    disabled = false,
-    minStepsBetweenThumbs = 0,
-    defaultValue = [min],
-    value,
-    onValueChange = () => {},
-    size: sizeProp,
-    onSlideEnd,
-    onSlideMove,
-    onSlideStart,
-    ...sliderProps
-  } = props;
-  const sliderRef = React.useRef(null);
-  const composedRefs = useComposedRefs(sliderRef, forwardedRef);
-  const thumbRefs = React.useRef(/* @__PURE__ */new Map());
-  const valueIndexToChangeRef = React.useRef(0);
-  const isHorizontal = orientation === "horizontal";
-  const [values = [], setValues] = useControllableState({
-    prop: value,
-    defaultProp: defaultValue,
-    transition: true,
-    onChange: value2 => {
-      updateThumbFocus(valueIndexToChangeRef.current);
-      onValueChange(value2);
-    }
-  });
-  if (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 (!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 = getDecimalCount(step);
-    const nextValue = clamp(roundValue(Math.round((value2 - min) / step) * step + min, decimalCount), [min, max]);
-    setValues((prevValues = []) => {
-      const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
-      if (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__ */jsx(SliderProvider, {
-    scope: props.__scopeSlider,
-    disabled,
-    min,
-    max,
-    valueIndexToChangeRef,
-    thumbs: thumbRefs.current,
-    values,
-    orientation,
-    size: sizeProp,
-    children: /* @__PURE__ */jsx(SliderOriented, {
-      "aria-disabled": disabled,
-      "data-disabled": disabled ? "" : void 0,
-      ...sliderProps,
-      ref: composedRefs,
-      min,
-      max,
-      onSlideEnd,
-      onSlideStart: disabled ? void 0 : (value2, target, event) => {
-        if (target !== "thumb") updateValues(value2, 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 = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1;
-          const atIndex = valueIndexToChangeRef.current;
-          const value2 = values[atIndex];
-          updateValues(value2 + step * multiplier * stepDirection, atIndex);
-        }
-      }
-    })
-  });
+const SliderThumb = createStyledHOC(SliderThumbFrame, function SliderThumb2(props, forwardedRef) {
+	const { __scopeSlider, index = 0, circular, size: sizeProp, ...thumbProps } = props;
+	const context = useSliderContext(__scopeSlider);
+	const orientation = useSliderOrientationContext(__scopeSlider);
+	const [thumb, setThumb] = React.useState(null);
+	const composedRefs = useComposedRefs(forwardedRef, setThumb);
+	const value = context.values[index];
+	const percent = value === void 0 ? 0 : convertValueToPercentage(value, context.min, context.max);
+	const label = getLabel(index, context.values.length);
+	const sizeIn = sizeProp ?? context.size ?? true;
+	const [size, setSize] = React.useState(() => {
+		return getVariableValue(getThumbSize(sizeIn).width);
+	});
+	const thumbInBoundsOffset = size ? 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__ */ 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: composeEventHandlers(props.onFocus, () => {
+			context.valueIndexToChangeRef.current = index;
+		})
+	});
+}, { staticConfig: { memo: true } });
+const Slider = withStaticProperties(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 = useComposedRefs(sliderRef, forwardedRef);
+	const thumbRefs = React.useRef(/* @__PURE__ */ new Map());
+	const valueIndexToChangeRef = React.useRef(0);
+	const isHorizontal = orientation === "horizontal";
+	const [values = [], setValues] = useControllableState({
+		prop: value,
+		defaultProp: defaultValue,
+		transition: true,
+		onChange: (value2) => {
+			updateThumbFocus(valueIndexToChangeRef.current);
+			onValueChange(value2);
+		}
+	});
+	if (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 (!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 = getDecimalCount(step);
+		const nextValue = clamp(roundValue(Math.round((value2 - min) / step) * step + min, decimalCount), [min, max]);
+		setValues((prevValues = []) => {
+			const nextValues = getNextSortedValues(prevValues, nextValue, atIndex);
+			if (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__ */ 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 : (value2, target, event) => {
+				if (target !== "thumb") updateValues(value2, 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 = PAGE_KEYS.includes(event.key) || event.shiftKey && ARROW_KEYS.includes(event.key) ? 10 : 1;
+					const atIndex = valueIndexToChangeRef.current;
+					const value2 = values[atIndex];
+					updateValues(value2 + step * multiplier * stepDirection, atIndex);
+				}
+			}
+		}), isWeb && name && values.map((value2, index) => /* @__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;
 const Track = SliderTrack;
 const Range = SliderActive;
 const Thumb = SliderThumb;
+
 export { Range, Slider, SliderActive, SliderActiveFrame, SliderThumb, SliderThumbFrame, SliderTrack, SliderTrackFrame, Thumb, Track };
 //# sourceMappingURL=Slider.mjs.map