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

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");require("@emotion/styled");const ee=require("../ui/button/button.cjs"),te=require("../ui/input/input.cjs"),re=require("../ui/chip/chip.cjs"),oe=require("../ui/select/select.cjs"),le=require("react"),ae=require("../../hooks/use-config.cjs"),ne=require("./field-error.cjs"),se=require("./form-wrapper.cjs"),de=o=>o&&o.__esModule?o:{default:o},d=de(le),v=[{code:"US",name:"United States",dialCode:"+1",flag:"🇺🇸",format:"(###) ###-####"},{code:"CA",name:"Canada",dialCode:"+1",flag:"🇨🇦",format:"(###) ###-####"},{code:"GB",name:"United Kingdom",dialCode:"+44",flag:"🇬🇧",format:"#### ### ####"},{code:"AU",name:"Australia",dialCode:"+61",flag:"🇦🇺",format:"#### ### ###"},{code:"DE",name:"Germany",dialCode:"+49",flag:"🇩🇪",format:"### ### ####"},{code:"FR",name:"France",dialCode:"+33",flag:"🇫🇷",format:"## ## ## ## ##"},{code:"ES",name:"Spain",dialCode:"+34",flag:"🇪🇸",format:"### ### ###"},{code:"IT",name:"Italy",dialCode:"+39",flag:"🇮🇹",format:"### ### ####"},{code:"JP",name:"Japan",dialCode:"+81",flag:"🇯🇵",format:"###-####-####"},{code:"KR",name:"South Korea",dialCode:"+82",flag:"🇰🇷",format:"###-####-####"},{code:"CN",name:"China",dialCode:"+86",flag:"🇨🇳",format:"### #### ####"},{code:"IN",name:"India",dialCode:"+91",flag:"🇮🇳",format:"##### #####"},{code:"BR",name:"Brazil",dialCode:"+55",flag:"🇧🇷",format:"(##) #####-####"},{code:"MX",name:"Mexico",dialCode:"+52",flag:"🇲🇽",format:"### ### ####"},{code:"AR",name:"Argentina",dialCode:"+54",flag:"🇦🇷",format:"### ###-####"},{code:"RU",name:"Russia",dialCode:"+7",flag:"🇷🇺",format:"### ###-##-##"},{code:"ZA",name:"South Africa",dialCode:"+27",flag:"🇿🇦",format:"## ### ####"},{code:"EG",name:"Egypt",dialCode:"+20",flag:"🇪🇬",format:"### ### ####"},{code:"NG",name:"Nigeria",dialCode:"+234",flag:"🇳🇬",format:"### ### ####"},{code:"SG",name:"Singapore",dialCode:"+65",flag:"🇸🇬",format:"#### ####"}];function $(o,l){const a=[],r=o.replace(/[^\d+]/g,"");let t=r,h=r;r.startsWith("+")?(h=r,r.startsWith(l.dialCode)?t=r.substring(l.dialCode.length):a.push("Phone number does not match selected country")):(h=l.dialCode+r,t=r),t.length<7?a.push("Phone number is too short"):t.length>15&&a.push("Phone number is too long");let g=t;return l.format&&t.length>=7&&(g=ie(t,l.format)),{isValid:a.length===0,e164:h,national:t,formatted:`${l.dialCode} ${g}`,errors:a}}function ie(o,l){let a=l,r=0;for(let t=0;t<l.length&&r<o.length;t++)l[t]==="#"&&(a=a.substring(0,t)+o[r]+a.substring(t+1),r++);return a.substring(0,a.lastIndexOf("#")+1)}function z(o){const l=o.replace(/[^\d+]/g,"");if(!l.startsWith("+"))return null;const a=[...v].sort((r,t)=>t.dialCode.length-r.dialCode.length);for(const r of a)if(l.startsWith(r.dialCode))return r;return null}function ce({name:o="phone",label:l="Phone Number",placeholder:a="Enter your phone number",value:r="",onChange:t,onBlur:h,onFocus:g,defaultCountry:W="US",preferredCountries:j=["US","CA","GB"],allowedCountries:M=[],blockedCountries:N=[],required:G=!1,disabled:P=!1,validateFormat:k=!0,size:F="md",variant:I="bordered",className:E="",autoFocus:_=!1,autoComplete:D="tel",error:C,description:T,showVerificationStatus:R=!1,isVerified:B=!1,onRequestVerification:S,endContent:y}){const{components:J,organizationSettings:A}=ae.useConfig(),i=se.useFormField(o),K=J.PhoneField;if(K)return n.jsx(K,{name:o,label:l,placeholder:a,value:r,onChange:t,onBlur:h,onFocus:g,defaultCountry:W,preferredCountries:j,allowedCountries:M,blockedCountries:N,required:G,disabled:P,validateFormat:k,size:F,variant:I,className:E,autoFocus:_,autoComplete:D,error:C,description:T,showVerificationStatus:R,isVerified:B,onRequestVerification:S,endContent:y});const[O,X]=d.default.useState(r),[p,L]=d.default.useState(()=>{if(r){const e=z(r);if(e)return e}return v.find(e=>e.code===W)||v[0]}),f=t?r:O,x=d.default.useMemo(()=>{const e=A?.phoneRestrictions?.allowedCountries;return e&&e.length>0?e:M},[M,A]),q=d.default.useMemo(()=>{const e=A?.phoneRestrictions?.blockedCountries;return e&&e.length>0?[...N,...e]:N},[N,A]),b=d.default.useMemo(()=>{let e=v;x.length>0&&(e=e.filter(m=>x.includes(m.code))),q.length>0&&(e=e.filter(m=>!q.includes(m.code)));const u=e.filter(m=>j.includes(m.code)),c=e.filter(m=>!j.includes(m.code));return[...u,...c]},[x,q,j]),s=d.default.useMemo(()=>!f||!k?null:$(f,p),[f,p,k]),U=d.default.useMemo(()=>{const e=[];return C&&(Array.isArray(C)?e.push(...C):e.push(C)),i.error&&(Array.isArray(i.error)?e.push(...i.error):e.push(i.error)),s&&!s.isValid&&e.push(...s.errors),e.length>0?e:null},[C,i.error,s]),Z=d.default.useCallback(e=>{const u=z(e);if(u&&b.includes(u)&&L(u),t&&s)t(s.e164,s.formatted);else if(t){const c=e.replace(/[^\d+]/g,""),m=c.startsWith("+")?c:p.dialCode+c.replace(/^\d/,"");t(m,e)}else X(e);i.clearError&&i.clearError()},[t,s,i,p,b]),w=d.default.useCallback(e=>{const u=b.find(c=>c.code===e);if(u&&(L(u),f)){const c=$(f,u);t&&t(c.e164,c.formatted)}},[b,f,t]),H=d.default.useCallback(()=>{i.setTouched&&i.setTouched(!0),h?.()},[i,h]),Q=d.default.useCallback(()=>{g?.()},[g]),V=d.default.useMemo(()=>!R||y?null:B?n.jsx(re.Chip,{size:"sm",color:"success",variant:"flat",startContent:n.jsx("svg",{className:"w-3 h-3",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:n.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})}),children:"Verified"}):f&&s?.isValid&&S?n.jsx(ee.Button,{size:"sm",variant:"flat",color:"primary",onPress:S,children:"Send SMS"}):null,[R,y,B,f,s,S]),Y=n.jsx(oe.Select,{value:p.code,onChange:e=>w(e.target.value),className:"min-w-32",size:F,variant:I,isDisabled:P,placeholder:"Country",options:b.map(e=>({label:e.name,value:e.code}))});return n.jsxs("div",{className:`space-y-2 ${E}`,children:[n.jsxs("div",{className:"flex gap-2",children:[n.jsx("div",{className:"shrink-0",children:Y}),n.jsx("div",{className:"flex-1",children:n.jsx(te.Input,{name:o,label:l,placeholder:a,value:f,onValueChange:Z,onBlur:H,onFocus:Q,type:"tel",isRequired:G,isDisabled:P,size:F,variant:I,autoFocus:_,autoComplete:D,description:T,isInvalid:!!U,errorMessage:"",endContent:y||V})})]}),U&&n.jsx(ne.FieldError,{error:U,fieldName:o}),s&&s.isValid&&n.jsxs("div",{className:"text-xs text-default-500",children:[n.jsx("span",{className:"font-medium",children:"Format:"})," ",s.formatted]}),x.length>0&&n.jsxs("div",{className:"text-xs text-default-500",children:[n.jsx("span",{className:"font-medium",children:"Allowed countries:"})," ",x.join(", ")]})]})}exports.PhoneField=ce;
//# sourceMappingURL=phone-field.cjs.map