@zag-js/pin-input 0.70.0 → 0.71.0

package/dist/index.js

@@ -1,44 +1,16 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+'use strict';
 
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  anatomy: () => anatomy,
-  connect: () => connect,
-  machine: () => machine
-});
-module.exports = __toCommonJS(src_exports);
+var anatomy$1 = require('@zag-js/anatomy');
+var domEvent = require('@zag-js/dom-event');
+var domQuery = require('@zag-js/dom-query');
+var utils = require('@zag-js/utils');
+var core = require('@zag-js/core');
+var formUtils = require('@zag-js/form-utils');
 
 // src/pin-input.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("pinInput").parts("root", "label", "input", "control");
+var anatomy = anatomy$1.createAnatomy("pinInput").parts("root", "label", "input", "control");
 var parts = anatomy.build();
-
-// 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");
-
-// src/pin-input.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
+var dom = domQuery.createScope({
   getRootId: (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
   getInputId: (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
   getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
@@ -48,7 +20,7 @@ var dom = (0, import_dom_query.createScope)({
   getInputEls: (ctx) => {
     const ownerId = CSS.escape(dom.getRootId(ctx));
     const selector = `input[data-ownedby=${ownerId}]`;
-    return (0, import_dom_query.queryAll)(dom.getRootEl(ctx), selector);
+    return domQuery.queryAll(dom.getRootEl(ctx), selector);
   },
   getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
   getFocusedInputEl: (ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
@@ -88,7 +60,7 @@ function connect(state, send, normalize) {
     complete,
     setValue(value) {
       if (!Array.isArray(value)) {
-        (0, import_utils.invariant)("[pin-input/setValue] value must be an array");
+        utils.invariant("[pin-input/setValue] value must be an array");
       }
       send({ type: "VALUE.SET", value });
     },
@@ -103,10 +75,10 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         ...parts.root.attrs,
         id: dom.getRootId(state.context),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-        "data-disabled": (0, import_dom_query2.dataAttr)(state.context.disabled),
-        "data-complete": (0, import_dom_query2.dataAttr)(complete),
-        "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly)
+        "data-invalid": domQuery.dataAttr(invalid),
+        "data-disabled": domQuery.dataAttr(state.context.disabled),
+        "data-complete": domQuery.dataAttr(complete),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly)
       });
     },
     getLabelProps() {
@@ -115,10 +87,10 @@ function connect(state, send, normalize) {
         dir: state.context.dir,
         htmlFor: dom.getHiddenInputId(state.context),
         id: dom.getLabelId(state.context),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
-        "data-disabled": (0, import_dom_query2.dataAttr)(state.context.disabled),
-        "data-complete": (0, import_dom_query2.dataAttr)(complete),
-        "data-readonly": (0, import_dom_query2.dataAttr)(state.context.readOnly),
+        "data-invalid": domQuery.dataAttr(invalid),
+        "data-disabled": domQuery.dataAttr(state.context.disabled),
+        "data-complete": domQuery.dataAttr(complete),
+        "data-readonly": domQuery.dataAttr(state.context.readOnly),
         onClick(event) {
           event.preventDefault();
           focus();
@@ -136,7 +108,7 @@ function connect(state, send, normalize) {
         required: state.context.required,
         name: state.context.name,
         form: state.context.form,
-        style: import_dom_query2.visuallyHiddenStyle,
+        style: domQuery.visuallyHiddenStyle,
         maxLength: state.context.valueLength,
         defaultValue: state.context.valueAsString
       });
@@ -155,14 +127,14 @@ function connect(state, send, normalize) {
         ...parts.input.attrs,
         dir: state.context.dir,
         disabled: state.context.disabled,
-        "data-disabled": (0, import_dom_query2.dataAttr)(state.context.disabled),
-        "data-complete": (0, import_dom_query2.dataAttr)(complete),
+        "data-disabled": domQuery.dataAttr(state.context.disabled),
+        "data-complete": domQuery.dataAttr(complete),
         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": (0, import_dom_query2.ariaAttr)(invalid),
-        "data-invalid": (0, import_dom_query2.dataAttr)(invalid),
+        "aria-invalid": domQuery.ariaAttr(invalid),
+        "data-invalid": domQuery.dataAttr(invalid),
         type: state.context.mask ? "password" : inputType,
         defaultValue: state.context.value[index] || "",
         readOnly: state.context.readOnly,
@@ -171,7 +143,7 @@ function connect(state, send, normalize) {
         placeholder: focusedIndex === index ? "" : state.context.placeholder,
         onBeforeInput(event) {
           try {
-            const value = (0, import_dom_query2.getBeforeInputValue)(event);
+            const value = domQuery.getBeforeInputValue(event);
             const isValid = isValidValue(state.context, value);
             if (!isValid) {
               send({ type: "VALUE.INVALID", value });
@@ -184,7 +156,7 @@ function connect(state, send, normalize) {
           }
         },
         onChange(event) {
-          const evt = (0, import_dom_event.getNativeEvent)(event);
+          const evt = domEvent.getNativeEvent(event);
           const { value } = event.currentTarget;
           if (evt.inputType === "insertFromPaste" || value.length > 2) {
             send({ type: "INPUT.PASTE", value });
@@ -200,8 +172,8 @@ function connect(state, send, normalize) {
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return;
-          if ((0, import_dom_query2.isComposingEvent)(event)) return;
-          if ((0, import_dom_event.isModifierKey)(event)) return;
+          if (domQuery.isComposingEvent(event)) return;
+          if (domEvent.isModifierKey(event)) return;
           const keyMap = {
             Backspace() {
               send("INPUT.BACKSPACE");
@@ -219,7 +191,7 @@ function connect(state, send, normalize) {
               send("INPUT.ENTER");
             }
           };
-          const exec = keyMap[(0, import_dom_event.getEventKey)(event, state.context)];
+          const exec = keyMap[domEvent.getEventKey(event, state.context)];
           if (exec) {
             exec(event);
             event.preventDefault();
@@ -235,15 +207,9 @@ function connect(state, send, normalize) {
     }
   };
 }
-
-// src/pin-input.machine.ts
-var import_core = require("@zag-js/core");
-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");
 function machine(userContext) {
-  const ctx = (0, import_utils2.compact)(userContext);
-  return (0, import_core.createMachine)(
+  const ctx = utils.compact(userContext);
+  return core.createMachine(
     {
       id: "pin-input",
       initial: "idle",
@@ -266,7 +232,7 @@ function machine(userContext) {
         valueAsString: (ctx2) => ctx2.value.join(""),
         focusedValue: (ctx2) => ctx2.value[ctx2.focusedIndex] || ""
       },
-      entry: (0, import_core.choose)([
+      entry: core.choose([
         {
           guard: "autoFocus",
           actions: ["setupValue", "setFocusIndexToFirst"]
@@ -370,7 +336,7 @@ function machine(userContext) {
         },
         selectInputIfNeeded(ctx2) {
           if (!ctx2.selectOnFocus || ctx2.focusedIndex === -1) return;
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             dom.getFocusedInputEl(ctx2)?.select();
           });
         },
@@ -415,7 +381,7 @@ function machine(userContext) {
           });
         },
         setPastedValue(ctx2, evt) {
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             const startIndex = Math.min(ctx2.focusedIndex, ctx2.filledValueLength);
             const left = startIndex > 0 ? ctx2.valueAsString.substring(0, ctx2.focusedIndex) : "";
             const right = evt.value.substring(0, ctx2.valueLength - startIndex);
@@ -444,13 +410,13 @@ function machine(userContext) {
           ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
         },
         setLastValueFocusIndex(ctx2) {
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
           });
         },
         blurFocusedInputIfNeeded(ctx2) {
           if (!ctx2.blurOnComplete) return;
-          (0, import_dom_query3.raf)(() => {
+          domQuery.raf(() => {
             dom.getFocusedInputEl(ctx2)?.blur();
           });
         },
@@ -482,25 +448,22 @@ var invoke = {
       valueAsString: ctx.valueAsString
     });
     const inputEl = dom.getHiddenInputEl(ctx);
-    (0, import_form_utils.dispatchInputValueEvent)(inputEl, { value: ctx.valueAsString });
+    formUtils.dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
   }
 };
 var set = {
   value(ctx, value) {
-    if ((0, import_utils2.isEqual)(ctx.value, value)) return;
+    if (utils.isEqual(ctx.value, value)) return;
     assignValue(ctx, value);
     invoke.change(ctx);
   },
   valueAtIndex(ctx, index, value) {
-    if ((0, import_utils2.isEqual)(ctx.value[index], value)) return;
+    if (utils.isEqual(ctx.value[index], value)) return;
     ctx.value[index] = value;
     invoke.change(ctx);
   }
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  connect,
-  machine
-});
-//# sourceMappingURL=index.js.map
+
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;

package/dist/index.mjs

@@ -1,15 +1,13 @@
+import { createAnatomy } from '@zag-js/anatomy';
+import { getNativeEvent, isModifierKey, getEventKey } from '@zag-js/dom-event';
+import { createScope, queryAll, dataAttr, visuallyHiddenStyle, ariaAttr, getBeforeInputValue, isComposingEvent, raf } from '@zag-js/dom-query';
+import { invariant, compact, isEqual } from '@zag-js/utils';
+import { createMachine, choose } from '@zag-js/core';
+import { dispatchInputValueEvent } from '@zag-js/form-utils';
+
 // src/pin-input.anatomy.ts
-import { createAnatomy } from "@zag-js/anatomy";
 var anatomy = createAnatomy("pinInput").parts("root", "label", "input", "control");
 var parts = anatomy.build();
-
-// src/pin-input.connect.ts
-import { getEventKey, getNativeEvent, isModifierKey } from "@zag-js/dom-event";
-import { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from "@zag-js/dom-query";
-import { invariant } from "@zag-js/utils";
-
-// 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}`,
@@ -207,12 +205,6 @@ function connect(state, send, normalize) {
     }
   };
 }
-
-// src/pin-input.machine.ts
-import { choose, createMachine } from "@zag-js/core";
-import { raf } from "@zag-js/dom-query";
-import { dispatchInputValueEvent } from "@zag-js/form-utils";
-import { compact, isEqual } from "@zag-js/utils";
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -469,9 +461,5 @@ var set = {
     invoke.change(ctx);
   }
 };
-export {
-  anatomy,
-  connect,
-  machine
-};
-//# sourceMappingURL=index.mjs.map
+
+export { anatomy, connect, machine };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.70.0",
+  "version": "0.71.0",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -17,8 +17,7 @@
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/pin-input",
   "sideEffects": false,
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -27,13 +26,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.70.0",
-    "@zag-js/dom-query": "0.70.0",
-    "@zag-js/dom-event": "0.70.0",
-    "@zag-js/form-utils": "0.70.0",
-    "@zag-js/utils": "0.70.0",
-    "@zag-js/core": "0.70.0",
-    "@zag-js/types": "0.70.0"
+    "@zag-js/anatomy": "0.71.0",
+    "@zag-js/dom-query": "0.71.0",
+    "@zag-js/dom-event": "0.71.0",
+    "@zag-js/form-utils": "0.71.0",
+    "@zag-js/utils": "0.71.0",
+    "@zag-js/core": "0.71.0",
+    "@zag-js/types": "0.71.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.ts","../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.ts","../src/pin-input.utils.ts","../src/pin-input.machine.ts"],"sourcesContent":["export { anatomy } from \"./pin-input.anatomy\"\nexport { connect } from \"./pin-input.connect\"\nexport { machine } from \"./pin-input.machine\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  InputProps,\n  IntlTranslations,\n  ValueChangeDetails,\n  ValueInvalidDetails,\n} from \"./pin-input.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\nimport { isValidValue } from \"./pin-input.utils\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const complete = state.context.isValueComplete\n  const invalid = state.context.invalid\n  const focusedIndex = state.context.focusedIndex\n  const translations = state.context.translations\n\n  function focus() {\n    dom.getFirstInputEl(state.context)?.focus()\n  }\n\n  return {\n    focus,\n    value: state.context.value,\n    valueAsString: state.context.valueAsString,\n    complete: complete,\n    setValue(value) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"VALUE.SET\", value })\n    },\n    clearValue() {\n      send({ type: \"VALUE.CLEAR\" })\n    },\n    setValueAtIndex(index, value) {\n      send({ type: \"VALUE.SET\", value, index })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        dir: state.context.dir,\n        ...parts.root.attrs,\n        id: dom.getRootId(state.context),\n        \"data-invalid\": dataAttr(invalid),\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        \"data-readonly\": dataAttr(state.context.readOnly),\n      })\n    },\n\n    getLabelProps() {\n      return normalize.label({\n        ...parts.label.attrs,\n        dir: state.context.dir,\n        htmlFor: dom.getHiddenInputId(state.context),\n        id: dom.getLabelId(state.context),\n        \"data-invalid\": dataAttr(invalid),\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        \"data-readonly\": dataAttr(state.context.readOnly),\n        onClick(event) {\n          event.preventDefault()\n          focus()\n        },\n      })\n    },\n\n    getHiddenInputProps() {\n      return normalize.input({\n        \"aria-hidden\": true,\n        type: \"text\",\n        tabIndex: -1,\n        id: dom.getHiddenInputId(state.context),\n        readOnly: state.context.readOnly,\n        disabled: state.context.disabled,\n        required: state.context.required,\n        name: state.context.name,\n        form: state.context.form,\n        style: visuallyHiddenStyle,\n        maxLength: state.context.valueLength,\n        defaultValue: state.context.valueAsString,\n      })\n    },\n\n    getControlProps() {\n      return normalize.element({\n        ...parts.control.attrs,\n        dir: state.context.dir,\n        id: dom.getControlId(state.context),\n      })\n    },\n\n    getInputProps(props) {\n      const { index } = props\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        dir: state.context.dir,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        id: dom.getInputId(state.context, index.toString()),\n        \"data-ownedby\": dom.getRootId(state.context),\n        \"aria-label\": translations.inputLabel(index, state.context.valueLength),\n        inputMode: state.context.otp || state.context.type === \"numeric\" ? \"numeric\" : \"text\",\n        \"aria-invalid\": ariaAttr(invalid),\n        \"data-invalid\": dataAttr(invalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        readOnly: state.context.readOnly,\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onBeforeInput(event) {\n          try {\n            const value = getBeforeInputValue(event)\n            const isValid = isValidValue(state.context, value)\n            if (!isValid) {\n              send({ type: \"VALUE.INVALID\", value })\n              event.preventDefault()\n            }\n\n            // select the text so paste always replaces the\n            // current input's value regardless of cursor position\n            if (value.length > 2) {\n              event.currentTarget.setSelectionRange(0, 1, \"forward\")\n            }\n          } catch {\n            // noop\n          }\n        },\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"INPUT.PASTE\", value })\n            // prevent multiple characters being pasted\n            // into a single input\n            event.target.value = value[0]\n\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"INPUT.BACKSPACE\")\n            return\n          }\n\n          send({ type: \"INPUT.CHANGE\", value, index })\n        },\n        onKeyDown(event) {\n          if (event.defaultPrevented) return\n\n          if (isComposingEvent(event)) return\n          if (isModifierKey(event)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"INPUT.BACKSPACE\")\n            },\n            Delete() {\n              send(\"INPUT.DELETE\")\n            },\n            ArrowLeft() {\n              send(\"INPUT.ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"INPUT.ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"INPUT.ENTER\")\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n        onFocus() {\n          send({ type: \"INPUT.FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"INPUT.BLUR\", index })\n        },\n      })\n    },\n  }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./pin-input.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,\n  getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,\n  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,\n  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getInputEls: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getRootId(ctx))\n    const selector = `input[data-ownedby=${ownerId}]`\n    return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n  },\n  getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),\n  getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import type { MachineContext } from \"./pin-input.types\"\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nexport function isValidType(ctx: MachineContext, value: string) {\n  if (!ctx.type) return true\n  return !!REGEX[ctx.type]?.test(value)\n}\n\nexport function isValidValue(ctx: MachineContext, value: string) {\n  if (!ctx.pattern) return isValidType(ctx, value)\n  const regex = new RegExp(ctx.pattern, \"g\")\n  return regex.test(value)\n}\n","import { choose, createMachine } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: \"idle\",\n      context: {\n        value: [],\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\n        focusedIndex: -1,\n        translations: {\n          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,\n          ...ctx.translations,\n        },\n      },\n\n      computed: {\n        valueLength: (ctx) => ctx.value.length,\n        filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== \"\").length,\n        isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,\n        valueAsString: (ctx) => ctx.value.join(\"\"),\n        focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || \"\",\n      },\n\n      entry: choose([\n        {\n          guard: \"autoFocus\",\n          actions: [\"setupValue\", \"setFocusIndexToFirst\"],\n        },\n        { actions: [\"setupValue\"] },\n      ]),\n\n      watch: {\n        focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n        value: [\"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      on: {\n        \"VALUE.SET\": [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\"],\n          },\n          { actions: [\"setValue\"] },\n        ],\n        \"VALUE.CLEAR\": {\n          actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            \"INPUT.CHANGE\": [\n              {\n                guard: \"isFinalValue\",\n                actions: [\"setFocusedValue\", \"syncInputValue\"],\n              },\n              {\n                actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            \"INPUT.PASTE\": {\n              actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n            },\n            \"INPUT.BLUR\": {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            \"INPUT.DELETE\": {\n              guard: \"hasValue\",\n              actions: \"clearFocusedValue\",\n            },\n            \"INPUT.ARROW_LEFT\": {\n              actions: \"setPrevFocusedIndex\",\n            },\n            \"INPUT.ARROW_RIGHT\": {\n              actions: \"setNextFocusedIndex\",\n            },\n            \"INPUT.BACKSPACE\": [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n              },\n            ],\n            \"INPUT.ENTER\": {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            \"VALUE.INVALID\": {\n              actions: \"invokeOnInvalid\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        autoFocus: (ctx) => !!ctx.autoFocus,\n        isValueEmpty: (_ctx, evt) => evt.value === \"\",\n        hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== \"\",\n        isValueComplete: (ctx) => ctx.isValueComplete,\n        isFinalValue: (ctx) =>\n          ctx.filledValueLength + 1 === ctx.valueLength &&\n          ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex,\n        hasIndex: (_ctx, evt) => evt.index !== undefined,\n        isDisabled: (ctx) => !!ctx.disabled,\n      },\n      actions: {\n        setupValue(ctx) {\n          if (ctx.value.length) return\n          const inputEls = dom.getInputEls(ctx)\n          const emptyValues = Array.from<string>({ length: inputEls.length }).fill(\"\")\n          assignValue(ctx, emptyValues)\n        },\n        focusInput(ctx) {\n          if (ctx.focusedIndex === -1) return\n          dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })\n        },\n        selectInputIfNeeded(ctx) {\n          if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.select()\n          })\n        },\n        invokeOnComplete(ctx) {\n          if (!ctx.isValueComplete) return\n          ctx.onValueComplete?.({\n            value: Array.from(ctx.value),\n            valueAsString: ctx.valueAsString,\n          })\n        },\n        invokeOnInvalid(ctx, evt) {\n          ctx.onValueInvalid?.({\n            value: evt.value,\n            index: ctx.focusedIndex,\n          })\n        },\n        clearFocusedIndex(ctx) {\n          ctx.focusedIndex = -1\n        },\n        setFocusedIndex(ctx, evt) {\n          ctx.focusedIndex = evt.index\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        setFocusedValue(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)\n        },\n        revertInputValue(ctx) {\n          const inputEl = dom.getFocusedInputEl(ctx)\n          dom.setValue(inputEl, ctx.focusedValue)\n        },\n        syncInputValue(ctx, evt) {\n          const inputEl = dom.getInputEl(ctx, evt.index.toString())\n          dom.setValue(inputEl, ctx.value[evt.index])\n        },\n        syncInputElements(ctx) {\n          const inputEls = dom.getInputEls(ctx)\n          inputEls.forEach((inputEl, index) => {\n            dom.setValue(inputEl, ctx.value[index])\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)\n\n            // keep value left of cursor\n            // replace value from curor to end with pasted text\n            const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : \"\"\n            const right = evt.value.substring(0, ctx.valueLength - startIndex)\n\n            const value = left + right\n\n            set.value(ctx, value.split(\"\"))\n          })\n        },\n        setValueAtIndex(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, evt.index, nextValue)\n        },\n        clearValue(ctx) {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          set.value(ctx, nextValue)\n        },\n        clearFocusedValue(ctx) {\n          set.valueAtIndex(ctx, ctx.focusedIndex, \"\")\n        },\n        setFocusIndexToFirst(ctx) {\n          ctx.focusedIndex = 0\n        },\n        setNextFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)\n        },\n        setPrevFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)\n        },\n        setLastValueFocusIndex(ctx) {\n          raf(() => {\n            ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)\n          })\n        },\n        blurFocusedInputIfNeeded(ctx) {\n          if (!ctx.blurOnComplete) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.blur()\n          })\n        },\n        requestFormSubmit(ctx) {\n          if (!ctx.name || !ctx.isValueComplete) return\n          const inputEl = dom.getHiddenInputEl(ctx)\n          inputEl?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nfunction assignValue(ctx: MachineContext, value: string | string[]) {\n  const arr = Array.isArray(value) ? value : value.split(\"\").filter(Boolean)\n  arr.forEach((value, index) => {\n    ctx.value[index] = value\n  })\n}\n\nfunction getNextValue(current: string, next: string) {\n  let nextValue = next\n  if (current[0] === next[0]) nextValue = next[1]\n  else if (current[0] === next[1]) nextValue = next[0]\n  return nextValue.split(\"\")[nextValue.length - 1]\n}\n\nconst invoke = {\n  change(ctx: MachineContext) {\n    // callback\n    ctx.onValueChange?.({\n      value: Array.from(ctx.value),\n      valueAsString: ctx.valueAsString,\n    })\n\n    // form event\n    const inputEl = dom.getHiddenInputEl(ctx)\n    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, value: string[]) {\n    if (isEqual(ctx.value, value)) return\n    assignValue(ctx, value)\n    invoke.change(ctx)\n  },\n  valueAtIndex(ctx: MachineContext, index: number, value: string) {\n    if (isEqual(ctx.value[index], value)) return\n    ctx.value[index] = value\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_utils","ctx","value"]}

package/dist/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.ts","../src/pin-input.utils.ts","../src/pin-input.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\nimport { isValidValue } from \"./pin-input.utils\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const complete = state.context.isValueComplete\n  const invalid = state.context.invalid\n  const focusedIndex = state.context.focusedIndex\n  const translations = state.context.translations\n\n  function focus() {\n    dom.getFirstInputEl(state.context)?.focus()\n  }\n\n  return {\n    focus,\n    value: state.context.value,\n    valueAsString: state.context.valueAsString,\n    complete: complete,\n    setValue(value) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"VALUE.SET\", value })\n    },\n    clearValue() {\n      send({ type: \"VALUE.CLEAR\" })\n    },\n    setValueAtIndex(index, value) {\n      send({ type: \"VALUE.SET\", value, index })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        dir: state.context.dir,\n        ...parts.root.attrs,\n        id: dom.getRootId(state.context),\n        \"data-invalid\": dataAttr(invalid),\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        \"data-readonly\": dataAttr(state.context.readOnly),\n      })\n    },\n\n    getLabelProps() {\n      return normalize.label({\n        ...parts.label.attrs,\n        dir: state.context.dir,\n        htmlFor: dom.getHiddenInputId(state.context),\n        id: dom.getLabelId(state.context),\n        \"data-invalid\": dataAttr(invalid),\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        \"data-readonly\": dataAttr(state.context.readOnly),\n        onClick(event) {\n          event.preventDefault()\n          focus()\n        },\n      })\n    },\n\n    getHiddenInputProps() {\n      return normalize.input({\n        \"aria-hidden\": true,\n        type: \"text\",\n        tabIndex: -1,\n        id: dom.getHiddenInputId(state.context),\n        readOnly: state.context.readOnly,\n        disabled: state.context.disabled,\n        required: state.context.required,\n        name: state.context.name,\n        form: state.context.form,\n        style: visuallyHiddenStyle,\n        maxLength: state.context.valueLength,\n        defaultValue: state.context.valueAsString,\n      })\n    },\n\n    getControlProps() {\n      return normalize.element({\n        ...parts.control.attrs,\n        dir: state.context.dir,\n        id: dom.getControlId(state.context),\n      })\n    },\n\n    getInputProps(props) {\n      const { index } = props\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        dir: state.context.dir,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        id: dom.getInputId(state.context, index.toString()),\n        \"data-ownedby\": dom.getRootId(state.context),\n        \"aria-label\": translations.inputLabel(index, state.context.valueLength),\n        inputMode: state.context.otp || state.context.type === \"numeric\" ? \"numeric\" : \"text\",\n        \"aria-invalid\": ariaAttr(invalid),\n        \"data-invalid\": dataAttr(invalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        readOnly: state.context.readOnly,\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onBeforeInput(event) {\n          try {\n            const value = getBeforeInputValue(event)\n            const isValid = isValidValue(state.context, value)\n            if (!isValid) {\n              send({ type: \"VALUE.INVALID\", value })\n              event.preventDefault()\n            }\n\n            // select the text so paste always replaces the\n            // current input's value regardless of cursor position\n            if (value.length > 2) {\n              event.currentTarget.setSelectionRange(0, 1, \"forward\")\n            }\n          } catch {\n            // noop\n          }\n        },\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"INPUT.PASTE\", value })\n            // prevent multiple characters being pasted\n            // into a single input\n            event.target.value = value[0]\n\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"INPUT.BACKSPACE\")\n            return\n          }\n\n          send({ type: \"INPUT.CHANGE\", value, index })\n        },\n        onKeyDown(event) {\n          if (event.defaultPrevented) return\n\n          if (isComposingEvent(event)) return\n          if (isModifierKey(event)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"INPUT.BACKSPACE\")\n            },\n            Delete() {\n              send(\"INPUT.DELETE\")\n            },\n            ArrowLeft() {\n              send(\"INPUT.ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"INPUT.ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"INPUT.ENTER\")\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n        onFocus() {\n          send({ type: \"INPUT.FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"INPUT.BLUR\", index })\n        },\n      })\n    },\n  }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./pin-input.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,\n  getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,\n  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,\n  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getInputEls: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getRootId(ctx))\n    const selector = `input[data-ownedby=${ownerId}]`\n    return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n  },\n  getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),\n  getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import type { MachineContext } from \"./pin-input.types\"\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nexport function isValidType(ctx: MachineContext, value: string) {\n  if (!ctx.type) return true\n  return !!REGEX[ctx.type]?.test(value)\n}\n\nexport function isValidValue(ctx: MachineContext, value: string) {\n  if (!ctx.pattern) return isValidType(ctx, value)\n  const regex = new RegExp(ctx.pattern, \"g\")\n  return regex.test(value)\n}\n","import { choose, createMachine } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: \"idle\",\n      context: {\n        value: [],\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\n        focusedIndex: -1,\n        translations: {\n          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,\n          ...ctx.translations,\n        },\n      },\n\n      computed: {\n        valueLength: (ctx) => ctx.value.length,\n        filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== \"\").length,\n        isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,\n        valueAsString: (ctx) => ctx.value.join(\"\"),\n        focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || \"\",\n      },\n\n      entry: choose([\n        {\n          guard: \"autoFocus\",\n          actions: [\"setupValue\", \"setFocusIndexToFirst\"],\n        },\n        { actions: [\"setupValue\"] },\n      ]),\n\n      watch: {\n        focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n        value: [\"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      on: {\n        \"VALUE.SET\": [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\"],\n          },\n          { actions: [\"setValue\"] },\n        ],\n        \"VALUE.CLEAR\": {\n          actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            \"INPUT.CHANGE\": [\n              {\n                guard: \"isFinalValue\",\n                actions: [\"setFocusedValue\", \"syncInputValue\"],\n              },\n              {\n                actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            \"INPUT.PASTE\": {\n              actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n            },\n            \"INPUT.BLUR\": {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            \"INPUT.DELETE\": {\n              guard: \"hasValue\",\n              actions: \"clearFocusedValue\",\n            },\n            \"INPUT.ARROW_LEFT\": {\n              actions: \"setPrevFocusedIndex\",\n            },\n            \"INPUT.ARROW_RIGHT\": {\n              actions: \"setNextFocusedIndex\",\n            },\n            \"INPUT.BACKSPACE\": [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n              },\n            ],\n            \"INPUT.ENTER\": {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            \"VALUE.INVALID\": {\n              actions: \"invokeOnInvalid\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        autoFocus: (ctx) => !!ctx.autoFocus,\n        isValueEmpty: (_ctx, evt) => evt.value === \"\",\n        hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== \"\",\n        isValueComplete: (ctx) => ctx.isValueComplete,\n        isFinalValue: (ctx) =>\n          ctx.filledValueLength + 1 === ctx.valueLength &&\n          ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex,\n        hasIndex: (_ctx, evt) => evt.index !== undefined,\n        isDisabled: (ctx) => !!ctx.disabled,\n      },\n      actions: {\n        setupValue(ctx) {\n          if (ctx.value.length) return\n          const inputEls = dom.getInputEls(ctx)\n          const emptyValues = Array.from<string>({ length: inputEls.length }).fill(\"\")\n          assignValue(ctx, emptyValues)\n        },\n        focusInput(ctx) {\n          if (ctx.focusedIndex === -1) return\n          dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })\n        },\n        selectInputIfNeeded(ctx) {\n          if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.select()\n          })\n        },\n        invokeOnComplete(ctx) {\n          if (!ctx.isValueComplete) return\n          ctx.onValueComplete?.({\n            value: Array.from(ctx.value),\n            valueAsString: ctx.valueAsString,\n          })\n        },\n        invokeOnInvalid(ctx, evt) {\n          ctx.onValueInvalid?.({\n            value: evt.value,\n            index: ctx.focusedIndex,\n          })\n        },\n        clearFocusedIndex(ctx) {\n          ctx.focusedIndex = -1\n        },\n        setFocusedIndex(ctx, evt) {\n          ctx.focusedIndex = evt.index\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        setFocusedValue(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)\n        },\n        revertInputValue(ctx) {\n          const inputEl = dom.getFocusedInputEl(ctx)\n          dom.setValue(inputEl, ctx.focusedValue)\n        },\n        syncInputValue(ctx, evt) {\n          const inputEl = dom.getInputEl(ctx, evt.index.toString())\n          dom.setValue(inputEl, ctx.value[evt.index])\n        },\n        syncInputElements(ctx) {\n          const inputEls = dom.getInputEls(ctx)\n          inputEls.forEach((inputEl, index) => {\n            dom.setValue(inputEl, ctx.value[index])\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)\n\n            // keep value left of cursor\n            // replace value from curor to end with pasted text\n            const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : \"\"\n            const right = evt.value.substring(0, ctx.valueLength - startIndex)\n\n            const value = left + right\n\n            set.value(ctx, value.split(\"\"))\n          })\n        },\n        setValueAtIndex(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, evt.index, nextValue)\n        },\n        clearValue(ctx) {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          set.value(ctx, nextValue)\n        },\n        clearFocusedValue(ctx) {\n          set.valueAtIndex(ctx, ctx.focusedIndex, \"\")\n        },\n        setFocusIndexToFirst(ctx) {\n          ctx.focusedIndex = 0\n        },\n        setNextFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)\n        },\n        setPrevFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)\n        },\n        setLastValueFocusIndex(ctx) {\n          raf(() => {\n            ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)\n          })\n        },\n        blurFocusedInputIfNeeded(ctx) {\n          if (!ctx.blurOnComplete) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.blur()\n          })\n        },\n        requestFormSubmit(ctx) {\n          if (!ctx.name || !ctx.isValueComplete) return\n          const inputEl = dom.getHiddenInputEl(ctx)\n          inputEl?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nfunction assignValue(ctx: MachineContext, value: string | string[]) {\n  const arr = Array.isArray(value) ? value : value.split(\"\").filter(Boolean)\n  arr.forEach((value, index) => {\n    ctx.value[index] = value\n  })\n}\n\nfunction getNextValue(current: string, next: string) {\n  let nextValue = next\n  if (current[0] === next[0]) nextValue = next[1]\n  else if (current[0] === next[1]) nextValue = next[0]\n  return nextValue.split(\"\")[nextValue.length - 1]\n}\n\nconst invoke = {\n  change(ctx: MachineContext) {\n    // callback\n    ctx.onValueChange?.({\n      value: Array.from(ctx.value),\n      valueAsString: ctx.valueAsString,\n    })\n\n    // form event\n    const inputEl = dom.getHiddenInputEl(ctx)\n    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, value: string[]) {\n    if (isEqual(ctx.value, value)) return\n    assignValue(ctx, value)\n    invoke.change(ctx)\n  },\n  valueAtIndex(ctx: MachineContext, index: number, value: string) {\n    if (isEqual(ctx.value[index], value)) return\n    ctx.value[index] = value\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"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","names":["ctx","value"]}

package/src/index.ts

@@ -1,12 +0,0 @@
-export { anatomy } from "./pin-input.anatomy"
-export { connect } from "./pin-input.connect"
-export { machine } from "./pin-input.machine"
-export type {
-  MachineApi as Api,
-  UserDefinedContext as Context,
-  ElementIds,
-  InputProps,
-  IntlTranslations,
-  ValueChangeDetails,
-  ValueInvalidDetails,
-} from "./pin-input.types"

package/src/pin-input.anatomy.ts

@@ -1,4 +0,0 @@
-import { createAnatomy } from "@zag-js/anatomy"
-
-export const anatomy = createAnatomy("pinInput").parts("root", "label", "input", "control")
-export const parts = anatomy.build()

package/src/pin-input.connect.ts

@@ -1,192 +0,0 @@
-import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from "@zag-js/dom-event"
-import { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from "@zag-js/dom-query"
-import type { NormalizeProps, PropTypes } from "@zag-js/types"
-import { invariant } from "@zag-js/utils"
-import { parts } from "./pin-input.anatomy"
-import { dom } from "./pin-input.dom"
-import type { MachineApi, Send, State } from "./pin-input.types"
-import { isValidValue } from "./pin-input.utils"
-
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {
-  const complete = state.context.isValueComplete
-  const invalid = state.context.invalid
-  const focusedIndex = state.context.focusedIndex
-  const translations = state.context.translations
-
-  function focus() {
-    dom.getFirstInputEl(state.context)?.focus()
-  }
-
-  return {
-    focus,
-    value: state.context.value,
-    valueAsString: state.context.valueAsString,
-    complete: complete,
-    setValue(value) {
-      if (!Array.isArray(value)) {
-        invariant("[pin-input/setValue] value must be an array")
-      }
-      send({ type: "VALUE.SET", value })
-    },
-    clearValue() {
-      send({ type: "VALUE.CLEAR" })
-    },
-    setValueAtIndex(index, value) {
-      send({ type: "VALUE.SET", value, index })
-    },
-
-    getRootProps() {
-      return normalize.element({
-        dir: state.context.dir,
-        ...parts.root.attrs,
-        id: dom.getRootId(state.context),
-        "data-invalid": dataAttr(invalid),
-        "data-disabled": dataAttr(state.context.disabled),
-        "data-complete": dataAttr(complete),
-        "data-readonly": dataAttr(state.context.readOnly),
-      })
-    },
-
-    getLabelProps() {
-      return normalize.label({
-        ...parts.label.attrs,
-        dir: state.context.dir,
-        htmlFor: dom.getHiddenInputId(state.context),
-        id: dom.getLabelId(state.context),
-        "data-invalid": dataAttr(invalid),
-        "data-disabled": dataAttr(state.context.disabled),
-        "data-complete": dataAttr(complete),
-        "data-readonly": dataAttr(state.context.readOnly),
-        onClick(event) {
-          event.preventDefault()
-          focus()
-        },
-      })
-    },
-
-    getHiddenInputProps() {
-      return normalize.input({
-        "aria-hidden": true,
-        type: "text",
-        tabIndex: -1,
-        id: dom.getHiddenInputId(state.context),
-        readOnly: state.context.readOnly,
-        disabled: state.context.disabled,
-        required: state.context.required,
-        name: state.context.name,
-        form: state.context.form,
-        style: visuallyHiddenStyle,
-        maxLength: state.context.valueLength,
-        defaultValue: state.context.valueAsString,
-      })
-    },
-
-    getControlProps() {
-      return normalize.element({
-        ...parts.control.attrs,
-        dir: state.context.dir,
-        id: dom.getControlId(state.context),
-      })
-    },
-
-    getInputProps(props) {
-      const { index } = props
-      const inputType = state.context.type === "numeric" ? "tel" : "text"
-      return normalize.input({
-        ...parts.input.attrs,
-        dir: state.context.dir,
-        disabled: state.context.disabled,
-        "data-disabled": dataAttr(state.context.disabled),
-        "data-complete": dataAttr(complete),
-        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(invalid),
-        "data-invalid": dataAttr(invalid),
-        type: state.context.mask ? "password" : inputType,
-        defaultValue: state.context.value[index] || "",
-        readOnly: state.context.readOnly,
-        autoCapitalize: "none",
-        autoComplete: state.context.otp ? "one-time-code" : "off",
-        placeholder: focusedIndex === index ? "" : state.context.placeholder,
-        onBeforeInput(event) {
-          try {
-            const value = getBeforeInputValue(event)
-            const isValid = isValidValue(state.context, value)
-            if (!isValid) {
-              send({ type: "VALUE.INVALID", value })
-              event.preventDefault()
-            }
-
-            // select the text so paste always replaces the
-            // current input's value regardless of cursor position
-            if (value.length > 2) {
-              event.currentTarget.setSelectionRange(0, 1, "forward")
-            }
-          } catch {
-            // noop
-          }
-        },
-        onChange(event) {
-          const evt = getNativeEvent(event)
-          const { value } = event.currentTarget
-
-          if (evt.inputType === "insertFromPaste" || value.length > 2) {
-            send({ type: "INPUT.PASTE", value })
-            // prevent multiple characters being pasted
-            // into a single input
-            event.target.value = value[0]
-
-            event.preventDefault()
-            return
-          }
-
-          if (evt.inputType === "deleteContentBackward") {
-            send("INPUT.BACKSPACE")
-            return
-          }
-
-          send({ type: "INPUT.CHANGE", value, index })
-        },
-        onKeyDown(event) {
-          if (event.defaultPrevented) return
-
-          if (isComposingEvent(event)) return
-          if (isModifierKey(event)) return
-
-          const keyMap: EventKeyMap = {
-            Backspace() {
-              send("INPUT.BACKSPACE")
-            },
-            Delete() {
-              send("INPUT.DELETE")
-            },
-            ArrowLeft() {
-              send("INPUT.ARROW_LEFT")
-            },
-            ArrowRight() {
-              send("INPUT.ARROW_RIGHT")
-            },
-            Enter() {
-              send("INPUT.ENTER")
-            },
-          }
-
-          const exec = keyMap[getEventKey(event, state.context)]
-
-          if (exec) {
-            exec(event)
-            event.preventDefault()
-          }
-        },
-        onFocus() {
-          send({ type: "INPUT.FOCUS", index })
-        },
-        onBlur() {
-          send({ type: "INPUT.BLUR", index })
-        },
-      })
-    },
-  }
-}

package/src/pin-input.dom.ts

@@ -1,21 +0,0 @@
-import { createScope, queryAll } from "@zag-js/dom-query"
-import type { MachineContext as Ctx } from "./pin-input.types"
-
-export const dom = createScope({
-  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
-  getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
-  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
-  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
-  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
-
-  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getInputEls: (ctx: Ctx) => {
-    const ownerId = CSS.escape(dom.getRootId(ctx))
-    const selector = `input[data-ownedby=${ownerId}]`
-    return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)
-  },
-  getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),
-  getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
-  getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],
-  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),
-})

package/src/pin-input.machine.ts

@@ -1,282 +0,0 @@
-import { choose, createMachine } from "@zag-js/core"
-import { raf } from "@zag-js/dom-query"
-import { dispatchInputValueEvent } from "@zag-js/form-utils"
-import { compact, isEqual } from "@zag-js/utils"
-import { dom } from "./pin-input.dom"
-import type { MachineContext, MachineState, UserDefinedContext } from "./pin-input.types"
-
-export function machine(userContext: UserDefinedContext) {
-  const ctx = compact(userContext)
-  return createMachine<MachineContext, MachineState>(
-    {
-      id: "pin-input",
-      initial: "idle",
-      context: {
-        value: [],
-        placeholder: "○",
-        otp: false,
-        type: "numeric",
-        ...ctx,
-        focusedIndex: -1,
-        translations: {
-          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
-          ...ctx.translations,
-        },
-      },
-
-      computed: {
-        valueLength: (ctx) => ctx.value.length,
-        filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== "").length,
-        isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,
-        valueAsString: (ctx) => ctx.value.join(""),
-        focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || "",
-      },
-
-      entry: choose([
-        {
-          guard: "autoFocus",
-          actions: ["setupValue", "setFocusIndexToFirst"],
-        },
-        { actions: ["setupValue"] },
-      ]),
-
-      watch: {
-        focusedIndex: ["focusInput", "selectInputIfNeeded"],
-        value: ["syncInputElements"],
-        isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"],
-      },
-
-      on: {
-        "VALUE.SET": [
-          {
-            guard: "hasIndex",
-            actions: ["setValueAtIndex"],
-          },
-          { actions: ["setValue"] },
-        ],
-        "VALUE.CLEAR": {
-          actions: ["clearValue", "setFocusIndexToFirst"],
-        },
-      },
-
-      states: {
-        idle: {
-          on: {
-            "INPUT.FOCUS": {
-              target: "focused",
-              actions: "setFocusedIndex",
-            },
-          },
-        },
-        focused: {
-          on: {
-            "INPUT.CHANGE": [
-              {
-                guard: "isFinalValue",
-                actions: ["setFocusedValue", "syncInputValue"],
-              },
-              {
-                actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"],
-              },
-            ],
-            "INPUT.PASTE": {
-              actions: ["setPastedValue", "setLastValueFocusIndex"],
-            },
-            "INPUT.BLUR": {
-              target: "idle",
-              actions: "clearFocusedIndex",
-            },
-            "INPUT.DELETE": {
-              guard: "hasValue",
-              actions: "clearFocusedValue",
-            },
-            "INPUT.ARROW_LEFT": {
-              actions: "setPrevFocusedIndex",
-            },
-            "INPUT.ARROW_RIGHT": {
-              actions: "setNextFocusedIndex",
-            },
-            "INPUT.BACKSPACE": [
-              {
-                guard: "hasValue",
-                actions: ["clearFocusedValue"],
-              },
-              {
-                actions: ["setPrevFocusedIndex", "clearFocusedValue"],
-              },
-            ],
-            "INPUT.ENTER": {
-              guard: "isValueComplete",
-              actions: "requestFormSubmit",
-            },
-            "VALUE.INVALID": {
-              actions: "invokeOnInvalid",
-            },
-          },
-        },
-      },
-    },
-    {
-      guards: {
-        autoFocus: (ctx) => !!ctx.autoFocus,
-        isValueEmpty: (_ctx, evt) => evt.value === "",
-        hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== "",
-        isValueComplete: (ctx) => ctx.isValueComplete,
-        isFinalValue: (ctx) =>
-          ctx.filledValueLength + 1 === ctx.valueLength &&
-          ctx.value.findIndex((v) => v.trim() === "") === ctx.focusedIndex,
-        hasIndex: (_ctx, evt) => evt.index !== undefined,
-        isDisabled: (ctx) => !!ctx.disabled,
-      },
-      actions: {
-        setupValue(ctx) {
-          if (ctx.value.length) return
-          const inputEls = dom.getInputEls(ctx)
-          const emptyValues = Array.from<string>({ length: inputEls.length }).fill("")
-          assignValue(ctx, emptyValues)
-        },
-        focusInput(ctx) {
-          if (ctx.focusedIndex === -1) return
-          dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })
-        },
-        selectInputIfNeeded(ctx) {
-          if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return
-          raf(() => {
-            dom.getFocusedInputEl(ctx)?.select()
-          })
-        },
-        invokeOnComplete(ctx) {
-          if (!ctx.isValueComplete) return
-          ctx.onValueComplete?.({
-            value: Array.from(ctx.value),
-            valueAsString: ctx.valueAsString,
-          })
-        },
-        invokeOnInvalid(ctx, evt) {
-          ctx.onValueInvalid?.({
-            value: evt.value,
-            index: ctx.focusedIndex,
-          })
-        },
-        clearFocusedIndex(ctx) {
-          ctx.focusedIndex = -1
-        },
-        setFocusedIndex(ctx, evt) {
-          ctx.focusedIndex = evt.index
-        },
-        setValue(ctx, evt) {
-          set.value(ctx, evt.value)
-        },
-        setFocusedValue(ctx, evt) {
-          const nextValue = getNextValue(ctx.focusedValue, evt.value)
-          set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)
-        },
-        revertInputValue(ctx) {
-          const inputEl = dom.getFocusedInputEl(ctx)
-          dom.setValue(inputEl, ctx.focusedValue)
-        },
-        syncInputValue(ctx, evt) {
-          const inputEl = dom.getInputEl(ctx, evt.index.toString())
-          dom.setValue(inputEl, ctx.value[evt.index])
-        },
-        syncInputElements(ctx) {
-          const inputEls = dom.getInputEls(ctx)
-          inputEls.forEach((inputEl, index) => {
-            dom.setValue(inputEl, ctx.value[index])
-          })
-        },
-        setPastedValue(ctx, evt) {
-          raf(() => {
-            const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)
-
-            // keep value left of cursor
-            // replace value from curor to end with pasted text
-            const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : ""
-            const right = evt.value.substring(0, ctx.valueLength - startIndex)
-
-            const value = left + right
-
-            set.value(ctx, value.split(""))
-          })
-        },
-        setValueAtIndex(ctx, evt) {
-          const nextValue = getNextValue(ctx.focusedValue, evt.value)
-          set.valueAtIndex(ctx, evt.index, nextValue)
-        },
-        clearValue(ctx) {
-          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill("")
-          set.value(ctx, nextValue)
-        },
-        clearFocusedValue(ctx) {
-          set.valueAtIndex(ctx, ctx.focusedIndex, "")
-        },
-        setFocusIndexToFirst(ctx) {
-          ctx.focusedIndex = 0
-        },
-        setNextFocusedIndex(ctx) {
-          ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)
-        },
-        setPrevFocusedIndex(ctx) {
-          ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)
-        },
-        setLastValueFocusIndex(ctx) {
-          raf(() => {
-            ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)
-          })
-        },
-        blurFocusedInputIfNeeded(ctx) {
-          if (!ctx.blurOnComplete) return
-          raf(() => {
-            dom.getFocusedInputEl(ctx)?.blur()
-          })
-        },
-        requestFormSubmit(ctx) {
-          if (!ctx.name || !ctx.isValueComplete) return
-          const inputEl = dom.getHiddenInputEl(ctx)
-          inputEl?.form?.requestSubmit()
-        },
-      },
-    },
-  )
-}
-
-function assignValue(ctx: MachineContext, value: string | string[]) {
-  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean)
-  arr.forEach((value, index) => {
-    ctx.value[index] = value
-  })
-}
-
-function getNextValue(current: string, next: string) {
-  let nextValue = next
-  if (current[0] === next[0]) nextValue = next[1]
-  else if (current[0] === next[1]) nextValue = next[0]
-  return nextValue.split("")[nextValue.length - 1]
-}
-
-const invoke = {
-  change(ctx: MachineContext) {
-    // callback
-    ctx.onValueChange?.({
-      value: Array.from(ctx.value),
-      valueAsString: ctx.valueAsString,
-    })
-
-    // form event
-    const inputEl = dom.getHiddenInputEl(ctx)
-    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })
-  },
-}
-
-const set = {
-  value(ctx: MachineContext, value: string[]) {
-    if (isEqual(ctx.value, value)) return
-    assignValue(ctx, value)
-    invoke.change(ctx)
-  },
-  valueAtIndex(ctx: MachineContext, index: number, value: string) {
-    if (isEqual(ctx.value[index], value)) return
-    ctx.value[index] = value
-    invoke.change(ctx)
-  },
-}

