@zag-js/pin-input 0.11.1 → 0.11.2

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -98,43 +98,7 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     translations: IntlTranslations;
 };
-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;
-}>;
-type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
-    value: "idle" | "focused";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+type PublicApi<T extends PropTypes = PropTypes> = {
     /**
      * The value of the input as an array of strings.
      */
@@ -171,7 +135,44 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
         index: number;
     }): T["input"];
 };
+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;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, anatomy, connect, machine };
+export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _zag_js_anatomy from '@zag-js/anatomy';
-import { RequiredBy, DirectionProperty, CommonProperties, Context, PropTypes, NormalizeProps } from '@zag-js/types';
+import { PropTypes, RequiredBy, DirectionProperty, CommonProperties, Context, NormalizeProps } from '@zag-js/types';
 import * as _zag_js_core from '@zag-js/core';
 import { StateMachine } from '@zag-js/core';
 
@@ -98,43 +98,7 @@ type PublicContext = DirectionProperty & CommonProperties & {
      */
     translations: IntlTranslations;
 };
-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;
-}>;
-type PrivateContext = Context<{}>;
-type MachineContext = PublicContext & PrivateContext & ComputedContext;
-type MachineState = {
-    value: "idle" | "focused";
-};
-type State = StateMachine.State<MachineContext, MachineState>;
-type Send = StateMachine.Send<StateMachine.AnyEventObject>;
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+type PublicApi<T extends PropTypes = PropTypes> = {
     /**
      * The value of the input as an array of strings.
      */
@@ -171,7 +135,44 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
         index: number;
     }): T["input"];
 };
+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;
+}>;
+type PrivateContext = Context<{}>;
+type MachineContext = PublicContext & PrivateContext & ComputedContext;
+type MachineState = {
+    value: "idle" | "focused";
+};
+type State = StateMachine.State<MachineContext, MachineState>;
+type Send = StateMachine.Send<StateMachine.AnyEventObject>;
+
+declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T>;
 
 declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
 
-export { UserDefinedContext as Context, anatomy, connect, machine };
+export { UserDefinedContext as Context, PublicApi, anatomy, connect, machine };

package/dist/index.js

