@spinjs/components 0.0.0-stage → 0.1.0-preview.2

package/dist/number-input/number-input.presentation.js

@@ -0,0 +1,449 @@
+import { isValueWithinRange, parseValue } from "./number-input.state.js";
+import { numberInput as numberInput$1 } from "./number-input.machine.js";
+import { defineComponent } from "@spinjs/runtime";
+// src/number-input/number-input.presentation.ts
+const SPIN_DWELL = 300;
+const SPIN_REPEAT = 50;
+const CURSOR_HALF = 7.5;
+const PARTIAL_NUMBER = /^-?\d*\.?\d*$/;
+const valueAsNumber = (context) => parseValue(context.value);
+/** Focus the input and leave the caret at the end of what it holds. */
+const focusInput = (scope) => {
+	if (!scope.context.focusInputOnChange) return;
+	const node = scope.root().ownerDocument?.getElementById(scope.id("input"));
+	if (node === null || node === void 0) return;
+	if (typeof node.focus !== "function") return;
+	node.focus({ preventScroll: true });
+	const text = node;
+	if (typeof text.setSelectionRange === "function" && typeof text.value === "string") {
+		const end = text.value.length;
+		text.setSelectionRange(end, end);
+	}
+};
+const disabledOf = (context) => context.disabled || context.fieldsetDisabled;
+const invalidOf = (context) => {
+	if (context.invalid !== void 0) return context.invalid;
+	const at = valueAsNumber(context);
+	return (Number.isNaN(at) ? 0 : at) < context.min || (Number.isNaN(at) ? 0 : at) > context.max;
+};
+const canIncrement = (context) => {
+	if (context.allowOverflow) return true;
+	const at = valueAsNumber(context);
+	return (Number.isNaN(at) ? 0 : at) < context.max;
+};
+const canDecrement = (context) => {
+	if (context.allowOverflow) return true;
+	const at = valueAsNumber(context);
+	return (Number.isNaN(at) ? 0 : at) > context.min;
+};
+const roundToDpr = (value, dpr) => Math.floor(value * dpr + .5) / dpr;
+const wrapPoint = (x, width) => width > 0 ? (x % width + width) % width : x;
+const handlerTables = /* @__PURE__ */ new WeakMap();
+const handlersOf = (scope) => {
+	const found = handlerTables.get(scope.id);
+	if (found !== void 0) return found;
+	let lastScrubX = null;
+	const made = {
+		onInputFocus: () => {
+			scope.send({ type: "INPUT.FOCUS" });
+		},
+		onInputBlur: () => {
+			scope.send({ type: "INPUT.BLUR" });
+		},
+		onInput: (event) => {
+			scope.send({
+				type: "INPUT.CHANGE",
+				value: event.currentTarget.value
+			});
+		},
+		onBeforeInput: (event) => {
+			const current = event.currentTarget;
+			const start = current.selectionStart ?? 0;
+			const end = current.selectionEnd ?? 0;
+			const next = current.value.slice(0, start) + (event.data ?? "") + current.value.slice(end);
+			if (!PARTIAL_NUMBER.test(next)) event.preventDefault();
+		},
+		onInputKeydown: (event) => {
+			if (event.defaultPrevented) return;
+			if (scope.context.readOnly) return;
+			if (event.isComposing) return;
+			const context = scope.context;
+			const isArrow = event.key === "ArrowUp" || event.key === "ArrowDown";
+			const step = event.altKey && isArrow ? context.smallStep : event.shiftKey && isArrow ? context.largeStep : context.step;
+			const naked = !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey;
+			switch (event.key) {
+				case "ArrowUp":
+					scope.send({
+						type: "INPUT.ARROW_UP",
+						step
+					});
+					event.preventDefault();
+					break;
+				case "ArrowDown":
+					scope.send({
+						type: "INPUT.ARROW_DOWN",
+						step
+					});
+					event.preventDefault();
+					break;
+				case "Home":
+					if (!naked) return;
+					scope.send({ type: "INPUT.HOME" });
+					event.preventDefault();
+					break;
+				case "End":
+					if (!naked) return;
+					scope.send({ type: "INPUT.END" });
+					event.preventDefault();
+					break;
+				case "Enter": scope.send({ type: "INPUT.ENTER" });
+			}
+		},
+		onInputWheel: (event) => {
+			if (!scope.context.allowMouseWheel) return;
+			event.preventDefault();
+			const direction = Math.sign(event.deltaY) * -1;
+			if (direction === 1) scope.send({ type: "VALUE.INCREMENT" });
+			else if (direction === -1) scope.send({ type: "VALUE.DECREMENT" });
+		},
+		onScrubberDown: (event) => {
+			if (scope.context.disabled) return;
+			if (event.button !== 0) return;
+			const dpr = (typeof document === "undefined" ? void 0 : document)?.defaultView?.devicePixelRatio ?? 1;
+			const half = roundToDpr(CURSOR_HALF, dpr);
+			lastScrubX = event.clientX;
+			scope.send({
+				type: "SCRUBBER.PRESS_DOWN",
+				point: {
+					x: event.clientX - half,
+					y: event.clientY - half
+				}
+			});
+			event.preventDefault();
+			focusInput(scope);
+		},
+		onScrubberMove: (event) => {
+			const point = scope.context.cursorPoint;
+			const from = lastScrubX;
+			lastScrubX = event.clientX;
+			if (point === null || from === null) return;
+			const doc = typeof document === "undefined" ? void 0 : document;
+			const dpr = doc?.defaultView?.devicePixelRatio ?? 1;
+			const step = roundToDpr(event.clientX - from, dpr);
+			if (step === 0) return;
+			const hint = step > 0 ? "increment" : "decrement";
+			const width = doc?.defaultView?.innerWidth ?? 0;
+			const rtl = scope.context.dir === "rtl";
+			scope.send({
+				type: "SCRUBBER.POINTER_MOVE",
+				hint: rtl ? hint === "increment" ? "decrement" : "increment" : hint,
+				point: {
+					x: wrapPoint(point.x + step, width),
+					y: point.y
+				}
+			});
+			event.preventDefault();
+		},
+		onScrubberUp: () => {
+			lastScrubX = null;
+			scope.send({ type: "SCRUBBER.POINTER_UP" });
+		},
+		onDecrementDown: (event) => {
+			if (event.button !== 0) return;
+			scope.send({
+				type: "TRIGGER.PRESS_DOWN",
+				hint: "decrement"
+			});
+			if (event.pointerType === "mouse") event.preventDefault();
+			focusInput(scope);
+		},
+		onIncrementDown: (event) => {
+			if (event.button !== 0) return;
+			scope.send({
+				type: "TRIGGER.PRESS_DOWN",
+				hint: "increment"
+			});
+			if (event.pointerType === "mouse") event.preventDefault();
+			focusInput(scope);
+		},
+		onTriggerUp: () => {
+			scope.send({ type: "TRIGGER.PRESS_UP" });
+		},
+		onLabelClick: () => {
+			focusInput(scope);
+		}
+	};
+	handlerTables.set(scope.id, made);
+	return made;
+};
+const def = {
+	name: "number-input",
+	machine: (args, authored) => numberInput$1(args, authored),
+	start: "idle",
+	parts: {
+		root: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": scope.attr(disabledOf(scope.context)),
+			"data-focus": scope.attr(scope.state === "focused"),
+			"data-invalid": scope.attr(invalidOf(scope.context)),
+			"data-scrubbing": scope.attr(scope.state === "scrubbing"),
+			"use:form-control": {
+				onDisabledChange: (value) => {
+					scope.send({
+						type: "FIELDSET.DISABLED",
+						value
+					});
+				},
+				onFormReset: () => {
+					scope.send({
+						type: "VALUE.SET",
+						value: scope.context.initialValue
+					});
+				}
+			}
+		}) },
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-required": scope.attr(scope.context.required),
+			for: scope.id("input"),
+			onClick: () => {
+				focusInput(scope);
+			}
+		}) },
+		control: { attrs: (scope) => {
+			const context = scope.context;
+			const spinning = context.spin !== null;
+			return {
+				dir: context.dir,
+				role: "group",
+				"data-disabled": scope.attr(disabledOf(context)),
+				"data-focus": scope.attr(scope.state === "focused"),
+				"data-invalid": scope.attr(invalidOf(context)),
+				"data-scrubbing": scope.attr(scope.state === "scrubbing"),
+				"aria-disabled": disabledOf(context),
+				"aria-invalid": invalidOf(context),
+				"use:autoplay": {
+					interval: context.spin === "repeat" ? SPIN_REPEAT : SPIN_DWELL,
+					enabled: spinning,
+					onTick: () => {
+						scope.send(context.spin === "repeat" ? { type: "SPIN" } : { type: "CHANGE_DELAY" });
+					}
+				}
+			};
+		} },
+		valueText: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": scope.attr(disabledOf(scope.context)),
+			"data-focus": scope.attr(scope.state === "focused")
+		}) },
+		input: {
+			id: "input",
+			attrs: (scope) => {
+				const context = scope.context;
+				const number = valueAsNumber(context);
+				return {
+					dir: context.dir,
+					type: "text",
+					role: "spinbutton",
+					name: context.name,
+					form: context.form,
+					inputMode: context.inputMode,
+					pattern: context.pattern,
+					autoComplete: "off",
+					autoCorrect: "off",
+					spellCheck: false,
+					value: context.value,
+					disabled: disabledOf(context),
+					readOnly: context.readOnly,
+					required: context.required,
+					"aria-invalid": invalidOf(context),
+					"aria-valuemin": context.min,
+					"aria-valuemax": context.max,
+					"aria-valuenow": Number.isNaN(number) ? void 0 : number,
+					"aria-roledescription": "numberfield",
+					onFocus: handlersOf(scope).onInputFocus,
+					onBlur: handlersOf(scope).onInputBlur,
+					onInput: handlersOf(scope).onInput,
+					onBeforeInput: handlersOf(scope).onBeforeInput,
+					onKeydown: handlersOf(scope).onInputKeydown,
+					onWheel: handlersOf(scope).onInputWheel
+				};
+			}
+		},
+		decrementTrigger: {
+			id: "decrement",
+			attrs: (scope) => {
+				const off = disabledOf(scope.context) || !canDecrement(scope.context) || scope.context.readOnly;
+				return {
+					dir: scope.context.dir,
+					type: "button",
+					disabled: off,
+					tabIndex: -1,
+					"aria-label": scope.context.decrementLabel,
+					"aria-controls": scope.id("input"),
+					onPointerDown: handlersOf(scope).onDecrementDown,
+					onPointerUp: handlersOf(scope).onTriggerUp,
+					onPointerLeave: handlersOf(scope).onTriggerUp
+				};
+			}
+		},
+		incrementTrigger: {
+			id: "increment",
+			attrs: (scope) => {
+				const off = disabledOf(scope.context) || !canIncrement(scope.context) || scope.context.readOnly;
+				return {
+					dir: scope.context.dir,
+					type: "button",
+					disabled: off,
+					tabIndex: -1,
+					"aria-label": scope.context.incrementLabel,
+					"aria-controls": scope.id("input"),
+					onPointerDown: handlersOf(scope).onIncrementDown,
+					onPointerUp: handlersOf(scope).onTriggerUp,
+					onPointerLeave: handlersOf(scope).onTriggerUp
+				};
+			}
+		},
+		scrubber: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			role: "presentation",
+			onPointerDown: handlersOf(scope).onScrubberDown,
+			onPointerMove: handlersOf(scope).onScrubberMove,
+			onPointerUp: handlersOf(scope).onScrubberUp
+		}) },
+		cursor: { attrs: (scope) => {
+			const point = scope.context.cursorPoint;
+			return {
+				"aria-hidden": true,
+				hidden: !(scope.state === "scrubbing"),
+				style: {
+					left: `${point === null ? 0 : point.x}px`,
+					top: `${point === null ? 0 : point.y}px`
+				}
+			};
+		} }
+	},
+	readers: {
+		value: { read: (ctx) => ctx.value },
+		valueAsNumber: { read: (ctx) => parseValue(ctx.value) },
+		focused: { read: (_ctx, state) => state === "focused" },
+		scrubbing: { read: (_ctx, state) => state === "scrubbing" },
+		invalid: { read: (ctx) => {
+			if (ctx.invalid !== void 0) return ctx.invalid;
+			const at = Number.isNaN(Number.parseFloat(ctx.value)) ? 0 : Number.parseFloat(ctx.value);
+			return at < ctx.min || at > ctx.max;
+		} },
+		disabled: { read: (ctx) => ctx.disabled || ctx.fieldsetDisabled },
+		empty: { read: (ctx) => ctx.value === "" },
+		canIncrement: { read: (ctx) => {
+			if (ctx.allowOverflow) return true;
+			return (Number.isNaN(Number.parseFloat(ctx.value)) ? 0 : Number.parseFloat(ctx.value)) < ctx.max;
+		} },
+		canDecrement: { read: (ctx) => {
+			if (ctx.allowOverflow) return true;
+			const at = parseValue(ctx.value);
+			return (Number.isNaN(at) ? 0 : at) > ctx.min;
+		} },
+		required: { read: (ctx) => ctx.required }
+	},
+	commands: {
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value
+		}) },
+		clearValue: { event: () => ({ type: "VALUE.CLEAR" }) },
+		increment: { event: () => ({ type: "VALUE.INCREMENT" }) },
+		decrement: { event: () => ({ type: "VALUE.DECREMENT" }) },
+		setToMax: { event: (_args, ctx) => ({
+			type: "VALUE.SET",
+			value: ctx.max
+		}) },
+		setToMin: { event: (_args, ctx) => ({
+			type: "VALUE.SET",
+			value: ctx.min
+		}) },
+		focus: { view: ({ focus }) => focus("input") }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (ctx) => [ctx.value],
+			detail: (watched) => ({
+				value: watched[0],
+				valueAsNumber: parseValue(String(watched[0] ?? ""))
+			}),
+			select: (_event, before, after) => after.value === before.value ? null : {
+				value: after.value,
+				valueAsNumber: parseValue(after.value)
+			}
+		},
+		"value-commit": {
+			prop: "onValueCommit",
+			watch: (ctx) => [ctx.value],
+			detail: (watched) => ({
+				value: watched[0],
+				valueAsNumber: parseValue(String(watched[0] ?? ""))
+			}),
+			select: (event, _before, after) => event.type === "INPUT.BLUR" || event.type === "INPUT.ENTER" ? {
+				value: after.value,
+				valueAsNumber: parseValue(after.value)
+			} : null
+		},
+		"value-invalid": {
+			prop: "onValueInvalid",
+			watch: (ctx) => [ctx.value],
+			detail: (watched, _event, _props, ctx) => {
+				const v = parseValue(String(watched[0] ?? ""));
+				return {
+					reason: v > ctx.max ? "rangeOverflow" : "rangeUnderflow",
+					value: watched[0],
+					valueAsNumber: v
+				};
+			},
+			select: (event, _before, after) => {
+				const out = !isValueWithinRange(parseValue(after.value), after.min, after.max);
+				if (!out) return null;
+				if (event.type === "INPUT.BLUR") return {
+					reason: parseValue(after.value) > after.max ? "rangeOverflow" : "rangeUnderflow",
+					value: after.value,
+					valueAsNumber: parseValue(after.value)
+				};
+				if (event.type === "INPUT.CHANGE") return null;
+				if (out === !isValueWithinRange(parseValue(_before.value), _before.min, _before.max)) return null;
+				return {
+					reason: parseValue(after.value) > after.max ? "rangeOverflow" : "rangeUnderflow",
+					value: after.value,
+					valueAsNumber: parseValue(after.value)
+				};
+			}
+		},
+		"focus-change": {
+			prop: "onFocusChange",
+			watch: (ctx, state) => [state === "focused", ctx.value],
+			detail: (watched) => ({
+				focused: watched[0],
+				value: watched[1],
+				valueAsNumber: parseValue(String(watched[1] ?? ""))
+			}),
+			select: (event, _before, after, states) => {
+				const was = states?.was ?? "idle";
+				const is = states?.is ?? "idle";
+				if (was === "idle" && is !== "idle") return {
+					focused: true,
+					value: after.value,
+					valueAsNumber: parseValue(after.value)
+				};
+				if (was !== "idle" && (is === "idle" || event.type === "INPUT.BLUR" || event.type === "INPUT.ENTER")) return {
+					focused: false,
+					value: after.value,
+					valueAsNumber: parseValue(after.value)
+				};
+				return null;
+			}
+		}
+	}
+};
+const numberInput = defineComponent(def);
+export { def, numberInput };
+
+//# sourceMappingURL=number-input.presentation.js.map

