@zag-js/pin-input 0.51.0 → 0.51.2

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("pinInput").parts("root","label","input","control");var parts=anatomy.build();var import_dom_event=require("@zag-js/dom-event");var import_dom_query2=require("@zag-js/dom-query");var import_utils=require("@zag-js/utils");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`pin-input:${ctx.id}`,getInputId:(ctx,id)=>ctx.ids?.input?.(id)??`pin-input:${ctx.id}:${id}`,getHiddenInputId:ctx=>ctx.ids?.hiddenInput??`pin-input:${ctx.id}:hidden`,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(0,import_dom_query.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)){(0,import_utils.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":(0,import_dom_query2.dataAttr)(invalid),"data-disabled":(0,import_dom_query2.dataAttr)(state.context.disabled),"data-complete":(0,import_dom_query2.dataAttr)(complete)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getHiddenInputId(state.context),id:dom.getLabelId(state.context),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-disabled":(0,import_dom_query2.dataAttr)(state.context.disabled),"data-complete":(0,import_dom_query2.dataAttr)(complete),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:import_dom_query2.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":(0,import_dom_query2.dataAttr)(state.context.disabled),"data-complete":(0,import_dom_query2.dataAttr)(complete),id:dom.getInputId(state.context,index.toString()),"data-ownedby":dom.getRootId(state.context),"aria-label":translations.inputLabel(index,state.context.valueLength),inputMode:state.context.otp||state.context.type==="numeric"?"numeric":"text","aria-invalid":(0,import_dom_query2.ariaAttr)(invalid),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),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=(0,import_dom_query2.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=(0,import_dom_event.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;const evt=(0,import_dom_event.getNativeEvent)(event);if(evt.isComposing)return;if((0,import_dom_event.isModifierKey)(evt))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[(0,import_dom_event.getEventKey)(event,state.context)];if(exec){exec(event);event.preventDefault()}},onFocus(){send({type:"INPUT.FOCUS",index})},onBlur(){send({type:"INPUT.BLUR",index})}})}}}var import_core=require("@zag-js/core");var import_dom_query3=require("@zag-js/dom-query");var import_form_utils=require("@zag-js/form-utils");var import_utils2=require("@zag-js/utils");function machine(userContext){const ctx=(0,import_utils2.compact)(userContext);return(0,import_core.createMachine)({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:(0,import_core.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;(0,import_dom_query3.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){(0,import_dom_query3.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){(0,import_dom_query3.raf)(()=>{ctx2.focusedIndex=Math.min(ctx2.filledValueLength,ctx2.valueLength-1)})},blurFocusedInputIfNeeded(ctx2){if(!ctx2.blurOnComplete)return;(0,import_dom_query3.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);(0,import_form_utils.dispatchInputValueEvent)(inputEl,{value:ctx.valueAsString})}};var set={value(ctx,value){if((0,import_utils2.isEqual)(ctx.value,value))return;assignValue(ctx,value);invoke.change(ctx)},valueAtIndex(ctx,index,value){if((0,import_utils2.isEqual)(ctx.value[index],value))return;ctx.value[index]=value;invoke.change(ctx)}};0&&(module.exports={anatomy,connect,machine});
+"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("pinInput").parts("root","label","input","control");var parts=anatomy.build();var import_dom_event=require("@zag-js/dom-event");var import_dom_query2=require("@zag-js/dom-query");var import_utils=require("@zag-js/utils");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getRootId:ctx=>ctx.ids?.root??`pin-input:${ctx.id}`,getInputId:(ctx,id)=>ctx.ids?.input?.(id)??`pin-input:${ctx.id}:${id}`,getHiddenInputId:ctx=>ctx.ids?.hiddenInput??`pin-input:${ctx.id}:hidden`,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(0,import_dom_query.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)){(0,import_utils.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":(0,import_dom_query2.dataAttr)(invalid),"data-disabled":(0,import_dom_query2.dataAttr)(state.context.disabled),"data-complete":(0,import_dom_query2.dataAttr)(complete)}),labelProps:normalize.label({...parts.label.attrs,dir:state.context.dir,htmlFor:dom.getHiddenInputId(state.context),id:dom.getLabelId(state.context),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),"data-disabled":(0,import_dom_query2.dataAttr)(state.context.disabled),"data-complete":(0,import_dom_query2.dataAttr)(complete),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:import_dom_query2.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":(0,import_dom_query2.dataAttr)(state.context.disabled),"data-complete":(0,import_dom_query2.dataAttr)(complete),id:dom.getInputId(state.context,index.toString()),"data-ownedby":dom.getRootId(state.context),"aria-label":translations.inputLabel(index,state.context.valueLength),inputMode:state.context.otp||state.context.type==="numeric"?"numeric":"text","aria-invalid":(0,import_dom_query2.ariaAttr)(invalid),"data-invalid":(0,import_dom_query2.dataAttr)(invalid),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=(0,import_dom_query2.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=(0,import_dom_event.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((0,import_dom_query2.isComposingEvent)(event))return;if((0,import_dom_event.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[(0,import_dom_event.getEventKey)(event,state.context)];if(exec){exec(event);event.preventDefault()}},onFocus(){send({type:"INPUT.FOCUS",index})},onBlur(){send({type:"INPUT.BLUR",index})}})}}}var import_core=require("@zag-js/core");var import_dom_query3=require("@zag-js/dom-query");var import_form_utils=require("@zag-js/form-utils");var import_utils2=require("@zag-js/utils");function machine(userContext){const ctx=(0,import_utils2.compact)(userContext);return(0,import_core.createMachine)({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:(0,import_core.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;(0,import_dom_query3.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){(0,import_dom_query3.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){(0,import_dom_query3.raf)(()=>{ctx2.focusedIndex=Math.min(ctx2.filledValueLength,ctx2.valueLength-1)})},blurFocusedInputIfNeeded(ctx2){if(!ctx2.blurOnComplete)return;(0,import_dom_query3.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);(0,import_form_utils.dispatchInputValueEvent)(inputEl,{value:ctx.valueAsString})}};var set={value(ctx,value){if((0,import_utils2.isEqual)(ctx.value,value))return;assignValue(ctx,value);invoke.change(ctx)},valueAtIndex(ctx,index,value){if((0,import_utils2.isEqual)(ctx.value[index],value))return;ctx.value[index]=value;invoke.change(ctx)}};0&&(module.exports={anatomy,connect,machine});
 //# sourceMappingURL=index.js.map

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, 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          const evt = getNativeEvent(event)\n\n          if (evt.isComposing) return\n          if (isModifierKey(evt)) 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,kBAA6E,6BAE7E,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,OAC5B,MAAM,OAAM,iCAAe,KAAK,EAEhC,GAAI,IAAI,YAAa,OACrB,MAAI,gCAAc,GAAG,EAAG,OAExB,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,CGlLA,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    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":"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","names":["import_dom_query","import_dom_query","import_utils","ctx","value"]}

package/dist/index.mjs

@@ -1,2 +1,2 @@
-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,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;const evt=getNativeEvent(event);if(evt.isComposing)return;if(isModifierKey(evt))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};
+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};
 //# sourceMappingURL=index.mjs.map

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

package/package.json

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

package/src/pin-input.connect.ts

@@ -1,5 +1,5 @@
 import { getEventKey, getNativeEvent, isModifierKey, type EventKeyMap } from "@zag-js/dom-event"
-import { ariaAttr, dataAttr, getBeforeInputValue, visuallyHiddenStyle } from "@zag-js/dom-query"
+import { ariaAttr, dataAttr, getBeforeInputValue, isComposingEvent, visuallyHiddenStyle } from "@zag-js/dom-query"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { invariant } from "@zag-js/utils"
 import { parts } from "./pin-input.anatomy"
@@ -137,10 +137,9 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         },
         onKeyDown(event) {
           if (event.defaultPrevented) return
-          const evt = getNativeEvent(event)
 
-          if (evt.isComposing) return
-          if (isModifierKey(evt)) return
+          if (isComposingEvent(event)) return
+          if (isModifierKey(event)) return
 
           const keyMap: EventKeyMap = {
             Backspace() {