@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/number-input/index.js

@@ -0,0 +1,1009 @@
+import { t as createAnatomy } from "../../create-anatomy-B2q3wiaw.js";
+import { n as setCaretToEnd } from "../../caret-aiDJ6mAS.js";
+import { I as MAX_Z_INDEX, L as ariaAttr, S as getWindow, z as dataAttr } from "../../dom-query-e7fh0TEH.js";
+import { f as isSafari } from "../../platform-BDB0wXUk.js";
+import { h as isModifierKey, i as getEventPoint, l as isComposingEvent, m as isLeftClick, o as getEventStepValue, t as addDomEvent } from "../../event-bTItRgiw.js";
+import { o as setElementValue, s as trackFormControl } from "../../form-B1DW_w_3.js";
+import { i as raf } from "../../raf-Dhvm7f1e.js";
+import { t as observeAttributes } from "../../mutation-observer-qObPUo3D.js";
+import { t as requestPointerLock } from "../../pointer-lock-WezxTqu-.js";
+import { E as isValueWithinRange, I as wrap, L as callAll, S as incrementValue, T as isValueAtMin, k as roundToDpr, l as clampValue, n as createSplitProps, u as decrementValue, w as isValueAtMax } from "../../utils-Cht5XaHf.js";
+import { i as setup, p as memo } from "../../core-CJ0MZr3D.js";
+import { t as createProps } from "../../create-props-CgtcN_Qu.js";
+import { NumberParser } from "@internationalized/number";
+//#region src/machines/number-input/anatomy.ts
+const anatomy = createAnatomy("numberInput").parts("root", "label", "input", "control", "valueText", "incrementTrigger", "decrementTrigger", "scrubber");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/number-input/cursor.ts
+function recordCursor(inputEl, scope) {
+	if (!inputEl || !scope.isActiveElement(inputEl)) return;
+	try {
+		const { selectionStart: start, selectionEnd: end, value } = inputEl;
+		if (start == null || end == null) return void 0;
+		return {
+			start,
+			end,
+			value
+		};
+	} catch {
+		return;
+	}
+}
+function restoreCursor(inputEl, selection, scope) {
+	if (!inputEl || !scope.isActiveElement(inputEl)) return;
+	if (!selection) {
+		const len = inputEl.value.length;
+		inputEl.setSelectionRange(len, len);
+		return;
+	}
+	try {
+		const newValue = inputEl.value;
+		const { start, end, value: oldValue } = selection;
+		if (newValue === oldValue) {
+			inputEl.setSelectionRange(start, end);
+			return;
+		}
+		const newStart = getNextCursorPosition(oldValue, newValue, start);
+		const newEnd = start === end ? newStart : getNextCursorPosition(oldValue, newValue, end);
+		const clampedStart = Math.max(0, Math.min(newStart, newValue.length));
+		const clampedEnd = Math.max(clampedStart, Math.min(newEnd, newValue.length));
+		inputEl.setSelectionRange(clampedStart, clampedEnd);
+	} catch {
+		const len = inputEl.value.length;
+		inputEl.setSelectionRange(len, len);
+	}
+}
+function getNextCursorPosition(oldValue, newValue, oldPosition) {
+	const beforeCursor = oldValue.slice(0, oldPosition);
+	const afterCursor = oldValue.slice(oldPosition);
+	let prefixLength = 0;
+	const maxPrefixLength = Math.min(beforeCursor.length, newValue.length);
+	for (let i = 0; i < maxPrefixLength; i++) if (beforeCursor[i] === newValue[i]) prefixLength = i + 1;
+	else break;
+	let suffixLength = 0;
+	const maxSuffixLength = Math.min(afterCursor.length, newValue.length - prefixLength);
+	for (let i = 0; i < maxSuffixLength; i++) {
+		const oldIndex = afterCursor.length - 1 - i;
+		const newIndex = newValue.length - 1 - i;
+		if (afterCursor[oldIndex] === newValue[newIndex]) suffixLength = i + 1;
+		else break;
+	}
+	if (beforeCursor.length > 0 && prefixLength >= beforeCursor.length) return prefixLength;
+	if (suffixLength >= afterCursor.length) return newValue.length - suffixLength;
+	if (prefixLength > 0) return prefixLength;
+	if (suffixLength > 0) return newValue.length - suffixLength;
+	if (oldPosition === 0 && prefixLength === 0 && suffixLength === 0) return newValue.length;
+	if (oldValue.length > 0) {
+		const ratio = oldPosition / oldValue.length;
+		return Math.round(ratio * newValue.length);
+	}
+	return newValue.length;
+}
+//#endregion
+//#region src/machines/number-input/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`;
+const getInputId = (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`;
+const getIncrementTriggerId = (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`;
+const getDecrementTriggerId = (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`;
+const getScrubberId = (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`;
+const getCursorId = (ctx) => `number-input:${ctx.id}:cursor`;
+const getLabelId = (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`;
+const getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+const getIncrementTriggerEl = (ctx) => ctx.getById(getIncrementTriggerId(ctx));
+const getDecrementTriggerEl = (ctx) => ctx.getById(getDecrementTriggerId(ctx));
+const getCursorEl = (ctx) => ctx.getDoc().getElementById(getCursorId(ctx));
+const getPressedTriggerEl = (ctx, hint) => {
+	let btnEl = null;
+	if (hint === "increment") btnEl = getIncrementTriggerEl(ctx);
+	if (hint === "decrement") btnEl = getDecrementTriggerEl(ctx);
+	return btnEl;
+};
+const setupVirtualCursor = (ctx, point) => {
+	if (isSafari()) return;
+	createVirtualCursor(ctx, point);
+	return () => {
+		getCursorEl(ctx)?.remove();
+	};
+};
+const preventTextSelection = (ctx) => {
+	const doc = ctx.getDoc();
+	const html = doc.documentElement;
+	const body = doc.body;
+	body.style.pointerEvents = "none";
+	html.style.userSelect = "none";
+	html.style.cursor = "ew-resize";
+	return () => {
+		body.style.pointerEvents = "";
+		html.style.userSelect = "";
+		html.style.cursor = "";
+		if (!html.style.length) html.removeAttribute("style");
+		if (!body.style.length) body.removeAttribute("style");
+	};
+};
+const getMousemoveValue = (ctx, opts) => {
+	const { point, isRtl, event } = opts;
+	const win = ctx.getWin();
+	const x = roundToDpr(event.movementX, win.devicePixelRatio);
+	const y = roundToDpr(event.movementY, win.devicePixelRatio);
+	let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
+	if (isRtl && hint === "increment") hint = "decrement";
+	if (isRtl && hint === "decrement") hint = "increment";
+	const newPoint = {
+		x: point.x + x,
+		y: point.y + y
+	};
+	const width = win.innerWidth;
+	const half = roundToDpr(7.5, win.devicePixelRatio);
+	newPoint.x = wrap(newPoint.x + half, width) - half;
+	return {
+		hint,
+		point: newPoint
+	};
+};
+const createVirtualCursor = (ctx, point) => {
+	const doc = ctx.getDoc();
+	const el = doc.createElement("div");
+	el.className = "scrubber--cursor";
+	el.id = getCursorId(ctx);
+	Object.assign(el.style, {
+		width: "15px",
+		height: "15px",
+		position: "fixed",
+		pointerEvents: "none",
+		left: "0px",
+		top: "0px",
+		zIndex: MAX_Z_INDEX,
+		transform: point ? `translate3d(${point.x}px, ${point.y}px, 0px)` : void 0,
+		willChange: "transform"
+	});
+	el.innerHTML = `
+      <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
+        <g transform="translate(2 3)">
+          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
+          <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
+        </g>
+      </svg>`;
+	doc.body.appendChild(el);
+};
+//#endregion
+//#region src/machines/number-input/connect.ts
+function connect(service, normalize) {
+	const { state, send, prop, scope, computed } = service;
+	const focused = state.hasTag("focus");
+	const disabled = computed("isDisabled");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const scrubbing = state.matches("scrubbing");
+	const empty = computed("isValueEmpty");
+	const invalid = prop("invalid") !== void 0 ? !!prop("invalid") : computed("isOutOfRange");
+	const isIncrementDisabled = disabled || !computed("canIncrement") || readOnly;
+	const isDecrementDisabled = disabled || !computed("canDecrement") || readOnly;
+	const translations = prop("translations");
+	return {
+		focused,
+		invalid,
+		empty,
+		value: computed("formattedValue"),
+		valueAsNumber: computed("valueAsNumber"),
+		setValue(value) {
+			send({
+				type: "VALUE.SET",
+				value
+			});
+		},
+		clearValue() {
+			send({ type: "VALUE.CLEAR" });
+		},
+		increment() {
+			send({ type: "VALUE.INCREMENT" });
+		},
+		decrement() {
+			send({ type: "VALUE.DECREMENT" });
+		},
+		setToMax() {
+			send({
+				type: "VALUE.SET",
+				value: prop("max")
+			});
+		},
+		setToMin() {
+			send({
+				type: "VALUE.SET",
+				value: prop("min")
+			});
+		},
+		focus() {
+			getInputEl(scope)?.focus();
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				...parts.root.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-focus": dataAttr(focused),
+				"data-invalid": dataAttr(invalid),
+				"data-scrubbing": dataAttr(scrubbing)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-focus": dataAttr(focused),
+				"data-invalid": dataAttr(invalid),
+				"data-required": dataAttr(required),
+				"data-scrubbing": dataAttr(scrubbing),
+				id: getLabelId(scope),
+				htmlFor: getInputId(scope),
+				onClick() {
+					raf(() => {
+						setCaretToEnd(getInputEl(scope));
+					});
+				}
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				dir: prop("dir"),
+				role: "group",
+				"aria-disabled": disabled,
+				"data-focus": dataAttr(focused),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-scrubbing": dataAttr(scrubbing),
+				"aria-invalid": ariaAttr(invalid)
+			});
+		},
+		getValueTextProps() {
+			return normalize.element({
+				...parts.valueText.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				"data-invalid": dataAttr(invalid),
+				"data-focus": dataAttr(focused),
+				"data-scrubbing": dataAttr(scrubbing)
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				dir: prop("dir"),
+				name: prop("name"),
+				form: prop("form"),
+				id: getInputId(scope),
+				role: "spinbutton",
+				defaultValue: computed("formattedValue"),
+				pattern: prop("formatOptions") ? void 0 : prop("pattern"),
+				inputMode: prop("inputMode"),
+				"aria-invalid": ariaAttr(invalid),
+				"data-invalid": dataAttr(invalid),
+				disabled,
+				"data-disabled": dataAttr(disabled),
+				readOnly,
+				required: prop("required"),
+				autoComplete: "off",
+				autoCorrect: "off",
+				spellCheck: "false",
+				type: "text",
+				"aria-roledescription": "numberfield",
+				"aria-valuemin": prop("min"),
+				"aria-valuemax": prop("max"),
+				"aria-valuenow": Number.isNaN(computed("valueAsNumber")) ? void 0 : computed("valueAsNumber"),
+				"aria-valuetext": computed("valueText"),
+				"data-scrubbing": dataAttr(scrubbing),
+				onFocus() {
+					send({ type: "INPUT.FOCUS" });
+				},
+				onBlur() {
+					send({ type: "INPUT.BLUR" });
+				},
+				onInput(event) {
+					const selection = recordCursor(event.currentTarget, scope);
+					send({
+						type: "INPUT.CHANGE",
+						target: event.currentTarget,
+						hint: "set",
+						selection
+					});
+				},
+				onBeforeInput(event) {
+					try {
+						const { selectionStart, selectionEnd, value } = event.currentTarget;
+						const nextValue = value.slice(0, selectionStart) + (event.data ?? "") + value.slice(selectionEnd);
+						if (!computed("parser").isValidPartialNumber(nextValue)) event.preventDefault();
+					} catch {}
+				},
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (readOnly) return;
+					if (isComposingEvent(event)) return;
+					const step = getEventStepValue(event, {
+						step: prop("step"),
+						largeStep: prop("largeStep"),
+						smallStep: prop("smallStep")
+					});
+					const exec = {
+						ArrowUp() {
+							send({
+								type: "INPUT.ARROW_UP",
+								step
+							});
+							event.preventDefault();
+						},
+						ArrowDown() {
+							send({
+								type: "INPUT.ARROW_DOWN",
+								step
+							});
+							event.preventDefault();
+						},
+						Home() {
+							if (isModifierKey(event)) return;
+							send({ type: "INPUT.HOME" });
+							event.preventDefault();
+						},
+						End() {
+							if (isModifierKey(event)) return;
+							send({ type: "INPUT.END" });
+							event.preventDefault();
+						},
+						Enter(event) {
+							const selection = recordCursor(event.currentTarget, scope);
+							send({
+								type: "INPUT.ENTER",
+								selection
+							});
+						}
+					}[event.key];
+					exec?.(event);
+				}
+			});
+		},
+		getDecrementTriggerProps() {
+			return normalize.button({
+				...parts.decrementTrigger.attrs,
+				dir: prop("dir"),
+				id: getDecrementTriggerId(scope),
+				disabled: isDecrementDisabled,
+				"data-disabled": dataAttr(isDecrementDisabled),
+				"aria-label": translations.decrementLabel,
+				type: "button",
+				tabIndex: -1,
+				"aria-controls": getInputId(scope),
+				"data-scrubbing": dataAttr(scrubbing),
+				onPointerDown(event) {
+					if (isDecrementDisabled) return;
+					if (!isLeftClick(event)) return;
+					send({
+						type: "TRIGGER.PRESS_DOWN",
+						hint: "decrement",
+						pointerType: event.pointerType
+					});
+					if (event.pointerType === "mouse") event.preventDefault();
+					if (event.pointerType === "touch") event.currentTarget?.focus({ preventScroll: true });
+				},
+				onPointerUp(event) {
+					send({
+						type: "TRIGGER.PRESS_UP",
+						hint: "decrement",
+						pointerType: event.pointerType
+					});
+				},
+				onPointerLeave() {
+					if (isDecrementDisabled) return;
+					send({
+						type: "TRIGGER.PRESS_UP",
+						hint: "decrement"
+					});
+				}
+			});
+		},
+		getIncrementTriggerProps() {
+			return normalize.button({
+				...parts.incrementTrigger.attrs,
+				dir: prop("dir"),
+				id: getIncrementTriggerId(scope),
+				disabled: isIncrementDisabled,
+				"data-disabled": dataAttr(isIncrementDisabled),
+				"aria-label": translations.incrementLabel,
+				type: "button",
+				tabIndex: -1,
+				"aria-controls": getInputId(scope),
+				"data-scrubbing": dataAttr(scrubbing),
+				onPointerDown(event) {
+					if (isIncrementDisabled || !isLeftClick(event)) return;
+					send({
+						type: "TRIGGER.PRESS_DOWN",
+						hint: "increment",
+						pointerType: event.pointerType
+					});
+					if (event.pointerType === "mouse") event.preventDefault();
+					if (event.pointerType === "touch") event.currentTarget?.focus({ preventScroll: true });
+				},
+				onPointerUp(event) {
+					send({
+						type: "TRIGGER.PRESS_UP",
+						hint: "increment",
+						pointerType: event.pointerType
+					});
+				},
+				onPointerLeave(event) {
+					send({
+						type: "TRIGGER.PRESS_UP",
+						hint: "increment",
+						pointerType: event.pointerType
+					});
+				}
+			});
+		},
+		getScrubberProps() {
+			return normalize.element({
+				...parts.scrubber.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(disabled),
+				id: getScrubberId(scope),
+				role: "presentation",
+				"data-scrubbing": dataAttr(scrubbing),
+				onMouseDown(event) {
+					if (disabled) return;
+					if (!isLeftClick(event)) return;
+					const point = getEventPoint(event);
+					const dpr = getWindow(event.currentTarget).devicePixelRatio;
+					point.x = point.x - roundToDpr(7.5, dpr);
+					point.y = point.y - roundToDpr(7.5, dpr);
+					send({
+						type: "SCRUBBER.PRESS_DOWN",
+						point
+					});
+					event.preventDefault();
+					raf(() => {
+						setCaretToEnd(getInputEl(scope));
+					});
+				},
+				style: { cursor: disabled ? void 0 : "ew-resize" }
+			});
+		}
+	};
+}
+//#endregion
+//#region src/machines/number-input/utils.ts
+const createFormatter = (locale, options = {}) => {
+	return new Intl.NumberFormat(locale, options);
+};
+const createParser = (locale, options = {}) => {
+	return new NumberParser(locale, options);
+};
+const parseValue = (value, params) => {
+	const { prop, computed } = params;
+	if (!prop("formatOptions")) return parseFloat(value);
+	if (value === "") return NaN;
+	return computed("parser").parse(value);
+};
+const formatValue = (value, params) => {
+	const { prop, computed } = params;
+	if (Number.isNaN(value)) return "";
+	if (!prop("formatOptions")) return value.toString();
+	return computed("formatter").format(value);
+};
+const getDefaultStep = (step, formatOptions) => {
+	let defaultStep = step !== void 0 && !Number.isNaN(step) ? step : 1;
+	if (formatOptions?.style === "percent" && (step === void 0 || Number.isNaN(step))) defaultStep = .01;
+	return defaultStep;
+};
+//#endregion
+//#region src/machines/number-input/machine.ts
+const { choose, guards, createMachine } = setup();
+const { not, and } = guards;
+const machine = createMachine({
+	props({ props }) {
+		const step = getDefaultStep(props.step, props.formatOptions);
+		return {
+			dir: "ltr",
+			locale: "en-US",
+			focusInputOnChange: true,
+			clampValueOnBlur: !props.allowOverflow,
+			allowOverflow: false,
+			inputMode: "decimal",
+			pattern: "-?[0-9]*(.[0-9]+)?",
+			defaultValue: "",
+			step,
+			min: Number.MIN_SAFE_INTEGER,
+			max: Number.MAX_SAFE_INTEGER,
+			spinOnPress: true,
+			...props,
+			largeStep: props.largeStep ?? 10 * step,
+			smallStep: props.smallStep ?? step / 10,
+			translations: {
+				incrementLabel: "increment value",
+				decrementLabel: "decrease value",
+				...props.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getComputed }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					const valueAsNumber = parseValue(value, {
+						computed: getComputed(),
+						prop
+					});
+					prop("onValueChange")?.({
+						value,
+						valueAsNumber
+					});
+				}
+			})),
+			hint: bindable(() => ({ defaultValue: null })),
+			scrubberCursorPoint: bindable(() => ({
+				defaultValue: null,
+				hash(value) {
+					return value ? `x:${value.x}, y:${value.y}` : "";
+				}
+			})),
+			fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	computed: {
+		isRtl: ({ prop }) => prop("dir") === "rtl",
+		valueAsNumber: ({ context, computed, prop }) => parseValue(context.get("value"), {
+			computed,
+			prop
+		}),
+		formattedValue: ({ computed, prop }) => formatValue(computed("valueAsNumber"), {
+			computed,
+			prop
+		}),
+		isAtMin: ({ computed, prop }) => isValueAtMin(computed("valueAsNumber"), prop("min")),
+		isAtMax: ({ computed, prop }) => isValueAtMax(computed("valueAsNumber"), prop("max")),
+		isOutOfRange: ({ computed, prop }) => !isValueWithinRange(computed("valueAsNumber"), prop("min"), prop("max")),
+		isValueEmpty: ({ context }) => context.get("value") === "",
+		isDisabled: ({ prop, context }) => !!prop("disabled") || context.get("fieldsetDisabled"),
+		canIncrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMax"),
+		canDecrement: ({ prop, computed }) => prop("allowOverflow") || !computed("isAtMin"),
+		valueText: ({ prop, context }) => prop("translations").valueText?.(context.get("value")),
+		formatter: memo(({ prop }) => [prop("locale"), prop("formatOptions")], ([locale, formatOptions]) => createFormatter(locale, formatOptions)),
+		parser: memo(({ prop }) => [prop("locale"), prop("formatOptions")], ([locale, formatOptions]) => createParser(locale, formatOptions))
+	},
+	watch({ track, action, context, computed, prop }) {
+		track([
+			() => context.get("value"),
+			() => prop("locale"),
+			() => JSON.stringify(prop("formatOptions"))
+		], () => {
+			action(["syncInputElement"]);
+		});
+		track([() => computed("isOutOfRange")], () => {
+			action(["invokeOnInvalid"]);
+		});
+		track([() => context.hash("scrubberCursorPoint")], () => {
+			action(["setVirtualCursorPosition"]);
+		});
+	},
+	effects: ["trackFormControl"],
+	on: {
+		"VALUE.SET": { actions: ["setRawValue"] },
+		"VALUE.CLEAR": { actions: ["clearValue"] },
+		"VALUE.INCREMENT": { actions: ["increment"] },
+		"VALUE.DECREMENT": { actions: ["decrement"] }
+	},
+	states: {
+		idle: { on: {
+			"TRIGGER.PRESS_DOWN": [{
+				guard: "isTouchPointer",
+				target: "before:spin",
+				actions: ["setHint"]
+			}, {
+				target: "before:spin",
+				actions: [
+					"focusInput",
+					"invokeOnFocus",
+					"setHint"
+				]
+			}],
+			"SCRUBBER.PRESS_DOWN": {
+				target: "scrubbing",
+				actions: [
+					"focusInput",
+					"invokeOnFocus",
+					"setHint",
+					"setCursorPoint"
+				]
+			},
+			"INPUT.FOCUS": {
+				target: "focused",
+				actions: ["focusInput", "invokeOnFocus"]
+			}
+		} },
+		focused: {
+			tags: ["focus"],
+			effects: ["attachWheelListener"],
+			on: {
+				"TRIGGER.PRESS_DOWN": [{
+					guard: "isTouchPointer",
+					target: "before:spin",
+					actions: ["setHint"]
+				}, {
+					target: "before:spin",
+					actions: ["focusInput", "setHint"]
+				}],
+				"SCRUBBER.PRESS_DOWN": {
+					target: "scrubbing",
+					actions: [
+						"focusInput",
+						"setHint",
+						"setCursorPoint"
+					]
+				},
+				"INPUT.ARROW_UP": { actions: ["increment"] },
+				"INPUT.ARROW_DOWN": { actions: ["decrement"] },
+				"INPUT.HOME": { actions: ["decrementToMin"] },
+				"INPUT.END": { actions: ["incrementToMax"] },
+				"INPUT.CHANGE": { actions: ["setValue", "setHint"] },
+				"INPUT.BLUR": [
+					{
+						guard: and("clampValueOnBlur", not("isValueEmpty"), not("isInRange")),
+						target: "idle",
+						actions: [
+							"setClampedValue",
+							"clearHint",
+							"invokeOnBlur",
+							"invokeOnValueCommit"
+						]
+					},
+					{
+						guard: not("isInRange"),
+						target: "idle",
+						actions: [
+							"setFormattedValue",
+							"clearHint",
+							"invokeOnBlur",
+							"invokeOnInvalid",
+							"invokeOnValueCommit"
+						]
+					},
+					{
+						target: "idle",
+						actions: [
+							"setFormattedValue",
+							"clearHint",
+							"invokeOnBlur",
+							"invokeOnValueCommit"
+						]
+					}
+				],
+				"INPUT.ENTER": { actions: [
+					"setFormattedValue",
+					"clearHint",
+					"invokeOnBlur",
+					"invokeOnValueCommit"
+				] }
+			}
+		},
+		"before:spin": {
+			tags: ["focus"],
+			effects: ["trackButtonDisabled", "waitForChangeDelay"],
+			entry: choose([{
+				guard: "isIncrementHint",
+				actions: ["increment"]
+			}, {
+				guard: "isDecrementHint",
+				actions: ["decrement"]
+			}]),
+			on: {
+				CHANGE_DELAY: {
+					target: "spinning",
+					guard: and("isInRange", "spinOnPress")
+				},
+				"TRIGGER.PRESS_UP": [{
+					guard: "isTouchPointer",
+					target: "focused",
+					actions: ["clearHint"]
+				}, {
+					target: "focused",
+					actions: ["focusInput", "clearHint"]
+				}]
+			}
+		},
+		spinning: {
+			tags: ["focus"],
+			effects: ["trackButtonDisabled", "spinValue"],
+			on: {
+				SPIN: [{
+					guard: "isIncrementHint",
+					actions: ["increment"]
+				}, {
+					guard: "isDecrementHint",
+					actions: ["decrement"]
+				}],
+				"TRIGGER.PRESS_UP": {
+					target: "focused",
+					actions: ["focusInput", "clearHint"]
+				}
+			}
+		},
+		scrubbing: {
+			tags: ["focus"],
+			effects: [
+				"activatePointerLock",
+				"trackMousemove",
+				"setupVirtualCursor",
+				"preventTextSelection"
+			],
+			on: {
+				"SCRUBBER.POINTER_UP": {
+					target: "focused",
+					actions: ["focusInput", "clearCursorPoint"]
+				},
+				"SCRUBBER.POINTER_MOVE": [{
+					guard: "isIncrementHint",
+					actions: ["increment", "setCursorPoint"]
+				}, {
+					guard: "isDecrementHint",
+					actions: ["decrement", "setCursorPoint"]
+				}]
+			}
+		}
+	},
+	implementations: {
+		guards: {
+			clampValueOnBlur: ({ prop }) => prop("clampValueOnBlur"),
+			spinOnPress: ({ prop }) => !!prop("spinOnPress"),
+			isInRange: ({ computed }) => !computed("isOutOfRange"),
+			isValueEmpty: ({ computed }) => computed("isValueEmpty"),
+			isDecrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "decrement",
+			isIncrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "increment",
+			isTouchPointer: ({ event }) => event.pointerType === "touch"
+		},
+		effects: {
+			waitForChangeDelay({ send }) {
+				const id = setTimeout(() => {
+					send({ type: "CHANGE_DELAY" });
+				}, 300);
+				return () => clearTimeout(id);
+			},
+			spinValue({ send }) {
+				const id = setInterval(() => {
+					send({ type: "SPIN" });
+				}, 50);
+				return () => clearInterval(id);
+			},
+			trackFormControl({ context, scope }) {
+				return trackFormControl(getInputEl(scope), {
+					onFieldsetDisabledChange(disabled) {
+						context.set("fieldsetDisabled", disabled);
+					},
+					onFormReset() {
+						context.set("value", context.initial("value"));
+					}
+				});
+			},
+			setupVirtualCursor({ context, scope }) {
+				const point = context.get("scrubberCursorPoint");
+				return setupVirtualCursor(scope, point);
+			},
+			preventTextSelection({ scope }) {
+				return preventTextSelection(scope);
+			},
+			trackButtonDisabled({ context, scope, send }) {
+				const hint = context.get("hint");
+				return observeAttributes(getPressedTriggerEl(scope, hint), {
+					attributes: ["disabled"],
+					callback() {
+						send({
+							type: "TRIGGER.PRESS_UP",
+							src: "attr"
+						});
+					}
+				});
+			},
+			attachWheelListener({ scope, send, prop }) {
+				const inputEl = getInputEl(scope);
+				if (!inputEl || !scope.isActiveElement(inputEl) || !prop("allowMouseWheel")) return;
+				function onWheel(event) {
+					event.preventDefault();
+					const dir = Math.sign(event.deltaY) * -1;
+					if (dir === 1) send({ type: "VALUE.INCREMENT" });
+					else if (dir === -1) send({ type: "VALUE.DECREMENT" });
+				}
+				return addDomEvent(inputEl, "wheel", onWheel, { passive: false });
+			},
+			activatePointerLock({ scope }) {
+				if (isSafari()) return;
+				return requestPointerLock(scope.getDoc());
+			},
+			trackMousemove({ scope, send, context, computed }) {
+				const doc = scope.getDoc();
+				function onMousemove(event) {
+					const point = context.get("scrubberCursorPoint");
+					const isRtl = computed("isRtl");
+					const value = getMousemoveValue(scope, {
+						point,
+						isRtl,
+						event
+					});
+					if (!value.hint) return;
+					send({
+						type: "SCRUBBER.POINTER_MOVE",
+						hint: value.hint,
+						point: value.point
+					});
+				}
+				function onMouseup() {
+					send({ type: "SCRUBBER.POINTER_UP" });
+				}
+				return callAll(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
+			}
+		},
+		actions: {
+			focusInput({ scope, prop }) {
+				if (!prop("focusInputOnChange")) return;
+				const inputEl = getInputEl(scope);
+				if (scope.isActiveElement(inputEl)) return;
+				raf(() => inputEl?.focus({ preventScroll: true }));
+			},
+			increment({ context, event, prop, computed }) {
+				let nextValue = incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+				if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+				context.set("value", formatValue(nextValue, {
+					computed,
+					prop
+				}));
+			},
+			decrement({ context, event, prop, computed }) {
+				let nextValue = decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+				if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+				context.set("value", formatValue(nextValue, {
+					computed,
+					prop
+				}));
+			},
+			setClampedValue({ context, prop, computed }) {
+				const nextValue = clampValue(computed("valueAsNumber"), prop("min"), prop("max"));
+				context.set("value", formatValue(nextValue, {
+					computed,
+					prop
+				}));
+			},
+			setRawValue({ context, event, prop, computed }) {
+				let nextValue = typeof event.value === "number" ? event.value : parseValue(event.value, {
+					computed,
+					prop
+				});
+				if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+				context.set("value", formatValue(nextValue, {
+					computed,
+					prop
+				}));
+			},
+			setValue({ context, event }) {
+				const value = event.target?.value ?? event.value;
+				context.set("value", value);
+			},
+			clearValue({ context }) {
+				context.set("value", "");
+			},
+			incrementToMax({ context, prop, computed }) {
+				const value = formatValue(prop("max"), {
+					computed,
+					prop
+				});
+				context.set("value", value);
+			},
+			decrementToMin({ context, prop, computed }) {
+				const value = formatValue(prop("min"), {
+					computed,
+					prop
+				});
+				context.set("value", value);
+			},
+			setHint({ context, event }) {
+				context.set("hint", event.hint);
+			},
+			clearHint({ context }) {
+				context.set("hint", null);
+			},
+			invokeOnFocus({ computed, prop }) {
+				prop("onFocusChange")?.({
+					focused: true,
+					value: computed("formattedValue"),
+					valueAsNumber: computed("valueAsNumber")
+				});
+			},
+			invokeOnBlur({ computed, prop }) {
+				prop("onFocusChange")?.({
+					focused: false,
+					value: computed("formattedValue"),
+					valueAsNumber: computed("valueAsNumber")
+				});
+			},
+			invokeOnInvalid({ computed, prop, event }) {
+				if (event.type === "INPUT.CHANGE") return;
+				const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
+				prop("onValueInvalid")?.({
+					reason,
+					value: computed("formattedValue"),
+					valueAsNumber: computed("valueAsNumber")
+				});
+			},
+			invokeOnValueCommit({ computed, prop }) {
+				prop("onValueCommit")?.({
+					value: computed("formattedValue"),
+					valueAsNumber: computed("valueAsNumber")
+				});
+			},
+			syncInputElement({ context, event, computed, scope }) {
+				const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue");
+				const inputEl = getInputEl(scope);
+				const sel = event.selection ?? recordCursor(inputEl, scope);
+				raf(() => {
+					setElementValue(inputEl, value);
+					restoreCursor(inputEl, sel, scope);
+				});
+			},
+			setFormattedValue({ context, computed, action }) {
+				context.set("value", computed("formattedValue"));
+				action(["syncInputElement"]);
+			},
+			setCursorPoint({ context, event }) {
+				context.set("scrubberCursorPoint", event.point);
+			},
+			clearCursorPoint({ context }) {
+				context.set("scrubberCursorPoint", null);
+			},
+			setVirtualCursorPosition({ context, scope }) {
+				const cursorEl = getCursorEl(scope);
+				const point = context.get("scrubberCursorPoint");
+				if (!cursorEl || !point) return;
+				cursorEl.style.transform = `translate3d(${point.x}px, ${point.y}px, 0px)`;
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/number-input/props.ts
+const props = createProps()([
+	"allowMouseWheel",
+	"allowOverflow",
+	"clampValueOnBlur",
+	"dir",
+	"disabled",
+	"focusInputOnChange",
+	"form",
+	"formatOptions",
+	"getRootNode",
+	"id",
+	"ids",
+	"inputMode",
+	"invalid",
+	"largeStep",
+	"locale",
+	"max",
+	"min",
+	"name",
+	"onFocusChange",
+	"onValueChange",
+	"onValueCommit",
+	"onValueInvalid",
+	"pattern",
+	"required",
+	"readOnly",
+	"smallStep",
+	"spinOnPress",
+	"step",
+	"translations",
+	"value",
+	"defaultValue"
+]);
+const splitProps = createSplitProps(props);
+//#endregion
+export { anatomy, connect, machine, props, splitProps };