@zag-js/pin-input 0.10.5 → 0.11.0

package/dist/pin-input.connect.js

@@ -1,169 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domEvent = require('@zag-js/dom-event');
-const domQuery = require('@zag-js/dom-query');
-const utils = require('@zag-js/utils');
-const visuallyHidden = require('@zag-js/visually-hidden');
-const pinInput_anatomy = require('./pin-input.anatomy.js');
-const pinInput_dom = require('./pin-input.dom.js');
-
-function connect(state, send, normalize) {
-  const isValueComplete = state.context.isValueComplete;
-  const isInvalid = state.context.invalid;
-  const focusedIndex = state.context.focusedIndex;
-  const translations = state.context.translations;
-  function focus() {
-    pinInput_dom.dom.getFirstInputEl(state.context)?.focus();
-  }
-  return {
-    /**
-     * The value of the input as an array of strings.
-     */
-    value: state.context.value,
-    /**
-     * The value of the input as a string.
-     */
-    valueAsString: state.context.valueAsString,
-    /**
-     * Whether all inputs are filled.
-     */
-    isValueComplete,
-    /**
-     * Function to set the value of the inputs.
-     */
-    setValue(value) {
-      if (!Array.isArray(value)) {
-        utils.invariant("[pin-input/setValue] value must be an array");
-      }
-      send({ type: "SET_VALUE", value });
-    },
-    /**
-     * Function to clear the value of the inputs.
-     */
-    clearValue() {
-      send({ type: "CLEAR_VALUE" });
-    },
-    /**
-     * Function to set the value of the input at a specific index.
-     */
-    setValueAtIndex(index, value) {
-      send({ type: "SET_VALUE", value, index });
-    },
-    /**
-     * Function to focus the pin-input. This will focus the first input.
-     */
-    focus,
-    rootProps: normalize.element({
-      dir: state.context.dir,
-      ...pinInput_anatomy.parts.root.attrs,
-      id: pinInput_dom.dom.getRootId(state.context),
-      "data-invalid": domQuery.dataAttr(isInvalid),
-      "data-disabled": domQuery.dataAttr(state.context.disabled),
-      "data-complete": domQuery.dataAttr(isValueComplete)
-    }),
-    labelProps: normalize.label({
-      ...pinInput_anatomy.parts.label.attrs,
-      htmlFor: pinInput_dom.dom.getHiddenInputId(state.context),
-      id: pinInput_dom.dom.getLabelId(state.context),
-      "data-invalid": domQuery.dataAttr(isInvalid),
-      "data-disabled": domQuery.dataAttr(state.context.disabled),
-      "data-complete": domQuery.dataAttr(isValueComplete),
-      onClick: (event) => {
-        event.preventDefault();
-        focus();
-      }
-    }),
-    hiddenInputProps: normalize.input({
-      ...pinInput_anatomy.parts.hiddenInput.attrs,
-      "aria-hidden": true,
-      type: "text",
-      tabIndex: -1,
-      id: pinInput_dom.dom.getHiddenInputId(state.context),
-      name: state.context.name,
-      form: state.context.form,
-      style: visuallyHidden.visuallyHiddenStyle,
-      maxLength: state.context.valueLength,
-      defaultValue: state.context.valueAsString
-    }),
-    controlProps: normalize.element({
-      ...pinInput_anatomy.parts.control.attrs,
-      id: pinInput_dom.dom.getControlId(state.context)
-    }),
-    getInputProps({ index }) {
-      const inputType = state.context.type === "numeric" ? "tel" : "text";
-      return normalize.input({
-        ...pinInput_anatomy.parts.input.attrs,
-        disabled: state.context.disabled,
-        "data-disabled": domQuery.dataAttr(state.context.disabled),
-        "data-complete": domQuery.dataAttr(isValueComplete),
-        id: pinInput_dom.dom.getInputId(state.context, index.toString()),
-        "data-ownedby": pinInput_dom.dom.getRootId(state.context),
-        "aria-label": translations.inputLabel(index, state.context.valueLength),
-        inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text",
-        "aria-invalid": domQuery.ariaAttr(isInvalid),
-        "data-invalid": domQuery.dataAttr(isInvalid),
-        type: state.context.mask ? "password" : inputType,
-        defaultValue: state.context.value[index] || "",
-        autoCapitalize: "none",
-        autoComplete: state.context.otp ? "one-time-code" : "off",
-        placeholder: focusedIndex === index ? "" : state.context.placeholder,
-        onChange(event) {
-          const evt = domEvent.getNativeEvent(event);
-          const { value } = event.currentTarget;
-          if (evt.inputType === "insertFromPaste" || value.length > 2) {
-            send({ type: "PASTE", value });
-            event.preventDefault();
-            return;
-          }
-          if (evt.inputType === "deleteContentBackward") {
-            send("BACKSPACE");
-            return;
-          }
-          send({ type: "INPUT", value, index });
-        },
-        onKeyDown(event) {
-          const evt = domEvent.getNativeEvent(event);
-          if (evt.isComposing || domEvent.isModifiedEvent(evt))
-            return;
-          const keyMap = {
-            Backspace() {
-              send("BACKSPACE");
-            },
-            Delete() {
-              send("DELETE");
-            },
-            ArrowLeft() {
-              send("ARROW_LEFT");
-            },
-            ArrowRight() {
-              send("ARROW_RIGHT");
-            },
-            Enter() {
-              send("ENTER");
-            }
-          };
-          const key = domEvent.getEventKey(event, { dir: state.context.dir });
-          const exec = keyMap[key];
-          if (exec) {
-            exec(event);
-            event.preventDefault();
-          } else {
-            if (key === "Tab")
-              return;
-            send({ type: "KEY_DOWN", value: key, preventDefault: () => event.preventDefault() });
-          }
-        },
-        onFocus() {
-          send({ type: "FOCUS", index });
-        },
-        onBlur() {
-          send({ type: "BLUR", index });
-        }
-      });
-    }
-  };
-}
-
-exports.connect = connect;