package/dist/number-input/number-input.state.d.ts

@@ -0,0 +1,71 @@
+import { NumberInputHint, NumberInputPoint } from "./number-input.events.js";
+export type NumberInputState = "idle" | "focused" | "scrubbing";
+export interface NumberInputContext {
+  value: string;
+  hint: NumberInputHint | null;
+  cursorPoint: NumberInputPoint | null;
+  fieldsetDisabled: boolean;
+  disabled: boolean;
+  readOnly: boolean;
+  required: boolean;
+  invalid: boolean | undefined;
+  min: number;
+  max: number;
+  step: number;
+  largeStep: number;
+  smallStep: number;
+  allowOverflow: boolean;
+  allowMouseWheel: boolean;
+  focusInputOnChange: boolean;
+  clampValueOnBlur: boolean;
+  spinOnPress: boolean;
+  dir: "ltr" | "rtl";
+  inputMode: string;
+  pattern: string;
+  name: string | undefined;
+  form: string | undefined;
+  incrementLabel: string;
+  decrementLabel: string;
+  initialValue: string;
+  spin: "hold" | "repeat" | null;
+}
+export interface NumberInputArgs {
+  value?: string;
+  defaultValue?: string | undefined;
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+  largeStep?: string | number;
+  smallStep?: string | number;
+  allowOverflow?: boolean;
+  allowMouseWheel?: boolean;
+  focusInputOnChange?: boolean;
+  clampValueOnBlur?: boolean;
+  spinOnPress?: boolean;
+  dir?: "ltr" | "rtl";
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  invalid?: boolean;
+  inputMode?: string;
+  pattern?: string;
+  name?: string;
+  form?: string;
+  incrementLabel?: string;
+  decrementLabel?: string;
+}
+export declare function asNumber(raw: unknown, fallback: number): number;
+export declare function valueOf(raw: unknown): string | null;
+export type NumberInputScalarKey = "min" | "max" | "step" | "largeStep" | "smallStep" | "allowOverflow" | "clampValueOnBlur" | "spinOnPress";
+export declare function numberInputScalars(args: NumberInputArgs, authored?: (name: string) => boolean): Pick<NumberInputContext, NumberInputScalarKey>;
+export declare function initial(args: NumberInputArgs, authored?: (name: string) => boolean): NumberInputContext;
+export declare const parseValue: (raw: string) => number;
+export declare const formatValue: (value: number) => string;
+export declare const isValueWithinRange: (value: number, min: number, max: number) => boolean;
+declare const countDecimals: (value: number) => number;
+declare const decimalOp: (a: number, op: "+" | "-", b: number) => number;
+export declare const incrementValue: (value: number, step: number) => number;
+export declare const decrementValue: (value: number, step: number) => number;
+export declare const clampValue: (value: number, min: number, max: number) => number;
+export { countDecimals, decimalOp };
+//# sourceMappingURL=number-input.state.d.ts.map

