@frank-auth/react/dist/cjs/components/forms/verification-code.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime");require("@emotion/styled");const ie=require("../ui/button/button.cjs"),ne=require("../ui/input/input.cjs"),oe=require("../ui/progress/progress.cjs"),k=require("framer-motion"),ue=require("react"),le=require("../../hooks/use-config.cjs"),fe=require("./field-error.cjs"),me=require("./form-wrapper.cjs"),de=f=>f&&f.__esModule?f:{default:f},c=de(ue);function pe({name:f="verificationCode",label:N="Verification Code",length:s=6,value:A="",onChange:x,onComplete:y,onBlur:C,onFocus:w,required:P=!1,disabled:n=!1,autoFocus:b=!0,size:V="md",variant:B="bordered",className:S="",error:j,description:I,placeholder:z="○",type:d="numeric",allowPaste:q=!0,separator:T=!1,groupSize:U=3,separatorChar:Z="-",canResend:$=!1,onResend:M,resendCountdown:R=0,isLoading:g=!1,isSuccess:E=!1,inputMode:K="numeric",autoComplete:W="one-time-code"}){const{components:G}=le.useConfig(),i=me.useFormField(f),H=G.VerificationCode;if(H)return r.jsx(H,{name:f,label:N,length:s,value:A,onChange:x,onComplete:y,onBlur:C,onFocus:w,required:P,disabled:n,autoFocus:b,size:V,variant:B,className:S,error:j,description:I,placeholder:z,type:d,allowPaste:q,separator:T,groupSize:U,separatorChar:Z,canResend:$,onResend:M,resendCountdown:R,isLoading:g,isSuccess:E,inputMode:K,autoComplete:W});const[J,Q]=c.default.useState(A),[he,u]=c.default.useState(0),[je,L]=c.default.useState(!1),o=c.default.useRef([]),_=x?A:J,m=c.default.useMemo(()=>{const e=_.split("").slice(0,s);return[...e,...Array(Math.max(0,s-e.length)).fill("")]},[_,s]),F=c.default.useMemo(()=>{const e=[];return j&&(Array.isArray(j)?e.push(...j):e.push(j)),i.error&&(Array.isArray(i.error)?e.push(...i.error):e.push(i.error)),e.length>0?e:null},[j,i.error]),p=c.default.useCallback(e=>{const t=d==="numeric"?e.replace(/[^0-9]/g,""):e.replace(/[^a-zA-Z0-9]/g,"").toUpperCase();x?x(t):Q(t),i.clearError&&i.clearError(),t.length===s&&y&&y(t)},[x,i,s,y,d]),X=c.default.useCallback((e,t)=>{if(n)return;const a=[...m],l=d==="numeric"?t.replace(/[^0-9]/g,""):t.replace(/[^a-zA-Z0-9]/g,"").toUpperCase();if(l.length>1){const v=l.split("");for(let D=0;D<v.length&&e+D<s;D++)a[e+D]=v[D];const O=Math.min(e+v.length,s-1);u(O),o.current[O]?.focus()}else a[e]=l,l&&e<s-1&&(u(e+1),o.current[e+1]?.focus());const h=a.join("");p(h)},[m,n,s,d,p]),Y=c.default.useCallback((e,t)=>{if(!n)switch(t.key){case"Backspace":if(!m[e]&&e>0)t.preventDefault(),u(e-1),o.current[e-1]?.focus();else if(m[e]){const h=[...m];h[e]="";const v=h.join("");p(v)}break;case"Delete":const a=[...m];a[e]="";const l=a.join("");p(l);break;case"ArrowLeft":t.preventDefault(),e>0&&(u(e-1),o.current[e-1]?.focus());break;case"ArrowRight":t.preventDefault(),e<s-1&&(u(e+1),o.current[e+1]?.focus());break;case"Home":t.preventDefault(),u(0),o.current[0]?.focus();break;case"End":t.preventDefault(),u(s-1),o.current[s-1]?.focus();break}},[m,n,s,p]),ee=c.default.useCallback(e=>{if(!q||n)return;e.preventDefault();const t=e.clipboardData.getData("text"),a=d==="numeric"?t.replace(/[^0-9]/g,""):t.replace(/[^a-zA-Z0-9]/g,"").toUpperCase();if(a){const l=a.slice(0,s);p(l);const h=Math.min(l.length-1,s-1);u(h),o.current[h]?.focus()}},[q,n,d,s,p]),te=c.default.useCallback(e=>{u(e),L(!0),w?.()},[w]),re=c.default.useCallback(()=>{L(!1),i.setTouched&&i.setTouched(!0),C?.()},[i,C]);c.default.useEffect(()=>{b&&!n&&o.current[0]?.focus()},[b,n]);const se={sm:"w-8 h-8 text-sm",md:"w-10 h-10 text-base",lg:"w-12 h-12 text-lg"},ae=e=>!T||(e+1)%U!==0||e===s-1?null:r.jsx("span",{className:"text-default-400 text-xl font-mono mx-1",children:Z}),ce=()=>{if(!$||!M)return null;const e=R===0&&!g;return r.jsx("div",{className:"flex items-center justify-center mt-4",children:e?r.jsx(ie.Button,{variant:"light",color:"primary",size:"sm",onPress:M,isDisabled:g,children:"Resend Code"}):r.jsxs("div",{className:"text-sm text-default-500",children:["Resend code in ",R,"s"]})})};return r.jsxs("div",{className:`space-y-4 ${S}`,children:[N&&r.jsxs("div",{className:"text-sm font-medium text-foreground",children:[N,P&&r.jsx("span",{className:"text-danger ml-1",children:"*"})]}),I&&r.jsx("div",{className:"text-sm text-default-500",children:I}),r.jsx("div",{className:"flex items-center justify-center gap-2 flex-wrap",children:m.map((e,t)=>r.jsxs(c.default.Fragment,{children:[r.jsx(ne.Input,{ref:a=>{o.current[t]=a},value:e,onChange:a=>X(t,a.target.value),onKeyDown:a=>Y(t,a),onFocus:()=>te(t),onBlur:re,onPaste:ee,maxLength:1,className:`${se[V]} text-center font-mono`,size:V,variant:B,isDisabled:n||g,isInvalid:!!F,placeholder:z,inputMode:K,autoComplete:t===0?W:"off",type:"text"}),ae(t)]},t))}),r.jsx(k.AnimatePresence,{children:g&&r.jsx(k.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},children:r.jsx(oe.Progress,{size:"sm",isIndeterminate:!0,color:"primary",className:"w-full",label:"Verifying..."})})}),r.jsx(k.AnimatePresence,{children:E&&r.jsxs(k.motion.div,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},className:"flex items-center justify-center gap-2 text-success-600",children:[r.jsx("svg",{className:"w-5 h-5",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),r.jsx("span",{className:"text-sm font-medium",children:"Verified!"})]})}),F&&r.jsx(fe.FieldError,{error:F,fieldName:f}),r.jsx(ce,{}),r.jsx("div",{className:"flex justify-center",children:r.jsx("div",{className:"flex gap-1",children:Array.from({length:s},(e,t)=>r.jsx("div",{className:`
                w-2 h-1 rounded-full transition-colors duration-200
                ${t<_.length?"bg-primary":"bg-default-200 dark:bg-default-800"}
              `},t))})})]})}exports.VerificationCode=pe;
//# sourceMappingURL=verification-code.cjs.map