@zag-js/number-input 0.10.4 → 0.11.0

package/dist/number-input.machine.mjs

@@ -1,386 +0,0 @@
-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.utils.d.ts

@@ -1,13 +0,0 @@
-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: 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;
-};

package/dist/number-input.utils.js

@@ -1,45 +0,0 @@
-'use strict';
-
-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 = domEvent.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 = numberUtils.increment(ctx.value, step ?? ctx.step);
-    return numberUtils.formatDecimal(numberUtils.clamp(value, ctx), ctx);
-  },
-  decrement: (ctx, step) => {
-    const value = numberUtils.decrement(ctx.value, step ?? ctx.step);
-    return numberUtils.formatDecimal(numberUtils.clamp(value, ctx), ctx);
-  },
-  clamp: (ctx) => {
-    return numberUtils.formatDecimal(numberUtils.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 numberUtils.formatDecimal(ctx.value, ctx);
-  }
-};
-
-exports.utils = utils;

package/dist/number-input.utils.mjs

@@ -1,41 +0,0 @@
-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 };