@zag-js/pin-input 0.2.12 → 0.2.14

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-VZQYAAIE.mjs → chunk-H5AVP4J4.mjs}

@@ -1,50 +1,12 @@
 import {
-  isObject
-} from "./chunk-NT4W6JYX.mjs";
-import {
-  dom,
-  getWindow
-} from "./chunk-Y7IZ6OAH.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);

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

@@ -3,71 +3,13 @@ import {
 } from "./chunk-BJXKBZJG.mjs";
 import {
   dom
-} from "./chunk-Y7IZ6OAH.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,

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,7 +49,7 @@ 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);
   },
   getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
   getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
@@ -179,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();
@@ -223,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
     }),
@@ -236,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 });
@@ -264,8 +173,8 @@ function connect(state, send, normalize) {
           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() {
@@ -284,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);
@@ -308,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",
@@ -467,14 +359,14 @@ function machine(userContext) {
           assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             if (ctx2.focusedIndex === -1)
               return;
             dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             if (ctx2.focusedIndex === -1)
               return;
             const input = dom.getFocusedInputEl(ctx2);
@@ -492,7 +384,7 @@ function machine(userContext) {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
         dispatchInputEvent: (ctx2) => {
-          dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
+          (0, import_form_utils.dispatchInputValueEvent)(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -522,7 +414,7 @@ function machine(userContext) {
           });
         },
         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);
@@ -552,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);
           });
         },
@@ -562,7 +454,7 @@ function machine(userContext) {
         blurFocusedInputIfNeeded(ctx2) {
           if (!ctx2.blurOnComplete)
             return;
-          raf(() => {
+          (0, import_dom_query3.raf)(() => {
             dom.getFocusedInputEl(ctx2)?.blur();
           });
         },

package/dist/index.mjs

@@ -1,14 +1,13 @@
 import {
   connect
-} from "./chunk-IGE2OJGQ.mjs";
+} from "./chunk-KLVAQVBX.mjs";
 import {
   anatomy
 } from "./chunk-BJXKBZJG.mjs";
 import {
   machine
-} from "./chunk-VZQYAAIE.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-Y7IZ6OAH.mjs";
+} from "./chunk-H5AVP4J4.mjs";
+import "./chunk-CPXMEVTH.mjs";
 export {
   anatomy,
   connect,

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"];

package/dist/pin-input.connect.js

@@ -23,101 +23,10 @@ __export(pin_input_connect_exports, {
   connect: () => connect
 });
 module.exports = __toCommonJS(pin_input_connect_exports);
-
-// ../../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/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 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/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"
-};
+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.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
@@ -125,7 +34,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("pinInput").parts("root", "label
 var parts = anatomy.build();
 
 // 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`,
@@ -135,7 +45,7 @@ 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);
   },
   getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
   getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
@@ -153,37 +63,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();
@@ -197,7 +128,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
     }),
@@ -210,21 +141,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 });
@@ -238,8 +169,8 @@ function connect(state, send, normalize) {
           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() {
@@ -258,7 +189,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);

package/dist/pin-input.connect.mjs

@@ -1,9 +1,8 @@
 import {
   connect
-} from "./chunk-IGE2OJGQ.mjs";
+} from "./chunk-KLVAQVBX.mjs";
 import "./chunk-BJXKBZJG.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-Y7IZ6OAH.mjs";
+import "./chunk-CPXMEVTH.mjs";
 export {
   connect
 };

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

@@ -4,20 +4,23 @@ import '@zag-js/types';
 
 declare const dom: {
     getRootNode: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document | ShadowRoot;
     getDoc: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Document;
     getWin: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => Window & typeof globalThis;
     getActiveElement: (ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }) => HTMLElement | null;
-    getById: <T = HTMLElement>(ctx: {
-        getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
+    getById: <T extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
     }, id: string) => T | null;
+    queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
+        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+    }, id: string) => T_1;
 } & {
     getRootId: (ctx: MachineContext) => string;
     getInputId: (ctx: MachineContext, id: string) => string;

package/dist/pin-input.dom.js

@@ -23,42 +23,8 @@ __export(pin_input_dom_exports, {
   dom: () => dom
 });
 module.exports = __toCommonJS(pin_input_dom_exports);
-
-// ../../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 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/nodelist.ts
-function queryAll(root, selector) {
-  return Array.from(root?.querySelectorAll(selector) ?? []);
-}
-
-// 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`,
@@ -68,7 +34,7 @@ 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);
   },
   getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
   getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],

