@zag-js/pin-input 0.1.9 → 0.1.10

package/dist/index.js

@@ -43,17 +43,85 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+}
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+function getDescriptor(el, options) {
+  var _a;
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -80,19 +148,6 @@ function getEventKey(event, options = {}) {
   }
   return key;
 }
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
 function raf(fn) {
   const id = globalThis.requestAnimationFrame(fn);
   return function cleanup() {
@@ -103,9 +158,20 @@ function queryAll(root, selector) {
   var _a;
   return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
 }
+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"
+};
 
 // ../../utilities/core/dist/index.mjs
-var fromLength = (length) => Array.from(Array(length).keys());
 function invariant(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
@@ -115,32 +181,29 @@ function invariant(...a) {
 }
 
 // src/pin-input.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
   },
   getInputId: (ctx, id) => {
     var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.uid}:${id}`;
+    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
+  },
+  getHiddenInputId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
   },
-  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
+  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);
   },
   getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getElements(ctx)[0]
-};
+  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
 
 // src/pin-input.connect.ts
 function connect(state, send, normalize) {
@@ -176,6 +239,16 @@ function connect(state, send, normalize) {
       "data-disabled": dataAttr(state.context.disabled),
       "data-complete": dataAttr(isValueComplete)
     }),
+    hiddenInputProps: normalize.input({
+      "aria-hidden": true,
+      type: "text",
+      tabIndex: -1,
+      id: dom.getHiddenInputId(state.context),
+      name: state.context.name,
+      style: visuallyHiddenStyle,
+      maxLength: state.context.valueLength,
+      defaultValue: state.context.valueAsString
+    }),
     getInputProps({ index }) {
       const inputType = state.context.type === "numeric" ? "tel" : "text";
       return normalize.input({
@@ -224,6 +297,9 @@ function connect(state, send, normalize) {
             },
             ArrowRight() {
               send("ARROW_RIGHT");
+            },
+            Enter() {
+              send("ENTER");
             }
           };
           const key = getEventKey(event, { dir: state.context.dir });
@@ -249,12 +325,11 @@ function connect(state, send, normalize) {
 // src/pin-input.machine.ts
 var import_core = require("@zag-js/core");
 var { and, not } = import_core.guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return (0, import_core.createMachine)({
     id: "pin-input",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "pin-input",
       value: [],
       focusedIndex: -1,
       placeholder: "\u25CB",
@@ -274,7 +349,7 @@ function machine(ctx = {}) {
     watch: {
       focusedIndex: "focusInput",
       value: "invokeOnChange",
-      isValueComplete: ["invokeComplete", "blurFocusedInputIfNeeded"]
+      isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
     },
     on: {
       SET_VALUE: [
@@ -301,11 +376,11 @@ function machine(ctx = {}) {
             {
               guard: "autoFocus",
               target: "focused",
-              actions: ["setupDocument", "setupValue", "setFocusIndexToFirst"]
+              actions: ["setupValue", "setFocusIndexToFirst"]
             },
             {
               target: "idle",
-              actions: ["setupDocument", "setupValue"]
+              actions: "setupValue"
             }
           ]
         }
@@ -357,6 +432,10 @@ function machine(ctx = {}) {
               actions: ["setPrevFocusedIndex", "clearFocusedValue"]
             }
           ],
+          ENTER: {
+            guard: "isValueComplete",
+            actions: "requestFormSubmit"
+          },
           KEY_DOWN: {
             guard: not("isValidValue"),
             actions: ["preventDefault", "invokeOnInvalid"]
@@ -370,7 +449,12 @@ function machine(ctx = {}) {
       isValueEmpty: (_ctx, evt) => evt.value === "",
       hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
       isValueComplete: (ctx2) => ctx2.isValueComplete,
-      isValidValue: (ctx2, evt) => isValidType(evt.value, ctx2.type),
+      isValidValue: (ctx2, evt) => {
+        if (!ctx2.pattern)
+          return isValidType(evt.value, ctx2.type);
+        const regex = new RegExp(ctx2.pattern, "g");
+        return regex.test(evt.value);
+      },
       isFinalValue: (ctx2) => {
         return ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex;
       },
@@ -379,19 +463,10 @@ function machine(ctx = {}) {
       isDisabled: (ctx2) => !!ctx2.disabled
     },
     actions: {
-      setupDocument: (ctx2, evt) => {
-        if (evt.doc)
-          ctx2.doc = (0, import_core.ref)(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = (0, import_core.ref)(evt.root);
-        ctx2.uid = evt.id;
-      },
       setupValue: (ctx2) => {
-        nextTick(() => {
-          const inputs = dom.getElements(ctx2);
-          const empty = fromLength(inputs.length).map(() => "");
-          ctx2.value = Object.assign(empty, ctx2.value);
-        });
+        const inputs = dom.getElements(ctx2);
+        const empty = Array.from({ length: inputs.length }).map(() => "");
+        ctx2.value = Object.assign(empty, ctx2.value);
       },
       focusInput: (ctx2) => {
         raf(() => {
@@ -401,17 +476,18 @@ function machine(ctx = {}) {
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
-      invokeComplete: (ctx2) => {
+      invokeOnComplete: (ctx2) => {
         var _a;
-        if (ctx2.isValueComplete) {
-          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
-        }
+        if (!ctx2.isValueComplete)
+          return;
+        (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
       },
       invokeOnChange: (ctx2, evt) => {
         var _a;
-        if (evt.type !== "SETUP") {
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
-        }
+        if (evt.type === "SETUP")
+          return;
+        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+        dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
       },
       invokeOnInvalid: (ctx2, evt) => {
         var _a;
@@ -468,6 +544,13 @@ function machine(ctx = {}) {
           var _a;
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
         });
+      },
+      requestFormSubmit(ctx2) {
+        var _a;
+        if (!ctx2.name)
+          return;
+        const input = dom.getHiddenInputEl(ctx2);
+        (_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
       }
     }
   });

package/dist/index.mjs

@@ -19,17 +19,85 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // ../../utilities/dom/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
+var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp2.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols2)
+    for (var prop of __getOwnPropSymbols2(b)) {
+      if (__propIsEnum2.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var ariaAttr = (guard) => {
   return guard ? "true" : void 0;
 };
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function getWindow(el) {
+  var _a;
+  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+}
 function getNativeEvent(e) {
   var _a;
   return (_a = e.nativeEvent) != null ? _a : e;
 }
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+function getDescriptor(el, options) {
+  var _a;
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -56,19 +124,6 @@ function getEventKey(event, options = {}) {
   }
   return key;
 }
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
 function raf(fn) {
   const id = globalThis.requestAnimationFrame(fn);
   return function cleanup() {
@@ -79,9 +134,20 @@ function queryAll(root, selector) {
   var _a;
   return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
 }
+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"
+};
 
 // ../../utilities/core/dist/index.mjs
-var fromLength = (length) => Array.from(Array(length).keys());
 function invariant(...a) {
   const m = a.length === 1 ? a[0] : a[1];
   const c = a.length === 2 ? a[0] : true;
@@ -91,32 +157,29 @@ function invariant(...a) {
 }
 
 // src/pin-input.dom.ts
-var dom = {
-  getDoc: (ctx) => {
-    var _a;
-    return (_a = ctx.doc) != null ? _a : document;
-  },
-  getRootNode: (ctx) => {
-    var _a;
-    return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
-  },
+var dom = defineDomHelpers({
   getRootId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.uid}`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `pin-input:${ctx.id}`;
   },
   getInputId: (ctx, id) => {
     var _a, _b, _c;
-    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.uid}:${id}`;
+    return (_c = (_b = (_a = ctx.ids) == null ? void 0 : _a.input) == null ? void 0 : _b.call(_a, id)) != null ? _c : `pin-input:${ctx.id}:${id}`;
   },
-  getRootEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getRootId(ctx)),
+  getHiddenInputId: (ctx) => {
+    var _a, _b;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.hiddenInput) != null ? _b : `pin-input:${ctx.id}:hidden`;
+  },
+  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);
   },
   getFocusedEl: (ctx) => dom.getElements(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx) => dom.getElements(ctx)[0]
-};
+  getFirstInputEl: (ctx) => dom.getElements(ctx)[0],
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
 
 // src/pin-input.connect.ts
 function connect(state, send, normalize) {
@@ -152,6 +215,16 @@ function connect(state, send, normalize) {
       "data-disabled": dataAttr(state.context.disabled),
       "data-complete": dataAttr(isValueComplete)
     }),
+    hiddenInputProps: normalize.input({
+      "aria-hidden": true,
+      type: "text",
+      tabIndex: -1,
+      id: dom.getHiddenInputId(state.context),
+      name: state.context.name,
+      style: visuallyHiddenStyle,
+      maxLength: state.context.valueLength,
+      defaultValue: state.context.valueAsString
+    }),
     getInputProps({ index }) {
       const inputType = state.context.type === "numeric" ? "tel" : "text";
       return normalize.input({
@@ -200,6 +273,9 @@ function connect(state, send, normalize) {
             },
             ArrowRight() {
               send("ARROW_RIGHT");
+            },
+            Enter() {
+              send("ENTER");
             }
           };
           const key = getEventKey(event, { dir: state.context.dir });
@@ -223,14 +299,13 @@ function connect(state, send, normalize) {
 }
 
 // src/pin-input.machine.ts
-import { createMachine, guards, ref } from "@zag-js/core";
+import { createMachine, guards } from "@zag-js/core";
 var { and, not } = guards;
-function machine(ctx = {}) {
+function machine(ctx) {
   return createMachine({
     id: "pin-input",
     initial: "unknown",
     context: __spreadProps(__spreadValues({
-      uid: "pin-input",
       value: [],
       focusedIndex: -1,
       placeholder: "\u25CB",
@@ -250,7 +325,7 @@ function machine(ctx = {}) {
     watch: {
       focusedIndex: "focusInput",
       value: "invokeOnChange",
-      isValueComplete: ["invokeComplete", "blurFocusedInputIfNeeded"]
+      isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
     },
     on: {
       SET_VALUE: [
@@ -277,11 +352,11 @@ function machine(ctx = {}) {
             {
               guard: "autoFocus",
               target: "focused",
-              actions: ["setupDocument", "setupValue", "setFocusIndexToFirst"]
+              actions: ["setupValue", "setFocusIndexToFirst"]
             },
             {
               target: "idle",
-              actions: ["setupDocument", "setupValue"]
+              actions: "setupValue"
             }
           ]
         }
@@ -333,6 +408,10 @@ function machine(ctx = {}) {
               actions: ["setPrevFocusedIndex", "clearFocusedValue"]
             }
           ],
+          ENTER: {
+            guard: "isValueComplete",
+            actions: "requestFormSubmit"
+          },
           KEY_DOWN: {
             guard: not("isValidValue"),
             actions: ["preventDefault", "invokeOnInvalid"]
@@ -346,7 +425,12 @@ function machine(ctx = {}) {
       isValueEmpty: (_ctx, evt) => evt.value === "",
       hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
       isValueComplete: (ctx2) => ctx2.isValueComplete,
-      isValidValue: (ctx2, evt) => isValidType(evt.value, ctx2.type),
+      isValidValue: (ctx2, evt) => {
+        if (!ctx2.pattern)
+          return isValidType(evt.value, ctx2.type);
+        const regex = new RegExp(ctx2.pattern, "g");
+        return regex.test(evt.value);
+      },
       isFinalValue: (ctx2) => {
         return ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex;
       },
@@ -355,19 +439,10 @@ function machine(ctx = {}) {
       isDisabled: (ctx2) => !!ctx2.disabled
     },
     actions: {
-      setupDocument: (ctx2, evt) => {
-        if (evt.doc)
-          ctx2.doc = ref(evt.doc);
-        if (evt.root)
-          ctx2.rootNode = ref(evt.root);
-        ctx2.uid = evt.id;
-      },
       setupValue: (ctx2) => {
-        nextTick(() => {
-          const inputs = dom.getElements(ctx2);
-          const empty = fromLength(inputs.length).map(() => "");
-          ctx2.value = Object.assign(empty, ctx2.value);
-        });
+        const inputs = dom.getElements(ctx2);
+        const empty = Array.from({ length: inputs.length }).map(() => "");
+        ctx2.value = Object.assign(empty, ctx2.value);
       },
       focusInput: (ctx2) => {
         raf(() => {
@@ -377,17 +452,18 @@ function machine(ctx = {}) {
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.focus();
         });
       },
-      invokeComplete: (ctx2) => {
+      invokeOnComplete: (ctx2) => {
         var _a;
-        if (ctx2.isValueComplete) {
-          (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
-        }
+        if (!ctx2.isValueComplete)
+          return;
+        (_a = ctx2.onComplete) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value), valueAsString: ctx2.valueAsString });
       },
       invokeOnChange: (ctx2, evt) => {
         var _a;
-        if (evt.type !== "SETUP") {
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
-        }
+        if (evt.type === "SETUP")
+          return;
+        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: Array.from(ctx2.value) });
+        dispatchInputValueEvent(dom.getHiddenInputEl(ctx2), ctx2.valueAsString);
       },
       invokeOnInvalid: (ctx2, evt) => {
         var _a;
@@ -444,6 +520,13 @@ function machine(ctx = {}) {
           var _a;
           (_a = dom.getFocusedEl(ctx2)) == null ? void 0 : _a.blur();
         });
+      },
+      requestFormSubmit(ctx2) {
+        var _a;
+        if (!ctx2.name)
+          return;
+        const input = dom.getHiddenInputEl(ctx2);
+        (_a = input == null ? void 0 : input.form) == null ? void 0 : _a.requestSubmit();
       }
     }
   });

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

@@ -9,6 +9,7 @@ export declare function connect<T extends PropTypes>(state: State, send: Send, n
     setValueAtIndex(index: number, value: string): void;
     focus(): void;
     rootProps: T["element"];
+    hiddenInputProps: T["input"];
     getInputProps({ index }: {
         index: number;
     }): T["input"];

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

@@ -1,11 +1,27 @@
 import type { MachineContext as Ctx } from "./pin-input.types";
 export declare const dom: {
-    getDoc: (ctx: Ctx) => Document;
-    getRootNode: (ctx: Ctx) => Document | ShadowRoot;
+    getRootNode: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document | ShadowRoot;
+    getDoc: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Document;
+    getWin: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => Window & typeof globalThis;
+    getActiveElement: (ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }) => HTMLElement;
+    getById: <T_1 = HTMLElement>(ctx: {
+        getRootNode?: () => Node | Document | ShadowRoot;
+    }, id: string) => T_1;
+} & {
     getRootId: (ctx: Ctx) => string;
     getInputId: (ctx: Ctx, id: string) => string;
+    getHiddenInputId: (ctx: Ctx) => string;
     getRootEl: (ctx: Ctx) => HTMLElement;
     getElements: (ctx: Ctx) => HTMLInputElement[];
     getFocusedEl: (ctx: Ctx) => HTMLInputElement;
     getFirstInputEl: (ctx: Ctx) => HTMLInputElement;
+    getHiddenInputEl: (ctx: Ctx) => HTMLInputElement;
 };

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

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

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

@@ -1,13 +1,22 @@
 import type { StateMachine as S } from "@zag-js/core";
-import type { Context, DirectionProperty } from "@zag-js/types";
+import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types";
 declare type IntlMessages = {
     inputLabel: (index: number, length: number) => string;
 };
 declare type ElementIds = Partial<{
     root: string;
+    hiddenInput: string;
     input(id: string): string;
 }>;
-declare type PublicContext = DirectionProperty & {
+declare type PublicContext = DirectionProperty & CommonProperties & {
+    /**
+     * The name of the input element. Useful for form submission.
+     */
+    name?: string;
+    /**
+     * The regular expression that the user-entered input value is checked against.
+     */
+    pattern?: string;
     /**
      * The ids of the elements in the pin input. Useful for composition.
      */
@@ -74,7 +83,7 @@ declare type PublicContext = DirectionProperty & {
      */
     messages: IntlMessages;
 };
-export declare type UserDefinedContext = Partial<PublicContext>;
+export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
 declare type ComputedContext = Readonly<{
     /**
      * @computed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,9 +29,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.7",
-    "@zag-js/dom-utils": "0.1.6",
-    "@zag-js/types": "0.2.1",
+    "@zag-js/core": "0.1.8",
+    "@zag-js/types": "0.2.2"
+  },
+  "devDependencies": {
+    "@zag-js/dom-utils": "0.1.7",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {