@seed-design/lynx-react 0.7.1 → 0.9.0

package/lib/components/Slider/Slider.jsx

@@ -0,0 +1,573 @@
+import { useControllableState } from "../../packages/lynx-react-headless/use-controllable-state/lib/index.js";
+import { mergeProps } from "../../utils/merge-props.js";
+import { eventPageX, geometryFromRect, getStickyLabelOffset, getThumbInBoundsOffset, hasMinimumSteps, nearestValueIndex, normalizeValue, normalizeValues, percentageForValue, valueForPercentage } from "./Slider.utils.js";
+import * as React from "@lynx-js/react";
+import clsx from "clsx";
+import { getRectByRef } from "@lynx-js/lynx-ui-common";
+import { slider } from "@seed-design/lynx-css/recipes/slider";
+import { sliderTick } from "@seed-design/lynx-css/recipes/slider-tick";
+import { sliderMarker } from "@seed-design/lynx-css/recipes/slider-marker";
+//#region src/components/Slider/Slider.tsx
+function getLayoutWidth(event) {
+	const eventWithWidth = event;
+	const nextWidth = event.detail?.width ?? event.params?.width ?? eventWithWidth.width;
+	if (typeof nextWidth !== "number" || !Number.isFinite(nextWidth)) return null;
+	return Math.max(0, nextWidth);
+}
+var SliderContext = React.createContext(null);
+function useSliderContext(consumer) {
+	const context = React.useContext(SliderContext);
+	if (!context) throw new Error(`<${consumer}/> must be rendered inside <Slider.Root/>.`);
+	return context;
+}
+function dynamicStyle(style, values) {
+	return {
+		...values,
+		...style ?? {}
+	};
+}
+function defaultGetValueIndicatorLabel({ value }) {
+	return String(value);
+}
+var SliderRoot = React.forwardRef((props, forwardedRef) => {
+	const [variantProps, restProps] = slider.splitVariantProps(props);
+	const { disabled = false } = variantProps;
+	const { children, className, style, values: valuesProp, defaultValues, min = 0, max = 100, step = 1, allowedValues, minStepsBetweenThumbs = 0, dir = "ltr", readOnly = false, invalid = false, onValuesChange, onValuesCommit, getAccessibilityLabel, getAccessibilityValueText, getValueIndicatorLabel = defaultGetValueIndicatorLabel, valueIndicatorTrigger = "auto", "consume-slide-event": consumeSlideEvent = [
+		[-180, -135],
+		[-45, 45],
+		[135, 180]
+	], ...nativeProps } = restProps;
+	const resolvedValueIndicatorTrigger = valueIndicatorTrigger === "auto" ? "active" : valueIndicatorTrigger;
+	const getClasses = React.useCallback((state = {}) => slider(state), []);
+	const initialValues = React.useMemo(() => normalizeValues(defaultValues ?? valuesProp, min, max, step, allowedValues), [
+		defaultValues,
+		valuesProp,
+		min,
+		max,
+		step,
+		allowedValues
+	]);
+	const [values, setValues] = useControllableState({
+		value: valuesProp === void 0 ? void 0 : normalizeValues(valuesProp, min, max, step, allowedValues),
+		defaultValue: initialValues,
+		onChange: onValuesChange
+	});
+	const valuesRef = React.useRef(values);
+	valuesRef.current = values;
+	const interaction = React.useRef({
+		active: false,
+		index: null,
+		changed: false,
+		pendingX: null
+	});
+	const pendingEndRef = React.useRef(false);
+	const moveFrameRef = React.useRef(null);
+	const [valueIndicatorEverShown, setValueIndicatorEverShown] = React.useState(false);
+	const trackRef = React.useRef(null);
+	const thumbRefs = React.useRef({});
+	const indicatorRefs = React.useRef({});
+	const [dragging, setDragging] = React.useState(false);
+	const [activeThumbIndex, setActiveThumbIndex] = React.useState(null);
+	const [trackLeft, setTrackLeft] = React.useState(0);
+	const trackLeftRef = React.useRef(0);
+	const trackWidthRef = React.useRef(0);
+	const [trackWidth, setTrackWidth] = React.useState(0);
+	const [thumbWidth, setThumbWidth] = React.useState(0);
+	const [indicatorWidths, setIndicatorWidths] = React.useState({});
+	const updateIndicatorWidth = React.useCallback((index, width) => {
+		setIndicatorWidths((previous) => {
+			if (previous[index] === width) return previous;
+			return {
+				...previous,
+				[index]: width
+			};
+		});
+	}, []);
+	const measureInFlight = React.useRef(false);
+	const finalizeRef = React.useRef(void 0);
+	const updateFromRatioRef = React.useRef(void 0);
+	const measure = React.useCallback(() => {
+		const trackNode = trackRef.current;
+		if (measureInFlight.current || !trackNode) return;
+		measureInFlight.current = true;
+		const thumbNode = thumbRefs.current[0]?.current;
+		Promise.all([getRectByRef({ current: trackNode }), thumbNode ? getRectByRef({ current: thumbNode }) : Promise.resolve(null)]).then(([trackRect, thumbRect]) => {
+			const track = geometryFromRect(trackRect);
+			const thumb = geometryFromRect(thumbRect);
+			if (track) {
+				trackLeftRef.current = track.left;
+				trackWidthRef.current = track.width;
+				setTrackLeft(track.left);
+				setTrackWidth(track.width);
+			}
+			if (thumb) setThumbWidth(thumb.width);
+			measureInFlight.current = false;
+			const pending = interaction.current.pendingX;
+			if (pending !== null && track) {
+				interaction.current.pendingX = null;
+				updateFromRatioRef.current?.(clampRatio((pending - track.left) / track.width));
+			}
+			if (pendingEndRef.current) finalizeRef.current?.();
+		}).catch(() => {
+			measureInFlight.current = false;
+			if (!pendingEndRef.current) return;
+			const pending = interaction.current.pendingX;
+			if (pending !== null && trackWidthRef.current > 0) {
+				interaction.current.pendingX = null;
+				updateFromRatioRef.current?.(clampRatio((pending - trackLeftRef.current) / trackWidthRef.current));
+			}
+			finalizeRef.current?.();
+		});
+	}, []);
+	const registerThumb = React.useCallback((index, ref) => {
+		thumbRefs.current[index] = ref;
+		if (index === 0) measure();
+	}, [measure]);
+	const registerIndicator = React.useCallback((index, ref) => {
+		indicatorRefs.current[index] = ref;
+		const indicatorNode = ref.current;
+		if (!indicatorNode) return;
+		getRectByRef({ current: indicatorNode }).then((rect) => {
+			const geometry = geometryFromRect(rect);
+			if (geometry) updateIndicatorWidth(index, geometry.width);
+		}).catch(() => void 0);
+	}, [updateIndicatorWidth]);
+	const updateFromRatio = React.useCallback((ratio) => {
+		if (disabled || readOnly || !interaction.current.active) return;
+		const current = valuesRef.current;
+		const requested = valueForPercentage(ratio * 100, min, max, dir);
+		const index = interaction.current.index ?? nearestValueIndex(current, requested);
+		const nextValue = normalizeValue(requested, min, max, step, allowedValues);
+		const next = [...current];
+		next[index] = nextValue;
+		next.sort((a, b) => a - b);
+		if (!allowedValues?.length && !hasMinimumSteps(next, minStepsBetweenThumbs, step)) return;
+		if (next.every((value, valueIndex) => value === current[valueIndex])) return;
+		valuesRef.current = next;
+		interaction.current.index = next.indexOf(nextValue);
+		interaction.current.changed = true;
+		setActiveThumbIndex(interaction.current.index);
+		setValues(next);
+	}, [
+		allowedValues,
+		dir,
+		disabled,
+		max,
+		min,
+		minStepsBetweenThumbs,
+		readOnly,
+		setValues,
+		step
+	]);
+	updateFromRatioRef.current = updateFromRatio;
+	const cancelPendingMove = React.useCallback(() => {
+		if (moveFrameRef.current === null) return;
+		cancelAnimationFrame(moveFrameRef.current);
+		moveFrameRef.current = null;
+	}, []);
+	const flushPendingMove = React.useCallback(() => {
+		"background only";
+		moveFrameRef.current = null;
+		if (!interaction.current.active || disabled || readOnly) return;
+		const pending = interaction.current.pendingX;
+		if (pending === null) return;
+		const track = trackWidthRef.current;
+		if (!track) {
+			measure();
+			return;
+		}
+		interaction.current.pendingX = null;
+		updateFromRatio(clampRatio((pending - trackLeftRef.current) / track));
+	}, [
+		disabled,
+		measure,
+		readOnly,
+		updateFromRatio
+	]);
+	finalizeRef.current = React.useCallback(() => {
+		if (!interaction.current.active) return;
+		interaction.current.active = false;
+		interaction.current.pendingX = null;
+		pendingEndRef.current = false;
+		setDragging(false);
+		setActiveThumbIndex(null);
+		if (interaction.current.changed && !disabled && !readOnly) onValuesCommit?.([...valuesRef.current]);
+		interaction.current.index = null;
+		interaction.current.changed = false;
+	}, [
+		disabled,
+		onValuesCommit,
+		readOnly
+	]);
+	const rootHandlers = {
+		catchtouchstart: React.useCallback((event) => {
+			"background only";
+			if (disabled || readOnly) {
+				interaction.current.index = null;
+				return;
+			}
+			const x = eventPageX(event);
+			if (!Number.isFinite(x)) return;
+			pendingEndRef.current = false;
+			interaction.current.active = true;
+			interaction.current.changed = false;
+			interaction.current.pendingX = x;
+			const current = valuesRef.current;
+			if (interaction.current.index === null && trackWidthRef.current > 0) {
+				const ratio = clampRatio((x - trackLeftRef.current) / trackWidthRef.current);
+				interaction.current.index = nearestValueIndex(current, valueForPercentage(ratio * 100, min, max, dir));
+			}
+			setActiveThumbIndex(interaction.current.index);
+			setDragging(true);
+			setValueIndicatorEverShown(true);
+			measure();
+			if (trackWidthRef.current > 0) updateFromRatio(clampRatio((x - trackLeftRef.current) / trackWidthRef.current));
+		}, [
+			dir,
+			disabled,
+			max,
+			measure,
+			min,
+			readOnly,
+			updateFromRatio
+		]),
+		catchtouchmove: React.useCallback((event) => {
+			"background only";
+			if (!interaction.current.active || disabled || readOnly) return;
+			const x = eventPageX(event);
+			if (!Number.isFinite(x)) return;
+			interaction.current.pendingX = x;
+			if (moveFrameRef.current !== null) return;
+			moveFrameRef.current = requestAnimationFrame(flushPendingMove);
+		}, [
+			disabled,
+			flushPendingMove,
+			readOnly
+		]),
+		catchtouchend: React.useCallback((event) => {
+			"background only";
+			if (!interaction.current.active) return;
+			cancelPendingMove();
+			const x = eventPageX(event);
+			if (Number.isFinite(x)) interaction.current.pendingX = x;
+			if (interaction.current.pendingX !== null && measureInFlight.current) {
+				pendingEndRef.current = true;
+				setDragging(false);
+				setActiveThumbIndex(null);
+				measure();
+				return;
+			}
+			if (interaction.current.pendingX !== null && trackWidthRef.current <= 0) {
+				pendingEndRef.current = true;
+				setDragging(false);
+				setActiveThumbIndex(null);
+				measure();
+				return;
+			}
+			if (interaction.current.pendingX !== null && trackWidthRef.current > 0) {
+				const pending = interaction.current.pendingX;
+				interaction.current.pendingX = null;
+				updateFromRatio(clampRatio((pending - trackLeftRef.current) / trackWidthRef.current));
+			}
+			finalizeRef.current?.();
+		}, [
+			cancelPendingMove,
+			measure,
+			updateFromRatio
+		]),
+		catchtouchcancel: React.useCallback(() => {
+			"background only";
+			if (!interaction.current.active) return;
+			cancelPendingMove();
+			interaction.current.active = false;
+			interaction.current.pendingX = null;
+			pendingEndRef.current = false;
+			setDragging(false);
+			setActiveThumbIndex(null);
+			interaction.current.index = null;
+			interaction.current.changed = false;
+		}, [cancelPendingMove])
+	};
+	React.useEffect(() => cancelPendingMove, [cancelPendingMove]);
+	React.useEffect(() => {
+		measure();
+	}, [measure, values.length]);
+	const classes = React.useMemo(() => getClasses({
+		disabled,
+		dragging,
+		valueIndicatorEverShown
+	}), [
+		disabled,
+		dragging,
+		getClasses,
+		valueIndicatorEverShown
+	]);
+	const dimensions = React.useMemo(() => ({
+		trackLeft,
+		trackWidth,
+		thumbWidth,
+		indicatorWidths
+	}), [
+		indicatorWidths,
+		thumbWidth,
+		trackLeft,
+		trackWidth
+	]);
+	const startThumb = React.useCallback((index) => {
+		interaction.current.index = index;
+	}, []);
+	const formatters = React.useMemo(() => ({
+		getAccessibilityLabel,
+		getAccessibilityValueText,
+		getValueIndicatorLabel
+	}), [
+		getAccessibilityLabel,
+		getAccessibilityValueText,
+		getValueIndicatorLabel
+	]);
+	const contextValue = React.useMemo(() => ({
+		values,
+		min,
+		max,
+		step,
+		allowedValues,
+		minStepsBetweenThumbs,
+		dir,
+		disabled,
+		readOnly,
+		invalid,
+		valueIndicatorTrigger: resolvedValueIndicatorTrigger,
+		dragging,
+		activeThumbIndex,
+		valueIndicatorEverShown,
+		classes,
+		getClasses,
+		trackRef,
+		dimensions,
+		registerThumb,
+		updateIndicatorWidth,
+		registerIndicator,
+		startThumb,
+		formatters,
+		interaction: interaction.current
+	}), [
+		activeThumbIndex,
+		allowedValues,
+		classes,
+		dimensions,
+		dir,
+		disabled,
+		dragging,
+		formatters,
+		getClasses,
+		invalid,
+		max,
+		min,
+		minStepsBetweenThumbs,
+		readOnly,
+		registerIndicator,
+		registerThumb,
+		resolvedValueIndicatorTrigger,
+		startThumb,
+		step,
+		updateIndicatorWidth,
+		valueIndicatorEverShown,
+		values
+	]);
+	return <SliderContext.Provider value={contextValue}>
+      <view {...mergeProps(rootHandlers, nativeProps, { "consume-slide-event": consumeSlideEvent }, forwardedRef ? { ref: forwardedRef } : {})} className={clsx(classes.root, className)} style={style}>
+        {children}
+      </view>
+    </SliderContext.Provider>;
+});
+SliderRoot.displayName = "SliderRoot";
+var SliderControl = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSliderContext("Slider.Control");
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(context.classes.control, className)}>
+      {children}
+    </view>;
+});
+SliderControl.displayName = "SliderControl";
+var SliderTrack = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSliderContext("Slider.Track");
+	return <view {...mergeProps(ref ? { ref } : {}, { ref: context.trackRef }, nativeProps)} className={clsx(context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging
+	}).track, className)}>
+      {children}
+    </view>;
+});
+SliderTrack.displayName = "SliderTrack";
+var SliderRange = React.forwardRef((props, ref) => {
+	const { children: _children, className, style, ...nativeProps } = props;
+	const context = useSliderContext("Slider.Range");
+	const percentages = context.values.map((value) => percentageForValue(value, context.min, context.max));
+	const end = context.values.length > 1 ? Math.max(...percentages) : percentages[0] ?? 0;
+	const start = context.values.length > 1 ? Math.min(...percentages) : 0;
+	const left = context.dir === "ltr" ? start : 100 - end;
+	const width = Math.max(0, end - start);
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging
+	}).range, className)} style={dynamicStyle(style, {
+		"--slider-range-left": `${left}%`,
+		"--slider-range-width": `${width}%`
+	})} />;
+});
+SliderRange.displayName = "SliderRange";
+var SliderThumb = React.forwardRef((props, forwardedRef) => {
+	const { children, index = 0, className, style, ...nativeProps } = props;
+	const context = useSliderContext("Slider.Thumb");
+	const value = context.values[index];
+	const localRef = React.useRef(null);
+	React.useEffect(() => {
+		context.registerThumb(index, localRef);
+	}, [context.registerThumb, index]);
+	if (value === void 0) return null;
+	const percent = percentageForValue(value, context.min, context.max);
+	const physicalPercent = context.dir === "ltr" ? percent : 100 - percent;
+	const offset = getThumbInBoundsOffset(context.dimensions.thumbWidth, physicalPercent, 1);
+	const accessibilityValue = context.formatters.getAccessibilityValueText?.(value, index) ?? `minimum ${context.min}, maximum ${context.max}, current ${value}`;
+	const { "accessibility-element": accessibilityElement = true, "accessibility-label": accessibilityLabel, "accessibility-role-description": accessibilityRoleDescription = "adjustable", "accessibility-value": providedAccessibilityValue, "accessibility-traits": accessibilityTraits, ...restNativeProps } = nativeProps;
+	return <view {...mergeProps(forwardedRef ? { ref: forwardedRef } : {}, { ref: localRef }, restNativeProps, { bindtouchstart: () => context.startThumb(index) })} className={clsx(context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging,
+		thumbDragging: context.dragging && context.activeThumbIndex === index
+	}).thumb, className)} style={dynamicStyle(style, {
+		"--slider-thumb-left": `${physicalPercent}%`,
+		"--slider-thumb-offset": `${offset}px`
+	})} accessibility-element={accessibilityElement} accessibility-label={accessibilityLabel ?? context.formatters.getAccessibilityLabel?.(index)} accessibility-role-description={accessibilityRoleDescription} accessibility-value={providedAccessibilityValue ?? accessibilityValue} accessibility-traits={context.disabled ? "disabled" : accessibilityTraits}>
+      {children}
+    </view>;
+});
+SliderThumb.displayName = "SliderThumb";
+var SliderTick = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = sliderTick.splitVariantProps(props);
+	const { children: _children, className, style, value, ...nativeProps } = restProps;
+	const context = useSliderContext("Slider.Tick");
+	const percent = percentageForValue(value, context.min, context.max);
+	const physicalPercent = context.dir === "ltr" ? percent : 100 - percent;
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(sliderTick(variantProps), className)} style={dynamicStyle(style, {
+		"--slider-tick-left": `${physicalPercent}%`,
+		"--slider-tick-offset": `${getThumbInBoundsOffset(context.dimensions.thumbWidth, physicalPercent, 1)}px`
+	})} accessibility-elements-hidden={true} />;
+});
+SliderTick.displayName = "SliderTick";
+var SliderMarkers = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSliderContext("Slider.Markers");
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(context.getClasses({ disabled: context.disabled }).markers, className)}>
+      {children}
+    </view>;
+});
+SliderMarkers.displayName = "SliderMarkers";
+var SliderMarker = React.forwardRef((props, ref) => {
+	const [variantProps, restProps] = sliderMarker.splitVariantProps(props);
+	const { children, className, style, value, ...nativeProps } = restProps;
+	const context = useSliderContext("Slider.Marker");
+	const percent = percentageForValue(value, context.min, context.max);
+	const physicalPercent = context.dir === "ltr" ? percent : 100 - percent;
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(sliderMarker({
+		...variantProps,
+		dir: context.dir,
+		disabled: context.disabled
+	}), className)} style={dynamicStyle(style, {
+		"--slider-marker-left": `${physicalPercent}%`,
+		"--slider-marker-offset": percent === 0 || percent === 100 ? "0px" : `${getThumbInBoundsOffset(context.dimensions.thumbWidth, physicalPercent, 1)}px`
+	})} accessibility-elements-hidden={true}>
+      {children}
+    </view>;
+});
+SliderMarker.displayName = "SliderMarker";
+var SliderValueIndicatorRoot = React.forwardRef((props, ref) => {
+	const { children, className, style, index = 0, bindlayoutchange: userBindLayoutChange, ...nativeProps } = props;
+	const context = useSliderContext("Slider.ValueIndicatorRoot");
+	const value = context.values[index];
+	const localRef = React.useRef(null);
+	React.useEffect(() => {
+		context.registerIndicator(index, localRef);
+	}, [
+		context.registerIndicator,
+		index,
+		value
+	]);
+	const handleLayoutChange = React.useCallback((...args) => {
+		"background only";
+		userBindLayoutChange?.(...args);
+		const width = getLayoutWidth(args[0]);
+		if (width != null) context.updateIndicatorWidth(index, width);
+	}, [
+		context,
+		index,
+		userBindLayoutChange
+	]);
+	if (value === void 0) return null;
+	const percent = percentageForValue(value, context.min, context.max);
+	const physicalPercent = context.dir === "ltr" ? percent : 100 - percent;
+	const thumbOffset = getThumbInBoundsOffset(context.dimensions.thumbWidth, physicalPercent, 1);
+	const indicatorOffset = getStickyLabelOffset(context.dimensions.indicatorWidths[index] ?? 0, physicalPercent, context.dimensions.thumbWidth, context.dimensions.trackWidth, 1);
+	const shown = context.dragging && context.activeThumbIndex === index;
+	const visible = !context.disabled && !context.readOnly && shown;
+	const classes = context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging,
+		valueIndicatorShown: visible,
+		valueIndicatorEverShown: context.valueIndicatorEverShown
+	});
+	return <view className={classes.valueIndicatorMotion} style={dynamicStyle(void 0, {
+		"--slider-value-indicator-left": `${physicalPercent}%`,
+		"--slider-value-indicator-offset": `${indicatorOffset}px`,
+		"--slider-thumb-offset": `${thumbOffset}px`
+	})} accessibility-elements-hidden={true}>
+        <view {...mergeProps(nativeProps, ref ? { ref } : {}, { ref: localRef }, { bindlayoutchange: handleLayoutChange })} className={clsx(classes.valueIndicatorRoot, className)} style={style} accessibility-elements-hidden={true}>
+          {children}
+        </view>
+      </view>;
+});
+SliderValueIndicatorRoot.displayName = "SliderValueIndicatorRoot";
+var SliderValueIndicatorArrow = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSliderContext("Slider.ValueIndicatorArrow");
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging
+	}).valueIndicatorArrow, className)}>
+        {children}
+      </view>;
+});
+SliderValueIndicatorArrow.displayName = "SliderValueIndicatorArrow";
+var SliderValueIndicatorArrowTip = React.forwardRef((props, ref) => {
+	const { children, className, ...nativeProps } = props;
+	const context = useSliderContext("Slider.ValueIndicatorArrowTip");
+	return <view {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging
+	}).valueIndicatorArrowTip, className)}>
+      {children}
+    </view>;
+});
+SliderValueIndicatorArrowTip.displayName = "SliderValueIndicatorArrowTip";
+var SliderValueIndicatorLabel = React.forwardRef((props, ref) => {
+	const { children, className, style, index = 0, ...nativeProps } = props;
+	const context = useSliderContext("Slider.ValueIndicatorLabel");
+	const value = context.values[index];
+	if (value === void 0) return null;
+	return <text {...mergeProps(ref ? { ref } : {}, nativeProps)} className={clsx(context.getClasses({
+		disabled: context.disabled,
+		dragging: context.dragging,
+		valueIndicatorEverShown: context.valueIndicatorEverShown
+	}).valueIndicatorLabel, className)} style={style}>
+        {children ?? context.formatters.getValueIndicatorLabel({
+		value,
+		thumbIndex: index
+	})}
+      </text>;
+});
+SliderValueIndicatorLabel.displayName = "SliderValueIndicatorLabel";
+function clampRatio(value) {
+	return Math.min(1, Math.max(0, value));
+}
+//#endregion
+export { SliderControl, SliderMarker, SliderMarkers, SliderRange, SliderRoot, SliderThumb, SliderTick, SliderTrack, SliderValueIndicatorArrow, SliderValueIndicatorArrowTip, SliderValueIndicatorLabel, SliderValueIndicatorRoot };