package/src/pin-input.props.ts

@@ -1,31 +0,0 @@
-import { createProps } from "@zag-js/types"
-import { createSplitProps } from "@zag-js/utils"
-import type { UserDefinedContext } from "./pin-input.types"
-
-export const props = createProps<UserDefinedContext>()([
-  "autoFocus",
-  "blurOnComplete",
-  "dir",
-  "disabled",
-  "form",
-  "getRootNode",
-  "id",
-  "ids",
-  "invalid",
-  "mask",
-  "name",
-  "onValueChange",
-  "onValueComplete",
-  "onValueInvalid",
-  "otp",
-  "readOnly",
-  "pattern",
-  "placeholder",
-  "required",
-  "selectOnFocus",
-  "translations",
-  "type",
-  "value",
-])
-
-export const splitProps = createSplitProps<Partial<UserDefinedContext>>(props)

package/src/pin-input.types.ts

@@ -1,210 +0,0 @@
-import type { StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
-
-/* -----------------------------------------------------------------------------
- * Callback details
- * -----------------------------------------------------------------------------*/
-
-export interface ValueChangeDetails {
-  value: string[]
-  valueAsString: string
-}
-
-export interface ValueInvalidDetails {
-  value: string
-  index: number
-}
-
-/* -----------------------------------------------------------------------------
- * Machine context
- * -----------------------------------------------------------------------------*/
-
-export type IntlTranslations = {
-  inputLabel: (index: number, length: number) => string
-}
-
-export type ElementIds = Partial<{
-  root: string
-  hiddenInput: string
-  label: string
-  control: string
-  input(id: string): string
-}>
-
-interface PublicContext extends DirectionProperty, CommonProperties {
-  /**
-   * The name of the input element. Useful for form submission.
-   */
-  name?: string
-  /**
-   * The associate form of the underlying input element.
-   */
-  form?: 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.
-   */
-  ids?: ElementIds
-  /**
-   * Whether the inputs are disabled
-   */
-  disabled?: boolean
-  /**
-   * The placeholder text for the input
-   * @default "○"
-   */
-  placeholder?: string
-  /**
-   * Whether to auto-focus the first input.
-   */
-  autoFocus?: boolean
-  /**
-   * Whether the pin input is in the invalid state
-   */
-  invalid?: boolean
-  /**
-   * Whether the pin input is required
-   */
-  required?: boolean
-  /**
-   * Whether the pin input is in the valid state
-   */
-  readOnly?: boolean
-  /**
-   * If `true`, the pin input component signals to its fields that they should
-   * use `autocomplete="one-time-code"`.
-   */
-  otp?: boolean
-  /**
-   * The value of the the pin input.
-   */
-  value: string[]
-  /**
-   * The type of value the pin-input should allow
-   * @default "numeric"
-   */
-  type?: "alphanumeric" | "numeric" | "alphabetic"
-  /**
-   * Function called when all inputs have valid values
-   */
-  onValueComplete?: (details: ValueChangeDetails) => void
-  /**
-   * Function called on input change
-   */
-  onValueChange?: (details: ValueChangeDetails) => void
-  /**
-   * Function called when an invalid value is entered
-   */
-  onValueInvalid?: (details: ValueInvalidDetails) => void
-  /**
-   * If `true`, the input's value will be masked just like `type=password`
-   */
-  mask?: boolean
-  /**
-   * Whether to blur the input when the value is complete
-   */
-  blurOnComplete?: boolean
-  /**
-   * Whether to select input value when input is focused
-   */
-  selectOnFocus?: boolean
-  /**
-   * Specifies the localized strings that identifies the accessibility elements and their states
-   */
-  translations: IntlTranslations
-}
-
-export type UserDefinedContext = RequiredBy<PublicContext, "id">
-
-type ComputedContext = Readonly<{
-  /**
-   * @computed
-   * The number of inputs
-   */
-  valueLength: number
-  /**
-   * @computed
-   * The number of inputs that are not empty
-   */
-  filledValueLength: number
-  /**
-   * @computed
-   * Whether all input values are valid
-   */
-  isValueComplete: boolean
-  /**
-   * @computed
-   * The string representation of the input values
-   */
-  valueAsString: string
-  /**
-   * @computed
-   * The value at focused index
-   */
-  focusedValue: string
-}>
-
-interface PrivateContext {
-  /**
-   * @internal
-   * The index of the input field that has focus
-   */
-  focusedIndex: number
-}
-
-export interface MachineContext extends PublicContext, PrivateContext, ComputedContext {}
-
-export interface MachineState {
-  value: "idle" | "focused"
-}
-
-export type State = S.State<MachineContext, MachineState>
-
-export type Send = S.Send<S.AnyEventObject>
-
-/* -----------------------------------------------------------------------------
- * Component API
- * -----------------------------------------------------------------------------*/
-
-export interface InputProps {
-  index: number
-}
-
-export interface MachineApi<T extends PropTypes = PropTypes> {
-  /**
-   * 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.
-   */
-  complete: 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
-  getRootProps(): T["element"]
-  getLabelProps(): T["label"]
-  getHiddenInputProps(): T["input"]
-  getControlProps(): T["element"]
-  getInputProps(props: InputProps): T["input"]
-}

package/src/pin-input.utils.ts

@@ -1,18 +0,0 @@
-import type { MachineContext } from "./pin-input.types"
-
-const REGEX = {
-  numeric: /^[0-9]+$/,
-  alphabetic: /^[A-Za-z]+$/,
-  alphanumeric: /^[a-zA-Z0-9]+$/i,
-}
-
-export function isValidType(ctx: MachineContext, value: string) {
-  if (!ctx.type) return true
-  return !!REGEX[ctx.type]?.test(value)
-}
-
-export function isValidValue(ctx: MachineContext, value: string) {
-  if (!ctx.pattern) return isValidType(ctx, value)
-  const regex = new RegExp(ctx.pattern, "g")
-  return regex.test(value)
-}