@zag-js/number-input 0.10.2 → 0.10.4

package/dist/number-input.machine.js

@@ -1,179 +1,21 @@
-"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.machine.ts
-var number_input_machine_exports = {};
-__export(number_input_machine_exports, {
-  machine: () => machine
-});
-module.exports = __toCommonJS(number_input_machine_exports);
-var import_core = require("@zag-js/core");
-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");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/number-input.dom.ts
-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`,
-  getDecrementTriggerId: (ctx) => ctx.ids?.decrementTrigger ?? `number-input:${ctx.id}:dec`,
-  getScrubberId: (ctx) => ctx.ids?.scrubber ?? `number-input:${ctx.id}:scrubber`,
-  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `number-input:${ctx.id}:label`,
-  getInputEl: (ctx) => dom.getById(ctx, dom.getInputId(ctx)),
-  getIncrementTriggerEl: (ctx) => dom.getById(ctx, dom.getIncrementTriggerId(ctx)),
-  getDecrementTriggerEl: (ctx) => dom.getById(ctx, dom.getDecrementTriggerId(ctx)),
-  getScrubberEl: (ctx) => dom.getById(ctx, dom.getScrubberId(ctx)),
-  getCursorEl: (ctx) => dom.getDoc(ctx).getElementById(dom.getCursorId(ctx)),
-  getPressedTriggerEl: (ctx, hint = ctx.hint) => {
-    let btnEl = null;
-    if (hint === "increment") {
-      btnEl = dom.getIncrementTriggerEl(ctx);
-    }
-    if (hint === "decrement") {
-      btnEl = dom.getDecrementTriggerEl(ctx);
-    }
-    return btnEl;
-  },
-  setupVirtualCursor(ctx) {
-    if ((0, import_dom_query.isSafari)())
-      return;
-    dom.createVirtualCursor(ctx);
-    return () => {
-      dom.getCursorEl(ctx)?.remove();
-    };
-  },
-  preventTextSelection(ctx) {
-    const doc = dom.getDoc(ctx);
-    const html = doc.documentElement;
-    const body = doc.body;
-    body.style.pointerEvents = "none";
-    html.style.userSelect = "none";
-    html.style.cursor = "ew-resize";
-    return () => {
-      body.style.pointerEvents = "";
-      html.style.userSelect = "";
-      html.style.cursor = "";
-      if (!html.style.length) {
-        html.removeAttribute("style");
-      }
-      if (!body.style.length) {
-        body.removeAttribute("style");
-      }
-    };
-  },
-  getMousementValue(ctx, event) {
-    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";
-    if (ctx.isRtl && hint === "decrement")
-      hint = "increment";
-    const point = {
-      x: ctx.scrubberCursorPoint.x + x,
-      y: ctx.scrubberCursorPoint.y + y
-    };
-    const win = dom.getWin(ctx);
-    const width = win.innerWidth;
-    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) {
-    const doc = dom.getDoc(ctx);
-    const el = doc.createElement("div");
-    el.className = "scrubber--cursor";
-    el.id = dom.getCursorId(ctx);
-    Object.assign(el.style, {
-      width: "15px",
-      height: "15px",
-      position: "fixed",
-      pointerEvents: "none",
-      left: "0px",
-      top: "0px",
-      zIndex: import_dom_query.MAX_Z_INDEX,
-      transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
-      willChange: "transform"
-    });
-    el.innerHTML = `
-        <svg width="46" height="15" style="left: -15.5px; position: absolute; top: 0; filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1px 1.1px);">
-          <g transform="translate(2 3)">
-            <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z" style="stroke-width: 2px; stroke: white;"></path>
-            <path fill-rule="evenodd" d="M 15 4.5L 15 2L 11.5 5.5L 15 9L 15 6.5L 31 6.5L 31 9L 34.5 5.5L 31 2L 31 4.5Z"></path>
-          </g>
-        </svg>`;
-    doc.body.appendChild(el);
-  }
-});
-
-// 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 = (0, import_dom_event.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 = (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 = (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 (0, import_number_utils2.formatDecimal)((0, import_number_utils2.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 (0, import_number_utils2.formatDecimal)(ctx.value, ctx);
-  }
-};
+const core = require('@zag-js/core');
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
+const formUtils = require('@zag-js/form-utils');
+const mutationObserver = require('@zag-js/mutation-observer');
+const numberUtils = require('@zag-js/number-utils');
+const utils = require('@zag-js/utils');
+const numberInput_dom = require('./number-input.dom.js');
+const numberInput_utils = require('./number-input.utils.js');
 
-// src/number-input.machine.ts
-var { not, and } = import_core.guards;
+const { not, and } = core.guards;
 function machine(userContext) {
-  const ctx = (0, import_utils.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "number-input",
       initial: "idle",
@@ -201,10 +43,10 @@ function machine(userContext) {
       },
       computed: {
         isRtl: (ctx2) => ctx2.dir === "rtl",
-        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),
+        valueAsNumber: (ctx2) => numberUtils.valueOf(ctx2.value),
+        isAtMin: (ctx2) => numberUtils.isAtMin(ctx2.value, ctx2),
+        isAtMax: (ctx2) => numberUtils.isAtMax(ctx2.value, ctx2),
+        isOutOfRange: (ctx2) => !numberUtils.isWithinRange(ctx2.value, ctx2),
         isValueEmpty: (ctx2) => ctx2.value === "",
         canIncrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMax,
         canDecrement: (ctx2) => ctx2.allowOverflow || !ctx2.isAtMin,
@@ -301,7 +143,7 @@ function machine(userContext) {
         "before:spin": {
           tags: "focus",
           activities: "trackButtonDisabled",
-          entry: (0, import_core.choose)([
+          entry: core.choose([
             { guard: "isIncrementHint", actions: "increment" },
             { guard: "isDecrementHint", actions: "decrement" }
           ]),
@@ -378,23 +220,23 @@ function machine(userContext) {
       },
       activities: {
         setupVirtualCursor(ctx2) {
-          return dom.setupVirtualCursor(ctx2);
+          return numberInput_dom.dom.setupVirtualCursor(ctx2);
         },
         preventTextSelection(ctx2) {
-          return dom.preventTextSelection(ctx2);
+          return numberInput_dom.dom.preventTextSelection(ctx2);
         },
         trackButtonDisabled(ctx2, _evt, { send }) {
-          const btn = dom.getPressedTriggerEl(ctx2, ctx2.hint);
-          return (0, import_mutation_observer.observeAttributes)(btn, ["disabled"], () => {
+          const btn = numberInput_dom.dom.getPressedTriggerEl(ctx2, ctx2.hint);
+          return mutationObserver.observeAttributes(btn, ["disabled"], () => {
             send("PRESS_UP");
           });
         },
         attachWheelListener(ctx2, _evt, { send }) {
-          const input = dom.getInputEl(ctx2);
+          const input = numberInput_dom.dom.getInputEl(ctx2);
           if (!input)
             return;
           function onWheel(event) {
-            const isInputFocused = dom.getDoc(ctx2).activeElement === input;
+            const isInputFocused = numberInput_dom.dom.getDoc(ctx2).activeElement === input;
             if (!ctx2.allowMouseWheel || !isInputFocused)
               return;
             event.preventDefault();
@@ -405,19 +247,19 @@ function machine(userContext) {
               send("DECREMENT");
             }
           }
-          return (0, import_dom_event2.addDomEvent)(input, "wheel", onWheel, { passive: false });
+          return domEvent.addDomEvent(input, "wheel", onWheel, { passive: false });
         },
         activatePointerLock(ctx2) {
-          if ((0, import_dom_query2.isSafari)())
+          if (domQuery.isSafari())
             return;
-          return (0, import_dom_event2.requestPointerLock)(dom.getDoc(ctx2));
+          return domEvent.requestPointerLock(numberInput_dom.dom.getDoc(ctx2));
         },
         trackMousemove(ctx2, _evt, { send }) {
-          const doc = dom.getDoc(ctx2);
+          const doc = numberInput_dom.dom.getDoc(ctx2);
           function onMousemove(event) {
             if (!ctx2.scrubberCursorPoint)
               return;
-            const value = dom.getMousementValue(ctx2, event);
+            const value = numberInput_dom.dom.getMousementValue(ctx2, event);
             if (!value.hint)
               return;
             send({
@@ -429,9 +271,9 @@ function machine(userContext) {
           function onMouseup() {
             send("POINTER_UP_SCRUBBER");
           }
-          return (0, import_utils.callAll)(
-            (0, import_dom_event2.addDomEvent)(doc, "mousemove", onMousemove, false),
-            (0, import_dom_event2.addDomEvent)(doc, "mouseup", onMouseup, false)
+          return utils.callAll(
+            domEvent.addDomEvent(doc, "mousemove", onMousemove, false),
+            domEvent.addDomEvent(doc, "mouseup", onMouseup, false)
           );
         }
       },
@@ -439,26 +281,26 @@ function machine(userContext) {
         focusInput(ctx2) {
           if (!ctx2.focusInputOnChange)
             return;
-          const input = dom.getInputEl(ctx2);
-          (0, import_dom_query2.raf)(() => input?.focus());
+          const input = numberInput_dom.dom.getInputEl(ctx2);
+          domQuery.raf(() => input?.focus());
         },
         increment(ctx2, evt) {
-          ctx2.value = utils.increment(ctx2, evt.step);
+          ctx2.value = numberInput_utils.utils.increment(ctx2, evt.step);
         },
         decrement(ctx2, evt) {
-          ctx2.value = utils.decrement(ctx2, evt.step);
+          ctx2.value = numberInput_utils.utils.decrement(ctx2, evt.step);
         },
         clampValue(ctx2) {
-          ctx2.value = utils.clamp(ctx2);
+          ctx2.value = numberInput_utils.utils.clamp(ctx2);
         },
         roundValue(ctx2) {
           if (ctx2.value !== "") {
-            ctx2.value = utils.round(ctx2);
+            ctx2.value = numberInput_utils.utils.round(ctx2);
           }
         },
         setValue(ctx2, evt) {
           const value = evt.target?.value ?? evt.value;
-          ctx2.value = utils.sanitize(ctx2, utils.parse(ctx2, value.toString()));
+          ctx2.value = numberInput_utils.utils.sanitize(ctx2, numberInput_utils.utils.parse(ctx2, value.toString()));
         },
         clearValue(ctx2) {
           ctx2.value = "";
@@ -487,11 +329,11 @@ function machine(userContext) {
         invokeOnFocus(ctx2, evt) {
           let srcElement = null;
           if (evt.type === "PRESS_DOWN") {
-            srcElement = dom.getPressedTriggerEl(ctx2, evt.hint);
+            srcElement = numberInput_dom.dom.getPressedTriggerEl(ctx2, evt.hint);
           } else if (evt.type === "FOCUS") {
-            srcElement = dom.getInputEl(ctx2);
+            srcElement = numberInput_dom.dom.getInputEl(ctx2);
           } else if (evt.type === "PRESS_DOWN_SCRUBBER") {
-            srcElement = dom.getScrubberEl(ctx2);
+            srcElement = numberInput_dom.dom.getScrubberEl(ctx2);
           }
           ctx2.onFocus?.({
             value: ctx2.value,
@@ -517,11 +359,11 @@ function machine(userContext) {
         },
         // sync input value, in event it was set from form libraries via `ref`, `bind:this`, etc.
         syncInputValue(ctx2) {
-          const input = dom.getInputEl(ctx2);
+          const input = numberInput_dom.dom.getInputEl(ctx2);
           if (!input || input.value == ctx2.value)
             return;
-          const value = utils.parse(ctx2, input.value);
-          ctx2.value = utils.sanitize(ctx2, value);
+          const value = numberInput_utils.utils.parse(ctx2, input.value);
+          ctx2.value = numberInput_utils.utils.sanitize(ctx2, value);
         },
         setCursorPoint(ctx2, evt) {
           ctx2.scrubberCursorPoint = evt.point;
@@ -530,21 +372,19 @@ function machine(userContext) {
           ctx2.scrubberCursorPoint = null;
         },
         setVirtualCursorPosition(ctx2) {
-          const cursor = dom.getCursorEl(ctx2);
+          const cursor = numberInput_dom.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);
-          (0, import_form_utils.dispatchInputValueEvent)(inputEl, { value: ctx2.formattedValue });
+          const inputEl = numberInput_dom.dom.getInputEl(ctx2);
+          formUtils.dispatchInputValueEvent(inputEl, { value: ctx2.formattedValue });
         }
       }
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  machine
-});
+
+exports.machine = machine;