package/lib/components/Slider/Slider.namespace.d.ts

@@ -0,0 +1,2 @@
+export { SliderRoot as Root, SliderControl as Control, SliderTrack as Track, SliderRange as Range, SliderThumb as Thumb, SliderTick as Tick, SliderMarkers as Markers, SliderMarker as Marker, SliderValueIndicatorRoot as ValueIndicatorRoot, SliderValueIndicatorArrow as ValueIndicatorArrow, SliderValueIndicatorArrowTip as ValueIndicatorArrowTip, SliderValueIndicatorLabel as ValueIndicatorLabel, type SliderRootProps as RootProps, type SliderControlProps as ControlProps, type SliderTrackProps as TrackProps, type SliderRangeProps as RangeProps, type SliderThumbProps as ThumbProps, type SliderTickProps as TickProps, type SliderMarkersProps as MarkersProps, type SliderMarkerProps as MarkerProps, type SliderValueIndicatorRootProps as ValueIndicatorRootProps, type SliderValueIndicatorArrowProps as ValueIndicatorArrowProps, type SliderValueIndicatorArrowTipProps as ValueIndicatorArrowTipProps, type SliderValueIndicatorLabelProps as ValueIndicatorLabelProps, } from './Slider';
+//# sourceMappingURL=Slider.namespace.d.ts.map

