@snowball-tech/fractal
Version:
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
3 lines • 5.92 kB
JavaScript
'use client';
import{a as ae}from"./chunk-A5PA34K3.js";import{a as le}from"./chunk-UFSJFJ5W.js";import{a as ie}from"./chunk-6AFEUXVB.js";import{a as r,b as T,c as k,d as B}from"./chunk-5YED4B7W.js";import{a as A}from"./chunk-FA4DQLON.js";import{c as se}from"./chunk-LYTTDLE2.js";import{a as I}from"./chunk-AOLTZ2WJ.js";import{b as t}from"./chunk-CMFNILWJ.js";import{a as f,b as N}from"./chunk-XYM7TA65.js";import{Label as ke}from"@radix-ui/react-label";import{UilCheckCircle as Le,UilExclamationCircle as Oe,UilSearchAlt as De}from"@tooni/iconscout-unicons-react";import ce,{getExampleNumber as Me}from"libphonenumber-js/max";import Ue from"libphonenumber-js/mobile/examples";import{forwardRef as Ae,useCallback as Be,useEffect as qe,useId as He,useImperativeHandle as Je,useRef as q,useState as m}from"react";import o from"lodash/fp/isEmpty";import H from"lodash/fp/isError";import ue from"lodash/fp/isFunction";import Ve from"lodash/fp/isNil";import pe from"lodash/fp/isString";import J from"lodash/fp/omit";import{Fragment as Ge,jsx as a,jsxs as h}from"react/jsx-runtime";var fe=Ae(({autoFocus:me=!1,defaultValue:R,description:V,disabled:d=!1,emptyPrefixLabel:de="-",error:l,fullWidth:G=!1,id:_e,label:y,labelElement:ye,name:K,onChange:w,placeholder:C,prefixSelect:i={},readOnly:x=!1,required:P=!1,searchPlaceholder:$e,success:v,updateOnInvalid:he=!0,value:E,withPrefix:p=!0,...W},Ce)=>{N();let X=He(),g=(_e??X)||X,[xe,ge]=m(null),Y=q(null),j=q(null),S=q(null);Je(Ce,()=>({get phone(){return Y?.current??null},get prefix(){return j?.current??null},get searchPrefixInput(){return S?.current??null}}));let[z,Q]=m(!1),[be,Ne]=m(""),[L,Ie]=m(B),[c,Re]=m(null),[O,F]=m(""),[Z,ee]=m(null),[we,te]=m(C),b=Be(e=>{if(Re(e),o(e.countryCode))return;let n=k?.[e.countryCode]??null;ee(n);let{countryCode:s}=e;o(s)?te(C):te(Me(s,Ue)?.formatNational()??C)},[C]);qe(()=>{if(!p){F(E?.number??R?.number??"");return}if(o(E)&&o(R)){let{locale:s="fr-FR"}=Intl.DateTimeFormat().resolvedOptions(),u=new Intl.Locale(s)?.region??"FR";if(!o(u)){let _=k?.[u]??null;o(_)||(o(_.prefix)||b({countryCode:u,prefix:_.prefix}),ee(_))}return}let e=E?.number??R?.number??"",n=ce(e,T);if(o(n)){o(c?.countryCode)&&(b({countryCode:T,prefix:k?.[T]?.prefix??""}),F(e.replace("+","")));return}b({countryCode:n.country??c?.countryCode,prefix:n.countryCallingCode}),F(n.nationalNumber)},[b,R,E,c?.countryCode,p]);let Pe=H(l)?l.message:l,D=l!==!0&&!!Pe,M=v!==!0&&!!v,$=D||l===!0||H(l),U=(M||v===!0)&&!$,re=(e,n)=>{if(!p){ue(w)&&w({number:n});return}if(o(e))return;let s=`+${e.prefix}${n.replaceAll(/^\+/g,"")}`,u=ce(s),_=u?.isValid()??!1;ue(w)&&(_||he)&&w({countryCode:e.countryCode,number:u?.number??s},_)},ve=e=>{b(e),o(O)||re(e,O)},Ee=e=>{F(e),(!p||!o(c))&&re(c,e)},ne=(e,n=!0)=>{Ne(e),Ie(B.filter(({countryName:s})=>s.search(new RegExp(`.*${e}.*`,"gi"))>=0)),n&&Q(!0)},Se=()=>{z&&(S?.current&&S.current.focus(),Q(!1))},Fe=!d&&!x,Te=!Ve(xe?.closest(`.${t}-dialog__content`)),oe=pe(y)?y:se(y);return h("div",{ref:e=>ge(e),className:N(`${t}-${r}`,"flex max-w-full flex-col gap-1",`${t}-${r}--${Fe?"":"not-"}-writable`,d?`${t}-${r}--disabled`:"",x&&!d?"cursor-default":"",$?`${t}-${r}--with-error`:"",x?`${t}-${r}--readonly cursor-default`:"",P?`${t}-${r}--required`:"",U?`${t}-${r}--with-success`:"",W.className),children:[y?a(ke,{asChild:!0,className:f(`${t}-${r}__label`,d?`${t}-${r}__label--disabled cursor-default`:"cursor-pointer",P?`${t}-${r}__label--required after:text-feedback-danger-50 after:content-required`:""),htmlFor:`${g}-number`,children:a(I,{element:ye||(pe(y)?"label":"div"),children:y})}):!1,h("div",{className:f(`${t}-${r}__fields`,G?"w-full":"w-fit","flex max-w-full gap-1"),children:[p&&a(ae,{id:`${g}-prefix`,ref:j,className:N(`${t}-${r}__fields__phone-prefix`,"w-[110px] min-w-[110px] max-w-[110px]",i.className),disabled:d||i.disabled,displayedValue:i.displayedValue??h("span",{children:[Z?.flag,"\xA0\xA0",Z?.countryCode]}),dropdown:{className:N(`${t}-${r}__fields__phone-prefix__dropdown`,"max-w-full !pt-8 !w-fit",Te?"mb-1":"",i.dropdown?.className),...J(["className"],i.dropdown)},name:`${K||g}-prefix`,readOnly:x||i.readOnly,required:P,value:JSON.stringify(c),onClose:()=>{ne("",!1),i.onClose?.()},onSelect:e=>{ve(JSON.parse(e)),i.onSelect?.(e)},...J(["id","children","defaultValue","className","disabled","displayedValue","readOnly","dropdown","required","value","onClose","onSelect"],i),children:h(Ge,{children:[a(A,{ref:S,className:f(`${t}-${r}__fields__phone-prefix__dropdown__search`,"fixed top-2 !w-[calc(100%-theme(spacing.3))]"),fullWidth:!0,...C===void 0?{}:{placeholder:$e},prefix:a(De,{}),selectOnFocus:!z,type:"search",value:be,onBlur:Se,onChange:(e,n)=>ne(n,!0)}),o(L)&&a(le,{children:de}),!o(L)&&L.map(({countryCode:e,countryName:n,flag:s,prefix:u})=>h(ie,{value:JSON.stringify({countryCode:e,prefix:u}),children:[s," ",n," (+",u,")"]},e))]})}),a(A,{id:`${g}-number`,ref:Y,"aria-label":oe,autoFocus:me&&!p,className:f(`${t}-${r}__fields__phone-number`,"!w-[calc(12rem+theme(spacing.2)+theme(spacing.2)]",p&&!o(c)?`${t}-${r}__fields__phone-number--with-prefix-helper [&_input]:!pl-6`:""),disabled:d,error:$,fullWidth:G,name:`${K||g}-number`,placeholder:we??"",prefix:p&&!o(c)?h(I,{className:f(`${t}-${r}__fields__phone-number__prefix-helper`,d?"text-disabled":"text-dark","w-[36px] text-right"),element:"span",children:["+",c.prefix]}):void 0,readOnly:x,required:P,success:U,suffix:$?a(Oe,{}):U?a(Le,{}):void 0,title:oe,type:"tel",value:O,onChange:(e,n)=>Ee(n),...J(["className"],W)})]}),V&&!D&&!M?a(I,{className:f(`${t}-${r}__description`,"cursor-default text-dark"),element:"div",variant:"caption-median",children:V}):!1,D||M?a(I,{className:f(`${t}-${r}__message ${t}-${r}__message--${$?"error":"success"}`,"cursor-default text-dark"),element:"div",variant:"caption-median",children:$?H(l)?l.message:l:v}):!1]})});fe.displayName="InputPhone";var ft=fe;export{fe as a,ft as b};
//# sourceMappingURL=chunk-7ET4ADRM.js.map