@zag-js/number-input 0.10.2 → 0.10.4

package/dist/number-input.connect.mjs

@@ -1,9 +1,234 @@
-import {
-  connect
-} from "./chunk-5ENKYWE3.mjs";
-import "./chunk-XHRILSH3.mjs";
-import "./chunk-QYY4CWRS.mjs";
-import "./chunk-AXXDGYUW.mjs";
-export {
-  connect
-};
+import { getNativeEvent, getEventStep, isLeftClick, getEventPoint } from '@zag-js/dom-event';
+import { dataAttr, ariaAttr } from '@zag-js/dom-query';
+import { roundToDevicePixel } from '@zag-js/number-utils';
+import { parts } from './number-input.anatomy.mjs';
+import { dom } from './number-input.dom.mjs';
+import { utils } from './number-input.utils.mjs';
+
+function connect(state, send, normalize) {
+  const isFocused = state.hasTag("focus");
+  const isInvalid = state.context.isOutOfRange || !!state.context.invalid;
+  const isDisabled = !!state.context.disabled;
+  const isValueEmpty = state.context.isValueEmpty;
+  const isIncrementDisabled = isDisabled || !state.context.canIncrement;
+  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();
+    },
+    rootProps: normalize.element({
+      id: dom.getRootId(state.context),
+      ...parts.root.attrs,
+      "data-disabled": dataAttr(isDisabled)
+    }),
+    labelProps: normalize.label({
+      ...parts.label.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      id: dom.getLabelId(state.context),
+      htmlFor: dom.getInputId(state.context)
+    }),
+    controlProps: normalize.element({
+      ...parts.control.attrs,
+      role: "group",
+      "aria-disabled": isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      "data-invalid": dataAttr(isInvalid),
+      "aria-invalid": ariaAttr(state.context.invalid)
+    }),
+    inputProps: normalize.input({
+      ...parts.input.attrs,
+      name: state.context.name,
+      form: state.context.form,
+      id: dom.getInputId(state.context),
+      role: "spinbutton",
+      defaultValue: state.context.formattedValue,
+      pattern: state.context.pattern,
+      inputMode: state.context.inputMode,
+      "aria-invalid": ariaAttr(isInvalid),
+      "data-invalid": dataAttr(isInvalid),
+      disabled: isDisabled,
+      "data-disabled": dataAttr(isDisabled),
+      readOnly: !!state.context.readOnly,
+      autoComplete: "off",
+      autoCorrect: "off",
+      spellCheck: "false",
+      type: "text",
+      "aria-roledescription": "numberfield",
+      "aria-valuemin": state.context.min,
+      "aria-valuemax": state.context.max,
+      "aria-valuenow": isNaN(state.context.valueAsNumber) ? void 0 : state.context.valueAsNumber,
+      "aria-valuetext": state.context.valueText,
+      onFocus() {
+        send("FOCUS");
+      },
+      onBlur() {
+        send("BLUR");
+      },
+      onChange(event) {
+        send({ type: "CHANGE", target: event.currentTarget, hint: "set" });
+      },
+      onKeyDown(event) {
+        const evt = getNativeEvent(event);
+        if (evt.isComposing)
+          return;
+        if (!utils.isValidNumericEvent(state.context, event)) {
+          event.preventDefault();
+        }
+        const step = getEventStep(event) * state.context.step;
+        const keyMap = {
+          ArrowUp() {
+            send({ type: "ARROW_UP", step });
+          },
+          ArrowDown() {
+            send({ type: "ARROW_DOWN", step });
+          },
+          Home() {
+            send("HOME");
+          },
+          End() {
+            send("END");
+          }
+        };
+        const exec = keyMap[event.key];
+        if (exec) {
+          exec(event);
+          event.preventDefault();
+        }
+      }
+    }),
+    decrementTriggerProps: normalize.button({
+      ...parts.decrementTrigger.attrs,
+      id: dom.getDecrementTriggerId(state.context),
+      disabled: isDecrementDisabled,
+      "data-disabled": dataAttr(isDecrementDisabled),
+      "aria-label": translations.decrementLabel,
+      type: "button",
+      tabIndex: -1,
+      "aria-controls": dom.getInputId(state.context),
+      onPointerDown(event) {
+        if (isDecrementDisabled)
+          return;
+        send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "decrement" } : { type: "FOCUS" });
+        event.preventDefault();
+      },
+      onPointerUp() {
+        send({ type: "PRESS_UP", hint: "decrement" });
+      },
+      onPointerLeave() {
+        if (isDecrementDisabled)
+          return;
+        send({ type: "PRESS_UP", hint: "decrement" });
+      }
+    }),
+    incrementTriggerProps: normalize.button({
+      ...parts.incrementTrigger.attrs,
+      id: dom.getIncrementTriggerId(state.context),
+      disabled: isIncrementDisabled,
+      "data-disabled": dataAttr(isIncrementDisabled),
+      "aria-label": translations.incrementLabel,
+      type: "button",
+      tabIndex: -1,
+      "aria-controls": dom.getInputId(state.context),
+      onPointerDown(event) {
+        if (isIncrementDisabled)
+          return;
+        send(isLeftClick(event) ? { type: "PRESS_DOWN", hint: "increment" } : { type: "FOCUS" });
+        event.preventDefault();
+      },
+      onPointerUp() {
+        send({ type: "PRESS_UP", hint: "increment" });
+      },
+      onPointerLeave() {
+        send({ type: "PRESS_UP", hint: "increment" });
+      }
+    }),
+    scrubberProps: normalize.element({
+      ...parts.scrubber.attrs,
+      "data-disabled": dataAttr(isDisabled),
+      id: dom.getScrubberId(state.context),
+      role: "presentation",
+      onMouseDown(event) {
+        if (isDisabled)
+          return;
+        const evt = getNativeEvent(event);
+        const point = getEventPoint(evt);
+        point.x = point.x - roundToDevicePixel(7.5);
+        point.y = point.y - roundToDevicePixel(7.5);
+        send({ type: "PRESS_DOWN_SCRUBBER", point });
+        event.preventDefault();
+      },
+      style: {
+        cursor: isDisabled ? void 0 : "ew-resize"
+      }
+    })
+  };
+}
+
+export { connect };

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

