@zag-js/number-input 0.9.1 → 0.10.0

package/dist/{chunk-DYFCS7PF.mjs → chunk-5ENKYWE3.mjs}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-AXXDGYUW.mjs";
 
 // src/number-input.connect.ts
-import { getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event";
+import { getEventPoint, getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event";
 import { ariaAttr, dataAttr } from "@zag-js/dom-query";
 import { roundToDevicePixel } from "@zag-js/number-utils";
 function connect(state, send, normalize) {
@@ -139,9 +139,6 @@ function connect(state, send, normalize) {
         send("BLUR");
       },
       onChange(event) {
-        const evt = getNativeEvent(event);
-        if (evt.isComposing)
-          return;
         send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
       },
       onKeyDown(event) {
@@ -228,11 +225,11 @@ function connect(state, send, normalize) {
         if (isDisabled)
           return;
         const evt = getNativeEvent(event);
-        event.preventDefault();
-        const point = { x: evt.clientX, y: evt.clientY };
+        const point = getEventPoint(evt);
         point.x = point.x - roundToDevicePixel(7.5);
         point.y = point.y - roundToDevicePixel(7.5);
         send({ type: "PRESS_DOWN_SCRUBBER", point });
+        event.preventDefault();
       },
       style: {
         cursor: isDisabled ? void 0 : "ew-resize"

package/dist/index.js

@@ -310,9 +310,6 @@ function connect(state, send, normalize) {
         send("BLUR");
       },
       onChange(event) {
-        const evt = (0, import_dom_event2.getNativeEvent)(event);
-        if (evt.isComposing)
-          return;
         send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
       },
       onKeyDown(event) {
@@ -399,11 +396,11 @@ function connect(state, send, normalize) {
         if (isDisabled)
           return;
         const evt = (0, import_dom_event2.getNativeEvent)(event);
-        event.preventDefault();
-        const point = { x: evt.clientX, y: evt.clientY };
+        const point = (0, import_dom_event2.getEventPoint)(evt);
         point.x = point.x - (0, import_number_utils3.roundToDevicePixel)(7.5);
         point.y = point.y - (0, import_number_utils3.roundToDevicePixel)(7.5);
         send({ type: "PRESS_DOWN_SCRUBBER", point });
+        event.preventDefault();
       },
       style: {
         cursor: isDisabled ? void 0 : "ew-resize"

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import {
   connect
-} from "./chunk-DYFCS7PF.mjs";
+} from "./chunk-5ENKYWE3.mjs";
 import {
   anatomy
 } from "./chunk-XHRILSH3.mjs";

package/dist/number-input.connect.js

@@ -306,9 +306,6 @@ function connect(state, send, normalize) {
         send("BLUR");
       },
       onChange(event) {
-        const evt = (0, import_dom_event2.getNativeEvent)(event);
-        if (evt.isComposing)
-          return;
         send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
       },
       onKeyDown(event) {
@@ -395,11 +392,11 @@ function connect(state, send, normalize) {
         if (isDisabled)
           return;
         const evt = (0, import_dom_event2.getNativeEvent)(event);
-        event.preventDefault();
-        const point = { x: evt.clientX, y: evt.clientY };
+        const point = (0, import_dom_event2.getEventPoint)(evt);
         point.x = point.x - (0, import_number_utils3.roundToDevicePixel)(7.5);
         point.y = point.y - (0, import_number_utils3.roundToDevicePixel)(7.5);
         send({ type: "PRESS_DOWN_SCRUBBER", point });
+        event.preventDefault();
       },
       style: {
         cursor: isDisabled ? void 0 : "ew-resize"

package/dist/number-input.connect.mjs

@@ -1,6 +1,6 @@
 import {
   connect
-} from "./chunk-DYFCS7PF.mjs";
+} from "./chunk-5ENKYWE3.mjs";
 import "./chunk-XHRILSH3.mjs";
 import "./chunk-QYY4CWRS.mjs";
 import "./chunk-AXXDGYUW.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -17,7 +17,8 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/number-input",
   "sideEffects": false,
   "files": [
-    "dist/**/*"
+    "dist",
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -26,15 +27,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.9.1",
-    "@zag-js/core": "0.9.1",
-    "@zag-js/dom-query": "0.9.1",
-    "@zag-js/dom-event": "0.9.1",
-    "@zag-js/form-utils": "0.9.1",
-    "@zag-js/mutation-observer": "0.9.1",
-    "@zag-js/number-utils": "0.9.1",
-    "@zag-js/utils": "0.9.1",
-    "@zag-js/types": "0.9.1"
+    "@zag-js/anatomy": "0.10.0",
+    "@zag-js/core": "0.10.0",
+    "@zag-js/dom-query": "0.10.0",
+    "@zag-js/dom-event": "0.10.0",
+    "@zag-js/form-utils": "0.10.0",
+    "@zag-js/mutation-observer": "0.10.0",
+    "@zag-js/number-utils": "0.10.0",
+    "@zag-js/utils": "0.10.0",
+    "@zag-js/types": "0.10.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -0,0 +1,4 @@
+export { anatomy } from "./number-input.anatomy"
+export { connect } from "./number-input.connect"
+export { machine } from "./number-input.machine"
+export type { UserDefinedContext as Context } from "./number-input.types"

package/src/number-input.anatomy.ts

@@ -0,0 +1,12 @@
+import { createAnatomy } from "@zag-js/anatomy"
+
+export const anatomy = createAnatomy("numberInput").parts(
+  "root",
+  "label",
+  "input",
+  "control",
+  "incrementTrigger",
+  "decrementTrigger",
+  "scrubber",
+)
+export const parts = anatomy.build()

package/src/number-input.connect.ts

@@ -0,0 +1,248 @@
+import { EventKeyMap, getEventPoint, getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event"
+import { ariaAttr, dataAttr } from "@zag-js/dom-query"
+import { roundToDevicePixel } from "@zag-js/number-utils"
+import type { NormalizeProps, PropTypes } from "@zag-js/types"
+import { parts } from "./number-input.anatomy"
+import { dom } from "./number-input.dom"
+import type { Send, State } from "./number-input.types"
+import { utils } from "./number-input.utils"
+
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+  const isFocused = state.hasTag("focus")
+  const isInvalid = state.context.isOutOfRange || !!state.context.invalid
+
+  const isDisabled = !!state.context.disabled
+  const isValueEmpty = state.context.isValueEmpty
+  const isIncrementDisabled = isDisabled || !state.context.canIncrement
+  const isDecrementDisabled = isDisabled || !state.context.canDecrement
+
+  const translations = state.context.translations
+
+  return {
+    /**
+     * Whether the input is focused.
+     */
+    isFocused,
+    /**
+     * Whether the input is invalid.
+     */
+    isInvalid,
+    /**
+     * Whether the input value is empty.
+     */
+    isValueEmpty,
+    /**
+     * The formatted value of the input.
+     */
+    value: state.context.formattedValue,
+    /**
+     * The value of the input as a number.
+     */
+    valueAsNumber: state.context.valueAsNumber,
+    /**
+     * Function to set the value of the input.
+     */
+    setValue(value: string | number) {
+      send({ type: "SET_VALUE", value: value.toString() })
+    },
+    /**
+     * Function to clear the value of the input.
+     */
+    clearValue() {
+      send("CLEAR_VALUE")
+    },
+    /**
+     * Function to increment the value of the input by the step.
+     */
+    increment() {
+      send("INCREMENT")
+    },
+    /**
+     * Function to decrement the value of the input by the step.
+     */
+    decrement() {
+      send("DECREMENT")
+    },
+    /**
+     * Function to set the value of the input to the max.
+     */
+    setToMax() {
+      send({ type: "SET_VALUE", value: state.context.max })
+    },
+    /**
+     * Function to set the value of the input to the min.
+     */
+    setToMin() {
+      send({ type: "SET_VALUE", value: state.context.min })
+    },
+    /**
+     * Function to focus the input.
+     */
+    focus() {
+      dom.getInputEl(state.context)?.focus()
+    },
+    /**
+     * Function to blur the input.
+     */
+    blur() {
+      dom.getInputEl(state.context)?.blur()
+    },
+
+    rootProps: normalize.element({
+      id: dom.getRootId(state.context),
+      ...parts.root.attrs,
+      "data-disabled": dataAttr(isDisabled),
+    }),
+
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getInputId(state.context),
+    }),
+
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      role: "group",
+      "aria-disabled": isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "aria-invalid": ariaAttr(state.context.invalid),
+    }),
+
+    inputProps: normalize.input({
+      ...parts.input.attrs,
+      name: state.context.name,
+      form: state.context.form,
+      id: dom.getInputId(state.context),
+      role: "spinbutton",
+      defaultValue: state.context.formattedValue,
+      pattern: state.context.pattern,
+      inputMode: state.context.inputMode,
+      "aria-invalid": ariaAttr(isInvalid),
+      "data-invalid": dataAttr(isInvalid),
+      disabled: isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      readOnly: !!state.context.readOnly,
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      type: "text",
+      "aria-roledescription": "numberfield",
+      "aria-valuemin": state.context.min,
+      "aria-valuemax": state.context.max,
+      "aria-valuenow": isNaN(state.context.valueAsNumber) ? undefined : state.context.valueAsNumber,
+      "aria-valuetext": state.context.valueText,
+      onFocus() {
+        send("FOCUS")
+      },
+      onBlur() {
+        send("BLUR")
+      },
+      onChange(event) {
+        send({ type: "CHANGE", target: event.currentTarget, hint: "set" })
+      },
+      onKeyDown(event) {
+        const evt = getNativeEvent(event)
+        // TODO: This blocks non-ascii characters
+        if (evt.isComposing) return
+
+        if (!utils.isValidNumericEvent(state.context, event)) {
+          event.preventDefault()
+        }
+
+        const step = getEventStep(event) * state.context.step
+
+        const keyMap: EventKeyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step })
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step })
+          },
+          Home() {
+            send("HOME")
+          },
+          End() {
+            send("END")
+          },
+        }
+
+        const exec = keyMap[event.key]
+
+        if (exec) {
+          exec(event)
+          event.preventDefault()
+        }
+      },
+    }),
+
+    decrementTriggerProps: normalize.button({
+      ...parts.decrementTrigger.attrs,
+      id: dom.getDecrementTriggerId(state.context),
+      disabled: isDecrementDisabled,
+      "data-disabled": dataAttr(isDecrementDisabled),
+      "aria-label": translations.decrementLabel,
+      type: "button",
+      tabIndex: -1,
+      "aria-controls": dom.getInputId(state.context),
+      onPointerDown(event) {
+        if (isDecrementDisabled) return
+        send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" })
+        event.preventDefault()
+      },
+      onPointerUp() {
+        send({ type: "PRESS_UP", hint: "decrement" })
+      },
+      onPointerLeave() {
+        if (isDecrementDisabled) return
+        send({ type: "PRESS_UP", hint: "decrement" })
+      },
+    }),
+
+    incrementTriggerProps: normalize.button({
+      ...parts.incrementTrigger.attrs,
+      id: dom.getIncrementTriggerId(state.context),
+      disabled: isIncrementDisabled,
+      "data-disabled": dataAttr(isIncrementDisabled),
+      "aria-label": translations.incrementLabel,
+      type: "button",
+      tabIndex: -1,
+      "aria-controls": dom.getInputId(state.context),
+      onPointerDown(event) {
+        if (isIncrementDisabled) return
+        send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" })
+        event.preventDefault()
+      },
+      onPointerUp() {
+        send({ type: "PRESS_UP", hint: "increment" })
+      },
+      onPointerLeave() {
+        send({ type: "PRESS_UP", hint: "increment" })
+      },
+    }),
+
+    scrubberProps: normalize.element({
+      ...parts.scrubber.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      id: dom.getScrubberId(state.context),
+      role: "presentation",
+      onMouseDown(event) {
+        if (isDisabled) return
+
+        const evt = getNativeEvent(event)
+
+        const point = getEventPoint(evt)
+        point.x = point.x - roundToDevicePixel(7.5)
+        point.y = point.y - roundToDevicePixel(7.5)
+
+        send({ type: "PRESS_DOWN_SCRUBBER", point })
+        event.preventDefault()
+      },
+      style: {
+        cursor: isDisabled ? undefined : "ew-resize",
+      },
+    }),
+  }
+}