package/dist/number-input/number-input.state.js

@@ -0,0 +1,86 @@
+import { defaultTwin } from "@spinjs/runtime";
+// src/number-input/number-input.state.ts
+const MIN_SAFE = Number.MIN_SAFE_INTEGER;
+const MAX_SAFE = Number.MAX_SAFE_INTEGER;
+const DEFAULT_STEP = 1;
+function asNumber(raw, fallback) {
+	if (typeof raw === "number") return Number.isFinite(raw) ? raw : fallback;
+	if (typeof raw !== "string") return fallback;
+	const trimmed = raw.trim();
+	if (trimmed.length === 0) return fallback;
+	const parsed = Number(trimmed);
+	return Number.isFinite(parsed) ? parsed : fallback;
+}
+function valueOf(raw) {
+	if (typeof raw === "string") return raw;
+	if (typeof raw === "number" && Number.isFinite(raw)) return raw.toString();
+	return null;
+}
+function numberInputScalars(args, authored = () => false) {
+	const step = asNumber(args.step, DEFAULT_STEP);
+	const allowOverflow = args.allowOverflow === true;
+	return {
+		min: asNumber(args.min, MIN_SAFE),
+		max: asNumber(args.max, MAX_SAFE),
+		step,
+		largeStep: asNumber(args.largeStep, 10 * step),
+		smallStep: asNumber(args.smallStep, step / 10),
+		allowOverflow,
+		clampValueOnBlur: authored("clampValueOnBlur") ? args.clampValueOnBlur === true : !allowOverflow,
+		spinOnPress: args.spinOnPress !== false
+	};
+}
+function initial(args, authored = () => true) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	return {
+		value: written("value") ? valueOf(args.value) ?? "" : "",
+		hint: null,
+		cursorPoint: null,
+		fieldsetDisabled: false,
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		required: args.required === true,
+		invalid: authored("invalid") ? args.invalid === true : void 0,
+		...numberInputScalars(args, authored),
+		allowMouseWheel: args.allowMouseWheel === true,
+		focusInputOnChange: authored("focusInputOnChange") ? args.focusInputOnChange === true : true,
+		dir: args.dir === "rtl" ? "rtl" : "ltr",
+		inputMode: typeof args.inputMode === "string" && args.inputMode.length > 0 ? args.inputMode : "decimal",
+		pattern: typeof args.pattern === "string" && args.pattern.length > 0 ? args.pattern : "-?[0-9]*(.[0-9]+)?",
+		name: typeof args.name === "string" && args.name.length > 0 ? args.name : void 0,
+		form: typeof args.form === "string" && args.form.length > 0 ? args.form : void 0,
+		incrementLabel: typeof args.incrementLabel === "string" && args.incrementLabel.length > 0 ? args.incrementLabel : "increment value",
+		decrementLabel: typeof args.decrementLabel === "string" && args.decrementLabel.length > 0 ? args.decrementLabel : "decrease value",
+		initialValue: written("value") ? valueOf(args.value) ?? "" : valueOf(args.defaultValue) ?? "",
+		spin: null
+	};
+}
+const parseValue = (raw) => Number.parseFloat(raw);
+const formatValue = (value) => Number.isNaN(value) ? "" : value.toString();
+const isValueWithinRange = (value, min, max) => {
+	const at = Number.isNaN(value) ? 0 : value;
+	return at >= min && at <= max;
+};
+const countDecimals = (value) => {
+	if (!Number.isFinite(value)) return 0;
+	let exponent = 1;
+	let places = 0;
+	while (Math.round(value * exponent) / exponent !== value) {
+		exponent *= 10;
+		places += 1;
+	}
+	return places;
+};
+const decimalOp = (a, op, b) => {
+	if (a % 1 === 0 && b % 1 === 0) return op === "+" ? a + b : a - b;
+	const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+	const left = Math.round(a * multiplier);
+	const right = Math.round(b * multiplier);
+	return (op === "+" ? left + right : left - right) / multiplier;
+};
+const incrementValue = (value, step) => decimalOp(Number.isNaN(value) ? 0 : value, "+", step);
+const decrementValue = (value, step) => decimalOp(Number.isNaN(value) ? 0 : value, "-", step);
+const clampValue = (value, min, max) => Math.min(Math.max(Number.isNaN(value) ? 0 : value, min), max);
+export { asNumber, clampValue, countDecimals, decimalOp, decrementValue, formatValue, incrementValue, initial, isValueWithinRange, numberInputScalars, parseValue, valueOf };
+
+//# sourceMappingURL=number-input.state.js.map