package/lib/components/Slider/Slider.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,IAAI,EAClB,aAAa,IAAI,OAAO,EACxB,WAAW,IAAI,KAAK,EACpB,WAAW,IAAI,KAAK,EACpB,WAAW,IAAI,KAAK,EACpB,UAAU,IAAI,IAAI,EAClB,aAAa,IAAI,OAAO,EACxB,YAAY,IAAI,MAAM,EACtB,wBAAwB,IAAI,kBAAkB,EAC9C,yBAAyB,IAAI,mBAAmB,EAChD,4BAA4B,IAAI,sBAAsB,EACtD,yBAAyB,IAAI,mBAAmB,EAChD,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,kBAAkB,IAAI,YAAY,EACvC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,gBAAgB,IAAI,UAAU,EACnC,KAAK,eAAe,IAAI,SAAS,EACjC,KAAK,kBAAkB,IAAI,YAAY,EACvC,KAAK,iBAAiB,IAAI,WAAW,EACrC,KAAK,6BAA6B,IAAI,uBAAuB,EAC7D,KAAK,8BAA8B,IAAI,wBAAwB,EAC/D,KAAK,iCAAiC,IAAI,2BAA2B,EACrE,KAAK,8BAA8B,IAAI,wBAAwB,GAChE,MAAM,UAAU,CAAC"}

