@zag-js/pin-input 0.2.11 → 0.2.13

package/dist/index.js

@@ -31,127 +31,15 @@ var import_anatomy = require("@zag-js/anatomy");
 var anatomy = (0, import_anatomy.createAnatomy)("pinInput").parts("root", "label", "hiddenInput", "input", "control");
 var parts = anatomy.build();
 
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-var ariaAttr = (guard) => {
-  return guard ? "true" : void 0;
-};
-
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-
-// ../../utilities/core/src/object.ts
-function compact(obj) {
-  if (obj === void 0)
-    return obj;
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
-  );
-}
-
-// ../../utilities/core/src/warning.ts
-function invariant(...a) {
-  const m = a.length === 1 ? a[0] : a[1];
-  const c = a.length === 2 ? a[0] : true;
-  if (c && process.env.NODE_ENV !== "production") {
-    throw new Error(m);
-  }
-}
-
-// ../../utilities/dom/src/query.ts
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return value?.toString() === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return el?.ownerDocument ?? document;
-}
-function getWindow(el) {
-  return el?.ownerDocument.defaultView ?? window;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-
-// ../../utilities/dom/src/event.ts
-function getNativeEvent(e) {
-  return e.nativeEvent ?? e;
-}
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-
-// ../../utilities/dom/src/keyboard-event.ts
-var rtlKeyMap = {
-  ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft"
-};
-var sameKeyMap = {
-  Up: "ArrowUp",
-  Down: "ArrowDown",
-  Esc: "Escape",
-  " ": "Space",
-  ",": "Comma",
-  Left: "ArrowLeft",
-  Right: "ArrowRight"
-};
-function getEventKey(event, options = {}) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  let { key } = event;
-  key = sameKeyMap[key] ?? key;
-  const isRtl = dir === "rtl" && orientation === "horizontal";
-  if (isRtl && key in rtlKeyMap) {
-    key = rtlKeyMap[key];
-  }
-  return key;
-}
-
-// ../../utilities/dom/src/next-tick.ts
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
-// ../../utilities/dom/src/nodelist.ts
-function queryAll(root, selector) {
-  return Array.from(root?.querySelectorAll(selector) ?? []);
-}
-
-// ../../utilities/dom/src/visually-hidden.ts
-var visuallyHiddenStyle = {
-  border: "0",
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: "0",
-  position: "absolute",
-  width: "1px",
-  whiteSpace: "nowrap",
-  wordWrap: "normal"
-};
+// src/pin-input.connect.ts
+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");
 
 // src/pin-input.dom.ts
-var dom = defineDomHelpers({
+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`,
@@ -161,9 +49,10 @@ var dom = defineDomHelpers({
   getElements: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[data-ownedby=${ownerId}]`;
-    return queryAll(dom.getRootEl(ctx), selector);
+    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
   },
-  getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
+  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))
 });
@@ -178,37 +67,58 @@ function connect(state, send, normalize) {
     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");
+        (0, import_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,
       ...parts.root.attrs,
       id: dom.getRootId(state.context),
-      "data-invalid": dataAttr(isInvalid),
-      "data-disabled": dataAttr(state.context.disabled),
-      "data-complete": dataAttr(isValueComplete)
+      "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)
     }),
     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),
+      "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),
       onClick: (event) => {
         event.preventDefault();
         focus();
@@ -222,7 +132,7 @@ function connect(state, send, normalize) {
       id: dom.getHiddenInputId(state.context),
       name: state.context.name,
       form: state.context.form,
-      style: visuallyHiddenStyle,
+      style: import_visually_hidden.visuallyHiddenStyle,
       maxLength: state.context.valueLength,
       defaultValue: state.context.valueAsString
     }),
