@zag-js/number-input 1.34.1 → 1.35.0

package/dist/number-input.machine.mjs

@@ -0,0 +1,441 @@
+// src/number-input.machine.ts
+import { memo, setup } from "@zag-js/core";
+import {
+  addDomEvent,
+  isSafari,
+  observeAttributes,
+  raf,
+  requestPointerLock,
+  setElementValue,
+  trackFormControl
+} from "@zag-js/dom-query";
+import {
+  callAll,
+  clampValue,
+  decrementValue,
+  incrementValue,
+  isValueAtMax,
+  isValueAtMin,
+  isValueWithinRange
+} from "@zag-js/utils";
+import { recordCursor, restoreCursor } from "./cursor.mjs";
+import * as dom from "./number-input.dom.mjs";
+import { createFormatter, createParser, formatValue, getDefaultStep, parseValue } from "./number-input.utils.mjs";
+var { choose, guards, createMachine } = setup();
+var { not, and } = guards;
+var machine = createMachine({
+  props({ props }) {
+    const step = getDefaultStep(props.step, props.formatOptions);
+    return {
+      dir: "ltr",
+      locale: "en-US",
+      focusInputOnChange: true,
+      clampValueOnBlur: !props.allowOverflow,
+      allowOverflow: false,
+      inputMode: "decimal",
+      pattern: "-?[0-9]*(.[0-9]+)?",
+      defaultValue: "",
+      step,
+      min: Number.MIN_SAFE_INTEGER,
+      max: Number.MAX_SAFE_INTEGER,
+      spinOnPress: true,
+      ...props,
+      translations: {
+        incrementLabel: "increment value",
+        decrementLabel: "decrease value",
+        ...props.translations
+      }
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable, getComputed }) {
+    return {
+      value: bindable(() => ({
+        defaultValue: prop("defaultValue"),
+        value: prop("value"),
+        onChange(value) {
+          const computed = getComputed();
+          const valueAsNumber = parseValue(value, { computed, prop });
+          prop("onValueChange")?.({ value, valueAsNumber });
+        }
+      })),
+      hint: bindable(() => ({ defaultValue: null })),
+      scrubberCursorPoint: bindable(() => ({
+        defaultValue: null,
+        hash(value) {
+          return value ? `x:${value.x}, y:${value.y}` : "";
+        }
+      })),
+      fieldsetDisabled: bindable(() => ({ defaultValue: false }))
+    };
+  },
+  computed: {
+    isRtl: ({ prop }) => prop("dir") === "rtl",
+    valueAsNumber: ({ context, computed, prop }) => parseValue(context.get("value"), { computed, prop }),
+    formattedValue: ({ computed, prop }) => formatValue(computed("valueAsNumber"), { computed, prop }),
+    isAtMin: ({ computed, prop }) => isValueAtMin(computed("valueAsNumber"), prop("min")),
+    isAtMax: ({ computed, prop }) => isValueAtMax(computed("valueAsNumber"), prop("max")),
+    isOutOfRange: ({ computed, prop }) => !isValueWithinRange(computed("valueAsNumber"), prop("min"), prop("max")),
+    isValueEmpty: ({ context }) => context.get("value") === "",
+    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")),
+    formatter: memo(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      ([locale, formatOptions]) => createFormatter(locale, formatOptions)
+    ),
+    parser: memo(
+      ({ prop }) => [prop("locale"), prop("formatOptions")],
+      ([locale, formatOptions]) => createParser(locale, formatOptions)
+    )
+  },
+  watch({ track, action, context, computed, prop }) {
+    track([() => context.get("value"), () => prop("locale"), () => JSON.stringify(prop("formatOptions"))], () => {
+      action(["syncInputElement"]);
+    });
+    track([() => computed("isOutOfRange")], () => {
+      action(["invokeOnInvalid"]);
+    });
+    track([() => context.hash("scrubberCursorPoint")], () => {
+      action(["setVirtualCursorPosition"]);
+    });
+  },
+  effects: ["trackFormControl"],
+  on: {
+    "VALUE.SET": {
+      actions: ["setRawValue"]
+    },
+    "VALUE.CLEAR": {
+      actions: ["clearValue"]
+    },
+    "VALUE.INCREMENT": {
+      actions: ["increment"]
+    },
+    "VALUE.DECREMENT": {
+      actions: ["decrement"]
+    }
+  },
+  states: {
+    idle: {
+      on: {
+        "TRIGGER.PRESS_DOWN": [
+          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          {
+            target: "before:spin",
+            actions: ["focusInput", "invokeOnFocus", "setHint"]
+          }
+        ],
+        "SCRUBBER.PRESS_DOWN": {
+          target: "scrubbing",
+          actions: ["focusInput", "invokeOnFocus", "setHint", "setCursorPoint"]
+        },
+        "INPUT.FOCUS": {
+          target: "focused",
+          actions: ["focusInput", "invokeOnFocus"]
+        }
+      }
+    },
+    focused: {
+      tags: ["focus"],
+      effects: ["attachWheelListener"],
+      on: {
+        "TRIGGER.PRESS_DOWN": [
+          { guard: "isTouchPointer", target: "before:spin", actions: ["setHint"] },
+          { target: "before:spin", actions: ["focusInput", "setHint"] }
+        ],
+        "SCRUBBER.PRESS_DOWN": {
+          target: "scrubbing",
+          actions: ["focusInput", "setHint", "setCursorPoint"]
+        },
+        "INPUT.ARROW_UP": {
+          actions: ["increment"]
+        },
+        "INPUT.ARROW_DOWN": {
+          actions: ["decrement"]
+        },
+        "INPUT.HOME": {
+          actions: ["decrementToMin"]
+        },
+        "INPUT.END": {
+          actions: ["incrementToMax"]
+        },
+        "INPUT.CHANGE": {
+          actions: ["setValue", "setHint"]
+        },
+        "INPUT.BLUR": [
+          {
+            guard: and("clampValueOnBlur", not("isInRange")),
+            target: "idle",
+            actions: ["setClampedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          },
+          {
+            guard: not("isInRange"),
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnInvalid", "invokeOnValueCommit"]
+          },
+          {
+            target: "idle",
+            actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+          }
+        ],
+        "INPUT.ENTER": {
+          actions: ["setFormattedValue", "clearHint", "invokeOnBlur", "invokeOnValueCommit"]
+        }
+      }
+    },
+    "before:spin": {
+      tags: ["focus"],
+      effects: ["trackButtonDisabled", "waitForChangeDelay"],
+      entry: choose([
+        { guard: "isIncrementHint", actions: ["increment"] },
+        { guard: "isDecrementHint", actions: ["decrement"] }
+      ]),
+      on: {
+        CHANGE_DELAY: {
+          target: "spinning",
+          guard: and("isInRange", "spinOnPress")
+        },
+        "TRIGGER.PRESS_UP": [
+          { guard: "isTouchPointer", target: "focused", actions: ["clearHint"] },
+          { target: "focused", actions: ["focusInput", "clearHint"] }
+        ]
+      }
+    },
+    spinning: {
+      tags: ["focus"],
+      effects: ["trackButtonDisabled", "spinValue"],
+      on: {
+        SPIN: [
+          {
+            guard: "isIncrementHint",
+            actions: ["increment"]
+          },
+          {
+            guard: "isDecrementHint",
+            actions: ["decrement"]
+          }
+        ],
+        "TRIGGER.PRESS_UP": {
+          target: "focused",
+          actions: ["focusInput", "clearHint"]
+        }
+      }
+    },
+    scrubbing: {
+      tags: ["focus"],
+      effects: ["activatePointerLock", "trackMousemove", "setupVirtualCursor", "preventTextSelection"],
+      on: {
+        "SCRUBBER.POINTER_UP": {
+          target: "focused",
+          actions: ["focusInput", "clearCursorPoint"]
+        },
+        "SCRUBBER.POINTER_MOVE": [
+          {
+            guard: "isIncrementHint",
+            actions: ["increment", "setCursorPoint"]
+          },
+          {
+            guard: "isDecrementHint",
+            actions: ["decrement", "setCursorPoint"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      clampValueOnBlur: ({ prop }) => prop("clampValueOnBlur"),
+      spinOnPress: ({ prop }) => !!prop("spinOnPress"),
+      isInRange: ({ computed }) => !computed("isOutOfRange"),
+      isDecrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "decrement",
+      isIncrementHint: ({ context, event }) => (event.hint ?? context.get("hint")) === "increment",
+      isTouchPointer: ({ event }) => event.pointerType === "touch"
+    },
+    effects: {
+      waitForChangeDelay({ send }) {
+        const id = setTimeout(() => {
+          send({ type: "CHANGE_DELAY" });
+        }, 300);
+        return () => clearTimeout(id);
+      },
+      spinValue({ send }) {
+        const id = setInterval(() => {
+          send({ type: "SPIN" });
+        }, 50);
+        return () => clearInterval(id);
+      },
+      trackFormControl({ context, scope }) {
+        const inputEl = dom.getInputEl(scope);
+        return trackFormControl(inputEl, {
+          onFieldsetDisabledChange(disabled) {
+            context.set("fieldsetDisabled", disabled);
+          },
+          onFormReset() {
+            context.set("value", context.initial("value"));
+          }
+        });
+      },
+      setupVirtualCursor({ context, scope }) {
+        const point = context.get("scrubberCursorPoint");
+        return dom.setupVirtualCursor(scope, point);
+      },
+      preventTextSelection({ scope }) {
+        return dom.preventTextSelection(scope);
+      },
+      trackButtonDisabled({ context, scope, send }) {
+        const hint = context.get("hint");
+        const btn = dom.getPressedTriggerEl(scope, hint);
+        return observeAttributes(btn, {
+          attributes: ["disabled"],
+          callback() {
+            send({ type: "TRIGGER.PRESS_UP", src: "attr" });
+          }
+        });
+      },
+      attachWheelListener({ scope, send, prop }) {
+        const inputEl = dom.getInputEl(scope);
+        if (!inputEl || !scope.isActiveElement(inputEl) || !prop("allowMouseWheel")) return;
+        function onWheel(event) {
+          event.preventDefault();
+          const dir = Math.sign(event.deltaY) * -1;
+          if (dir === 1) {
+            send({ type: "VALUE.INCREMENT" });
+          } else if (dir === -1) {
+            send({ type: "VALUE.DECREMENT" });
+          }
+        }
+        return addDomEvent(inputEl, "wheel", onWheel, { passive: false });
+      },
+      activatePointerLock({ scope }) {
+        if (isSafari()) return;
+        return requestPointerLock(scope.getDoc());
+      },
+      trackMousemove({ scope, send, context, computed }) {
+        const doc = scope.getDoc();
+        function onMousemove(event) {
+          const point = context.get("scrubberCursorPoint");
+          const isRtl = computed("isRtl");
+          const value = dom.getMousemoveValue(scope, { point, isRtl, event });
+          if (!value.hint) return;
+          send({
+            type: "SCRUBBER.POINTER_MOVE",
+            hint: value.hint,
+            point: value.point
+          });
+        }
+        function onMouseup() {
+          send({ type: "SCRUBBER.POINTER_UP" });
+        }
+        return callAll(addDomEvent(doc, "mousemove", onMousemove, false), addDomEvent(doc, "mouseup", onMouseup, false));
+      }
+    },
+    actions: {
+      focusInput({ scope, prop }) {
+        if (!prop("focusInputOnChange")) return;
+        const inputEl = dom.getInputEl(scope);
+        if (scope.isActiveElement(inputEl)) return;
+        raf(() => inputEl?.focus({ preventScroll: true }));
+      },
+      increment({ context, event, prop, computed }) {
+        let nextValue = incrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
+      },
+      decrement({ context, event, prop, computed }) {
+        let nextValue = decrementValue(computed("valueAsNumber"), event.step ?? prop("step"));
+        if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
+      },
+      setClampedValue({ context, prop, computed }) {
+        const nextValue = clampValue(computed("valueAsNumber"), prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
+      },
+      setRawValue({ context, event, prop, computed }) {
+        let nextValue = parseValue(event.value, { computed, prop });
+        if (!prop("allowOverflow")) nextValue = clampValue(nextValue, prop("min"), prop("max"));
+        context.set("value", formatValue(nextValue, { computed, prop }));
+      },
+      setValue({ context, event }) {
+        const value = event.target?.value ?? event.value;
+        context.set("value", value);
+      },
+      clearValue({ context }) {
+        context.set("value", "");
+      },
+      incrementToMax({ context, prop, computed }) {
+        const value = formatValue(prop("max"), { computed, prop });
+        context.set("value", value);
+      },
+      decrementToMin({ context, prop, computed }) {
+        const value = formatValue(prop("min"), { computed, prop });
+        context.set("value", value);
+      },
+      setHint({ context, event }) {
+        context.set("hint", event.hint);
+      },
+      clearHint({ context }) {
+        context.set("hint", null);
+      },
+      invokeOnFocus({ computed, prop }) {
+        prop("onFocusChange")?.({
+          focused: true,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnBlur({ computed, prop }) {
+        prop("onFocusChange")?.({
+          focused: false,
+          value: computed("formattedValue"),
+          valueAsNumber: computed("valueAsNumber")
+        });
+      },
+      invokeOnInvalid({ computed, prop, event }) {
+        if (event.type === "INPUT.CHANGE") return;
+        const reason = computed("valueAsNumber") > prop("max") ? "rangeOverflow" : "rangeUnderflow";
+        prop("onValueInvalid")?.({
+          reason,
+          value: computed("formattedValue"),
+          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);
+        const sel = event.selection ?? recordCursor(inputEl, scope);
+        raf(() => {
+          setElementValue(inputEl, value);
+          restoreCursor(inputEl, sel, scope);
+        });
+      },
+      setFormattedValue({ context, computed, action }) {
+        context.set("value", computed("formattedValue"));
+        action(["syncInputElement"]);
+      },
+      setCursorPoint({ context, event }) {
+        context.set("scrubberCursorPoint", event.point);
+      },
+      clearCursorPoint({ context }) {
+        context.set("scrubberCursorPoint", null);
+      },
+      setVirtualCursorPosition({ context, scope }) {
+        const cursorEl = dom.getCursorEl(scope);
+        const point = context.get("scrubberCursorPoint");
+        if (!cursorEl || !point) return;
+        cursorEl.style.transform = `translate3d(${point.x}px, ${point.y}px, 0px)`;
+      }
+    }
+  }
+});
+export {
+  machine
+};

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

@@ -0,0 +1,9 @@
+import { NumberInputProps } from './number-input.types.mjs';
+import '@internationalized/number';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof NumberInputProps)[];
+declare const splitProps: <Props extends Partial<NumberInputProps>>(props: Props) => [Partial<NumberInputProps>, Omit<Props, keyof NumberInputProps>];
+
+export { props, splitProps };

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

@@ -0,0 +1,9 @@
+import { NumberInputProps } from './number-input.types.js';
+import '@internationalized/number';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const props: (keyof NumberInputProps)[];
+declare const splitProps: <Props extends Partial<NumberInputProps>>(props: Props) => [Partial<NumberInputProps>, Omit<Props, keyof NumberInputProps>];
+
+export { props, splitProps };

package/dist/number-input.props.js

@@ -0,0 +1,65 @@
+"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.props.ts
+var number_input_props_exports = {};
+__export(number_input_props_exports, {
+  props: () => props,
+  splitProps: () => splitProps
+});
+module.exports = __toCommonJS(number_input_props_exports);
+var import_types = require("@zag-js/types");
+var import_utils = require("@zag-js/utils");
+var props = (0, import_types.createProps)()([
+  "allowMouseWheel",
+  "allowOverflow",
+  "clampValueOnBlur",
+  "dir",
+  "disabled",
+  "focusInputOnChange",
+  "form",
+  "formatOptions",
+  "getRootNode",
+  "id",
+  "ids",
+  "inputMode",
+  "invalid",
+  "locale",
+  "max",
+  "min",
+  "name",
+  "onFocusChange",
+  "onValueChange",
+  "onValueCommit",
+  "onValueInvalid",
+  "pattern",
+  "required",
+  "readOnly",
+  "spinOnPress",
+  "step",
+  "translations",
+  "value",
+  "defaultValue"
+]);
+var splitProps = (0, import_utils.createSplitProps)(props);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  props,
+  splitProps
+});

package/dist/number-input.props.mjs

@@ -0,0 +1,39 @@
+// src/number-input.props.ts
+import { createProps } from "@zag-js/types";
+import { createSplitProps } from "@zag-js/utils";
+var props = createProps()([
+  "allowMouseWheel",
+  "allowOverflow",
+  "clampValueOnBlur",
+  "dir",
+  "disabled",
+  "focusInputOnChange",
+  "form",
+  "formatOptions",
+  "getRootNode",
+  "id",
+  "ids",
+  "inputMode",
+  "invalid",
+  "locale",
+  "max",
+  "min",
+  "name",
+  "onFocusChange",
+  "onValueChange",
+  "onValueCommit",
+  "onValueInvalid",
+  "pattern",
+  "required",
+  "readOnly",
+  "spinOnPress",
+  "step",
+  "translations",
+  "value",
+  "defaultValue"
+]);
+var splitProps = createSplitProps(props);
+export {
+  props,
+  splitProps
+};