@adam-milo/ui 1.0.136 β†’ 1.0.138

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index15.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom"),r=require("./index67.cjs"),n=require("@adam-milo/icons"),o=require("./index69.cjs"),s=require("./index79.cjs"),i=require("./index81.cjs"),l={name:"United States",dialCode:"+1",flag:"πŸ‡ΊπŸ‡Έ",mask:o.defaultPhoneMask},d=t.forwardRef(({label:d,error:c,helperText:u,fullWidth:p=!0,value:h="",onChange:y,countryCode:f,initialCountryCode:m,onCountryChange:g,countries:v,enableFormatting:w=!0,onValidationChange:x,disabled:S,required:b,placeholder:$,id:C,"data-cy":k,"data-testid":D,className:N,onFocus:j,onBlur:E,...I},L)=>{const[M,P]=t.useState(!1),[q,A]=t.useState(!1),[F,T]=t.useState(0),[W,_]=t.useState({top:0,left:0,width:0}),[R,B]=t.useState(()=>f??m??"US"),O=f??R,V=t.useId(),z=C||V,G=`${z}-error`,K=`${z}-helper`,U=`${z}-listbox`,X=t.useRef(null),H=t.useRef(null),J=t.useRef(null),Q=t.useRef(null),Y=k||"phone-input",Z=D||"phone-input",ee=v.find(e=>e.code===O)||v[0]||l,te=ee.mask??o.defaultPhoneMask,ae=$??te.placeholder,re=d&&b&&!d.includes("*")?`${d}*`:d,ne=ee.dialCode.replace(/\D/g,"").length,oe=o.getPhoneDigits(h),se=h.startsWith("+")?oe.slice(ne):oe,ie=w?o.formatWithMask(se,te):se;t.useLayoutEffect(()=>{if(!M||!H.current)return;const e=()=>{if(H.current){const e=H.current.getBoundingClientRect();_({top:e.bottom+8,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[M]),t.useEffect(()=>{const e=e=>{const t=e.target,a=X.current?.contains(t),r=J.current?.contains(t);a||r||P(!1)};return M&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[M]),t.useEffect(()=>{if(!M)return;const e=J.current;if(!e)return;const t=e=>e.stopPropagation(),a={passive:!1};return e.addEventListener("touchmove",t,a),e.addEventListener("wheel",t,a),()=>{e.removeEventListener("touchmove",t),e.removeEventListener("wheel",t)}},[M]);const le=t.useCallback(e=>{void 0===f&&B(e.code),g?.(e);const t=o.getPhoneDigits(h),a=ee.dialCode.replace(/\D/g,"").length,r=h.startsWith("+")?t.slice(a):t;y?.(`${e.dialCode}${r}`),P(!1),setTimeout(()=>{const e=X.current?.querySelector("input");e?.focus()},0)},[f,g,y,h,ee.dialCode]),de=t.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),T(e=>Math.min(e+1,v.length-1));break;case"ArrowUp":e.preventDefault(),T(e=>Math.max(e-1,0));break;case"Enter":case" ":e.preventDefault(),le(v[F]);break;case"Escape":e.preventDefault(),P(!1),Q.current?.focus();break;case"Tab":P(!1)}},[v,F,le]),ce=S?"disabled":c?"error":q||M?"focus":"idle";return e.jsxs("div",{ref:X,className:r.cn(i.wrapperStyles,p&&i.wrapperFullWidthStyles),"data-cy":`${Y}-wrapper`,"data-testid":`${Z}-wrapper`,children:[d&&e.jsx("label",{htmlFor:z,className:i.labelStyles,"data-cy":`${Y}-label`,"data-testid":`${Z}-label`,children:re}),e.jsxs("div",{ref:H,className:r.cn(i.containerBaseStyles,p&&i.containerFullWidthStyles,"focus"===ce&&i.containerFocusStyles,"error"===ce&&i.containerErrorStyles,"disabled"===ce&&i.containerDisabledStyles,"idle"===ce&&i.containerIdleStyles),"data-state":ce,"data-cy":`${Y}-container`,"data-testid":`${Z}-container`,children:[e.jsxs("button",{ref:Q,type:"button",className:i.triggerStyles,onClick:()=>!S&&P(!M),onKeyDown:e=>{if("Enter"===e.key||" "===e.key||"ArrowDown"===e.key){e.preventDefault(),P(!0);const t=v.findIndex(e=>e.code===O);T(-1===t?0:t)}},disabled:S,"aria-haspopup":"listbox","aria-expanded":M,"aria-controls":U,"aria-label":`Select country. Current: ${ee.name}`,"data-cy":`${Y}-country-trigger`,"data-testid":`${Z}-country-trigger`,children:[e.jsx(s.CountryFlag,{flag:ee.flag,className:i.flagStyles,"data-cy":`${Y}-flag`,"data-testid":`${Z}-flag`}),e.jsx(n.Icon,{name:"ChevronDownIcon",size:"sm",color:q||M?"clickable":"text",decorative:!0,"data-cy":`${Y}-chevron`})]}),e.jsx("span",{className:i.dialCodeStyles,"data-cy":`${Y}-dial-code`,"data-testid":`${Z}-dial-code`,children:ee.dialCode}),e.jsx("input",{ref:L,id:z,type:"tel",inputMode:"numeric",value:ie,onChange:e=>{const t=e.target.value,a=(w?o.getPhoneDigits(t):t.replace(/[^0-9]/g,"")).slice(0,o.E164_MAX_NATIONAL_DIGITS);y?.(`${ee.dialCode}${a}`),x?.(a.length>0)},onFocus:e=>{A(!0),j?.(e)},onBlur:e=>{A(!1),E?.(e)},placeholder:ae,disabled:S,required:b,className:r.cn(i.inputStyles,N),"aria-invalid":c?"true":"false","aria-required":b?"true":void 0,"aria-describedby":c?G:u?K:void 0,"data-cy":Y,"data-testid":Z,...I})]}),M&&a.createPortal(e.jsx("div",{ref:J,id:U,role:"listbox","aria-label":"Select country",className:i.dropdownStyles,style:{top:W.top,left:W.left,width:W.width,minWidth:"20rem"},tabIndex:-1,onKeyDown:de,"data-cy":`${Y}-dropdown`,"data-testid":`${Z}-dropdown`,children:e.jsx("div",{className:i.dropdownViewportStyles,children:v.map((t,a)=>e.jsxs("div",{role:"option","aria-selected":t.code===O,className:r.cn(i.optionBaseStyles,a===F&&i.optionHighlightedStyles,t.code===O&&i.optionSelectedStyles),onClick:()=>le(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),le(t))},onMouseEnter:()=>T(a),tabIndex:a===F?0:-1,"data-cy":`${Y}-option-${t.code.toLowerCase()}`,"data-testid":`${Z}-option-${t.code.toLowerCase()}`,children:[e.jsx(s.CountryFlag,{flag:t.flag,className:i.optionFlagStyles}),e.jsx("span",{className:i.optionNameStyles,children:t.name}),e.jsx("span",{className:i.optionDialCodeStyles,children:t.dialCode})]},t.code))})}),document.body),c&&e.jsx("span",{id:G,className:i.errorStyles,role:"alert","data-cy":`${Y}-error`,"data-testid":`${Z}-error`,children:c}),u&&!c&&e.jsx("span",{id:K,className:i.helperStyles,"data-cy":`${Y}-helper`,"data-testid":`${Z}-helper`,children:u})]})});d.displayName="PhoneInput",exports.E164_MAX_NATIONAL_DIGITS=o.E164_MAX_NATIONAL_DIGITS,exports.defaultPhoneMask=o.defaultPhoneMask,exports.formatWithMask=o.formatWithMask,exports.getPhoneDigits=o.getPhoneDigits,exports.isValidPhoneLength=o.isValidPhoneLength,exports.PhoneInput=d;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("react-dom"),r=require("./index67.cjs"),o=require("@adam-milo/icons"),s=require("./index69.cjs"),n=require("./index79.cjs"),l=require("./index81.cjs"),i={name:"United States",dialCode:"+1",flag:"πŸ‡ΊπŸ‡Έ",mask:s.defaultPhoneMask},c=(e,t)=>{const a=t.trim().toLocaleLowerCase();if(!a)return!0;const r=a.replace(/\D/g,""),o=e.dialCode.replace(/\D/g,"");return e.name.toLocaleLowerCase().includes(a)||e.code.toLocaleLowerCase().includes(a)||e.dialCode.toLocaleLowerCase().includes(a)||r.length>0&&o.includes(r)},d=t.forwardRef(({label:d,error:u,helperText:h,fullWidth:p=!0,value:y="",onChange:f,countryCode:m,initialCountryCode:g,onCountryChange:x,countries:S,countrySearchPlaceholder:v="Search countries",countrySearchNoResultsText:w="No countries found",enableFormatting:b=!0,maxNationalDigits:$=s.E164_MAX_NATIONAL_DIGITS,onValidationChange:C,disabled:N,required:I,placeholder:L,id:j,"data-cy":D,"data-testid":k,className:E,onFocus:M,onBlur:A,...P},T)=>{const[_,q]=t.useState(!1),[F,R]=t.useState(!1),[W,G]=t.useState(0),[O,z]=t.useState(""),[B,V]=t.useState({top:0,left:0,width:0}),[X,K]=t.useState(()=>m??g??"US"),U=m??X,H=t.useId(),J=j||H,Q=`${J}-error`,Y=`${J}-helper`,Z=`${J}-listbox`,ee=t.useRef(null),te=t.useRef(null),ae=t.useRef(null),re=t.useRef(null),oe=t.useRef(null),se=t.useRef([]),ne=D||"phone-input",le=k||"phone-input",ie=S.find(e=>e.code===U)||S[0]||i,ce=t.useMemo(()=>S.filter(e=>c(e,O)),[S,O]),de=ie.mask??s.defaultPhoneMask,ue=Number.isFinite($)?Math.min(Math.max(Math.floor($),1),s.E164_MAX_NATIONAL_DIGITS):s.E164_MAX_NATIONAL_DIGITS,he=L??de.placeholder,pe=d&&I&&!d.includes("*")?`${d}*`:d,ye=ie.dialCode.replace(/\D/g,"").length,fe=s.getPhoneDigits(y),me=y.startsWith("+")?fe.slice(ye):fe,ge=b?s.formatWithMask(me,de):me,xe=t.useCallback(()=>{if(N)return;z("");const e=S.findIndex(e=>e.code===U);G(0===S.length?-1:Math.max(0,e)),q(!0)},[S,U,N]),Se=t.useCallback(()=>{q(!1),z(""),G(0)},[]);t.useEffect(()=>{_&&oe.current?.focus()},[_]),t.useEffect(()=>{!_||W<0||se.current[W]?.scrollIntoView?.({block:"nearest"})},[W,_]),t.useLayoutEffect(()=>{if(!_||!te.current)return;const e=()=>{if(te.current){const e=te.current.getBoundingClientRect();V({top:e.bottom+8,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[_]),t.useEffect(()=>{const e=e=>{const t=e.target,a=ee.current?.contains(t),r=ae.current?.contains(t);a||r||Se()};return _&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[Se,_]),t.useEffect(()=>{if(!_)return;const e=ae.current;if(!e)return;const t=e=>e.stopPropagation(),a={passive:!1};return e.addEventListener("touchmove",t,a),e.addEventListener("wheel",t,a),()=>{e.removeEventListener("touchmove",t),e.removeEventListener("wheel",t)}},[_]);const ve=t.useCallback(e=>{void 0===m&&K(e.code),x?.(e);const t=s.getPhoneDigits(y),a=ie.dialCode.replace(/\D/g,"").length,r=y.startsWith("+")?t.slice(a):t;f?.(`${e.dialCode}${r}`),Se(),setTimeout(()=>{const e=ee.current?.querySelector("input");e?.focus()},0)},[Se,m,x,f,y,ie.dialCode]),we=t.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),G(e=>0===ce.length?-1:Math.min(e+1,ce.length-1));break;case"ArrowUp":e.preventDefault(),G(e=>0===ce.length?-1:Math.max(e-1,0));break;case"Enter":W>=0&&ce[W]&&(e.preventDefault(),ve(ce[W]));break;case"Escape":e.preventDefault(),Se(),re.current?.focus();break;case"Tab":Se()}},[Se,ce,W,ve]),be=N?"disabled":u?"error":F||_?"focus":"idle";return e.jsxs("div",{ref:ee,className:r.cn(l.wrapperStyles,p&&l.wrapperFullWidthStyles),"data-cy":`${ne}-wrapper`,"data-testid":`${le}-wrapper`,children:[d&&e.jsx("label",{htmlFor:J,className:l.labelStyles,"data-cy":`${ne}-label`,"data-testid":`${le}-label`,children:pe}),e.jsxs("div",{ref:te,className:r.cn(l.containerBaseStyles,p&&l.containerFullWidthStyles,"focus"===be&&l.containerFocusStyles,"error"===be&&l.containerErrorStyles,"disabled"===be&&l.containerDisabledStyles,"idle"===be&&l.containerIdleStyles),"data-state":be,"data-cy":`${ne}-container`,"data-testid":`${le}-container`,children:[e.jsxs("button",{ref:re,type:"button",className:l.triggerStyles,onClick:()=>_?Se():xe(),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),xe())},disabled:N,"aria-haspopup":"listbox","aria-expanded":_,"aria-controls":Z,"aria-label":`Select country. Current: ${ie.name}`,"data-cy":`${ne}-country-trigger`,"data-testid":`${le}-country-trigger`,children:[e.jsx(n.CountryFlag,{flag:ie.flag,className:l.flagStyles,"data-cy":`${ne}-flag`,"data-testid":`${le}-flag`}),e.jsx(o.Icon,{name:"ChevronDownIcon",size:"sm",color:F||_?"clickable":"text",decorative:!0,"data-cy":`${ne}-chevron`})]}),e.jsx("span",{className:l.dialCodeStyles,"data-cy":`${ne}-dial-code`,"data-testid":`${le}-dial-code`,children:ie.dialCode}),e.jsx("input",{ref:T,id:J,type:"tel",inputMode:"numeric",value:ge,onChange:e=>{const t=e.target.value,a=(b?s.getPhoneDigits(t):t.replace(/[^0-9]/g,"")).slice(0,ue);f?.(`${ie.dialCode}${a}`),C?.(a.length>0)},onFocus:e=>{R(!0),M?.(e)},onBlur:e=>{R(!1),A?.(e)},placeholder:he,disabled:N,required:I,className:r.cn(l.inputStyles,E),"aria-invalid":u?"true":"false","aria-required":I?"true":void 0,"aria-describedby":u?Q:h?Y:void 0,"data-cy":ne,"data-testid":le,...P})]}),_&&a.createPortal(e.jsxs("div",{ref:ae,className:l.dropdownStyles,style:{top:B.top,left:B.left,width:B.width,minWidth:"20rem"},"data-cy":`${ne}-dropdown`,"data-testid":`${le}-dropdown`,children:[e.jsxs("div",{className:l.searchWrapperStyles,children:[e.jsx("span",{className:l.searchIconStyles,children:e.jsx(o.Icon,{name:"MagnifyingGlassIcon",size:"sm",color:"icon-secondary",decorative:!0})}),e.jsx("input",{ref:oe,type:"text",role:"combobox",className:l.searchInputStyles,value:O,onChange:e=>{const t=e.target.value;z(t);const a=S.filter(e=>c(e,t));G(a.length>0?0:-1)},onKeyDown:we,placeholder:v,"aria-label":v,"aria-autocomplete":"list","aria-expanded":"true","aria-controls":Z,"aria-activedescendant":W>=0&&ce[W]?`${Z}-option-${ce[W].code.toLowerCase()}`:void 0,"data-cy":`${ne}-country-search`,"data-testid":`${le}-country-search`}),O&&e.jsx("button",{type:"button",className:l.clearSearchStyles,onClick:()=>{z(""),G(S.length>0?0:-1),oe.current?.focus()},"aria-label":"Clear search","data-cy":`${ne}-country-search-clear`,"data-testid":`${le}-country-search-clear`,children:e.jsx(o.Icon,{name:"Cross2Icon",size:"sm",color:"icon-secondary",decorative:!0})})]}),e.jsx("div",{id:Z,role:"listbox","aria-label":"Select country",className:l.dropdownViewportStyles,"data-cy":`${ne}-country-list`,"data-testid":`${le}-country-list`,children:0===ce.length?e.jsx("div",{role:"status","aria-live":"polite",className:l.noResultsStyles,"data-cy":`${ne}-country-no-results`,"data-testid":`${le}-country-no-results`,children:w}):ce.map((t,a)=>e.jsxs("div",{ref:e=>{se.current[a]=e},id:`${Z}-option-${t.code.toLowerCase()}`,role:"option",tabIndex:-1,"aria-selected":t.code===U,className:r.cn(l.optionBaseStyles,a===W&&l.optionHighlightedStyles,t.code===U&&l.optionSelectedStyles),onClick:()=>ve(t),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),ve(t))},onMouseEnter:()=>G(a),"data-cy":`${ne}-option-${t.code.toLowerCase()}`,"data-testid":`${le}-option-${t.code.toLowerCase()}`,children:[e.jsx(n.CountryFlag,{flag:t.flag,className:l.optionFlagStyles}),e.jsx("span",{className:l.optionNameStyles,children:t.name}),e.jsx("span",{className:l.optionDialCodeStyles,children:t.dialCode})]},t.code))})]}),document.body),u&&e.jsx("span",{id:Q,className:l.errorStyles,role:"alert","data-cy":`${ne}-error`,"data-testid":`${le}-error`,children:u}),h&&!u&&e.jsx("span",{id:Y,className:l.helperStyles,"data-cy":`${ne}-helper`,"data-testid":`${le}-helper`,children:h})]})});d.displayName="PhoneInput",exports.E164_MAX_NATIONAL_DIGITS=s.E164_MAX_NATIONAL_DIGITS,exports.defaultPhoneMask=s.defaultPhoneMask,exports.formatWithMask=s.formatWithMask,exports.getPhoneDigits=s.getPhoneDigits,exports.isValidPhoneLength=s.isValidPhoneLength,exports.PhoneInput=d;
package/dist/index15.js CHANGED
@@ -1,12 +1,16 @@
1
- import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useId as n,useRef as o,useLayoutEffect as d,useEffect as i,useCallback as l}from"react";import{createPortal as s}from"react-dom";import{cn as c}from"./index67.js";import{Icon as u}from"@adam-milo/icons";import{defaultPhoneMask as m,getPhoneDigits as p,formatWithMask as h,E164_MAX_NATIONAL_DIGITS as f}from"./index69.js";import{isValidPhoneLength as v}from"./index69.js";import{CountryFlag as y}from"./index79.js";import{labelStyles as w,triggerStyles as $,flagStyles as b,dialCodeStyles as g,dropdownStyles as C,dropdownViewportStyles as x,optionFlagStyles as N,optionNameStyles as k,optionDialCodeStyles as E,optionSelectedStyles as D,optionHighlightedStyles as L,optionBaseStyles as j,errorStyles as I,helperStyles as M,inputStyles as S,containerIdleStyles as q,containerDisabledStyles as F,containerErrorStyles as W,containerFocusStyles as z,containerFullWidthStyles as A,containerBaseStyles as B,wrapperFullWidthStyles as K,wrapperStyles as T}from"./index81.js";const U={name:"United States",dialCode:"+1",flag:"πŸ‡ΊπŸ‡Έ",mask:m},P=a(({label:a,error:v,helperText:P,fullWidth:R=!0,value:V="",onChange:G,countryCode:H,initialCountryCode:J,onCountryChange:O,countries:Q,enableFormatting:X=!0,onValidationChange:Y,disabled:Z,required:_,placeholder:ee,id:te,"data-cy":ae,"data-testid":re,className:ne,onFocus:oe,onBlur:de,...ie},le)=>{const[se,ce]=r(!1),[ue,me]=r(!1),[pe,he]=r(0),[fe,ve]=r({top:0,left:0,width:0}),[ye,we]=r(()=>H??J??"US"),$e=H??ye,be=n(),ge=te||be,Ce=`${ge}-error`,xe=`${ge}-helper`,Ne=`${ge}-listbox`,ke=o(null),Ee=o(null),De=o(null),Le=o(null),je=ae||"phone-input",Ie=re||"phone-input",Me=Q.find(e=>e.code===$e)||Q[0]||U,Se=Me.mask??m,qe=ee??Se.placeholder,Fe=a&&_&&!a.includes("*")?`${a}*`:a,We=Me.dialCode.replace(/\D/g,"").length,ze=p(V),Ae=V.startsWith("+")?ze.slice(We):ze,Be=X?h(Ae,Se):Ae;d(()=>{if(!se||!Ee.current)return;const e=()=>{if(Ee.current){const e=Ee.current.getBoundingClientRect();ve({top:e.bottom+8,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[se]),i(()=>{const e=e=>{const t=e.target,a=ke.current?.contains(t),r=De.current?.contains(t);a||r||ce(!1)};return se&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[se]),i(()=>{if(!se)return;const e=De.current;if(!e)return;const t=e=>e.stopPropagation(),a={passive:!1};return e.addEventListener("touchmove",t,a),e.addEventListener("wheel",t,a),()=>{e.removeEventListener("touchmove",t),e.removeEventListener("wheel",t)}},[se]);const Ke=l(e=>{void 0===H&&we(e.code),O?.(e);const t=p(V),a=Me.dialCode.replace(/\D/g,"").length,r=V.startsWith("+")?t.slice(a):t;G?.(`${e.dialCode}${r}`),ce(!1),setTimeout(()=>{const e=ke.current?.querySelector("input");e?.focus()},0)},[H,O,G,V,Me.dialCode]),Te=l(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),he(e=>Math.min(e+1,Q.length-1));break;case"ArrowUp":e.preventDefault(),he(e=>Math.max(e-1,0));break;case"Enter":case" ":e.preventDefault(),Ke(Q[pe]);break;case"Escape":e.preventDefault(),ce(!1),Le.current?.focus();break;case"Tab":ce(!1)}},[Q,pe,Ke]),Ue=Z?"disabled":v?"error":ue||se?"focus":"idle";/* @__PURE__ */
2
- return e("div",{ref:ke,className:c(T,R&&K),"data-cy":`${je}-wrapper`,"data-testid":`${Ie}-wrapper`,children:[a&&/* @__PURE__ */t("label",{htmlFor:ge,className:w,"data-cy":`${je}-label`,"data-testid":`${Ie}-label`,children:Fe}),
3
- /* @__PURE__ */e("div",{ref:Ee,className:c(B,R&&A,"focus"===Ue&&z,"error"===Ue&&W,"disabled"===Ue&&F,"idle"===Ue&&q),"data-state":Ue,"data-cy":`${je}-container`,"data-testid":`${Ie}-container`,children:[
4
- /* @__PURE__ */e("button",{ref:Le,type:"button",className:$,onClick:()=>!Z&&ce(!se),onKeyDown:e=>{if("Enter"===e.key||" "===e.key||"ArrowDown"===e.key){e.preventDefault(),ce(!0);const t=Q.findIndex(e=>e.code===$e);he(-1===t?0:t)}},disabled:Z,"aria-haspopup":"listbox","aria-expanded":se,"aria-controls":Ne,"aria-label":`Select country. Current: ${Me.name}`,"data-cy":`${je}-country-trigger`,"data-testid":`${Ie}-country-trigger`,children:[
5
- /* @__PURE__ */t(y,{flag:Me.flag,className:b,"data-cy":`${je}-flag`,"data-testid":`${Ie}-flag`}),
6
- /* @__PURE__ */t(u,{name:"ChevronDownIcon",size:"sm",color:ue||se?"clickable":"text",decorative:!0,"data-cy":`${je}-chevron`})]}),
7
- /* @__PURE__ */t("span",{className:g,"data-cy":`${je}-dial-code`,"data-testid":`${Ie}-dial-code`,children:Me.dialCode}),
8
- /* @__PURE__ */t("input",{ref:le,id:ge,type:"tel",inputMode:"numeric",value:Be,onChange:e=>{const t=e.target.value,a=(X?p(t):t.replace(/[^0-9]/g,"")).slice(0,f);G?.(`${Me.dialCode}${a}`),Y?.(a.length>0)},onFocus:e=>{me(!0),oe?.(e)},onBlur:e=>{me(!1),de?.(e)},placeholder:qe,disabled:Z,required:_,className:c(S,ne),"aria-invalid":v?"true":"false","aria-required":_?"true":void 0,"aria-describedby":v?Ce:P?xe:void 0,"data-cy":je,"data-testid":Ie,...ie})]}),se&&s(
9
- /* @__PURE__ */t("div",{ref:De,id:Ne,role:"listbox","aria-label":"Select country",className:C,style:{top:fe.top,left:fe.left,width:fe.width,minWidth:"20rem"},tabIndex:-1,onKeyDown:Te,"data-cy":`${je}-dropdown`,"data-testid":`${Ie}-dropdown`,children:/* @__PURE__ */t("div",{className:x,children:Q.map((a,r)=>/* @__PURE__ */e("div",{role:"option","aria-selected":a.code===$e,className:c(j,r===pe&&L,a.code===$e&&D),onClick:()=>Ke(a),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),Ke(a))},onMouseEnter:()=>he(r),tabIndex:r===pe?0:-1,"data-cy":`${je}-option-${a.code.toLowerCase()}`,"data-testid":`${Ie}-option-${a.code.toLowerCase()}`,children:[
10
- /* @__PURE__ */t(y,{flag:a.flag,className:N}),
11
- /* @__PURE__ */t("span",{className:k,children:a.name}),
12
- /* @__PURE__ */t("span",{className:E,children:a.dialCode})]},a.code))})}),document.body),v&&/* @__PURE__ */t("span",{id:Ce,className:I,role:"alert","data-cy":`${je}-error`,"data-testid":`${Ie}-error`,children:v}),P&&!v&&/* @__PURE__ */t("span",{id:xe,className:M,"data-cy":`${je}-helper`,"data-testid":`${Ie}-helper`,children:P})]})});P.displayName="PhoneInput";export{f as E164_MAX_NATIONAL_DIGITS,P as PhoneInput,m as defaultPhoneMask,h as formatWithMask,p as getPhoneDigits,v as isValidPhoneLength};
1
+ import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useId as o,useRef as n,useMemo as i,useCallback as l,useEffect as c,useLayoutEffect as d}from"react";import{createPortal as s}from"react-dom";import{cn as u}from"./index67.js";import{Icon as m}from"@adam-milo/icons";import{defaultPhoneMask as p,getPhoneDigits as h,formatWithMask as f,E164_MAX_NATIONAL_DIGITS as y}from"./index69.js";import{isValidPhoneLength as v}from"./index69.js";import{CountryFlag as $}from"./index79.js";import{labelStyles as g,triggerStyles as w,flagStyles as b,dialCodeStyles as C,dropdownStyles as N,searchWrapperStyles as x,searchIconStyles as L,searchInputStyles as k,clearSearchStyles as D,dropdownViewportStyles as E,noResultsStyles as M,optionFlagStyles as S,optionNameStyles as I,optionDialCodeStyles as j,optionSelectedStyles as z,optionHighlightedStyles as F,optionBaseStyles as q,errorStyles as T,helperStyles as W,inputStyles as A,containerIdleStyles as B,containerDisabledStyles as K,containerErrorStyles as P,containerFocusStyles as U,containerFullWidthStyles as R,containerBaseStyles as V,wrapperFullWidthStyles as G,wrapperStyles as H}from"./index81.js";const J={name:"United States",dialCode:"+1",flag:"πŸ‡ΊπŸ‡Έ",mask:p},O=(e,t)=>{const a=t.trim().toLocaleLowerCase();if(!a)return!0;const r=a.replace(/\D/g,""),o=e.dialCode.replace(/\D/g,"");return e.name.toLocaleLowerCase().includes(a)||e.code.toLocaleLowerCase().includes(a)||e.dialCode.toLocaleLowerCase().includes(a)||r.length>0&&o.includes(r)},Q=a(({label:a,error:v,helperText:Q,fullWidth:X=!0,value:Y="",onChange:Z,countryCode:_,initialCountryCode:ee,onCountryChange:te,countries:ae,countrySearchPlaceholder:re="Search countries",countrySearchNoResultsText:oe="No countries found",enableFormatting:ne=!0,maxNationalDigits:ie=y,onValidationChange:le,disabled:ce,required:de,placeholder:se,id:ue,"data-cy":me,"data-testid":pe,className:he,onFocus:fe,onBlur:ye,...ve},$e)=>{const[ge,we]=r(!1),[be,Ce]=r(!1),[Ne,xe]=r(0),[Le,ke]=r(""),[De,Ee]=r({top:0,left:0,width:0}),[Me,Se]=r(()=>_??ee??"US"),Ie=_??Me,je=o(),ze=ue||je,Fe=`${ze}-error`,qe=`${ze}-helper`,Te=`${ze}-listbox`,We=n(null),Ae=n(null),Be=n(null),Ke=n(null),Pe=n(null),Ue=n([]),Re=me||"phone-input",Ve=pe||"phone-input",Ge=ae.find(e=>e.code===Ie)||ae[0]||J,He=i(()=>ae.filter(e=>O(e,Le)),[ae,Le]),Je=Ge.mask??p,Oe=Number.isFinite(ie)?Math.min(Math.max(Math.floor(ie),1),y):y,Qe=se??Je.placeholder,Xe=a&&de&&!a.includes("*")?`${a}*`:a,Ye=Ge.dialCode.replace(/\D/g,"").length,Ze=h(Y),_e=Y.startsWith("+")?Ze.slice(Ye):Ze,et=ne?f(_e,Je):_e,tt=l(()=>{if(ce)return;ke("");const e=ae.findIndex(e=>e.code===Ie);xe(0===ae.length?-1:Math.max(0,e)),we(!0)},[ae,Ie,ce]),at=l(()=>{we(!1),ke(""),xe(0)},[]);c(()=>{ge&&Pe.current?.focus()},[ge]),c(()=>{!ge||Ne<0||Ue.current[Ne]?.scrollIntoView?.({block:"nearest"})},[Ne,ge]),d(()=>{if(!ge||!Ae.current)return;const e=()=>{if(Ae.current){const e=Ae.current.getBoundingClientRect();Ee({top:e.bottom+8,left:e.left,width:Math.max(e.width,320)})}};return e(),window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e)}},[ge]),c(()=>{const e=e=>{const t=e.target,a=We.current?.contains(t),r=Be.current?.contains(t);a||r||at()};return ge&&document.addEventListener("pointerdown",e),()=>{document.removeEventListener("pointerdown",e)}},[at,ge]),c(()=>{if(!ge)return;const e=Be.current;if(!e)return;const t=e=>e.stopPropagation(),a={passive:!1};return e.addEventListener("touchmove",t,a),e.addEventListener("wheel",t,a),()=>{e.removeEventListener("touchmove",t),e.removeEventListener("wheel",t)}},[ge]);const rt=l(e=>{void 0===_&&Se(e.code),te?.(e);const t=h(Y),a=Ge.dialCode.replace(/\D/g,"").length,r=Y.startsWith("+")?t.slice(a):t;Z?.(`${e.dialCode}${r}`),at(),setTimeout(()=>{const e=We.current?.querySelector("input");e?.focus()},0)},[at,_,te,Z,Y,Ge.dialCode]),ot=l(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),xe(e=>0===He.length?-1:Math.min(e+1,He.length-1));break;case"ArrowUp":e.preventDefault(),xe(e=>0===He.length?-1:Math.max(e-1,0));break;case"Enter":Ne>=0&&He[Ne]&&(e.preventDefault(),rt(He[Ne]));break;case"Escape":e.preventDefault(),at(),Ke.current?.focus();break;case"Tab":at()}},[at,He,Ne,rt]),nt=ce?"disabled":v?"error":be||ge?"focus":"idle";/* @__PURE__ */
2
+ return e("div",{ref:We,className:u(H,X&&G),"data-cy":`${Re}-wrapper`,"data-testid":`${Ve}-wrapper`,children:[a&&/* @__PURE__ */t("label",{htmlFor:ze,className:g,"data-cy":`${Re}-label`,"data-testid":`${Ve}-label`,children:Xe}),
3
+ /* @__PURE__ */e("div",{ref:Ae,className:u(V,X&&R,"focus"===nt&&U,"error"===nt&&P,"disabled"===nt&&K,"idle"===nt&&B),"data-state":nt,"data-cy":`${Re}-container`,"data-testid":`${Ve}-container`,children:[
4
+ /* @__PURE__ */e("button",{ref:Ke,type:"button",className:w,onClick:()=>ge?at():tt(),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),tt())},disabled:ce,"aria-haspopup":"listbox","aria-expanded":ge,"aria-controls":Te,"aria-label":`Select country. Current: ${Ge.name}`,"data-cy":`${Re}-country-trigger`,"data-testid":`${Ve}-country-trigger`,children:[
5
+ /* @__PURE__ */t($,{flag:Ge.flag,className:b,"data-cy":`${Re}-flag`,"data-testid":`${Ve}-flag`}),
6
+ /* @__PURE__ */t(m,{name:"ChevronDownIcon",size:"sm",color:be||ge?"clickable":"text",decorative:!0,"data-cy":`${Re}-chevron`})]}),
7
+ /* @__PURE__ */t("span",{className:C,"data-cy":`${Re}-dial-code`,"data-testid":`${Ve}-dial-code`,children:Ge.dialCode}),
8
+ /* @__PURE__ */t("input",{ref:$e,id:ze,type:"tel",inputMode:"numeric",value:et,onChange:e=>{const t=e.target.value,a=(ne?h(t):t.replace(/[^0-9]/g,"")).slice(0,Oe);Z?.(`${Ge.dialCode}${a}`),le?.(a.length>0)},onFocus:e=>{Ce(!0),fe?.(e)},onBlur:e=>{Ce(!1),ye?.(e)},placeholder:Qe,disabled:ce,required:de,className:u(A,he),"aria-invalid":v?"true":"false","aria-required":de?"true":void 0,"aria-describedby":v?Fe:Q?qe:void 0,"data-cy":Re,"data-testid":Ve,...ve})]}),ge&&s(
9
+ /* @__PURE__ */e("div",{ref:Be,className:N,style:{top:De.top,left:De.left,width:De.width,minWidth:"20rem"},"data-cy":`${Re}-dropdown`,"data-testid":`${Ve}-dropdown`,children:[
10
+ /* @__PURE__ */e("div",{className:x,children:[
11
+ /* @__PURE__ */t("span",{className:L,children:/* @__PURE__ */t(m,{name:"MagnifyingGlassIcon",size:"sm",color:"icon-secondary",decorative:!0})}),
12
+ /* @__PURE__ */t("input",{ref:Pe,type:"text",role:"combobox",className:k,value:Le,onChange:e=>{const t=e.target.value;ke(t);const a=ae.filter(e=>O(e,t));xe(a.length>0?0:-1)},onKeyDown:ot,placeholder:re,"aria-label":re,"aria-autocomplete":"list","aria-expanded":"true","aria-controls":Te,"aria-activedescendant":Ne>=0&&He[Ne]?`${Te}-option-${He[Ne].code.toLowerCase()}`:void 0,"data-cy":`${Re}-country-search`,"data-testid":`${Ve}-country-search`}),Le&&/* @__PURE__ */t("button",{type:"button",className:D,onClick:()=>{ke(""),xe(ae.length>0?0:-1),Pe.current?.focus()},"aria-label":"Clear search","data-cy":`${Re}-country-search-clear`,"data-testid":`${Ve}-country-search-clear`,children:/* @__PURE__ */t(m,{name:"Cross2Icon",size:"sm",color:"icon-secondary",decorative:!0})})]}),
13
+ /* @__PURE__ */t("div",{id:Te,role:"listbox","aria-label":"Select country",className:E,"data-cy":`${Re}-country-list`,"data-testid":`${Ve}-country-list`,children:0===He.length?/* @__PURE__ */t("div",{role:"status","aria-live":"polite",className:M,"data-cy":`${Re}-country-no-results`,"data-testid":`${Ve}-country-no-results`,children:oe}):He.map((a,r)=>/* @__PURE__ */e("div",{ref:e=>{Ue.current[r]=e},id:`${Te}-option-${a.code.toLowerCase()}`,role:"option",tabIndex:-1,"aria-selected":a.code===Ie,className:u(q,r===Ne&&F,a.code===Ie&&z),onClick:()=>rt(a),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),rt(a))},onMouseEnter:()=>xe(r),"data-cy":`${Re}-option-${a.code.toLowerCase()}`,"data-testid":`${Ve}-option-${a.code.toLowerCase()}`,children:[
14
+ /* @__PURE__ */t($,{flag:a.flag,className:S}),
15
+ /* @__PURE__ */t("span",{className:I,children:a.name}),
16
+ /* @__PURE__ */t("span",{className:j,children:a.dialCode})]},a.code))})]}),document.body),v&&/* @__PURE__ */t("span",{id:Fe,className:T,role:"alert","data-cy":`${Re}-error`,"data-testid":`${Ve}-error`,children:v}),Q&&!v&&/* @__PURE__ */t("span",{id:qe,className:W,"data-cy":`${Re}-helper`,"data-testid":`${Ve}-helper`,children:Q})]})});Q.displayName="PhoneInput";export{y as E164_MAX_NATIONAL_DIGITS,Q as PhoneInput,p as defaultPhoneMask,f as formatWithMask,h as getPhoneDigits,v as isValidPhoneLength};
package/dist/index81.cjs CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["flex items-center gap-3 h-11 px-3.5 bg-[var(--color-card)] border border-[var(--color-border)] rounded-[var(--radius-md)] cursor-text","transition-[border-color,box-shadow] duration-200 ease-in-out"].join(" "),t=["flex items-center gap-3 h-10 min-h-11 px-2 rounded-md cursor-pointer select-none transition-colors duration-150 ease-in-out","hover:bg-[var(--color-bg-secondary)]"].join(" ");exports.containerBaseStyles=e,exports.containerDisabledStyles="cursor-not-allowed opacity-50 pointer-events-none",exports.containerErrorStyles="border-[var(--color-error)]",exports.containerFocusStyles="border-[var(--color-button-blue)]",exports.containerFullWidthStyles="w-full",exports.containerIdleStyles="hover:[&:not(:has(input:disabled))]:border-[var(--color-button-blue)]",exports.dialCodeStyles="text-16 text-[var(--color-text)] whitespace-nowrap shrink-0",exports.dropdownStyles="phone-dropdown-animate fixed z-[100] flex flex-col min-w-[20rem] overflow-hidden bg-[var(--color-card)] rounded-[var(--radius-md)] shadow-[0_0.25rem_1rem_var(--shadow-color-md)] pointer-events-auto",exports.dropdownViewportStyles="select-viewport-scrollbar p-1 max-h-[12rem] overflow-y-scroll flex flex-col",exports.errorStyles="text-12 leading-none text-[var(--color-error)] ps-3.5 pt-1.5",exports.flagStyles="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",exports.helperStyles="text-12 leading-none text-[var(--color-grey-07)] ps-3.5 pt-1.5",exports.inputStyles="m-0 p-0 border-none bg-transparent flex-1 min-w-0 text-16 text-[var(--color-text)] leading-none focus:outline-none placeholder:text-[var(--color-icon-secondary)] text-start disabled:[-webkit-text-fill-color:var(--color-text)]",exports.labelStyles="text-16 font-normal leading-none text-[var(--color-grey-07)] text-start w-full",exports.optionBaseStyles=t,exports.optionDialCodeStyles="text-16 text-[var(--color-text)] opacity-50 shrink-0 text-end",exports.optionFlagStyles="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",exports.optionHighlightedStyles="bg-[var(--color-bg)]",exports.optionNameStyles="flex-1 text-16 text-[var(--color-text)] whitespace-nowrap overflow-hidden text-ellipsis",exports.optionSelectedStyles="bg-[var(--color-bg-secondary)]",exports.triggerStyles="inline-flex items-center gap-1 shrink-0 m-0 p-0 border-none bg-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-2 focus-visible:rounded-sm disabled:cursor-not-allowed max-sm:min-w-11 max-sm:min-h-11 max-sm:-ms-2",exports.wrapperFullWidthStyles="w-full",exports.wrapperStyles="flex flex-col gap-2 relative w-auto items-start text-start";
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=["flex items-center gap-3 h-11 px-3.5 bg-[var(--color-card)] border border-[var(--color-border)] rounded-[var(--radius-md)] cursor-text","transition-[border-color,box-shadow] duration-200 ease-in-out"].join(" "),t=["flex items-center gap-3 h-10 min-h-11 px-2 rounded-md cursor-pointer select-none transition-colors duration-150 ease-in-out","hover:bg-[var(--color-bg-secondary)]"].join(" ");exports.clearSearchStyles="inline-flex items-center justify-center shrink-0 min-w-11 min-h-11 border-none bg-transparent text-[var(--color-icon-secondary)] cursor-pointer rounded-[var(--radius-sm)] focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-[-0.125rem]",exports.containerBaseStyles=e,exports.containerDisabledStyles="cursor-not-allowed opacity-50 pointer-events-none",exports.containerErrorStyles="border-[var(--color-error)]",exports.containerFocusStyles="border-[var(--color-button-blue)]",exports.containerFullWidthStyles="w-full",exports.containerIdleStyles="hover:[&:not(:has(input:disabled))]:border-[var(--color-button-blue)]",exports.dialCodeStyles="text-16 text-[var(--color-text)] whitespace-nowrap shrink-0",exports.dropdownStyles="phone-dropdown-animate fixed z-[100] flex flex-col min-w-[20rem] overflow-hidden bg-[var(--color-card)] rounded-[var(--radius-md)] shadow-[0_0.25rem_1rem_var(--shadow-color-md)] pointer-events-auto",exports.dropdownViewportStyles="select-viewport-scrollbar p-1 max-h-[12rem] overflow-y-scroll flex flex-col",exports.errorStyles="text-12 leading-none text-[var(--color-error)] ps-3.5 pt-1.5",exports.flagStyles="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",exports.helperStyles="text-12 leading-none text-[var(--color-grey-07)] ps-3.5 pt-1.5",exports.inputStyles="m-0 p-0 border-none bg-transparent flex-1 min-w-0 text-16 text-[var(--color-text)] leading-none focus:outline-none placeholder:text-[var(--color-icon-secondary)] text-start disabled:[-webkit-text-fill-color:var(--color-text)]",exports.labelStyles="text-16 font-normal leading-none text-[var(--color-grey-07)] text-start w-full",exports.noResultsStyles="flex min-h-11 items-center justify-center px-3 py-2 text-14 text-[var(--color-grey-07)] text-center",exports.optionBaseStyles=t,exports.optionDialCodeStyles="text-16 text-[var(--color-text)] opacity-50 shrink-0 text-end",exports.optionFlagStyles="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",exports.optionHighlightedStyles="bg-[var(--color-bg)]",exports.optionNameStyles="flex-1 text-16 text-[var(--color-text)] whitespace-nowrap overflow-hidden text-ellipsis",exports.optionSelectedStyles="bg-[var(--color-bg-secondary)]",exports.searchIconStyles="shrink-0 text-[var(--color-icon-secondary)]",exports.searchInputStyles="h-11 flex-1 min-w-0 border-none bg-transparent text-16 text-[var(--color-text)] focus:outline-none placeholder:text-[var(--color-icon-secondary)]",exports.searchWrapperStyles="flex items-center gap-2 px-3 border-b border-[var(--color-border)]",exports.triggerStyles="inline-flex items-center gap-1 shrink-0 m-0 p-0 border-none bg-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-2 focus-visible:rounded-sm disabled:cursor-not-allowed max-sm:min-w-11 max-sm:min-h-11 max-sm:-ms-2",exports.wrapperFullWidthStyles="w-full",exports.wrapperStyles="flex flex-col gap-2 relative w-auto items-start text-start";
package/dist/index81.js CHANGED
@@ -1 +1 @@
1
- const e="flex flex-col gap-2 relative w-auto items-start text-start",o="w-full",r="text-16 font-normal leading-none text-[var(--color-grey-07)] text-start w-full",t=["flex items-center gap-3 h-11 px-3.5 bg-[var(--color-card)] border border-[var(--color-border)] rounded-[var(--radius-md)] cursor-text","transition-[border-color,box-shadow] duration-200 ease-in-out"].join(" "),n="w-full",l="border-[var(--color-button-blue)]",a="border-[var(--color-error)]",i="cursor-not-allowed opacity-50 pointer-events-none",s="hover:[&:not(:has(input:disabled))]:border-[var(--color-button-blue)]",d="inline-flex items-center gap-1 shrink-0 m-0 p-0 border-none bg-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-2 focus-visible:rounded-sm disabled:cursor-not-allowed max-sm:min-w-11 max-sm:min-h-11 max-sm:-ms-2",c="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",x="text-16 text-[var(--color-text)] whitespace-nowrap shrink-0",u="m-0 p-0 border-none bg-transparent flex-1 min-w-0 text-16 text-[var(--color-text)] leading-none focus:outline-none placeholder:text-[var(--color-icon-secondary)] text-start disabled:[-webkit-text-fill-color:var(--color-text)]",v="phone-dropdown-animate fixed z-[100] flex flex-col min-w-[20rem] overflow-hidden bg-[var(--color-card)] rounded-[var(--radius-md)] shadow-[0_0.25rem_1rem_var(--shadow-color-md)] pointer-events-auto",b="select-viewport-scrollbar p-1 max-h-[12rem] overflow-y-scroll flex flex-col",f=["flex items-center gap-3 h-10 min-h-11 px-2 rounded-md cursor-pointer select-none transition-colors duration-150 ease-in-out","hover:bg-[var(--color-bg-secondary)]"].join(" "),p="bg-[var(--color-bg)]",m="bg-[var(--color-bg-secondary)]",h="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",w="flex-1 text-16 text-[var(--color-text)] whitespace-nowrap overflow-hidden text-ellipsis",g="text-16 text-[var(--color-text)] opacity-50 shrink-0 text-end",y="text-12 leading-none text-[var(--color-error)] ps-3.5 pt-1.5",k="text-12 leading-none text-[var(--color-grey-07)] ps-3.5 pt-1.5";export{t as containerBaseStyles,i as containerDisabledStyles,a as containerErrorStyles,l as containerFocusStyles,n as containerFullWidthStyles,s as containerIdleStyles,x as dialCodeStyles,v as dropdownStyles,b as dropdownViewportStyles,y as errorStyles,c as flagStyles,k as helperStyles,u as inputStyles,r as labelStyles,f as optionBaseStyles,g as optionDialCodeStyles,h as optionFlagStyles,p as optionHighlightedStyles,w as optionNameStyles,m as optionSelectedStyles,d as triggerStyles,o as wrapperFullWidthStyles,e as wrapperStyles};
1
+ const e="flex flex-col gap-2 relative w-auto items-start text-start",r="w-full",o="text-16 font-normal leading-none text-[var(--color-grey-07)] text-start w-full",t=["flex items-center gap-3 h-11 px-3.5 bg-[var(--color-card)] border border-[var(--color-border)] rounded-[var(--radius-md)] cursor-text","transition-[border-color,box-shadow] duration-200 ease-in-out"].join(" "),n="w-full",l="border-[var(--color-button-blue)]",i="border-[var(--color-error)]",a="cursor-not-allowed opacity-50 pointer-events-none",s="hover:[&:not(:has(input:disabled))]:border-[var(--color-button-blue)]",c="inline-flex items-center gap-1 shrink-0 m-0 p-0 border-none bg-transparent cursor-pointer focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-2 focus-visible:rounded-sm disabled:cursor-not-allowed max-sm:min-w-11 max-sm:min-h-11 max-sm:-ms-2",d="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",x="text-16 text-[var(--color-text)] whitespace-nowrap shrink-0",u="m-0 p-0 border-none bg-transparent flex-1 min-w-0 text-16 text-[var(--color-text)] leading-none focus:outline-none placeholder:text-[var(--color-icon-secondary)] text-start disabled:[-webkit-text-fill-color:var(--color-text)]",b="phone-dropdown-animate fixed z-[100] flex flex-col min-w-[20rem] overflow-hidden bg-[var(--color-card)] rounded-[var(--radius-md)] shadow-[0_0.25rem_1rem_var(--shadow-color-md)] pointer-events-auto",v="flex items-center gap-2 px-3 border-b border-[var(--color-border)]",f="shrink-0 text-[var(--color-icon-secondary)]",p="h-11 flex-1 min-w-0 border-none bg-transparent text-16 text-[var(--color-text)] focus:outline-none placeholder:text-[var(--color-icon-secondary)]",m="inline-flex items-center justify-center shrink-0 min-w-11 min-h-11 border-none bg-transparent text-[var(--color-icon-secondary)] cursor-pointer rounded-[var(--radius-sm)] focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-[-0.125rem]",h="select-viewport-scrollbar p-1 max-h-[12rem] overflow-y-scroll flex flex-col",w=["flex items-center gap-3 h-10 min-h-11 px-2 rounded-md cursor-pointer select-none transition-colors duration-150 ease-in-out","hover:bg-[var(--color-bg-secondary)]"].join(" "),g="bg-[var(--color-bg)]",y="bg-[var(--color-bg-secondary)]",k="inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden",j="flex-1 text-16 text-[var(--color-text)] whitespace-nowrap overflow-hidden text-ellipsis",_="text-16 text-[var(--color-text)] opacity-50 shrink-0 text-end",z="flex min-h-11 items-center justify-center px-3 py-2 text-14 text-[var(--color-grey-07)] text-center",q="text-12 leading-none text-[var(--color-error)] ps-3.5 pt-1.5",A="text-12 leading-none text-[var(--color-grey-07)] ps-3.5 pt-1.5";export{m as clearSearchStyles,t as containerBaseStyles,a as containerDisabledStyles,i as containerErrorStyles,l as containerFocusStyles,n as containerFullWidthStyles,s as containerIdleStyles,x as dialCodeStyles,b as dropdownStyles,h as dropdownViewportStyles,q as errorStyles,d as flagStyles,A as helperStyles,u as inputStyles,o as labelStyles,z as noResultsStyles,w as optionBaseStyles,_ as optionDialCodeStyles,k as optionFlagStyles,g as optionHighlightedStyles,j as optionNameStyles,y as optionSelectedStyles,f as searchIconStyles,p as searchInputStyles,v as searchWrapperStyles,c as triggerStyles,r as wrapperFullWidthStyles,e as wrapperStyles};
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.component.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AA2B1D,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAUrB,eAAO,MAAM,UAAU,8GAyZtB,CAAC;AAIF,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"PhoneInput.component.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.component.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAgC1D,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAyBrB,eAAO,MAAM,UAAU,8GAghBtB,CAAC;AAIF,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}
@@ -15,6 +15,10 @@ export declare const inputStyles = "m-0 p-0 border-none bg-transparent flex-1 mi
15
15
  * pointer-events-auto: required when used inside a Radix Dialog (Dialog disables
16
16
  * pointer events on <body>, which the body-portaled dropdown otherwise inherits). */
