@clicktap/ui 0.17.1 → 0.17.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as k,jsx as m}from"react/jsx-runtime";import{useState as A,useRef as L,useEffect as P}from"react";import{Group as R,Label as B,TextField as S,Input as W}from"react-aria-components";import{cn as f}from"../../utils/cn.js";function q({description:g,errorMessage:b,isDisabled:I=!1,isInvalid:D=!1,isMasked:$=!1,isRequired:j=!0,label:V,length:d=6,name:F,onChange:l,value:J="",type:y="numeric",validationBehavior:N="native",className:z,classNames:p,...K}){const[,w]=A(J),[u,h]=A(Array(d).fill("")),c=L([]);P(()=>{c.current=c.current.slice(0,d)},[d]);const T=t=>{const e=t.target.value,r=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&r<u.length-1&&c.current?.[r+1]?.focus();const s=u.map((i,o)=>o===r?e:i);h(s);const a=s.join("");w(a),l&&l(a)},v=t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const r=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],s={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(s[y])&&!r.includes(t.key)&&t.preventDefault(),u[e]===""&&e>0&&t.key==="Backspace"){const a=u.map((o,x)=>x===e-1?"":o);h(a),c.current?.[e-1]?.focus(),t.preventDefault();const i=a.join("");w(i),l&&l(i)}if(u[e]===""&&e<u.length-1&&t.key==="Delete"){const a=u.map((o,x)=>x===e+1?"":o);h(a),c.current?.[e+1]?.focus(),t.preventDefault();const i=a.join("");w(i),l&&l(i)}},E=t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const r=t.clipboardData?.getData("text");if(!r)return;const s=r.split("").filter(n=>{switch(y){case"alpha":return/^[a-zA-Z]$/.test(n);case"alphanumeric":return/^[a-z0-9]$/i.test(n);default:return/^[0-9]$/.test(n)}});if(s.length===0)return;const a=[...u];let i=e;for(let n=0;n<s.length&&e+n<d;n++)a[e+n]=s[n],i=e+n;h(a);const o=a.join("");w(o),l&&l(o);const x=i+1<d?i+1:d-1;c.current[x]?.focus()};return k(R,{className:f("flex flex-wrap gap-2",z),"aria-label":V,...K,children:[m(B,{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.label),children:V}),u.map((t,e)=>m(S,{className:f("flex flex-col w-full flex-1 text-slate-900",p?.inputWrap),"aria-label":`Pin Input Digit ${e+1}`,isDisabled:I,isInvalid:D,isRequired:j,validationBehavior:N,children:m(W,{className:f("border-solid border border-slate-300 rounded-md","text-sm text-slate-900 placeholder-slate-400 text-center","h-10 px-2 py-0 m-0 w-full","bg-white","transition-all duration-200 ease-in-out","hover:border-slate-400","focus:outline-2 focus:outline focus:outline-slate-200 focus:border-slate-400","disabled:border-slate-200 disabled:bg-slate-100","invalid:border-red-500 invalid:bg-red-100 invalid:text-red-600","invalid:hover:border-red-600 invalid:focus:border-red-600 invalid:focus:outline-red-200",p?.input),onChange:T,onKeyDown:v,onPaste:E,type:$?"password":"text",autoComplete:"one-time-code",ref:r=>{r&&(c.current[e]=r)},value:t,maxLength:1,"data-pin-input-index":e})},`pin-input-${e}`)),(g||D&&b)&&k("div",{className:f("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[g&&m("p",{className:f("flex text-slate-500 text-sm grow shrink-0 basis-full",p?.description),children:g}),D&&b&&typeof b=="string"&&m("p",{className:f("flex text-red-500 text-sm grow shrink-0 basis-full",p?.error),children:b})]})]})}export{q as PinInput,q as default};
|