@zag-js/number-input 0.2.12 → 0.2.14

package/dist/{chunk-4A67X5BX.mjs → chunk-3O7PA63J.mjs}

@@ -1,146 +1,18 @@
 import {
   dom
-} from "./chunk-GQN3V2LU.mjs";
+} from "./chunk-QYY4CWRS.mjs";
 import {
   utils
-} from "./chunk-6CS5P7OC.mjs";
-import {
-  getWindow,
-  hasProp,
-  isAtMax,
-  isAtMin,
-  isObject,
-  isSafari,
-  isWithinRange,
-  supportsPointerEvent,
-  valueOf
-} from "./chunk-EPCXXTFL.mjs";
+} from "./chunk-AXXDGYUW.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 ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    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?.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/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);
-}
-
-// src/number-input.machine.ts
+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 { isAtMax, isAtMin, isWithinRange, valueOf } from "@zag-js/number-utils";
+import { callAll, compact } from "@zag-js/utils";
 var { not, and } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
@@ -356,7 +228,9 @@ function machine(userContext) {
         },
         trackButtonDisabled(ctx2, _evt, { send }) {
           const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
-          return observeAttributes(btn, "disabled", () => send("PRESS_UP"));
+          return observeAttributes(btn, ["disabled"], () => {
+            send("PRESS_UP");
+          });
         },
         attachWheelListener(ctx2, _evt, { send }) {
           const input = dom.getInputEl(ctx2);
@@ -377,7 +251,7 @@ function machine(userContext) {
           return addDomEvent(input, "wheel", onWheel, { passive: false });
         },
         activatePointerLock(ctx2) {
-          if (isSafari() || !supportsPointerEvent())
+          if (isSafari())
             return;
           return requestPointerLock(dom.getDoc(ctx2));
         },
@@ -484,6 +358,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)

package/dist/{chunk-6CS5P7OC.mjs → chunk-AXXDGYUW.mjs}

@@ -1,12 +1,6 @@
-import {
-  clamp,
-  decrement,
-  formatDecimal,
-  increment,
-  isModifiedEvent
-} from "./chunk-EPCXXTFL.mjs";
-
 // src/number-input.utils.ts
+import { isModifiedEvent } from "@zag-js/dom-event";
+import { clamp, decrement, formatDecimal, increment } from "@zag-js/number-utils";
 var utils = {
   isValidNumericEvent: (ctx, event) => {
     if (event.key == null)

package/dist/{chunk-4ASBTBA5.mjs → chunk-DYFCS7PF.mjs}

@@ -3,51 +3,15 @@ import {
 } from "./chunk-XHRILSH3.mjs";
 import {
   dom
-} from "./chunk-GQN3V2LU.mjs";
+} from "./chunk-QYY4CWRS.mjs";
 import {
   utils
-} from "./chunk-6CS5P7OC.mjs";
-import {
-  getNativeEvent,
-  isLeftClick,
-  isTouchEvent,
-  roundToDevicePixel
-} from "./chunk-EPCXXTFL.mjs";
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-var ariaAttr = (guard) => {
-  return guard ? "true" : void 0;
-};
-
-// ../../utilities/dom/src/get-event-point.ts
-var fallback = {
-  pageX: 0,
-  pageY: 0,
-  clientX: 0,
-  clientY: 0
-};
-function getEventPoint(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
-  return { x: point[`${type}X`], y: point[`${type}Y`] };
-}
-
-// ../../utilities/dom/src/keyboard-event.ts
-var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
-var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
-function getEventStep(event) {
-  if (event.ctrlKey || event.metaKey) {
-    return 0.1;
-  } else {
-    const isPageKey = PAGE_KEYS.has(event.key);
-    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
-    return isSkipKey ? 10 : 1;
-  }
-}
+} from "./chunk-AXXDGYUW.mjs";
 
 // src/number-input.connect.ts
+import { getEventStep, getNativeEvent, isLeftClick } from "@zag-js/dom-event";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+import { roundToDevicePixel } from "@zag-js/number-utils";
 function connect(state, send, normalize) {
   const isFocused = state.hasTag("focus");
   const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
@@ -57,32 +21,71 @@ function connect(state, send, normalize) {
   const isDecrementDisabled = isDisabled || !state.context.canDecrement;
   const translations = state.context.translations;
   return {
+    /**
+     * Whether the input is focused.
+     */
     isFocused,
+    /**
+     * Whether the input is invalid.
+     */
     isInvalid,
+    /**
+     * Whether the input value is empty.
+     */
     isValueEmpty,
+    /**
+     * The formatted value of the input.
+     */
     value: state.context.formattedValue,
+    /**
+     * The value of the input as a number.
+     */
     valueAsNumber: state.context.valueAsNumber,
+    /**
+     * Function to set the value of the input.
+     */
     setValue(value) {
       send({ type: "SET_VALUE", value: value.toString() });
     },
+    /**
+     * Function to clear the value of the input.
+     */
     clearValue() {
       send("CLEAR_VALUE");
     },
+    /**
+     * Function to increment the value of the input by the step.
+     */
     increment() {
       send("INCREMENT");
     },
+    /**
+     * Function to decrement the value of the input by the step.
+     */
     decrement() {
       send("DECREMENT");
     },
+    /**
+     * Function to set the value of the input to the max.
+     */
     setToMax() {
       send({ type: "SET_VALUE", value: state.context.max });
     },
+    /**
+     * Function to set the value of the input to the min.
+     */
     setToMin() {
       send({ type: "SET_VALUE", value: state.context.min });
     },
+    /**
+     * Function to focus the input.
+     */
     focus() {
       dom.getInputEl(state.context)?.focus();
     },
+    /**
+     * Function to blur the input.
+     */
     blur() {
       dom.getInputEl(state.context)?.blur();
     },
@@ -115,7 +118,7 @@ function connect(state, send, normalize) {
       defaultValue: state.context.formattedValue,
       pattern: state.context.pattern,
       inputMode: state.context.inputMode,
-      "aria-invalid": isInvalid || void 0,
+      "aria-invalid": ariaAttr(isInvalid),
       "data-invalid": dataAttr(isInvalid),
       disabled: isDisabled,
       "data-disabled": dataAttr(isDisabled),
@@ -226,7 +229,7 @@ function connect(state, send, normalize) {
           return;
         const evt = getNativeEvent(event);
         event.preventDefault();
-        const point = getEventPoint(evt);
+        const point = { x: evt.clientX, y: evt.clientY };
         point.x = point.x - roundToDevicePixel(7.5);
         point.y = point.y - roundToDevicePixel(7.5);
         send({ type: "PRESS_DOWN_SCRUBBER", point });

package/dist/{chunk-GQN3V2LU.mjs → chunk-QYY4CWRS.mjs}

@@ -1,16 +1,7 @@
-import {
-  defineDomHelpers,
-  isSafari,
-  roundToDevicePixel,
-  supportsPointerEvent,
-  wrap
-} from "./chunk-EPCXXTFL.mjs";
-
-// ../../utilities/dom/src/constants.ts
-var MAX_Z_INDEX = 2147483647;
-
 // src/number-input.dom.ts
-var dom = defineDomHelpers({
+import { createScope, isSafari, MAX_Z_INDEX } from "@zag-js/dom-query";
+import { roundToDevicePixel, wrap } from "@zag-js/number-utils";
+var dom = 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`,
@@ -34,7 +25,7 @@ var dom = defineDomHelpers({
     return btnEl;
   },
   setupVirtualCursor(ctx) {
-    if (isSafari() || !supportsPointerEvent())
+    if (isSafari())
       return;
     dom.createVirtualCursor(ctx);
     return () => {