17
17
  export declare const dropdownStyles = "phone-dropdown-animate fixed z-[100] flex flex-col min-w-[20rem] overflow-hidden bg-[var(--color-card)] rounded-[var(--radius-md)] shadow-[0_0.25rem_1rem_var(--shadow-color-md)] pointer-events-auto";
18
+ export declare const searchWrapperStyles = "flex items-center gap-2 px-3 border-b border-[var(--color-border)]";
19
+ export declare const searchIconStyles = "shrink-0 text-[var(--color-icon-secondary)]";
20
+ export declare const searchInputStyles = "h-11 flex-1 min-w-0 border-none bg-transparent text-16 text-[var(--color-text)] focus:outline-none placeholder:text-[var(--color-icon-secondary)]";
21
+ export declare const clearSearchStyles = "inline-flex items-center justify-center shrink-0 min-w-11 min-h-11 border-none bg-transparent text-[var(--color-icon-secondary)] cursor-pointer rounded-[var(--radius-sm)] focus-visible:outline-2 focus-visible:outline-[var(--color-button-blue)] focus-visible:outline-offset-[-0.125rem]";
18
22
  /** Inner scrollable viewport: same structure as Select Viewport for scrollbar border-radius.
19
23
  * Touch-scroll (touch-action / overscroll-behavior / -webkit-overflow-scrolling) lives in
20
24
  * `.select-viewport-scrollbar` (effects.css) so the dropdown scrolls correctly on mobile
@@ -26,6 +30,7 @@ export declare const optionSelectedStyles = "bg-[var(--color-bg-secondary)]";
26
30
  export declare const optionFlagStyles = "inline-flex items-center justify-center w-5 h-5 shrink-0 aspect-[11/10] text-28 leading-[0] rounded-full overflow-hidden";
27
31
  export declare const optionNameStyles = "flex-1 text-16 text-[var(--color-text)] whitespace-nowrap overflow-hidden text-ellipsis";
28
32
  export declare const optionDialCodeStyles = "text-16 text-[var(--color-text)] opacity-50 shrink-0 text-end";
33
+ export declare const noResultsStyles = "flex min-h-11 items-center justify-center px-3 py-2 text-14 text-[var(--color-grey-07)] text-center";
29
34
  export declare const errorStyles = "text-12 leading-none text-[var(--color-error)] ps-3.5 pt-1.5";
30
35
  export declare const helperStyles = "text-12 leading-none text-[var(--color-grey-07)] ps-3.5 pt-1.5";
31
36
  //# sourceMappingURL=PhoneInput.styles.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+DAA+D,CAAC;AAC1F,eAAO,MAAM,sBAAsB,WAAW,CAAC;AAE/C,eAAO,MAAM,WAAW,mFAC0D,CAAC;AAEnF,eAAO,MAAM,mBAAmB,QAGrB,CAAC;AACZ,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,oBAAoB,sCAAsC,CAAC;AACxE,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,uBAAuB,sDAAsD,CAAC;AAC3F,eAAO,MAAM,mBAAmB,0EACyC,CAAC;AAE1E,eAAO,MAAM,aAAa,wSAC6Q,CAAC;AAExS,eAAO,MAAM,UAAU,6HACqG,CAAC;AAE7H,eAAO,MAAM,cAAc,gEAAgE,CAAC;AAE5F,eAAO,MAAM,WAAW,sOAC6M,CAAC;AAEtO;;sFAEsF;AACtF,eAAO,MAAM,cAAc,0MAC8K,CAAC;AAE1M;;;gDAGgD;AAChD,eAAO,MAAM,sBAAsB,gFAC4C,CAAC;AAEhF,eAAO,MAAM,gBAAgB,QAGlB,CAAC;AACZ,eAAO,MAAM,uBAAuB,yBAAyB,CAAC;AAC9D,eAAO,MAAM,oBAAoB,mCAAmC,CAAC;AAErE,eAAO,MAAM,gBAAgB,6HAC+F,CAAC;AAC7H,eAAO,MAAM,gBAAgB,4FAC8D,CAAC;AAC5F,eAAO,MAAM,oBAAoB,kEAAkE,CAAC;AAEpG,eAAO,MAAM,WAAW,iEAAiE,CAAC;AAC1F,eAAO,MAAM,YAAY,mEAAmE,CAAC"}
1
+ {"version":3,"file":"PhoneInput.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+DAA+D,CAAC;AAC1F,eAAO,MAAM,sBAAsB,WAAW,CAAC;AAE/C,eAAO,MAAM,WAAW,mFAC0D,CAAC;AAEnF,eAAO,MAAM,mBAAmB,QAGrB,CAAC;AACZ,eAAO,MAAM,wBAAwB,WAAW,CAAC;AACjD,eAAO,MAAM,oBAAoB,sCAAsC,CAAC;AACxE,eAAO,MAAM,oBAAoB,gCAAgC,CAAC;AAClE,eAAO,MAAM,uBAAuB,sDAAsD,CAAC;AAC3F,eAAO,MAAM,mBAAmB,0EACyC,CAAC;AAE1E,eAAO,MAAM,aAAa,wSAC6Q,CAAC;AAExS,eAAO,MAAM,UAAU,6HACqG,CAAC;AAE7H,eAAO,MAAM,cAAc,gEAAgE,CAAC;AAE5F,eAAO,MAAM,WAAW,sOAC6M,CAAC;AAEtO;;sFAEsF;AACtF,eAAO,MAAM,cAAc,0MAC8K,CAAC;AAE1M,eAAO,MAAM,mBAAmB,uEACsC,CAAC;AACvE,eAAO,MAAM,gBAAgB,gDAAgD,CAAC;AAC9E,eAAO,MAAM,iBAAiB,sJACuH,CAAC;AACtJ,eAAO,MAAM,iBAAiB,iSACkQ,CAAC;AAEjS;;;gDAGgD;AAChD,eAAO,MAAM,sBAAsB,gFAC4C,CAAC;AAEhF,eAAO,MAAM,gBAAgB,QAGlB,CAAC;AACZ,eAAO,MAAM,uBAAuB,yBAAyB,CAAC;AAC9D,eAAO,MAAM,oBAAoB,mCAAmC,CAAC;AAErE,eAAO,MAAM,gBAAgB,6HAC+F,CAAC;AAC7H,eAAO,MAAM,gBAAgB,4FAC8D,CAAC;AAC5F,eAAO,MAAM,oBAAoB,kEAAkE,CAAC;AACpG,eAAO,MAAM,eAAe,wGAC2E,CAAC;AAExG,eAAO,MAAM,WAAW,iEAAiE,CAAC;AAC1F,eAAO,MAAM,YAAY,mEAAmE,CAAC"}
@@ -15,7 +15,13 @@ export interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
15
15
  onCountryChange?: (country: Country) => void;
16
16
  /** Array of country objects for the selector. Each object: `{ code, name, dialCode, flag }`. */
17
17
  countries: Country[];
18
+ /** Localized placeholder and accessible label for country search. */
19
+ countrySearchPlaceholder?: string;
20
+ /** Localized message shown when country search has no matches. */
21
+ countrySearchNoResultsText?: string;
18
22
  enableFormatting?: boolean;
23
+ /** Maximum national digits accepted by typing or paste. Defaults to the E.164 cap. */
24
+ maxNationalDigits?: number;
19
25
  /**
20
26
  * Soft signal when national digits are non-empty. Not mask-length or
21
27
  * libphonenumber validity β€” prefer form-schema validation for that.
@@ -1 +1 @@
1
- {"version":3,"file":"PhoneInput.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,CAC9B;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8GAA8G;IAC9G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gGAAgG;IAChG,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
1
+ {"version":3,"file":"PhoneInput.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/forms/phone-input/PhoneInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE3C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,MAAM,GAAG,OAAO,GAAG,UAAU,CAC9B;IACC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8GAA8G;IAC9G,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,gGAAgG;IAChG,SAAS,EAAE,OAAO,EAAE,CAAC;IACrB,qEAAqE;IACrE,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,kEAAkE;IAClE,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sFAAsF;IACtF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}