@frank-auth/react/dist/cjs/components/forms/email-field.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),ce=require("@emotion/styled"),U=require("../ui/button/button.cjs"),ue=require("../ui/input/input.cjs"),me=require("../ui/chip/chip.cjs"),A=require("../ui/popover/popover.cjs"),N=require("../ui/listbox/listbox.cjs"),de=require("../../theme/context.cjs"),X=require("framer-motion"),fe=require("react"),he=require("../../hooks/use-config.cjs"),ge=require("./field-error.cjs"),pe=require("./form-wrapper.cjs"),Y=e=>e&&e.__esModule?e:{default:e},u=Y(ce),n=Y(fe),xe=u.default.div`
  display: flex;
  flex-direction: column;
  gap: ${e=>e.theme.spacing[1]};
`,ve=u.default.div`
  padding: ${e=>e.theme.spacing[1]};
`,ye=u.default.div`
  font-size: ${e=>e.theme.fontSizes.xs};
  color: ${e=>e.theme.colors.text.tertiary};
`,je=u.default.span`
  font-weight: ${e=>e.theme.fontWeights.medium};
`,$e=u.default(X.motion.div)`
  display: flex;
  flex-direction: column;
  gap: ${e=>e.theme.spacing[1]};
`,ke=u.default.div`
  font-size: ${e=>e.theme.fontSizes.xs};
  color: ${e=>e.theme.colors.text.secondary};
  font-weight: ${e=>e.theme.fontWeights.medium};
`,Ce=u.default.div`
  display: flex;
  flex-wrap: wrap;
  gap: ${e=>e.theme.spacing[1]};
`,Le=u.default.svg`
  width: ${e=>e.theme.spacing[4]};
  height: ${e=>e.theme.spacing[4]};
  color: ${e=>e.theme.colors.text.quaternary};
`,Me=u.default.svg`
  width: ${e=>e.theme.spacing[3]};
  height: ${e=>e.theme.spacing[3]};
`,be=u.default.svg`
  width: ${e=>e.theme.spacing[4]};
  height: ${e=>e.theme.spacing[4]};
  color: ${e=>e.theme.colors.primary[500]};
`,we=u.default(U.Button)`
  font-size: ${e=>e.theme.fontSizes.xs};
  height: ${e=>e.theme.spacing[6]};
`,ze=["gmail.com","yahoo.com","hotmail.com","outlook.com","icloud.com","aol.com","live.com","msn.com","me.com","mail.com","protonmail.com","yandex.com","zoho.com","fastmail.com"],Q={"gmial.com":"gmail.com","gmai.com":"gmail.com","gmil.com":"gmail.com","yahho.com":"yahoo.com","yaho.com":"yahoo.com","hotmial.com":"hotmail.com","hotmil.com":"hotmail.com","outlok.com":"outlook.com","outloo.com":"outlook.com"};function Ie(e,$={}){const{validateFormat:k=!0,validateDomain:v=!1,allowedDomains:r=[],blockedDomains:y=[]}=$,m=[],f=[];let s=null,l=null;k&&(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e)||m.push("Please enter a valid email address"));const h=e.split("@");return h.length===2&&(l=h[0],s=h[1].toLowerCase(),s&&Q[s]&&f.push(`Did you mean ${l}@${Q[s]}?`),v&&s&&(r.length>0&&!r.includes(s)&&m.push(`Email must be from one of these domains: ${r.join(", ")}`),y.includes(s)&&m.push("This email domain is not allowed"),/^[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(s)||m.push("Invalid email domain")),l&&s&&s.length>0&&!s.includes(".")&&ze.filter(g=>g.toLowerCase().startsWith(s.toLowerCase())).slice(0,3).forEach(g=>{f.push(`${l}@${g}`)})),{isValid:m.length===0,errors:m,suggestions:f,domain:s,username:l}}function ee({name:e="email",label:$="Email",placeholder:k="Enter your email address",value:v="",onChange:r,onBlur:y,onFocus:m,required:f=!1,disabled:s=!1,showSuggestions:l=!0,validateFormat:h=!0,validateDomain:j=!1,allowedDomains:g=[],blockedDomains:C=[],size:_="md",radius:te="md",variant:oe="bordered",className:q="",autoFocus:B=!1,autoComplete:F="email",error:p,description:R,showVerificationStatus:z=!1,isVerified:I=!1,onRequestVerification:L,startContent:T,endContent:M}){const{theme:a}=de.useTheme(),{components:S,organizationSettings:b}=he.useConfig(),c=pe.useFormField(e),se=n.default.useMemo(()=>S.Input??ue.Input,[S.Input]),W=S.EmailField;if(W)return o.jsx(W,{name:e,label:$,placeholder:k,value:v,onChange:r,onBlur:y,onFocus:m,required:f,disabled:s,showSuggestions:l,validateFormat:h,validateDomain:j,allowedDomains:g,blockedDomains:C,size:_,variant:oe,className:q,autoFocus:B,autoComplete:F,error:p,description:R,showVerificationStatus:z,isVerified:I,onRequestVerification:L,startContent:T,endContent:M});const[ie,V]=n.default.useState(v),[D,O]=n.default.useState(!1),[Z,x]=n.default.useState(!1),d=r?v:ie,w=n.default.useMemo(()=>{const t=b?.emailRestrictions?.allowedDomains;return t&&t.length>0?t:g},[g,b]),G=n.default.useMemo(()=>{const t=b?.emailRestrictions?.blockedDomains;return t&&t.length>0?[...C,...t]:C},[C,b]),i=n.default.useMemo(()=>d?Ie(d,{validateFormat:h,validateDomain:j,allowedDomains:w,blockedDomains:G}):null,[d,h,j,w,G]),E=n.default.useMemo(()=>{const t=[];return p&&(Array.isArray(p)?t.push(...p):t.push(p)),c.error&&(Array.isArray(c.error)?t.push(...c.error):t.push(c.error)),i&&!i.isValid&&t.push(...i.errors),t.length>0?t:null},[p,c.error,i]),P=n.default.useCallback(t=>{r?r(t):V(t),c.clearError&&c.clearError(),i?.suggestions.length&&D&&l?x(!0):x(!1)},[r,c,i,D,l]),ne=n.default.useCallback(()=>{if(O(!1),x(!1),d){const t=d.trim().toLowerCase();t!==d&&(r?r(t):V(t))}c.setTouched&&c.setTouched(!0),y?.()},[c,y,d,r]),re=n.default.useCallback(()=>{O(!0),m?.(),l&&i?.suggestions.length&&x(!0)},[m,l,i]),H=n.default.useCallback(t=>{P(t),x(!1)},[P]),le=n.default.useMemo(()=>!z||M?null:I?o.jsx(me.Chip,{size:"sm",color:"success",variant:"flat",startContent:o.jsx(Me,{theme:a,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),children:"Verified"}):d&&i?.isValid&&L?o.jsx(U.Button,{size:"sm",variant:"ghost",color:"primary",onPress:L,children:"Verify"}):null,[z,M,I,d,i,L,a]),ae=o.jsx(Le,{theme:a,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"})}),J=o.jsx(se,{name:e,label:$,placeholder:k,value:d,onChange:t=>P(t.target.value),onBlur:ne,onFocus:re,type:"email",isRequired:f,required:f,isDisabled:s,disabled:s,size:_,radius:te,variant:"bordered",autoFocus:B,autoComplete:F,description:R,isInvalid:!!E,errorMessage:"",startContent:T||ae,endContent:M||le});return o.jsxs(xe,{theme:a,className:q,children:[l&&i?.suggestions.length?o.jsxs(A.Popover,{isOpen:Z,onOpenChange:x,placement:"bottom-start",showArrow:!0,children:[o.jsx(A.Popover.Trigger,{children:J}),o.jsx(A.Popover.Content,{children:o.jsx(ve,{theme:a,children:o.jsx(N.Listbox,{"aria-label":"Email suggestions",onAction:t=>H(t),children:i.suggestions.map((t,K)=>o.jsx(N.ListboxItem,{value:t,startContent:o.jsx(be,{theme:a,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:o.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M13 10V3L4 14h7v7l9-11h-7z"})}),children:t},t))})})})]}):J,E&&o.jsx(ge.FieldError,{error:E,fieldName:e}),w.length>0&&o.jsxs(ye,{theme:a,children:[o.jsx(je,{theme:a,children:"Allowed domains:"})," ",w.join(", ")]}),o.jsx(X.AnimatePresence,{children:!Z&&i?.suggestions.length&&D&&o.jsxs($e,{theme:a,initial:{opacity:0,y:-10},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},children:[o.jsx(ke,{theme:a,children:"Did you mean:"}),o.jsx(Ce,{theme:a,children:i.suggestions.slice(0,3).map((t,K)=>o.jsx(we,{theme:a,size:"sm",variant:"ghost",color:"primary",onClick:()=>H(t),children:t},K))})]})})]})}var Se=ee;exports.EmailField=ee;exports.default=Se;
//# sourceMappingURL=email-field.cjs.map