package/lib/components/Slider/Slider.namespace.js

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SliderControl, SliderMarker, SliderMarkers, SliderRange, SliderRoot, SliderThumb, SliderTick, SliderTrack, SliderValueIndicatorArrow, SliderValueIndicatorArrowTip, SliderValueIndicatorLabel, SliderValueIndicatorRoot } from "./Slider.jsx";
+//#region src/components/Slider/Slider.namespace.ts
+var Slider_namespace_exports = /* @__PURE__ */ __exportAll({
+	Control: () => SliderControl,
+	Marker: () => SliderMarker,
+	Markers: () => SliderMarkers,
+	Range: () => SliderRange,
+	Root: () => SliderRoot,
+	Thumb: () => SliderThumb,
+	Tick: () => SliderTick,
+	Track: () => SliderTrack,
+	ValueIndicatorArrow: () => SliderValueIndicatorArrow,
+	ValueIndicatorArrowTip: () => SliderValueIndicatorArrowTip,
+	ValueIndicatorLabel: () => SliderValueIndicatorLabel,
+	ValueIndicatorRoot: () => SliderValueIndicatorRoot
+});
+//#endregion
+export { Slider_namespace_exports };

package/lib/components/Slider/Slider.utils.d.ts

@@ -0,0 +1,19 @@
+export interface SliderGeometry {
+    left: number;
+    width: number;
+}
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function percentageForValue(value: number, min: number, max: number): number;
+export declare function valueForPercentage(percent: number, min: number, max: number, dir: "ltr" | "rtl"): number;
+export declare function decimalCount(value: number): number;
+export declare function roundValue(value: number, decimals: number): number;
+export declare function closestAllowedValue(value: number, allowedValues: readonly number[]): number;
+export declare function normalizeValue(value: number, min: number, max: number, step: number, allowedValues?: readonly number[]): number;
+export declare function normalizeValues(values: readonly number[] | undefined, min: number, max: number, step: number, allowedValues?: readonly number[]): number[];
+export declare function nearestValueIndex(values: readonly number[], value: number): number;
+export declare function hasMinimumSteps(values: readonly number[], minimumSteps: number, step: number): boolean;
+export declare function getThumbInBoundsOffset(width: number, percent: number, direction: 1 | -1): number;
+export declare function getStickyLabelOffset(labelWidth: number, percent: number, thumbWidth: number, trackWidth: number, direction: 1 | -1): number;
+export declare function eventPageX(event: unknown): number;
+export declare function geometryFromRect(value: unknown): SliderGeometry | null;
+//# sourceMappingURL=Slider.utils.d.ts.map

package/lib/components/Slider/Slider.utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.utils.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/Slider.utils.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAGlF;AAED,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,MAAM,EACf,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,KAAK,GAAG,KAAK,GACjB,MAAM,CAGR;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKlD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGlE;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,MAAM,EAAE,GAAG,MAAM,CAa3F;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,GAChC,MAAM,CAcR;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,SAAS,MAAM,EAAE,GAAG,SAAS,EACrC,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,GAChC,MAAM,EAAE,CAKV;AAED,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAYlF;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,SAAS,MAAM,EAAE,EACzB,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,MAAM,GACX,OAAO,CAUT;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAKhG;AAED,wBAAgB,oBAAoB,CAClC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,GAChB,MAAM,CAOR;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAqBjD;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,cAAc,GAAG,IAAI,CAKtE"}