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

package/dist/navigation-menu/navigation-menu.transitions.js

@@ -0,0 +1,32 @@
+import { asText } from "./navigation-menu.state.js";
+// src/navigation-menu/navigation-menu.transitions.ts
+const toggleOpen = (ctx, event) => event.value === ctx.value ? {
+	previousValue: ctx.value,
+	value: ""
+} : {
+	previousValue: ctx.value,
+	value: event.value
+};
+const closeAll = (ctx, _event) => ({
+	previousValue: ctx.value,
+	value: ""
+});
+const setValue = (ctx, event) => {
+	const value = asText(event.value);
+	if (value === null || value === ctx.value) return {};
+	return {
+		previousValue: ctx.value,
+		value
+	};
+};
+const openItem = (ctx, event) => ({
+	previousValue: ctx.value,
+	value: event.value
+});
+const swapItem = (ctx, event) => event.value === ctx.value ? {} : {
+	previousValue: ctx.value,
+	value: event.value
+};
+export { closeAll, openItem, setValue, swapItem, toggleOpen };
+
+//# sourceMappingURL=navigation-menu.transitions.js.map

package/dist/number-input/examples/basic.html

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({
+  defaultValue: "3",
+  step: "1",
+  min: "0",
+  max: "10",
+});
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Quantity</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div
+    class={["relative mt-2 h-[1.25rem] select-none touch-none rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "border-border-strong bg-surface": machine.scrubbing, "opacity-50": machine.disabled }]}
+    {...machine.getScrubberProps()}
+  >
+    <span
+      class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1 text-xs text-text-muted transition-opacity duration-fast ease-decelerate"
+      aria-hidden="true"><span class="i-lucide-chevron-left text-xs" aria-hidden="true"></span><span class="i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
+    <span
+      class="pointer-events-none fixed z-50 h-5 w-5 rounded-md border border-solid border-border bg-surface-raised text-center text-xs text-text shadow-lg transition-opacity duration-fast ease-decelerate"
+      {...machine.getCursorProps()}
+    ><span aria-hidden="true"><span class="i-lucide-move-horizontal text-xs" aria-hidden="true"></span></span></span>
+  </div>
+</div>

package/dist/number-input/examples/currency.html

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({ defaultValue: "99", step: "0.01", min: "0" });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Price</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div class="text-xs text-text-muted">Enter product price</div>
+</div>

package/dist/number-input/examples/decimal.html

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({ defaultValue: "3.14159", step: "0.001" });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Precision Value</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="inline-block icon-sm i-lucide-minus" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] font-mono tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="inline-block icon-sm i-lucide-plus" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div class="text-xs text-text-muted">Step: 0.001, up to 5 decimal places</div>
+</div>

package/dist/number-input/examples/limits.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({
+  defaultValue: "5",
+  step: "1",
+  min: "0",
+  max: "10",
+  clampValueOnBlur: true,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Rating (0-10)</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div class="mt-2 flex justify-between text-xs text-text-muted">
+    <span>Min: 0</span>
+    <span>Max: 10</span>
+  </div>
+</div>

package/dist/number-input/examples/percentage.html

@@ -0,0 +1,38 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({
+  defaultValue: "15",
+  step: "0.1",
+  min: "0",
+  max: "100",
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Discount Rate</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div class="text-xs text-text-muted">Enter a value between 0% and 100%</div>
+</div>

package/dist/number-input/examples/quantity.html

@@ -0,0 +1,35 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({ defaultValue: "1", step: "1", min: "0" });
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Amount</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div
+    class={["relative inline-flex h-7 w-full items-center overflow-hidden rounded-md border border-solid border-border text-sm whitespace-nowrap transition-all duration-fast ease-decelerate focus-within:ring-2 focus-within:ring-border-strong", { "opacity-50": machine.disabled }]}
+    {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["bare h-full w-full grow text-center tabular-nums", { "ring-0": machine.focused }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div class="text-xs text-text-muted">Enter number of items</div>
+</div>

package/dist/number-input/examples/scrubber.html

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({ defaultValue: "42", step: "1" });
+</script>
+
+<div class="w-64 max-w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Interactive Value</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div
+    class={["relative mt-2 h-[1.25rem] select-none touch-none rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "border-border-strong bg-surface": machine.scrubbing, "opacity-50": machine.disabled }]}
+    {...machine.getScrubberProps()}
+  >
+    <span
+      class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1 text-xs text-text-muted transition-opacity duration-fast ease-decelerate"
+      aria-hidden="true"><span class="i-lucide-chevron-left text-xs" aria-hidden="true"></span><span class="i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
+    <span
+      class="pointer-events-none fixed z-50 h-5 w-5 rounded-md border border-solid border-border bg-surface-raised text-center text-xs text-text shadow-lg transition-opacity duration-fast ease-decelerate"
+      {...machine.getCursorProps()}
+    ><span aria-hidden="true"><span class="i-lucide-move-horizontal text-xs" aria-hidden="true"></span></span></span>
+  </div>
+
+  <div class="text-xs text-text-muted">Drag the icon to scrub the value</div>
+</div>

package/dist/number-input/examples/wheel.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { numberInput } from "../number-input.presentation.js";
+
+const machine = numberInput({
+  defaultValue: "100",
+  step: "10",
+  min: "0",
+  max: "1000",
+  allowMouseWheel: true,
+});
+</script>
+
+<div class="w-full" {...machine.getRootProps()}>
+  <div class="mb-1 flex items-center justify-between gap-2">
+    <label
+      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      {...machine.getLabelProps()}>Volume Level</label>
+    <span
+      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      {...machine.getValueTextProps()}>{machine.value}</span>
+  </div>
+
+  <div class="flex items-center gap-2" {...machine.getControlProps()}>
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getDecrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    <input
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      {...machine.getInputProps()}
+    />
+    <button
+      class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
+      {...machine.getIncrementTriggerProps()}
+    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+  </div>
+
+  <div class="mt-2 flex items-center gap-1 text-xs text-text-muted">
+    <span class="i-lucide-mouse-pointer text-xs" aria-hidden="true"></span>
+    <span>Focus and use mouse wheel to change</span>
+  </div>
+</div>

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

@@ -0,0 +1,66 @@
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface NumberInputEvents {
+  "VALUE.SET": {
+    value: number | string;
+  };
+  "VALUE.CLEAR": {};
+  "VALUE.INCREMENT": {};
+  "VALUE.DECREMENT": {};
+  "TRIGGER.PRESS_DOWN": {
+    hint: NumberInputHint;
+  };
+  "TRIGGER.PRESS_UP": {};
+  "CHANGE_DELAY": {};
+  "SPIN": {};
+  "SCRUBBER.PRESS_DOWN": {
+    point: NumberInputPoint;
+  };
+  "SCRUBBER.POINTER_MOVE": {
+    hint: NumberInputHint;
+    point: NumberInputPoint;
+  };
+  "SCRUBBER.POINTER_UP": {};
+  "INPUT.FOCUS": {};
+  "INPUT.BLUR": {};
+  "INPUT.CHANGE": {
+    value: string;
+  };
+  "INPUT.ARROW_UP": {
+    step: number;
+  };
+  "INPUT.ARROW_DOWN": {
+    step: number;
+  };
+  "INPUT.HOME": {};
+  "INPUT.END": {};
+  "INPUT.ENTER": {};
+  "FIELDSET.DISABLED": {
+    value: boolean;
+  };
+}
+export type NumberInputHint = "increment" | "decrement";
+export interface NumberInputPoint {
+  readonly x: number;
+  readonly y: number;
+}
+export type NumberInputEvent = EventUnion<NumberInputEvents>;
+export interface NumberInputValueChange {
+  readonly value: string;
+  readonly valueAsNumber: number;
+}
+export interface NumberInputValueCommit {
+  readonly value: string;
+  readonly valueAsNumber: number;
+}
+export type NumberInputInvalidReason = "rangeOverflow" | "rangeUnderflow";
+export interface NumberInputValueInvalid {
+  readonly reason: NumberInputInvalidReason;
+  readonly value: string;
+  readonly valueAsNumber: number;
+}
+export interface NumberInputFocusChange {
+  readonly focused: boolean;
+  readonly value: string;
+  readonly valueAsNumber: number;
+}
+//# sourceMappingURL=number-input.events.d.ts.map

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { NumberInputEvents } from "./number-input.events.js";
+import { NumberInputArgs, NumberInputContext, NumberInputState } from "./number-input.state.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function numberInput(args?: NumberInputArgs, authored?: (name: string) => boolean): Machine<NumberInputContext, NumberInputEvents, NumberInputState>;
+//# sourceMappingURL=number-input.machine.d.ts.map

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

@@ -0,0 +1,132 @@
+import { asNumber, clampValue, formatValue, initial, parseValue } from "./number-input.state.js";
+import { beginSpin, clearHint, decrement, endSpin, increment, isDecrementHint, isIncrementHint, outOfRange, setCursorPoint, setFormattedValue } from "./number-input.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/number-input/number-input.machine.ts
+/** Number-input machine: chart only. */
+function numberInput(args = {}, authored = () => true) {
+	return createMachine({
+		id: "number-input",
+		initial: "idle",
+		context: initial(args, authored),
+		on: {
+			"VALUE.SET": { assign: (ctx, event) => {
+				if (typeof event.value === "string") return { value: event.value };
+				if (typeof event.value !== "number") return {};
+				const raw = event.value;
+				return { value: formatValue(ctx.allowOverflow ? raw : clampValue(raw, ctx.min, ctx.max)) };
+			} },
+			"VALUE.CLEAR": { assign: () => ({ value: "" }) },
+			"VALUE.INCREMENT": { assign: increment },
+			"VALUE.DECREMENT": { assign: decrement },
+			"FIELDSET.DISABLED": { assign: (_ctx, event) => event.type === "FIELDSET.DISABLED" ? { fieldsetDisabled: event.value } : {} },
+			"CHANGE_DELAY": [{
+				cond: (ctx) => ctx.spinOnPress && !outOfRange(ctx),
+				assign: () => ({ spin: "repeat" })
+			}, { assign: endSpin }],
+			"SPIN": [{
+				cond: isIncrementHint,
+				assign: increment
+			}, {
+				cond: isDecrementHint,
+				assign: decrement
+			}]
+		},
+		states: {
+			idle: { on: {
+				"TRIGGER.PRESS_DOWN": [{
+					target: "focused",
+					cond: isDecrementHint,
+					assign: [beginSpin, decrement]
+				}, {
+					target: "focused",
+					cond: isIncrementHint,
+					assign: [beginSpin, increment]
+				}],
+				"SCRUBBER.PRESS_DOWN": {
+					target: "scrubbing",
+					assign: setCursorPoint
+				},
+				"INPUT.FOCUS": { target: "focused" }
+			} },
+			focused: { on: {
+				"TRIGGER.PRESS_DOWN": [{
+					target: "focused",
+					cond: isDecrementHint,
+					assign: [beginSpin, decrement]
+				}, {
+					target: "focused",
+					cond: isIncrementHint,
+					assign: [beginSpin, increment]
+				}],
+				"SCRUBBER.PRESS_DOWN": {
+					target: "scrubbing",
+					assign: setCursorPoint
+				},
+				"TRIGGER.PRESS_UP": { assign: endSpin },
+				"INPUT.ARROW_UP": { assign: increment },
+				"INPUT.ARROW_DOWN": { assign: decrement },
+				"INPUT.HOME": { assign: (ctx) => ({ value: formatValue(ctx.min) }) },
+				"INPUT.END": { assign: (ctx) => ({ value: formatValue(ctx.max) }) },
+				"INPUT.CHANGE": { assign: (_ctx, event) => event.type === "INPUT.CHANGE" ? { value: event.value } : {} },
+				"INPUT.BLUR": [
+					{
+						target: "idle",
+						cond: (ctx) => ctx.clampValueOnBlur && ctx.value !== "" && outOfRange(ctx),
+						assign: [(ctx) => ({ value: formatValue(clampValue(parseValue(ctx.value), ctx.min, ctx.max)) }), clearHint]
+					},
+					{
+						target: "idle",
+						cond: outOfRange,
+						assign: [setFormattedValue, clearHint]
+					},
+					{
+						target: "idle",
+						assign: [setFormattedValue, clearHint]
+					}
+				],
+				"INPUT.ENTER": { assign: [setFormattedValue, clearHint] }
+			} },
+			scrubbing: { on: {
+				"SCRUBBER.POINTER_UP": {
+					target: "focused",
+					assign: () => ({ cursorPoint: null })
+				},
+				"SCRUBBER.POINTER_MOVE": [{
+					cond: isIncrementHint,
+					assign: [increment, setCursorPoint]
+				}, {
+					cond: isDecrementHint,
+					assign: [decrement, setCursorPoint]
+				}]
+			} }
+		},
+		fields: {
+			value: { event: "VALUE.SET" },
+			min: { parse: (raw) => asNumber(raw, Number.MIN_SAFE_INTEGER) },
+			max: { parse: (raw) => asNumber(raw, Number.MAX_SAFE_INTEGER) },
+			step: { parse: (raw) => asNumber(raw, 1) },
+			largeStep: { parse: (raw) => asNumber(raw, 10) },
+			smallStep: { parse: (raw) => asNumber(raw, .1) },
+			allowOverflow: {},
+			allowMouseWheel: {},
+			focusInputOnChange: {},
+			clampValueOnBlur: {},
+			spinOnPress: {},
+			disabled: {},
+			readOnly: {},
+			required: {},
+			invalid: {},
+			dir: {},
+			inputMode: {},
+			pattern: {},
+			name: {},
+			form: {},
+			incrementLabel: {},
+			decrementLabel: {},
+			initialValue: {}
+		}
+	});
+}
+export { numberInput };
+
+//# sourceMappingURL=number-input.machine.js.map