@zag-js/pin-input 0.10.2 → 0.10.4

package/dist/pin-input.connect.js

@@ -1,66 +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);
-
-// src/pin-input.connect.ts
-var pin_input_connect_exports = {};
-__export(pin_input_connect_exports, {
-  connect: () => connect
-});
-module.exports = __toCommonJS(pin_input_connect_exports);
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
-var import_utils = require("@zag-js/utils");
-var import_visually_hidden = require("@zag-js/visually-hidden");
+'use strict';
 
-// src/pin-input.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("pinInput").parts("root", "label", "hiddenInput", "input", "control");
-var parts = anatomy.build();
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/pin-input.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.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 (0, import_dom_query.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))
-});
+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');
 
-// src/pin-input.connect.ts
 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();
+    pinInput_dom.dom.getFirstInputEl(state.context)?.focus();
   }
   return {
     /**
@@ -80,7 +35,7 @@ function connect(state, send, normalize) {
      */
     setValue(value) {
       if (!Array.isArray(value)) {
-        (0, import_utils.invariant)("[pin-input/setValue] value must be an array");
+        utils.invariant("[pin-input/setValue] value must be an array");
       }
       send({ type: "SET_VALUE", value });
     },
@@ -102,60 +57,60 @@ function connect(state, send, normalize) {
     focus,
     rootProps: normalize.element({
       dir: state.context.dir,
-      ...parts.root.attrs,
-      id: dom.getRootId(state.context),
-      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
-      "data-disabled": (0, import_dom_query2.dataAttr)(state.context.disabled),
-      "data-complete": (0, import_dom_query2.dataAttr)(isValueComplete)
+      ...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({
-      ...parts.label.attrs,
-      htmlFor: dom.getHiddenInputId(state.context),
-      id: dom.getLabelId(state.context),
-      "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
-      "data-disabled": (0, import_dom_query2.dataAttr)(state.context.disabled),
-      "data-complete": (0, import_dom_query2.dataAttr)(isValueComplete),
+      ...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({
-      ...parts.hiddenInput.attrs,
+      ...pinInput_anatomy.parts.hiddenInput.attrs,
       "aria-hidden": true,
       type: "text",
       tabIndex: -1,
-      id: dom.getHiddenInputId(state.context),
+      id: pinInput_dom.dom.getHiddenInputId(state.context),
       name: state.context.name,
       form: state.context.form,
-      style: import_visually_hidden.visuallyHiddenStyle,
+      style: visuallyHidden.visuallyHiddenStyle,
       maxLength: state.context.valueLength,
       defaultValue: state.context.valueAsString
     }),
     controlProps: normalize.element({
-      ...parts.control.attrs,
-      id: dom.getControlId(state.context)
+      ...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({
-        ...parts.input.attrs,
+        ...pinInput_anatomy.parts.input.attrs,
         disabled: state.context.disabled,
-        "data-disabled": (0, import_dom_query2.dataAttr)(state.context.disabled),
-        "data-complete": (0, import_dom_query2.dataAttr)(isValueComplete),
-        id: dom.getInputId(state.context, index.toString()),
-        "data-ownedby": dom.getRootId(state.context),
+        "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": (0, import_dom_query2.ariaAttr)(isInvalid),
-        "data-invalid": (0, import_dom_query2.dataAttr)(isInvalid),
+        "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 = (0, import_dom_event.getNativeEvent)(event);
+          const evt = domEvent.getNativeEvent(event);
           const { value } = event.currentTarget;
           if (evt.inputType === "insertFromPaste" || value.length > 2) {
             send({ type: "PASTE", value });
@@ -169,8 +124,8 @@ function connect(state, send, normalize) {
           send({ type: "INPUT", value, index });
         },
         onKeyDown(event) {
-          const evt = (0, import_dom_event.getNativeEvent)(event);
-          if (evt.isComposing || (0, import_dom_event.isModifiedEvent)(evt))
+          const evt = domEvent.getNativeEvent(event);
+          if (evt.isComposing || domEvent.isModifiedEvent(evt))
             return;
           const keyMap = {
             Backspace() {
@@ -189,7 +144,7 @@ function connect(state, send, normalize) {
               send("ENTER");
             }
           };
-          const key = (0, import_dom_event.getEventKey)(event, { dir: state.context.dir });
+          const key = domEvent.getEventKey(event, { dir: state.context.dir });
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -210,7 +165,5 @@ function connect(state, send, normalize) {
     }
   };
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  connect
-});
+
+exports.connect = connect;

package/dist/pin-input.connect.mjs

@@ -1,8 +1,165 @@
-import {
-  connect
-} from "./chunk-KLVAQVBX.mjs";
-import "./chunk-BJXKBZJG.mjs";
-import "./chunk-CPXMEVTH.mjs";
-export {
-  connect
-};
+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,8 +1,5 @@
-import { MachineContext } from './pin-input.types.js';
-import '@zag-js/core';
-import '@zag-js/types';
-
-declare const dom: {
+import type { MachineContext as Ctx } from "./pin-input.types";
+export declare const dom: {
     getRootNode: (ctx: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
@@ -22,17 +19,15 @@ declare const dom: {
         getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T_1;
 } & {
-    getRootId: (ctx: MachineContext) => string;
-    getInputId: (ctx: MachineContext, id: string) => string;
-    getHiddenInputId: (ctx: MachineContext) => string;
-    getLabelId: (ctx: MachineContext) => string;
-    getControlId: (ctx: MachineContext) => string;
-    getRootEl: (ctx: MachineContext) => HTMLElement | null;
-    getElements: (ctx: MachineContext) => HTMLInputElement[];
-    getInputEl: (ctx: MachineContext, id: string) => HTMLInputElement | null;
-    getFocusedInputEl: (ctx: MachineContext) => HTMLInputElement;
-    getFirstInputEl: (ctx: MachineContext) => HTMLInputElement;
-    getHiddenInputEl: (ctx: MachineContext) => HTMLInputElement | null;
+    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;
 };
-
-export { dom };

package/dist/pin-input.dom.js

@@ -1,30 +1,10 @@
-"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/pin-input.dom.ts
-var pin_input_dom_exports = {};
-__export(pin_input_dom_exports, {
-  dom: () => dom
-});
-module.exports = __toCommonJS(pin_input_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
+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`,
@@ -34,14 +14,12 @@ var dom = (0, import_dom_query.createScope)({
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[data-ownedby=${ownerId}]`;
-    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+    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))
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  dom
-});
+
+exports.dom = dom;

package/dist/pin-input.dom.mjs

@@ -1,6 +1,21 @@
-import {
-  dom
-} from "./chunk-CPXMEVTH.mjs";
-export {
-  dom
-};
+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,7 +1,3 @@
-import * as _zag_js_core from '@zag-js/core';
-import { UserDefinedContext, MachineContext, MachineState } from './pin-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 "./pin-input.types";
+export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;