@@ -1,8 +1,5 @@
-import { MachineContext } from './number-input.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare const dom: {
+import type { MachineContext as Ctx } from "./number-input.types";
+export declare const dom: {
     getRootNode: (ctx: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
@@ -22,29 +19,27 @@ declare const dom: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T_1;
 } & {
-    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): {
+    getRootId: (ctx: Ctx) => string;
+    getInputId: (ctx: Ctx) => string;
+    getIncrementTriggerId: (ctx: Ctx) => string;
+    getDecrementTriggerId: (ctx: Ctx) => string;
+    getScrubberId: (ctx: Ctx) => string;
+    getCursorId: (ctx: Ctx) => string;
+    getLabelId: (ctx: Ctx) => string;
+    getInputEl: (ctx: Ctx) => HTMLInputElement | null;
+    getIncrementTriggerEl: (ctx: Ctx) => HTMLButtonElement | null;
+    getDecrementTriggerEl: (ctx: Ctx) => HTMLButtonElement | null;
+    getScrubberEl: (ctx: Ctx) => HTMLElement | null;
+    getCursorEl: (ctx: Ctx) => HTMLElement | null;
+    getPressedTriggerEl: (ctx: Ctx, hint?: "set" | "increment" | "decrement" | null) => HTMLButtonElement | null;
+    setupVirtualCursor(ctx: Ctx): (() => void) | undefined;
+    preventTextSelection(ctx: Ctx): () => void;
+    getMousementValue(ctx: Ctx, event: MouseEvent): {
         hint: string | null;
         point: {
             x: number;
             y: number;
         };
     };
-    createVirtualCursor(ctx: MachineContext): void;
+    createVirtualCursor(ctx: Ctx): void;
 };
-
-export { dom };

package/dist/number-input.dom.js

@@ -1,31 +1,11 @@
-"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.dom.ts
-var number_input_dom_exports = {};
-__export(number_input_dom_exports, {
-  dom: () => dom
-});
-module.exports = __toCommonJS(number_input_dom_exports);
-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)({
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const domQuery = require('@zag-js/dom-query');
+const numberUtils = require('@zag-js/number-utils');
+
+const dom = domQuery.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`,
@@ -49,7 +29,7 @@ var dom = (0, import_dom_query.createScope)({
     return btnEl;
   },
   setupVirtualCursor(ctx) {
-    if ((0, import_dom_query.isSafari)())
+    if (domQuery.isSafari())
       return;
     dom.createVirtualCursor(ctx);
     return () => {
@@ -76,8 +56,8 @@ var dom = (0, import_dom_query.createScope)({
     };
   },
   getMousementValue(ctx, event) {
-    const x = (0, import_number_utils.roundToDevicePixel)(event.movementX);
-    const y = (0, import_number_utils.roundToDevicePixel)(event.movementY);
+    const x = numberUtils.roundToDevicePixel(event.movementX);
+    const y = numberUtils.roundToDevicePixel(event.movementY);
     let hint = x > 0 ? "increment" : x < 0 ? "decrement" : null;
     if (ctx.isRtl && hint === "increment")
       hint = "decrement";
@@ -89,8 +69,8 @@ var dom = (0, import_dom_query.createScope)({
     };
     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;
+    const half = numberUtils.roundToDevicePixel(7.5);
+    point.x = numberUtils.wrap(point.x + half, width) - half;
     return { hint, point };
   },
   createVirtualCursor(ctx) {
@@ -105,7 +85,7 @@ var dom = (0, import_dom_query.createScope)({
       pointerEvents: "none",
       left: "0px",
       top: "0px",
-      zIndex: import_dom_query.MAX_Z_INDEX,
+      zIndex: domQuery.MAX_Z_INDEX,
       transform: ctx.scrubberCursorPoint ? `translate3d(${ctx.scrubberCursorPoint.x}px, ${ctx.scrubberCursorPoint.y}px, 0px)` : void 0,
       willChange: "transform"
     });
@@ -119,7 +99,5 @@ var dom = (0, import_dom_query.createScope)({
     doc.body.appendChild(el);
   }
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/number-input.dom.mjs

@@ -1,6 +1,99 @@
-import {
-  dom
-} from "./chunk-QYY4CWRS.mjs";
-export {
-  dom
-};
+import { createScope, isSafari, MAX_Z_INDEX } from '@zag-js/dom-query';
+import { roundToDevicePixel, wrap } from '@zag-js/number-utils';
+
+const 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`,
+  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 (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 = 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);
+  }
+});
+
+export { dom };

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

@@ -1,7 +1,3 @@
-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 };
+import { Machine, StateMachine } from '@zag-js/core';
+import type { MachineContext, MachineState, UserDefinedContext } from "./number-input.types";
+export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;