package/src/number-input.dom.ts

@@ -0,0 +1,113 @@
+import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query"
+import { roundToDevicePixel, wrap } from "@zag-js/number-utils"
+import type { MachineContext as Ctx } from "./number-input.types"
+
+export const dom = createScope({
+  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
+  getInputId: (ctx: Ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
+  getIncrementTriggerId: (ctx: Ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
+  getDecrementTriggerId: (ctx: Ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`,
+  getScrubberId: (ctx: Ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`,
+  getCursorId: (ctx: Ctx) => `number-input:${ctx.id}:cursor`,
+  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`,
+
+  getInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx)),
+  getIncrementTriggerEl: (ctx: Ctx) => dom.getById<HTMLButtonElement>(ctx, dom.getIncrementTriggerId(ctx)),
+  getDecrementTriggerEl: (ctx: Ctx) => dom.getById<HTMLButtonElement>(ctx, dom.getDecrementTriggerId(ctx)),
+  getScrubberEl: (ctx: Ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
+  getCursorEl: (ctx: Ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
+
+  getPressedTriggerEl: (ctx: Ctx, hint = ctx.hint) => {
+    let btnEl: HTMLButtonElement | null = null
+    if (hint === "increment") {
+      btnEl = dom.getIncrementTriggerEl(ctx)
+    }
+    if (hint === "decrement") {
+      btnEl = dom.getDecrementTriggerEl(ctx)
+    }
+    return btnEl
+  },
+
+  setupVirtualCursor(ctx: Ctx) {
+    if (isSafari()) return
+    dom.createVirtualCursor(ctx)
+    return () => {
+      dom.getCursorEl(ctx)?.remove()
+    }
+  },
+
+  preventTextSelection(ctx: Ctx) {
+    const doc = dom.getDoc(ctx)
+    const html = doc.documentElement
+    const body = doc.body
+
+    body.style.pointerEvents = "none"
+    html.style.userSelect = "none"
+    html.style.cursor = "ew-resize"
+
+    return () => {
+      body.style.pointerEvents = ""
+      html.style.userSelect = ""
+      html.style.cursor = ""
+      if (!html.style.length) {
+        html.removeAttribute("style")
+      }
+      if (!body.style.length) {
+        body.removeAttribute("style")
+      }
+    }
+  },
+
+  getMousementValue(ctx: Ctx, event: MouseEvent) {
+    const x = roundToDevicePixel(event.movementX)
+    const y = roundToDevicePixel(event.movementY)
+
+    let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null
+
+    if (ctx.isRtl && hint === "increment") hint = "decrement"
+    if (ctx.isRtl && hint === "decrement") hint = "increment"
+
+    const point = {
+      x: ctx.scrubberCursorPoint!.x + x,
+      y: ctx.scrubberCursorPoint!.y + y,
+    }
+
+    const win = dom.getWin(ctx)
+    const width = win.innerWidth
+    const half = roundToDevicePixel(7.5)
+    point.x = wrap(point.x + half, width) - half
+
+    return { hint, point }
+  },
+
+  createVirtualCursor(ctx: Ctx) {
+    const doc = dom.getDoc(ctx)
+    const el = doc.createElement("div")
+    el.className = "scrubber--cursor"
+    el.id = dom.getCursorId(ctx)
+
+    Object.assign(el.style, {
+      width: "15px",
+      height: "15px",
+      position: "fixed",
+      pointerEvents: "none",
+      left: "0px",
+      top: "0px",
+      zIndex: MAX_Z_INDEX,
+      transform: ctx.scrubberCursorPoint
+        ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)`
+        : undefined,
+      willChange: "transform",
+    })
+
+    el.innerHTML = `
+        <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
+          <g transform="translate(2 3)">
+            <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
+            <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
+          </g>
+        </svg>`
+
+    doc.body.appendChild(el)
+  },
+})

