@zag-js/number-input 2.0.0-next.1 → 2.0.0-next.3

package/dist/number-input.connect.js

@@ -38,6 +38,7 @@ var import_utils = require("@zag-js/utils");
 var import_cursor = require("./cursor.js");
 var import_number_input = require("./number-input.anatomy.js");
 var dom = __toESM(require("./number-input.dom.js"));
+var import_number_input2 = require("./number-input.translations.js");
 function connect(service, normalize) {
   const { state, send, prop, scope, computed, context } = service;
   const focused = state.hasTag("focus");
@@ -49,7 +50,7 @@ function connect(service, normalize) {
   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");
+  const translations = (0, import_utils.mergeWithDefault)(import_number_input2.defaultTranslations, prop("translations"));
   function getRootState() {
     return { disabled, focused, invalid, scrubbing };
   }
@@ -70,22 +71,22 @@ function connect(service, normalize) {
     value: computed("formattedValue"),
     valueAsNumber: computed("valueAsNumber"),
     setValue(value) {
-      send({ type: "VALUE.SET", value });
+      send({ type: "VALUE.SET", value, src: "script" });
     },
     clearValue() {
-      send({ type: "VALUE.CLEAR" });
+      send({ type: "VALUE.CLEAR", src: "script" });
     },
     increment() {
-      send({ type: "VALUE.INCREMENT" });
+      send({ type: "VALUE.INCREMENT", src: "script" });
     },
     decrement() {
-      send({ type: "VALUE.DECREMENT" });
+      send({ type: "VALUE.DECREMENT", src: "script" });
     },
     setToMax() {
-      send({ type: "VALUE.SET", value: prop("max") });
+      send({ type: "VALUE.SET", value: prop("max"), src: "script" });
     },
     setToMin() {
-      send({ type: "VALUE.SET", value: prop("min") });
+      send({ type: "VALUE.SET", value: prop("min"), src: "script" });
     },
     focus() {
       dom.getInputEl(scope)?.focus();
@@ -176,11 +177,11 @@ function connect(service, normalize) {
           send({ type: "INPUT.FOCUS" });
         },
         onBlur() {
-          send({ type: "INPUT.BLUR" });
+          send({ type: "INPUT.BLUR", src: "input-blur" });
         },
         onInput(event) {
           const selection = (0, import_cursor.recordCursor)(event.currentTarget, scope);
-          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection, src: "input-change" });
         },
         onBeforeInput(event) {
           try {
@@ -204,30 +205,40 @@ function connect(service, normalize) {
           });
           const keyMap = {
             ArrowUp() {
-              send({ type: "INPUT.ARROW_UP", step });
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             ArrowDown() {
-              send({ type: "INPUT.ARROW_DOWN", step });
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageUp() {
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageDown() {
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             Home() {
               if ((0, import_dom_query.isModifierKey)(event)) return;
-              send({ type: "INPUT.HOME" });
+              send({ type: "INPUT.HOME", src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             End() {
               if ((0, import_dom_query.isModifierKey)(event)) return;
-              send({ type: "INPUT.END" });
+              send({ type: "INPUT.END", src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             Enter(event2) {
               const selection = (0, import_cursor.recordCursor)(event2.currentTarget, scope);
-              send({ type: "INPUT.ENTER", selection });
+              send({ type: "INPUT.ENTER", selection, src: "keyboard" });
             }
           };
           const exec = keyMap[event.key];
@@ -251,7 +262,12 @@ function connect(service, normalize) {
         onPointerDown(event) {
           if (decrementTriggerState.disabled) return;
           if (!(0, import_dom_query.isLeftClick)(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "decrement",
+            pointerType: event.pointerType,
+            src: "decrement-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -260,11 +276,14 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         },
         onPointerLeave() {
           if (decrementTriggerState.disabled) return;
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", src: "decrement-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         }
       });
     },
@@ -283,7 +302,12 @@ function connect(service, normalize) {
         "data-scrubbing": (0, import_dom_query.dataAttr)(scrubbing),
         onPointerDown(event) {
           if (incrementTriggerState.disabled || !(0, import_dom_query.isLeftClick)(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "increment",
+            pointerType: event.pointerType,
+            src: "increment-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -292,10 +316,13 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         },
         onPointerLeave(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         }
       });
     },

package/dist/number-input.connect.mjs

@@ -12,10 +12,11 @@ import {
   raf,
   setCaretToEnd
 } from "@zag-js/dom-query";
-import { roundToDpr, toPx } from "@zag-js/utils";
+import { mergeWithDefault, roundToDpr, toPx } from "@zag-js/utils";
 import { recordCursor } from "./cursor.mjs";
 import { parts } from "./number-input.anatomy.mjs";
 import * as dom from "./number-input.dom.mjs";
+import { defaultTranslations } from "./number-input.translations.mjs";
 function connect(service, normalize) {
   const { state, send, prop, scope, computed, context } = service;
   const focused = state.hasTag("focus");
@@ -27,7 +28,7 @@ function connect(service, normalize) {
   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");
+  const translations = mergeWithDefault(defaultTranslations, prop("translations"));
   function getRootState() {
     return { disabled, focused, invalid, scrubbing };
   }
@@ -48,22 +49,22 @@ function connect(service, normalize) {
     value: computed("formattedValue"),
     valueAsNumber: computed("valueAsNumber"),
     setValue(value) {
-      send({ type: "VALUE.SET", value });
+      send({ type: "VALUE.SET", value, src: "script" });
     },
     clearValue() {
-      send({ type: "VALUE.CLEAR" });
+      send({ type: "VALUE.CLEAR", src: "script" });
     },
     increment() {
-      send({ type: "VALUE.INCREMENT" });
+      send({ type: "VALUE.INCREMENT", src: "script" });
     },
     decrement() {
-      send({ type: "VALUE.DECREMENT" });
+      send({ type: "VALUE.DECREMENT", src: "script" });
     },
     setToMax() {
-      send({ type: "VALUE.SET", value: prop("max") });
+      send({ type: "VALUE.SET", value: prop("max"), src: "script" });
     },
     setToMin() {
-      send({ type: "VALUE.SET", value: prop("min") });
+      send({ type: "VALUE.SET", value: prop("min"), src: "script" });
     },
     focus() {
       dom.getInputEl(scope)?.focus();
@@ -154,11 +155,11 @@ function connect(service, normalize) {
           send({ type: "INPUT.FOCUS" });
         },
         onBlur() {
-          send({ type: "INPUT.BLUR" });
+          send({ type: "INPUT.BLUR", src: "input-blur" });
         },
         onInput(event) {
           const selection = recordCursor(event.currentTarget, scope);
-          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection });
+          send({ type: "INPUT.CHANGE", target: event.currentTarget, hint: "set", selection, src: "input-change" });
         },
         onBeforeInput(event) {
           try {
@@ -182,30 +183,40 @@ function connect(service, normalize) {
           });
           const keyMap = {
             ArrowUp() {
-              send({ type: "INPUT.ARROW_UP", step });
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             ArrowDown() {
-              send({ type: "INPUT.ARROW_DOWN", step });
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageUp() {
+              send({ type: "INPUT.ARROW_UP", step, src: "keyboard" });
+              event.preventDefault();
+              event.stopPropagation();
+            },
+            PageDown() {
+              send({ type: "INPUT.ARROW_DOWN", step, src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             Home() {
               if (isModifierKey(event)) return;
-              send({ type: "INPUT.HOME" });
+              send({ type: "INPUT.HOME", src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             End() {
               if (isModifierKey(event)) return;
-              send({ type: "INPUT.END" });
+              send({ type: "INPUT.END", src: "keyboard" });
               event.preventDefault();
               event.stopPropagation();
             },
             Enter(event2) {
               const selection = recordCursor(event2.currentTarget, scope);
-              send({ type: "INPUT.ENTER", selection });
+              send({ type: "INPUT.ENTER", selection, src: "keyboard" });
             }
           };
           const exec = keyMap[event.key];
@@ -229,7 +240,12 @@ function connect(service, normalize) {
         onPointerDown(event) {
           if (decrementTriggerState.disabled) return;
           if (!isLeftClick(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "decrement", pointerType: event.pointerType });
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "decrement",
+            pointerType: event.pointerType,
+            src: "decrement-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -238,11 +254,14 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         },
         onPointerLeave() {
           if (decrementTriggerState.disabled) return;
-          send({ type: "TRIGGER.PRESS_UP", hint: "decrement" });
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", src: "decrement-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "decrement", pointerType: event.pointerType, src: "decrement-press" });
         }
       });
     },
@@ -261,7 +280,12 @@ function connect(service, normalize) {
         "data-scrubbing": dataAttr(scrubbing),
         onPointerDown(event) {
           if (incrementTriggerState.disabled || !isLeftClick(event)) return;
-          send({ type: "TRIGGER.PRESS_DOWN", hint: "increment", pointerType: event.pointerType });
+          send({
+            type: "TRIGGER.PRESS_DOWN",
+            hint: "increment",
+            pointerType: event.pointerType,
+            src: "increment-press"
+          });
           if (event.pointerType === "mouse") {
             event.preventDefault();
           }
@@ -270,10 +294,13 @@ function connect(service, normalize) {
           }
         },
         onPointerUp(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         },
         onPointerLeave(event) {
-          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType });
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
+        },
+        onPointerCancel(event) {
+          send({ type: "TRIGGER.PRESS_UP", hint: "increment", pointerType: event.pointerType, src: "increment-press" });
         }
       });
     },

package/dist/number-input.machine.js

@@ -38,12 +38,13 @@ var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
 var import_cursor = require("./cursor.js");
 var dom = __toESM(require("./number-input.dom.js"));
-var import_number_input = require("./number-input.utils.js");
+var import_number_input = require("./number-input.translations.js");
+var import_number_input2 = require("./number-input.utils.js");
 var { choose, guards, createMachine } = (0, import_core.setup)();
 var { not, and } = guards;
 var machine = createMachine({
   props({ props }) {
-    const step = (0, import_number_input.getDefaultStep)(props.step, props.formatOptions);
+    const step = (0, import_number_input2.getDefaultStep)(props.step, props.formatOptions);
     return {
       dir: "ltr",
       locale: "en-US",
@@ -62,26 +63,21 @@ var machine = createMachine({
       snapOnStep: false,
       ...props,
       largeStep: props.largeStep ?? 10 * step,
-      smallStep: props.smallStep ?? step / 10,
-      translations: {
-        incrementLabel: "increment value",
-        decrementLabel: "decrease value",
-        ...props.translations
-      }
+      smallStep: props.smallStep ?? step / 10
     };
   },
   initialState() {
     return "idle";
   },
-  context({ prop, bindable, getComputed }) {
+  context({ prop, bindable, getComputed, getEvent }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
         value: prop("value"),
         onChange(value) {
           const computed = getComputed();
-          const valueAsNumber = (0, import_number_input.parseValue)(value, { computed, prop });
-          prop("onValueChange")?.({ value, valueAsNumber });
+          const valueAsNumber = (0, import_number_input2.parseValue)(value, { computed, prop });
+          prop("onValueChange")?.({ value, valueAsNumber, reason: getEvent().src });
         }
       })),
       hint: bindable(() => ({ defaultValue: null })),
@@ -99,8 +95,8 @@ var machine = createMachine({
   },
   computed: {
     isRtl: ({ prop }) => prop("dir") === "rtl",
-    valueAsNumber: ({ context, computed, prop }) => (0, import_number_input.parseValue)(context.get("value"), { computed, prop }),
-    formattedValue: ({ computed, prop }) => (0, import_number_input.formatValue)(computed("valueAsNumber"), { computed, prop }),
+    valueAsNumber: ({ context, computed, prop }) => (0, import_number_input2.parseValue)(context.get("value"), { computed, prop }),
+    formattedValue: ({ computed, prop }) => (0, import_number_input2.formatValue)(computed("valueAsNumber"), { computed, prop }),
     isAtMin: ({ computed, prop }) => (0, import_utils.isValueAtMin)(computed("valueAsNumber"), prop("min")),
     isAtMax: ({ computed, prop }) => (0, import_utils.isValueAtMax)(computed("valueAsNumber"), prop("max")),
     isOutOfRange: ({ computed, prop }) => !(0, import_utils.isValueWithinRange)(computed("valueAsNumber"), prop("min"), prop("max")),
@@ -108,14 +104,22 @@ var machine = createMachine({
     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")),
+    // Only useful when the display differs from `aria-valuenow`, as with currency or percent.
+    valueText: ({ prop, context, computed }) => {
+      const translations = (0, import_utils.mergeWithDefault)(import_number_input.defaultTranslations, prop("translations"));
+      const custom = translations.valueText?.(context.get("value"));
+      if (custom) return custom;
+      if (computed("isValueEmpty")) return void 0;
+      const formatted = computed("formattedValue");
+      return formatted === String(computed("valueAsNumber")) ? void 0 : formatted;
+    },
     formatter: (0, import_core.memo)(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      ([locale, formatOptions]) => (0, import_number_input.createFormatter)(locale, formatOptions)
+      ([locale, formatOptions]) => (0, import_number_input2.createFormatter)(locale, formatOptions)
     ),
     parser: (0, import_core.memo)(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
-      ([locale, formatOptions]) => (0, import_number_input.createParser)(locale, formatOptions)
+      ([locale, formatOptions]) => (0, import_number_input2.createParser)(locale, formatOptions)
     )
   },
   watch({ track, action, context, computed, prop }) {
@@ -123,6 +127,7 @@ var machine = createMachine({
       action(["syncInputElement"]);
     });
     track([() => computed("isOutOfRange")], () => {
+      if (!computed("isOutOfRange")) return;
       action(["invokeOnInvalid"]);
     });
     track([() => context.hash("scrubberCursorPoint")], () => {
@@ -131,32 +136,35 @@ var machine = createMachine({
   },
   effects: ["trackFormControl", "detectPointerLock"],
   on: {
+    "INPUT.FOCUS": {
+      actions: ["invokeOnFocus"]
+    },
     "VALUE.SET": {
-      actions: ["setRawValue"]
+      actions: ["setRawValue", "invokeOnValueCommit"]
     },
     "VALUE.CLEAR": {
-      actions: ["clearValue"]
+      actions: ["clearValue", "invokeOnValueCommit"]
     },
     "VALUE.INCREMENT": {
-      actions: ["increment"]
+      actions: ["increment", "invokeOnValueCommit"]
     },
     "VALUE.DECREMENT": {
-      actions: ["decrement"]
+      actions: ["decrement", "invokeOnValueCommit"]
     }
   },
   states: {
     idle: {
       on: {
         "TRIGGER.PRESS_DOWN": [
-          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          { guard: "isTouchPointer", target: "pressed", actions: ["setHint"] },
           {
-            target: "before:spin",
-            actions: ["focusInput", "invokeOnFocus", "setHint"]
+            target: "pressed",
+            actions: ["focusInput", "setHint"]
           }
         ],
         "SCRUBBER.PRESS_DOWN": {
           target: "scrubbing",
-          actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
+          actions: ["focusInput", "setHint", "setCursorPoint"]
         },
         "INPUT.FOCUS": {
           target: "focused",
@@ -169,24 +177,24 @@ var machine = createMachine({
       effects: ["attachWheelListener"],
       on: {
         "TRIGGER.PRESS_DOWN": [
-          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
-          { target: "before:spin", actions: ["focusInput", "setHint"] }
+          { guard: "isTouchPointer", target: "pressed", actions: ["setHint"] },
+          { target: "pressed", actions: ["focusInput", "setHint"] }
         ],
         "SCRUBBER.PRESS_DOWN": {
           target: "scrubbing",
           actions: ["focusInput", "setHint", "setCursorPoint"]
         },
         "INPUT.ARROW_UP": {
-          actions: ["increment"]
+          actions: ["increment", "invokeOnValueCommit"]
         },
         "INPUT.ARROW_DOWN": {
-          actions: ["decrement"]
+          actions: ["decrement", "invokeOnValueCommit"]
         },
         "INPUT.HOME": {
-          actions: ["decrementToMin"]
+          actions: ["decrementToMin", "invokeOnValueCommit"]
         },
         "INPUT.END": {
-          actions: ["incrementToMax"]
+          actions: ["incrementToMax", "invokeOnValueCommit"]
         },
         "INPUT.CHANGE": {
           actions: ["setValue", "setHint"]
@@ -200,41 +208,66 @@ var machine = createMachine({
           {
             guard: not("isInRange"),
             target: "idle",
-            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
           },
           {
             target: "idle",
             actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
           }
         ],
+        // No target, so the input stays focused. It must not report a blur.
         "INPUT.ENTER": {
-          actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          actions: ["setFormattedValue", "clearHint", "invokeOnValueCommit"]
         }
       }
     },
-    "before:spin": {
+    pressed: {
       tags: ["focus"],
-      effects: ["trackButtonDisabled", "waitForChangeDelay"],
-      entry: choose([
-        { guard: "isIncrementHint", actions: ["increment"] },
-        { guard: "isDecrementHint", actions: ["decrement"] }
-      ]),
+      initial: "waiting",
+      effects: ["trackButtonDisabled", "preventContextMenu"],
       on: {
-        CHANGE_DELAY: {
-          target: "spinning",
-          guard: and("isInRange", "spinOnPress")
-        },
         "TRIGGER.PRESS_UP": [
-          { guard: "isTouchPointer", target: "focused", actions: ["clearHint"] },
-          { target: "focused", actions: ["focusInput", "clearHint"] }
+          { guard: "isTouchPointer", target: "focused", actions: ["clearHint", "invokeOnValueCommit"] },
+          { target: "focused", actions: ["focusInput", "clearHint", "invokeOnValueCommit"] }
         ]
+      },
+      states: {
+        waiting: {
+          effects: ["waitForChangeDelay"],
+          entry: choose([
+            { guard: "isIncrementHint", actions: ["increment"] },
+            { guard: "isDecrementHint", actions: ["decrement"] }
+          ]),
+          on: {
+            CHANGE_DELAY: {
+              target: "repeating",
+              guard: and("isInRange", "spinOnPress")
+            }
+          }
+        },
+        repeating: {
+          effects: ["spinValue"],
+          on: {
+            SPIN: [
+              {
+                guard: "isIncrementHint",
+                actions: ["increment"]
+              },
+              {
+                guard: "isDecrementHint",
+                actions: ["decrement"]
+              }
+            ]
+          }
+        }
       }
     },
-    spinning: {
+    scrubbing: {
       tags: ["focus"],
-      effects: ["trackButtonDisabled", "spinValue"],
+      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
+      entry: ["clearCumulativeDelta"],
       on: {
-        SPIN: [
+        "SCRUBBER.STEP": [
           {
             guard: "isIncrementHint",
             actions: ["increment"]
@@ -244,20 +277,9 @@ var machine = createMachine({
             actions: ["decrement"]
           }
         ],
-        "TRIGGER.PRESS_UP": {
-          target: "focused",
-          actions: ["focusInput", "clearHint"]
-        }
-      }
-    },
-    scrubbing: {
-      tags: ["focus"],
-      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
-      entry: ["clearCumulativeDelta"],
-      on: {
         "SCRUBBER.POINTER_UP": {
           target: "focused",
-          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta"]
+          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta", "invokeOnValueCommit"]
         },
         "SCRUBBER.POINTER_MOVE": {
           actions: ["accumulateDelta", "setCursorPoint"]
@@ -282,9 +304,13 @@ var machine = createMachine({
         }, 300);
         return () => clearTimeout(id);
       },
-      spinValue({ send }) {
+      preventContextMenu({ scope }) {
+        return (0, import_dom_query.addDomEvent)(scope.getWin(), "contextmenu", (event) => event.preventDefault());
+      },
+      spinValue({ send, context }) {
         const id = setInterval(() => {
-          send({ type: "SPIN" });
+          const src = context.get("hint") === "increment" ? "increment-press" : "decrement-press";
+          send({ type: "SPIN", src });
         }, 50);
         return () => clearInterval(id);
       },
@@ -311,7 +337,8 @@ var machine = createMachine({
         return (0, import_dom_query.observeAttributes)(btn, {
           attributes: ["disabled"],
           callback() {
-            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
+            const src = hint === "increment" ? "increment-press" : "decrement-press";
+            send({ type: "TRIGGER.PRESS_UP", src });
           }
         });
       },
@@ -322,9 +349,9 @@ var machine = createMachine({
           event.preventDefault();
           const dir = Math.sign(event.deltaY) * -1;
           if (dir === 1) {
-            send({ type: "VALUE.INCREMENT" });
+            send({ type: "VALUE.INCREMENT", src: "wheel" });
           } else if (dir === -1) {
-            send({ type: "VALUE.DECREMENT" });
+            send({ type: "VALUE.DECREMENT", src: "wheel" });
           }
         }
         return (0, import_dom_query.addDomEvent)(inputEl, "wheel", onWheel, { passive: false });
@@ -365,7 +392,7 @@ var machine = createMachine({
           });
         }
         function onMouseup() {
-          send({ type: "SCRUBBER.POINTER_UP" });
+          send({ type: "SCRUBBER.POINTER_UP", src: "scrub" });
         }
         return (0, import_utils.callAll)((0, import_dom_query.addDomEvent)(doc, "mousemove", onMousemove, false), (0, import_dom_query.addDomEvent)(doc, "mouseup", onMouseup, false));
       }
@@ -382,23 +409,23 @@ var machine = createMachine({
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
         if (prop("snapOnStep"))
           nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       decrement({ context, event, prop, computed }) {
         let nextValue = (0, import_utils.decrementValue)(computed("valueAsNumber"), event.step ?? prop("step"));
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
         if (prop("snapOnStep"))
           nextValue = (0, import_utils.snapValueToStep)(nextValue, prop("min"), prop("max"), event.step ?? prop("step"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setClampedValue({ context, prop, computed }) {
         const nextValue = (0, import_utils.clampValue)(computed("valueAsNumber"), prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setRawValue({ context, event, prop, computed }) {
-        let nextValue = typeof event.value === "number" ? event.value : (0, import_number_input.parseValue)(event.value, { computed, prop });
+        let nextValue = typeof event.value === "number" ? event.value : (0, import_number_input2.parseValue)(event.value, { computed, prop });
         if (!prop("allowOverflow")) nextValue = (0, import_utils.clampValue)(nextValue, prop("min"), prop("max"));
-        context.set("value", (0, import_number_input.formatValue)(nextValue, { computed, prop }));
+        context.set("value", (0, import_number_input2.formatValue)(nextValue, { computed, prop }));
       },
       setValue({ context, event }) {
         const value = event.target?.value ?? event.value;
@@ -408,11 +435,11 @@ var machine = createMachine({
         context.set("value", "");
       },
       incrementToMax({ context, prop, computed }) {
-        const value = (0, import_number_input.formatValue)(prop("max"), { computed, prop });
+        const value = (0, import_number_input2.formatValue)(prop("max"), { computed, prop });
         context.set("value", value);
       },
       decrementToMin({ context, prop, computed }) {
-        const value = (0, import_number_input.formatValue)(prop("min"), { computed, prop });
+        const value = (0, import_number_input2.formatValue)(prop("min"), { computed, prop });
         context.set("value", value);
       },
       setHint({ context, event }) {
@@ -435,8 +462,7 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnInvalid({ computed, prop, event }) {
-        if (event.type === "INPUT.CHANGE") return;
+      invokeOnInvalid({ computed, prop }) {
         const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
         prop("onValueInvalid")?.({
           reason,
@@ -444,10 +470,11 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnValueCommit({ computed, prop }) {
+      invokeOnValueCommit({ computed, prop, event }) {
         prop("onValueCommit")?.({
           value: computed("formattedValue"),
-          valueAsNumber: computed("valueAsNumber")
+          valueAsNumber: computed("valueAsNumber"),
+          reason: event.src
         });
       },
       syncInputElement({ context, event, computed, scope }) {
@@ -483,10 +510,8 @@ var machine = createMachine({
         if (Math.abs(newDelta) >= sensitivity) {
           const step = prop("step");
           const hint = event.hint;
-          if (hint === "increment") {
-            send({ type: "VALUE.INCREMENT", step });
-          } else if (hint === "decrement") {
-            send({ type: "VALUE.DECREMENT", step });
+          if (hint === "increment" || hint === "decrement") {
+            send({ type: "SCRUBBER.STEP", step, hint, src: "scrub" });
           }
           context.set("cumulativeDelta", newDelta % sensitivity);
         } else {

package/dist/number-input.machine.mjs

@@ -18,10 +18,12 @@ import {
   isValueAtMax,
   isValueAtMin,
   isValueWithinRange,
-  snapValueToStep
+  snapValueToStep,
+  mergeWithDefault
 } from "@zag-js/utils";
 import { recordCursor, restoreCursor } from "./cursor.mjs";
 import * as dom from "./number-input.dom.mjs";
+import { defaultTranslations } from "./number-input.translations.mjs";
 import { createFormatter, createParser, formatValue, getDefaultStep, parseValue } from "./number-input.utils.mjs";
 var { choose, guards, createMachine } = setup();
 var { not, and } = guards;
@@ -46,18 +48,13 @@ var machine = createMachine({
       snapOnStep: false,
       ...props,
       largeStep: props.largeStep ?? 10 * step,
-      smallStep: props.smallStep ?? step / 10,
-      translations: {
-        incrementLabel: "increment value",
-        decrementLabel: "decrease value",
-        ...props.translations
-      }
+      smallStep: props.smallStep ?? step / 10
     };
   },
   initialState() {
     return "idle";
   },
-  context({ prop, bindable, getComputed }) {
+  context({ prop, bindable, getComputed, getEvent }) {
     return {
       value: bindable(() => ({
         defaultValue: prop("defaultValue"),
@@ -65,7 +62,7 @@ var machine = createMachine({
         onChange(value) {
           const computed = getComputed();
           const valueAsNumber = parseValue(value, { computed, prop });
-          prop("onValueChange")?.({ value, valueAsNumber });
+          prop("onValueChange")?.({ value, valueAsNumber, reason: getEvent().src });
         }
       })),
       hint: bindable(() => ({ defaultValue: null })),
@@ -92,7 +89,15 @@ var machine = createMachine({
     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")),
+    // Only useful when the display differs from `aria-valuenow`, as with currency or percent.
+    valueText: ({ prop, context, computed }) => {
+      const translations = mergeWithDefault(defaultTranslations, prop("translations"));
+      const custom = translations.valueText?.(context.get("value"));
+      if (custom) return custom;
+      if (computed("isValueEmpty")) return void 0;
+      const formatted = computed("formattedValue");
+      return formatted === String(computed("valueAsNumber")) ? void 0 : formatted;
+    },
     formatter: memo(
       ({ prop }) => [prop("locale"), prop("formatOptions")],
       ([locale, formatOptions]) => createFormatter(locale, formatOptions)
@@ -107,6 +112,7 @@ var machine = createMachine({
       action(["syncInputElement"]);
     });
     track([() => computed("isOutOfRange")], () => {
+      if (!computed("isOutOfRange")) return;
       action(["invokeOnInvalid"]);
     });
     track([() => context.hash("scrubberCursorPoint")], () => {
@@ -115,32 +121,35 @@ var machine = createMachine({
   },
   effects: ["trackFormControl", "detectPointerLock"],
   on: {
+    "INPUT.FOCUS": {
+      actions: ["invokeOnFocus"]
+    },
     "VALUE.SET": {
-      actions: ["setRawValue"]
+      actions: ["setRawValue", "invokeOnValueCommit"]
     },
     "VALUE.CLEAR": {
-      actions: ["clearValue"]
+      actions: ["clearValue", "invokeOnValueCommit"]
     },
     "VALUE.INCREMENT": {
-      actions: ["increment"]
+      actions: ["increment", "invokeOnValueCommit"]
     },
     "VALUE.DECREMENT": {
-      actions: ["decrement"]
+      actions: ["decrement", "invokeOnValueCommit"]
     }
   },
   states: {
     idle: {
       on: {
         "TRIGGER.PRESS_DOWN": [
-          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          { guard: "isTouchPointer", target: "pressed", actions: ["setHint"] },
           {
-            target: "before:spin",
-            actions: ["focusInput", "invokeOnFocus", "setHint"]
+            target: "pressed",
+            actions: ["focusInput", "setHint"]
           }
         ],
         "SCRUBBER.PRESS_DOWN": {
           target: "scrubbing",
-          actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
+          actions: ["focusInput", "setHint", "setCursorPoint"]
         },
         "INPUT.FOCUS": {
           target: "focused",
@@ -153,24 +162,24 @@ var machine = createMachine({
       effects: ["attachWheelListener"],
       on: {
         "TRIGGER.PRESS_DOWN": [
-          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
-          { target: "before:spin", actions: ["focusInput", "setHint"] }
+          { guard: "isTouchPointer", target: "pressed", actions: ["setHint"] },
+          { target: "pressed", actions: ["focusInput", "setHint"] }
         ],
         "SCRUBBER.PRESS_DOWN": {
           target: "scrubbing",
           actions: ["focusInput", "setHint", "setCursorPoint"]
         },
         "INPUT.ARROW_UP": {
-          actions: ["increment"]
+          actions: ["increment", "invokeOnValueCommit"]
         },
         "INPUT.ARROW_DOWN": {
-          actions: ["decrement"]
+          actions: ["decrement", "invokeOnValueCommit"]
         },
         "INPUT.HOME": {
-          actions: ["decrementToMin"]
+          actions: ["decrementToMin", "invokeOnValueCommit"]
         },
         "INPUT.END": {
-          actions: ["incrementToMax"]
+          actions: ["incrementToMax", "invokeOnValueCommit"]
         },
         "INPUT.CHANGE": {
           actions: ["setValue", "setHint"]
@@ -184,41 +193,66 @@ var machine = createMachine({
           {
             guard: not("isInRange"),
             target: "idle",
-            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
           },
           {
             target: "idle",
             actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
           }
         ],
+        // No target, so the input stays focused. It must not report a blur.
         "INPUT.ENTER": {
-          actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          actions: ["setFormattedValue", "clearHint", "invokeOnValueCommit"]
         }
       }
     },
-    "before:spin": {
+    pressed: {
       tags: ["focus"],
-      effects: ["trackButtonDisabled", "waitForChangeDelay"],
-      entry: choose([
-        { guard: "isIncrementHint", actions: ["increment"] },
-        { guard: "isDecrementHint", actions: ["decrement"] }
-      ]),
+      initial: "waiting",
+      effects: ["trackButtonDisabled", "preventContextMenu"],
       on: {
-        CHANGE_DELAY: {
-          target: "spinning",
-          guard: and("isInRange", "spinOnPress")
-        },
         "TRIGGER.PRESS_UP": [
-          { guard: "isTouchPointer", target: "focused", actions: ["clearHint"] },
-          { target: "focused", actions: ["focusInput", "clearHint"] }
+          { guard: "isTouchPointer", target: "focused", actions: ["clearHint", "invokeOnValueCommit"] },
+          { target: "focused", actions: ["focusInput", "clearHint", "invokeOnValueCommit"] }
         ]
+      },
+      states: {
+        waiting: {
+          effects: ["waitForChangeDelay"],
+          entry: choose([
+            { guard: "isIncrementHint", actions: ["increment"] },
+            { guard: "isDecrementHint", actions: ["decrement"] }
+          ]),
+          on: {
+            CHANGE_DELAY: {
+              target: "repeating",
+              guard: and("isInRange", "spinOnPress")
+            }
+          }
+        },
+        repeating: {
+          effects: ["spinValue"],
+          on: {
+            SPIN: [
+              {
+                guard: "isIncrementHint",
+                actions: ["increment"]
+              },
+              {
+                guard: "isDecrementHint",
+                actions: ["decrement"]
+              }
+            ]
+          }
+        }
       }
     },
-    spinning: {
+    scrubbing: {
       tags: ["focus"],
-      effects: ["trackButtonDisabled", "spinValue"],
+      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
+      entry: ["clearCumulativeDelta"],
       on: {
-        SPIN: [
+        "SCRUBBER.STEP": [
           {
             guard: "isIncrementHint",
             actions: ["increment"]
@@ -228,20 +262,9 @@ var machine = createMachine({
             actions: ["decrement"]
           }
         ],
-        "TRIGGER.PRESS_UP": {
-          target: "focused",
-          actions: ["focusInput", "clearHint"]
-        }
-      }
-    },
-    scrubbing: {
-      tags: ["focus"],
-      effects: ["activatePointerLock", "trackMousemove", "preventTextSelection", "trackVisualViewport"],
-      entry: ["clearCumulativeDelta"],
-      on: {
         "SCRUBBER.POINTER_UP": {
           target: "focused",
-          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta"]
+          actions: ["focusInput", "clearCursorPoint", "clearCumulativeDelta", "invokeOnValueCommit"]
         },
         "SCRUBBER.POINTER_MOVE": {
           actions: ["accumulateDelta", "setCursorPoint"]
@@ -266,9 +289,13 @@ var machine = createMachine({
         }, 300);
         return () => clearTimeout(id);
       },
-      spinValue({ send }) {
+      preventContextMenu({ scope }) {
+        return addDomEvent(scope.getWin(), "contextmenu", (event) => event.preventDefault());
+      },
+      spinValue({ send, context }) {
         const id = setInterval(() => {
-          send({ type: "SPIN" });
+          const src = context.get("hint") === "increment" ? "increment-press" : "decrement-press";
+          send({ type: "SPIN", src });
         }, 50);
         return () => clearInterval(id);
       },
@@ -295,7 +322,8 @@ var machine = createMachine({
         return observeAttributes(btn, {
           attributes: ["disabled"],
           callback() {
-            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
+            const src = hint === "increment" ? "increment-press" : "decrement-press";
+            send({ type: "TRIGGER.PRESS_UP", src });
           }
         });
       },
@@ -306,9 +334,9 @@ var machine = createMachine({
           event.preventDefault();
           const dir = Math.sign(event.deltaY) * -1;
           if (dir === 1) {
-            send({ type: "VALUE.INCREMENT" });
+            send({ type: "VALUE.INCREMENT", src: "wheel" });
           } else if (dir === -1) {
-            send({ type: "VALUE.DECREMENT" });
+            send({ type: "VALUE.DECREMENT", src: "wheel" });
           }
         }
         return addDomEvent(inputEl, "wheel", onWheel, { passive: false });
@@ -349,7 +377,7 @@ var machine = createMachine({
           });
         }
         function onMouseup() {
-          send({ type: "SCRUBBER.POINTER_UP" });
+          send({ type: "SCRUBBER.POINTER_UP", src: "scrub" });
         }
         return callAll(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
       }
@@ -419,8 +447,7 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnInvalid({ computed, prop, event }) {
-        if (event.type === "INPUT.CHANGE") return;
+      invokeOnInvalid({ computed, prop }) {
         const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
         prop("onValueInvalid")?.({
           reason,
@@ -428,10 +455,11 @@ var machine = createMachine({
           valueAsNumber: computed("valueAsNumber")
         });
       },
-      invokeOnValueCommit({ computed, prop }) {
+      invokeOnValueCommit({ computed, prop, event }) {
         prop("onValueCommit")?.({
           value: computed("formattedValue"),
-          valueAsNumber: computed("valueAsNumber")
+          valueAsNumber: computed("valueAsNumber"),
+          reason: event.src
         });
       },
       syncInputElement({ context, event, computed, scope }) {
@@ -467,10 +495,8 @@ var machine = createMachine({
         if (Math.abs(newDelta) >= sensitivity) {
           const step = prop("step");
           const hint = event.hint;
-          if (hint === "increment") {
-            send({ type: "VALUE.INCREMENT", step });
-          } else if (hint === "decrement") {
-            send({ type: "VALUE.DECREMENT", step });
+          if (hint === "increment" || hint === "decrement") {
+            send({ type: "SCRUBBER.STEP", step, hint, src: "scrub" });
           }
           context.set("cumulativeDelta", newDelta % sensitivity);
         } else {

package/dist/number-input.translations.d.mts

@@ -0,0 +1,8 @@
+import { Required } from '@zag-js/types';
+import { IntlTranslations } from './number-input.types.mjs';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare const defaultTranslations: Required<Pick<IntlTranslations, "incrementLabel" | "decrementLabel">>;
+
+export { defaultTranslations };

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

@@ -0,0 +1,8 @@
+import { Required } from '@zag-js/types';
+import { IntlTranslations } from './number-input.types.js';
+import '@internationalized/number';
+import '@zag-js/core';
+
+declare const defaultTranslations: Required<Pick<IntlTranslations, "incrementLabel" | "decrementLabel">>;
+
+export { defaultTranslations };

package/dist/number-input.translations.js

@@ -0,0 +1,33 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/number-input.translations.ts
+var number_input_translations_exports = {};
+__export(number_input_translations_exports, {
+  defaultTranslations: () => defaultTranslations
+});
+module.exports = __toCommonJS(number_input_translations_exports);
+var defaultTranslations = {
+  incrementLabel: "increment value",
+  decrementLabel: "decrease value"
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defaultTranslations
+});

package/dist/number-input.translations.mjs

@@ -0,0 +1,8 @@
+// src/number-input.translations.ts
+var defaultTranslations = {
+  incrementLabel: "increment value",
+  decrementLabel: "decrease value"
+};
+export {
+  defaultTranslations
+};

package/dist/number-input.types.d.mts

@@ -1,16 +1,26 @@
 import { NumberParser } from '@internationalized/number';
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
+import { PropTypes, LocaleProperties, CommonProperties } from '@zag-js/types';
 
+/**
+ * The reason for the number input value change
+ */
+type ValueChangeReason = "input-change" | "input-blur" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "script";
 interface ValueChangeDetails {
     value: string;
     valueAsNumber: number;
+    reason?: ValueChangeReason | undefined;
 }
-interface FocusChangeDetails extends ValueChangeDetails {
+interface FocusChangeDetails {
+    value: string;
+    valueAsNumber: number;
     focused: boolean;
 }
 type ValidityState = "rangeUnderflow" | "rangeOverflow";
-interface ValueInvalidDetails extends ValueChangeDetails {
+/** Detached from `ValueChangeDetails`: here `reason` is why the value is invalid. */
+interface ValueInvalidDetails {
+    value: string;
+    valueAsNumber: number;
     reason: ValidityState;
 }
 type InputMode = "text" | "tel" | "numeric" | "decimal";
@@ -143,7 +153,8 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
     /**
-     * Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
+     * Function invoked when the value settles: the input is blurred or `Enter` is pressed, a stepper
+     * or scrub gesture ends, or a key or wheel step completes.
      */
     onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
     /**
@@ -183,7 +194,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     snapOnStep?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number
@@ -273,9 +284,10 @@ interface PrivateContext {
     visualScale: number;
 }
 interface NumberInputSchema {
-    state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    state: "idle" | "focused" | "pressed" | "pressed.waiting" | "pressed.repeating" | "scrubbing";
     tag: "focus";
-    props: RequiredBy<NumberInputProps, PropsWithDefault>;
+    props: NumberInputProps;
+    defaultPropKey: PropsWithDefault;
     context: PrivateContext;
     computed: ComputedContext;
     action: string;
@@ -413,4 +425,4 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
     getScrubberCursorProps: () => T["element"];
 }
 
-export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueInvalidDetails };
+export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueChangeReason, ValueInvalidDetails };

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

@@ -1,16 +1,26 @@
 import { NumberParser } from '@internationalized/number';
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PropTypes, RequiredBy, LocaleProperties, CommonProperties } from '@zag-js/types';
+import { PropTypes, LocaleProperties, CommonProperties } from '@zag-js/types';
 
+/**
+ * The reason for the number input value change
+ */
+type ValueChangeReason = "input-change" | "input-blur" | "keyboard" | "increment-press" | "decrement-press" | "wheel" | "scrub" | "script";
 interface ValueChangeDetails {
     value: string;
     valueAsNumber: number;
+    reason?: ValueChangeReason | undefined;
 }
-interface FocusChangeDetails extends ValueChangeDetails {
+interface FocusChangeDetails {
+    value: string;
+    valueAsNumber: number;
     focused: boolean;
 }
 type ValidityState = "rangeUnderflow" | "rangeOverflow";
-interface ValueInvalidDetails extends ValueChangeDetails {
+/** Detached from `ValueChangeDetails`: here `reason` is why the value is invalid. */
+interface ValueInvalidDetails {
+    value: string;
+    valueAsNumber: number;
     reason: ValidityState;
 }
 type InputMode = "text" | "tel" | "numeric" | "decimal";
@@ -143,7 +153,8 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
     /**
-     * Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
+     * Function invoked when the value settles: the input is blurred or `Enter` is pressed, a stepper
+     * or scrub gesture ends, or a key or wheel step completes.
      */
     onValueCommit?: ((details: ValueChangeDetails) => void) | undefined;
     /**
@@ -183,7 +194,7 @@ interface NumberInputProps extends LocaleProperties, CommonProperties {
      */
     snapOnStep?: boolean | undefined;
 }
-type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "translations" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
+type PropsWithDefault = "dir" | "locale" | "focusInputOnChange" | "clampValueOnBlur" | "allowOverflow" | "inputMode" | "pattern" | "step" | "largeStep" | "smallStep" | "spinOnPress" | "min" | "max" | "scrubberPixelSensitivity" | "scrubberDirection" | "snapOnStep";
 type ComputedContext = Readonly<{
     /**
      * The value of the input as a number
@@ -273,9 +284,10 @@ interface PrivateContext {
     visualScale: number;
 }
 interface NumberInputSchema {
-    state: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
+    state: "idle" | "focused" | "pressed" | "pressed.waiting" | "pressed.repeating" | "scrubbing";
     tag: "focus";
-    props: RequiredBy<NumberInputProps, PropsWithDefault>;
+    props: NumberInputProps;
+    defaultPropKey: PropsWithDefault;
     context: PrivateContext;
     computed: ComputedContext;
     action: string;
@@ -413,4 +425,4 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
     getScrubberCursorProps: () => T["element"];
 }
 
-export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueInvalidDetails };
+export type { DecrementTriggerState, ElementIds, FocusChangeDetails, HintValue, IncrementTriggerState, InputMode, InputState, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, RootState, ValidityState, ValueChangeDetails, ValueChangeReason, ValueInvalidDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0-next.3",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -30,11 +30,11 @@
   },
   "dependencies": {
     "@internationalized/number": "3.6.7",
-    "@zag-js/anatomy": "2.0.0-next.1",
-    "@zag-js/core": "2.0.0-next.1",
-    "@zag-js/dom-query": "2.0.0-next.1",
-    "@zag-js/types": "2.0.0-next.1",
-    "@zag-js/utils": "2.0.0-next.1"
+    "@zag-js/anatomy": "2.0.0-next.3",
+    "@zag-js/core": "2.0.0-next.3",
+    "@zag-js/dom-query": "2.0.0-next.3",
+    "@zag-js/types": "2.0.0-next.3",
+    "@zag-js/utils": "2.0.0-next.3"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -68,7 +68,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }