@zag-js/pin-input 0.53.0 → 0.54.0

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.utils.ts","../src/pin-input.machine.ts"],"sourcesContent":["export { anatomy } from \"./pin-input.anatomy\"\nexport { connect } from \"./pin-input.connect\"\nexport { machine } from \"./pin-input.machine\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  InputProps,\n  IntlTranslations,\n  ValueChangeDetails,\n  ValueInvalidDetails,\n} from \"./pin-input.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\nimport { isValidValue } from \"./pin-input.utils\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const complete = state.context.isValueComplete\n  const invalid = state.context.invalid\n  const focusedIndex = state.context.focusedIndex\n  const translations = state.context.translations\n\n  function focus() {\n    dom.getFirstInputEl(state.context)?.focus()\n  }\n\n  return {\n    focus,\n    value: state.context.value,\n    valueAsString: state.context.valueAsString,\n    complete: complete,\n    setValue(value) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"VALUE.SET\", value })\n    },\n    clearValue() {\n      send({ type: \"VALUE.CLEAR\" })\n    },\n    setValueAtIndex(index, value) {\n      send({ type: \"VALUE.SET\", value, index })\n    },\n\n    rootProps: normalize.element({\n      dir: state.context.dir,\n      ...parts.root.attrs,\n      id: dom.getRootId(state.context),\n      \"data-invalid\": dataAttr(invalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(complete),\n    }),\n\n    labelProps: normalize.label({\n      ...parts.label.attrs,\n      dir: state.context.dir,\n      htmlFor: dom.getHiddenInputId(state.context),\n      id: dom.getLabelId(state.context),\n      \"data-invalid\": dataAttr(invalid),\n      \"data-disabled\": dataAttr(state.context.disabled),\n      \"data-complete\": dataAttr(complete),\n      onClick(event) {\n        event.preventDefault()\n        focus()\n      },\n    }),\n\n    hiddenInputProps: normalize.input({\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      dir: state.context.dir,\n      id: dom.getControlId(state.context),\n    }),\n\n    getInputProps(props) {\n      const { index } = props\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        dir: state.context.dir,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        id: dom.getInputId(state.context, index.toString()),\n        \"data-ownedby\": dom.getRootId(state.context),\n        \"aria-label\": translations.inputLabel(index, state.context.valueLength),\n        inputMode: state.context.otp || state.context.type === \"numeric\" ? \"numeric\" : \"text\",\n        \"aria-invalid\": ariaAttr(invalid),\n        \"data-invalid\": dataAttr(invalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onBeforeInput(event) {\n          try {\n            const value = getBeforeInputValue(event)\n            const isValid = isValidValue(state.context, value)\n            if (!isValid) {\n              send({ type: \"VALUE.INVALID\", value })\n              event.preventDefault()\n            }\n\n            // select the text so paste always replaces the\n            // current input's value regardless of cursor position\n            if (value.length > 2) {\n              event.currentTarget.setSelectionRange(0, 1, \"forward\")\n            }\n          } catch {\n            // noop\n          }\n        },\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"INPUT.PASTE\", value })\n            // prevent multiple characters being pasted\n            // into a single input\n            event.target.value = value[0]\n\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"INPUT.BACKSPACE\")\n            return\n          }\n\n          send({ type: \"INPUT.CHANGE\", value, index })\n        },\n        onKeyDown(event) {\n          if (event.defaultPrevented) return\n\n          if (isComposingEvent(event)) return\n          if (isModifierKey(event)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"INPUT.BACKSPACE\")\n            },\n            Delete() {\n              send(\"INPUT.DELETE\")\n            },\n            ArrowLeft() {\n              send(\"INPUT.ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"INPUT.ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"INPUT.ENTER\")\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n        onFocus() {\n          send({ type: \"INPUT.FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"INPUT.BLUR\", index })\n        },\n      })\n    },\n  }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./pin-input.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,\n  getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,\n  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,\n  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getInputEls: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getRootId(ctx))\n    const selector = `input[data-ownedby=${ownerId}]`\n    return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n  },\n  getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),\n  getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import type { MachineContext } from \"./pin-input.types\"\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nexport function isValidType(ctx: MachineContext, value: string) {\n  if (!ctx.type) return true\n  return !!REGEX[ctx.type]?.test(value)\n}\n\nexport function isValidValue(ctx: MachineContext, value: string) {\n  if (!ctx.pattern) return isValidType(ctx, value)\n  const regex = new RegExp(ctx.pattern, \"g\")\n  return regex.test(value)\n}\n","import { choose, createMachine } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: \"idle\",\n      context: {\n        value: [],\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\n        focusedIndex: -1,\n        translations: {\n          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,\n          ...ctx.translations,\n        },\n      },\n\n      computed: {\n        valueLength: (ctx) => ctx.value.length,\n        filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== \"\").length,\n        isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,\n        valueAsString: (ctx) => ctx.value.join(\"\"),\n        focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || \"\",\n      },\n\n      entry: choose([\n        {\n          guard: \"autoFocus\",\n          actions: [\"setupValue\", \"setFocusIndexToFirst\"],\n        },\n        { actions: [\"setupValue\"] },\n      ]),\n\n      watch: {\n        focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n        value: [\"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      on: {\n        \"VALUE.SET\": [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\"],\n          },\n          { actions: [\"setValue\"] },\n        ],\n        \"VALUE.CLEAR\": {\n          actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            \"INPUT.CHANGE\": [\n              {\n                guard: \"isFinalValue\",\n                actions: [\"setFocusedValue\", \"syncInputValue\"],\n              },\n              {\n                actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            \"INPUT.PASTE\": {\n              actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n            },\n            \"INPUT.BLUR\": {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            \"INPUT.DELETE\": {\n              guard: \"hasValue\",\n              actions: \"clearFocusedValue\",\n            },\n            \"INPUT.ARROW_LEFT\": {\n              actions: \"setPrevFocusedIndex\",\n            },\n            \"INPUT.ARROW_RIGHT\": {\n              actions: \"setNextFocusedIndex\",\n            },\n            \"INPUT.BACKSPACE\": [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n              },\n            ],\n            \"INPUT.ENTER\": {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            \"VALUE.INVALID\": {\n              actions: \"invokeOnInvalid\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        autoFocus: (ctx) => !!ctx.autoFocus,\n        isValueEmpty: (_ctx, evt) => evt.value === \"\",\n        hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== \"\",\n        isValueComplete: (ctx) => ctx.isValueComplete,\n        isFinalValue: (ctx) =>\n          ctx.filledValueLength + 1 === ctx.valueLength &&\n          ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex,\n        hasIndex: (_ctx, evt) => evt.index !== undefined,\n        isDisabled: (ctx) => !!ctx.disabled,\n      },\n      actions: {\n        setupValue(ctx) {\n          if (ctx.value.length) return\n          const inputEls = dom.getInputEls(ctx)\n          const emptyValues = Array.from<string>({ length: inputEls.length }).fill(\"\")\n          assignValue(ctx, emptyValues)\n        },\n        focusInput(ctx) {\n          if (ctx.focusedIndex === -1) return\n          dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })\n        },\n        selectInputIfNeeded(ctx) {\n          if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.select()\n          })\n        },\n        invokeOnComplete(ctx) {\n          if (!ctx.isValueComplete) return\n          ctx.onValueComplete?.({\n            value: Array.from(ctx.value),\n            valueAsString: ctx.valueAsString,\n          })\n        },\n        invokeOnInvalid(ctx, evt) {\n          ctx.onValueInvalid?.({\n            value: evt.value,\n            index: ctx.focusedIndex,\n          })\n        },\n        clearFocusedIndex(ctx) {\n          ctx.focusedIndex = -1\n        },\n        setFocusedIndex(ctx, evt) {\n          ctx.focusedIndex = evt.index\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        setFocusedValue(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)\n        },\n        revertInputValue(ctx) {\n          const inputEl = dom.getFocusedInputEl(ctx)\n          dom.setValue(inputEl, ctx.focusedValue)\n        },\n        syncInputValue(ctx, evt) {\n          const inputEl = dom.getInputEl(ctx, evt.index.toString())\n          dom.setValue(inputEl, ctx.value[evt.index])\n        },\n        syncInputElements(ctx) {\n          const inputEls = dom.getInputEls(ctx)\n          inputEls.forEach((inputEl, index) => {\n            dom.setValue(inputEl, ctx.value[index])\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)\n\n            // keep value left of cursor\n            // replace value from curor to end with pasted text\n            const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : \"\"\n            const right = evt.value.substring(0, ctx.valueLength - startIndex)\n\n            const value = left + right\n\n            set.value(ctx, value.split(\"\"))\n          })\n        },\n        setValueAtIndex(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, evt.index, nextValue)\n        },\n        clearValue(ctx) {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          set.value(ctx, nextValue)\n        },\n        clearFocusedValue(ctx) {\n          set.valueAtIndex(ctx, ctx.focusedIndex, \"\")\n        },\n        setFocusIndexToFirst(ctx) {\n          ctx.focusedIndex = 0\n        },\n        setNextFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)\n        },\n        setPrevFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)\n        },\n        setLastValueFocusIndex(ctx) {\n          raf(() => {\n            ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)\n          })\n        },\n        blurFocusedInputIfNeeded(ctx) {\n          if (!ctx.blurOnComplete) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.blur()\n          })\n        },\n        requestFormSubmit(ctx) {\n          if (!ctx.name || !ctx.isValueComplete) return\n          const inputEl = dom.getHiddenInputEl(ctx)\n          inputEl?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nfunction assignValue(ctx: MachineContext, value: string | string[]) {\n  const arr = Array.isArray(value) ? value : value.split(\"\").filter(Boolean)\n  arr.forEach((value, index) => {\n    ctx.value[index] = value\n  })\n}\n\nfunction getNextValue(current: string, next: string) {\n  let nextValue = next\n  if (current[0] === next[0]) nextValue = next[1]\n  else if (current[0] === next[1]) nextValue = next[0]\n  return nextValue.split(\"\")[nextValue.length - 1]\n}\n\nconst invoke = {\n  change(ctx: MachineContext) {\n    // callback\n    ctx.onValueChange?.({\n      value: Array.from(ctx.value),\n      valueAsString: ctx.valueAsString,\n    })\n\n    // form event\n    const inputEl = dom.getHiddenInputEl(ctx)\n    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, value: string[]) {\n    if (isEqual(ctx.value, value)) return\n    assignValue(ctx, value)\n    invoke.change(ctx)\n  },\n  valueAtIndex(ctx: MachineContext, index: number, value: string) {\n    if (isEqual(ctx.value[index], value)) return\n    ctx.value[index] = value\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"qqBAAA,gJCAA,mBAA8B,2BAEvB,IAAM,WAAU,8BAAc,UAAU,EAAE,MAAM,OAAQ,QAAS,QAAS,SAAS,EACnF,IAAM,MAAQ,QAAQ,MAAM,ECHnC,qBAA6E,6BAC7E,IAAAA,kBAA+F,6BAE/F,iBAA0B,yBCH1B,qBAAsC,6BAG/B,IAAM,OAAM,8BAAY,CAC7B,UAAY,KAAa,IAAI,KAAK,MAAQ,aAAa,IAAI,EAAE,GAC7D,WAAY,CAAC,IAAU,KAAe,IAAI,KAAK,QAAQ,EAAE,GAAK,aAAa,IAAI,EAAE,IAAI,EAAE,GACvF,iBAAmB,KAAa,IAAI,KAAK,aAAe,aAAa,IAAI,EAAE,UAC3E,WAAa,KAAa,IAAI,KAAK,OAAS,aAAa,IAAI,EAAE,SAC/D,aAAe,KAAa,IAAI,KAAK,SAAW,aAAa,IAAI,EAAE,WAEnE,UAAY,KAAa,IAAI,QAAQ,IAAK,IAAI,UAAU,GAAG,CAAC,EAC5D,YAAc,KAAa,CACzB,MAAM,QAAU,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC,EAC7C,MAAM,SAAW,sBAAsB,OAAO,IAC9C,SAAO,2BAA2B,IAAI,UAAU,GAAG,EAAG,QAAQ,CAChE,EACA,WAAY,CAAC,IAAU,KAAe,IAAI,QAA0B,IAAK,IAAI,WAAW,IAAK,EAAE,CAAC,EAChG,kBAAoB,KAAa,IAAI,YAAY,GAAG,EAAE,IAAI,YAAY,EACtE,gBAAkB,KAAa,IAAI,YAAY,GAAG,EAAE,CAAC,EACrD,iBAAmB,KAAa,IAAI,QAA0B,IAAK,IAAI,iBAAiB,GAAG,CAAC,CAC9F,CAAC,EClBD,IAAM,MAAQ,CACZ,QAAS,WACT,WAAY,cACZ,aAAc,iBAChB,EAEO,SAAS,YAAY,IAAqB,MAAe,CAC9D,GAAI,CAAC,IAAI,KAAM,MAAO,MACtB,MAAO,CAAC,CAAC,MAAM,IAAI,IAAI,GAAG,KAAK,KAAK,CACtC,CAEO,SAAS,aAAa,IAAqB,MAAe,CAC/D,GAAI,CAAC,IAAI,QAAS,OAAO,YAAY,IAAK,KAAK,EAC/C,MAAM,MAAQ,IAAI,OAAO,IAAI,QAAS,GAAG,EACzC,OAAO,MAAM,KAAK,KAAK,CACzB,CFRO,SAAS,QAA6B,MAAc,KAAY,UAA6C,CAClH,MAAM,SAAW,MAAM,QAAQ,gBAC/B,MAAM,QAAU,MAAM,QAAQ,QAC9B,MAAM,aAAe,MAAM,QAAQ,aACnC,MAAM,aAAe,MAAM,QAAQ,aAEnC,SAAS,OAAQ,CACf,IAAI,gBAAgB,MAAM,OAAO,GAAG,MAAM,CAC5C,CAEA,MAAO,CACL,MACA,MAAO,MAAM,QAAQ,MACrB,cAAe,MAAM,QAAQ,cAC7B,SACA,SAAS,MAAO,CACd,GAAI,CAAC,MAAM,QAAQ,KAAK,EAAG,IACzB,wBAAU,6CAA6C,CACzD,CACA,KAAK,CAAE,KAAM,YAAa,KAAM,CAAC,CACnC,EACA,YAAa,CACX,KAAK,CAAE,KAAM,aAAc,CAAC,CAC9B,EACA,gBAAgB,MAAO,MAAO,CAC5B,KAAK,CAAE,KAAM,YAAa,MAAO,KAAM,CAAC,CAC1C,EAEA,UAAW,UAAU,QAAQ,CAC3B,IAAK,MAAM,QAAQ,IACnB,GAAG,MAAM,KAAK,MACd,GAAI,IAAI,UAAU,MAAM,OAAO,EAC/B,kBAAgB,4BAAS,OAAO,EAChC,mBAAiB,4BAAS,MAAM,QAAQ,QAAQ,EAChD,mBAAiB,4BAAS,QAAQ,CACpC,CAAC,EAED,WAAY,UAAU,MAAM,CAC1B,GAAG,MAAM,MAAM,MACf,IAAK,MAAM,QAAQ,IACnB,QAAS,IAAI,iBAAiB,MAAM,OAAO,EAC3C,GAAI,IAAI,WAAW,MAAM,OAAO,EAChC,kBAAgB,4BAAS,OAAO,EAChC,mBAAiB,4BAAS,MAAM,QAAQ,QAAQ,EAChD,mBAAiB,4BAAS,QAAQ,EAClC,QAAQ,MAAO,CACb,MAAM,eAAe,EACrB,MAAM,CACR,CACF,CAAC,EAED,iBAAkB,UAAU,MAAM,CAChC,cAAe,KACf,KAAM,OACN,SAAU,GACV,GAAI,IAAI,iBAAiB,MAAM,OAAO,EACtC,KAAM,MAAM,QAAQ,KACpB,KAAM,MAAM,QAAQ,KACpB,MAAO,sCACP,UAAW,MAAM,QAAQ,YACzB,aAAc,MAAM,QAAQ,aAC9B,CAAC,EAED,aAAc,UAAU,QAAQ,CAC9B,GAAG,MAAM,QAAQ,MACjB,IAAK,MAAM,QAAQ,IACnB,GAAI,IAAI,aAAa,MAAM,OAAO,CACpC,CAAC,EAED,cAAc,MAAO,CACnB,KAAM,CAAE,KAAM,EAAI,MAClB,MAAM,UAAY,MAAM,QAAQ,OAAS,UAAY,MAAQ,OAC7D,OAAO,UAAU,MAAM,CACrB,GAAG,MAAM,MAAM,MACf,IAAK,MAAM,QAAQ,IACnB,SAAU,MAAM,QAAQ,SACxB,mBAAiB,4BAAS,MAAM,QAAQ,QAAQ,EAChD,mBAAiB,4BAAS,QAAQ,EAClC,GAAI,IAAI,WAAW,MAAM,QAAS,MAAM,SAAS,CAAC,EAClD,eAAgB,IAAI,UAAU,MAAM,OAAO,EAC3C,aAAc,aAAa,WAAW,MAAO,MAAM,QAAQ,WAAW,EACtE,UAAW,MAAM,QAAQ,KAAO,MAAM,QAAQ,OAAS,UAAY,UAAY,OAC/E,kBAAgB,4BAAS,OAAO,EAChC,kBAAgB,4BAAS,OAAO,EAChC,KAAM,MAAM,QAAQ,KAAO,WAAa,UACxC,aAAc,MAAM,QAAQ,MAAM,KAAK,GAAK,GAC5C,eAAgB,OAChB,aAAc,MAAM,QAAQ,IAAM,gBAAkB,MACpD,YAAa,eAAiB,MAAQ,GAAK,MAAM,QAAQ,YACzD,cAAc,MAAO,CACnB,GAAI,CACF,MAAM,SAAQ,uCAAoB,KAAK,EACvC,MAAM,QAAU,aAAa,MAAM,QAAS,KAAK,EACjD,GAAI,CAAC,QAAS,CACZ,KAAK,CAAE,KAAM,gBAAiB,KAAM,CAAC,EACrC,MAAM,eAAe,CACvB,CAIA,GAAI,MAAM,OAAS,EAAG,CACpB,MAAM,cAAc,kBAAkB,EAAG,EAAG,SAAS,CACvD,CACF,MAAQ,CAER,CACF,EACA,SAAS,MAAO,CACd,MAAM,OAAM,iCAAe,KAAK,EAChC,KAAM,CAAE,KAAM,EAAI,MAAM,cAExB,GAAI,IAAI,YAAc,mBAAqB,MAAM,OAAS,EAAG,CAC3D,KAAK,CAAE,KAAM,cAAe,KAAM,CAAC,EAGnC,MAAM,OAAO,MAAQ,MAAM,CAAC,EAE5B,MAAM,eAAe,EACrB,MACF,CAEA,GAAI,IAAI,YAAc,wBAAyB,CAC7C,KAAK,iBAAiB,EACtB,MACF,CAEA,KAAK,CAAE,KAAM,eAAgB,MAAO,KAAM,CAAC,CAC7C,EACA,UAAU,MAAO,CACf,GAAI,MAAM,iBAAkB,OAE5B,MAAI,oCAAiB,KAAK,EAAG,OAC7B,MAAI,gCAAc,KAAK,EAAG,OAE1B,MAAM,OAAsB,CAC1B,WAAY,CACV,KAAK,iBAAiB,CACxB,EACA,QAAS,CACP,KAAK,cAAc,CACrB,EACA,WAAY,CACV,KAAK,kBAAkB,CACzB,EACA,YAAa,CACX,KAAK,mBAAmB,CAC1B,EACA,OAAQ,CACN,KAAK,aAAa,CACpB,CACF,EAEA,MAAM,KAAO,UAAO,8BAAY,MAAO,MAAM,OAAO,CAAC,EAErD,GAAI,KAAM,CACR,KAAK,KAAK,EACV,MAAM,eAAe,CACvB,CACF,EACA,SAAU,CACR,KAAK,CAAE,KAAM,cAAe,KAAM,CAAC,CACrC,EACA,QAAS,CACP,KAAK,CAAE,KAAM,aAAc,KAAM,CAAC,CACpC,CACF,CAAC,CACH,CACF,CACF,CGjLA,gBAAsC,wBACtC,IAAAC,kBAAoB,6BACpB,sBAAwC,8BACxC,IAAAC,cAAiC,yBAI1B,SAAS,QAAQ,YAAiC,CACvD,MAAM,OAAM,uBAAQ,WAAW,EAC/B,SAAO,2BACL,CACE,GAAI,YACJ,QAAS,OACT,QAAS,CACP,MAAO,CAAC,EACR,YAAa,SACb,IAAK,MACL,KAAM,UACN,GAAG,IACH,aAAc,GACd,aAAc,CACZ,WAAY,CAAC,MAAO,SAAW,YAAY,MAAQ,CAAC,OAAO,MAAM,GACjE,GAAG,IAAI,YACT,CACF,EAEA,SAAU,CACR,YAAcC,MAAQA,KAAI,MAAM,OAChC,kBAAoBA,MAAQA,KAAI,MAAM,OAAQ,GAAM,GAAG,KAAK,IAAM,EAAE,EAAE,OACtE,gBAAkBA,MAAQA,KAAI,cAAgBA,KAAI,kBAClD,cAAgBA,MAAQA,KAAI,MAAM,KAAK,EAAE,EACzC,aAAeA,MAAQA,KAAI,MAAMA,KAAI,YAAY,GAAK,EACxD,EAEA,SAAO,oBAAO,CACZ,CACE,MAAO,YACP,QAAS,CAAC,aAAc,sBAAsB,CAChD,EACA,CAAE,QAAS,CAAC,YAAY,CAAE,CAC5B,CAAC,EAED,MAAO,CACL,aAAc,CAAC,aAAc,qBAAqB,EAClD,MAAO,CAAC,mBAAmB,EAC3B,gBAAiB,CAAC,mBAAoB,0BAA0B,CAClE,EAEA,GAAI,CACF,YAAa,CACX,CACE,MAAO,WACP,QAAS,CAAC,iBAAiB,CAC7B,EACA,CAAE,QAAS,CAAC,UAAU,CAAE,CAC1B,EACA,cAAe,CACb,QAAS,CAAC,aAAc,sBAAsB,CAChD,CACF,EAEA,OAAQ,CACN,KAAM,CACJ,GAAI,CACF,cAAe,CACb,OAAQ,UACR,QAAS,iBACX,CACF,CACF,EACA,QAAS,CACP,GAAI,CACF,eAAgB,CACd,CACE,MAAO,eACP,QAAS,CAAC,kBAAmB,gBAAgB,CAC/C,EACA,CACE,QAAS,CAAC,kBAAmB,sBAAuB,gBAAgB,CACtE,CACF,EACA,cAAe,CACb,QAAS,CAAC,iBAAkB,wBAAwB,CACtD,EACA,aAAc,CACZ,OAAQ,OACR,QAAS,mBACX,EACA,eAAgB,CACd,MAAO,WACP,QAAS,mBACX,EACA,mBAAoB,CAClB,QAAS,qBACX,EACA,oBAAqB,CACnB,QAAS,qBACX,EACA,kBAAmB,CACjB,CACE,MAAO,WACP,QAAS,CAAC,mBAAmB,CAC/B,EACA,CACE,QAAS,CAAC,sBAAuB,mBAAmB,CACtD,CACF,EACA,cAAe,CACb,MAAO,kBACP,QAAS,mBACX,EACA,gBAAiB,CACf,QAAS,iBACX,CACF,CACF,CACF,CACF,EACA,CACE,OAAQ,CACN,UAAYA,MAAQ,CAAC,CAACA,KAAI,UAC1B,aAAc,CAAC,KAAM,MAAQ,IAAI,QAAU,GAC3C,SAAWA,MAAQA,KAAI,MAAMA,KAAI,YAAY,IAAM,GACnD,gBAAkBA,MAAQA,KAAI,gBAC9B,aAAeA,MACbA,KAAI,kBAAoB,IAAMA,KAAI,aAClCA,KAAI,MAAM,UAAW,GAAM,EAAE,KAAK,IAAM,EAAE,IAAMA,KAAI,aACtD,SAAU,CAAC,KAAM,MAAQ,IAAI,QAAU,OACvC,WAAaA,MAAQ,CAAC,CAACA,KAAI,QAC7B,EACA,QAAS,CACP,WAAWA,KAAK,CACd,GAAIA,KAAI,MAAM,OAAQ,OACtB,MAAM,SAAW,IAAI,YAAYA,IAAG,EACpC,MAAM,YAAc,MAAM,KAAa,CAAE,OAAQ,SAAS,MAAO,CAAC,EAAE,KAAK,EAAE,EAC3E,YAAYA,KAAK,WAAW,CAC9B,EACA,WAAWA,KAAK,CACd,GAAIA,KAAI,eAAiB,GAAI,OAC7B,IAAI,kBAAkBA,IAAG,GAAG,MAAM,CAAE,cAAe,IAAK,CAAC,CAC3D,EACA,oBAAoBA,KAAK,CACvB,GAAI,CAACA,KAAI,eAAiBA,KAAI,eAAiB,GAAI,UACnD,uBAAI,IAAM,CACR,IAAI,kBAAkBA,IAAG,GAAG,OAAO,CACrC,CAAC,CACH,EACA,iBAAiBA,KAAK,CACpB,GAAI,CAACA,KAAI,gBAAiB,OAC1BA,KAAI,kBAAkB,CACpB,MAAO,MAAM,KAAKA,KAAI,KAAK,EAC3B,cAAeA,KAAI,aACrB,CAAC,CACH,EACA,gBAAgBA,KAAK,IAAK,CACxBA,KAAI,iBAAiB,CACnB,MAAO,IAAI,MACX,MAAOA,KAAI,YACb,CAAC,CACH,EACA,kBAAkBA,KAAK,CACrBA,KAAI,aAAe,EACrB,EACA,gBAAgBA,KAAK,IAAK,CACxBA,KAAI,aAAe,IAAI,KACzB,EACA,SAASA,KAAK,IAAK,CACjB,IAAI,MAAMA,KAAK,IAAI,KAAK,CAC1B,EACA,gBAAgBA,KAAK,IAAK,CACxB,MAAM,UAAY,aAAaA,KAAI,aAAc,IAAI,KAAK,EAC1D,IAAI,aAAaA,KAAKA,KAAI,aAAc,SAAS,CACnD,EACA,iBAAiBA,KAAK,CACpB,MAAM,QAAU,IAAI,kBAAkBA,IAAG,EACzC,IAAI,SAAS,QAASA,KAAI,YAAY,CACxC,EACA,eAAeA,KAAK,IAAK,CACvB,MAAM,QAAU,IAAI,WAAWA,KAAK,IAAI,MAAM,SAAS,CAAC,EACxD,IAAI,SAAS,QAASA,KAAI,MAAM,IAAI,KAAK,CAAC,CAC5C,EACA,kBAAkBA,KAAK,CACrB,MAAM,SAAW,IAAI,YAAYA,IAAG,EACpC,SAAS,QAAQ,CAAC,QAAS,QAAU,CACnC,IAAI,SAAS,QAASA,KAAI,MAAM,KAAK,CAAC,CACxC,CAAC,CACH,EACA,eAAeA,KAAK,IAAK,IACvB,uBAAI,IAAM,CACR,MAAM,WAAa,KAAK,IAAIA,KAAI,aAAcA,KAAI,iBAAiB,EAInE,MAAM,KAAO,WAAa,EAAIA,KAAI,cAAc,UAAU,EAAGA,KAAI,YAAY,EAAI,GACjF,MAAM,MAAQ,IAAI,MAAM,UAAU,EAAGA,KAAI,YAAc,UAAU,EAEjE,MAAM,MAAQ,KAAO,MAErB,IAAI,MAAMA,KAAK,MAAM,MAAM,EAAE,CAAC,CAChC,CAAC,CACH,EACA,gBAAgBA,KAAK,IAAK,CACxB,MAAM,UAAY,aAAaA,KAAI,aAAc,IAAI,KAAK,EAC1D,IAAI,aAAaA,KAAK,IAAI,MAAO,SAAS,CAC5C,EACA,WAAWA,KAAK,CACd,MAAM,UAAY,MAAM,KAAa,CAAE,OAAQA,KAAI,WAAY,CAAC,EAAE,KAAK,EAAE,EACzE,IAAI,MAAMA,KAAK,SAAS,CAC1B,EACA,kBAAkBA,KAAK,CACrB,IAAI,aAAaA,KAAKA,KAAI,aAAc,EAAE,CAC5C,EACA,qBAAqBA,KAAK,CACxBA,KAAI,aAAe,CACrB,EACA,oBAAoBA,KAAK,CACvBA,KAAI,aAAe,KAAK,IAAIA,KAAI,aAAe,EAAGA,KAAI,YAAc,CAAC,CACvE,EACA,oBAAoBA,KAAK,CACvBA,KAAI,aAAe,KAAK,IAAIA,KAAI,aAAe,EAAG,CAAC,CACrD,EACA,uBAAuBA,KAAK,IAC1B,uBAAI,IAAM,CACRA,KAAI,aAAe,KAAK,IAAIA,KAAI,kBAAmBA,KAAI,YAAc,CAAC,CACxE,CAAC,CACH,EACA,yBAAyBA,KAAK,CAC5B,GAAI,CAACA,KAAI,eAAgB,UACzB,uBAAI,IAAM,CACR,IAAI,kBAAkBA,IAAG,GAAG,KAAK,CACnC,CAAC,CACH,EACA,kBAAkBA,KAAK,CACrB,GAAI,CAACA,KAAI,MAAQ,CAACA,KAAI,gBAAiB,OACvC,MAAM,QAAU,IAAI,iBAAiBA,IAAG,EACxC,SAAS,MAAM,cAAc,CAC/B,CACF,CACF,CACF,CACF,CAEA,SAAS,YAAY,IAAqB,MAA0B,CAClE,MAAM,IAAM,MAAM,QAAQ,KAAK,EAAI,MAAQ,MAAM,MAAM,EAAE,EAAE,OAAO,OAAO,EACzE,IAAI,QAAQ,CAACC,OAAO,QAAU,CAC5B,IAAI,MAAM,KAAK,EAAIA,MACrB,CAAC,CACH,CAEA,SAAS,aAAa,QAAiB,KAAc,CACnD,IAAI,UAAY,KAChB,GAAI,QAAQ,CAAC,IAAM,KAAK,CAAC,EAAG,UAAY,KAAK,CAAC,UACrC,QAAQ,CAAC,IAAM,KAAK,CAAC,EAAG,UAAY,KAAK,CAAC,EACnD,OAAO,UAAU,MAAM,EAAE,EAAE,UAAU,OAAS,CAAC,CACjD,CAEA,IAAM,OAAS,CACb,OAAO,IAAqB,CAE1B,IAAI,gBAAgB,CAClB,MAAO,MAAM,KAAK,IAAI,KAAK,EAC3B,cAAe,IAAI,aACrB,CAAC,EAGD,MAAM,QAAU,IAAI,iBAAiB,GAAG,KACxC,2CAAwB,QAAS,CAAE,MAAO,IAAI,aAAc,CAAC,CAC/D,CACF,EAEA,IAAM,IAAM,CACV,MAAM,IAAqB,MAAiB,CAC1C,MAAI,uBAAQ,IAAI,MAAO,KAAK,EAAG,OAC/B,YAAY,IAAK,KAAK,EACtB,OAAO,OAAO,GAAG,CACnB,EACA,aAAa,IAAqB,MAAe,MAAe,CAC9D,MAAI,uBAAQ,IAAI,MAAM,KAAK,EAAG,KAAK,EAAG,OACtC,IAAI,MAAM,KAAK,EAAI,MACnB,OAAO,OAAO,GAAG,CACnB,CACF","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.utils.ts","../src/pin-input.machine.ts"],"sourcesContent":["export { anatomy } from \"./pin-input.anatomy\"\nexport { connect } from \"./pin-input.connect\"\nexport { machine } from \"./pin-input.machine\"\nexport type {\n  MachineApi as Api,\n  UserDefinedContext as Context,\n  ElementIds,\n  InputProps,\n  IntlTranslations,\n  ValueChangeDetails,\n  ValueInvalidDetails,\n} from \"./pin-input.types\"\n","import { createAnatomy } from \"@zag-js/anatomy\"\n\nexport const anatomy = createAnatomy(\"pinInput\").parts(\"root\", \"label\", \"input\", \"control\")\nexport const parts = anatomy.build()\n","import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from \"@zag-js/dom-event\"\nimport { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from \"@zag-js/dom-query\"\nimport type { NormalizeProps, PropTypes } from \"@zag-js/types\"\nimport { invariant } from \"@zag-js/utils\"\nimport { parts } from \"./pin-input.anatomy\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineApi, Send, State } from \"./pin-input.types\"\nimport { isValidValue } from \"./pin-input.utils\"\n\nexport function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): MachineApi<T> {\n  const complete = state.context.isValueComplete\n  const invalid = state.context.invalid\n  const focusedIndex = state.context.focusedIndex\n  const translations = state.context.translations\n\n  function focus() {\n    dom.getFirstInputEl(state.context)?.focus()\n  }\n\n  return {\n    focus,\n    value: state.context.value,\n    valueAsString: state.context.valueAsString,\n    complete: complete,\n    setValue(value) {\n      if (!Array.isArray(value)) {\n        invariant(\"[pin-input/setValue] value must be an array\")\n      }\n      send({ type: \"VALUE.SET\", value })\n    },\n    clearValue() {\n      send({ type: \"VALUE.CLEAR\" })\n    },\n    setValueAtIndex(index, value) {\n      send({ type: \"VALUE.SET\", value, index })\n    },\n\n    getRootProps() {\n      return normalize.element({\n        dir: state.context.dir,\n        ...parts.root.attrs,\n        id: dom.getRootId(state.context),\n        \"data-invalid\": dataAttr(invalid),\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n      })\n    },\n\n    getLabelProps() {\n      return normalize.label({\n        ...parts.label.attrs,\n        dir: state.context.dir,\n        htmlFor: dom.getHiddenInputId(state.context),\n        id: dom.getLabelId(state.context),\n        \"data-invalid\": dataAttr(invalid),\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        onClick(event) {\n          event.preventDefault()\n          focus()\n        },\n      })\n    },\n\n    getHiddenInputProps() {\n      return normalize.input({\n        \"aria-hidden\": true,\n        type: \"text\",\n        tabIndex: -1,\n        id: dom.getHiddenInputId(state.context),\n        name: state.context.name,\n        form: state.context.form,\n        style: visuallyHiddenStyle,\n        maxLength: state.context.valueLength,\n        defaultValue: state.context.valueAsString,\n      })\n    },\n\n    getControlProps() {\n      return normalize.element({\n        ...parts.control.attrs,\n        dir: state.context.dir,\n        id: dom.getControlId(state.context),\n      })\n    },\n\n    getInputProps(props) {\n      const { index } = props\n      const inputType = state.context.type === \"numeric\" ? \"tel\" : \"text\"\n      return normalize.input({\n        ...parts.input.attrs,\n        dir: state.context.dir,\n        disabled: state.context.disabled,\n        \"data-disabled\": dataAttr(state.context.disabled),\n        \"data-complete\": dataAttr(complete),\n        id: dom.getInputId(state.context, index.toString()),\n        \"data-ownedby\": dom.getRootId(state.context),\n        \"aria-label\": translations.inputLabel(index, state.context.valueLength),\n        inputMode: state.context.otp || state.context.type === \"numeric\" ? \"numeric\" : \"text\",\n        \"aria-invalid\": ariaAttr(invalid),\n        \"data-invalid\": dataAttr(invalid),\n        type: state.context.mask ? \"password\" : inputType,\n        defaultValue: state.context.value[index] || \"\",\n        autoCapitalize: \"none\",\n        autoComplete: state.context.otp ? \"one-time-code\" : \"off\",\n        placeholder: focusedIndex === index ? \"\" : state.context.placeholder,\n        onBeforeInput(event) {\n          try {\n            const value = getBeforeInputValue(event)\n            const isValid = isValidValue(state.context, value)\n            if (!isValid) {\n              send({ type: \"VALUE.INVALID\", value })\n              event.preventDefault()\n            }\n\n            // select the text so paste always replaces the\n            // current input's value regardless of cursor position\n            if (value.length > 2) {\n              event.currentTarget.setSelectionRange(0, 1, \"forward\")\n            }\n          } catch {\n            // noop\n          }\n        },\n        onChange(event) {\n          const evt = getNativeEvent(event)\n          const { value } = event.currentTarget\n\n          if (evt.inputType === \"insertFromPaste\" || value.length > 2) {\n            send({ type: \"INPUT.PASTE\", value })\n            // prevent multiple characters being pasted\n            // into a single input\n            event.target.value = value[0]\n\n            event.preventDefault()\n            return\n          }\n\n          if (evt.inputType === \"deleteContentBackward\") {\n            send(\"INPUT.BACKSPACE\")\n            return\n          }\n\n          send({ type: \"INPUT.CHANGE\", value, index })\n        },\n        onKeyDown(event) {\n          if (event.defaultPrevented) return\n\n          if (isComposingEvent(event)) return\n          if (isModifierKey(event)) return\n\n          const keyMap: EventKeyMap = {\n            Backspace() {\n              send(\"INPUT.BACKSPACE\")\n            },\n            Delete() {\n              send(\"INPUT.DELETE\")\n            },\n            ArrowLeft() {\n              send(\"INPUT.ARROW_LEFT\")\n            },\n            ArrowRight() {\n              send(\"INPUT.ARROW_RIGHT\")\n            },\n            Enter() {\n              send(\"INPUT.ENTER\")\n            },\n          }\n\n          const exec = keyMap[getEventKey(event, state.context)]\n\n          if (exec) {\n            exec(event)\n            event.preventDefault()\n          }\n        },\n        onFocus() {\n          send({ type: \"INPUT.FOCUS\", index })\n        },\n        onBlur() {\n          send({ type: \"INPUT.BLUR\", index })\n        },\n      })\n    },\n  }\n}\n","import { createScope, queryAll } from \"@zag-js/dom-query\"\nimport type { MachineContext as Ctx } from \"./pin-input.types\"\n\nexport const dom = createScope({\n  getRootId: (ctx: Ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,\n  getInputId: (ctx: Ctx, id: string) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,\n  getHiddenInputId: (ctx: Ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,\n  getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,\n  getControlId: (ctx: Ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,\n\n  getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)),\n  getInputEls: (ctx: Ctx) => {\n    const ownerId = CSS.escape(dom.getRootId(ctx))\n    const selector = `input[data-ownedby=${ownerId}]`\n    return queryAll<HTMLInputElement>(dom.getRootEl(ctx), selector)\n  },\n  getInputEl: (ctx: Ctx, id: string) => dom.getById<HTMLInputElement>(ctx, dom.getInputId(ctx, id)),\n  getFocusedInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],\n  getFirstInputEl: (ctx: Ctx) => dom.getInputEls(ctx)[0],\n  getHiddenInputEl: (ctx: Ctx) => dom.getById<HTMLInputElement>(ctx, dom.getHiddenInputId(ctx)),\n})\n","import type { MachineContext } from \"./pin-input.types\"\n\nconst REGEX = {\n  numeric: /^[0-9]+$/,\n  alphabetic: /^[A-Za-z]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n}\n\nexport function isValidType(ctx: MachineContext, value: string) {\n  if (!ctx.type) return true\n  return !!REGEX[ctx.type]?.test(value)\n}\n\nexport function isValidValue(ctx: MachineContext, value: string) {\n  if (!ctx.pattern) return isValidType(ctx, value)\n  const regex = new RegExp(ctx.pattern, \"g\")\n  return regex.test(value)\n}\n","import { choose, createMachine } from \"@zag-js/core\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { dispatchInputValueEvent } from \"@zag-js/form-utils\"\nimport { compact, isEqual } from \"@zag-js/utils\"\nimport { dom } from \"./pin-input.dom\"\nimport type { MachineContext, MachineState, UserDefinedContext } from \"./pin-input.types\"\n\nexport function machine(userContext: UserDefinedContext) {\n  const ctx = compact(userContext)\n  return createMachine<MachineContext, MachineState>(\n    {\n      id: \"pin-input\",\n      initial: \"idle\",\n      context: {\n        value: [],\n        placeholder: \"○\",\n        otp: false,\n        type: \"numeric\",\n        ...ctx,\n        focusedIndex: -1,\n        translations: {\n          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,\n          ...ctx.translations,\n        },\n      },\n\n      computed: {\n        valueLength: (ctx) => ctx.value.length,\n        filledValueLength: (ctx) => ctx.value.filter((v) => v?.trim() !== \"\").length,\n        isValueComplete: (ctx) => ctx.valueLength === ctx.filledValueLength,\n        valueAsString: (ctx) => ctx.value.join(\"\"),\n        focusedValue: (ctx) => ctx.value[ctx.focusedIndex] || \"\",\n      },\n\n      entry: choose([\n        {\n          guard: \"autoFocus\",\n          actions: [\"setupValue\", \"setFocusIndexToFirst\"],\n        },\n        { actions: [\"setupValue\"] },\n      ]),\n\n      watch: {\n        focusedIndex: [\"focusInput\", \"selectInputIfNeeded\"],\n        value: [\"syncInputElements\"],\n        isValueComplete: [\"invokeOnComplete\", \"blurFocusedInputIfNeeded\"],\n      },\n\n      on: {\n        \"VALUE.SET\": [\n          {\n            guard: \"hasIndex\",\n            actions: [\"setValueAtIndex\"],\n          },\n          { actions: [\"setValue\"] },\n        ],\n        \"VALUE.CLEAR\": {\n          actions: [\"clearValue\", \"setFocusIndexToFirst\"],\n        },\n      },\n\n      states: {\n        idle: {\n          on: {\n            \"INPUT.FOCUS\": {\n              target: \"focused\",\n              actions: \"setFocusedIndex\",\n            },\n          },\n        },\n        focused: {\n          on: {\n            \"INPUT.CHANGE\": [\n              {\n                guard: \"isFinalValue\",\n                actions: [\"setFocusedValue\", \"syncInputValue\"],\n              },\n              {\n                actions: [\"setFocusedValue\", \"setNextFocusedIndex\", \"syncInputValue\"],\n              },\n            ],\n            \"INPUT.PASTE\": {\n              actions: [\"setPastedValue\", \"setLastValueFocusIndex\"],\n            },\n            \"INPUT.BLUR\": {\n              target: \"idle\",\n              actions: \"clearFocusedIndex\",\n            },\n            \"INPUT.DELETE\": {\n              guard: \"hasValue\",\n              actions: \"clearFocusedValue\",\n            },\n            \"INPUT.ARROW_LEFT\": {\n              actions: \"setPrevFocusedIndex\",\n            },\n            \"INPUT.ARROW_RIGHT\": {\n              actions: \"setNextFocusedIndex\",\n            },\n            \"INPUT.BACKSPACE\": [\n              {\n                guard: \"hasValue\",\n                actions: [\"clearFocusedValue\"],\n              },\n              {\n                actions: [\"setPrevFocusedIndex\", \"clearFocusedValue\"],\n              },\n            ],\n            \"INPUT.ENTER\": {\n              guard: \"isValueComplete\",\n              actions: \"requestFormSubmit\",\n            },\n            \"VALUE.INVALID\": {\n              actions: \"invokeOnInvalid\",\n            },\n          },\n        },\n      },\n    },\n    {\n      guards: {\n        autoFocus: (ctx) => !!ctx.autoFocus,\n        isValueEmpty: (_ctx, evt) => evt.value === \"\",\n        hasValue: (ctx) => ctx.value[ctx.focusedIndex] !== \"\",\n        isValueComplete: (ctx) => ctx.isValueComplete,\n        isFinalValue: (ctx) =>\n          ctx.filledValueLength + 1 === ctx.valueLength &&\n          ctx.value.findIndex((v) => v.trim() === \"\") === ctx.focusedIndex,\n        hasIndex: (_ctx, evt) => evt.index !== undefined,\n        isDisabled: (ctx) => !!ctx.disabled,\n      },\n      actions: {\n        setupValue(ctx) {\n          if (ctx.value.length) return\n          const inputEls = dom.getInputEls(ctx)\n          const emptyValues = Array.from<string>({ length: inputEls.length }).fill(\"\")\n          assignValue(ctx, emptyValues)\n        },\n        focusInput(ctx) {\n          if (ctx.focusedIndex === -1) return\n          dom.getFocusedInputEl(ctx)?.focus({ preventScroll: true })\n        },\n        selectInputIfNeeded(ctx) {\n          if (!ctx.selectOnFocus || ctx.focusedIndex === -1) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.select()\n          })\n        },\n        invokeOnComplete(ctx) {\n          if (!ctx.isValueComplete) return\n          ctx.onValueComplete?.({\n            value: Array.from(ctx.value),\n            valueAsString: ctx.valueAsString,\n          })\n        },\n        invokeOnInvalid(ctx, evt) {\n          ctx.onValueInvalid?.({\n            value: evt.value,\n            index: ctx.focusedIndex,\n          })\n        },\n        clearFocusedIndex(ctx) {\n          ctx.focusedIndex = -1\n        },\n        setFocusedIndex(ctx, evt) {\n          ctx.focusedIndex = evt.index\n        },\n        setValue(ctx, evt) {\n          set.value(ctx, evt.value)\n        },\n        setFocusedValue(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, ctx.focusedIndex, nextValue)\n        },\n        revertInputValue(ctx) {\n          const inputEl = dom.getFocusedInputEl(ctx)\n          dom.setValue(inputEl, ctx.focusedValue)\n        },\n        syncInputValue(ctx, evt) {\n          const inputEl = dom.getInputEl(ctx, evt.index.toString())\n          dom.setValue(inputEl, ctx.value[evt.index])\n        },\n        syncInputElements(ctx) {\n          const inputEls = dom.getInputEls(ctx)\n          inputEls.forEach((inputEl, index) => {\n            dom.setValue(inputEl, ctx.value[index])\n          })\n        },\n        setPastedValue(ctx, evt) {\n          raf(() => {\n            const startIndex = Math.min(ctx.focusedIndex, ctx.filledValueLength)\n\n            // keep value left of cursor\n            // replace value from curor to end with pasted text\n            const left = startIndex > 0 ? ctx.valueAsString.substring(0, ctx.focusedIndex) : \"\"\n            const right = evt.value.substring(0, ctx.valueLength - startIndex)\n\n            const value = left + right\n\n            set.value(ctx, value.split(\"\"))\n          })\n        },\n        setValueAtIndex(ctx, evt) {\n          const nextValue = getNextValue(ctx.focusedValue, evt.value)\n          set.valueAtIndex(ctx, evt.index, nextValue)\n        },\n        clearValue(ctx) {\n          const nextValue = Array.from<string>({ length: ctx.valueLength }).fill(\"\")\n          set.value(ctx, nextValue)\n        },\n        clearFocusedValue(ctx) {\n          set.valueAtIndex(ctx, ctx.focusedIndex, \"\")\n        },\n        setFocusIndexToFirst(ctx) {\n          ctx.focusedIndex = 0\n        },\n        setNextFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.min(ctx.focusedIndex + 1, ctx.valueLength - 1)\n        },\n        setPrevFocusedIndex(ctx) {\n          ctx.focusedIndex = Math.max(ctx.focusedIndex - 1, 0)\n        },\n        setLastValueFocusIndex(ctx) {\n          raf(() => {\n            ctx.focusedIndex = Math.min(ctx.filledValueLength, ctx.valueLength - 1)\n          })\n        },\n        blurFocusedInputIfNeeded(ctx) {\n          if (!ctx.blurOnComplete) return\n          raf(() => {\n            dom.getFocusedInputEl(ctx)?.blur()\n          })\n        },\n        requestFormSubmit(ctx) {\n          if (!ctx.name || !ctx.isValueComplete) return\n          const inputEl = dom.getHiddenInputEl(ctx)\n          inputEl?.form?.requestSubmit()\n        },\n      },\n    },\n  )\n}\n\nfunction assignValue(ctx: MachineContext, value: string | string[]) {\n  const arr = Array.isArray(value) ? value : value.split(\"\").filter(Boolean)\n  arr.forEach((value, index) => {\n    ctx.value[index] = value\n  })\n}\n\nfunction getNextValue(current: string, next: string) {\n  let nextValue = next\n  if (current[0] === next[0]) nextValue = next[1]\n  else if (current[0] === next[1]) nextValue = next[0]\n  return nextValue.split(\"\")[nextValue.length - 1]\n}\n\nconst invoke = {\n  change(ctx: MachineContext) {\n    // callback\n    ctx.onValueChange?.({\n      value: Array.from(ctx.value),\n      valueAsString: ctx.valueAsString,\n    })\n\n    // form event\n    const inputEl = dom.getHiddenInputEl(ctx)\n    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString })\n  },\n}\n\nconst set = {\n  value(ctx: MachineContext, value: string[]) {\n    if (isEqual(ctx.value, value)) return\n    assignValue(ctx, value)\n    invoke.change(ctx)\n  },\n  valueAtIndex(ctx: MachineContext, index: number, value: string) {\n    if (isEqual(ctx.value[index], value)) return\n    ctx.value[index] = value\n    invoke.change(ctx)\n  },\n}\n"],"mappings":"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","names":["import_dom_query","import_dom_query","import_utils","ctx","value"]}

package/dist/index.mjs

@@ -1,2 +1,486 @@
-import{createAnatomy}from"@zag-js/anatomy";var anatomy=createAnatomy("pinInput").parts("root","label","input","control");var parts=anatomy.build();import{getEventKey,getNativeEvent,isModifierKey}from"@zag-js/dom-event";import{ariaAttr,dataAttr,getBeforeInputValue,isComposingEvent,visuallyHiddenStyle}from"@zag-js/dom-query";import{invariant}from"@zag-js/utils";import{createScope,queryAll}from"@zag-js/dom-query";var dom=createScope({getRootId:ctx=>ctx.ids?.root??`pin-input:${ctx.id}`,getInputId:(ctx,id)=>ctx.ids?.input?.(id)??`pin-input:${ctx.id}:${id}`,getHiddenInputId:ctx=>ctx.ids?.hiddenInput??`pin-input:${ctx.id}:hidden`,getLabelId:ctx=>ctx.ids?.label??`pin-input:${ctx.id}:label`,getControlId:ctx=>ctx.ids?.control??`pin-input:${ctx.id}:control`,getRootEl:ctx=>dom.getById(ctx,dom.getRootId(ctx)),getInputEls:ctx=>{const ownerId=CSS.escape(dom.getRootId(ctx));const selector=`input[data-ownedby=${ownerId}]`;return queryAll(dom.getRootEl(ctx),selector)},getInputEl:(ctx,id)=>dom.getById(ctx,dom.getInputId(ctx,id)),getFocusedInputEl:ctx=>dom.getInputEls(ctx)[ctx.focusedIndex],getFirstInputEl:ctx=>dom.getInputEls(ctx)[0],getHiddenInputEl:ctx=>dom.getById(ctx,dom.getHiddenInputId(ctx))});var REGEX={numeric:/^[0-9]+$/,alphabetic:/^[A-Za-z]+$/,alphanumeric:/^[a-zA-Z0-9]+$/i};function isValidType(ctx,value){if(!ctx.type)return true;return!!REGEX[ctx.type]?.test(value)}function isValidValue(ctx,value){if(!ctx.pattern)return isValidType(ctx,value);const regex=new RegExp(ctx.pattern,"g");return regex.test(value)}function connect(state,send,normalize){const complete=state.context.isValueComplete;const invalid=state.context.invalid;const focusedIndex=state.context.focusedIndex;const translations=state.context.translations;function focus(){dom.getFirstInputEl(state.context)?.focus()}return{focus,value:state.context.value,valueAsString:state.context.valueAsString,complete,setValue(value){if(!Array.isArray(value)){invariant("[pin-input/setValue] value must be an array")}send({type:"VALUE.SET",value})},clearValue(){send({type:"VALUE.CLEAR"})},setValueAtIndex(index,value){send({type:"VALUE.SET",value,index})},rootProps:normalize.element({dir:state.context.dir,...parts.root.attrs,id:dom.getRootId(state.context),"data-invalid":dataAttr(invalid),"data-disabled":dataAttr(state.context.disabled),"data-complete":dataAttr(complete)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getHiddenInputId(state.context),id:dom.getLabelId(state.context),"data-invalid":dataAttr(invalid),"data-disabled":dataAttr(state.context.disabled),"data-complete":dataAttr(complete),onClick(event){event.preventDefault();focus()}}),hiddenInputProps:normalize.input({"aria-hidden":true,type:"text",tabIndex:-1,id:dom.getHiddenInputId(state.context),name:state.context.name,form:state.context.form,style:visuallyHiddenStyle,maxLength:state.context.valueLength,defaultValue:state.context.valueAsString}),controlProps:normalize.element({...parts.control.attrs,dir:state.context.dir,id:dom.getControlId(state.context)}),getInputProps(props){const{index}=props;const inputType=state.context.type==="numeric"?"tel":"text";return normalize.input({...parts.input.attrs,dir:state.context.dir,disabled:state.context.disabled,"data-disabled":dataAttr(state.context.disabled),"data-complete":dataAttr(complete),id:dom.getInputId(state.context,index.toString()),"data-ownedby":dom.getRootId(state.context),"aria-label":translations.inputLabel(index,state.context.valueLength),inputMode:state.context.otp||state.context.type==="numeric"?"numeric":"text","aria-invalid":ariaAttr(invalid),"data-invalid":dataAttr(invalid),type:state.context.mask?"password":inputType,defaultValue:state.context.value[index]||"",autoCapitalize:"none",autoComplete:state.context.otp?"one-time-code":"off",placeholder:focusedIndex===index?"":state.context.placeholder,onBeforeInput(event){try{const value=getBeforeInputValue(event);const isValid=isValidValue(state.context,value);if(!isValid){send({type:"VALUE.INVALID",value});event.preventDefault()}if(value.length>2){event.currentTarget.setSelectionRange(0,1,"forward")}}catch{}},onChange(event){const evt=getNativeEvent(event);const{value}=event.currentTarget;if(evt.inputType==="insertFromPaste"||value.length>2){send({type:"INPUT.PASTE",value});event.target.value=value[0];event.preventDefault();return}if(evt.inputType==="deleteContentBackward"){send("INPUT.BACKSPACE");return}send({type:"INPUT.CHANGE",value,index})},onKeyDown(event){if(event.defaultPrevented)return;if(isComposingEvent(event))return;if(isModifierKey(event))return;const keyMap={Backspace(){send("INPUT.BACKSPACE")},Delete(){send("INPUT.DELETE")},ArrowLeft(){send("INPUT.ARROW_LEFT")},ArrowRight(){send("INPUT.ARROW_RIGHT")},Enter(){send("INPUT.ENTER")}};const exec=keyMap[getEventKey(event,state.context)];if(exec){exec(event);event.preventDefault()}},onFocus(){send({type:"INPUT.FOCUS",index})},onBlur(){send({type:"INPUT.BLUR",index})}})}}}import{choose,createMachine}from"@zag-js/core";import{raf}from"@zag-js/dom-query";import{dispatchInputValueEvent}from"@zag-js/form-utils";import{compact,isEqual}from"@zag-js/utils";function machine(userContext){const ctx=compact(userContext);return createMachine({id:"pin-input",initial:"idle",context:{value:[],placeholder:"\u25CB",otp:false,type:"numeric",...ctx,focusedIndex:-1,translations:{inputLabel:(index,length)=>`pin code ${index+1} of ${length}`,...ctx.translations}},computed:{valueLength:ctx2=>ctx2.value.length,filledValueLength:ctx2=>ctx2.value.filter(v=>v?.trim()!=="").length,isValueComplete:ctx2=>ctx2.valueLength===ctx2.filledValueLength,valueAsString:ctx2=>ctx2.value.join(""),focusedValue:ctx2=>ctx2.value[ctx2.focusedIndex]||""},entry:choose([{guard:"autoFocus",actions:["setupValue","setFocusIndexToFirst"]},{actions:["setupValue"]}]),watch:{focusedIndex:["focusInput","selectInputIfNeeded"],value:["syncInputElements"],isValueComplete:["invokeOnComplete","blurFocusedInputIfNeeded"]},on:{"VALUE.SET":[{guard:"hasIndex",actions:["setValueAtIndex"]},{actions:["setValue"]}],"VALUE.CLEAR":{actions:["clearValue","setFocusIndexToFirst"]}},states:{idle:{on:{"INPUT.FOCUS":{target:"focused",actions:"setFocusedIndex"}}},focused:{on:{"INPUT.CHANGE":[{guard:"isFinalValue",actions:["setFocusedValue","syncInputValue"]},{actions:["setFocusedValue","setNextFocusedIndex","syncInputValue"]}],"INPUT.PASTE":{actions:["setPastedValue","setLastValueFocusIndex"]},"INPUT.BLUR":{target:"idle",actions:"clearFocusedIndex"},"INPUT.DELETE":{guard:"hasValue",actions:"clearFocusedValue"},"INPUT.ARROW_LEFT":{actions:"setPrevFocusedIndex"},"INPUT.ARROW_RIGHT":{actions:"setNextFocusedIndex"},"INPUT.BACKSPACE":[{guard:"hasValue",actions:["clearFocusedValue"]},{actions:["setPrevFocusedIndex","clearFocusedValue"]}],"INPUT.ENTER":{guard:"isValueComplete",actions:"requestFormSubmit"},"VALUE.INVALID":{actions:"invokeOnInvalid"}}}}},{guards:{autoFocus:ctx2=>!!ctx2.autoFocus,isValueEmpty:(_ctx,evt)=>evt.value==="",hasValue:ctx2=>ctx2.value[ctx2.focusedIndex]!=="",isValueComplete:ctx2=>ctx2.isValueComplete,isFinalValue:ctx2=>ctx2.filledValueLength+1===ctx2.valueLength&&ctx2.value.findIndex(v=>v.trim()==="")===ctx2.focusedIndex,hasIndex:(_ctx,evt)=>evt.index!==void 0,isDisabled:ctx2=>!!ctx2.disabled},actions:{setupValue(ctx2){if(ctx2.value.length)return;const inputEls=dom.getInputEls(ctx2);const emptyValues=Array.from({length:inputEls.length}).fill("");assignValue(ctx2,emptyValues)},focusInput(ctx2){if(ctx2.focusedIndex===-1)return;dom.getFocusedInputEl(ctx2)?.focus({preventScroll:true})},selectInputIfNeeded(ctx2){if(!ctx2.selectOnFocus||ctx2.focusedIndex===-1)return;raf(()=>{dom.getFocusedInputEl(ctx2)?.select()})},invokeOnComplete(ctx2){if(!ctx2.isValueComplete)return;ctx2.onValueComplete?.({value:Array.from(ctx2.value),valueAsString:ctx2.valueAsString})},invokeOnInvalid(ctx2,evt){ctx2.onValueInvalid?.({value:evt.value,index:ctx2.focusedIndex})},clearFocusedIndex(ctx2){ctx2.focusedIndex=-1},setFocusedIndex(ctx2,evt){ctx2.focusedIndex=evt.index},setValue(ctx2,evt){set.value(ctx2,evt.value)},setFocusedValue(ctx2,evt){const nextValue=getNextValue(ctx2.focusedValue,evt.value);set.valueAtIndex(ctx2,ctx2.focusedIndex,nextValue)},revertInputValue(ctx2){const inputEl=dom.getFocusedInputEl(ctx2);dom.setValue(inputEl,ctx2.focusedValue)},syncInputValue(ctx2,evt){const inputEl=dom.getInputEl(ctx2,evt.index.toString());dom.setValue(inputEl,ctx2.value[evt.index])},syncInputElements(ctx2){const inputEls=dom.getInputEls(ctx2);inputEls.forEach((inputEl,index)=>{dom.setValue(inputEl,ctx2.value[index])})},setPastedValue(ctx2,evt){raf(()=>{const startIndex=Math.min(ctx2.focusedIndex,ctx2.filledValueLength);const left=startIndex>0?ctx2.valueAsString.substring(0,ctx2.focusedIndex):"";const right=evt.value.substring(0,ctx2.valueLength-startIndex);const value=left+right;set.value(ctx2,value.split(""))})},setValueAtIndex(ctx2,evt){const nextValue=getNextValue(ctx2.focusedValue,evt.value);set.valueAtIndex(ctx2,evt.index,nextValue)},clearValue(ctx2){const nextValue=Array.from({length:ctx2.valueLength}).fill("");set.value(ctx2,nextValue)},clearFocusedValue(ctx2){set.valueAtIndex(ctx2,ctx2.focusedIndex,"")},setFocusIndexToFirst(ctx2){ctx2.focusedIndex=0},setNextFocusedIndex(ctx2){ctx2.focusedIndex=Math.min(ctx2.focusedIndex+1,ctx2.valueLength-1)},setPrevFocusedIndex(ctx2){ctx2.focusedIndex=Math.max(ctx2.focusedIndex-1,0)},setLastValueFocusIndex(ctx2){raf(()=>{ctx2.focusedIndex=Math.min(ctx2.filledValueLength,ctx2.valueLength-1)})},blurFocusedInputIfNeeded(ctx2){if(!ctx2.blurOnComplete)return;raf(()=>{dom.getFocusedInputEl(ctx2)?.blur()})},requestFormSubmit(ctx2){if(!ctx2.name||!ctx2.isValueComplete)return;const inputEl=dom.getHiddenInputEl(ctx2);inputEl?.form?.requestSubmit()}}})}function assignValue(ctx,value){const arr=Array.isArray(value)?value:value.split("").filter(Boolean);arr.forEach((value2,index)=>{ctx.value[index]=value2})}function getNextValue(current,next){let nextValue=next;if(current[0]===next[0])nextValue=next[1];else if(current[0]===next[1])nextValue=next[0];return nextValue.split("")[nextValue.length-1]}var invoke={change(ctx){ctx.onValueChange?.({value:Array.from(ctx.value),valueAsString:ctx.valueAsString});const inputEl=dom.getHiddenInputEl(ctx);dispatchInputValueEvent(inputEl,{value:ctx.valueAsString})}};var set={value(ctx,value){if(isEqual(ctx.value,value))return;assignValue(ctx,value);invoke.change(ctx)},valueAtIndex(ctx,index,value){if(isEqual(ctx.value[index],value))return;ctx.value[index]=value;invoke.change(ctx)}};export{anatomy,connect,machine};
+// src/pin-input.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("pinInput").parts("root", "label", "input", "control");
+var parts = anatomy.build();
+
+// src/pin-input.connect.ts
+import { getEventKey, getNativeEvent, isModifierKey } from "@zag-js/dom-event";
+import { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from "@zag-js/dom-query";
+import { invariant } from "@zag-js/utils";
+
+// src/pin-input.dom.ts
+import { createScope, queryAll } from "@zag-js/dom-query";
+var dom = createScope({
+  getRootId: (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`,
+  getInputId: (ctx, id) => ctx.ids?.input?.(id) ?? `pin-input:${ctx.id}:${id}`,
+  getHiddenInputId: (ctx) => ctx.ids?.hiddenInput ?? `pin-input:${ctx.id}:hidden`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `pin-input:${ctx.id}:label`,
+  getControlId: (ctx) => ctx.ids?.control ?? `pin-input:${ctx.id}:control`,
+  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
+  getInputEls: (ctx) => {
+    const ownerId = CSS.escape(dom.getRootId(ctx));
+    const selector = `input[data-ownedby=${ownerId}]`;
+    return queryAll(dom.getRootEl(ctx), selector);
+  },
+  getInputEl: (ctx, id) => dom.getById(ctx, dom.getInputId(ctx, id)),
+  getFocusedInputEl: (ctx) => dom.getInputEls(ctx)[ctx.focusedIndex],
+  getFirstInputEl: (ctx) => dom.getInputEls(ctx)[0],
+  getHiddenInputEl: (ctx) => dom.getById(ctx, dom.getHiddenInputId(ctx))
+});
+
+// src/pin-input.utils.ts
+var REGEX = {
+  numeric: /^[0-9]+$/,
+  alphabetic: /^[A-Za-z]+$/,
+  alphanumeric: /^[a-zA-Z0-9]+$/i
+};
+function isValidType(ctx, value) {
+  if (!ctx.type)
+    return true;
+  return !!REGEX[ctx.type]?.test(value);
+}
+function isValidValue(ctx, value) {
+  if (!ctx.pattern)
+    return isValidType(ctx, value);
+  const regex = new RegExp(ctx.pattern, "g");
+  return regex.test(value);
+}
+
+// src/pin-input.connect.ts
+function connect(state, send, normalize) {
+  const complete = state.context.isValueComplete;
+  const invalid = state.context.invalid;
+  const focusedIndex = state.context.focusedIndex;
+  const translations = state.context.translations;
+  function focus() {
+    dom.getFirstInputEl(state.context)?.focus();
+  }
+  return {
+    focus,
+    value: state.context.value,
+    valueAsString: state.context.valueAsString,
+    complete,
+    setValue(value) {
+      if (!Array.isArray(value)) {
+        invariant("[pin-input/setValue] value must be an array");
+      }
+      send({ type: "VALUE.SET", value });
+    },
+    clearValue() {
+      send({ type: "VALUE.CLEAR" });
+    },
+    setValueAtIndex(index, value) {
+      send({ type: "VALUE.SET", value, index });
+    },
+    getRootProps() {
+      return normalize.element({
+        dir: state.context.dir,
+        ...parts.root.attrs,
+        id: dom.getRootId(state.context),
+        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(state.context.disabled),
+        "data-complete": dataAttr(complete)
+      });
+    },
+    getLabelProps() {
+      return normalize.label({
+        ...parts.label.attrs,
+        dir: state.context.dir,
+        htmlFor: dom.getHiddenInputId(state.context),
+        id: dom.getLabelId(state.context),
+        "data-invalid": dataAttr(invalid),
+        "data-disabled": dataAttr(state.context.disabled),
+        "data-complete": dataAttr(complete),
+        onClick(event) {
+          event.preventDefault();
+          focus();
+        }
+      });
+    },
+    getHiddenInputProps() {
+      return normalize.input({
+        "aria-hidden": true,
+        type: "text",
+        tabIndex: -1,
+        id: dom.getHiddenInputId(state.context),
+        name: state.context.name,
+        form: state.context.form,
+        style: visuallyHiddenStyle,
+        maxLength: state.context.valueLength,
+        defaultValue: state.context.valueAsString
+      });
+    },
+    getControlProps() {
+      return normalize.element({
+        ...parts.control.attrs,
+        dir: state.context.dir,
+        id: dom.getControlId(state.context)
+      });
+    },
+    getInputProps(props) {
+      const { index } = props;
+      const inputType = state.context.type === "numeric" ? "tel" : "text";
+      return normalize.input({
+        ...parts.input.attrs,
+        dir: state.context.dir,
+        disabled: state.context.disabled,
+        "data-disabled": dataAttr(state.context.disabled),
+        "data-complete": dataAttr(complete),
+        id: dom.getInputId(state.context, index.toString()),
+        "data-ownedby": dom.getRootId(state.context),
+        "aria-label": translations.inputLabel(index, state.context.valueLength),
+        inputMode: state.context.otp || state.context.type === "numeric" ? "numeric" : "text",
+        "aria-invalid": ariaAttr(invalid),
+        "data-invalid": dataAttr(invalid),
+        type: state.context.mask ? "password" : inputType,
+        defaultValue: state.context.value[index] || "",
+        autoCapitalize: "none",
+        autoComplete: state.context.otp ? "one-time-code" : "off",
+        placeholder: focusedIndex === index ? "" : state.context.placeholder,
+        onBeforeInput(event) {
+          try {
+            const value = getBeforeInputValue(event);
+            const isValid = isValidValue(state.context, value);
+            if (!isValid) {
+              send({ type: "VALUE.INVALID", value });
+              event.preventDefault();
+            }
+            if (value.length > 2) {
+              event.currentTarget.setSelectionRange(0, 1, "forward");
+            }
+          } catch {
+          }
+        },
+        onChange(event) {
+          const evt = getNativeEvent(event);
+          const { value } = event.currentTarget;
+          if (evt.inputType === "insertFromPaste" || value.length > 2) {
+            send({ type: "INPUT.PASTE", value });
+            event.target.value = value[0];
+            event.preventDefault();
+            return;
+          }
+          if (evt.inputType === "deleteContentBackward") {
+            send("INPUT.BACKSPACE");
+            return;
+          }
+          send({ type: "INPUT.CHANGE", value, index });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented)
+            return;
+          if (isComposingEvent(event))
+            return;
+          if (isModifierKey(event))
+            return;
+          const keyMap = {
+            Backspace() {
+              send("INPUT.BACKSPACE");
+            },
+            Delete() {
+              send("INPUT.DELETE");
+            },
+            ArrowLeft() {
+              send("INPUT.ARROW_LEFT");
+            },
+            ArrowRight() {
+              send("INPUT.ARROW_RIGHT");
+            },
+            Enter() {
+              send("INPUT.ENTER");
+            }
+          };
+          const exec = keyMap[getEventKey(event, state.context)];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        },
+        onFocus() {
+          send({ type: "INPUT.FOCUS", index });
+        },
+        onBlur() {
+          send({ type: "INPUT.BLUR", index });
+        }
+      });
+    }
+  };
+}
+
+// src/pin-input.machine.ts
+import { choose, createMachine } from "@zag-js/core";
+import { raf } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/form-utils";
+import { compact, isEqual } from "@zag-js/utils";
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "pin-input",
+      initial: "idle",
+      context: {
+        value: [],
+        placeholder: "\u25CB",
+        otp: false,
+        type: "numeric",
+        ...ctx,
+        focusedIndex: -1,
+        translations: {
+          inputLabel: (index, length) => `pin code ${index + 1} of ${length}`,
+          ...ctx.translations
+        }
+      },
+      computed: {
+        valueLength: (ctx2) => ctx2.value.length,
+        filledValueLength: (ctx2) => ctx2.value.filter((v) => v?.trim() !== "").length,
+        isValueComplete: (ctx2) => ctx2.valueLength === ctx2.filledValueLength,
+        valueAsString: (ctx2) => ctx2.value.join(""),
+        focusedValue: (ctx2) => ctx2.value[ctx2.focusedIndex] || ""
+      },
+      entry: choose([
+        {
+          guard: "autoFocus",
+          actions: ["setupValue", "setFocusIndexToFirst"]
+        },
+        { actions: ["setupValue"] }
+      ]),
+      watch: {
+        focusedIndex: ["focusInput", "selectInputIfNeeded"],
+        value: ["syncInputElements"],
+        isValueComplete: ["invokeOnComplete", "blurFocusedInputIfNeeded"]
+      },
+      on: {
+        "VALUE.SET": [
+          {
+            guard: "hasIndex",
+            actions: ["setValueAtIndex"]
+          },
+          { actions: ["setValue"] }
+        ],
+        "VALUE.CLEAR": {
+          actions: ["clearValue", "setFocusIndexToFirst"]
+        }
+      },
+      states: {
+        idle: {
+          on: {
+            "INPUT.FOCUS": {
+              target: "focused",
+              actions: "setFocusedIndex"
+            }
+          }
+        },
+        focused: {
+          on: {
+            "INPUT.CHANGE": [
+              {
+                guard: "isFinalValue",
+                actions: ["setFocusedValue", "syncInputValue"]
+              },
+              {
+                actions: ["setFocusedValue", "setNextFocusedIndex", "syncInputValue"]
+              }
+            ],
+            "INPUT.PASTE": {
+              actions: ["setPastedValue", "setLastValueFocusIndex"]
+            },
+            "INPUT.BLUR": {
+              target: "idle",
+              actions: "clearFocusedIndex"
+            },
+            "INPUT.DELETE": {
+              guard: "hasValue",
+              actions: "clearFocusedValue"
+            },
+            "INPUT.ARROW_LEFT": {
+              actions: "setPrevFocusedIndex"
+            },
+            "INPUT.ARROW_RIGHT": {
+              actions: "setNextFocusedIndex"
+            },
+            "INPUT.BACKSPACE": [
+              {
+                guard: "hasValue",
+                actions: ["clearFocusedValue"]
+              },
+              {
+                actions: ["setPrevFocusedIndex", "clearFocusedValue"]
+              }
+            ],
+            "INPUT.ENTER": {
+              guard: "isValueComplete",
+              actions: "requestFormSubmit"
+            },
+            "VALUE.INVALID": {
+              actions: "invokeOnInvalid"
+            }
+          }
+        }
+      }
+    },
+    {
+      guards: {
+        autoFocus: (ctx2) => !!ctx2.autoFocus,
+        isValueEmpty: (_ctx, evt) => evt.value === "",
+        hasValue: (ctx2) => ctx2.value[ctx2.focusedIndex] !== "",
+        isValueComplete: (ctx2) => ctx2.isValueComplete,
+        isFinalValue: (ctx2) => ctx2.filledValueLength + 1 === ctx2.valueLength && ctx2.value.findIndex((v) => v.trim() === "") === ctx2.focusedIndex,
+        hasIndex: (_ctx, evt) => evt.index !== void 0,
+        isDisabled: (ctx2) => !!ctx2.disabled
+      },
+      actions: {
+        setupValue(ctx2) {
+          if (ctx2.value.length)
+            return;
+          const inputEls = dom.getInputEls(ctx2);
+          const emptyValues = Array.from({ length: inputEls.length }).fill("");
+          assignValue(ctx2, emptyValues);
+        },
+        focusInput(ctx2) {
+          if (ctx2.focusedIndex === -1)
+            return;
+          dom.getFocusedInputEl(ctx2)?.focus({ preventScroll: true });
+        },
+        selectInputIfNeeded(ctx2) {
+          if (!ctx2.selectOnFocus || ctx2.focusedIndex === -1)
+            return;
+          raf(() => {
+            dom.getFocusedInputEl(ctx2)?.select();
+          });
+        },
+        invokeOnComplete(ctx2) {
+          if (!ctx2.isValueComplete)
+            return;
+          ctx2.onValueComplete?.({
+            value: Array.from(ctx2.value),
+            valueAsString: ctx2.valueAsString
+          });
+        },
+        invokeOnInvalid(ctx2, evt) {
+          ctx2.onValueInvalid?.({
+            value: evt.value,
+            index: ctx2.focusedIndex
+          });
+        },
+        clearFocusedIndex(ctx2) {
+          ctx2.focusedIndex = -1;
+        },
+        setFocusedIndex(ctx2, evt) {
+          ctx2.focusedIndex = evt.index;
+        },
+        setValue(ctx2, evt) {
+          set.value(ctx2, evt.value);
+        },
+        setFocusedValue(ctx2, evt) {
+          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, nextValue);
+        },
+        revertInputValue(ctx2) {
+          const inputEl = dom.getFocusedInputEl(ctx2);
+          dom.setValue(inputEl, ctx2.focusedValue);
+        },
+        syncInputValue(ctx2, evt) {
+          const inputEl = dom.getInputEl(ctx2, evt.index.toString());
+          dom.setValue(inputEl, ctx2.value[evt.index]);
+        },
+        syncInputElements(ctx2) {
+          const inputEls = dom.getInputEls(ctx2);
+          inputEls.forEach((inputEl, index) => {
+            dom.setValue(inputEl, ctx2.value[index]);
+          });
+        },
+        setPastedValue(ctx2, evt) {
+          raf(() => {
+            const startIndex = Math.min(ctx2.focusedIndex, ctx2.filledValueLength);
+            const left = startIndex > 0 ? ctx2.valueAsString.substring(0, ctx2.focusedIndex) : "";
+            const right = evt.value.substring(0, ctx2.valueLength - startIndex);
+            const value = left + right;
+            set.value(ctx2, value.split(""));
+          });
+        },
+        setValueAtIndex(ctx2, evt) {
+          const nextValue = getNextValue(ctx2.focusedValue, evt.value);
+          set.valueAtIndex(ctx2, evt.index, nextValue);
+        },
+        clearValue(ctx2) {
+          const nextValue = Array.from({ length: ctx2.valueLength }).fill("");
+          set.value(ctx2, nextValue);
+        },
+        clearFocusedValue(ctx2) {
+          set.valueAtIndex(ctx2, ctx2.focusedIndex, "");
+        },
+        setFocusIndexToFirst(ctx2) {
+          ctx2.focusedIndex = 0;
+        },
+        setNextFocusedIndex(ctx2) {
+          ctx2.focusedIndex = Math.min(ctx2.focusedIndex + 1, ctx2.valueLength - 1);
+        },
+        setPrevFocusedIndex(ctx2) {
+          ctx2.focusedIndex = Math.max(ctx2.focusedIndex - 1, 0);
+        },
+        setLastValueFocusIndex(ctx2) {
+          raf(() => {
+            ctx2.focusedIndex = Math.min(ctx2.filledValueLength, ctx2.valueLength - 1);
+          });
+        },
+        blurFocusedInputIfNeeded(ctx2) {
+          if (!ctx2.blurOnComplete)
+            return;
+          raf(() => {
+            dom.getFocusedInputEl(ctx2)?.blur();
+          });
+        },
+        requestFormSubmit(ctx2) {
+          if (!ctx2.name || !ctx2.isValueComplete)
+            return;
+          const inputEl = dom.getHiddenInputEl(ctx2);
+          inputEl?.form?.requestSubmit();
+        }
+      }
+    }
+  );
+}
+function assignValue(ctx, value) {
+  const arr = Array.isArray(value) ? value : value.split("").filter(Boolean);
+  arr.forEach((value2, index) => {
+    ctx.value[index] = value2;
+  });
+}
+function getNextValue(current, next) {
+  let nextValue = next;
+  if (current[0] === next[0])
+    nextValue = next[1];
+  else if (current[0] === next[1])
+    nextValue = next[0];
+  return nextValue.split("")[nextValue.length - 1];
+}
+var invoke = {
+  change(ctx) {
+    ctx.onValueChange?.({
+      value: Array.from(ctx.value),
+      valueAsString: ctx.valueAsString
+    });
+    const inputEl = dom.getHiddenInputEl(ctx);
+    dispatchInputValueEvent(inputEl, { value: ctx.valueAsString });
+  }
+};
+var set = {
+  value(ctx, value) {
+    if (isEqual(ctx.value, value))
+      return;
+    assignValue(ctx, value);
+    invoke.change(ctx);
+  },
+  valueAtIndex(ctx, index, value) {
+    if (isEqual(ctx.value[index], value))
+      return;
+    ctx.value[index] = value;
+    invoke.change(ctx);
+  }
+};
+export {
+  anatomy,
+  connect,
+  machine
+};
 //# sourceMappingURL=index.mjs.map