@zag-js/number-input 0.10.5 → 0.11.1

package/dist/number-input.connect.mjs

@@ -1,234 +0,0 @@
-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,45 +0,0 @@
-import type { MachineContext as Ctx } from "./number-input.types";
-export declare const dom: {
-    getRootNode: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => ShadowRoot | Document;
-    getDoc: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => Document;
-    getWin: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => Window & typeof globalThis;
-    getActiveElement: (ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }) => HTMLElement | null;
-    getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }, id: string) => T | null;
-    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
-    }, id: string) => T_1;
-} & {
-    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: Ctx): void;
-};

package/dist/number-input.dom.js

@@ -1,103 +0,0 @@
-'use strict';
-
-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`,
-  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 (domQuery.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 = 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";
-    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 = numberUtils.roundToDevicePixel(7.5);
-    point.x = numberUtils.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: domQuery.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);
-  }
-});
-
-exports.dom = dom;

package/dist/number-input.dom.mjs

@@ -1,99 +0,0 @@
-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,3 +0,0 @@
-import type { 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>;