@zag-js/pin-input - npm Package Compare versions

Comparing version 0.0.0-dev-20220408111010 to 0.0.0-dev-20220408120729

dist/index.js

@@ -1,2 +0,2 @@
-var v=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var R=e=>v(e,"__esModule",{value:!0});var O=(e,t)=>{for(var n in t)v(e,n,{get:t[n],enumerable:!0})},N=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of M(t))!D.call(e,i)&&(n||i!=="default")&&v(e,i,{get:()=>t[i],enumerable:!(a=F(t,i))||a.enumerable});return e};var _=(e=>(t,n)=>e&&e.get(t)||(n=N(R({}),t,1),e&&e.set(t,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var j={};O(j,{connect:()=>T,machine:()=>S});var c=e=>e?"":void 0,w=e=>e?!0:void 0;function s(e){let t=new Set;function n(a){let i=globalThis.requestAnimationFrame(a);t.add(()=>globalThis.cancelAnimationFrame(i))}return n(()=>n(e)),function(){t.forEach(function(a){a()})}}var B=(()=>{let e=0;return()=>(e++,e.toString(36))})();function g(e){var t;return(t=e.nativeEvent)!=null?t:e}var $=["input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","embed","iframe","object","a[href]","area[href]","[tabindex]","audio[controls]","video[controls]","*[tabindex]:not([aria-disabled])","[contenteditable]:not([contenteditable=false])","details > summary:first-of-type"].join(",");var E={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},z={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function x(e,t={}){var n;let{dir:a="ltr",orientation:i="horizontal"}=t,{key:l}=e;return l=(n=z[l])!=null?n:l,a==="rtl"&&i==="horizontal"&&l in E&&(l=E[l]),l}function L(e,t){var n;return Array.from((n=e==null?void 0:e.querySelectorAll(t))!=null?n:[])}function H(e){return{button:e,label:e,input:e,output:e,element:e}}var I=H(e=>e);var A=e=>Array.from(Array(e).keys());var Z=(()=>{let e=0;return()=>(e++,e.toString(36))})();var k=e=>e.ctrlKey||e.altKey||e.metaKey||e.shiftKey;function V(...e){let t=e.length===1?e[0]:e[1],n=e.length===2?e[0]:!0}var o={getDoc:e=>{var t;return(t=e.doc)!=null?t:document},getRootId:e=>`pin-input-${e.uid}`,getInputId:(e,t)=>`pin-input-${e.uid}-${t}`,getRootEl:e=>o.getDoc(e).getElementById(o.getRootId(e)),getElements:e=>{let n=`input[data-ownedby=${CSS.escape(o.getRootId(e))}]`;return L(o.getRootEl(e),n)},getFocusedEl:e=>o.getElements(e)[e.focusedIndex],getFirstInputEl:e=>o.getElements(e)[0]};function T(e,t,n=I){let a=e.context.isValueComplete,i=e.context.invalid,l=e.context.focusedIndex,C=e.context.messages;return{value:e.context.value,valueAsString:e.context.valueAsString,isValueComplete:a,setValue(r){Array.isArray(r)||V("[pin-input/setValue] value must be an array"),t({type:"SET_VALUE",value:r})},clearValue(){t({type:"CLEAR_VALUE"})},setValueAtIndex(r,m){t({type:"SET_VALUE",value:m,index:r})},focus(){s(()=>{var r;(r=o.getFirstInputEl(e.context))==null||r.focus()})},rootProps:n.element({dir:e.context.dir,"data-part":"root",id:o.getRootId(e.context),"data-invalid":c(i),"data-disabled":c(e.context.disabled),"data-complete":c(a)}),getInputProps({index:r}){let m=e.context.type==="numeric"?"tel":"text";return n.input({"data-part":"input",disabled:e.context.disabled,"data-disabled":c(e.context.disabled),"data-complete":c(a),id:o.getInputId(e.context,r),"data-ownedby":o.getRootId(e.context),"aria-label":C.inputLabel(r,e.context.valueLength),inputMode:e.context.otp||e.context.type==="numeric"?"numeric":"text","aria-invalid":w(i),"data-invalid":c(i),type:e.context.mask?"password":m,value:e.context.value[r]||"",autoCapitalize:"none",autoComplete:e.context.otp?"one-time-code":"off",placeholder:l===r?"":e.context.placeholder,onChange(u){let d=g(u);if(d.isComposing)return;let p=u.target.value;if(d.inputType==="insertFromPaste"||p.length>2){t({type:"PASTE",value:p}),u.preventDefault();return}d.inputType==="insertText"&&t({type:"INPUT",value:p})},onKeyDown(u){let d=g(u);if(d.isComposing||k(d))return;let p={Backspace(){t("BACKSPACE")},Delete(){t("DELETE")},ArrowLeft(){t("ARROW_LEFT")},ArrowRight(){t("ARROW_RIGHT")}},y=x(u,{dir:e.context.dir}),b=p[y];b?(b(u),u.preventDefault()):t({type:"KEY_DOWN",value:y,preventDefault:()=>u.preventDefault()})},onFocus(){t({type:"FOCUS",index:r})},onBlur(){t({type:"BLUR",index:r})}})}}}var f=require("@zag-js/core");var{and:P,not:U}=f.guards,S=(0,f.createMachine)({id:"pin-input",initial:"unknown",context:{uid:"pin-input",value:[],focusedIndex:-1,placeholder:"\u25CB",otp:!1,type:"numeric",messages:{inputLabel:(e,t)=>`pin code ${e+1} of ${t}`}},computed:{valueLength:e=>e.value.length,filledValueLength:e=>e.value.filter(t=>(t==null?void 0:t.trim())!=="").length,isValueComplete:e=>e.valueLength===e.filledValueLength,valueAsString:e=>e.value.join("")},watch:{focusedIndex:"focusInput",value:"invokeOnChange",isValueComplete:["invokeComplete","blurFocusedInputIfNeeded"]},on:{SET_VALUE:[{guard:"hasIndex",actions:"setValueAtIndex"},{actions:"setValue"}],CLEAR_VALUE:[{guard:"isDisabled",actions:"clearValue"},{actions:["clearValue","setFocusIndexToFirst"]}]},states:{unknown:{on:{SETUP:[{guard:"autoFocus",target:"focused",actions:["setupDocument","setupValue","setFocusIndexToFirst"]},{target:"idle",actions:["setupDocument","setupValue"]}]}},idle:{on:{FOCUS:{target:"focused",actions:"setFocusedIndex"}}},focused:{on:{INPUT:[{guard:P("isFinalValue","isValidValue"),actions:"setFocusedValue"},{guard:P("hasValue","isValidValue"),actions:["replaceFocusedValue","setNextFocusedIndex"]},{guard:"isValidValue",actions:["setFocusedValue","setNextFocusedIndex"]}],PASTE:{guard:"isValidValue",actions:["setPastedValue","setLastValueFocusIndex"]},BLUR:{target:"idle",actions:"clearFocusedIndex"},DELETE:{guard:"hasValue",actions:"clearFocusedValue"},ARROW_LEFT:{actions:"setPrevFocusedIndex"},ARROW_RIGHT:{actions:"setNextFocusedIndex"},BACKSPACE:[{guard:"hasValue",actions:"clearFocusedValue"},{actions:["setPrevFocusedIndex","clearFocusedValue"]}],KEY_DOWN:{guard:U("isValidValue"),actions:["preventDefault","invokeOnInvalid"]}}}}},{guards:{autoFocus:e=>!!e.autoFocus,isValueEmpty:(e,t)=>t.value==="",hasValue:e=>e.value[e.focusedIndex]!=="",isValueComplete:e=>e.isValueComplete,isValidValue:(e,t)=>W(t.value,e.type),isFinalValue:e=>e.filledValueLength+1===e.valueLength&&e.value.findIndex(t=>t.trim()==="")===e.focusedIndex,isLastInputFocused:e=>e.focusedIndex===e.valueLength-1,hasIndex:(e,t)=>t.index!==void 0,isDisabled:e=>!!e.disabled},actions:{setupDocument:(e,t)=>{t.doc&&(e.doc=(0,f.ref)(t.doc)),e.uid=t.id},setupValue:e=>{s(()=>{let t=o.getElements(e),n=A(t.length).map(()=>"");e.value=Object.assign(n,e.value)})},focusInput:e=>{s(()=>{var t;e.focusedIndex!==-1&&((t=o.getFocusedEl(e))==null||t.focus())})},invokeComplete:e=>{var t;e.isValueComplete&&((t=e.onComplete)==null||t.call(e,Array.from(e.value),e.valueAsString))},invokeOnChange:(e,t)=>{var n;t.type!=="SETUP"&&((n=e.onChange)==null||n.call(e,Array.from(e.value)))},invokeOnInvalid:(e,t)=>{var n;(n=e.onInvalid)==null||n.call(e,{value:t.value,index:e.focusedIndex})},clearFocusedIndex:e=>{e.focusedIndex=-1},setValue:(e,t)=>{h(e,t.value)},setFocusedIndex:(e,t)=>{e.focusedIndex=t.index},setFocusedValue:(e,t)=>{e.value[e.focusedIndex]=t.value},replaceFocusedValue:(e,t)=>{let n=e.value[e.focusedIndex];e.value[e.focusedIndex]=t.value.replace(n,"").charAt(0)},setPastedValue(e,t){s(()=>{let n=t.value.substr(0,e.valueLength);h(e,n.split("").filter(Boolean))})},setValueAtIndex:(e,t)=>{e.value[t.index]=t.value},clearValue:e=>{h(e,"")},clearFocusedValue:e=>{e.value[e.focusedIndex]=""},setFocusIndexToFirst:e=>{e.focusedIndex=0},setNextFocusedIndex:e=>{e.focusedIndex=Math.min(e.focusedIndex+1,e.valueLength-1)},setPrevFocusedIndex:e=>{e.focusedIndex=Math.max(e.focusedIndex-1,0)},setLastValueFocusIndex:e=>{s(()=>{e.focusedIndex=Math.min(e.filledValueLength,e.valueLength-1)})},preventDefault(e,t){t.preventDefault()},blurFocusedInputIfNeeded(e){!e.blurOnComplete||s(()=>{var t;(t=o.getFocusedEl(e))==null||t.blur()})}}}),K={numeric:/^[0-9]+$/,alphabetic:/^[A-Za-z]+$/,alphanumeric:/^[a-zA-Z0-9]+$/i};function W(e,t){var n;return t?!!((n=K[t])==null?void 0:n.test(e)):!0}function h(e,t){for(let n=0;n<e.value.length;n++)if(Array.isArray(t)){if(!t[n])continue;e.value[n]=t[n]}else e.value[n]=t}module.exports=_(j);
+var m=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var R=e=>m(e,"__esModule",{value:!0});var O=(e,t)=>{for(var n in t)m(e,n,{get:t[n],enumerable:!0})},N=(e,t,n,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of M(t))!D.call(e,i)&&(n||i!=="default")&&m(e,i,{get:()=>t[i],enumerable:!(a=F(t,i))||a.enumerable});return e};var _=(e=>(t,n)=>e&&e.get(t)||(n=N(R({}),t,1),e&&e.set(t,n),n))(typeof WeakMap!="undefined"?new WeakMap:0);var j={};O(j,{connect:()=>T,machine:()=>P});var c=e=>e?"":void 0,w=e=>e?!0:void 0;function s(e){let t=new Set;function n(a){let i=globalThis.requestAnimationFrame(a);t.add(()=>globalThis.cancelAnimationFrame(i))}return n(()=>n(e)),function(){t.forEach(function(a){a()})}}var B=(()=>{let e=0;return()=>(e++,e.toString(36))})();function g(e){var t;return(t=e.nativeEvent)!=null?t:e}var $=["input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","embed","iframe","object","a[href]","area[href]","[tabindex]","audio[controls]","video[controls]","*[tabindex]:not([aria-disabled])","[contenteditable]:not([contenteditable=false])","details > summary:first-of-type"].join(",");var E={ArrowLeft:"ArrowRight",ArrowRight:"ArrowLeft",Home:"End",End:"Home"},z={Up:"ArrowUp",Down:"ArrowDown",Esc:"Escape"," ":"Space",",":"Comma",Left:"ArrowLeft",Right:"ArrowRight"};function x(e,t={}){var n;let{dir:a="ltr",orientation:i="horizontal"}=t,{key:l}=e;return l=(n=z[l])!=null?n:l,a==="rtl"&&i==="horizontal"&&l in E&&(l=E[l]),l}function L(e,t){var n;return Array.from((n=e==null?void 0:e.querySelectorAll(t))!=null?n:[])}function H(e){return{button:e,label:e,input:e,output:e,element:e}}var I=H(e=>e);var A=e=>Array.from(Array(e).keys());var Z=(()=>{let e=0;return()=>(e++,e.toString(36))})();var k=e=>e.ctrlKey||e.altKey||e.metaKey||e.shiftKey;function V(...e){let t=e.length===1?e[0]:e[1],n=e.length===2?e[0]:!0}var o={getDoc:e=>{var t;return(t=e.doc)!=null?t:document},getRootId:e=>`pin-input-${e.uid}`,getInputId:(e,t)=>`pin-input-${e.uid}-${t}`,getRootEl:e=>o.getDoc(e).getElementById(o.getRootId(e)),getElements:e=>{let n=`input[data-ownedby=${CSS.escape(o.getRootId(e))}]`;return L(o.getRootEl(e),n)},getFocusedEl:e=>o.getElements(e)[e.focusedIndex],getFirstInputEl:e=>o.getElements(e)[0]};function T(e,t,n=I){let a=e.context.isValueComplete,i=e.context.invalid,l=e.context.focusedIndex,C=e.context.messages;return{value:e.context.value,valueAsString:e.context.valueAsString,isValueComplete:a,setValue(r){Array.isArray(r)||V("[pin-input/setValue] value must be an array"),t({type:"SET_VALUE",value:r})},clearValue(){t({type:"CLEAR_VALUE"})},setValueAtIndex(r,v){t({type:"SET_VALUE",value:v,index:r})},focus(){s(()=>{var r;(r=o.getFirstInputEl(e.context))==null||r.focus()})},rootProps:n.element({dir:e.context.dir,"data-part":"root",id:o.getRootId(e.context),"data-invalid":c(i),"data-disabled":c(e.context.disabled),"data-complete":c(a)}),getInputProps({index:r}){let v=e.context.type==="numeric"?"tel":"text";return n.input({"data-part":"input",disabled:e.context.disabled,"data-disabled":c(e.context.disabled),"data-complete":c(a),id:o.getInputId(e.context,r),"data-ownedby":o.getRootId(e.context),"aria-label":C.inputLabel(r,e.context.valueLength),inputMode:e.context.otp||e.context.type==="numeric"?"numeric":"text","aria-invalid":w(i),"data-invalid":c(i),type:e.context.mask?"password":v,value:e.context.value[r]||"",autoCapitalize:"none",autoComplete:e.context.otp?"one-time-code":"off",placeholder:l===r?"":e.context.placeholder,onChange(u){let d=g(u);if(d.isComposing)return;let p=u.target.value;if(d.inputType==="insertFromPaste"||p.length>2){t({type:"PASTE",value:p}),u.preventDefault();return}d.inputType==="insertText"&&t({type:"INPUT",value:p})},onKeyDown(u){let d=g(u);if(d.isComposing||k(d))return;let p={Backspace(){t("BACKSPACE")},Delete(){t("DELETE")},ArrowLeft(){t("ARROW_LEFT")},ArrowRight(){t("ARROW_RIGHT")}},y=x(u,{dir:e.context.dir}),b=p[y];b?(b(u),u.preventDefault()):t({type:"KEY_DOWN",value:y,preventDefault:()=>u.preventDefault()})},onFocus(){t({type:"FOCUS",index:r})},onBlur(){t({type:"BLUR",index:r})}})}}}var f=require("@zag-js/core");var{and:S,not:U}=f.guards,P=(0,f.createMachine)({id:"pin-input",initial:"unknown",context:{uid:"pin-input",value:[],focusedIndex:-1,placeholder:"\u25CB",otp:!1,type:"numeric",messages:{inputLabel:(e,t)=>`pin code ${e+1} of ${t}`}},computed:{valueLength:e=>e.value.length,filledValueLength:e=>e.value.filter(t=>(t==null?void 0:t.trim())!=="").length,isValueComplete:e=>e.valueLength===e.filledValueLength,valueAsString:e=>e.value.join("")},watch:{focusedIndex:"focusInput",value:"invokeOnChange",isValueComplete:["invokeComplete","blurFocusedInputIfNeeded"]},on:{SET_VALUE:[{guard:"hasIndex",actions:"setValueAtIndex"},{actions:"setValue"}],CLEAR_VALUE:[{guard:"isDisabled",actions:"clearValue"},{actions:["clearValue","setFocusIndexToFirst"]}]},states:{unknown:{on:{SETUP:[{guard:"autoFocus",target:"focused",actions:["setupDocument","setupValue","setFocusIndexToFirst"]},{target:"idle",actions:["setupDocument","setupValue"]}]}},idle:{on:{FOCUS:{target:"focused",actions:"setFocusedIndex"}}},focused:{on:{INPUT:[{guard:S("isFinalValue","isValidValue"),actions:"setFocusedValue"},{guard:S("hasValue","isValidValue"),actions:["replaceFocusedValue","setNextFocusedIndex"]},{guard:"isValidValue",actions:["setFocusedValue","setNextFocusedIndex"]}],PASTE:{guard:"isValidValue",actions:["setPastedValue","setLastValueFocusIndex"]},BLUR:{target:"idle",actions:"clearFocusedIndex"},DELETE:{guard:"hasValue",actions:"clearFocusedValue"},ARROW_LEFT:{actions:"setPrevFocusedIndex"},ARROW_RIGHT:{actions:"setNextFocusedIndex"},BACKSPACE:[{guard:"hasValue",actions:"clearFocusedValue"},{actions:["setPrevFocusedIndex","clearFocusedValue"]}],KEY_DOWN:{guard:U("isValidValue"),actions:["preventDefault","invokeOnInvalid"]}}}}},{guards:{autoFocus:e=>!!e.autoFocus,isValueEmpty:(e,t)=>t.value==="",hasValue:e=>e.value[e.focusedIndex]!=="",isValueComplete:e=>e.isValueComplete,isValidValue:(e,t)=>W(t.value,e.type),isFinalValue:e=>e.filledValueLength+1===e.valueLength&&e.value.findIndex(t=>t.trim()==="")===e.focusedIndex,isLastInputFocused:e=>e.focusedIndex===e.valueLength-1,hasIndex:(e,t)=>t.index!==void 0,isDisabled:e=>!!e.disabled},actions:{setupDocument:(e,t)=>{t.doc&&(e.doc=(0,f.ref)(t.doc)),e.uid=t.id},setupValue:e=>{s(()=>{let t=o.getElements(e),n=A(t.length).map(()=>"");e.value=Object.assign(n,e.value)})},focusInput:e=>{s(()=>{var t;e.focusedIndex!==-1&&((t=o.getFocusedEl(e))==null||t.focus())})},invokeComplete:e=>{var t;e.isValueComplete&&((t=e.onComplete)==null||t.call(e,{value:Array.from(e.value),valueAsString:e.valueAsString}))},invokeOnChange:(e,t)=>{var n;t.type!=="SETUP"&&((n=e.onChange)==null||n.call(e,{value:Array.from(e.value)}))},invokeOnInvalid:(e,t)=>{var n;(n=e.onInvalid)==null||n.call(e,{value:t.value,index:e.focusedIndex})},clearFocusedIndex:e=>{e.focusedIndex=-1},setValue:(e,t)=>{h(e,t.value)},setFocusedIndex:(e,t)=>{e.focusedIndex=t.index},setFocusedValue:(e,t)=>{e.value[e.focusedIndex]=t.value},replaceFocusedValue:(e,t)=>{let n=e.value[e.focusedIndex];e.value[e.focusedIndex]=t.value.replace(n,"").charAt(0)},setPastedValue(e,t){s(()=>{let n=t.value.substr(0,e.valueLength);h(e,n.split("").filter(Boolean))})},setValueAtIndex:(e,t)=>{e.value[t.index]=t.value},clearValue:e=>{h(e,"")},clearFocusedValue:e=>{e.value[e.focusedIndex]=""},setFocusIndexToFirst:e=>{e.focusedIndex=0},setNextFocusedIndex:e=>{e.focusedIndex=Math.min(e.focusedIndex+1,e.valueLength-1)},setPrevFocusedIndex:e=>{e.focusedIndex=Math.max(e.focusedIndex-1,0)},setLastValueFocusIndex:e=>{s(()=>{e.focusedIndex=Math.min(e.filledValueLength,e.valueLength-1)})},preventDefault(e,t){t.preventDefault()},blurFocusedInputIfNeeded(e){!e.blurOnComplete||s(()=>{var t;(t=o.getFocusedEl(e))==null||t.blur()})}}}),K={numeric:/^[0-9]+$/,alphabetic:/^[A-Za-z]+$/,alphanumeric:/^[a-zA-Z0-9]+$/i};function W(e,t){var n;return t?!!((n=K[t])==null?void 0:n.test(e)):!0}function h(e,t){for(let n=0;n<e.value.length;n++)if(Array.isArray(t)){if(!t[n])continue;e.value[n]=t[n]}else e.value[n]=t}module.exports=_(j);
 //# sourceMappingURL=index.js.map

dist/pin-input.types.d.ts

@@ -42,11 +42,16 @@ import type { Context } from "@zag-js/types";
      */
-    onComplete?: (value: string[], valueAsString: string) => void;
+    onComplete?: (details: {
+        value: string[];
+        valueAsString: string;
+    }) => void;
     /**
      * Function called on input change
      */
-    onChange?: (value: string[]) => void;
+    onChange?: (details: {
+        value: string[];
+    }) => void;
     /**
      * Function called when an invalid value is entered
      */
-    onInvalid?: (info: {
+    onInvalid?: (details: {
         value: string;
@@ -53,0 +58,0 @@ index: number;

package.json

 {
   "name": "@zag-js/pin-input",
-  "version": "0.0.0-dev-20220408111010",
+  "version": "0.0.0-dev-20220408120729",
   "description": "Core logic for the pin-input widget implemented as a state machine",
@@ -32,7 +32,7 @@ "keywords": [
   "dependencies": {
-    "@zag-js/core": "^0.0.0-dev-20220408111010",
-    "@zag-js/dom-utils": "^0.0.0-dev-20220408111010",
-    "@zag-js/types": "^0.0.0-dev-20220408111010",
-    "@zag-js/utils": "^0.0.0-dev-20220408111010"
+    "@zag-js/core": "^0.0.0-dev-20220408120729",
+    "@zag-js/dom-utils": "^0.0.0-dev-20220408120729",
+    "@zag-js/types": "^0.0.0-dev-20220408120729",
+    "@zag-js/utils": "^0.0.0-dev-20220408120729"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

177011

increased by0.14%

Lines of code

186

increased by2.76%

Dependency changes

• Updated@zag-js/core@^0.0.0-dev-20220408120729

• Updated@zag-js/dom-utils@^0.0.0-dev-20220408120729

• Updated@zag-js/types@^0.0.0-dev-20220408120729

• Updated@zag-js/utils@^0.0.0-dev-20220408120729