package/dist/pin-input.connect.mjs

@@ -1,165 +0,0 @@
-import { getNativeEvent, isModifiedEvent, getEventKey } from '@zag-js/dom-event';
-import { dataAttr, ariaAttr } from '@zag-js/dom-query';
-import { invariant } from '@zag-js/utils';
-import { visuallyHiddenStyle } from '@zag-js/visually-hidden';
-import { parts } from './pin-input.anatomy.mjs';
-import { dom } from './pin-input.dom.mjs';
-
-function connect(state, send, normalize) {
-  const isValueComplete = state.context.isValueComplete;
-  const isInvalid = state.context.invalid;
-  const focusedIndex = state.context.focusedIndex;
-  const translations = state.context.translations;
-  function focus() {
-    dom.getFirstInputEl(state.context)?.focus();
-  }
-  return {
-    /**
-     * The value of the input as an array of strings.
-     */
-    value: state.context.value,
-    /**
-     * The value of the input as a string.
-     */
-    valueAsString: state.context.valueAsString,
-    /**
-     * Whether all inputs are filled.
-     */
-    isValueComplete,
-    /**
-     * Function to set the value of the inputs.
-     */
-    setValue(value) {
-      if (!Array.isArray(value)) {
-        invariant("[pin-input/setValue] value must be an array");
-      }
-      send({ type: "SET_VALUE", value });
-    },
-    /**
-     * Function to clear the value of the inputs.
-     */
-    clearValue() {
-      send({ type: "CLEAR_VALUE" });
-    },
-    /**
-     * Function to set the value of the input at a specific index.
-     */
-    setValueAtIndex(index, value) {
-      send({ type: "SET_VALUE", value, index });
-    },
-    /**
-     * Function to focus the pin-input. This will focus the first input.
-     */
-    focus,
-    rootProps: normalize.element({
-      dir: state.context.dir,
-      ...parts.root.attrs,
-      id: dom.getRootId(state.context),
-      "data-invalid": dataAttr(isInvalid),
-      "data-disabled": dataAttr(state.context.disabled),
-      "data-complete": dataAttr(isValueComplete)
-    }),
-    labelProps: normalize.label({
-      ...parts.label.attrs,
-      htmlFor: dom.getHiddenInputId(state.context),
-      id: dom.getLabelId(state.context),
-      "data-invalid": dataAttr(isInvalid),
-      "data-disabled": dataAttr(state.context.disabled),
-      "data-complete": dataAttr(isValueComplete),
-      onClick: (event) => {
-        event.preventDefault();
-        focus();
-      }
-    }),
-    hiddenInputProps: normalize.input({
-      ...parts.hiddenInput.attrs,
-      "aria-hidden": true,
-      type: "text",
-      tabIndex: -1,
-      id: dom.getHiddenInputId(state.context),
-      name: state.context.name,
-      form: state.context.form,
-      style: visuallyHiddenStyle,
-      maxLength: state.context.valueLength,
-      defaultValue: state.context.valueAsString
-    }),
-    controlProps: normalize.element({
-      ...parts.control.attrs,
-      id: dom.getControlId(state.context)
-    }),
-    getInputProps({ index }) {
-      const inputType = state.context.type === "numeric" ? "tel" : "text";
-      return normalize.input({
-        ...parts.input.attrs,
-        disabled: state.context.disabled,
-        "data-disabled": dataAttr(state.context.disabled),
-        "data-complete": dataAttr(isValueComplete),
-        id: dom.getInputId(state.context, index.toString()),
-        "data-ownedby": dom.getRootId(state.context),
-        "aria-label": translations.inputLabel(index, state.context.valueLength),
-        inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text",
-        "aria-invalid": ariaAttr(isInvalid),
-        "data-invalid": dataAttr(isInvalid),
-        type: state.context.mask ? "password" : inputType,
-        defaultValue: state.context.value[index] || "",
-        autoCapitalize: "none",
-        autoComplete: state.context.otp ? "one-time-code" : "off",
-        placeholder: focusedIndex === index ? "" : state.context.placeholder,
-        onChange(event) {
-          const evt = getNativeEvent(event);
-          const { value } = event.currentTarget;
-          if (evt.inputType === "insertFromPaste" || value.length > 2) {
-            send({ type: "PASTE", value });
-            event.preventDefault();
-            return;
-          }
-          if (evt.inputType === "deleteContentBackward") {
-            send("BACKSPACE");
-            return;
-          }
-          send({ type: "INPUT", value, index });
-        },
-        onKeyDown(event) {
-          const evt = getNativeEvent(event);
-          if (evt.isComposing || isModifiedEvent(evt))
-            return;
-          const keyMap = {
-            Backspace() {
-              send("BACKSPACE");
-            },
-            Delete() {
-              send("DELETE");
-            },
-            ArrowLeft() {
-              send("ARROW_LEFT");
-            },
-            ArrowRight() {
-              send("ARROW_RIGHT");
-            },
-            Enter() {
-              send("ENTER");
-            }
-          };
-          const key = getEventKey(event, { dir: state.context.dir });
-          const exec = keyMap[key];
-          if (exec) {
-            exec(event);
-            event.preventDefault();
-          } else {
-            if (key === "Tab")
-              return;
-            send({ type: "KEY_DOWN", value: key, preventDefault: () => event.preventDefault() });
-          }
-        },
-        onFocus() {
-          send({ type: "FOCUS", index });
-        },
-        onBlur() {
-          send({ type: "BLUR", index });
-        }
-      });
-    }
-  };
-}
-
-export { connect };

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

