@zag-js/number-input 0.2.6 → 0.2.8

package/dist/chunk-MIZ4MW4C.mjs

@@ -0,0 +1,543 @@
+import {
+  dom
+} from "./chunk-EUVYGWZ6.mjs";
+import {
+  utils
+} from "./chunk-HP6F2HUY.mjs";
+import {
+  getWindow,
+  hasProp,
+  isAtMax,
+  isAtMin,
+  isObject,
+  isSafari,
+  isWithinRange,
+  supportsPointerEvent,
+  valueOf
+} from "./chunk-VCZUWKJT.mjs";
+
+// src/number-input.machine.ts
+import { choose, createMachine, guards } from "@zag-js/core";
+
+// ../../utilities/core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+
+// ../../utilities/core/src/object.ts
+function compact(obj) {
+  if (obj === void 0)
+    return obj;
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
+  );
+}
+
+// ../../utilities/dom/src/listener.ts
+var isRef = (v) => hasProp(v, "current");
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+
+// ../../utilities/dom/src/mutation-observer.ts
+function observeAttributes(node, attributes, fn) {
+  if (!node)
+    return;
+  const attrs = Array.isArray(attributes) ? attributes : [attributes];
+  const win = node.ownerDocument.defaultView || window;
+  const obs = new win.MutationObserver((changes) => {
+    for (const change of changes) {
+      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
+        fn(change);
+      }
+    }
+  });
+  obs.observe(node, { attributes: true, attributeFilter: attrs });
+  return () => obs.disconnect();
+}
+
+// ../../utilities/dom/src/next-tick.ts
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
+
+// ../../utilities/dom/src/pointerlock.ts
+function addPointerlockChangeListener(doc, fn) {
+  return addDomEvent(doc, "pointerlockchange", fn, false);
+}
+function addPointerlockErrorListener(doc, fn) {
+  doc.addEventListener("pointerlockerror", fn, false);
+  return function cleanup() {
+    doc.removeEventListener("pointerlockerror", fn, false);
+  };
+}
+function requestPointerLock(doc, handlers = {}) {
+  const { onPointerLock, onPointerUnlock } = handlers;
+  const body = doc.body;
+  const supported = "pointerLockElement" in doc || "mozPointerLockElement" in doc;
+  const locked = !!doc.pointerLockElement;
+  function onPointerChange() {
+    if (locked)
+      onPointerLock == null ? void 0 : onPointerLock();
+    else
+      onPointerUnlock == null ? void 0 : onPointerUnlock();
+  }
+  function onPointerError(event) {
+    if (locked)
+      onPointerUnlock == null ? void 0 : onPointerUnlock();
+    console.error("PointerLock error occured:", event);
+    exit();
+  }
+  function exit() {
+    doc.exitPointerLock();
+  }
+  if (!supported)
+    return;
+  try {
+    body.requestPointerLock();
+  } catch {
+  }
+  const cleanup = callAll(
+    addPointerlockChangeListener(doc, onPointerChange),
+    addPointerlockErrorListener(doc, onPointerError)
+  );
+  return function dispose() {
+    if (!supported)
+      return;
+    cleanup();
+    exit();
+  };
+}
+
+// ../../utilities/form-utils/src/input-event.ts
+function getDescriptor(el, options) {
+  var _a;
+  const { type, property = "value" } = options;
+  const proto = getWindow(el)[type].prototype;
+  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
+
+// src/number-input.machine.ts
+var { not, and } = guards;
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "number-input",
+      initial: "unknown",
+      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) => {
+          var _a, _b;
+          return (_b = (_a = ctx2.translations).valueText) == null ? void 0 : _b.call(_a, ctx2.value);
+        },
+        formattedValue: (ctx2) => {
+          var _a, _b;
+          return (_b = (_a = ctx2.format) == null ? void 0 : _a.call(ctx2, ctx2.value).toString()) != null ? _b : ctx2.value;
+        }
+      },
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"],
+        isOutOfRange: ["invokeOnInvalid"],
+        scrubberCursorPoint: ["setVirtualCursorPosition"]
+      },
+      on: {
+        SET_VALUE: [
+          {
+            guard: "clampOnBlur",
+            actions: ["setValue", "clampValue", "setHintToSet"]
+          },
+          {
+            actions: ["setValue", "setHintToSet"]
+          }
+        ],
+        CLEAR_VALUE: {
+          actions: ["clearValue"]
+        },
+        INCREMENT: {
+          actions: ["increment"]
+        },
+        DECREMENT: {
+          actions: ["decrement"]
+        }
+      },
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: "idle",
+              actions: "syncInputValue"
+            }
+          }
+        },
+        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) => {
+          var _a;
+          return ((_a = evt.hint) != null ? _a : ctx2.hint) === "decrement";
+        },
+        isEmptyValue: (ctx2) => ctx2.isValueEmpty,
+        isIncrementHint: (ctx2, evt) => {
+          var _a;
+          return ((_a = evt.hint) != null ? _a : 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() || !supportsPointerEvent())
+            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 == null ? void 0 : 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) {
+          var _a, _b;
+          const value = (_b = (_a = evt.target) == null ? void 0 : _a.value) != null ? _b : 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) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, {
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnFocus(ctx2, evt) {
+          var _a;
+          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);
+          }
+          (_a = ctx2.onFocus) == null ? void 0 : _a.call(ctx2, {
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber,
+            srcElement
+          });
+        },
+        invokeOnBlur(ctx2) {
+          var _a;
+          (_a = ctx2.onBlur) == null ? void 0 : _a.call(ctx2, {
+            value: ctx2.value,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        invokeOnInvalid(ctx2) {
+          var _a;
+          if (!ctx2.isOutOfRange)
+            return;
+          const reason = ctx2.valueAsNumber > ctx2.max ? "rangeOverflow" : "rangeUnderflow";
+          (_a = ctx2.onInvalid) == null ? void 0 : _a.call(ctx2, {
+            reason,
+            value: ctx2.formattedValue,
+            valueAsNumber: ctx2.valueAsNumber
+          });
+        },
+        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) {
+          dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
+        }
+      }
+    }
+  );
+}
+
+export {
+  machine
+};

