@zag-js/number-input 0.2.11 → 0.2.13

package/dist/number-input.machine.js

@@ -24,247 +24,17 @@ __export(number_input_machine_exports, {
 });
 module.exports = __toCommonJS(number_input_machine_exports);
 var import_core = require("@zag-js/core");
-
-// ../../utilities/dom/src/constants.ts
-var MAX_Z_INDEX = 2147483647;
-
-// ../../utilities/core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../../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/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/platform.ts
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return agent?.platform ?? 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?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/event.ts
-var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
-// ../../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?.addEventListener(eventName, handler, options);
-  return () => {
-    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?.();
-    else
-      onPointerUnlock?.();
-  }
-  function onPointerError(event) {
-    if (locked)
-      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/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;
-}
-
-// ../../utilities/form-utils/src/input-event.ts
-function getDescriptor(el, options) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
+var import_dom_event2 = require("@zag-js/dom-event");
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_form_utils = require("@zag-js/form-utils");
+var import_mutation_observer = require("@zag-js/mutation-observer");
+var import_number_utils3 = require("@zag-js/number-utils");
+var import_utils = require("@zag-js/utils");
 
 // src/number-input.dom.ts
-var dom = defineDomHelpers({
+var import_dom_query = require("@zag-js/dom-query");
+var import_number_utils = require("@zag-js/number-utils");
+var dom = (0, import_dom_query.createScope)({
   getRootId: (ctx) => ctx.ids?.root ?? `number-input:${ctx.id}`,
   getInputId: (ctx) => ctx.ids?.input ?? `number-input:${ctx.id}:input`,
   getIncrementTriggerId: (ctx) => ctx.ids?.incrementTrigger ?? `number-input:${ctx.id}:inc`,
@@ -288,7 +58,7 @@ var dom = defineDomHelpers({
     return btnEl;
   },
   setupVirtualCursor(ctx) {
-    if (isSafari() || !supportsPointerEvent())
+    if ((0, import_dom_query.isSafari)())
       return;
     dom.createVirtualCursor(ctx);
     return () => {
@@ -315,8 +85,8 @@ var dom = defineDomHelpers({
     };
   },
   getMousementValue(ctx, event) {
-    const x = roundToDevicePixel(event.movementX);
-    const y = roundToDevicePixel(event.movementY);
+    const x = (0, import_number_utils.roundToDevicePixel)(event.movementX);
+    const y = (0, import_number_utils.roundToDevicePixel)(event.movementY);
     let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
     if (ctx.isRtl && hint === "increment")
       hint = "decrement";
@@ -328,8 +98,8 @@ var dom = defineDomHelpers({
     };
     const win = dom.getWin(ctx);
     const width = win.innerWidth;
-    const half = roundToDevicePixel(7.5);
-    point.x = wrap(point.x + half, width) - half;
+    const half = (0, import_number_utils.roundToDevicePixel)(7.5);
+    point.x = (0, import_number_utils.wrap)(point.x + half, width) - half;
     return { hint, point };
   },
   createVirtualCursor(ctx) {
@@ -344,7 +114,7 @@ var dom = defineDomHelpers({
       pointerEvents: "none",
       left: "0px",
       top: "0px",
-      zIndex: MAX_Z_INDEX,
+      zIndex: import_dom_query.MAX_Z_INDEX,
       transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
       willChange: "transform"
     });
@@ -360,11 +130,13 @@ var dom = defineDomHelpers({
 });
 
 // src/number-input.utils.ts
+var import_dom_event = require("@zag-js/dom-event");
+var import_number_utils2 = require("@zag-js/number-utils");
 var utils = {
   isValidNumericEvent: (ctx, event) => {
     if (event.key == null)
       return true;
-    const isModifier = isModifiedEvent(event);
+    const isModifier = (0, import_dom_event.isModifiedEvent)(event);
     const isSingleKey = event.key.length === 1;
     if (isModifier || !isSingleKey)
       return true;
@@ -375,15 +147,15 @@ var utils = {
     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);
+    const value = (0, import_number_utils2.increment)(ctx.value, step ?? ctx.step);
+    return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
   },
   decrement: (ctx, step) => {
-    const value = decrement(ctx.value, step ?? ctx.step);
-    return formatDecimal(clamp(value, ctx), ctx);
+    const value = (0, import_number_utils2.decrement)(ctx.value, step ?? ctx.step);
+    return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(value, ctx), ctx);
   },
   clamp: (ctx) => {
-    return formatDecimal(clamp(ctx.value, ctx), ctx);
+    return (0, import_number_utils2.formatDecimal)((0, import_number_utils2.clamp)(ctx.value, ctx), ctx);
   },
   parse: (ctx, value) => {
     return ctx.parse?.(value) ?? value;
@@ -393,14 +165,14 @@ var utils = {
     return ctx.format?.(_val) ?? _val;
   },
   round: (ctx) => {
-    return formatDecimal(ctx.value, ctx);
+    return (0, import_number_utils2.formatDecimal)(ctx.value, ctx);
   }
 };
 
 // src/number-input.machine.ts
 var { not, and } = import_core.guards;
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "number-input",
@@ -429,10 +201,10 @@ function machine(userContext) {
       },
       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),
+        valueAsNumber: (ctx2) => (0, import_number_utils3.valueOf)(ctx2.value),
+        isAtMin: (ctx2) => (0, import_number_utils3.isAtMin)(ctx2.value, ctx2),
+        isAtMax: (ctx2) => (0, import_number_utils3.isAtMax)(ctx2.value, ctx2),
+        isOutOfRange: (ctx2) => !(0, import_number_utils3.isWithinRange)(ctx2.value, ctx2),
         isValueEmpty: (ctx2) => ctx2.value === "",
         canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
         canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
@@ -613,7 +385,9 @@ function machine(userContext) {
         },
         trackButtonDisabled(ctx2, _evt, { send }) {
           const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
-          return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
+          return (0, import_mutation_observer.observeAttributes)(btn, ["disabled"], () => {
+            send("PRESS_UP");
+          });
         },
         attachWheelListener(ctx2, _evt, { send }) {
           const input = dom.getInputEl(ctx2);
@@ -631,12 +405,12 @@ function machine(userContext) {
               send("DECREMENT");
             }
           }
-          return addDomEvent(input, "wheel", onWheel, { passive: false });
+          return (0, import_dom_event2.addDomEvent)(input, "wheel", onWheel, { passive: false });
         },
         activatePointerLock(ctx2) {
-          if (isSafari() || !supportsPointerEvent())
+          if ((0, import_dom_query2.isSafari)())
             return;
-          return requestPointerLock(dom.getDoc(ctx2));
+          return (0, import_dom_event2.requestPointerLock)(dom.getDoc(ctx2));
         },
         trackMousemove(ctx2, _evt, { send }) {
           const doc = dom.getDoc(ctx2);
@@ -655,9 +429,9 @@ function machine(userContext) {
           function onMouseup() {
             send("POINTER_UP_SCRUBBER");
           }
-          return callAll(
-            addDomEvent(doc, "mousemove", onMousemove, false),
-            addDomEvent(doc, "mouseup", onMouseup, false)
+          return (0, import_utils.callAll)(
+            (0, import_dom_event2.addDomEvent)(doc, "mousemove", onMousemove, false),
+            (0, import_dom_event2.addDomEvent)(doc, "mouseup", onMouseup, false)
           );
         }
       },
@@ -666,7 +440,7 @@ function machine(userContext) {
           if (!ctx2.focusInputOnChange)
             return;
           const input = dom.getInputEl(ctx2);
-          raf(() => input?.focus());
+          (0, import_dom_query2.raf)(() => input?.focus());
         },
         increment(ctx2, evt) {
           ctx2.value = utils.increment(ctx2, evt.step);
@@ -741,6 +515,7 @@ function machine(userContext) {
             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)
@@ -762,7 +537,7 @@ function machine(userContext) {
           cursor.style.transform = `translate3d(${x}px, ${y}px, 0px)`;
         },
         dispatchChangeEvent(ctx2) {
-          dispatchInputValueEvent(dom.getInputEl(ctx2), ctx2.formattedValue);
+          (0, import_form_utils.dispatchInputValueEvent)(dom.getInputEl(ctx2), ctx2.formattedValue);
         }
       }
     }

package/dist/number-input.machine.mjs

@@ -1,9 +1,8 @@
 import {
   machine
-} from "./chunk-4A67X5BX.mjs";
-import "./chunk-GQN3V2LU.mjs";
-import "./chunk-6CS5P7OC.mjs";
-import "./chunk-EPCXXTFL.mjs";
+} from "./chunk-3O7PA63J.mjs";
+import "./chunk-QYY4CWRS.mjs";
+import "./chunk-AXXDGYUW.mjs";
 export {
   machine
 };

package/dist/number-input.utils.js

@@ -23,58 +23,13 @@ __export(number_input_utils_exports, {
   utils: () => utils
 });
 module.exports = __toCommonJS(number_input_utils_exports);
-
-// ../../utilities/dom/src/event.ts
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
-// ../../utilities/number/src/number.ts
-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 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;
-}
-
-// src/number-input.utils.ts
+var import_dom_event = require("@zag-js/dom-event");
+var import_number_utils = require("@zag-js/number-utils");
 var utils = {
   isValidNumericEvent: (ctx, event) => {
     if (event.key == null)
       return true;
-    const isModifier = isModifiedEvent(event);
+    const isModifier = (0, import_dom_event.isModifiedEvent)(event);
     const isSingleKey = event.key.length === 1;
     if (isModifier || !isSingleKey)
       return true;
@@ -85,15 +40,15 @@ var utils = {
     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);
+    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);
   },
   decrement: (ctx, step) => {
-    const value = decrement(ctx.value, step ?? ctx.step);
-    return formatDecimal(clamp(value, ctx), ctx);
+    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);
   },
   clamp: (ctx) => {
-    return formatDecimal(clamp(ctx.value, ctx), ctx);
+    return (0, import_number_utils.formatDecimal)((0, import_number_utils.clamp)(ctx.value, ctx), ctx);
   },
   parse: (ctx, value) => {
     return ctx.parse?.(value) ?? value;
@@ -103,7 +58,7 @@ var utils = {
     return ctx.format?.(_val) ?? _val;
   },
   round: (ctx) => {
-    return formatDecimal(ctx.value, ctx);
+    return (0, import_number_utils.formatDecimal)(ctx.value, ctx);
   }
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/number-input.utils.mjs

@@ -1,7 +1,6 @@
 import {
   utils
-} from "./chunk-6CS5P7OC.mjs";
-import "./chunk-EPCXXTFL.mjs";
+} from "./chunk-AXXDGYUW.mjs";
 export {
   utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/number-input",
-  "version": "0.2.11",
+  "version": "0.2.13",
   "description": "Core logic for the number-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,15 +27,17 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/core": "0.2.8",
-    "@zag-js/types": "0.3.4"
+    "@zag-js/core": "0.2.10",
+    "@zag-js/dom-query": "0.1.3",
+    "@zag-js/dom-event": "0.0.1",
+    "@zag-js/form-utils": "0.2.5",
+    "@zag-js/mutation-observer": "0.0.1",
+    "@zag-js/utils": "0.3.3",
+    "@zag-js/types": "0.3.4",
+    "@zag-js/number-utils": "0.2.3"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/form-utils": "0.2.4",
-    "@zag-js/number-utils": "0.2.3",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",