@@ -1,33 +0,0 @@
-import type { MachineContext as Ctx } from "./pin-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, id: string) => string;
-    getHiddenInputId: (ctx: Ctx) => string;
-    getLabelId: (ctx: Ctx) => string;
-    getControlId: (ctx: Ctx) => string;
-    getRootEl: (ctx: Ctx) => HTMLElement | null;
-    getElements: (ctx: Ctx) => HTMLInputElement[];
-    getInputEl: (ctx: Ctx, id: string) => HTMLInputElement | null;
-    getFocusedInputEl: (ctx: Ctx) => HTMLInputElement;
-    getFirstInputEl: (ctx: Ctx) => HTMLInputElement;
-    getHiddenInputEl: (ctx: Ctx) => HTMLInputElement | null;
-};

package/dist/pin-input.dom.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const domQuery = require('@zag-js/dom-query');
-
-const dom = domQuery.createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
-  getInputId: (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
-  getControlId: (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getElements: (ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `input[data-ownedby=${ownerId}]`;
-    return domQuery.queryAll(dom.getRootEl(ctx), selector);
-  },
-  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
-  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
-});
-
-exports.dom = dom;

package/dist/pin-input.dom.mjs

@@ -1,21 +0,0 @@
-import { createScope, queryAll } from '@zag-js/dom-query';
-
-const dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
-  getInputId: (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
-  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
-  getControlId: (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getElements: (ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    const selector = `input[data-ownedby=${ownerId}]`;
-    return queryAll(dom.getRootEl(ctx), selector);
-  },
-  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
-  getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
-  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
-});
-
-export { dom };

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

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