@@ -67,42 +67,21 @@ function connect(state, send, normalize) {
     dom.getFirstInputEl(state.context)?.focus();
   }
   return {
-    /**
-     * The value of the input as an array of strings.
-     */
     value: state.context.value,
-    /**
-     * The value of the input as a string.
-     */
     valueAsString: state.context.valueAsString,
-    /**
-     * Whether all inputs are filled.
-     */
     isValueComplete,
-    /**
-     * Function to set the value of the inputs.
-     */
     setValue(value) {
       if (!Array.isArray(value)) {
         (0, import_utils.invariant)("[pin-input/setValue] value must be an array");
       }
       send({ type: "SET_VALUE", value });
     },
-    /**
-     * Function to clear the value of the inputs.
-     */
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
-    /**
-     * Function to set the value of the input at a specific index.
-     */
     setValueAtIndex(index, value) {
       send({ type: "SET_VALUE", value, index });
     },
-    /**
-     * Function to focus the pin-input. This will focus the first input.
-     */
     focus,
     rootProps: normalize.element({
       dir: state.context.dir,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.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 { UserDefinedContext as Context } from \"./pin-input.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"hiddenInput\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { Send, State } from \"./pin-input.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n  const isValueComplete = state.context.isValueComplete\n  const isInvalid = 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    /**\n     * The value of the input as an array of strings.\n     */\n    value: state.context.value,\n    /**\n     * The value of the input as a string.\n     */\n    valueAsString: state.context.valueAsString,\n    /**\n     * Whether all inputs are filled.\n     */\n    isValueComplete: isValueComplete,\n    /**\n     * Function to set the value of the inputs.\n     */\n    setValue(value: string[]) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"SET_VALUE\", value })\n    },\n    /**\n     * Function to clear the value of the inputs.\n     */\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n    /**\n     * Function to set the value of the input at a specific index.\n     */\n    setValueAtIndex(index: number, value: string) {\n      send({ type: \"SET_VALUE\", value, index })\n    },\n    /**\n     * Function to focus the pin-input. This will focus the first input.\n     */\n    focus,\n\n    rootProps: normalize.element({\n      dir: state.context.dir,\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n    }),\n\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      htmlFor: dom.getHiddenInputId(state.context),\n      id: dom.getLabelId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n      onClick: (event) => {\n        event.preventDefault()\n        focus()\n      },\n    }),\n\n    hiddenInputProps: normalize.input({\n      ...parts.hiddenInput.attrs,\n      \"aria-hidden\": true,\n      type: \"text\",\n      tabIndex: -1,\n      id: dom.getHiddenInputId(state.context),\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    controlProps: normalize.element({\n      ...parts.control.attrs,\n      id: dom.getControlId(state.context),\n    }),\n\n    getInputProps({ index }: { index: number }) {\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(isValueComplete),\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(isInvalid),\n        \"data-invalid\": dataAttr(isInvalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"PASTE\", value })\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"BACKSPACE\")\n            return\n          }\n          send({ type: \"INPUT\", value, index })\n        },\n        onKeyDown(event) {\n          const evt = getNativeEvent(event)\n          if (evt.isComposing || isModifiedEvent(evt)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"BACKSPACE\")\n            },\n            Delete() {\n              send(\"DELETE\")\n            },\n            ArrowLeft() {\n              send(\"ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"ENTER\")\n            },\n          }\n\n          const key = getEventKey(event, { dir: state.context.dir })\n          const exec = keyMap[key]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          } else {\n            if (key === \"Tab\") return\n            send({ type: \"KEY_DOWN\", value: key, preventDefault: () => event.preventDefault() })\n          }\n        },\n        onFocus() {\n          send({ type: \"FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"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  getElements: (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.getElements(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getElements(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nconst { and, not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: ctx.autoFocus ? \"focused\" : \"idle\",\n      context: {\n        value: [],\n        focusedIndex: -1,\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\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      watch: {\n        focusedIndex: [\"focusInput\", \"setInputSelection\"],\n        value: [\"dispatchInputEvent\", \"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      entry: ctx.autoFocus ? [\"setupValue\", \"setFocusIndexToFirst\"] : [\"setupValue\"],\n\n      on: {\n        SET_VALUE: [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\", \"invokeOnChange\"],\n          },\n          { actions: [\"setValue\", \"invokeOnChange\"] },\n        ],\n        CLEAR_VALUE: [\n          {\n            guard: \"isDisabled\",\n            actions: [\"clearValue\", \"invokeOnChange\"],\n          },\n          {\n            actions: [\"clearValue\", \"invokeOnChange\", \"setFocusIndexToFirst\"],\n          },\n        ],\n      },\n\n      states: {\n        idle: {\n          on: {\n            FOCUS: {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            INPUT: [\n              {\n                guard: and(\"isFinalValue\", \"isValidValue\"),\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"syncInputValue\"],\n              },\n              {\n                guard: \"isValidValue\",\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            PASTE: [\n              {\n                guard: \"isValidValue\",\n                actions: [\"setPastedValue\", \"invokeOnChange\", \"setLastValueFocusIndex\"],\n              },\n              { actions: [\"resetFocusedValue\", \"invokeOnChange\"] },\n            ],\n            BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            DELETE: {\n              guard: \"hasValue\",\n              actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n            },\n            ARROW_LEFT: {\n              actions: \"setPrevFocusedIndex\",\n            },\n            ARROW_RIGHT: {\n              actions: \"setNextFocusedIndex\",\n            },\n            BACKSPACE: [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\", \"invokeOnChange\"],\n              },\n            ],\n            ENTER: {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            KEY_DOWN: {\n              guard: not(\"isValidValue\"),\n              actions: [\"preventDefault\", \"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        isValidValue: (ctx, evt) => {\n          if (!ctx.pattern) return isValidType(evt.value, ctx.type)\n          const regex = new RegExp(ctx.pattern, \"g\")\n          return regex.test(evt.value)\n        },\n        isFinalValue: (ctx) => {\n          return (\n            ctx.filledValueLength + 1 === ctx.valueLength &&\n            ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex\n          )\n        },\n        isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,\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 inputs = dom.getElements(ctx)\n          const emptyValues = Array.from<string>({ length: inputs.length }).fill(\"\")\n          assign(ctx, emptyValues)\n        },\n        focusInput: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            dom.getFocusedInputEl(ctx)?.focus()\n          })\n        },\n        setInputSelection: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            const input = dom.getFocusedInputEl(ctx)\n            const length = input.value.length\n            input.selectionStart = ctx.selectOnFocus ? 0 : length\n            input.selectionEnd = length\n          })\n        },\n        invokeOnComplete: (ctx) => {\n          if (!ctx.isValueComplete) return\n          ctx.onComplete?.({ value: Array.from(ctx.value), valueAsString: ctx.valueAsString })\n        },\n        invokeOnChange: (ctx) => {\n          ctx.onChange?.({ value: Array.from(ctx.value) })\n        },\n        dispatchInputEvent: (ctx) => {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n        },\n        invokeOnInvalid: (ctx, evt) => {\n          ctx.onInvalid?.({ value: evt.value, index: ctx.focusedIndex })\n        },\n        clearFocusedIndex: (ctx) => {\n          ctx.focusedIndex = -1\n        },\n        setValue: (ctx, evt) => {\n          assign(ctx, evt.value)\n        },\n        setFocusedIndex: (ctx, evt) => {\n          ctx.focusedIndex = evt.index\n        },\n        setFocusedValue: (ctx, evt) => {\n          ctx.value[ctx.focusedIndex] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        syncInputValue(ctx, evt) {\n          const input = dom.getInputEl(ctx, evt.index.toString())\n          if (!input) return\n          input.value = ctx.value[evt.index]\n        },\n        syncInputElements(ctx) {\n          const inputs = dom.getElements(ctx)\n          inputs.forEach((input, index) => {\n            input.value = ctx.value[index]\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = ctx.focusedValue ? 1 : 0\n            const value = evt.value.substring(startIndex, startIndex + ctx.valueLength)\n            assign(ctx, value)\n          })\n        },\n        setValueAtIndex: (ctx, evt) => {\n          ctx.value[evt.index] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        clearValue: (ctx) => {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          assign(ctx, nextValue)\n        },\n        clearFocusedValue: (ctx) => {\n          ctx.value[ctx.focusedIndex] = \"\"\n        },\n        resetFocusedValue: (ctx) => {\n          const input = dom.getFocusedInputEl(ctx)\n          input.value = ctx.focusedValue\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        preventDefault(_, evt) {\n          evt.preventDefault()\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 input = dom.getHiddenInputEl(ctx)\n          input?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nfunction isValidType(value: string, type: MachineContext[\"type\"]) {\n  if (!type) return true\n  return !!REGEX[type]?.test(value)\n}\n\nfunction assign(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\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_utils","ctx","value"]}
+{"version":3,"sources":["../src/index.ts","../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.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 { UserDefinedContext as Context, PublicApi } from \"./pin-input.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"hiddenInput\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { type EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { PublicApi, Send, State } from \"./pin-input.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n  const isValueComplete = state.context.isValueComplete\n  const isInvalid = 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    value: state.context.value,\n    valueAsString: state.context.valueAsString,\n    isValueComplete: isValueComplete,\n\n    setValue(value: string[]) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"SET_VALUE\", value })\n    },\n\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n\n    setValueAtIndex(index: number, value: string) {\n      send({ type: \"SET_VALUE\", value, index })\n    },\n\n    focus,\n\n    rootProps: normalize.element({\n      dir: state.context.dir,\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n    }),\n\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      htmlFor: dom.getHiddenInputId(state.context),\n      id: dom.getLabelId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n      onClick: (event) => {\n        event.preventDefault()\n        focus()\n      },\n    }),\n\n    hiddenInputProps: normalize.input({\n      ...parts.hiddenInput.attrs,\n      \"aria-hidden\": true,\n      type: \"text\",\n      tabIndex: -1,\n      id: dom.getHiddenInputId(state.context),\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    controlProps: normalize.element({\n      ...parts.control.attrs,\n      id: dom.getControlId(state.context),\n    }),\n\n    getInputProps({ index }: { index: number }) {\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(isValueComplete),\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(isInvalid),\n        \"data-invalid\": dataAttr(isInvalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"PASTE\", value })\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"BACKSPACE\")\n            return\n          }\n          send({ type: \"INPUT\", value, index })\n        },\n        onKeyDown(event) {\n          const evt = getNativeEvent(event)\n          if (evt.isComposing || isModifiedEvent(evt)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"BACKSPACE\")\n            },\n            Delete() {\n              send(\"DELETE\")\n            },\n            ArrowLeft() {\n              send(\"ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"ENTER\")\n            },\n          }\n\n          const key = getEventKey(event, { dir: state.context.dir })\n          const exec = keyMap[key]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          } else {\n            if (key === \"Tab\") return\n            send({ type: \"KEY_DOWN\", value: key, preventDefault: () => event.preventDefault() })\n          }\n        },\n        onFocus() {\n          send({ type: \"FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"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  getElements: (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.getElements(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getElements(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nconst { and, not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: ctx.autoFocus ? \"focused\" : \"idle\",\n      context: {\n        value: [],\n        focusedIndex: -1,\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\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      watch: {\n        focusedIndex: [\"focusInput\", \"setInputSelection\"],\n        value: [\"dispatchInputEvent\", \"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      entry: ctx.autoFocus ? [\"setupValue\", \"setFocusIndexToFirst\"] : [\"setupValue\"],\n\n      on: {\n        SET_VALUE: [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\", \"invokeOnChange\"],\n          },\n          { actions: [\"setValue\", \"invokeOnChange\"] },\n        ],\n        CLEAR_VALUE: [\n          {\n            guard: \"isDisabled\",\n            actions: [\"clearValue\", \"invokeOnChange\"],\n          },\n          {\n            actions: [\"clearValue\", \"invokeOnChange\", \"setFocusIndexToFirst\"],\n          },\n        ],\n      },\n\n      states: {\n        idle: {\n          on: {\n            FOCUS: {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            INPUT: [\n              {\n                guard: and(\"isFinalValue\", \"isValidValue\"),\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"syncInputValue\"],\n              },\n              {\n                guard: \"isValidValue\",\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            PASTE: [\n              {\n                guard: \"isValidValue\",\n                actions: [\"setPastedValue\", \"invokeOnChange\", \"setLastValueFocusIndex\"],\n              },\n              { actions: [\"resetFocusedValue\", \"invokeOnChange\"] },\n            ],\n            BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            DELETE: {\n              guard: \"hasValue\",\n              actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n            },\n            ARROW_LEFT: {\n              actions: \"setPrevFocusedIndex\",\n            },\n            ARROW_RIGHT: {\n              actions: \"setNextFocusedIndex\",\n            },\n            BACKSPACE: [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\", \"invokeOnChange\"],\n              },\n            ],\n            ENTER: {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            KEY_DOWN: {\n              guard: not(\"isValidValue\"),\n              actions: [\"preventDefault\", \"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        isValidValue: (ctx, evt) => {\n          if (!ctx.pattern) return isValidType(evt.value, ctx.type)\n          const regex = new RegExp(ctx.pattern, \"g\")\n          return regex.test(evt.value)\n        },\n        isFinalValue: (ctx) => {\n          return (\n            ctx.filledValueLength + 1 === ctx.valueLength &&\n            ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex\n          )\n        },\n        isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,\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 inputs = dom.getElements(ctx)\n          const emptyValues = Array.from<string>({ length: inputs.length }).fill(\"\")\n          assign(ctx, emptyValues)\n        },\n        focusInput: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            dom.getFocusedInputEl(ctx)?.focus()\n          })\n        },\n        setInputSelection: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            const input = dom.getFocusedInputEl(ctx)\n            const length = input.value.length\n            input.selectionStart = ctx.selectOnFocus ? 0 : length\n            input.selectionEnd = length\n          })\n        },\n        invokeOnComplete: (ctx) => {\n          if (!ctx.isValueComplete) return\n          ctx.onComplete?.({ value: Array.from(ctx.value), valueAsString: ctx.valueAsString })\n        },\n        invokeOnChange: (ctx) => {\n          ctx.onChange?.({ value: Array.from(ctx.value) })\n        },\n        dispatchInputEvent: (ctx) => {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n        },\n        invokeOnInvalid: (ctx, evt) => {\n          ctx.onInvalid?.({ value: evt.value, index: ctx.focusedIndex })\n        },\n        clearFocusedIndex: (ctx) => {\n          ctx.focusedIndex = -1\n        },\n        setValue: (ctx, evt) => {\n          assign(ctx, evt.value)\n        },\n        setFocusedIndex: (ctx, evt) => {\n          ctx.focusedIndex = evt.index\n        },\n        setFocusedValue: (ctx, evt) => {\n          ctx.value[ctx.focusedIndex] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        syncInputValue(ctx, evt) {\n          const input = dom.getInputEl(ctx, evt.index.toString())\n          if (!input) return\n          input.value = ctx.value[evt.index]\n        },\n        syncInputElements(ctx) {\n          const inputs = dom.getElements(ctx)\n          inputs.forEach((input, index) => {\n            input.value = ctx.value[index]\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = ctx.focusedValue ? 1 : 0\n            const value = evt.value.substring(startIndex, startIndex + ctx.valueLength)\n            assign(ctx, value)\n          })\n        },\n        setValueAtIndex: (ctx, evt) => {\n          ctx.value[evt.index] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        clearValue: (ctx) => {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          assign(ctx, nextValue)\n        },\n        clearFocusedValue: (ctx) => {\n          ctx.value[ctx.focusedIndex] = \"\"\n        },\n        resetFocusedValue: (ctx) => {\n          const input = dom.getFocusedInputEl(ctx)\n          input.value = ctx.focusedValue\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        preventDefault(_, evt) {\n          evt.preventDefault()\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 input = dom.getHiddenInputEl(ctx)\n          input?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nfunction isValidType(value: string, type: MachineContext[\"type\"]) {\n  if (!type) return true\n  return !!REGEX[type]?.test(value)\n}\n\nfunction assign(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\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,qBAA8B;AAEvB,IAAM,cAAU,8BAAc,UAAU,EAAE,MAAM,QAAQ,SAAS,eAAe,SAAS,SAAS;AAClG,IAAM,QAAQ,QAAQ,MAAM;;;ACHnC,uBAA+E;AAC/E,IAAAA,oBAAmC;AAEnC,mBAA0B;AAC1B,6BAAoC;;;ACJpC,uBAAsC;AAG/B,IAAM,UAAM,8BAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,aAAa,IAAI;AAAA,EAC3D,YAAY,CAAC,KAAU,OAAe,IAAI,KAAK,QAAQ,EAAE,KAAK,aAAa,IAAI,MAAM;AAAA,EACrF,kBAAkB,CAAC,QAAa,IAAI,KAAK,eAAe,aAAa,IAAI;AAAA,EACzE,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,aAAa,IAAI;AAAA,EAC7D,cAAc,CAAC,QAAa,IAAI,KAAK,WAAW,aAAa,IAAI;AAAA,EAEjE,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,aAAa,CAAC,QAAa;AACzB,UAAM,UAAU,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC;AAC7C,UAAM,WAAW,sBAAsB;AACvC,eAAO,2BAA2B,IAAI,UAAU,GAAG,GAAG,QAAQ;AAAA,EAChE;AAAA,EACA,YAAY,CAAC,KAAU,OAAe,IAAI,QAA0B,KAAK,IAAI,WAAW,KAAK,EAAE,CAAC;AAAA,EAChG,mBAAmB,CAAC,QAAa,IAAI,YAAY,GAAG,EAAE,IAAI,YAAY;AAAA,EACtE,iBAAiB,CAAC,QAAa,IAAI,YAAY,GAAG,EAAE,CAAC;AAAA,EACrD,kBAAkB,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,iBAAiB,GAAG,CAAC;AAC9F,CAAC;;;ADXM,SAAS,QAA6B,OAAc,MAAY,WAA4C;AACjH,QAAM,kBAAkB,MAAM,QAAQ;AACtC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAe,MAAM,QAAQ;AACnC,QAAM,eAAe,MAAM,QAAQ;AAEnC,WAAS,QAAQ;AACf,QAAI,gBAAgB,MAAM,OAAO,GAAG,MAAM;AAAA,EAC5C;AAEA,SAAO;AAAA,IACL,OAAO,MAAM,QAAQ;AAAA,IACrB,eAAe,MAAM,QAAQ;AAAA,IAC7B;AAAA,IAEA,SAAS,OAAiB;AACxB,UAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,oCAAU,6CAA6C;AAAA,MACzD;AACA,WAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,IACnC;AAAA,IAEA,aAAa;AACX,WAAK,EAAE,MAAM,cAAc,CAAC;AAAA,IAC9B;AAAA,IAEA,gBAAgB,OAAe,OAAe;AAC5C,WAAK,EAAE,MAAM,aAAa,OAAO,MAAM,CAAC;AAAA,IAC1C;AAAA,IAEA;AAAA,IAEA,WAAW,UAAU,QAAQ;AAAA,MAC3B,KAAK,MAAM,QAAQ;AAAA,MACnB,GAAG,MAAM,KAAK;AAAA,MACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,oBAAgB,4BAAS,SAAS;AAAA,MAClC,qBAAiB,4BAAS,MAAM,QAAQ,QAAQ;AAAA,MAChD,qBAAiB,4BAAS,eAAe;AAAA,IAC3C,CAAC;AAAA,IAED,YAAY,UAAU,MAAM;AAAA,MAC1B,GAAG,MAAM,MAAM;AAAA,MACf,SAAS,IAAI,iBAAiB,MAAM,OAAO;AAAA,MAC3C,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,MAChC,oBAAgB,4BAAS,SAAS;AAAA,MAClC,qBAAiB,4BAAS,MAAM,QAAQ,QAAQ;AAAA,MAChD,qBAAiB,4BAAS,eAAe;AAAA,MACzC,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AACrB,cAAM;AAAA,MACR;AAAA,IACF,CAAC;AAAA,IAED,kBAAkB,UAAU,MAAM;AAAA,MAChC,GAAG,MAAM,YAAY;AAAA,MACrB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,MACV,IAAI,IAAI,iBAAiB,MAAM,OAAO;AAAA,MACtC,MAAM,MAAM,QAAQ;AAAA,MACpB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO;AAAA,MACP,WAAW,MAAM,QAAQ;AAAA,MACzB,cAAc,MAAM,QAAQ;AAAA,IAC9B,CAAC;AAAA,IAED,cAAc,UAAU,QAAQ;AAAA,MAC9B,GAAG,MAAM,QAAQ;AAAA,MACjB,IAAI,IAAI,aAAa,MAAM,OAAO;AAAA,IACpC,CAAC;AAAA,IAED,cAAc,EAAE,MAAM,GAAsB;AAC1C,YAAM,YAAY,MAAM,QAAQ,SAAS,YAAY,QAAQ;AAC7D,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,MAAM;AAAA,QACf,UAAU,MAAM,QAAQ;AAAA,QACxB,qBAAiB,4BAAS,MAAM,QAAQ,QAAQ;AAAA,QAChD,qBAAiB,4BAAS,eAAe;AAAA,QACzC,IAAI,IAAI,WAAW,MAAM,SAAS,MAAM,SAAS,CAAC;AAAA,QAClD,gBAAgB,IAAI,UAAU,MAAM,OAAO;AAAA,QAC3C,cAAc,aAAa,WAAW,OAAO,MAAM,QAAQ,WAAW;AAAA,QACtE,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS,YAAY,YAAY;AAAA,QAC/E,oBAAgB,4BAAS,SAAS;AAAA,QAClC,oBAAgB,4BAAS,SAAS;AAAA,QAClC,MAAM,MAAM,QAAQ,OAAO,aAAa;AAAA,QACxC,cAAc,MAAM,QAAQ,MAAM,KAAK,KAAK;AAAA,QAC5C,gBAAgB;AAAA,QAChB,cAAc,MAAM,QAAQ,MAAM,kBAAkB;AAAA,QACpD,aAAa,iBAAiB,QAAQ,KAAK,MAAM,QAAQ;AAAA,QACzD,SAAS,OAAO;AACd,gBAAM,UAAM,iCAAe,KAAK;AAChC,gBAAM,EAAE,MAAM,IAAI,MAAM;AACxB,cAAI,IAAI,cAAc,qBAAqB,MAAM,SAAS,GAAG;AAC3D,iBAAK,EAAE,MAAM,SAAS,MAAM,CAAC;AAC7B,kBAAM,eAAe;AACrB;AAAA,UACF;AAEA,cAAI,IAAI,cAAc,yBAAyB;AAC7C,iBAAK,WAAW;AAChB;AAAA,UACF;AACA,eAAK,EAAE,MAAM,SAAS,OAAO,MAAM,CAAC;AAAA,QACtC;AAAA,QACA,UAAU,OAAO;AACf,gBAAM,UAAM,iCAAe,KAAK;AAChC,cAAI,IAAI,mBAAe,kCAAgB,GAAG;AAAG;AAE7C,gBAAM,SAAsB;AAAA,YAC1B,YAAY;AACV,mBAAK,WAAW;AAAA,YAClB;AAAA,YACA,SAAS;AACP,mBAAK,QAAQ;AAAA,YACf;AAAA,YACA,YAAY;AACV,mBAAK,YAAY;AAAA,YACnB;AAAA,YACA,aAAa;AACX,mBAAK,aAAa;AAAA,YACpB;AAAA,YACA,QAAQ;AACN,mBAAK,OAAO;AAAA,YACd;AAAA,UACF;AAEA,gBAAM,UAAM,8BAAY,OAAO,EAAE,KAAK,MAAM,QAAQ,IAAI,CAAC;AACzD,gBAAM,OAAO,OAAO,GAAG;AAEvB,cAAI,MAAM;AACR,iBAAK,KAAK;AACV,kBAAM,eAAe;AAAA,UACvB,OAAO;AACL,gBAAI,QAAQ;AAAO;AACnB,iBAAK,EAAE,MAAM,YAAY,OAAO,KAAK,gBAAgB,MAAM,MAAM,eAAe,EAAE,CAAC;AAAA,UACrF;AAAA,QACF;AAAA,QACA,UAAU;AACR,eAAK,EAAE,MAAM,SAAS,MAAM,CAAC;AAAA,QAC/B;AAAA,QACA,SAAS;AACP,eAAK,EAAE,MAAM,QAAQ,MAAM,CAAC;AAAA,QAC9B;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;AE5JA,kBAAsC;AACtC,IAAAC,oBAAoB;AACpB,wBAAwC;AACxC,IAAAC,gBAAwB;AAIxB,IAAM,EAAE,KAAK,IAAI,IAAI;AAEd,SAAS,QAAQ,aAAiC;AACvD,QAAM,UAAM,uBAAQ,WAAW;AAC/B,aAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS,IAAI,YAAY,YAAY;AAAA,MACrC,SAAS;AAAA,QACP,OAAO,CAAC;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG;AAAA,QACH,cAAc;AAAA,UACZ,YAAY,CAAC,OAAO,WAAW,YAAY,QAAQ,QAAQ;AAAA,UAC3D,GAAG,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,aAAa,CAACC,SAAQA,KAAI,MAAM;AAAA,QAChC,mBAAmB,CAACA,SAAQA,KAAI,MAAM,OAAO,CAAC,MAAM,GAAG,KAAK,MAAM,EAAE,EAAE;AAAA,QACtE,iBAAiB,CAACA,SAAQA,KAAI,gBAAgBA,KAAI;AAAA,QAClD,eAAe,CAACA,SAAQA,KAAI,MAAM,KAAK,EAAE;AAAA,QACzC,cAAc,CAACA,SAAQA,KAAI,MAAMA,KAAI,YAAY;AAAA,MACnD;AAAA,MAEA,OAAO;AAAA,QACL,cAAc,CAAC,cAAc,mBAAmB;AAAA,QAChD,OAAO,CAAC,sBAAsB,mBAAmB;AAAA,QACjD,iBAAiB,CAAC,oBAAoB,0BAA0B;AAAA,MAClE;AAAA,MAEA,OAAO,IAAI,YAAY,CAAC,cAAc,sBAAsB,IAAI,CAAC,YAAY;AAAA,MAE7E,IAAI;AAAA,QACF,WAAW;AAAA,UACT;AAAA,YACE,OAAO;AAAA,YACP,SAAS,CAAC,mBAAmB,gBAAgB;AAAA,UAC/C;AAAA,UACA,EAAE,SAAS,CAAC,YAAY,gBAAgB,EAAE;AAAA,QAC5C;AAAA,QACA,aAAa;AAAA,UACX;AAAA,YACE,OAAO;AAAA,YACP,SAAS,CAAC,cAAc,gBAAgB;AAAA,UAC1C;AAAA,UACA;AAAA,YACE,SAAS,CAAC,cAAc,kBAAkB,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,IAAI;AAAA,YACF,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAS;AAAA,UACP,IAAI;AAAA,YACF,OAAO;AAAA,cACL;AAAA,gBACE,OAAO,IAAI,gBAAgB,cAAc;AAAA,gBACzC,SAAS,CAAC,mBAAmB,kBAAkB,gBAAgB;AAAA,cACjE;AAAA,cACA;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,mBAAmB,kBAAkB,uBAAuB,gBAAgB;AAAA,cACxF;AAAA,YACF;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,kBAAkB,kBAAkB,wBAAwB;AAAA,cACxE;AAAA,cACA,EAAE,SAAS,CAAC,qBAAqB,gBAAgB,EAAE;AAAA,YACrD;AAAA,YACA,MAAM;AAAA,cACJ,QAAQ;AAAA,cACR,SAAS;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,SAAS,CAAC,qBAAqB,gBAAgB;AAAA,YACjD;AAAA,YACA,YAAY;AAAA,cACV,SAAS;AAAA,YACX;AAAA,YACA,aAAa;AAAA,cACX,SAAS;AAAA,YACX;AAAA,YACA,WAAW;AAAA,cACT;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,qBAAqB,gBAAgB;AAAA,cACjD;AAAA,cACA;AAAA,gBACE,SAAS,CAAC,uBAAuB,qBAAqB,gBAAgB;AAAA,cACxE;AAAA,YACF;AAAA,YACA,OAAO;AAAA,cACL,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA,YACA,UAAU;AAAA,cACR,OAAO,IAAI,cAAc;AAAA,cACzB,SAAS,CAAC,kBAAkB,iBAAiB;AAAA,YAC/C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,QACN,WAAW,CAACA,SAAQ,CAAC,CAACA,KAAI;AAAA,QAC1B,cAAc,CAAC,MAAM,QAAQ,IAAI,UAAU;AAAA,QAC3C,UAAU,CAACA,SAAQA,KAAI,MAAMA,KAAI,YAAY,MAAM;AAAA,QACnD,iBAAiB,CAACA,SAAQA,KAAI;AAAA,QAC9B,cAAc,CAACA,MAAK,QAAQ;AAC1B,cAAI,CAACA,KAAI;AAAS,mBAAO,YAAY,IAAI,OAAOA,KAAI,IAAI;AACxD,gBAAM,QAAQ,IAAI,OAAOA,KAAI,SAAS,GAAG;AACzC,iBAAO,MAAM,KAAK,IAAI,KAAK;AAAA,QAC7B;AAAA,QACA,cAAc,CAACA,SAAQ;AACrB,iBACEA,KAAI,oBAAoB,MAAMA,KAAI,eAClCA,KAAI,MAAM,UAAU,CAAC,MAAM,EAAE,KAAK,MAAM,EAAE,MAAMA,KAAI;AAAA,QAExD;AAAA,QACA,oBAAoB,CAACA,SAAQA,KAAI,iBAAiBA,KAAI,cAAc;AAAA,QACpE,UAAU,CAAC,MAAM,QAAQ,IAAI,UAAU;AAAA,QACvC,YAAY,CAACA,SAAQ,CAAC,CAACA,KAAI;AAAA,MAC7B;AAAA,MACA,SAAS;AAAA,QACP,YAAY,CAACA,SAAQ;AACnB,cAAIA,KAAI,MAAM;AAAQ;AACtB,gBAAM,SAAS,IAAI,YAAYA,IAAG;AAClC,gBAAM,cAAc,MAAM,KAAa,EAAE,QAAQ,OAAO,OAAO,CAAC,EAAE,KAAK,EAAE;AACzE,iBAAOA,MAAK,WAAW;AAAA,QACzB;AAAA,QACA,YAAY,CAACA,SAAQ;AACnB,qCAAI,MAAM;AACR,gBAAIA,KAAI,iBAAiB;AAAI;AAC7B,gBAAI,kBAAkBA,IAAG,GAAG,MAAM;AAAA,UACpC,CAAC;AAAA,QACH;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,qCAAI,MAAM;AACR,gBAAIA,KAAI,iBAAiB;AAAI;AAC7B,kBAAM,QAAQ,IAAI,kBAAkBA,IAAG;AACvC,kBAAM,SAAS,MAAM,MAAM;AAC3B,kBAAM,iBAAiBA,KAAI,gBAAgB,IAAI;AAC/C,kBAAM,eAAe;AAAA,UACvB,CAAC;AAAA,QACH;AAAA,QACA,kBAAkB,CAACA,SAAQ;AACzB,cAAI,CAACA,KAAI;AAAiB;AAC1B,UAAAA,KAAI,aAAa,EAAE,OAAO,MAAM,KAAKA,KAAI,KAAK,GAAG,eAAeA,KAAI,cAAc,CAAC;AAAA,QACrF;AAAA,QACA,gBAAgB,CAACA,SAAQ;AACvB,UAAAA,KAAI,WAAW,EAAE,OAAO,MAAM,KAAKA,KAAI,KAAK,EAAE,CAAC;AAAA,QACjD;AAAA,QACA,oBAAoB,CAACA,SAAQ;AAC3B,gBAAM,UAAU,IAAI,iBAAiBA,IAAG;AACxC,yDAAwB,SAAS,EAAE,OAAOA,KAAI,cAAc,CAAC;AAAA,QAC/D;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,YAAY,EAAE,OAAO,IAAI,OAAO,OAAOA,KAAI,aAAa,CAAC;AAAA,QAC/D;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,UAAAA,KAAI,eAAe;AAAA,QACrB;AAAA,QACA,UAAU,CAACA,MAAK,QAAQ;AACtB,iBAAOA,MAAK,IAAI,KAAK;AAAA,QACvB;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,eAAe,IAAI;AAAA,QACzB;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,MAAMA,KAAI,YAAY,IAAI,aAAaA,KAAI,cAAc,IAAI,KAAK;AAAA,QACxE;AAAA,QACA,eAAeA,MAAK,KAAK;AACvB,gBAAM,QAAQ,IAAI,WAAWA,MAAK,IAAI,MAAM,SAAS,CAAC;AACtD,cAAI,CAAC;AAAO;AACZ,gBAAM,QAAQA,KAAI,MAAM,IAAI,KAAK;AAAA,QACnC;AAAA,QACA,kBAAkBA,MAAK;AACrB,gBAAM,SAAS,IAAI,YAAYA,IAAG;AAClC,iBAAO,QAAQ,CAAC,OAAO,UAAU;AAC/B,kBAAM,QAAQA,KAAI,MAAM,KAAK;AAAA,UAC/B,CAAC;AAAA,QACH;AAAA,QACA,eAAeA,MAAK,KAAK;AACvB,qCAAI,MAAM;AACR,kBAAM,aAAaA,KAAI,eAAe,IAAI;AAC1C,kBAAM,QAAQ,IAAI,MAAM,UAAU,YAAY,aAAaA,KAAI,WAAW;AAC1E,mBAAOA,MAAK,KAAK;AAAA,UACnB,CAAC;AAAA,QACH;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,MAAM,IAAI,KAAK,IAAI,aAAaA,KAAI,cAAc,IAAI,KAAK;AAAA,QACjE;AAAA,QACA,YAAY,CAACA,SAAQ;AACnB,gBAAM,YAAY,MAAM,KAAa,EAAE,QAAQA,KAAI,YAAY,CAAC,EAAE,KAAK,EAAE;AACzE,iBAAOA,MAAK,SAAS;AAAA,QACvB;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,UAAAA,KAAI,MAAMA,KAAI,YAAY,IAAI;AAAA,QAChC;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,gBAAM,QAAQ,IAAI,kBAAkBA,IAAG;AACvC,gBAAM,QAAQA,KAAI;AAAA,QACpB;AAAA,QACA,sBAAsB,CAACA,SAAQ;AAC7B,UAAAA,KAAI,eAAe;AAAA,QACrB;AAAA,QACA,qBAAqB,CAACA,SAAQ;AAC5B,UAAAA,KAAI,eAAe,KAAK,IAAIA,KAAI,eAAe,GAAGA,KAAI,cAAc,CAAC;AAAA,QACvE;AAAA,QACA,qBAAqB,CAACA,SAAQ;AAC5B,UAAAA,KAAI,eAAe,KAAK,IAAIA,KAAI,eAAe,GAAG,CAAC;AAAA,QACrD;AAAA,QACA,wBAAwB,CAACA,SAAQ;AAC/B,qCAAI,MAAM;AACR,YAAAA,KAAI,eAAe,KAAK,IAAIA,KAAI,mBAAmBA,KAAI,cAAc,CAAC;AAAA,UACxE,CAAC;AAAA,QACH;AAAA,QACA,eAAe,GAAG,KAAK;AACrB,cAAI,eAAe;AAAA,QACrB;AAAA,QACA,yBAAyBA,MAAK;AAC5B,cAAI,CAACA,KAAI;AAAgB;AACzB,qCAAI,MAAM;AACR,gBAAI,kBAAkBA,IAAG,GAAG,KAAK;AAAA,UACnC,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK;AACrB,cAAI,CAACA,KAAI,QAAQ,CAACA,KAAI;AAAiB;AACvC,gBAAM,QAAQ,IAAI,iBAAiBA,IAAG;AACtC,iBAAO,MAAM,cAAc;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAM,QAAQ;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAChB;AAEA,SAAS,YAAY,OAAe,MAA8B;AAChE,MAAI,CAAC;AAAM,WAAO;AAClB,SAAO,CAAC,CAAC,MAAM,IAAI,GAAG,KAAK,KAAK;AAClC;AAEA,SAAS,OAAO,KAAqB,OAA0B;AAC7D,QAAM,MAAM,MAAM,QAAQ,KAAK,IAAI,QAAQ,MAAM,MAAM,EAAE,EAAE,OAAO,OAAO;AACzE,MAAI,QAAQ,CAACC,QAAO,UAAU;AAC5B,QAAI,MAAM,KAAK,IAAIA;AAAA,EACrB,CAAC;AACH;AAEA,SAAS,aAAa,SAAiB,MAAc;AACnD,MAAI,YAAY;AAChB,MAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;AAAG,gBAAY,KAAK,CAAC;AAAA,WACrC,QAAQ,CAAC,MAAM,KAAK,CAAC;AAAG,gBAAY,KAAK,CAAC;AACnD,SAAO;AACT;","names":["import_dom_query","import_dom_query","import_utils","ctx","value"]}

package/dist/index.mjs

@@ -39,42 +39,21 @@ function connect(state, send, normalize) {
     dom.getFirstInputEl(state.context)?.focus();
   }
   return {
-    /**
-     * The value of the input as an array of strings.
-     */
     value: state.context.value,
-    /**
-     * The value of the input as a string.
-     */
     valueAsString: state.context.valueAsString,
-    /**
-     * Whether all inputs are filled.
-     */
     isValueComplete,
-    /**
-     * Function to set the value of the inputs.
-     */
     setValue(value) {
       if (!Array.isArray(value)) {
         invariant("[pin-input/setValue] value must be an array");
       }
       send({ type: "SET_VALUE", value });
     },
-    /**
-     * Function to clear the value of the inputs.
-     */
     clearValue() {
       send({ type: "CLEAR_VALUE" });
     },
-    /**
-     * Function to set the value of the input at a specific index.
-     */
     setValueAtIndex(index, value) {
       send({ type: "SET_VALUE", value, index });
     },
-    /**
-     * Function to focus the pin-input. This will focus the first input.
-     */
     focus,
     rootProps: normalize.element({
       dir: state.context.dir,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.ts","../src/pin-input.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"hiddenInput\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { Send, State } from \"./pin-input.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {\n  const isValueComplete = state.context.isValueComplete\n  const isInvalid = 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    /**\n     * The value of the input as an array of strings.\n     */\n    value: state.context.value,\n    /**\n     * The value of the input as a string.\n     */\n    valueAsString: state.context.valueAsString,\n    /**\n     * Whether all inputs are filled.\n     */\n    isValueComplete: isValueComplete,\n    /**\n     * Function to set the value of the inputs.\n     */\n    setValue(value: string[]) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"SET_VALUE\", value })\n    },\n    /**\n     * Function to clear the value of the inputs.\n     */\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n    /**\n     * Function to set the value of the input at a specific index.\n     */\n    setValueAtIndex(index: number, value: string) {\n      send({ type: \"SET_VALUE\", value, index })\n    },\n    /**\n     * Function to focus the pin-input. This will focus the first input.\n     */\n    focus,\n\n    rootProps: normalize.element({\n      dir: state.context.dir,\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n    }),\n\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      htmlFor: dom.getHiddenInputId(state.context),\n      id: dom.getLabelId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n      onClick: (event) => {\n        event.preventDefault()\n        focus()\n      },\n    }),\n\n    hiddenInputProps: normalize.input({\n      ...parts.hiddenInput.attrs,\n      \"aria-hidden\": true,\n      type: \"text\",\n      tabIndex: -1,\n      id: dom.getHiddenInputId(state.context),\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    controlProps: normalize.element({\n      ...parts.control.attrs,\n      id: dom.getControlId(state.context),\n    }),\n\n    getInputProps({ index }: { index: number }) {\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(isValueComplete),\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(isInvalid),\n        \"data-invalid\": dataAttr(isInvalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"PASTE\", value })\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"BACKSPACE\")\n            return\n          }\n          send({ type: \"INPUT\", value, index })\n        },\n        onKeyDown(event) {\n          const evt = getNativeEvent(event)\n          if (evt.isComposing || isModifiedEvent(evt)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"BACKSPACE\")\n            },\n            Delete() {\n              send(\"DELETE\")\n            },\n            ArrowLeft() {\n              send(\"ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"ENTER\")\n            },\n          }\n\n          const key = getEventKey(event, { dir: state.context.dir })\n          const exec = keyMap[key]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          } else {\n            if (key === \"Tab\") return\n            send({ type: \"KEY_DOWN\", value: key, preventDefault: () => event.preventDefault() })\n          }\n        },\n        onFocus() {\n          send({ type: \"FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"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  getElements: (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.getElements(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getElements(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nconst { and, not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: ctx.autoFocus ? \"focused\" : \"idle\",\n      context: {\n        value: [],\n        focusedIndex: -1,\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\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      watch: {\n        focusedIndex: [\"focusInput\", \"setInputSelection\"],\n        value: [\"dispatchInputEvent\", \"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      entry: ctx.autoFocus ? [\"setupValue\", \"setFocusIndexToFirst\"] : [\"setupValue\"],\n\n      on: {\n        SET_VALUE: [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\", \"invokeOnChange\"],\n          },\n          { actions: [\"setValue\", \"invokeOnChange\"] },\n        ],\n        CLEAR_VALUE: [\n          {\n            guard: \"isDisabled\",\n            actions: [\"clearValue\", \"invokeOnChange\"],\n          },\n          {\n            actions: [\"clearValue\", \"invokeOnChange\", \"setFocusIndexToFirst\"],\n          },\n        ],\n      },\n\n      states: {\n        idle: {\n          on: {\n            FOCUS: {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            INPUT: [\n              {\n                guard: and(\"isFinalValue\", \"isValidValue\"),\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"syncInputValue\"],\n              },\n              {\n                guard: \"isValidValue\",\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            PASTE: [\n              {\n                guard: \"isValidValue\",\n                actions: [\"setPastedValue\", \"invokeOnChange\", \"setLastValueFocusIndex\"],\n              },\n              { actions: [\"resetFocusedValue\", \"invokeOnChange\"] },\n            ],\n            BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            DELETE: {\n              guard: \"hasValue\",\n              actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n            },\n            ARROW_LEFT: {\n              actions: \"setPrevFocusedIndex\",\n            },\n            ARROW_RIGHT: {\n              actions: \"setNextFocusedIndex\",\n            },\n            BACKSPACE: [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\", \"invokeOnChange\"],\n              },\n            ],\n            ENTER: {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            KEY_DOWN: {\n              guard: not(\"isValidValue\"),\n              actions: [\"preventDefault\", \"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        isValidValue: (ctx, evt) => {\n          if (!ctx.pattern) return isValidType(evt.value, ctx.type)\n          const regex = new RegExp(ctx.pattern, \"g\")\n          return regex.test(evt.value)\n        },\n        isFinalValue: (ctx) => {\n          return (\n            ctx.filledValueLength + 1 === ctx.valueLength &&\n            ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex\n          )\n        },\n        isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,\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 inputs = dom.getElements(ctx)\n          const emptyValues = Array.from<string>({ length: inputs.length }).fill(\"\")\n          assign(ctx, emptyValues)\n        },\n        focusInput: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            dom.getFocusedInputEl(ctx)?.focus()\n          })\n        },\n        setInputSelection: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            const input = dom.getFocusedInputEl(ctx)\n            const length = input.value.length\n            input.selectionStart = ctx.selectOnFocus ? 0 : length\n            input.selectionEnd = length\n          })\n        },\n        invokeOnComplete: (ctx) => {\n          if (!ctx.isValueComplete) return\n          ctx.onComplete?.({ value: Array.from(ctx.value), valueAsString: ctx.valueAsString })\n        },\n        invokeOnChange: (ctx) => {\n          ctx.onChange?.({ value: Array.from(ctx.value) })\n        },\n        dispatchInputEvent: (ctx) => {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n        },\n        invokeOnInvalid: (ctx, evt) => {\n          ctx.onInvalid?.({ value: evt.value, index: ctx.focusedIndex })\n        },\n        clearFocusedIndex: (ctx) => {\n          ctx.focusedIndex = -1\n        },\n        setValue: (ctx, evt) => {\n          assign(ctx, evt.value)\n        },\n        setFocusedIndex: (ctx, evt) => {\n          ctx.focusedIndex = evt.index\n        },\n        setFocusedValue: (ctx, evt) => {\n          ctx.value[ctx.focusedIndex] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        syncInputValue(ctx, evt) {\n          const input = dom.getInputEl(ctx, evt.index.toString())\n          if (!input) return\n          input.value = ctx.value[evt.index]\n        },\n        syncInputElements(ctx) {\n          const inputs = dom.getElements(ctx)\n          inputs.forEach((input, index) => {\n            input.value = ctx.value[index]\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = ctx.focusedValue ? 1 : 0\n            const value = evt.value.substring(startIndex, startIndex + ctx.valueLength)\n            assign(ctx, value)\n          })\n        },\n        setValueAtIndex: (ctx, evt) => {\n          ctx.value[evt.index] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        clearValue: (ctx) => {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          assign(ctx, nextValue)\n        },\n        clearFocusedValue: (ctx) => {\n          ctx.value[ctx.focusedIndex] = \"\"\n        },\n        resetFocusedValue: (ctx) => {\n          const input = dom.getFocusedInputEl(ctx)\n          input.value = ctx.focusedValue\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        preventDefault(_, evt) {\n          evt.preventDefault()\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 input = dom.getHiddenInputEl(ctx)\n          input?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nfunction isValidType(value: string, type: MachineContext[\"type\"]) {\n  if (!type) return true\n  return !!REGEX[type]?.test(value)\n}\n\nfunction assign(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\n}\n"],"mappings":"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","names":["ctx","value"]}
+{"version":3,"sources":["../src/pin-input.anatomy.ts","../src/pin-input.connect.ts","../src/pin-input.dom.ts","../src/pin-input.machine.ts"],"sourcesContent":["import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"hiddenInput\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { type EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { visuallyHiddenStyle } from \"@zag-js/visually-hidden\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { PublicApi, Send, State } from \"./pin-input.types\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {\n  const isValueComplete = state.context.isValueComplete\n  const isInvalid = 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    value: state.context.value,\n    valueAsString: state.context.valueAsString,\n    isValueComplete: isValueComplete,\n\n    setValue(value: string[]) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"SET_VALUE\", value })\n    },\n\n    clearValue() {\n      send({ type: \"CLEAR_VALUE\" })\n    },\n\n    setValueAtIndex(index: number, value: string) {\n      send({ type: \"SET_VALUE\", value, index })\n    },\n\n    focus,\n\n    rootProps: normalize.element({\n      dir: state.context.dir,\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n    }),\n\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      htmlFor: dom.getHiddenInputId(state.context),\n      id: dom.getLabelId(state.context),\n      \"data-invalid\": dataAttr(isInvalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(isValueComplete),\n      onClick: (event) => {\n        event.preventDefault()\n        focus()\n      },\n    }),\n\n    hiddenInputProps: normalize.input({\n      ...parts.hiddenInput.attrs,\n      \"aria-hidden\": true,\n      type: \"text\",\n      tabIndex: -1,\n      id: dom.getHiddenInputId(state.context),\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    controlProps: normalize.element({\n      ...parts.control.attrs,\n      id: dom.getControlId(state.context),\n    }),\n\n    getInputProps({ index }: { index: number }) {\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(isValueComplete),\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(isInvalid),\n        \"data-invalid\": dataAttr(isInvalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"PASTE\", value })\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"BACKSPACE\")\n            return\n          }\n          send({ type: \"INPUT\", value, index })\n        },\n        onKeyDown(event) {\n          const evt = getNativeEvent(event)\n          if (evt.isComposing || isModifiedEvent(evt)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"BACKSPACE\")\n            },\n            Delete() {\n              send(\"DELETE\")\n            },\n            ArrowLeft() {\n              send(\"ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"ENTER\")\n            },\n          }\n\n          const key = getEventKey(event, { dir: state.context.dir })\n          const exec = keyMap[key]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          } else {\n            if (key === \"Tab\") return\n            send({ type: \"KEY_DOWN\", value: key, preventDefault: () => event.preventDefault() })\n          }\n        },\n        onFocus() {\n          send({ type: \"FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"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  getElements: (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.getElements(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getElements(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import { createMachine, guards } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nconst { and, not } = guards\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: ctx.autoFocus ? \"focused\" : \"idle\",\n      context: {\n        value: [],\n        focusedIndex: -1,\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\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      watch: {\n        focusedIndex: [\"focusInput\", \"setInputSelection\"],\n        value: [\"dispatchInputEvent\", \"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      entry: ctx.autoFocus ? [\"setupValue\", \"setFocusIndexToFirst\"] : [\"setupValue\"],\n\n      on: {\n        SET_VALUE: [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\", \"invokeOnChange\"],\n          },\n          { actions: [\"setValue\", \"invokeOnChange\"] },\n        ],\n        CLEAR_VALUE: [\n          {\n            guard: \"isDisabled\",\n            actions: [\"clearValue\", \"invokeOnChange\"],\n          },\n          {\n            actions: [\"clearValue\", \"invokeOnChange\", \"setFocusIndexToFirst\"],\n          },\n        ],\n      },\n\n      states: {\n        idle: {\n          on: {\n            FOCUS: {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            INPUT: [\n              {\n                guard: and(\"isFinalValue\", \"isValidValue\"),\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"syncInputValue\"],\n              },\n              {\n                guard: \"isValidValue\",\n                actions: [\"setFocusedValue\", \"invokeOnChange\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            PASTE: [\n              {\n                guard: \"isValidValue\",\n                actions: [\"setPastedValue\", \"invokeOnChange\", \"setLastValueFocusIndex\"],\n              },\n              { actions: [\"resetFocusedValue\", \"invokeOnChange\"] },\n            ],\n            BLUR: {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            DELETE: {\n              guard: \"hasValue\",\n              actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n            },\n            ARROW_LEFT: {\n              actions: \"setPrevFocusedIndex\",\n            },\n            ARROW_RIGHT: {\n              actions: \"setNextFocusedIndex\",\n            },\n            BACKSPACE: [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\", \"invokeOnChange\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\", \"invokeOnChange\"],\n              },\n            ],\n            ENTER: {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            KEY_DOWN: {\n              guard: not(\"isValidValue\"),\n              actions: [\"preventDefault\", \"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        isValidValue: (ctx, evt) => {\n          if (!ctx.pattern) return isValidType(evt.value, ctx.type)\n          const regex = new RegExp(ctx.pattern, \"g\")\n          return regex.test(evt.value)\n        },\n        isFinalValue: (ctx) => {\n          return (\n            ctx.filledValueLength + 1 === ctx.valueLength &&\n            ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex\n          )\n        },\n        isLastInputFocused: (ctx) => ctx.focusedIndex === ctx.valueLength - 1,\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 inputs = dom.getElements(ctx)\n          const emptyValues = Array.from<string>({ length: inputs.length }).fill(\"\")\n          assign(ctx, emptyValues)\n        },\n        focusInput: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            dom.getFocusedInputEl(ctx)?.focus()\n          })\n        },\n        setInputSelection: (ctx) => {\n          raf(() => {\n            if (ctx.focusedIndex === -1) return\n            const input = dom.getFocusedInputEl(ctx)\n            const length = input.value.length\n            input.selectionStart = ctx.selectOnFocus ? 0 : length\n            input.selectionEnd = length\n          })\n        },\n        invokeOnComplete: (ctx) => {\n          if (!ctx.isValueComplete) return\n          ctx.onComplete?.({ value: Array.from(ctx.value), valueAsString: ctx.valueAsString })\n        },\n        invokeOnChange: (ctx) => {\n          ctx.onChange?.({ value: Array.from(ctx.value) })\n        },\n        dispatchInputEvent: (ctx) => {\n          const inputEl = dom.getHiddenInputEl(ctx)\n          dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n        },\n        invokeOnInvalid: (ctx, evt) => {\n          ctx.onInvalid?.({ value: evt.value, index: ctx.focusedIndex })\n        },\n        clearFocusedIndex: (ctx) => {\n          ctx.focusedIndex = -1\n        },\n        setValue: (ctx, evt) => {\n          assign(ctx, evt.value)\n        },\n        setFocusedIndex: (ctx, evt) => {\n          ctx.focusedIndex = evt.index\n        },\n        setFocusedValue: (ctx, evt) => {\n          ctx.value[ctx.focusedIndex] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        syncInputValue(ctx, evt) {\n          const input = dom.getInputEl(ctx, evt.index.toString())\n          if (!input) return\n          input.value = ctx.value[evt.index]\n        },\n        syncInputElements(ctx) {\n          const inputs = dom.getElements(ctx)\n          inputs.forEach((input, index) => {\n            input.value = ctx.value[index]\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = ctx.focusedValue ? 1 : 0\n            const value = evt.value.substring(startIndex, startIndex + ctx.valueLength)\n            assign(ctx, value)\n          })\n        },\n        setValueAtIndex: (ctx, evt) => {\n          ctx.value[evt.index] = getNextValue(ctx.focusedValue, evt.value)\n        },\n        clearValue: (ctx) => {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          assign(ctx, nextValue)\n        },\n        clearFocusedValue: (ctx) => {\n          ctx.value[ctx.focusedIndex] = \"\"\n        },\n        resetFocusedValue: (ctx) => {\n          const input = dom.getFocusedInputEl(ctx)\n          input.value = ctx.focusedValue\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        preventDefault(_, evt) {\n          evt.preventDefault()\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 input = dom.getHiddenInputEl(ctx)\n          input?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nfunction isValidType(value: string, type: MachineContext[\"type\"]) {\n  if (!type) return true\n  return !!REGEX[type]?.test(value)\n}\n\nfunction assign(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\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAEvB,IAAM,UAAU,cAAc,UAAU,EAAE,MAAM,QAAQ,SAAS,eAAe,SAAS,SAAS;AAClG,IAAM,QAAQ,QAAQ,MAAM;;;ACHnC,SAA2B,aAAa,gBAAgB,uBAAuB;AAC/E,SAAS,UAAU,gBAAgB;AAEnC,SAAS,iBAAiB;AAC1B,SAAS,2BAA2B;;;ACJpC,SAAS,aAAa,gBAAgB;AAG/B,IAAM,MAAM,YAAY;AAAA,EAC7B,WAAW,CAAC,QAAa,IAAI,KAAK,QAAQ,aAAa,IAAI;AAAA,EAC3D,YAAY,CAAC,KAAU,OAAe,IAAI,KAAK,QAAQ,EAAE,KAAK,aAAa,IAAI,MAAM;AAAA,EACrF,kBAAkB,CAAC,QAAa,IAAI,KAAK,eAAe,aAAa,IAAI;AAAA,EACzE,YAAY,CAAC,QAAa,IAAI,KAAK,SAAS,aAAa,IAAI;AAAA,EAC7D,cAAc,CAAC,QAAa,IAAI,KAAK,WAAW,aAAa,IAAI;AAAA,EAEjE,WAAW,CAAC,QAAa,IAAI,QAAQ,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,EAC5D,aAAa,CAAC,QAAa;AACzB,UAAM,UAAU,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC;AAC7C,UAAM,WAAW,sBAAsB;AACvC,WAAO,SAA2B,IAAI,UAAU,GAAG,GAAG,QAAQ;AAAA,EAChE;AAAA,EACA,YAAY,CAAC,KAAU,OAAe,IAAI,QAA0B,KAAK,IAAI,WAAW,KAAK,EAAE,CAAC;AAAA,EAChG,mBAAmB,CAAC,QAAa,IAAI,YAAY,GAAG,EAAE,IAAI,YAAY;AAAA,EACtE,iBAAiB,CAAC,QAAa,IAAI,YAAY,GAAG,EAAE,CAAC;AAAA,EACrD,kBAAkB,CAAC,QAAa,IAAI,QAA0B,KAAK,IAAI,iBAAiB,GAAG,CAAC;AAC9F,CAAC;;;ADXM,SAAS,QAA6B,OAAc,MAAY,WAA4C;AACjH,QAAM,kBAAkB,MAAM,QAAQ;AACtC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,eAAe,MAAM,QAAQ;AACnC,QAAM,eAAe,MAAM,QAAQ;AAEnC,WAAS,QAAQ;AACf,QAAI,gBAAgB,MAAM,OAAO,GAAG,MAAM;AAAA,EAC5C;AAEA,SAAO;AAAA,IACL,OAAO,MAAM,QAAQ;AAAA,IACrB,eAAe,MAAM,QAAQ;AAAA,IAC7B;AAAA,IAEA,SAAS,OAAiB;AACxB,UAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,kBAAU,6CAA6C;AAAA,MACzD;AACA,WAAK,EAAE,MAAM,aAAa,MAAM,CAAC;AAAA,IACnC;AAAA,IAEA,aAAa;AACX,WAAK,EAAE,MAAM,cAAc,CAAC;AAAA,IAC9B;AAAA,IAEA,gBAAgB,OAAe,OAAe;AAC5C,WAAK,EAAE,MAAM,aAAa,OAAO,MAAM,CAAC;AAAA,IAC1C;AAAA,IAEA;AAAA,IAEA,WAAW,UAAU,QAAQ;AAAA,MAC3B,KAAK,MAAM,QAAQ;AAAA,MACnB,GAAG,MAAM,KAAK;AAAA,MACd,IAAI,IAAI,UAAU,MAAM,OAAO;AAAA,MAC/B,gBAAgB,SAAS,SAAS;AAAA,MAClC,iBAAiB,SAAS,MAAM,QAAQ,QAAQ;AAAA,MAChD,iBAAiB,SAAS,eAAe;AAAA,IAC3C,CAAC;AAAA,IAED,YAAY,UAAU,MAAM;AAAA,MAC1B,GAAG,MAAM,MAAM;AAAA,MACf,SAAS,IAAI,iBAAiB,MAAM,OAAO;AAAA,MAC3C,IAAI,IAAI,WAAW,MAAM,OAAO;AAAA,MAChC,gBAAgB,SAAS,SAAS;AAAA,MAClC,iBAAiB,SAAS,MAAM,QAAQ,QAAQ;AAAA,MAChD,iBAAiB,SAAS,eAAe;AAAA,MACzC,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AACrB,cAAM;AAAA,MACR;AAAA,IACF,CAAC;AAAA,IAED,kBAAkB,UAAU,MAAM;AAAA,MAChC,GAAG,MAAM,YAAY;AAAA,MACrB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,UAAU;AAAA,MACV,IAAI,IAAI,iBAAiB,MAAM,OAAO;AAAA,MACtC,MAAM,MAAM,QAAQ;AAAA,MACpB,MAAM,MAAM,QAAQ;AAAA,MACpB,OAAO;AAAA,MACP,WAAW,MAAM,QAAQ;AAAA,MACzB,cAAc,MAAM,QAAQ;AAAA,IAC9B,CAAC;AAAA,IAED,cAAc,UAAU,QAAQ;AAAA,MAC9B,GAAG,MAAM,QAAQ;AAAA,MACjB,IAAI,IAAI,aAAa,MAAM,OAAO;AAAA,IACpC,CAAC;AAAA,IAED,cAAc,EAAE,MAAM,GAAsB;AAC1C,YAAM,YAAY,MAAM,QAAQ,SAAS,YAAY,QAAQ;AAC7D,aAAO,UAAU,MAAM;AAAA,QACrB,GAAG,MAAM,MAAM;AAAA,QACf,UAAU,MAAM,QAAQ;AAAA,QACxB,iBAAiB,SAAS,MAAM,QAAQ,QAAQ;AAAA,QAChD,iBAAiB,SAAS,eAAe;AAAA,QACzC,IAAI,IAAI,WAAW,MAAM,SAAS,MAAM,SAAS,CAAC;AAAA,QAClD,gBAAgB,IAAI,UAAU,MAAM,OAAO;AAAA,QAC3C,cAAc,aAAa,WAAW,OAAO,MAAM,QAAQ,WAAW;AAAA,QACtE,WAAW,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS,YAAY,YAAY;AAAA,QAC/E,gBAAgB,SAAS,SAAS;AAAA,QAClC,gBAAgB,SAAS,SAAS;AAAA,QAClC,MAAM,MAAM,QAAQ,OAAO,aAAa;AAAA,QACxC,cAAc,MAAM,QAAQ,MAAM,KAAK,KAAK;AAAA,QAC5C,gBAAgB;AAAA,QAChB,cAAc,MAAM,QAAQ,MAAM,kBAAkB;AAAA,QACpD,aAAa,iBAAiB,QAAQ,KAAK,MAAM,QAAQ;AAAA,QACzD,SAAS,OAAO;AACd,gBAAM,MAAM,eAAe,KAAK;AAChC,gBAAM,EAAE,MAAM,IAAI,MAAM;AACxB,cAAI,IAAI,cAAc,qBAAqB,MAAM,SAAS,GAAG;AAC3D,iBAAK,EAAE,MAAM,SAAS,MAAM,CAAC;AAC7B,kBAAM,eAAe;AACrB;AAAA,UACF;AAEA,cAAI,IAAI,cAAc,yBAAyB;AAC7C,iBAAK,WAAW;AAChB;AAAA,UACF;AACA,eAAK,EAAE,MAAM,SAAS,OAAO,MAAM,CAAC;AAAA,QACtC;AAAA,QACA,UAAU,OAAO;AACf,gBAAM,MAAM,eAAe,KAAK;AAChC,cAAI,IAAI,eAAe,gBAAgB,GAAG;AAAG;AAE7C,gBAAM,SAAsB;AAAA,YAC1B,YAAY;AACV,mBAAK,WAAW;AAAA,YAClB;AAAA,YACA,SAAS;AACP,mBAAK,QAAQ;AAAA,YACf;AAAA,YACA,YAAY;AACV,mBAAK,YAAY;AAAA,YACnB;AAAA,YACA,aAAa;AACX,mBAAK,aAAa;AAAA,YACpB;AAAA,YACA,QAAQ;AACN,mBAAK,OAAO;AAAA,YACd;AAAA,UACF;AAEA,gBAAM,MAAM,YAAY,OAAO,EAAE,KAAK,MAAM,QAAQ,IAAI,CAAC;AACzD,gBAAM,OAAO,OAAO,GAAG;AAEvB,cAAI,MAAM;AACR,iBAAK,KAAK;AACV,kBAAM,eAAe;AAAA,UACvB,OAAO;AACL,gBAAI,QAAQ;AAAO;AACnB,iBAAK,EAAE,MAAM,YAAY,OAAO,KAAK,gBAAgB,MAAM,MAAM,eAAe,EAAE,CAAC;AAAA,UACrF;AAAA,QACF;AAAA,QACA,UAAU;AACR,eAAK,EAAE,MAAM,SAAS,MAAM,CAAC;AAAA,QAC/B;AAAA,QACA,SAAS;AACP,eAAK,EAAE,MAAM,QAAQ,MAAM,CAAC;AAAA,QAC9B;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;;;AE5JA,SAAS,eAAe,cAAc;AACtC,SAAS,WAAW;AACpB,SAAS,+BAA+B;AACxC,SAAS,eAAe;AAIxB,IAAM,EAAE,KAAK,IAAI,IAAI;AAEd,SAAS,QAAQ,aAAiC;AACvD,QAAM,MAAM,QAAQ,WAAW;AAC/B,SAAO;AAAA,IACL;AAAA,MACE,IAAI;AAAA,MACJ,SAAS,IAAI,YAAY,YAAY;AAAA,MACrC,SAAS;AAAA,QACP,OAAO,CAAC;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,KAAK;AAAA,QACL,MAAM;AAAA,QACN,GAAG;AAAA,QACH,cAAc;AAAA,UACZ,YAAY,CAAC,OAAO,WAAW,YAAY,QAAQ,QAAQ;AAAA,UAC3D,GAAG,IAAI;AAAA,QACT;AAAA,MACF;AAAA,MAEA,UAAU;AAAA,QACR,aAAa,CAACA,SAAQA,KAAI,MAAM;AAAA,QAChC,mBAAmB,CAACA,SAAQA,KAAI,MAAM,OAAO,CAAC,MAAM,GAAG,KAAK,MAAM,EAAE,EAAE;AAAA,QACtE,iBAAiB,CAACA,SAAQA,KAAI,gBAAgBA,KAAI;AAAA,QAClD,eAAe,CAACA,SAAQA,KAAI,MAAM,KAAK,EAAE;AAAA,QACzC,cAAc,CAACA,SAAQA,KAAI,MAAMA,KAAI,YAAY;AAAA,MACnD;AAAA,MAEA,OAAO;AAAA,QACL,cAAc,CAAC,cAAc,mBAAmB;AAAA,QAChD,OAAO,CAAC,sBAAsB,mBAAmB;AAAA,QACjD,iBAAiB,CAAC,oBAAoB,0BAA0B;AAAA,MAClE;AAAA,MAEA,OAAO,IAAI,YAAY,CAAC,cAAc,sBAAsB,IAAI,CAAC,YAAY;AAAA,MAE7E,IAAI;AAAA,QACF,WAAW;AAAA,UACT;AAAA,YACE,OAAO;AAAA,YACP,SAAS,CAAC,mBAAmB,gBAAgB;AAAA,UAC/C;AAAA,UACA,EAAE,SAAS,CAAC,YAAY,gBAAgB,EAAE;AAAA,QAC5C;AAAA,QACA,aAAa;AAAA,UACX;AAAA,YACE,OAAO;AAAA,YACP,SAAS,CAAC,cAAc,gBAAgB;AAAA,UAC1C;AAAA,UACA;AAAA,YACE,SAAS,CAAC,cAAc,kBAAkB,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,MAEA,QAAQ;AAAA,QACN,MAAM;AAAA,UACJ,IAAI;AAAA,YACF,OAAO;AAAA,cACL,QAAQ;AAAA,cACR,SAAS;AAAA,YACX;AAAA,UACF;AAAA,QACF;AAAA,QACA,SAAS;AAAA,UACP,IAAI;AAAA,YACF,OAAO;AAAA,cACL;AAAA,gBACE,OAAO,IAAI,gBAAgB,cAAc;AAAA,gBACzC,SAAS,CAAC,mBAAmB,kBAAkB,gBAAgB;AAAA,cACjE;AAAA,cACA;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,mBAAmB,kBAAkB,uBAAuB,gBAAgB;AAAA,cACxF;AAAA,YACF;AAAA,YACA,OAAO;AAAA,cACL;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,kBAAkB,kBAAkB,wBAAwB;AAAA,cACxE;AAAA,cACA,EAAE,SAAS,CAAC,qBAAqB,gBAAgB,EAAE;AAAA,YACrD;AAAA,YACA,MAAM;AAAA,cACJ,QAAQ;AAAA,cACR,SAAS;AAAA,YACX;AAAA,YACA,QAAQ;AAAA,cACN,OAAO;AAAA,cACP,SAAS,CAAC,qBAAqB,gBAAgB;AAAA,YACjD;AAAA,YACA,YAAY;AAAA,cACV,SAAS;AAAA,YACX;AAAA,YACA,aAAa;AAAA,cACX,SAAS;AAAA,YACX;AAAA,YACA,WAAW;AAAA,cACT;AAAA,gBACE,OAAO;AAAA,gBACP,SAAS,CAAC,qBAAqB,gBAAgB;AAAA,cACjD;AAAA,cACA;AAAA,gBACE,SAAS,CAAC,uBAAuB,qBAAqB,gBAAgB;AAAA,cACxE;AAAA,YACF;AAAA,YACA,OAAO;AAAA,cACL,OAAO;AAAA,cACP,SAAS;AAAA,YACX;AAAA,YACA,UAAU;AAAA,cACR,OAAO,IAAI,cAAc;AAAA,cACzB,SAAS,CAAC,kBAAkB,iBAAiB;AAAA,YAC/C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,QACN,WAAW,CAACA,SAAQ,CAAC,CAACA,KAAI;AAAA,QAC1B,cAAc,CAAC,MAAM,QAAQ,IAAI,UAAU;AAAA,QAC3C,UAAU,CAACA,SAAQA,KAAI,MAAMA,KAAI,YAAY,MAAM;AAAA,QACnD,iBAAiB,CAACA,SAAQA,KAAI;AAAA,QAC9B,cAAc,CAACA,MAAK,QAAQ;AAC1B,cAAI,CAACA,KAAI;AAAS,mBAAO,YAAY,IAAI,OAAOA,KAAI,IAAI;AACxD,gBAAM,QAAQ,IAAI,OAAOA,KAAI,SAAS,GAAG;AACzC,iBAAO,MAAM,KAAK,IAAI,KAAK;AAAA,QAC7B;AAAA,QACA,cAAc,CAACA,SAAQ;AACrB,iBACEA,KAAI,oBAAoB,MAAMA,KAAI,eAClCA,KAAI,MAAM,UAAU,CAAC,MAAM,EAAE,KAAK,MAAM,EAAE,MAAMA,KAAI;AAAA,QAExD;AAAA,QACA,oBAAoB,CAACA,SAAQA,KAAI,iBAAiBA,KAAI,cAAc;AAAA,QACpE,UAAU,CAAC,MAAM,QAAQ,IAAI,UAAU;AAAA,QACvC,YAAY,CAACA,SAAQ,CAAC,CAACA,KAAI;AAAA,MAC7B;AAAA,MACA,SAAS;AAAA,QACP,YAAY,CAACA,SAAQ;AACnB,cAAIA,KAAI,MAAM;AAAQ;AACtB,gBAAM,SAAS,IAAI,YAAYA,IAAG;AAClC,gBAAM,cAAc,MAAM,KAAa,EAAE,QAAQ,OAAO,OAAO,CAAC,EAAE,KAAK,EAAE;AACzE,iBAAOA,MAAK,WAAW;AAAA,QACzB;AAAA,QACA,YAAY,CAACA,SAAQ;AACnB,cAAI,MAAM;AACR,gBAAIA,KAAI,iBAAiB;AAAI;AAC7B,gBAAI,kBAAkBA,IAAG,GAAG,MAAM;AAAA,UACpC,CAAC;AAAA,QACH;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,cAAI,MAAM;AACR,gBAAIA,KAAI,iBAAiB;AAAI;AAC7B,kBAAM,QAAQ,IAAI,kBAAkBA,IAAG;AACvC,kBAAM,SAAS,MAAM,MAAM;AAC3B,kBAAM,iBAAiBA,KAAI,gBAAgB,IAAI;AAC/C,kBAAM,eAAe;AAAA,UACvB,CAAC;AAAA,QACH;AAAA,QACA,kBAAkB,CAACA,SAAQ;AACzB,cAAI,CAACA,KAAI;AAAiB;AAC1B,UAAAA,KAAI,aAAa,EAAE,OAAO,MAAM,KAAKA,KAAI,KAAK,GAAG,eAAeA,KAAI,cAAc,CAAC;AAAA,QACrF;AAAA,QACA,gBAAgB,CAACA,SAAQ;AACvB,UAAAA,KAAI,WAAW,EAAE,OAAO,MAAM,KAAKA,KAAI,KAAK,EAAE,CAAC;AAAA,QACjD;AAAA,QACA,oBAAoB,CAACA,SAAQ;AAC3B,gBAAM,UAAU,IAAI,iBAAiBA,IAAG;AACxC,kCAAwB,SAAS,EAAE,OAAOA,KAAI,cAAc,CAAC;AAAA,QAC/D;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,YAAY,EAAE,OAAO,IAAI,OAAO,OAAOA,KAAI,aAAa,CAAC;AAAA,QAC/D;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,UAAAA,KAAI,eAAe;AAAA,QACrB;AAAA,QACA,UAAU,CAACA,MAAK,QAAQ;AACtB,iBAAOA,MAAK,IAAI,KAAK;AAAA,QACvB;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,eAAe,IAAI;AAAA,QACzB;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,MAAMA,KAAI,YAAY,IAAI,aAAaA,KAAI,cAAc,IAAI,KAAK;AAAA,QACxE;AAAA,QACA,eAAeA,MAAK,KAAK;AACvB,gBAAM,QAAQ,IAAI,WAAWA,MAAK,IAAI,MAAM,SAAS,CAAC;AACtD,cAAI,CAAC;AAAO;AACZ,gBAAM,QAAQA,KAAI,MAAM,IAAI,KAAK;AAAA,QACnC;AAAA,QACA,kBAAkBA,MAAK;AACrB,gBAAM,SAAS,IAAI,YAAYA,IAAG;AAClC,iBAAO,QAAQ,CAAC,OAAO,UAAU;AAC/B,kBAAM,QAAQA,KAAI,MAAM,KAAK;AAAA,UAC/B,CAAC;AAAA,QACH;AAAA,QACA,eAAeA,MAAK,KAAK;AACvB,cAAI,MAAM;AACR,kBAAM,aAAaA,KAAI,eAAe,IAAI;AAC1C,kBAAM,QAAQ,IAAI,MAAM,UAAU,YAAY,aAAaA,KAAI,WAAW;AAC1E,mBAAOA,MAAK,KAAK;AAAA,UACnB,CAAC;AAAA,QACH;AAAA,QACA,iBAAiB,CAACA,MAAK,QAAQ;AAC7B,UAAAA,KAAI,MAAM,IAAI,KAAK,IAAI,aAAaA,KAAI,cAAc,IAAI,KAAK;AAAA,QACjE;AAAA,QACA,YAAY,CAACA,SAAQ;AACnB,gBAAM,YAAY,MAAM,KAAa,EAAE,QAAQA,KAAI,YAAY,CAAC,EAAE,KAAK,EAAE;AACzE,iBAAOA,MAAK,SAAS;AAAA,QACvB;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,UAAAA,KAAI,MAAMA,KAAI,YAAY,IAAI;AAAA,QAChC;AAAA,QACA,mBAAmB,CAACA,SAAQ;AAC1B,gBAAM,QAAQ,IAAI,kBAAkBA,IAAG;AACvC,gBAAM,QAAQA,KAAI;AAAA,QACpB;AAAA,QACA,sBAAsB,CAACA,SAAQ;AAC7B,UAAAA,KAAI,eAAe;AAAA,QACrB;AAAA,QACA,qBAAqB,CAACA,SAAQ;AAC5B,UAAAA,KAAI,eAAe,KAAK,IAAIA,KAAI,eAAe,GAAGA,KAAI,cAAc,CAAC;AAAA,QACvE;AAAA,QACA,qBAAqB,CAACA,SAAQ;AAC5B,UAAAA,KAAI,eAAe,KAAK,IAAIA,KAAI,eAAe,GAAG,CAAC;AAAA,QACrD;AAAA,QACA,wBAAwB,CAACA,SAAQ;AAC/B,cAAI,MAAM;AACR,YAAAA,KAAI,eAAe,KAAK,IAAIA,KAAI,mBAAmBA,KAAI,cAAc,CAAC;AAAA,UACxE,CAAC;AAAA,QACH;AAAA,QACA,eAAe,GAAG,KAAK;AACrB,cAAI,eAAe;AAAA,QACrB;AAAA,QACA,yBAAyBA,MAAK;AAC5B,cAAI,CAACA,KAAI;AAAgB;AACzB,cAAI,MAAM;AACR,gBAAI,kBAAkBA,IAAG,GAAG,KAAK;AAAA,UACnC,CAAC;AAAA,QACH;AAAA,QACA,kBAAkBA,MAAK;AACrB,cAAI,CAACA,KAAI,QAAQ,CAACA,KAAI;AAAiB;AACvC,gBAAM,QAAQ,IAAI,iBAAiBA,IAAG;AACtC,iBAAO,MAAM,cAAc;AAAA,QAC7B;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAM,QAAQ;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,cAAc;AAChB;AAEA,SAAS,YAAY,OAAe,MAA8B;AAChE,MAAI,CAAC;AAAM,WAAO;AAClB,SAAO,CAAC,CAAC,MAAM,IAAI,GAAG,KAAK,KAAK;AAClC;AAEA,SAAS,OAAO,KAAqB,OAA0B;AAC7D,QAAM,MAAM,MAAM,QAAQ,KAAK,IAAI,QAAQ,MAAM,MAAM,EAAE,EAAE,OAAO,OAAO;AACzE,MAAI,QAAQ,CAACC,QAAO,UAAU;AAC5B,QAAI,MAAM,KAAK,IAAIA;AAAA,EACrB,CAAC;AACH;AAEA,SAAS,aAAa,SAAiB,MAAc;AACnD,MAAI,YAAY;AAChB,MAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;AAAG,gBAAY,KAAK,CAAC;AAAA,WACrC,QAAQ,CAAC,MAAM,KAAK,CAAC;AAAG,gBAAY,KAAK,CAAC;AACnD,SAAO;AACT;","names":["ctx","value"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/pin-input",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "Core logic for the pin-input widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,14 +27,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "0.11.1",
-    "@zag-js/dom-query": "0.11.1",
-    "@zag-js/dom-event": "0.11.1",
-    "@zag-js/form-utils": "0.11.1",
-    "@zag-js/visually-hidden": "0.11.1",
-    "@zag-js/utils": "0.11.1",
-    "@zag-js/core": "0.11.1",
-    "@zag-js/types": "0.11.1"
+    "@zag-js/anatomy": "0.11.2",
+    "@zag-js/dom-query": "0.11.2",
+    "@zag-js/dom-event": "0.11.2",
+    "@zag-js/form-utils": "0.11.2",
+    "@zag-js/visually-hidden": "0.11.2",
+    "@zag-js/utils": "0.11.2",
+    "@zag-js/core": "0.11.2",
+    "@zag-js/types": "0.11.2"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/index.ts

@@ -1,4 +1,4 @@
 export { anatomy } from "./pin-input.anatomy"
 export { connect } from "./pin-input.connect"
 export { machine } from "./pin-input.machine"
-export type { UserDefinedContext as Context } from "./pin-input.types"
+export type { UserDefinedContext as Context, PublicApi } from "./pin-input.types"

package/src/pin-input.connect.ts

@@ -1,13 +1,13 @@
-import { EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from "@zag-js/dom-event"
+import { type EventKeyMap, getEventKey, getNativeEvent, isModifiedEvent } from "@zag-js/dom-event"
 import { ariaAttr, dataAttr } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { invariant } from "@zag-js/utils"
 import { visuallyHiddenStyle } from "@zag-js/visually-hidden"
 import { parts } from "./pin-input.anatomy"
 import { dom } from "./pin-input.dom"
-import type { Send, State } from "./pin-input.types"
+import type { PublicApi, Send, State } from "./pin-input.types"
 
-export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>) {
+export function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): PublicApi<T> {
   const isValueComplete = state.context.isValueComplete
   const isInvalid = state.context.invalid
   const focusedIndex = state.context.focusedIndex
@@ -18,42 +18,25 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   }
 
   return {
-    /**
-     * The value of the input as an array of strings.
-     */
     value: state.context.value,
-    /**
-     * The value of the input as a string.
-     */
     valueAsString: state.context.valueAsString,
-    /**
-     * Whether all inputs are filled.
-     */
     isValueComplete: isValueComplete,
-    /**
-     * Function to set the value of the inputs.
-     */
+
     setValue(value: string[]) {
       if (!Array.isArray(value)) {
         invariant("[pin-input/setValue] value must be an array")
       }
       send({ type: "SET_VALUE", value })
     },
-    /**
-     * Function to clear the value of the inputs.
-     */
+
     clearValue() {
       send({ type: "CLEAR_VALUE" })
     },
-    /**
-     * Function to set the value of the input at a specific index.
-     */
+
     setValueAtIndex(index: number, value: string) {
       send({ type: "SET_VALUE", value, index })
     },
-    /**
-     * Function to focus the pin-input. This will focus the first input.
-     */
+
     focus,
 
     rootProps: normalize.element({

package/src/pin-input.types.ts

@@ -1,5 +1,5 @@
 import type { StateMachine as S } from "@zag-js/core"
-import type { CommonProperties, Context, DirectionProperty, RequiredBy } from "@zag-js/types"
+import type { CommonProperties, Context, DirectionProperty, PropTypes, RequiredBy } from "@zag-js/types"
 
 type IntlTranslations = {
   inputLabel: (index: number, length: number) => string
@@ -90,6 +90,42 @@ type PublicContext = DirectionProperty &
     translations: IntlTranslations
   }
 
+export type PublicApi<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.
+   */
+  isValueComplete: boolean
+  /**
+   * Function to set the value of the inputs.
+   */
+  setValue(value: string[]): void
+  /**
+   * Function to clear the value of the inputs.
+   */
+  clearValue(): void
+  /**
+   * Function to set the value of the input at a specific index.
+   */
+  setValueAtIndex(index: number, value: string): void
+  /**
+   * Function to focus the pin-input. This will focus the first input.
+   */
+  focus: () => void
+  rootProps: T["element"]
+  labelProps: T["label"]
+  hiddenInputProps: T["input"]
+  controlProps: T["element"]
+  getInputProps({ index }: { index: number }): T["input"]
+}
+
 export type UserDefinedContext = RequiredBy<PublicContext, "id">
 
 type ComputedContext = Readonly<{