@frank-auth/react/dist/cjs/components/auth/common/verification.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("@emotion/styled");const A=require("../../ui/button/button.cjs"),M=require("../../ui/input/input.cjs"),R=require("../../ui/chip/chip.cjs"),z=require("../../ui/alert/alert.cjs"),L=require("../../ui/progress/progress.cjs"),X=require("../../../hooks/use-config.cjs"),a=require("@heroicons/react/24/outline"),x=require("react"),h=require("./error-boundary.cjs"),V=h.withErrorBoundary(function({value:c,onChange:i,length:r=6,disabled:f=!1,placeholder:u="Enter code",type:w="text",className:m,autoFocus:C=!0,onComplete:N,size:p="md",radius:g="md"}){const o=x.useRef([]),[y,d]=x.useState(0),{components:S}=X.useConfig(),$=S.Input??M.Input;x.useEffect(()=>{o.current=o.current.slice(0,r)},[r]),x.useEffect(()=>{const s=c.split("");o.current.forEach((n,t)=>{n&&(n.value=s[t]||"")}),c.length===r&&N?.(c)},[c,r,N]),x.useEffect(()=>{C&&o.current[0]&&!f&&o.current[0].focus()},[C,f]);const q=(s,n)=>{const t=n.replace(/\D/g,"").slice(-1),l=c.split("");for(l[s]=t;l.length<r;)l.push("");const P=l.join("").slice(0,r);if(i(P),t&&s<r-1){const I=o.current[s+1];I&&(I.focus(),d(s+1))}},B=(s,n)=>{if(n.key==="Backspace")if(!c[s]&&s>0){const t=o.current[s-1];if(t){t.focus(),d(s-1);const l=c.split("");l[s-1]="",i(l.join(""))}}else{const t=c.split("");t[s]="",i(t.join(""))}else if(n.key==="ArrowLeft"&&s>0){const t=o.current[s-1];t&&(t.focus(),d(s-1))}else if(n.key==="ArrowRight"&&s<r-1){const t=o.current[s+1];t&&(t.focus(),d(s+1))}},D=s=>{s.preventDefault();const n=s.clipboardData.getData("text").replace(/\D/g,"").slice(0,r);i(n);const t=Math.min(n.length,r-1),l=o.current[t];l&&(l.focus(),d(t))};return e.jsx("div",{className:`flex gap-2 justify-center ${m||""}`,children:Array.from({length:r},(s,n)=>e.jsx($,{ref:t=>o.current[n]=t,type:w,inputMode:"numeric",pattern:"[0-9]*",maxLength:1,className:"w-12 h-12",classNames:{input:"text-center text-lg font-mono",inputWrapper:`h-12 ${y===n?"ring-2 ring-primary":""}`},placeholder:n===0?u:"",disabled:f,onChange:t=>q(n,t.target.value),onKeyDown:t=>B(n,t),onPaste:D,onFocus:()=>d(n),variant:"bordered",size:p,radius:g},n))})}),v=h.withErrorBoundary(function({totalTime:c,remainingTime:i,onExpired:r,showProgress:f=!0,format:u="mm:ss",className:w,radius:m="sm"}){x.useEffect(()=>{i===0&&r?.()},[i,r]);const C=g=>{if(u==="seconds")return`${g}s`;const o=Math.floor(g/60),y=g%60;return`${o.toString().padStart(2,"0")}:${y.toString().padStart(2,"0")}`},N=c>0?(c-i)/c*100:0,p=i<=30;return e.jsxs("div",{className:`flex items-center gap-3 ${w||""}`,children:[e.jsx(a.ClockIcon,{className:`h-4 w-4 ${p?"text-warning":"text-default-500"}`}),e.jsxs("div",{className:"flex-1",children:[e.jsxs("div",{className:"flex items-center justify-between mb-1",children:[e.jsx("span",{className:"text-sm text-default-500",children:"Code expires in"}),e.jsx("span",{className:`text-sm font-mono ${p?"text-warning":"text-default-700"}`,children:C(i)})]}),f&&e.jsx(L.Progress,{value:N,color:p?"warning":"primary",size:"sm",className:"w-full",radius:m})]})]})}),b=h.withErrorBoundary(function({error:c,onRetry:i,className:r}){return e.jsx(z.Alert,{icon:e.jsx(a.ExclamationTriangleIcon,{className:"h-4 w-4"}),color:"danger",variant:"flat",className:r,children:e.jsxs("span",{className:"flex items-center justify-between w-full",children:[e.jsx("span",{children:c}),i&&e.jsx(A.Button,{size:"sm",color:"danger",variant:"light",onClick:i,className:"ml-2",children:"Retry"})]})})}),E=h.withErrorBoundary(function({status:c,method:i="email",className:r}){const u=(()=>{switch(c){case"pending":return{color:"default",icon:e.jsx(a.ClockIcon,{className:"h-3 w-3"}),text:"Pending"};case"sent":return{color:"primary",icon:e.jsx(a.ClockIcon,{className:"h-3 w-3"}),text:`Code sent ${i==="email"?"via email":i==="phone"?"via SMS":""}`};case"verifying":return{color:"primary",icon:e.jsx(a.ClockIcon,{className:"h-3 w-3"}),text:"Verifying..."};case"verified":return{color:"success",icon:e.jsx(a.CheckCircleIcon,{className:"h-3 w-3"}),text:"Verified"};case"error":return{color:"danger",icon:e.jsx(a.XCircleIcon,{className:"h-3 w-3"}),text:"Failed"};case"expired":return{color:"warning",icon:e.jsx(a.XCircleIcon,{className:"h-3 w-3"}),text:"Expired"};default:return{color:"default",icon:e.jsx(a.ClockIcon,{className:"h-3 w-3"}),text:"Unknown"}}})();return e.jsx(R.Chip,{color:u.color,variant:"flat",size:"sm",startContent:u.icon,className:r,children:u.text})}),k=h.withErrorBoundary(function({steps:c,className:i}){return e.jsx("div",{className:`space-y-4 ${i||""}`,children:c.map((r,f)=>{const u=f===c.length-1,m=(()=>{switch(r.status){case"completed":return{color:"success",icon:e.jsx(a.CheckCircleIcon,{className:"h-5 w-5"}),bgClass:"bg-success",textClass:"text-success"};case"active":return{color:"primary",icon:e.jsx(a.ClockIcon,{className:"h-5 w-5"}),bgClass:"bg-primary",textClass:"text-primary"};case"error":return{color:"danger",icon:e.jsx(a.XCircleIcon,{className:"h-5 w-5"}),bgClass:"bg-danger",textClass:"text-danger"};default:return{color:"default",icon:e.jsx("div",{className:"h-5 w-5 rounded-full border-2 border-default-300"}),bgClass:"bg-default-200",textClass:"text-default-500"}}})();return e.jsxs("div",{className:"flex items-center",children:[e.jsxs("div",{className:"flex items-center",children:[e.jsx("div",{className:`flex items-center justify-center w-8 h-8 rounded-full ${m.bgClass} text-white`,children:m.icon}),e.jsx("div",{className:"ml-4",children:e.jsx("div",{className:`text-sm font-medium ${m.textClass}`,children:r.label})})]}),!u&&e.jsx("div",{className:"flex-1 ml-4",children:e.jsx("div",{className:`h-0.5 ${r.status==="completed"?"bg-success":"bg-default-200"}`})})]},r.id)})})}),K={VerificationInput:V,VerificationTimer:v,VerificationError:b,VerificationBadge:E,VerificationProgress:k};exports.Verification=E;exports.VerificationCommon=K;exports.VerificationError=b;exports.VerificationInput=V;exports.VerificationProgress=k;exports.VerificationTimer=v;
//# sourceMappingURL=verification.cjs.map