package/dist/pin-input.dom.mjs

@@ -1,6 +1,6 @@
 import {
   dom
-} from "./chunk-Y7IZ6OAH.mjs";
+} from "./chunk-CPXMEVTH.mjs";
 export {
   dom
 };

package/dist/pin-input.machine.js

@@ -24,84 +24,13 @@ __export(pin_input_machine_exports, {
 });
 module.exports = __toCommonJS(pin_input_machine_exports);
 var import_core = require("@zag-js/core");
-
-// ../../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/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/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/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);
-}
+var import_dom_query2 = require("@zag-js/dom-query");
+var import_form_utils = require("@zag-js/form-utils");
+var import_utils = require("@zag-js/utils");
 
 // 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`,
@@ -111,7 +40,7 @@ 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);
   },
   getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
   getFocusedInputEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
@@ -122,7 +51,7 @@ var dom = defineDomHelpers({
 // src/pin-input.machine.ts
 var { and, not } = import_core.guards;
 function machine(userContext) {
-  const ctx = compact(userContext);
+  const ctx = (0, import_utils.compact)(userContext);
   return (0, import_core.createMachine)(
     {
       id: "pin-input",
@@ -259,14 +188,14 @@ function machine(userContext) {
           assign(ctx2, emptyValues);
         },
         focusInput: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             if (ctx2.focusedIndex === -1)
               return;
             dom.getFocusedInputEl(ctx2)?.focus();
           });
         },
         setInputSelection: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             if (ctx2.focusedIndex === -1)
               return;
             const input = dom.getFocusedInputEl(ctx2);
@@ -284,7 +213,7 @@ function machine(userContext) {
           ctx2.onChange?.({ value: Array.from(ctx2.value) });
         },
         dispatchInputEvent: (ctx2) => {
-          dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
+          (0, import_form_utils.dispatchInputValueEvent)(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
         },
         invokeOnInvalid: (ctx2, evt) => {
           ctx2.onInvalid?.({ value: evt.value, index: ctx2.focusedIndex });
@@ -314,7 +243,7 @@ function machine(userContext) {
           });
         },
         setPastedValue(ctx2, evt) {
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             const startIndex = ctx2.focusedValue ? 1 : 0;
             const value = evt.value.substring(startIndex, startIndex + ctx2.valueLength);
             assign(ctx2, value);
@@ -344,7 +273,7 @@ function machine(userContext) {
           ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
         },
         setLastValueFocusIndex: (ctx2) => {
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
           });
         },
@@ -354,7 +283,7 @@ function machine(userContext) {
         blurFocusedInputIfNeeded(ctx2) {
           if (!ctx2.blurOnComplete)
             return;
-          raf(() => {
+          (0, import_dom_query2.raf)(() => {
             dom.getFocusedInputEl(ctx2)?.blur();
           });
         },

package/dist/pin-input.machine.mjs

@@ -1,8 +1,7 @@
 import {
   machine
-} from "./chunk-VZQYAAIE.mjs";
-import "./chunk-NT4W6JYX.mjs";
-import "./chunk-Y7IZ6OAH.mjs";
+} from "./chunk-H5AVP4J4.mjs";
+import "./chunk-CPXMEVTH.mjs";
 export {
   machine
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,16 @@
   },
   "dependencies": {
     "@zag-js/anatomy": "0.1.4",
-    "@zag-js/core": "0.2.9",
+    "@zag-js/dom-query": "0.1.4",
+    "@zag-js/dom-event": "0.0.1",
+    "@zag-js/form-utils": "0.2.5",
+    "@zag-js/visually-hidden": "0.0.1",
+    "@zag-js/utils": "0.3.3",
+    "@zag-js/core": "0.2.10",
     "@zag-js/types": "0.3.4"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/form-utils": "0.2.4",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-NT4W6JYX.mjs

@@ -1,7 +0,0 @@
-// ../../utilities/core/src/guard.ts
-var isArray = (v) => Array.isArray(v);
-var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-
-export {
-  isObject
-};

package/dist/chunk-Y7IZ6OAH.mjs

@@ -1,59 +0,0 @@
-// ../../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/nodelist.ts
-function queryAll(root, selector) {
-  return Array.from(root?.querySelectorAll(selector) ?? []);
-}
-
-// src/pin-input.dom.ts
-var dom = defineDomHelpers({
-  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 {
-  getWindow,
-  dom
-};