@clicktap/ui 0.17.2 → 0.17.4

package/components/Modal/Modal.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{Modal as m}from"react-aria-components";import{cn as s}from"../../utils/cn.js";function i({children:o,className:a,...r}){return t(m,{...r,className:s("absolute inset-1/2",a),children:o})}export{i as Modal,i as default};
+import{jsx as t}from"react/jsx-runtime";import{Modal as m}from"react-aria-components";import{cn as s}from"../../utils/cn.js";function i({children:o,className:a,...r}){return t(m,{...r,className:s("absolute inset-0",a),children:o})}export{i as Modal,i as default};

package/components/PinInput/PinInput.js

@@ -1 +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};
+import{jsxs as A,jsx as m}from"react/jsx-runtime";import{useState as K,useRef as E,useEffect as L,useCallback as g}from"react";import{Group as P,Label as R}from"react-aria-components";import{cn as p}from"../../utils/cn.js";function U({description:k,errorMessage:b,isDisabled:y=!1,isInvalid:w=!1,isMasked:$=!1,isRequired:j=!0,label:V,length:n=6,name:T,onChange:o,value:S="",type:h="numeric",validationBehavior:W,className:I,classNames:f,...N}){const[r,D]=K(()=>Array(n).fill("")),c=E([]);L(()=>{c.current=c.current.slice(0,n)},[n]);const z=g(t=>{const e=t.target.value,u=Number(t.target.getAttribute("data-pin-input-index"));e!==""&&u<n-1&&c.current?.[u+1]?.focus();const l=r.map((s,d)=>d===u?e:s);D(l);const a=l.join("");o?.(a)},[r,n,o]),B=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));if(t.ctrlKey||t.metaKey)return;const u=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"],l={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/i};if(!t.key.match(l[h])&&!u.includes(t.key)&&t.preventDefault(),r[e]===""&&e>0&&t.key==="Backspace"){const a=r.map((d,x)=>x===e-1?"":d);D(a),c.current?.[e-1]?.focus(),t.preventDefault();const s=a.join("");o?.(s)}if(r[e]===""&&e<r.length-1&&t.key==="Delete"){const a=r.map((d,x)=>x===e+1?"":d);D(a),c.current?.[e+1]?.focus(),t.preventDefault();const s=a.join("");o?.(s)}},[r,h,o]),J=g(t=>{const e=Number(t.currentTarget.getAttribute("data-pin-input-index"));t.preventDefault();const u=t.clipboardData?.getData("text");if(!u)return;const l=u.split("").filter(i=>{switch(h){case"alpha":return/^[a-zA-Z]$/.test(i);case"alphanumeric":return/^[a-z0-9]$/i.test(i);default:return/^[0-9]$/.test(i)}});if(l.length===0)return;const a=[...r];let s=e;for(let i=0;i<l.length&&e+i<n;i++)a[e+i]=l[i],s=e+i;D(a);const d=a.join("");o?.(d);const x=s+1<n?s+1:n-1;c.current[x]?.focus()},[r,h,n,o]);return A(P,{className:p("flex flex-wrap gap-2",I),"aria-label":V,...N,children:[V&&m(R,{className:p("flex text-slate-500 text-sm grow shrink-0 basis-full",f?.label),children:V}),r.map((t,e)=>m("div",{className:p("flex flex-col w-full flex-1 text-slate-900",f?.inputWrap),children:m("input",{className:p("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",w&&"border-red-500 bg-red-100 text-red-600",w&&"hover:border-red-600 focus:border-red-600 focus:outline-red-200",f?.input),onChange:z,onKeyDown:B,onPaste:J,type:$?"password":"text",autoComplete:"one-time-code",ref:u=>{c.current[e]=u},value:t,maxLength:1,"data-pin-input-index":e,disabled:y,required:j,"aria-label":`Pin Input Digit ${e+1}`})},`pin-input-${e}`)),(k||w&&b)&&A("div",{className:p("flex flex-row flex-wrap grow shrink-0 basis-full",f?.textWrap),children:[k&&m("p",{className:p("flex text-slate-500 text-sm grow shrink-0 basis-full",f?.description),children:k}),w&&b&&typeof b=="string"&&m("p",{className:p("flex text-red-500 text-sm grow shrink-0 basis-full",f?.error),children:b})]})]})}export{U as PinInput,U as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clicktap/ui",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "private": false,
   "author": "Clicktap",
   "description": "A library of React UI components and low-level hooks.",