package/dist/number-input/number-input.transitions.d.ts

@@ -0,0 +1,17 @@
+import { NumberInputEvent, NumberInputEvents } from "./number-input.events.js";
+import { NumberInputContext } from "./number-input.state.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type NumberInputAssign<K extends keyof NumberInputEvents = keyof NumberInputEvents> = AssignFor<NumberInputContext, NumberInputEvents, K>;
+export declare const increment: NumberInputAssign<"VALUE.INCREMENT" | "INPUT.ARROW_UP" | "TRIGGER.PRESS_DOWN" | "SCRUBBER.POINTER_MOVE" | "SPIN">;
+export declare const decrement: NumberInputAssign<"VALUE.DECREMENT" | "INPUT.ARROW_DOWN" | "TRIGGER.PRESS_DOWN" | "SCRUBBER.POINTER_MOVE" | "SPIN">;
+export declare const setFormattedValue: NumberInputAssign<"INPUT.BLUR" | "INPUT.ENTER">;
+export declare const beginSpin: NumberInputAssign<"TRIGGER.PRESS_DOWN">;
+export declare const endSpin: () => Partial<NumberInputContext>;
+export declare const clearHint: () => Partial<NumberInputContext>;
+export declare const setCursorPoint: (_ctx: NumberInputContext, event: NumberInputEvent) => Partial<NumberInputContext>;
+export declare const moved: (ctx: NumberInputContext, event: NumberInputEvent, op: (value: number, step: number) => number) => Partial<NumberInputContext>;
+export declare const isIncrementHint: GuardFor<NumberInputContext, NumberInputEvents>;
+export declare const isDecrementHint: GuardFor<NumberInputContext, NumberInputEvents>;
+export declare const outOfRange: (ctx: NumberInputContext) => boolean;
+export {};
+//# sourceMappingURL=number-input.transitions.d.ts.map