package/dist/chunk-VCZUWKJT.mjs

@@ -0,0 +1,151 @@
+// ../../utilities/dom/src/platform.ts
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var vn = (v) => isDom() && v.test(navigator.vendor);
+var isSafari = () => isApple() && vn(/apple/i);
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+function defineDomHelpers(helpers) {
+  const dom = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom,
+    ...helpers
+  };
+}
+
+// ../../utilities/core/src/guard.ts
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../../utilities/dom/src/event.ts
+function getNativeEvent(e) {
+  var _a;
+  return (_a = e.nativeEvent) != null ? _a : e;
+}
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
+var isLeftClick = (v) => v.button === 0;
+var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+
+// ../../utilities/number/src/number.ts
+function wrap(num, max) {
+  return (num % max + max) % max;
+}
+function roundToDevicePixel(num) {
+  if (typeof window === "undefined")
+    return Math.round(num);
+  const dp = window.devicePixelRatio;
+  return Math.floor(num * dp + 0.5) / dp;
+}
+function clamp(v, o) {
+  return Math.min(Math.max(valueOf(v), o.min), o.max);
+}
+function countDecimals(value) {
+  if (!Number.isFinite(value))
+    return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+}
+var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
+var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
+function valueOf(v) {
+  if (typeof v === "number")
+    return v;
+  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
+  return !Number.isNaN(num) ? num : 0;
+}
+function formatDecimal(v, o) {
+  return new Intl.NumberFormat("en-US", {
+    useGrouping: false,
+    style: "decimal",
+    minimumFractionDigits: o.minFractionDigits,
+    maximumFractionDigits: o.maxFractionDigits
+  }).format(valueOf(v));
+}
+function isAtMax(v, o) {
+  const val = valueOf(v);
+  return val >= o.max;
+}
+function isAtMin(v, o) {
+  const val = valueOf(v);
+  return val <= o.min;
+}
+function isWithinRange(v, o) {
+  const val = valueOf(v);
+  return val >= o.min && val <= o.max;
+}
+function decimalOperation(a, op, b) {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+}
+
+export {
+  isObject,
+  hasProp,
+  isSafari,
+  getWindow,
+  defineDomHelpers,
+  getNativeEvent,
+  supportsPointerEvent,
+  isTouchEvent,
+  isLeftClick,
+  isModifiedEvent,
+  wrap,
+  roundToDevicePixel,
+  clamp,
+  increment,
+  decrement,
+  valueOf,
+  formatDecimal,
+  isAtMax,
+  isAtMin,
+  isWithinRange
+};

package/dist/chunk-XHRILSH3.mjs

@@ -0,0 +1,17 @@
+// src/number-input.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("numberInput").parts(
+  "root",
+  "label",
+  "input",
+  "control",
+  "incrementTrigger",
+  "decrementTrigger",
+  "scrubber"
+);
+var parts = anatomy.build();
+
+export {
+  anatomy,
+  parts
+};