@zag-js/number-input 2.0.0-next.0 → 2.0.0-next.2

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" | "spinOnPress" | "min" | "max" | "largeStep" | "smallStep" | "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;
@@ -285,6 +297,54 @@ interface NumberInputSchema {
 }
 type NumberInputService = Service<NumberInputSchema>;
 type NumberInputMachine = Machine<NumberInputSchema>;
+interface RootState {
+    /**
+     * Whether the number input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the number input is focused.
+     */
+    focused: boolean;
+    /**
+     * Whether the number input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the number input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface InputState {
+    /**
+     * Whether the input is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether the input is invalid.
+     */
+    invalid: boolean;
+    /**
+     * Whether the input is read-only.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the input is being scrubbed.
+     */
+    scrubbing: boolean;
+}
+interface IncrementTriggerState {
+    /**
+     * Whether the increment trigger is disabled.
+     */
+    disabled: boolean;
+}
+interface DecrementTriggerState {
+    /**
+     * Whether the decrement trigger is disabled.
+     */
+    disabled: boolean;
+}
 interface NumberInputApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the input is focused.
@@ -338,15 +398,31 @@ interface NumberInputApi<T extends PropTypes = PropTypes> {
      * Function to focus the input.
      */
     focus: VoidFunction;
+    /**
+     * Returns the state of the root.
+     */
+    getRootState: () => RootState;
     getRootProps: () => T["element"];
     getLabelProps: () => T["label"];
     getControlProps: () => T["element"];
     getValueTextProps: () => T["element"];
+    /**
+     * Returns the state of the input.
+     */
+    getInputState: () => InputState;
     getInputProps: () => T["input"];
+    /**
+     * Returns the state of the decrement trigger.
+     */
+    getDecrementTriggerState: () => DecrementTriggerState;
     getDecrementTriggerProps: () => T["button"];
+    /**
+     * Returns the state of the increment trigger.
+     */
+    getIncrementTriggerState: () => IncrementTriggerState;
     getIncrementTriggerProps: () => T["button"];
     getScrubberProps: () => T["element"];
     getScrubberCursorProps: () => T["element"];
 }
 
-export type { ElementIds, FocusChangeDetails, HintValue, InputMode, IntlTranslations, NumberInputApi, NumberInputMachine, NumberInputProps, NumberInputSchema, NumberInputService, 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.0",
+  "version": "2.0.0-next.2",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/number-input",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/number-input"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,12 +29,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@internationalized/number": "3.6.6",
-    "@zag-js/anatomy": "2.0.0-next.0",
-    "@zag-js/core": "2.0.0-next.0",
-    "@zag-js/dom-query": "2.0.0-next.0",
-    "@zag-js/types": "2.0.0-next.0",
-    "@zag-js/utils": "2.0.0-next.0"
+    "@internationalized/number": "3.6.7",
+    "@zag-js/anatomy": "2.0.0-next.2",
+    "@zag-js/core": "2.0.0-next.2",
+    "@zag-js/dom-query": "2.0.0-next.2",
+    "@zag-js/types": "2.0.0-next.2",
+    "@zag-js/utils": "2.0.0-next.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -65,7 +68,7 @@
   },
   "scripts": {
     "build": "tsup",
-    "lint": "eslint src",
+    "lint": "oxlint src",
     "typecheck": "tsc --noEmit"
   }
 }