@soroush.tech/design-system 2.0.0-rc.2 → 2.0.0-rc.3

package/dist/InputRange.cjs

@@ -0,0 +1,675 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-DU81aGy9.cjs");
+const require_utils = require("./utils.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_useControlled = require("./useControlled-C666KpQ0.cjs");
+const require_precision = require("./precision-B58cTPB2.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/InputRange/utils/range.ts
+/** How far along the range a value is, as a percent. */
+function valueToPercent(value, min, max) {
+	return max === min ? 0 : (value - min) * 100 / (max - min);
+}
+/** The value a fraction of the way along the range is. */
+function fractionToValue(fraction, min, max) {
+	return (max - min) * fraction + min;
+}
+const ascending = (a, b) => a - b;
+/**
+* The thumbs' values, sorted and clamped to the range - one for a number, each for an array. An
+* empty array has no thumb to draw or move, so it is one thumb at `min`, as no value is.
+*/
+function normalizeValues(value, min, max) {
+	const list = typeof value === "number" ? [value] : [...value].sort(ascending);
+	return (list.length === 0 ? [min] : list).map((entry) => require_utils.clamp(entry, min, max));
+}
+/** The marks: one at every step for `true`, the ones given, or none. */
+function getMarks(marks, step, min, max) {
+	if (marks === true && step !== null) {
+		const steps = Math.floor(Number(((max - min) / step).toPrecision(12)));
+		return Array.from({ length: steps + 1 }, (_, index) => ({ value: require_precision.snapToStep(min + step * index, step, min) }));
+	}
+	return Array.isArray(marks) ? marks : [];
+}
+/** The index of the value nearest `target` - the preferred one when it is as near as the nearest. */
+function findClosest(values, target, preferredIndex = -1) {
+	let closest = 0;
+	values.forEach((value, index) => {
+		if (Math.abs(target - value) <= Math.abs(target - values[closest])) closest = index;
+	});
+	return preferredIndex >= 0 && values[preferredIndex] === values[closest] ? preferredIndex : closest;
+}
+/**
+* Moves one thumb to a value. Passing a neighbour swaps their places, the values staying sorted;
+* without `shouldSwap` the thumb stops at its neighbour instead.
+*/
+function moveThumb(values, index, target, shouldSwap) {
+	const bounded = shouldSwap ? target : require_utils.clamp(target, values[index - 1] ?? Number.NEGATIVE_INFINITY, values[index + 1] ?? Number.POSITIVE_INFINITY);
+	const moved = values.map((value, place) => place === index ? bounded : value).sort(ascending);
+	return {
+		values: moved,
+		index: shouldSwap ? moved.indexOf(bounded) : index
+	};
+}
+function areValuesEqual(a, b) {
+	return a.length === b.length && a.every((value, index) => value === b[index]);
+}
+const KEYS = /* @__PURE__ */ new Set([
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"PageUp",
+	"PageDown",
+	"Home",
+	"End"
+]);
+/** Whether the slider takes the key. */
+const isRangeKey = (key) => KEYS.has(key);
+const upKeys = (isRtl) => [
+	"ArrowUp",
+	isRtl ? "ArrowLeft" : "ArrowRight",
+	"PageUp",
+	"End"
+];
+const downKeys = (isRtl) => [
+	"ArrowDown",
+	isRtl ? "ArrowRight" : "ArrowLeft",
+	"PageDown",
+	"Home"
+];
+function getMarkValue({ key, value, isRtl, marks }) {
+	const values = marks.map((mark) => mark.value);
+	if (values.length === 0) return null;
+	if (key === "Home") return values[0];
+	if (key === "End") return values.at(-1);
+	if (downKeys(isRtl).includes(key)) return [...values].reverse().find((mark) => mark < value) ?? values[0];
+	return values.find((mark) => mark > value) ?? values.at(-1);
+}
+/** The value a key moves a thumb to - `null` when the key moves nothing. */
+function getKeyValue(params) {
+	const { key, shiftKey, value, step, shiftStep, min, max, isRtl } = params;
+	if (!isRangeKey(key)) return null;
+	if (step === null) return getMarkValue(params);
+	if (key === "Home") return min;
+	if (key === "End") return max;
+	const size = key === "PageUp" || key === "PageDown" || shiftKey ? shiftStep : step;
+	const direction = upKeys(isRtl).includes(key) ? 1 : -1;
+	return require_utils.clamp(require_precision.addExact(value, direction * size), min, max);
+}
+/** The value under a point - along the box, snapped to the step or the nearest mark. */
+function getValueAtPoint({ x, y, rect, orientation, isRtl, min, max, step, marks }) {
+	const length = orientation === "vertical" ? rect.height : rect.width;
+	if (length === 0) return null;
+	let fraction = orientation === "vertical" ? (rect.bottom - y) / length : (x - rect.left) / length;
+	if (orientation === "horizontal" && isRtl) fraction = 1 - fraction;
+	const raw = fractionToValue(fraction, min, max);
+	if (step !== null) return require_utils.clamp(require_precision.snapToStep(raw, step, min), min, max);
+	const markValues = marks.map((mark) => mark.value);
+	if (markValues.length === 0) return require_utils.clamp(raw, min, max);
+	return require_utils.clamp(markValues[findClosest(markValues, raw)], min, max);
+}
+//#endregion
+//#region src/InputRange/hooks/useInputRange.ts
+const NONE = -1;
+function withTarget(event, target) {
+	const native = event.nativeEvent;
+	const clone = new native.constructor(native.type, native);
+	Object.defineProperty(clone, "target", {
+		writable: true,
+		value: target
+	});
+	return clone;
+}
+/**
+* A slider's state: its value (controlled or not) as the thumbs' sorted values, which thumb is
+* pressed, hovered or focused, and the handlers - the pointer's on the root, which keeps the
+* pointer while it drags, and the keys' and the native input's on each thumb's own input.
+*/
+function useInputRange({ value: valueProp, defaultValue, min, max, step, shiftStep, marks, orientation, shouldSwapThumbs, isDisabled, name, rootRef, onChange, onChangeCommitted }) {
+	const [value, setValue] = require_useControlled.useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? min
+	});
+	const isRange = typeof value !== "number";
+	const values = normalizeValues(value, min, max);
+	const [active, setActive] = (0, react.useState)(NONE);
+	const [hovered, setHovered] = (0, react.useState)(NONE);
+	const [focused, setFocused] = (0, react.useState)(NONE);
+	const [lastUsed, setLastUsed] = (0, react.useState)(NONE);
+	const dragIndex = (0, react.useRef)(NONE);
+	const pointerId = (0, react.useRef)(NONE);
+	const lastChanged = (0, react.useRef)(0);
+	const toOutput = (list) => isRange ? [...list] : list[0];
+	const emit = (event, list, index) => {
+		const next = toOutput(list);
+		setValue(next);
+		if (areValuesEqual(list, values)) return;
+		lastChanged.current = next;
+		onChange?.(withTarget(event, {
+			value: next,
+			name
+		}), next, index);
+	};
+	const focusThumb = (index) => {
+		(rootRef.current?.querySelector(`input[data-index="${index}"]`))?.focus({ preventScroll: true });
+	};
+	const resolveAt = (event, held) => {
+		const target = getValueAtPoint({
+			x: event.clientX,
+			y: event.clientY,
+			rect: rootRef.current.getBoundingClientRect(),
+			orientation,
+			isRtl: require_isRtl.isRtl(rootRef.current),
+			min,
+			max,
+			step,
+			marks
+		});
+		if (target === null) return null;
+		const index = held === NONE ? findClosest(values, target, lastUsed) : held;
+		return moveThumb(values, index, target, shouldSwapThumbs);
+	};
+	const hold = (event, moved) => {
+		dragIndex.current = moved.index;
+		setActive(moved.index);
+		setLastUsed(moved.index);
+		focusThumb(moved.index);
+		emit(event, moved.values, moved.index);
+	};
+	const handlePointerDown = (event) => {
+		if (isDisabled || event.defaultPrevented || event.button !== 0) return;
+		const moved = resolveAt(event, NONE);
+		if (moved === null) return;
+		event.preventDefault();
+		pointerId.current = event.pointerId;
+		lastChanged.current = toOutput(values);
+		hold(event, moved);
+		try {
+			event.currentTarget.setPointerCapture(event.pointerId);
+		} catch {}
+	};
+	const release = (event) => {
+		setActive(NONE);
+		pointerId.current = NONE;
+		dragIndex.current = NONE;
+		if (event.currentTarget.hasPointerCapture?.(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		onChangeCommitted?.(event, lastChanged.current);
+	};
+	const handlePointerMove = (event) => {
+		if (event.pointerId !== pointerId.current) return;
+		if (event.buttons === 0) return release(event);
+		const moved = resolveAt(event, dragIndex.current);
+		if (moved !== null) hold(event, moved);
+	};
+	const handlePointerEnd = (event) => {
+		if (event.pointerId === pointerId.current) release(event);
+	};
+	const change = (event, index, target) => {
+		const moved = moveThumb(values, index, require_utils.clamp(target, min, max), shouldSwapThumbs);
+		if (moved.index !== index) focusThumb(moved.index);
+		setFocused(moved.index);
+		emit(event, moved.values, moved.index);
+		onChangeCommitted?.(event, toOutput(moved.values));
+	};
+	const getInputProps = (index) => ({
+		onKeyDown: (event) => {
+			if (!isRangeKey(event.key)) return;
+			event.preventDefault();
+			const next = getKeyValue({
+				key: event.key,
+				shiftKey: event.shiftKey,
+				value: values[index],
+				step,
+				shiftStep,
+				min,
+				max,
+				isRtl: require_isRtl.isRtl(event.currentTarget),
+				marks
+			});
+			if (next !== null) change(event, index, next);
+		},
+		onChange: (event) => {
+			const typed = event.currentTarget.valueAsNumber;
+			const markValues = marks.map((mark) => mark.value);
+			const target = step === null && markValues.length > 0 ? markValues[findClosest(markValues, typed)] : typed;
+			change(event, index, target);
+		},
+		onFocus: () => setFocused(index),
+		onBlur: () => setFocused(NONE)
+	});
+	const getThumbProps = (index) => ({
+		onMouseEnter: () => setHovered(index),
+		onMouseLeave: () => setHovered(NONE)
+	});
+	return {
+		values,
+		isRange,
+		active: isDisabled ? NONE : active,
+		hovered,
+		focused,
+		lastUsed,
+		rootProps: {
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerEnd,
+			onPointerCancel: handlePointerEnd,
+			onLostPointerCapture: handlePointerEnd
+		},
+		getInputProps,
+		getThumbProps
+	};
+}
+//#endregion
+//#region src/InputRange/InputRange.tsx
+const RAIL = {
+	sm: .25,
+	md: .5,
+	lg: .75
+};
+const railThickness = (theme, size) => theme.space[RAIL[size] ?? .5];
+const layoutStyles = (0, require_src.src_exports.system)({
+	width: true,
+	height: true,
+	minWidth: true,
+	maxWidth: true,
+	minHeight: true,
+	maxHeight: true
+});
+const InputRangeRoot = require_src.styled("span", {
+	name: "InputRange",
+	label: "InputRange",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"size",
+		"orientation",
+		"isDisabled"
+	]),
+	systemProps: [require_src.src_exports.space, layoutStyles]
+})(({ theme, size, orientation, isDisabled }) => {
+	const thumb = theme.icon[size];
+	return {
+		position: "relative",
+		display: "block",
+		boxSizing: "border-box",
+		...orientation === "vertical" ? {
+			width: thumb,
+			height: "12rem",
+			marginBlock: `calc(${thumb} / 2)`
+		} : {
+			height: thumb,
+			marginInline: `calc(${thumb} / 2)`
+		},
+		touchAction: "none",
+		userSelect: "none",
+		cursor: "pointer",
+		...isDisabled && {
+			opacity: .5,
+			cursor: "not-allowed",
+			pointerEvents: "none"
+		}
+	};
+});
+const InputRangeRail = require_src.styled("span", {
+	name: "InputRange",
+	slot: "rail",
+	label: "InputRangeRail",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"size",
+		"orientation",
+		"color",
+		"isInverted"
+	])
+})(({ theme, size, orientation, color, isInverted }) => {
+	const thickness = railThickness(theme, size);
+	const fill = isInverted ? (0, require_src.src_exports.get)(theme, `palette.${color}.main`) : (0, require_src.src_exports.get)(theme, "border.light");
+	return {
+		position: "absolute",
+		borderRadius: theme.radii.sm,
+		backgroundColor: fill,
+		...orientation === "vertical" ? {
+			top: 0,
+			bottom: 0,
+			insetInlineStart: "50%",
+			width: thickness,
+			marginInlineStart: `calc(${thickness} / -2)`
+		} : {
+			insetInlineStart: 0,
+			insetInlineEnd: 0,
+			top: "50%",
+			height: thickness,
+			marginTop: `calc(${thickness} / -2)`
+		}
+	};
+});
+const InputRangeTrack = require_src.styled("span", {
+	name: "InputRange",
+	slot: "track",
+	label: "InputRangeTrack",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"size",
+		"orientation",
+		"color",
+		"isInverted",
+		"isDragging"
+	])
+})(({ theme, size, orientation, color, isInverted, isDragging }) => {
+	const thickness = railThickness(theme, size);
+	const fill = isInverted ? (0, require_src.src_exports.get)(theme, "border.light") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		position: "absolute",
+		borderRadius: theme.radii.sm,
+		backgroundColor: fill,
+		transition: isDragging ? "none" : "inset 0.1s ease, width 0.1s ease, height 0.1s ease",
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" },
+		...orientation === "vertical" ? {
+			insetInlineStart: "50%",
+			width: thickness,
+			marginInlineStart: `calc(${thickness} / -2)`
+		} : {
+			top: "50%",
+			height: thickness,
+			marginTop: `calc(${thickness} / -2)`
+		}
+	};
+});
+const InputRangeMark = require_src.styled("span", {
+	name: "InputRange",
+	slot: "mark",
+	label: "InputRangeMark",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"size",
+		"orientation",
+		"color",
+		"isActive"
+	])
+})(({ theme, size, orientation, color, isActive }) => {
+	const thickness = railThickness(theme, size);
+	return {
+		position: "absolute",
+		pointerEvents: "none",
+		opacity: isActive ? .5 : 1,
+		backgroundColor: isActive ? (0, require_src.src_exports.get)(theme, `palette.${color}.contrastText`) : (0, require_src.src_exports.get)(theme, "text.disabled"),
+		...orientation === "vertical" ? {
+			insetInlineStart: "50%",
+			width: thickness,
+			height: 2,
+			marginInlineStart: `calc(${thickness} / -2)`,
+			marginBottom: -1
+		} : {
+			top: "50%",
+			width: 2,
+			height: thickness,
+			marginTop: `calc(${thickness} / -2)`,
+			marginInlineStart: -1
+		}
+	};
+});
+const InputRangeMarkLabel = require_src.styled("span", {
+	name: "InputRange",
+	slot: "markLabel",
+	label: "InputRangeMarkLabel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["size", "orientation"])
+})(({ theme, size, orientation }) => {
+	const thumb = theme.icon[size];
+	return {
+		position: "absolute",
+		pointerEvents: "none",
+		whiteSpace: "nowrap",
+		fontSize: theme.fontSizes[0],
+		color: (0, require_src.src_exports.get)(theme, "text.secondary"),
+		...orientation === "vertical" ? {
+			insetInlineStart: `calc(50% + ${thumb})`,
+			transform: "translateY(50%)"
+		} : {
+			top: `calc(50% + ${thumb})`,
+			transform: "translateX(-50%)",
+			"[dir=\"rtl\"] &": { transform: "translateX(50%)" }
+		}
+	};
+});
+const InputRangeThumb = require_src.styled("span", {
+	name: "InputRange",
+	slot: "thumb",
+	label: "InputRangeThumb",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"size",
+		"orientation",
+		"color",
+		"isActive",
+		"isPassive"
+	])
+})(({ theme, size, orientation, color, isActive, isPassive }) => {
+	const thumb = theme.icon[size];
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		position: "absolute",
+		boxSizing: "border-box",
+		width: thumb,
+		height: thumb,
+		borderRadius: "50%",
+		backgroundColor: main,
+		...isPassive && { pointerEvents: "none" },
+		boxShadow: isActive ? `0 0 0 ${theme.space[1]} ${main}33` : "none",
+		transition: "box-shadow 0.15s ease",
+		"&:hover": { boxShadow: `0 0 0 ${theme.space[1]} ${main}29` },
+		"&:has(input:focus-visible)": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: theme.space[.5]
+		},
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" },
+		...orientation === "vertical" ? {
+			insetInlineStart: "50%",
+			marginInlineStart: `calc(${thumb} / -2)`,
+			marginBottom: `calc(${thumb} / -2)`
+		} : {
+			top: "50%",
+			marginTop: `calc(${thumb} / -2)`,
+			marginInlineStart: `calc(${thumb} / -2)`
+		}
+	};
+});
+const InputRangeInput = require_src.styled("input", {
+	name: "InputRange",
+	slot: "input",
+	label: "InputRangeInput",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["orientation"])
+})(({ orientation }) => ({
+	position: "absolute",
+	inset: 0,
+	width: "100%",
+	height: "100%",
+	margin: 0,
+	padding: 0,
+	opacity: 0,
+	pointerEvents: "none",
+	...orientation === "vertical" && { writingMode: "vertical-lr" }
+}));
+const InputRangeValueLabel = require_src.styled("span", {
+	name: "InputRange",
+	slot: "valueLabel",
+	label: "InputRangeValueLabel",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		"color",
+		"orientation",
+		"isOpen"
+	])
+})(({ theme, color, orientation, isOpen }) => ({
+	position: "absolute",
+	pointerEvents: "none",
+	whiteSpace: "nowrap",
+	padding: `${theme.space[.25]} ${theme.space[1]}`,
+	borderRadius: theme.radii.sm,
+	fontSize: theme.fontSizes[0],
+	lineHeight: 1.4,
+	color: (0, require_src.src_exports.get)(theme, `palette.${color}.contrastText`),
+	backgroundColor: (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
+	visibility: isOpen ? "visible" : "hidden",
+	...orientation === "vertical" ? {
+		insetInlineStart: "100%",
+		top: "50%",
+		marginInlineStart: theme.space[1],
+		transform: "translateY(-50%)"
+	} : {
+		bottom: "100%",
+		insetInlineStart: "50%",
+		marginBottom: theme.space[1],
+		transform: "translateX(-50%)",
+		"[dir=\"rtl\"] &": { transform: "translateX(50%)" }
+	}
+}));
+const place = (orientation, percent) => orientation === "vertical" ? { bottom: `${percent}%` } : { insetInlineStart: `${percent}%` };
+/**
+* @description A slider: one value on a range, or two or more thumbs for a range of values.
+* Each thumb is a visually hidden native `<input type="range">`, so the keys (the arrows, Page,
+* Home and End), assistive technology and forms work as the platform's; the pointer drags a thumb,
+* touch included. Marks, a value label, a vertical layout and a track drawn or not or inverted.
+* In a `FormControl` it takes the field's size, color, error, and disabled state, and its
+* `FormLabel` targets the first thumb.
+*/
+function InputRange({ value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step: stepProp, shiftStep: shiftStepProp, marks: marksProp, orientation: orientationProp, track: trackProp, scale = (entry) => entry, valueLabel: valueLabelProp, formatValueLabel, getAriaLabel, getAriaValueText, shouldSwapThumbs: shouldSwapProp, size: sizeProp, color: colorProp, disabled: disabledProp, error: errorProp, name, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...rest }) {
+	const dp = require_theme.useDefaultProps("InputRange");
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		size: sizeProp ?? dp.size,
+		color: colorProp ?? dp.color
+	});
+	const color = fc.error ? "error" : fc.color ?? "primary";
+	const step = stepProp === void 0 ? dp.step ?? 1 : stepProp;
+	const orientation = orientationProp ?? dp.orientation ?? "horizontal";
+	const track = trackProp ?? dp.track ?? "normal";
+	const valueLabel = valueLabelProp ?? dp.valueLabel ?? "off";
+	const marks = getMarks(marksProp ?? false, step, min, max);
+	const rootRef = (0, react.useRef)(null);
+	const baseId = (0, react.useId)();
+	const range = useInputRange({
+		value,
+		defaultValue,
+		min,
+		max,
+		step,
+		shiftStep: shiftStepProp ?? dp.shiftStep ?? 10,
+		marks,
+		orientation,
+		shouldSwapThumbs: shouldSwapProp ?? dp.shouldSwapThumbs ?? true,
+		isDisabled: fc.disabled,
+		name,
+		rootRef,
+		onChange,
+		onChangeCommitted
+	});
+	const { values } = range;
+	const thumbKeys = values.map((_, position) => `${baseId}-${position}`);
+	const trackStart = valueToPercent(range.isRange ? values[0] : min, min, max);
+	const trackEnd = valueToPercent(values.at(-1), min, max);
+	const isInverted = track === "inverted";
+	const axis = {
+		size: fc.size,
+		orientation
+	};
+	const isDragging = range.active !== -1;
+	const isMarkActive = (mark) => {
+		if (track === false) return false;
+		const covered = mark >= values[0] && mark <= values.at(-1);
+		return range.isRange || isInverted ? covered !== isInverted : mark <= values[0];
+	};
+	const trackStyle = orientation === "vertical" ? {
+		bottom: `${trackStart}%`,
+		height: `${trackEnd - trackStart}%`
+	} : {
+		insetInlineStart: `${trackStart}%`,
+		width: `${trackEnd - trackStart}%`
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputRangeRoot, {
+		ref: rootRef,
+		isDisabled: fc.disabled,
+		className,
+		"data-testid": dataTestid,
+		...axis,
+		...range.rootProps,
+		...rest,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeRail, {
+				color,
+				isInverted,
+				...axis
+			}),
+			track !== false && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeTrack, {
+				color,
+				isInverted,
+				isDragging,
+				style: trackStyle,
+				...axis
+			}),
+			marks.filter((mark) => mark.value >= min && mark.value <= max).map((mark) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeMark, {
+				"data-mark": mark.value,
+				color,
+				isActive: isMarkActive(mark.value),
+				style: place(orientation, valueToPercent(mark.value, min, max)),
+				...axis
+			}), mark.label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeMarkLabel, {
+				"aria-hidden": true,
+				style: place(orientation, valueToPercent(mark.value, min, max)),
+				...axis,
+				children: mark.label
+			})] }, mark.value)),
+			values.map((thumbValue, index) => {
+				const isShown = valueLabel === "on" || valueLabel === "auto" && [
+					range.active,
+					range.hovered,
+					range.focused
+				].includes(index);
+				const zIndex = range.lastUsed === index ? 1 : void 0;
+				const input = range.getInputProps(index);
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputRangeThumb, {
+					"data-index": index,
+					color,
+					isActive: range.active === index,
+					isPassive: range.active !== -1 && range.active !== index,
+					style: {
+						...place(orientation, valueToPercent(thumbValue, min, max)),
+						zIndex
+					},
+					...axis,
+					...range.getThumbProps(index),
+					children: [valueLabel !== "off" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeValueLabel, {
+						"aria-hidden": true,
+						color,
+						orientation,
+						isOpen: isShown,
+						children: formatValueLabel ? formatValueLabel(scale(thumbValue), index) : scale(thumbValue)
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputRangeInput, {
+						type: "range",
+						orientation,
+						"data-index": index,
+						id: index === 0 ? fc.id : void 0,
+						name,
+						min,
+						max,
+						step: step ?? "any",
+						value: thumbValue,
+						disabled: fc.disabled,
+						"aria-label": getAriaLabel?.(index) ?? ariaLabel,
+						"aria-labelledby": ariaLabelledby ?? fc.labelId,
+						"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+						"aria-invalid": fc.error || void 0,
+						"aria-orientation": orientation,
+						"aria-valuemin": scale(min),
+						"aria-valuemax": scale(max),
+						"aria-valuenow": scale(thumbValue),
+						"aria-valuetext": getAriaValueText?.(scale(thumbValue), index),
+						...input
+					})]
+				}, thumbKeys[index]);
+			})
+		]
+	});
+}
+//#endregion
+exports.InputRange = InputRange;