refactor(number-input): add value commit callback

Author: segunadebayo

.changeset/number-input-on-value-commit.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/number-input": minor
+---
+
+Add `onValueCommit` callback that fires when the input loses focus or Enter is pressed

packages/machines/number-input/src/number-input.machine.ts

@@ -183,20 +183,20 @@ export const machine = createMachine({
           {
             guard: and("clampValueOnBlur", not("isInRange")),
             target: "idle",
-            actions: ["setClampedValue", "clearHint", "invokeOnBlur"],
+            actions: ["setClampedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"],
           },
           {
             guard: not("isInRange"),
             target: "idle",
-            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid"],
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"],
           },
           {
             target: "idle",
-            actions: ["setFormattedValue", "clearHint", "invokeOnBlur"],
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"],
           },
         ],
         "INPUT.ENTER": {
-          actions: ["setFormattedValue", "clearHint", "invokeOnBlur"],
+          actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"],
         },
       },
     },
@@ -429,6 +429,12 @@ export const machine = createMachine({
           valueAsNumber: computed("valueAsNumber"),
         })
       },
+      invokeOnValueCommit({ computed, prop }) {
+        prop("onValueCommit")?.({
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber"),
+        })
+      },
       syncInputElement({ context, event, computed, scope }) {
         const value = event.type.endsWith("CHANGE") ? context.get("value") : computed("formattedValue")
         const inputEl = dom.getInputEl(scope)

packages/machines/number-input/src/number-input.props.ts

@@ -22,6 +22,7 @@ export const props = createProps<NumberInputProps>()([
   "name",
   "onFocusChange",
   "onValueChange",
+  "onValueCommit",
   "onValueInvalid",
   "pattern",
   "required",

packages/machines/number-input/src/number-input.types.ts

@@ -156,6 +156,10 @@ export interface NumberInputProps extends LocaleProperties, CommonProperties {
    * Function invoked when the number input is focused
    */
   onFocusChange?: ((details: FocusChangeDetails) => void) | undefined
+  /**
+   * Function invoked when the value is committed (when the input is blurred or the Enter key is pressed)
+   */
+  onValueCommit?: ((details: ValueChangeDetails) => void) | undefined
   /**
    * Whether to spin the value when the increment/decrement button is pressed
    * @default true