@zag-js/number-input 0.2.5 → 0.2.7

package/dist/number-input.dom.d.ts

@@ -0,0 +1,51 @@
+import { MachineContext } from './number-input.types.js';
+import '@zag-js/core';
+import '@zag-js/types';
+
+declare const dom: {
+    getRootNode: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }) => HTMLElement | null;
+    getById: <T = HTMLElement>(ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, id: string) => T | null;
+    createEmitter: (ctx: {
+        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    }, target: HTMLElement) => (evt: string, detail: Record<string, any>, options?: EventInit | undefined) => void;
+    createListener: (target: HTMLElement) => <T_1 = any>(evt: string, handler: (e: CustomEvent<T_1>) => void) => () => void;
+} & {
+    getRootId: (ctx: MachineContext) => string;
+    getInputId: (ctx: MachineContext) => string;
+    getIncrementTriggerId: (ctx: MachineContext) => string;
+    getDecrementTriggerId: (ctx: MachineContext) => string;
+    getScrubberId: (ctx: MachineContext) => string;
+    getCursorId: (ctx: MachineContext) => string;
+    getLabelId: (ctx: MachineContext) => string;
+    getInputEl: (ctx: MachineContext) => HTMLInputElement | null;
+    getIncrementTriggerEl: (ctx: MachineContext) => HTMLButtonElement | null;
+    getDecrementTriggerEl: (ctx: MachineContext) => HTMLButtonElement | null;
+    getScrubberEl: (ctx: MachineContext) => HTMLElement | null;
+    getCursorEl: (ctx: MachineContext) => HTMLElement | null;
+    getPressedTriggerEl: (ctx: MachineContext, hint?: "set" | "increment" | "decrement" | null) => HTMLButtonElement | null;
+    setupVirtualCursor(ctx: MachineContext): (() => void) | undefined;
+    preventTextSelection(ctx: MachineContext): () => void;
+    getMousementValue(ctx: MachineContext, event: MouseEvent): {
+        hint: string | null;
+        point: {
+            x: number;
+            y: number;
+        };
+    };
+    createVirtualCursor(ctx: MachineContext): void;
+};
+
+export { dom };

package/dist/number-input.dom.js

@@ -0,0 +1,226 @@
+"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);
+
+// src/number-input.dom.ts
+var number_input_dom_exports = {};
+__export(number_input_dom_exports, {
+  dom: () => dom
+});
+module.exports = __toCommonJS(number_input_dom_exports);
+
+// ../../utilities/dom/src/constants.ts
+var MAX_Z_INDEX = 2147483647;
+
+// ../../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 defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
+    createEmitter: (ctx, target) => {
+      const win = dom2.getWin(ctx);
+      return function emit(evt, detail, options) {
+        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
+        const eventName = `zag:${evt}`;
+        const init = { bubbles, cancelable, composed, detail };
+        const event = new win.CustomEvent(eventName, init);
+        target.dispatchEvent(event);
+      };
+    },
+    createListener: (target) => {
+      return function listen(evt, handler) {
+        const eventName = `zag:${evt}`;
+        const listener = (e) => handler(e);
+        target.addEventListener(eventName, listener);
+        return () => target.removeEventListener(eventName, listener);
+      };
+    }
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// ../../utilities/dom/src/event.ts
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+
+// ../../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;
+}
+
+// src/number-input.dom.ts
+var dom = defineDomHelpers({
+  getRootId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `number-input:${ctx.id}`;
+  },
+  getInputId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.input) != null ? _b : `number-input:${ctx.id}:input`;
+  },
+  getIncrementTriggerId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.incrementTrigger) != null ? _b : `number-input:${ctx.id}:inc`;
+  },
+  getDecrementTriggerId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.decrementTrigger) != null ? _b : `number-input:${ctx.id}:dec`;
+  },
+  getScrubberId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.scrubber) != null ? _b : `number-input:${ctx.id}:scrubber`;
+  },
+  getCursorId: (ctx) => `number-input:${ctx.id}:cursor`,
+  getLabelId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `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 (isSafari() || !supportsPointerEvent())
+      return;
+    dom.createVirtualCursor(ctx);
+    return () => {
+      var _a;
+      (_a = dom.getCursorEl(ctx)) == null ? void 0 : _a.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 = roundToDevicePixel(event.movementX);
+    const y = 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 = roundToDevicePixel(7.5);
+    point.x = 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: 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);
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  dom
+});

package/dist/number-input.dom.mjs

@@ -0,0 +1,7 @@
+import {
+  dom
+} from "./chunk-2SIS62IB.mjs";
+import "./chunk-DDNK5RLW.mjs";
+export {
+  dom
+};

package/dist/number-input.machine.d.ts

@@ -0,0 +1,7 @@
+import * as _zag_js_core from '@zag-js/core';
+import { UserDefinedContext, MachineContext, MachineState } from './number-input.types.js';
+import '@zag-js/types';
+
+declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
+
+export { machine };