@zag-js/pin-input 0.2.11 → 0.2.13

package/dist/chunk-CPXMEVTH.mjs

@@ -0,0 +1,23 @@
+// src/pin-input.dom.ts
+import { createScope, queryAll } from "@zag-js/dom-query";
+var 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/{chunk-6TEZTVFI.mjs → chunk-H5AVP4J4.mjs}

@@ -1,50 +1,12 @@
 import {
-  isObject
-} from "./chunk-NT4W6JYX.mjs";
-import {
-  dom,
-  getWindow
-} from "./chunk-T5OKDF74.mjs";
+  dom
+} from "./chunk-CPXMEVTH.mjs";
 
 // src/pin-input.machine.ts
 import { createMachine, guards } from "@zag-js/core";
-
-// ../../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/dom/src/next-tick.ts
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-
-// ../../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
+import { raf } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/form-utils";
+import { compact } from "@zag-js/utils";
 var { and, not } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
@@ -73,7 +35,7 @@ function machine(userContext) {
       },
       watch: {
         focusedIndex: ["focusInput", "setInputSelection"],
-        value: ["dispatchInputEvent"],
+        value: ["dispatchInputEvent", "syncInputElements"],
         isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
       },
       entry: ctx.autoFocus ? ["setupValue", "setFocusIndexToFirst"] : ["setupValue"],
@@ -187,14 +149,14 @@ function machine(userContext) {
           raf(() => {
             if (ctx2.focusedIndex === -1)
               return;
-            dom.getFocusedEl(ctx2)?.focus();
+            dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
           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;
@@ -205,20 +167,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;
+        dispatchInputEvent: (ctx2) => {
           dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
-          const inputs = dom.getElements(ctx2);
-          ctx2.value.forEach((val, index) => {
-            const input = inputs[index];
-            input.value = val || "";
-          });
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -235,14 +188,17 @@ 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(() => {
@@ -262,7 +218,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) => {
@@ -286,7 +242,7 @@ function machine(userContext) {
           if (!ctx2.blurOnComplete)
             return;
           raf(() => {
-            dom.getFocusedEl(ctx2)?.blur();
+            dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
         requestFormSubmit(ctx2) {

package/dist/{chunk-QVOI2QEW.mjs → chunk-KLVAQVBX.mjs}

@@ -3,71 +3,13 @@ import {
 } from "./chunk-BJXKBZJG.mjs";
 import {
   dom
-} from "./chunk-T5OKDF74.mjs";
-
-// ../../utilities/dom/src/attrs.ts
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-var ariaAttr = (guard) => {
-  return guard ? "true" : void 0;
-};
-
-// ../../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/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/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"
-};
+} from "./chunk-CPXMEVTH.mjs";
 
 // src/pin-input.connect.ts
+import { getEventKey, getNativeEvent, isModifiedEvent } from "@zag-js/dom-event";
+import { ariaAttr, dataAttr } from "@zag-js/dom-query";
+import { invariant } from "@zag-js/utils";
+import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
 function connect(state, send, normalize) {
   const isValueComplete = state.context.isValueComplete;
   const isInvalid = state.context.invalid;
@@ -77,21 +19,42 @@ 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");
       }
       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,
@@ -159,7 +122,7 @@ function connect(state, send, normalize) {
             send("BACKSPACE");
             return;
           }
-          send({ type: "INPUT", value });
+          send({ type: "INPUT", value, index });
         },
         onKeyDown(event) {
           const evt = getNativeEvent(event);