package/src/number-input.machine.ts

@@ -0,0 +1,396 @@
+import { choose, createMachine, guards } from "@zag-js/core"
+import { addDomEvent, requestPointerLock } from "@zag-js/dom-event"
+import { isSafari, raf } from "@zag-js/dom-query"
+import { dispatchInputValueEvent } from "@zag-js/form-utils"
+import { observeAttributes } from "@zag-js/mutation-observer"
+import { isAtMax, isAtMin, isWithinRange, valueOf } from "@zag-js/number-utils"
+import { callAll, compact } from "@zag-js/utils"
+import { dom } from "./number-input.dom"
+import type { MachineContext, MachineState, UserDefinedContext } from "./number-input.types"
+import { utils } from "./number-input.utils"
+
+const { not, and } = guards
+
+export function machine(userContext: UserDefinedContext) {
+  const ctx = compact(userContext)
+  return createMachine<MachineContext, MachineState>(
+    {
+      id: "number-input",
+      initial: "idle",
+      context: {
+        dir: "ltr",
+        focusInputOnChange: true,
+        clampValueOnBlur: true,
+        allowOverflow: false,
+        inputMode: "decimal",
+        pattern: "[0-9]*(.[0-9]+)?",
+        hint: null,
+        value: "",
+        step: 1,
+        min: Number.MIN_SAFE_INTEGER,
+        max: Number.MAX_SAFE_INTEGER,
+        scrubberCursorPoint: null,
+        invalid: false,
+        spinOnPress: true,
+        ...ctx,
+        translations: {
+          incrementLabel: "increment value",
+          decrementLabel: "decrease value",
+          ...ctx.translations,
+        },
+      },
+
+      computed: {
+        isRtl: (ctx) => ctx.dir === "rtl",
+        valueAsNumber: (ctx) => valueOf(ctx.value),
+        isAtMin: (ctx) => isAtMin(ctx.value, ctx),
+        isAtMax: (ctx) => isAtMax(ctx.value, ctx),
+        isOutOfRange: (ctx) => !isWithinRange(ctx.value, ctx),
+        isValueEmpty: (ctx) => ctx.value === "",
+        canIncrement: (ctx) => ctx.allowOverflow || !ctx.isAtMax,
+        canDecrement: (ctx) => ctx.allowOverflow || !ctx.isAtMin,
+        valueText: (ctx) => ctx.translations.valueText?.(ctx.value),
+        formattedValue: (ctx) => ctx.format?.(ctx.value).toString() ?? ctx.value,
+      },
+
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"],
+        isOutOfRange: ["invokeOnInvalid"],
+        scrubberCursorPoint: ["setVirtualCursorPosition"],
+      },
+
+      entry: ["syncInputValue"],
+
+      on: {
+        SET_VALUE: [
+          {
+            guard: "clampOnBlur",
+            actions: ["setValue", "clampValue", "setHintToSet"],
+          },
+          {
+            actions: ["setValue", "setHintToSet"],
+          },
+        ],
+        CLEAR_VALUE: {
+          actions: ["clearValue"],
+        },
+        INCREMENT: {
+          actions: ["increment"],
+        },
+        DECREMENT: {
+          actions: ["decrement"],
+        },
+      },
+
+      states: {
+        idle: {
+          exit: "invokeOnFocus",
+          on: {
+            PRESS_DOWN: {
+              target: "before:spin",
+              actions: ["focusInput", "setHint"],
+            },
+            PRESS_DOWN_SCRUBBER: {
+              target: "scrubbing",
+              actions: ["focusInput", "setHint", "setCursorPoint"],
+            },
+            FOCUS: "focused",
+          },
+        },
+
+        focused: {
+          tags: "focus",
+          entry: "focusInput",
+          activities: "attachWheelListener",
+          on: {
+            PRESS_DOWN: {
+              target: "before:spin",
+              actions: ["focusInput", "setHint"],
+            },
+            PRESS_DOWN_SCRUBBER: {
+              target: "scrubbing",
+              actions: ["focusInput", "setHint", "setCursorPoint"],
+            },
+            ARROW_UP: {
+              actions: "increment",
+            },
+            ARROW_DOWN: {
+              actions: "decrement",
+            },
+            HOME: {
+              actions: "setToMin",
+            },
+            END: {
+              actions: "setToMax",
+            },
+            CHANGE: {
+              actions: ["setValue", "setHint"],
+            },
+            BLUR: [
+              {
+                guard: "isInvalidExponential",
+                target: "idle",
+                actions: ["clearValue", "clearHint", "invokeOnBlur"],
+              },
+              {
+                guard: and("clampOnBlur", not("isInRange"), not("isEmptyValue")),
+                target: "idle",
+                actions: ["clampValue", "clearHint", "invokeOnBlur"],
+              },
+              {
+                target: "idle",
+                actions: ["roundValue", "invokeOnBlur"],
+              },
+            ],
+          },
+        },
+
+        "before:spin": {
+          tags: "focus",
+          activities: "trackButtonDisabled",
+          entry: choose([
+            { guard: "isIncrementHint", actions: "increment" },
+            { guard: "isDecrementHint", actions: "decrement" },
+          ]),
+          after: {
+            CHANGE_DELAY: {
+              target: "spinning",
+              guard: and("isInRange", "spinOnPress"),
+            },
+          },
+          on: {
+            PRESS_UP: {
+              target: "focused",
+              actions: "clearHint",
+            },
+          },
+        },
+
+        spinning: {
+          tags: "focus",
+          activities: "trackButtonDisabled",
+          every: [
+            {
+              delay: "CHANGE_INTERVAL",
+              guard: and(not("isAtMin"), "isIncrementHint"),
+              actions: "increment",
+            },
+            {
+              delay: "CHANGE_INTERVAL",
+              guard: and(not("isAtMax"), "isDecrementHint"),
+              actions: "decrement",
+            },
+          ],
+          on: {
+            PRESS_UP: {
+              target: "focused",
+              actions: "clearHint",
+            },
+          },
+        },
+
+        scrubbing: {
+          tags: "focus",
+          exit: "clearCursorPoint",
+          activities: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+          on: {
+            POINTER_UP_SCRUBBER: "focused",
+            POINTER_MOVE_SCRUBBER: [
+              {
+                guard: "isIncrementHint",
+                actions: ["increment", "setCursorPoint"],
+              },
+              {
+                guard: "isDecrementHint",
+                actions: ["decrement", "setCursorPoint"],
+              },
+            ],
+          },
+        },
+      },
+    },
+    {
+      delays: {
+        CHANGE_INTERVAL: 50,
+        CHANGE_DELAY: 300,
+      },
+
+      guards: {
+        clampOnBlur: (ctx) => !!ctx.clampValueOnBlur,
+        isAtMin: (ctx) => ctx.isAtMin,
+        spinOnPress: (ctx) => !!ctx.spinOnPress,
+        isAtMax: (ctx) => ctx.isAtMax,
+        isInRange: (ctx) => !ctx.isOutOfRange,
+        isDecrementHint: (ctx, evt) => (evt.hint ?? ctx.hint) === "decrement",
+        isEmptyValue: (ctx) => ctx.isValueEmpty,
+        isIncrementHint: (ctx, evt) => (evt.hint ?? ctx.hint) === "increment",
+        isInvalidExponential: (ctx) => ctx.value.toString().startsWith("e"),
+      },
+
+      activities: {
+        setupVirtualCursor(ctx) {
+          return dom.setupVirtualCursor(ctx)
+        },
+        preventTextSelection(ctx) {
+          return dom.preventTextSelection(ctx)
+        },
+        trackButtonDisabled(ctx, _evt, { send }) {
+          const btn = dom.getPressedTriggerEl(ctx, ctx.hint)
+          return observeAttributes(btn, ["disabled"], () => {
+            send("PRESS_UP")
+          })
+        },
+        attachWheelListener(ctx, _evt, { send }) {
+          const input = dom.getInputEl(ctx)
+          if (!input) return
+
+          function onWheel(event: WheelEvent) {
+            const isInputFocused = dom.getDoc(ctx).activeElement === input
+            if (!ctx.allowMouseWheel || !isInputFocused) return
+            event.preventDefault()
+
+            const dir = Math.sign(event.deltaY) * -1
+            if (dir === 1) {
+              send("INCREMENT")
+            } else if (dir === -1) {
+              send("DECREMENT")
+            }
+          }
+          return addDomEvent(input, "wheel", onWheel, { passive: false })
+        },
+        activatePointerLock(ctx) {
+          if (isSafari()) return
+          return requestPointerLock(dom.getDoc(ctx))
+        },
+        trackMousemove(ctx, _evt, { send }) {
+          const doc = dom.getDoc(ctx)
+
+          function onMousemove(event: MouseEvent) {
+            if (!ctx.scrubberCursorPoint) return
+            const value = dom.getMousementValue(ctx, event)
+            if (!value.hint) return
+            send({
+              type: "POINTER_MOVE_SCRUBBER",
+              hint: value.hint,
+              point: value.point,
+            })
+          }
+
+          function onMouseup() {
+            send("POINTER_UP_SCRUBBER")
+          }
+
+          return callAll(
+            addDomEvent(doc, "mousemove", onMousemove, false),
+            addDomEvent(doc, "mouseup", onMouseup, false),
+          )
+        },
+      },
+
+      actions: {
+        focusInput(ctx) {
+          if (!ctx.focusInputOnChange) return
+          const input = dom.getInputEl(ctx)
+          raf(() => input?.focus())
+        },
+        increment(ctx, evt) {
+          ctx.value = utils.increment(ctx, evt.step)
+        },
+        decrement(ctx, evt) {
+          ctx.value = utils.decrement(ctx, evt.step)
+        },
+        clampValue(ctx) {
+          ctx.value = utils.clamp(ctx)
+        },
+        roundValue(ctx) {
+          if (ctx.value !== "") {
+            ctx.value = utils.round(ctx)
+          }
+        },
+        setValue(ctx, evt) {
+          const value = evt.target?.value ?? evt.value
+          ctx.value = utils.sanitize(ctx, utils.parse(ctx, value.toString()))
+        },
+        clearValue(ctx) {
+          ctx.value = ""
+        },
+        setToMax(ctx) {
+          ctx.value = ctx.max.toString()
+        },
+        setToMin(ctx) {
+          ctx.value = ctx.min.toString()
+        },
+        setHint(ctx, evt) {
+          ctx.hint = evt.hint
+        },
+        clearHint(ctx) {
+          ctx.hint = null
+        },
+        setHintToSet(ctx) {
+          ctx.hint = "set"
+        },
+        invokeOnChange(ctx) {
+          ctx.onChange?.({
+            value: ctx.value,
+            valueAsNumber: ctx.valueAsNumber,
+          })
+        },
+        invokeOnFocus(ctx, evt) {
+          let srcElement: HTMLElement | null = null
+
+          if (evt.type === "PRESS_DOWN") {
+            srcElement = dom.getPressedTriggerEl(ctx, evt.hint)
+          } else if (evt.type === "FOCUS") {
+            srcElement = dom.getInputEl(ctx)
+          } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
+            srcElement = dom.getScrubberEl(ctx)
+          }
+
+          ctx.onFocus?.({
+            value: ctx.value,
+            valueAsNumber: ctx.valueAsNumber,
+            srcElement,
+          })
+        },
+        invokeOnBlur(ctx) {
+          ctx.onBlur?.({
+            value: ctx.value,
+            valueAsNumber: ctx.valueAsNumber,
+          })
+        },
+        invokeOnInvalid(ctx) {
+          if (!ctx.isOutOfRange) return
+          const reason = ctx.valueAsNumber > ctx.max ? "rangeOverflow" : "rangeUnderflow"
+          ctx.onInvalid?.({
+            reason,
+            value: ctx.formattedValue,
+            valueAsNumber: ctx.valueAsNumber,
+          })
+        },
+        // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
+        syncInputValue(ctx) {
+          const input = dom.getInputEl(ctx)
+          if (!input || input.value == ctx.value) return
+          const value = utils.parse(ctx, input.value)
+          ctx.value = utils.sanitize(ctx, value)
+        },
+        setCursorPoint(ctx, evt) {
+          ctx.scrubberCursorPoint = evt.point
+        },
+        clearCursorPoint(ctx) {
+          ctx.scrubberCursorPoint = null
+        },
+        setVirtualCursorPosition(ctx) {
+          const cursor = dom.getCursorEl(ctx)
+          if (!cursor || !ctx.scrubberCursorPoint) return
+          const { x, y } = ctx.scrubberCursorPoint
+          cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`
+        },
+        dispatchChangeEvent(ctx) {
+          const inputEl = dom.getInputEl(ctx)
+          dispatchInputValueEvent(inputEl, { value: ctx.formattedValue })
+        },
+      },
+    },
+  )
+}

package/src/number-input.types.ts

@@ -0,0 +1,234 @@
+import type { StateMachine as S } from "@zag-js/core"
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types"
+
+type ValidityState = "rangeUnderflow" | "rangeOverflow"
+
+type ElementIds = Partial<{
+  root: string
+  label: string
+  input: string
+  incrementTrigger: string
+  decrementTrigger: string
+  scrubber: string
+}>
+
+type IntlTranslations = {
+  /**
+   * Function that returns the human-readable value.
+   * It is used to set the `aria-valuetext` property of the input
+   */
+  valueText?: (value: string) => string
+  /**
+   * The label foe the increment button
+   */
+  incrementLabel: string
+  /**
+   * The label for the decrement button
+   */
+  decrementLabel: string
+}
+
+type Value = {
+  value: string
+  valueAsNumber: number
+}
+
+type PublicContext = DirectionProperty &
+  CommonProperties & {
+    /**
+     * The ids of the elements in the number input. Useful for composition.
+     */
+    ids?: ElementIds
+    /**
+     * The name attribute of the number input. Useful for form submission.
+     */
+    name?: string
+    /**
+     * The associate form of the input element.
+     */
+    form?: string
+    /**
+     * Whether the number input is disabled.
+     */
+    disabled?: boolean
+    /**
+     * Whether the number input is readonly
+     */
+    readOnly?: boolean
+    /**
+     * Whether the number input value is invalid.
+     */
+    invalid?: boolean
+    /**
+     * The pattern used to check the <input> element's value against
+     *
+     * @default
+     * "[0-9]*(.[0-9]+)?"
+     */
+    pattern: string
+    /**
+     * The value of the input
+     */
+    value: string
+    /**
+     * The minimum value of the number input
+     */
+    min: number
+    /**
+     * The maximum value of the number input
+     */
+    max: number
+    /**
+     * The amount to increment or decrement the value by
+     */
+    step: number
+    /**
+     * Whether to allow mouse wheel to change the value
+     */
+    allowMouseWheel?: boolean
+    /**
+     * Whether to allow the value overflow the min/max range
+     * @default true
+     */
+    allowOverflow: boolean
+    /**
+     * Whether the pressed key should be allowed in the input.
+     * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/
+     */
+    validateCharacter?: (char: string) => boolean
+    /**
+     * Whether to clamp the value when the input loses focus (blur)
+     * @default true
+     */
+    clampValueOnBlur: boolean
+    /**
+     * Whether to focus input when the value changes
+     * @default true
+     */
+    focusInputOnChange: boolean
+    /**
+     * Specifies the localized strings that identifies the accessibility elements and their states
+     */
+    translations: IntlTranslations
+    /**
+     * If using a custom display format, this converts the custom format to a format `parseFloat` understands.
+     */
+    parse?: (value: string) => string
+    /**
+     * If using a custom display format, this converts the default format to the custom format.
+     */
+    format?: (value: string) => string | number
+    /**
+     * Hints at the type of data that might be entered by the user. It also determines
+     * the type of keyboard shown to the user on mobile devices
+     * @default "decimal"
+     */
+    inputMode: "text" | "tel" | "numeric" | "decimal"
+    /**
+     * Function invoked when the value changes
+     */
+    onChange?: (details: Value) => void
+    /**
+     * Function invoked when the value overflows or underflows the min/max range
+     */
+    onInvalid?: (details: Value & { reason: ValidityState }) => void
+    /**
+     * Function invoked when the number input is focused
+     */
+    onFocus?: (details: Value & { srcElement: HTMLElement | null }) => void
+    /**
+     * The value of the input when it is blurred
+     */
+    onBlur?: (details: Value) => void
+    /**
+     * The minimum number of fraction digits to use. Possible values are from 0 to 20
+     */
+    minFractionDigits?: number
+    /**
+     * The maximum number of fraction digits to use. Possible values are from 0 to 20;
+     */
+    maxFractionDigits?: number
+    /**
+     * Whether to spin the value when the increment/decrement button is pressed
+     */
+    spinOnPress?: boolean
+  }
+
+export type UserDefinedContext = RequiredBy<PublicContext, "id">
+
+type ComputedContext = Readonly<{
+  /**
+   * @computed
+   * The value of the input as a number
+   */
+  valueAsNumber: number
+  /**
+   * @computed
+   * Whether the value is at the min
+   */
+  isAtMin: boolean
+  /**
+   * @computed
+   * Whether the value is at the max
+   */
+  isAtMax: boolean
+  /**
+   * @computed
+   * Whether the value is out of the min/max range
+   */
+  isOutOfRange: boolean
+  /**
+   * @computed
+   * Whether the value is empty
+   */
+  isValueEmpty: boolean
+  /**
+   * @computed
+   * Whether the increment button is enabled
+   */
+  canIncrement: boolean
+  /**
+   * @computed
+   * Whether the decrement button is enabled
+   */
+  canDecrement: boolean
+  /**
+   * @computed
+   * The `aria-valuetext` attribute of the input
+   */
+  valueText: string | undefined
+  /**
+   * @computed
+   * The formatted value of the input
+   */
+  formattedValue: string
+  /**
+   * @computed
+   * Whether the writing direction is RTL
+   */
+  isRtl: boolean
+}>
+
+type PrivateContext = Context<{
+  /**
+   * @internal
+   * The hint that determines if we're incrementing or decrementing
+   */
+  hint: "increment" | "decrement" | "set" | null
+  /**
+   * @internal
+   * The scrubber cursor position
+   */
+  scrubberCursorPoint: { x: number; y: number } | null
+}>
+
+export type MachineContext = PublicContext & PrivateContext & ComputedContext
+
+export type MachineState = {
+  value: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing"
+  tags: "focus"
+}
+
+export type State = S.State<MachineContext, MachineState>
+
+export type Send = S.Send<S.AnyEventObject>

package/src/number-input.utils.ts

@@ -0,0 +1,42 @@
+import { isModifiedEvent } from "@zag-js/dom-event"
+import { clamp, decrement, formatDecimal, increment } from "@zag-js/number-utils"
+import type { JSX } from "@zag-js/types"
+import type { MachineContext as Ctx } from "./number-input.types"
+
+export const utils = {
+  isValidNumericEvent: (ctx: Ctx, event: JSX.KeyboardEvent) => {
+    if (event.key == null) return true
+    const isModifier = isModifiedEvent(event)
+    const isSingleKey = event.key.length === 1
+    if (isModifier || !isSingleKey) return true
+    return ctx.validateCharacter?.(event.key) ?? utils.isFloatingPoint(event.key)
+  },
+  isFloatingPoint: (v: string) => /^[0-9+\-.]$/.test(v),
+  sanitize: (ctx: Ctx, value: string) => {
+    return value
+      .split("")
+      .filter(ctx.validateCharacter ?? utils.isFloatingPoint)
+      .join("")
+  },
+  increment: (ctx: Ctx, step?: number) => {
+    const value = increment(ctx.value, step ?? ctx.step)
+    return formatDecimal(clamp(value, ctx), ctx)
+  },
+  decrement: (ctx: Ctx, step?: number) => {
+    const value = decrement(ctx.value, step ?? ctx.step)
+    return formatDecimal(clamp(value, ctx), ctx)
+  },
+  clamp: (ctx: Ctx) => {
+    return formatDecimal(clamp(ctx.value, ctx), ctx)
+  },
+  parse: (ctx: Ctx, value: string) => {
+    return ctx.parse?.(value) ?? value
+  },
+  format: (ctx: Ctx, value: string | number) => {
+    const _val = value.toString()
+    return ctx.format?.(_val) ?? _val
+  },
+  round: (ctx: Ctx) => {
+    return formatDecimal(ctx.value, ctx)
+  },
+}