@zag-js/number-input 0.10.2 → 0.10.4

package/dist/number-input.machine.mjs

@@ -1,8 +1,386 @@
-import {
-  machine
-} from "./chunk-WAGQOEOU.mjs";
-import "./chunk-QYY4CWRS.mjs";
-import "./chunk-AXXDGYUW.mjs";
-export {
-  machine
-};
+import { createMachine, choose, 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 { valueOf, isAtMin, isAtMax, isWithinRange } from '@zag-js/number-utils';
+import { compact, callAll } from '@zag-js/utils';
+import { dom } from './number-input.dom.mjs';
+import { utils } from './number-input.utils.mjs';
+
+const { not, and } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      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: (ctx2) => ctx2.dir === "rtl",
+        valueAsNumber: (ctx2) => valueOf(ctx2.value),
+        isAtMin: (ctx2) => isAtMin(ctx2.value, ctx2),
+        isAtMax: (ctx2) => isAtMax(ctx2.value, ctx2),
+        isOutOfRange: (ctx2) => !isWithinRange(ctx2.value, ctx2),
+        isValueEmpty: (ctx2) => ctx2.value === "",
+        canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
+        canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
+        valueText: (ctx2) => ctx2.translations.valueText?.(ctx2.value),
+        formattedValue: (ctx2) => ctx2.format?.(ctx2.value).toString() ?? ctx2.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: (ctx2) => !!ctx2.clampValueOnBlur,
+        isAtMin: (ctx2) => ctx2.isAtMin,
+        spinOnPress: (ctx2) => !!ctx2.spinOnPress,
+        isAtMax: (ctx2) => ctx2.isAtMax,
+        isInRange: (ctx2) => !ctx2.isOutOfRange,
+        isDecrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "decrement",
+        isEmptyValue: (ctx2) => ctx2.isValueEmpty,
+        isIncrementHint: (ctx2, evt) => (evt.hint ?? ctx2.hint) === "increment",
+        isInvalidExponential: (ctx2) => ctx2.value.toString().startsWith("e")
+      },
+      activities: {
+        setupVirtualCursor(ctx2) {
+          return dom.setupVirtualCursor(ctx2);
+        },
+        preventTextSelection(ctx2) {
+          return dom.preventTextSelection(ctx2);
+        },
+        trackButtonDisabled(ctx2, _evt, { send }) {
+          const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
+          return observeAttributes(btn, ["disabled"], () => {
+            send("PRESS_UP");
+          });
+        },
+        attachWheelListener(ctx2, _evt, { send }) {
+          const input = dom.getInputEl(ctx2);
+          if (!input)
+            return;
+          function onWheel(event) {
+            const isInputFocused = dom.getDoc(ctx2).activeElement === input;
+            if (!ctx2.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(ctx2) {
+          if (isSafari())
+            return;
+          return requestPointerLock(dom.getDoc(ctx2));
+        },
+        trackMousemove(ctx2, _evt, { send }) {
+          const doc = dom.getDoc(ctx2);
+          function onMousemove(event) {
+            if (!ctx2.scrubberCursorPoint)
+              return;
+            const value = dom.getMousementValue(ctx2, 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(ctx2) {
+          if (!ctx2.focusInputOnChange)
+            return;
+          const input = dom.getInputEl(ctx2);
+          raf(() => input?.focus());
+        },
+        increment(ctx2, evt) {
+          ctx2.value = utils.increment(ctx2, evt.step);
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = utils.decrement(ctx2, evt.step);
+        },
+        clampValue(ctx2) {
+          ctx2.value = utils.clamp(ctx2);
+        },
+        roundValue(ctx2) {
+          if (ctx2.value !== "") {
+            ctx2.value = utils.round(ctx2);
+          }
+        },
+        setValue(ctx2, evt) {
+          const value = evt.target?.value ?? evt.value;
+          ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+        },
+        clearValue(ctx2) {
+          ctx2.value = "";
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max.toString();
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min.toString();
+        },
+        setHint(ctx2, evt) {
+          ctx2.hint = evt.hint;
+        },
+        clearHint(ctx2) {
+          ctx2.hint = null;
+        },
+        setHintToSet(ctx2) {
+          ctx2.hint = "set";
+        },
+        invokeOnChange(ctx2) {
+          ctx2.onChange?.({
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnFocus(ctx2, evt) {
+          let srcElement = null;
+          if (evt.type === "PRESS_DOWN") {
+            srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
+          } else if (evt.type === "FOCUS") {
+            srcElement = dom.getInputEl(ctx2);
+          } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
+            srcElement = dom.getScrubberEl(ctx2);
+          }
+          ctx2.onFocus?.({
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber,
+            srcElement
+          });
+        },
+        invokeOnBlur(ctx2) {
+          ctx2.onBlur?.({
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnInvalid(ctx2) {
+          if (!ctx2.isOutOfRange)
+            return;
+          const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
+          ctx2.onInvalid?.({
+            reason,
+            value: ctx2.formattedValue,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
+        syncInputValue(ctx2) {
+          const input = dom.getInputEl(ctx2);
+          if (!input || input.value == ctx2.value)
+            return;
+          const value = utils.parse(ctx2, input.value);
+          ctx2.value = utils.sanitize(ctx2, value);
+        },
+        setCursorPoint(ctx2, evt) {
+          ctx2.scrubberCursorPoint = evt.point;
+        },
+        clearCursorPoint(ctx2) {
+          ctx2.scrubberCursorPoint = null;
+        },
+        setVirtualCursorPosition(ctx2) {
+          const cursor = dom.getCursorEl(ctx2);
+          if (!cursor || !ctx2.scrubberCursorPoint)
+            return;
+          const { x, y } = ctx2.scrubberCursorPoint;
+          cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
+        },
+        dispatchChangeEvent(ctx2) {
+          const inputEl = dom.getInputEl(ctx2);
+          dispatchInputValueEvent(inputEl, { value: ctx2.formattedValue });
+        }
+      }
+    }
+  );
+}
+
+export { machine };

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

@@ -1,6 +1,5 @@
-import { StateMachine } from '@zag-js/core';
-import { RequiredBy, DirectionProperty, CommonProperties, Context } from '@zag-js/types';
-
+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;
@@ -152,7 +151,7 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     spinOnPress?: boolean;
 };
-type UserDefinedContext = RequiredBy<PublicContext, "id">;
+export type UserDefinedContext = RequiredBy<PublicContext, "id">;
 type ComputedContext = Readonly<{
     /**
      * @computed
@@ -206,12 +205,11 @@ type ComputedContext = Readonly<{
     isRtl: boolean;
 }>;
 type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
+export type MachineContext = PublicContext & PrivateContext & ComputedContext;
+export type MachineState = {
     value: "idle" | "focused" | "spinning" | "before:spin" | "scrubbing";
     tags: "focus";
 };
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-export { MachineContext, MachineState, Send, State, UserDefinedContext };
+export type State = S.State<MachineContext, MachineState>;
+export type Send = S.Send<S.AnyEventObject>;
+export {};

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

@@ -1,17 +1,13 @@
-import { JSX } from '@zag-js/types';
-import { MachineContext } from './number-input.types.js';
-import '@zag-js/core';
-
-declare const utils: {
-    isValidNumericEvent: (ctx: MachineContext, event: JSX.KeyboardEvent) => boolean;
+import type { JSX } from "@zag-js/types";
+import type { MachineContext as Ctx } from "./number-input.types";
+export declare const utils: {
+    isValidNumericEvent: (ctx: Ctx, event: JSX.KeyboardEvent) => boolean;
     isFloatingPoint: (v: string) => boolean;
-    sanitize: (ctx: MachineContext, value: string) => string;
-    increment: (ctx: MachineContext, step?: number) => string;
-    decrement: (ctx: MachineContext, step?: number) => string;
-    clamp: (ctx: MachineContext) => string;
-    parse: (ctx: MachineContext, value: string) => string;
-    format: (ctx: MachineContext, value: string | number) => string | number;
-    round: (ctx: MachineContext) => string;
+    sanitize: (ctx: Ctx, value: string) => string;
+    increment: (ctx: Ctx, step?: number) => string;
+    decrement: (ctx: Ctx, step?: number) => string;
+    clamp: (ctx: Ctx) => string;
+    parse: (ctx: Ctx, value: string) => string;
+    format: (ctx: Ctx, value: string | number) => string | number;
+    round: (ctx: Ctx) => string;
 };
-
-export { utils };

package/dist/number-input.utils.js

@@ -1,35 +1,15 @@
-"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);
+'use strict';
 
-// src/number-input.utils.ts
-var number_input_utils_exports = {};
-__export(number_input_utils_exports, {
-  utils: () => utils
-});
-module.exports = __toCommonJS(number_input_utils_exports);
-var import_dom_event = require("@zag-js/dom-event");
-var import_number_utils = require("@zag-js/number-utils");
-var utils = {
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domEvent = require('@zag-js/dom-event');
+const numberUtils = require('@zag-js/number-utils');
+
+const utils = {
   isValidNumericEvent: (ctx, event) => {
     if (event.key == null)
       return true;
-    const isModifier = (0, import_dom_event.isModifiedEvent)(event);
+    const isModifier = domEvent.isModifiedEvent(event);
     const isSingleKey = event.key.length === 1;
     if (isModifier || !isSingleKey)
       return true;
@@ -40,15 +20,15 @@ var utils = {
     return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
   },
   increment: (ctx, step) => {
-    const value = (0, import_number_utils.increment)(ctx.value, step ?? ctx.step);
-    return (0, import_number_utils.formatDecimal)((0, import_number_utils.clamp)(value, ctx), ctx);
+    const value = numberUtils.increment(ctx.value, step ?? ctx.step);
+    return numberUtils.formatDecimal(numberUtils.clamp(value, ctx), ctx);
   },
   decrement: (ctx, step) => {
-    const value = (0, import_number_utils.decrement)(ctx.value, step ?? ctx.step);
-    return (0, import_number_utils.formatDecimal)((0, import_number_utils.clamp)(value, ctx), ctx);
+    const value = numberUtils.decrement(ctx.value, step ?? ctx.step);
+    return numberUtils.formatDecimal(numberUtils.clamp(value, ctx), ctx);
   },
   clamp: (ctx) => {
-    return (0, import_number_utils.formatDecimal)((0, import_number_utils.clamp)(ctx.value, ctx), ctx);
+    return numberUtils.formatDecimal(numberUtils.clamp(ctx.value, ctx), ctx);
   },
   parse: (ctx, value) => {
     return ctx.parse?.(value) ?? value;
@@ -58,10 +38,8 @@ var utils = {
     return ctx.format?.(_val) ?? _val;
   },
   round: (ctx) => {
-    return (0, import_number_utils.formatDecimal)(ctx.value, ctx);
+    return numberUtils.formatDecimal(ctx.value, ctx);
   }
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  utils
-});
+
+exports.utils = utils;

package/dist/number-input.utils.mjs

@@ -1,6 +1,41 @@
-import {
-  utils
-} from "./chunk-AXXDGYUW.mjs";
-export {
-  utils
+import { isModifiedEvent } from '@zag-js/dom-event';
+import { increment, formatDecimal, clamp, decrement } from '@zag-js/number-utils';
+
+const utils = {
+  isValidNumericEvent: (ctx, event) => {
+    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) => /^[0-9+\-.]$/.test(v),
+  sanitize: (ctx, value) => {
+    return value.split("").filter(ctx.validateCharacter ?? utils.isFloatingPoint).join("");
+  },
+  increment: (ctx, step) => {
+    const value = increment(ctx.value, step ?? ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
+  },
+  decrement: (ctx, step) => {
+    const value = decrement(ctx.value, step ?? ctx.step);
+    return formatDecimal(clamp(value, ctx), ctx);
+  },
+  clamp: (ctx) => {
+    return formatDecimal(clamp(ctx.value, ctx), ctx);
+  },
+  parse: (ctx, value) => {
+    return ctx.parse?.(value) ?? value;
+  },
+  format: (ctx, value) => {
+    const _val = value.toString();
+    return ctx.format?.(_val) ?? _val;
+  },
+  round: (ctx) => {
+    return formatDecimal(ctx.value, ctx);
+  }
 };
+
+export { utils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,15 +27,15 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.10.2",
-    "@zag-js/core": "0.10.2",
-    "@zag-js/dom-query": "0.10.2",
-    "@zag-js/dom-event": "0.10.2",
-    "@zag-js/form-utils": "0.10.2",
-    "@zag-js/mutation-observer": "0.10.2",
-    "@zag-js/number-utils": "0.10.2",
-    "@zag-js/utils": "0.10.2",
-    "@zag-js/types": "0.10.2"
+    "@zag-js/anatomy": "0.10.4",
+    "@zag-js/core": "0.10.4",
+    "@zag-js/dom-query": "0.10.4",
+    "@zag-js/dom-event": "0.10.4",
+    "@zag-js/form-utils": "0.10.4",
+    "@zag-js/mutation-observer": "0.10.4",
+    "@zag-js/number-utils": "0.10.4",
+    "@zag-js/utils": "0.10.4",
+    "@zag-js/types": "0.10.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -53,13 +53,8 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build-fast": "tsup src",
-    "start": "pnpm build --watch",
-    "build": "tsup src --dts",
-    "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
+    "build": "vite build -c ../../../vite.config.ts",
     "lint": "eslint src --ext .ts,.tsx",
-    "test-ci": "pnpm test --ci --runInBand",
-    "test-watch": "pnpm test --watch -u",
     "typecheck": "tsc --noEmit"
   }
 }