@@ -235,21 +145,21 @@ function connect(state, send, normalize) {
       return normalize.input({
         ...parts.input.attrs,
         disabled: state.context.disabled,
-        "data-disabled": dataAttr(state.context.disabled),
-        "data-complete": dataAttr(isValueComplete),
+        "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),
         "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),
+        "aria-invalid": (0, import_dom_query2.ariaAttr)(isInvalid),
+        "data-invalid": (0, import_dom_query2.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 evt = (0, import_dom_event.getNativeEvent)(event);
           const { value } = event.currentTarget;
           if (evt.inputType === "insertFromPaste" || value.length > 2) {
             send({ type: "PASTE", value });
@@ -260,11 +170,11 @@ function connect(state, send, normalize) {
             send("BACKSPACE");
             return;
           }
-          send({ type: "INPUT", value });
+          send({ type: "INPUT", value, index });
         },
         onKeyDown(event) {
-          const evt = getNativeEvent(event);
-          if (evt.isComposing || isModifiedEvent(evt))
+          const evt = (0, import_dom_event.getNativeEvent)(event);
+          if (evt.isComposing || (0, import_dom_event.isModifiedEvent)(evt))
             return;
           const keyMap = {
             Backspace() {
@@ -283,7 +193,7 @@ function connect(state, send, normalize) {
               send("ENTER");
             }
           };
-          const key = getEventKey(event, { dir: state.context.dir });
+          const key = (0, import_dom_event.getEventKey)(event, { dir: state.context.dir });
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -307,29 +217,12 @@ function connect(state, send, normalize) {
 
 // src/pin-input.machine.ts
 var import_core = require("@zag-js/core");
-
-// ../../utilities/form-utils/src/input-event.ts
-function getDescriptor(el, options) {
-  const { type, property = "value" } = options;
-  const proto = getWindow(el)[type].prototype;
-  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
-}
-function dispatchInputValueEvent(el, value) {
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  desc.set?.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-
-// src/pin-input.machine.ts
+var import_dom_query3 = require("@zag-js/dom-query");
+var import_form_utils = require("@zag-js/form-utils");
+var import_utils2 = require("@zag-js/utils");
 var { and, not } = import_core.guards;
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils2.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "pin-input",
@@ -355,7 +248,7 @@ function machine(userContext) {
       },
       watch: {
         focusedIndex: ["focusInput", "setInputSelection"],
-        value: ["dispatchInputEvent"],
+        value: ["dispatchInputEvent", "syncInputElements"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
       entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
@@ -466,17 +359,17 @@ function machine(userContext) {
           assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            dom.getFocusedEl(ctx2)?.focus();
+            dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            const input = dom.getFocusedEl(ctx2);
+            const input = dom.getFocusedInputEl(ctx2);
             const length = input.value.length;
             input.selectionStart = ctx2.selectOnFocus ? 0 : length;
             input.selectionEnd = length;
@@ -487,20 +380,11 @@ function machine(userContext) {
             return;
           ctx2.onComplete?.({ value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
         },
-        invokeOnChange: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
+        invokeOnChange: (ctx2) => {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
-        dispatchInputEvent: (ctx2, evt) => {
-          if (evt.type === "SETUP")
-            return;
-          dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
-          const inputs = dom.getElements(ctx2);
-          ctx2.value.forEach((val, index) => {
-            const input = inputs[index];
-            input.value = val || "";
-          });
+        dispatchInputEvent: (ctx2) => {
+          (0, import_form_utils.dispatchInputValueEvent)(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -517,17 +401,20 @@ function machine(userContext) {
         setFocusedValue: (ctx2, evt) => {
           ctx2.value[ctx2.focusedIndex] = getNextValue(ctx2.focusedValue, evt.value);
         },
-        syncInputValue: (ctx2, evt) => {
-          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
-          const changed = nextValue !== ctx2.focusedValue;
-          if (evt.value.length <= 1 || changed)
+        syncInputValue(ctx2, evt) {
+          const input = dom.getInputEl(ctx2, evt.index.toString());
+          if (!input)
             return;
+          input.value = ctx2.value[evt.index];
+        },
+        syncInputElements(ctx2) {
           const inputs = dom.getElements(ctx2);
-          const input = inputs[ctx2.focusedIndex];
-          input.value = nextValue;
+          inputs.forEach((input, index) => {
+            input.value = ctx2.value[index];
+          });
         },
         setPastedValue(ctx2, evt) {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
             const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
@@ -544,7 +431,7 @@ function machine(userContext) {
           ctx2.value[ctx2.focusedIndex] = "";
         },
         resetFocusedValue: (ctx2) => {
-          const input = dom.getFocusedEl(ctx2);
+          const input = dom.getFocusedInputEl(ctx2);
           input.value = ctx2.focusedValue;
         },
         setFocusIndexToFirst: (ctx2) => {
@@ -557,7 +444,7 @@ function machine(userContext) {
           ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
         },
         setLastValueFocusIndex: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
           });
         },
@@ -567,8 +454,8 @@ function machine(userContext) {
         blurFocusedInputIfNeeded(ctx2) {
           if (!ctx2.blurOnComplete)
             return;
-          raf(() => {
-            dom.getFocusedEl(ctx2)?.blur();
+          (0, import_dom_query3.raf)(() => {
+            dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {

package/dist/index.mjs

@@ -1,14 +1,13 @@
 import {
   connect
-} from "./chunk-QVOI2QEW.mjs";
+} from "./chunk-KLVAQVBX.mjs";
 import {
   anatomy
 } from "./chunk-BJXKBZJG.mjs";
 import {
   machine
-} from "./chunk-6TEZTVFI.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-T5OKDF74.mjs";
+} from "./chunk-H5AVP4J4.mjs";
+import "./chunk-CPXMEVTH.mjs";
 export {
   anatomy,
   connect,

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

@@ -1,6 +1,6 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "label" | "hiddenInput" | "input" | "control">;
-declare const parts: Record<"root" | "label" | "hiddenInput" | "input" | "control", _zag_js_anatomy.AnatomyPart>;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "hiddenInput" | "label" | "control" | "input">;
+declare const parts: Record<"root" | "hiddenInput" | "label" | "control" | "input", _zag_js_anatomy.AnatomyPart>;
 
 export { anatomy, parts };

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

@@ -3,12 +3,33 @@ import { State, Send } from './pin-input.types.js';
 import '@zag-js/core';
 
 declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+    /**
+     * The value of the input as an array of strings.
+     */
     value: string[];
+    /**
+     * The value of the input as a string.
+     */
     valueAsString: string;
+    /**
+     * Whether all inputs are filled.
+     */
     isValueComplete: boolean;
+    /**
+     * Function to set the value of the inputs.
+     */
     setValue(value: string[]): void;
+    /**
+     * Function to clear the value of the inputs.
+     */
     clearValue(): void;
+    /**
+     * Function to set the value of the input at a specific index.
+     */
     setValueAtIndex(index: number, value: string): void;
+    /**
+     * Function to focus the pin-input. This will focus the first input.
+     */
     focus: () => void;
     rootProps: T["element"];
     labelProps: T["label"];