package/dist/number-input/number-input.transitions.js

@@ -0,0 +1,40 @@
+import { clampValue, decrementValue, formatValue, incrementValue, isValueWithinRange, parseValue } from "./number-input.state.js";
+// src/number-input/number-input.transitions.ts
+const increment = (ctx, event) => {
+	const step = "step" in event ? event.step : void 0;
+	const next = incrementValue(parseValue(ctx.value), step ?? ctx.step);
+	const bounded = ctx.allowOverflow ? next : clampValue(next, ctx.min, ctx.max);
+	return { value: formatValue(bounded) };
+};
+const decrement = (ctx, event) => {
+	const step = "step" in event ? event.step : void 0;
+	const next = decrementValue(parseValue(ctx.value), step ?? ctx.step);
+	const bounded = ctx.allowOverflow ? next : clampValue(next, ctx.min, ctx.max);
+	return { value: formatValue(bounded) };
+};
+const setFormattedValue = (ctx) => ({ value: formatValue(parseValue(ctx.value)) });
+const beginSpin = (_ctx, event) => ({
+	hint: event.type === "TRIGGER.PRESS_DOWN" ? event.hint : null,
+	spin: "hold"
+});
+const endSpin = () => ({
+	hint: null,
+	spin: null
+});
+const clearHint = () => ({ hint: null });
+const setCursorPoint = (_ctx, event) => {
+	const point = "point" in event ? event.point : void 0;
+	return point === void 0 ? {} : { cursorPoint: point };
+};
+const moved = (ctx, event, op) => {
+	const step = "step" in event ? event.step ?? ctx.step : ctx.step;
+	const next = op(parseValue(ctx.value), step);
+	const bounded = ctx.allowOverflow ? next : clampValue(next, ctx.min, ctx.max);
+	return { value: formatValue(bounded) };
+};
+const isIncrementHint = (ctx, event) => ("hint" in event ? event.hint : ctx.hint) === "increment";
+const isDecrementHint = (ctx, event) => ("hint" in event ? event.hint : ctx.hint) === "decrement";
+const outOfRange = (ctx) => !isValueWithinRange(parseValue(ctx.value), ctx.min, ctx.max);
+export { beginSpin, clearHint, decrement, endSpin, increment, isDecrementHint, isIncrementHint, moved, outOfRange, setCursorPoint, setFormattedValue };
+
+//# sourceMappingURL=number-input.transitions.js.map