@sprawlify/primitives 0.0.1

package/dist/machines/slider/index.cjs

@@ -0,0 +1,957 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/slider/slider.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("slider").parts("root", "label", "thumb", "valueText", "track", "range", "control", "markerGroup", "marker", "draggingIndicator");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/slider/slider.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
+const getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
+const getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
+const getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
+const getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
+const getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
+const getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
+const getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
+const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+const getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
+const getThumbEls = (ctx) => require_dom_query.queryAll(getControlEl(ctx), "[role=slider]");
+const getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
+const getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
+const getControlEl = (ctx) => ctx.getById(getControlId(ctx));
+const getPointValue = (params, point) => {
+	const { prop, scope, refs } = params;
+	const controlEl = getControlEl(scope);
+	if (!controlEl) return;
+	const offset = refs.get("thumbDragOffset");
+	return require_utils.getPercentValue(require_dom_query.getRelativePoint({
+		x: point.x - (offset?.x ?? 0),
+		y: point.y - (offset?.y ?? 0)
+	}, controlEl).getPercentValue({
+		orientation: prop("orientation"),
+		dir: prop("dir"),
+		inverted: { y: true }
+	}), prop("min"), prop("max"), prop("step"));
+};
+const dispatchChangeEvent = (ctx, value) => {
+	value.forEach((value$1, index) => {
+		const inputEl = getHiddenInputEl(ctx, index);
+		if (!inputEl) return;
+		require_dom_query.dispatchInputValueEvent(inputEl, { value: value$1 });
+	});
+};
+const getOffsetRect = (el) => ({
+	left: el?.offsetLeft ?? 0,
+	top: el?.offsetTop ?? 0,
+	width: el?.offsetWidth ?? 0,
+	height: el?.offsetHeight ?? 0
+});
+
+//#endregion
+//#region src/machines/slider/slider.style.ts
+function getBounds(value) {
+	return [value[0], value[value.length - 1]];
+}
+function getRangeOffsets(params) {
+	const { prop, computed } = params;
+	const valuePercent = computed("valuePercent");
+	const [firstPercent, lastPercent] = getBounds(valuePercent);
+	if (valuePercent.length === 1) {
+		if (prop("origin") === "center") {
+			const isNegative = valuePercent[0] < 50;
+			return {
+				start: isNegative ? `${valuePercent[0]}%` : "50%",
+				end: isNegative ? "50%" : `${100 - valuePercent[0]}%`
+			};
+		}
+		if (prop("origin") === "end") return {
+			start: `${lastPercent}%`,
+			end: "0%"
+		};
+		return {
+			start: "0%",
+			end: `${100 - lastPercent}%`
+		};
+	}
+	return {
+		start: `${firstPercent}%`,
+		end: `${100 - lastPercent}%`
+	};
+}
+function getRangeStyle(params) {
+	const { computed } = params;
+	const isVertical = computed("isVertical");
+	const isRtl = computed("isRtl");
+	if (isVertical) return {
+		position: "absolute",
+		bottom: "var(--slider-range-start)",
+		top: "var(--slider-range-end)"
+	};
+	return {
+		position: "absolute",
+		[isRtl ? "right" : "left"]: "var(--slider-range-start)",
+		[isRtl ? "left" : "right"]: "var(--slider-range-end)"
+	};
+}
+function getVerticalThumbOffset(params, value) {
+	const { context, prop } = params;
+	const { height = 0 } = context.get("thumbSize") ?? {};
+	const getValue = require_utils.getValueTransformer([prop("min"), prop("max")], [-height / 2, height / 2]);
+	return parseFloat(getValue(value).toFixed(2));
+}
+function getHorizontalThumbOffset(params, value) {
+	const { computed, context, prop } = params;
+	const { width = 0 } = context.get("thumbSize") ?? {};
+	if (computed("isRtl")) {
+		const getValue$1 = require_utils.getValueTransformer([prop("max"), prop("min")], [-width / 2, width / 2]);
+		return -1 * parseFloat(getValue$1(value).toFixed(2));
+	}
+	const getValue = require_utils.getValueTransformer([prop("min"), prop("max")], [-width / 2, width / 2]);
+	return parseFloat(getValue(value).toFixed(2));
+}
+function getOffset(params, percent, value) {
+	const { computed, prop } = params;
+	if (prop("thumbAlignment") === "center") return `${percent}%`;
+	return `calc(${percent}% - ${computed("isVertical") ? getVerticalThumbOffset(params, value) : getHorizontalThumbOffset(params, value)}px)`;
+}
+function getThumbOffset(params, value) {
+	const { prop } = params;
+	return getOffset(params, require_utils.getValuePercent(value, prop("min"), prop("max")) * 100, value);
+}
+function getVisibility(params) {
+	const { computed, prop } = params;
+	let visibility = "visible";
+	if (prop("thumbAlignment") === "contain" && !computed("hasMeasuredThumbSize")) visibility = "hidden";
+	return visibility;
+}
+function getThumbStyle(params, index) {
+	const { computed, context } = params;
+	const placementProp = computed("isVertical") ? "bottom" : "insetInlineStart";
+	const focusedIndex = context.get("focusedIndex");
+	return {
+		visibility: getVisibility(params),
+		position: "absolute",
+		transform: "var(--slider-thumb-transform)",
+		[placementProp]: `var(--slider-thumb-offset-${index})`,
+		zIndex: focusedIndex === index ? 1 : void 0
+	};
+}
+function getControlStyle() {
+	return {
+		touchAction: "none",
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		position: "relative"
+	};
+}
+function getRootStyle(params) {
+	const { context, computed } = params;
+	const isVertical = computed("isVertical");
+	const isRtl = computed("isRtl");
+	const range = getRangeOffsets(params);
+	const thumbSize = context.get("thumbSize");
+	return {
+		...context.get("value").reduce((styles, value, index) => {
+			const offset = getThumbOffset(params, value);
+			return {
+				...styles,
+				[`--slider-thumb-offset-${index}`]: offset
+			};
+		}, {}),
+		"--slider-thumb-width": require_utils.toPx(thumbSize?.width),
+		"--slider-thumb-height": require_utils.toPx(thumbSize?.height),
+		"--slider-thumb-transform": isVertical ? "translateY(50%)" : isRtl ? "translateX(50%)" : "translateX(-50%)",
+		"--slider-range-start": range.start,
+		"--slider-range-end": range.end
+	};
+}
+function getMarkerStyle(params, value) {
+	const { computed } = params;
+	const isHorizontal = computed("isHorizontal");
+	const isRtl = computed("isRtl");
+	return {
+		visibility: getVisibility(params),
+		position: "absolute",
+		pointerEvents: "none",
+		[isHorizontal ? "insetInlineStart" : "bottom"]: getThumbOffset(params, value),
+		translate: "var(--translate-x) var(--translate-y)",
+		"--translate-x": isHorizontal ? isRtl ? "50%" : "-50%" : "0%",
+		"--translate-y": !isHorizontal ? "50%" : "0%"
+	};
+}
+function getMarkerGroupStyle() {
+	return {
+		userSelect: "none",
+		WebkitUserSelect: "none",
+		pointerEvents: "none",
+		position: "relative"
+	};
+}
+
+//#endregion
+//#region src/machines/slider/slider.utils.ts
+function normalizeValues(params, nextValues) {
+	return nextValues.map((value, index) => {
+		return constrainValue(params, value, index);
+	});
+}
+function getRangeAtIndex(params, index) {
+	const { context, prop } = params;
+	const step = prop("step") * prop("minStepsBetweenThumbs");
+	return require_utils.getValueRanges(context.get("value"), prop("min"), prop("max"), step)[index];
+}
+function constrainValue(params, value, index) {
+	const { prop } = params;
+	const range = getRangeAtIndex(params, index);
+	return require_utils.clampValue(require_utils.snapValueToStep(value, prop("min"), prop("max"), prop("step")), range.min, range.max);
+}
+function decrement(params, index, step) {
+	const { context, prop } = params;
+	const idx = index ?? context.get("focusedIndex");
+	const range = getRangeAtIndex(params, idx);
+	const nextValues = require_utils.getPreviousStepValue(idx, {
+		...range,
+		step: step ?? prop("step"),
+		values: context.get("value")
+	});
+	nextValues[idx] = require_utils.clampValue(nextValues[idx], range.min, range.max);
+	return nextValues;
+}
+function increment(params, index, step) {
+	const { context, prop } = params;
+	const idx = index ?? context.get("focusedIndex");
+	const range = getRangeAtIndex(params, idx);
+	const nextValues = require_utils.getNextStepValue(idx, {
+		...range,
+		step: step ?? prop("step"),
+		values: context.get("value")
+	});
+	nextValues[idx] = require_utils.clampValue(nextValues[idx], range.min, range.max);
+	return nextValues;
+}
+function getClosestIndex(params, pointValue) {
+	const { context } = params;
+	const values = context.get("value");
+	let closestIndex = 0;
+	let minDistance = Math.abs(values[0] - pointValue);
+	for (let i = 1; i < values.length; i++) {
+		const distance = Math.abs(values[i] - pointValue);
+		if (distance <= minDistance) {
+			closestIndex = i;
+			minDistance = distance;
+		}
+	}
+	return selectMovableThumb(params, closestIndex);
+}
+function selectMovableThumb(params, index) {
+	const { context, prop } = params;
+	const values = context.get("value");
+	const max = prop("max");
+	if (values[index] === max) {
+		let movableIndex = index;
+		while (movableIndex > 0 && values[movableIndex - 1] === max) movableIndex -= 1;
+		return movableIndex;
+	}
+	return index;
+}
+
+//#endregion
+//#region src/machines/slider/slider.connect.ts
+function connect(service, normalize$1) {
+	const { state, send, context, prop, computed, scope } = service;
+	const ariaLabel = prop("aria-label");
+	const ariaLabelledBy = prop("aria-labelledby");
+	const sliderValue = context.get("value");
+	const focusedIndex = context.get("focusedIndex");
+	const focused = state.matches("focus");
+	const dragging = state.matches("dragging");
+	const disabled = computed("isDisabled");
+	const invalid = prop("invalid");
+	const interactive = computed("isInteractive");
+	const isHorizontal = prop("orientation") === "horizontal";
+	const isVertical = prop("orientation") === "vertical";
+	function getValuePercentFn(value) {
+		return require_utils.getValuePercent(value, prop("min"), prop("max"));
+	}
+	function getPercentValueFn(percent) {
+		return require_utils.getPercentValue(percent, prop("min"), prop("max"), prop("step"));
+	}
+	return {
+		value: sliderValue,
+		dragging,
+		focused,
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		getThumbValue(index) {
+			return sliderValue[index];
+		},
+		setThumbValue(index, value) {
+			send({
+				type: "SET_VALUE",
+				index,
+				value
+			});
+		},
+		getValuePercent: getValuePercentFn,
+		getPercentValue: getPercentValueFn,
+		getThumbPercent(index) {
+			return getValuePercentFn(sliderValue[index]);
+		},
+		setThumbPercent(index, percent) {
+			send({
+				type: "SET_VALUE",
+				index,
+				value: getPercentValueFn(percent)
+			});
+		},
+		getThumbMin(index) {
+			return getRangeAtIndex(service, index).min;
+		},
+		getThumbMax(index) {
+			return getRangeAtIndex(service, index).max;
+		},
+		increment(index) {
+			send({
+				type: "INCREMENT",
+				index
+			});
+		},
+		decrement(index) {
+			send({
+				type: "DECREMENT",
+				index
+			});
+		},
+		focus() {
+			if (!interactive) return;
+			send({
+				type: "FOCUS",
+				index: 0
+			});
+		},
+		getLabelProps() {
+			return normalize$1.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-dragging": require_dom_query.dataAttr(dragging),
+				"data-focus": require_dom_query.dataAttr(focused),
+				id: getLabelId(scope),
+				htmlFor: getHiddenInputId(scope, 0),
+				onClick(event) {
+					if (!interactive) return;
+					event.preventDefault();
+					getFirstThumbEl(scope)?.focus();
+				},
+				style: {
+					userSelect: "none",
+					WebkitUserSelect: "none"
+				}
+			});
+		},
+		getRootProps() {
+			return normalize$1.element({
+				...parts.root.attrs,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-dragging": require_dom_query.dataAttr(dragging),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-focus": require_dom_query.dataAttr(focused),
+				id: getRootId(scope),
+				dir: prop("dir"),
+				style: getRootStyle(service)
+			});
+		},
+		getValueTextProps() {
+			return normalize$1.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-focus": require_dom_query.dataAttr(focused),
+				id: getValueTextId(scope)
+			});
+		},
+		getTrackProps() {
+			return normalize$1.element({
+				...parts.track.attrs,
+				dir: prop("dir"),
+				id: getTrackId(scope),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-dragging": require_dom_query.dataAttr(dragging),
+				"data-orientation": prop("orientation"),
+				"data-focus": require_dom_query.dataAttr(focused),
+				style: { position: "relative" }
+			});
+		},
+		getThumbProps(props$1) {
+			const { index = 0, name } = props$1;
+			const value = sliderValue[index];
+			const range = getRangeAtIndex(service, index);
+			const valueText = prop("getAriaValueText")?.({
+				value,
+				index
+			});
+			const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
+			const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
+			return normalize$1.element({
+				...parts.thumb.attrs,
+				dir: prop("dir"),
+				"data-index": index,
+				"data-name": name,
+				id: getThumbId(scope, index),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-focus": require_dom_query.dataAttr(focused && focusedIndex === index),
+				"data-dragging": require_dom_query.dataAttr(dragging && focusedIndex === index),
+				draggable: false,
+				"aria-disabled": require_dom_query.ariaAttr(disabled),
+				"aria-label": _ariaLabel,
+				"aria-labelledby": _ariaLabelledBy ?? getLabelId(scope),
+				"aria-orientation": prop("orientation"),
+				"aria-valuemax": range.max,
+				"aria-valuemin": range.min,
+				"aria-valuenow": sliderValue[index],
+				"aria-valuetext": valueText,
+				role: "slider",
+				tabIndex: disabled ? void 0 : 0,
+				style: getThumbStyle(service, index),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!require_dom_query.isLeftClick(event)) return;
+					const rect = event.currentTarget.getBoundingClientRect();
+					const midpoint = {
+						x: rect.left + rect.width / 2,
+						y: rect.top + rect.height / 2
+					};
+					send({
+						type: "THUMB_POINTER_DOWN",
+						index,
+						offset: {
+							x: event.clientX - midpoint.x,
+							y: event.clientY - midpoint.y
+						}
+					});
+					event.stopPropagation();
+				},
+				onBlur() {
+					if (!interactive) return;
+					send({ type: "BLUR" });
+				},
+				onFocus() {
+					if (!interactive) return;
+					send({
+						type: "FOCUS",
+						index
+					});
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (!interactive) return;
+					const step = require_dom_query.getEventStep(event) * prop("step");
+					const exec = {
+						ArrowUp() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_INC",
+								step,
+								src: "ArrowUp"
+							});
+						},
+						ArrowDown() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_DEC",
+								step,
+								src: "ArrowDown"
+							});
+						},
+						ArrowLeft() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_DEC",
+								step,
+								src: "ArrowLeft"
+							});
+						},
+						ArrowRight() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_INC",
+								step,
+								src: "ArrowRight"
+							});
+						},
+						PageUp() {
+							send({
+								type: "ARROW_INC",
+								step,
+								src: "PageUp"
+							});
+						},
+						PageDown() {
+							send({
+								type: "ARROW_DEC",
+								step,
+								src: "PageDown"
+							});
+						},
+						Home() {
+							send({ type: "HOME" });
+						},
+						End() {
+							send({ type: "END" });
+						}
+					}[require_dom_query.getEventKey(event, {
+						dir: prop("dir"),
+						orientation: prop("orientation")
+					})];
+					if (exec) {
+						exec(event);
+						event.preventDefault();
+						event.stopPropagation();
+					}
+				}
+			});
+		},
+		getHiddenInputProps(props$1) {
+			const { index = 0, name } = props$1;
+			return normalize$1.input({
+				name: name ?? (prop("name") ? prop("name") + (sliderValue.length > 1 ? "[]" : "") : void 0),
+				form: prop("form"),
+				type: "text",
+				hidden: true,
+				defaultValue: sliderValue[index],
+				id: getHiddenInputId(scope, index)
+			});
+		},
+		getRangeProps() {
+			return normalize$1.element({
+				id: getRangeId(scope),
+				...parts.range.attrs,
+				dir: prop("dir"),
+				"data-dragging": require_dom_query.dataAttr(dragging),
+				"data-focus": require_dom_query.dataAttr(focused),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				style: getRangeStyle(service)
+			});
+		},
+		getControlProps() {
+			return normalize$1.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				id: getControlId(scope),
+				"data-dragging": require_dom_query.dataAttr(dragging),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-orientation": prop("orientation"),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-focus": require_dom_query.dataAttr(focused),
+				style: getControlStyle(),
+				onPointerDown(event) {
+					if (!interactive) return;
+					if (!require_dom_query.isLeftClick(event)) return;
+					if (require_dom_query.isModifierKey(event)) return;
+					send({
+						type: "POINTER_DOWN",
+						point: require_dom_query.getEventPoint(event)
+					});
+					event.preventDefault();
+					event.stopPropagation();
+				}
+			});
+		},
+		getMarkerGroupProps() {
+			return normalize$1.element({
+				...parts.markerGroup.attrs,
+				role: "presentation",
+				dir: prop("dir"),
+				"aria-hidden": true,
+				"data-orientation": prop("orientation"),
+				style: getMarkerGroupStyle()
+			});
+		},
+		getMarkerProps(props$1) {
+			const style = getMarkerStyle(service, props$1.value);
+			let markerState;
+			if (props$1.value < require_utils.first(sliderValue)) markerState = "under-value";
+			else if (props$1.value > require_utils.last(sliderValue)) markerState = "over-value";
+			else markerState = "at-value";
+			return normalize$1.element({
+				...parts.marker.attrs,
+				id: getMarkerId(scope, props$1.value),
+				role: "presentation",
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-value": props$1.value,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-state": markerState,
+				style
+			});
+		},
+		getDraggingIndicatorProps(props$1) {
+			const { index = 0 } = props$1;
+			const isDragging = index === focusedIndex && dragging;
+			return normalize$1.element({
+				...parts.draggingIndicator.attrs,
+				role: "presentation",
+				dir: prop("dir"),
+				hidden: !isDragging,
+				"data-orientation": prop("orientation"),
+				"data-state": isDragging ? "open" : "closed",
+				style: getThumbStyle(service, index)
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/slider/slider.machine.ts
+const isEqualSize = (a, b) => {
+	return a?.width === b?.width && a?.height === b?.height;
+};
+const normalize = (value, min, max, step, minStepsBetweenThumbs) => {
+	return require_utils.getValueRanges(value, min, max, minStepsBetweenThumbs * step).map((range) => {
+		const rangeValue = require_utils.clampValue(require_utils.snapValueToStep(range.value, range.min, range.max, step), range.min, range.max);
+		if (!require_utils.isValueWithinRange(rangeValue, min, max)) throw new Error("[sprawlify-js/slider] The configured `min`, `max`, `step` or `minStepsBetweenThumbs` values are invalid");
+		return rangeValue;
+	});
+};
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		const min = props$1.min ?? 0;
+		const max = props$1.max ?? 100;
+		const step = props$1.step ?? 1;
+		const defaultValue = props$1.defaultValue ?? [min];
+		const minStepsBetweenThumbs = props$1.minStepsBetweenThumbs ?? 0;
+		return {
+			dir: "ltr",
+			thumbAlignment: "contain",
+			origin: "start",
+			orientation: "horizontal",
+			minStepsBetweenThumbs,
+			...props$1,
+			defaultValue: normalize(defaultValue, min, max, step, minStepsBetweenThumbs),
+			value: props$1.value ? normalize(props$1.value, min, max, step, minStepsBetweenThumbs) : void 0,
+			max,
+			step,
+			min
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			thumbSize: bindable(() => ({ defaultValue: prop("thumbSize") || null })),
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				isEqual: require_utils.isEqual,
+				hash(a) {
+					return a.join(",");
+				},
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedIndex: bindable(() => ({
+				defaultValue: -1,
+				onChange(value) {
+					const ctx = getContext();
+					prop("onFocusChange")?.({
+						focusedIndex: value,
+						value: ctx.get("value")
+					});
+				}
+			})),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	refs() {
+		return { thumbDragOffset: null };
+	},
+	computed: {
+		isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+		isVertical: ({ prop }) => prop("orientation") === "vertical",
+		isRtl: ({ prop }) => prop("orientation") === "horizontal" && prop("dir") === "rtl",
+		isDisabled: ({ context, prop }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+		isInteractive: ({ prop, computed }) => !(prop("readOnly") || computed("isDisabled")),
+		hasMeasuredThumbSize: ({ context }) => context.get("thumbSize") != null,
+		valuePercent: require_core.memo(({ context, prop }) => [
+			context.get("value"),
+			prop("min"),
+			prop("max")
+		], ([value, min, max]) => value.map((value$1) => 100 * require_utils.getValuePercent(value$1, min, max)))
+	},
+	watch({ track, action, context, computed, send }) {
+		track([() => context.hash("value")], () => {
+			action(["syncInputElements", "dispatchChangeEvent"]);
+		});
+		track([() => computed("isDisabled")], () => {
+			if (computed("isDisabled")) send({ type: "POINTER_CANCEL" });
+		});
+	},
+	effects: ["trackFormControlState", "trackThumbSize"],
+	on: {
+		SET_VALUE: [{
+			guard: "hasIndex",
+			actions: ["setValueAtIndex", "invokeOnChangeEnd"]
+		}, { actions: ["setValue", "invokeOnChangeEnd"] }],
+		INCREMENT: { actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"] },
+		DECREMENT: { actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"] }
+	},
+	states: {
+		idle: { on: {
+			POINTER_DOWN: {
+				target: "dragging",
+				actions: [
+					"setClosestThumbIndex",
+					"setPointerValue",
+					"focusActiveThumb"
+				]
+			},
+			FOCUS: {
+				target: "focus",
+				actions: ["setFocusedIndex"]
+			},
+			THUMB_POINTER_DOWN: {
+				target: "dragging",
+				actions: [
+					"setFocusedIndex",
+					"setThumbDragOffset",
+					"focusActiveThumb"
+				]
+			}
+		} },
+		focus: {
+			entry: ["focusActiveThumb"],
+			on: {
+				POINTER_DOWN: {
+					target: "dragging",
+					actions: [
+						"setClosestThumbIndex",
+						"setPointerValue",
+						"focusActiveThumb"
+					]
+				},
+				THUMB_POINTER_DOWN: {
+					target: "dragging",
+					actions: [
+						"setFocusedIndex",
+						"setThumbDragOffset",
+						"focusActiveThumb"
+					]
+				},
+				ARROW_DEC: { actions: ["decrementThumbAtIndex", "invokeOnChangeEnd"] },
+				ARROW_INC: { actions: ["incrementThumbAtIndex", "invokeOnChangeEnd"] },
+				HOME: { actions: ["setFocusedThumbToMin", "invokeOnChangeEnd"] },
+				END: { actions: ["setFocusedThumbToMax", "invokeOnChangeEnd"] },
+				BLUR: {
+					target: "idle",
+					actions: ["clearFocusedIndex"]
+				}
+			}
+		},
+		dragging: {
+			entry: ["focusActiveThumb"],
+			effects: ["trackPointerMove"],
+			on: {
+				POINTER_UP: {
+					target: "focus",
+					actions: ["invokeOnChangeEnd", "clearThumbDragOffset"]
+				},
+				POINTER_MOVE: { actions: ["setPointerValue"] },
+				POINTER_CANCEL: {
+					target: "idle",
+					actions: ["clearFocusedIndex", "clearThumbDragOffset"]
+				}
+			}
+		}
+	},
+	implementations: {
+		guards: { hasIndex: ({ event }) => event.index != null },
+		effects: {
+			trackFormControlState({ context, scope }) {
+				return require_dom_query.trackFormControl(getRootEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("value", context.initial("value"));
+					}
+				});
+			},
+			trackPointerMove({ scope, send }) {
+				return require_dom_query.trackPointerMove(scope.getDoc(), {
+					onPointerMove(info) {
+						send({
+							type: "POINTER_MOVE",
+							point: info.point
+						});
+					},
+					onPointerUp() {
+						send({ type: "POINTER_UP" });
+					}
+				});
+			},
+			trackThumbSize({ context, scope, prop }) {
+				if (prop("thumbAlignment") !== "contain" || prop("thumbSize")) return;
+				const exec = (el) => {
+					const size = require_utils.pick(getOffsetRect(el), ["width", "height"]);
+					if (isEqualSize(context.get("thumbSize"), size)) return;
+					context.set("thumbSize", size);
+				};
+				const thumbEls = getThumbEls(scope);
+				thumbEls.forEach(exec);
+				return require_utils.callAll(...thumbEls.map((el) => require_dom_query.resizeObserverBorderBox.observe(el, () => exec(el))));
+			}
+		},
+		actions: {
+			dispatchChangeEvent({ context, scope }) {
+				dispatchChangeEvent(scope, context.get("value"));
+			},
+			syncInputElements({ context, scope }) {
+				context.get("value").forEach((value, index) => {
+					require_dom_query.setElementValue(getHiddenInputEl(scope, index), value.toString());
+				});
+			},
+			invokeOnChangeEnd({ prop, context }) {
+				queueMicrotask(() => {
+					prop("onValueChangeEnd")?.({ value: context.get("value") });
+				});
+			},
+			setClosestThumbIndex(params) {
+				const { context, event } = params;
+				const pointValue = getPointValue(params, event.point);
+				if (pointValue == null) return;
+				const focusedIndex = getClosestIndex(params, pointValue);
+				context.set("focusedIndex", focusedIndex);
+			},
+			setFocusedIndex(params) {
+				const { context, event } = params;
+				const movableIndex = selectMovableThumb(params, event.index);
+				context.set("focusedIndex", movableIndex);
+			},
+			clearFocusedIndex({ context }) {
+				context.set("focusedIndex", -1);
+			},
+			setThumbDragOffset(params) {
+				const { refs, event } = params;
+				refs.set("thumbDragOffset", event.offset ?? null);
+			},
+			clearThumbDragOffset({ refs }) {
+				refs.set("thumbDragOffset", null);
+			},
+			setPointerValue(params) {
+				queueMicrotask(() => {
+					const { context, event } = params;
+					const pointValue = getPointValue(params, event.point);
+					if (pointValue == null) return;
+					const focusedIndex = context.get("focusedIndex");
+					const value = constrainValue(params, pointValue, focusedIndex);
+					context.set("value", (prev) => require_utils.setValueAtIndex(prev, focusedIndex, value));
+				});
+			},
+			focusActiveThumb({ scope, context }) {
+				require_dom_query.raf(() => {
+					getThumbEl(scope, context.get("focusedIndex"))?.focus({ preventScroll: true });
+				});
+			},
+			decrementThumbAtIndex(params) {
+				const { context, event } = params;
+				const value = decrement(params, event.index, event.step);
+				context.set("value", value);
+			},
+			incrementThumbAtIndex(params) {
+				const { context, event } = params;
+				const value = increment(params, event.index, event.step);
+				context.set("value", value);
+			},
+			setFocusedThumbToMin(params) {
+				const { context } = params;
+				const index = context.get("focusedIndex");
+				const { min } = getRangeAtIndex(params, index);
+				context.set("value", (prev) => require_utils.setValueAtIndex(prev, index, min));
+			},
+			setFocusedThumbToMax(params) {
+				const { context } = params;
+				const index = context.get("focusedIndex");
+				const { max } = getRangeAtIndex(params, index);
+				context.set("value", (prev) => require_utils.setValueAtIndex(prev, index, max));
+			},
+			setValueAtIndex(params) {
+				const { context, event } = params;
+				const value = constrainValue(params, event.value, event.index);
+				context.set("value", (prev) => require_utils.setValueAtIndex(prev, event.index, value));
+			},
+			setValue(params) {
+				const { context, event } = params;
+				const value = normalizeValues(params, event.value);
+				context.set("value", value);
+			}
+		}
+	}
+});
+
+//#endregion
+//#region src/machines/slider/slider.props.ts
+const props = require_create_props.createProps()([
+	"aria-label",
+	"aria-labelledby",
+	"dir",
+	"disabled",
+	"form",
+	"getAriaValueText",
+	"getRootNode",
+	"id",
+	"ids",
+	"invalid",
+	"max",
+	"min",
+	"minStepsBetweenThumbs",
+	"name",
+	"onFocusChange",
+	"onValueChange",
+	"onValueChangeEnd",
+	"orientation",
+	"origin",
+	"readOnly",
+	"step",
+	"thumbAlignment",
+	"thumbAlignment",
+	"thumbSize",
+	"value",
+	"defaultValue"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const thumbProps = require_create_props.createProps()(["index", "name"]);
+const splitThumbProps = require_utils.createSplitProps(thumbProps);
+const markerProps = require_create_props.createProps()(["value"]);
+const splitMarkerProps = require_utils.createSplitProps(markerProps);
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.markerProps = markerProps;
+exports.props = props;
+exports.splitMarkerProps = splitMarkerProps;
+exports.splitProps = splitProps;
+exports.splitThumbProps = splitThumbProps;
+exports.thumbProps = thumbProps;