@clicktap/ui 2.3.1 → 2.3.3
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/components/Accordion/Accordion.js +1 -1
- package/components/Badge/Badge.d.ts +2 -2
- package/components/Badge/Badge.js +1 -1
- package/components/Button/Button.js +1 -1
- package/components/Checkbox/Checkbox.js +1 -1
- package/components/Collection/CollectionFilterChips/CollectionFilterChips.js +1 -1
- package/components/Collection/CollectionFilters/CollectionFilters.js +1 -1
- package/components/Collection/CollectionToolbar/CollectionToolbar.js +1 -1
- package/components/Collection/EmptyResults/EmptyResults.js +1 -1
- package/components/Collection/FilterRenderer/Renderer/Swatch/SwatchText.js +1 -1
- package/components/Collection/ProductCardSwatches/ProductCardSwatches.js +1 -1
- package/components/Collection/ProductPrice/ProductPrice.js +1 -1
- package/components/ContextMenu/ContextMenu.js +1 -1
- package/components/CreditCardExpirationInput/CreditCardExpirationInput.js +1 -1
- package/components/CreditCardInput/CreditCardInput.js +1 -1
- package/components/DateInput/DateInput.js +1 -1
- package/components/Dialog/Dialog.js +1 -1
- package/components/Divider/Divider.js +1 -1
- package/components/DobInput/DobInput.js +1 -1
- package/components/Drawer/Drawer.d.ts +1 -1
- package/components/Drawer/Drawer.js +1 -1
- package/components/Drawer/Drawer.types.d.ts +7 -0
- package/components/FeatureGate/AccessDenied.js +1 -1
- package/components/FeatureGate/PermissionRequired.js +1 -1
- package/components/FeatureGate/UpgradePrompt.js +1 -1
- package/components/Input/Input.js +1 -1
- package/components/Link/Link.js +1 -1
- package/components/LinkAsButton/LinkAsButton.js +1 -1
- package/components/Loader/Pulse.js +1 -1
- package/components/Menu/ContextMenu.js +1 -1
- package/components/Meter/Meter.js +1 -1
- package/components/NumberInput/NumberInput.js +1 -1
- package/components/Pagination/Pagination.js +1 -1
- package/components/PasswordCheck/PasswordCheck.js +1 -1
- package/components/PhoneInput/PhoneInput.js +1 -1
- package/components/PinInput/PinInput.js +1 -1
- package/components/Progressbar/CircularProgressbar.js +1 -1
- package/components/Progressbar/LinearProgressbar.js +1 -1
- package/components/ResendCode/ResendCode.js +1 -1
- package/components/Select/ButtonSelect.js +1 -1
- package/components/Select/ComboBoxSelect.js +1 -1
- package/components/Select/MultiButtonSelect.js +1 -1
- package/components/Select/parts.js +1 -1
- package/components/Skeleton/Skeleton.js +1 -1
- package/components/Slider/Slider.js +1 -1
- package/components/Switch/Switch.js +1 -1
- package/components/Tabs/Tab.js +1 -1
- package/components/Tabs/TabList.js +1 -1
- package/components/TimeInput/TimeInput.js +1 -1
- package/components/ToggleButton/ToggleButton.js +1 -1
- package/components/Tooltip/Tooltip.js +1 -1
- package/components/UploadImage/UploadImage.js +1 -1
- package/docs/migrations/2026/09/ui-2026-09-23-drawer-viewport-clamp.md +90 -0
- package/docs/migrations/2026/09/ui-2026-09-23-interactive-elements-cursor-pointer.md +84 -0
- package/docs/migrations/2026/09/ui-2026-09-24-dialog-semantic-surface-tokens.md +81 -0
- package/docs/migrations/2026/09/ui-2026-09-24-semantic-color-token-lint-rule.md +283 -0
- package/docs/migrations/index.json +40 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as H,jsx as j}from"react/jsx-runtime";import{useFilter as ie}from"react-aria";import k,{useState as W,useMemo as Z,useRef as _,forwardRef as se,useCallback as I,useImperativeHandle as ue,useEffect as K}from"react";import{DialogTrigger as de,Button as ce,Input as fe,ListBox as pe,ListBoxItem as me}from"react-aria-components";import{cn as J}from"../../utils/cn.js";import{Input as he}from"../Input/Input.js";import"../Skeleton/Skeleton.js";import"../../hooks/useIsClient.js";var R=[["Afghanistan","af","93"],["Albania","al","355"],["Algeria","dz","213"],["Andorra","ad","376"],["Angola","ao","244"],["Antigua and Barbuda","ag","1268"],["Argentina","ar","54",{default:"(..) .... ....","/^11/":"(..) .... ....","/^15/":"(..) ... ....","/^(2|3|4|5)/":"(.) .... ....","/^9/":"(.) .... ....."},0],["Armenia","am","374",".. ......"],["Aruba","aw","297"],["Australia","au","61",{default:". .... ....","/^4/":"... ... ...","/^5(?!50)/":"... ... ...","/^1(3|8)00/":".... ... ...","/^13/":".. .. ..","/^180/":"... ...."},0,[]],["Austria","at","43"],["Azerbaijan","az","994","(..) ... .. .."],["Bahamas","bs","1242"],["Bahrain","bh","973",".... ...."],["Bangladesh","bd","880"],["Barbados","bb","1246"],["Belarus","by","375","(..) ... .. .."],["Belgium","be","32","... .. .. .."],["Belize","bz","501"],["Benin","bj","229"],["Bhutan","bt","975"],["Bolivia","bo","591"],["Bosnia and Herzegovina","ba","387"],["Botswana","bw","267"],["Brazil","br","55","(..) .....-...."],["British Indian Ocean Territory","io","246"],["Brunei","bn","673"],["Bulgaria","bg","359"],["Burkina Faso","bf","226"],["Burundi","bi","257"],["Cambodia","kh","855"],["Cameroon","cm","237"],["Canada","ca","1","(...) ...-....",1,["204","226","236","249","250","289","306","343","365","387","403","416","418","431","437","438","450","506","514","519","548","579","581","587","604","613","639","647","672","705","709","742","778","780","782","807","819","825","867","873","902","905"]],["Cape Verde","cv","238"],["Caribbean Netherlands","bq","599","",1],["Cayman Islands","ky","1","... ... ....",4,["345"]],["Central African Republic","cf","236"],["Chad","td","235"],["Chile","cl","56"],["China","cn","86","... .... ...."],["Colombia","co","57","... ... ...."],["Comoros","km","269"],["Congo","cd","243"],["Congo","cg","242"],["Costa Rica","cr","506","....-...."],["Côte d'Ivoire","ci","225",".. .. .. .. .."],["Croatia","hr","385"],["Cuba","cu","53"],["Curaçao","cw","599","",0],["Cyprus","cy","357",".. ......"],["Czech Republic","cz","420","... ... ..."],["Denmark","dk","45",".. .. .. .."],["Djibouti","dj","253",".. .. ...."],["Dominica","dm","1767"],["Dominican Republic","do","1","(...) ...-....",2,["809","829","849"]],["Ecuador","ec","593"],["Egypt","eg","20"],["El Salvador","sv","503","....-...."],["Equatorial Guinea","gq","240"],["Eritrea","er","291"],["Estonia","ee","372",".... ......"],["Ethiopia","et","251",".. ... ...."],["Faroe Islands","fo","298",".. .. .."],["Fiji","fj","679"],["Finland","fi","358",".. ... .. .."],["France","fr","33",". .. .. .. .."],["French Guiana","gf","594","... .. .. .."],["French Polynesia","pf","689",{"/^44/":".. .. ..","/^80[0-5]/":"... .. .. ..",default:".. .. .. .."}],["Gabon","ga","241"],["Gambia","gm","220"],["Georgia","ge","995"],["Germany","de","49","... ........."],["Ghana","gh","233"],["Gibraltar","gi","350"],["Greece","gr","30"],["Greenland","gl","299",".. .. .."],["Grenada","gd","1473"],["Guadeloupe","gp","590","... .. .. ..",0],["Guam","gu","1671"],["Guatemala","gt","502","....-...."],["Guinea","gn","224"],["Guinea-Bissau","gw","245"],["Guyana","gy","592"],["Haiti","ht","509","....-...."],["Honduras","hn","504"],["Hong Kong","hk","852",".... ...."],["Hungary","hu","36"],["Iceland","is","354","... ...."],["India","in","91",".....-....."],["Indonesia","id","62"],["Iran","ir","98","... ... ...."],["Iraq","iq","964"],["Ireland","ie","353",".. ......."],["Israel","il","972","... ... ...."],["Italy","it","39","... .......",0],["Jamaica","jm","1876"],["Japan","jp","81",".. .... ...."],["Jordan","jo","962"],["Kazakhstan","kz","7","... ...-..-..",0],["Kenya","ke","254"],["Kiribati","ki","686"],["Kosovo","xk","383"],["Kuwait","kw","965",".... ...."],["Kyrgyzstan","kg","996","... ... ..."],["Laos","la","856"],["Latvia","lv","371",".. ... ..."],["Lebanon","lb","961"],["Lesotho","ls","266"],["Liberia","lr","231"],["Libya","ly","218"],["Liechtenstein","li","423"],["Lithuania","lt","370"],["Luxembourg","lu","352"],["Macau","mo","853"],["Macedonia","mk","389"],["Madagascar","mg","261"],["Malawi","mw","265"],["Malaysia","my","60","..-....-...."],["Maldives","mv","960"],["Mali","ml","223"],["Malta","mt","356"],["Marshall Islands","mh","692"],["Martinique","mq","596","... .. .. .."],["Mauritania","mr","222"],["Mauritius","mu","230"],["Mayotte","yt","262","... .. .. ..",1,["269","639"]],["Mexico","mx","52","... ... ....",0],["Micronesia","fm","691"],["Moldova","md","373","(..) ..-..-.."],["Monaco","mc","377"],["Mongolia","mn","976"],["Montenegro","me","382"],["Morocco","ma","212"],["Mozambique","mz","258"],["Myanmar","mm","95"],["Namibia","na","264"],["Nauru","nr","674"],["Nepal","np","977"],["Netherlands","nl","31",{"/^06/":"(.). .........","/^6/":". .........","/^0(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":"(.).. ........","/^(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":".. ........","/^0/":"(.)... .......",default:"... ......."}],["New Caledonia","nc","687"],["New Zealand","nz","64","...-...-...."],["Nicaragua","ni","505"],["Niger","ne","227"],["Nigeria","ng","234"],["North Korea","kp","850"],["Norway","no","47","... .. ..."],["Oman","om","968",".... ...."],["Pakistan","pk","92","...-......."],["Palau","pw","680"],["Palestine","ps","970"],["Panama","pa","507"],["Papua New Guinea","pg","675"],["Paraguay","py","595"],["Peru","pe","51"],["Philippines","ph","63","... ... ...."],["Poland","pl","48","...-...-..."],["Portugal","pt","351"],["Puerto Rico","pr","1","(...) ...-....",3,["787","939"]],["Qatar","qa","974",".... ...."],["Réunion","re","262","... .. .. ..",0],["Romania","ro","40"],["Russia","ru","7","(...) ...-..-..",1],["Rwanda","rw","250"],["Saint Kitts and Nevis","kn","1869"],["Saint Lucia","lc","1758"],["Saint Pierre & Miquelon","pm","508",{"/^708/":"... ... ...","/^8/":"... .. .. ..",default:".. .. .."}],["Saint Vincent and the Grenadines","vc","1784"],["Samoa","ws","685"],["San Marino","sm","378"],["São Tomé and Príncipe","st","239"],["Saudi Arabia","sa","966",".. ... ...."],["Senegal","sn","221"],["Serbia","rs","381"],["Seychelles","sc","248"],["Sierra Leone","sl","232"],["Singapore","sg","65","....-...."],["Slovakia","sk","421"],["Slovenia","si","386"],["Solomon Islands","sb","677"],["Somalia","so","252"],["South Africa","za","27"],["South Korea","kr","82","... .... ...."],["South Sudan","ss","211"],["Spain","es","34","... ... ..."],["Sri Lanka","lk","94"],["Sudan","sd","249"],["Suriname","sr","597"],["Swaziland","sz","268"],["Sweden","se","46","... ... ..."],["Switzerland","ch","41",".. ... .. .."],["Syria","sy","963"],["Taiwan","tw","886"],["Tajikistan","tj","992"],["Tanzania","tz","255"],["Thailand","th","66"],["Timor-Leste","tl","670"],["Togo","tg","228"],["Tonga","to","676"],["Trinidad and Tobago","tt","1868"],["Tunisia","tn","216"],["Turkey","tr","90","... ... .. .."],["Turkmenistan","tm","993"],["Tuvalu","tv","688"],["Uganda","ug","256"],["Ukraine","ua","380","(..) ... .. .."],["United Arab Emirates","ae","971",{default:".. ... ....","/^5[024568]/":".. ... ....","/^[234679]/":". ... ...."}],["United Kingdom","gb","44",".... ......"],["United States","us","1","(...) ...-....",0],["Uruguay","uy","598"],["Uzbekistan","uz","998",".. ... .. .."],["Vanuatu","vu","678"],["Vatican City","va","39",".. .... ....",1],["Venezuela","ve","58"],["Vietnam","vn","84"],["Wallis & Futuna","wf","681",".. .. .."],["Yemen","ye","967"],["Zambia","zm","260"],["Zimbabwe","zw","263"]],ye="react-international-phone-",ae=(...t)=>t.filter(e=>!!e).join(" ").trim(),Ce=(...t)=>ae(...t).split(" ").map(e=>`${ye}${e}`).join(" "),A=({addPrefix:t,rawClassNames:e})=>ae(Ce(...t),...e),ge=({value:t,mask:e,maskSymbol:n,offset:o=0,trimNonMaskCharsLeftover:a=!1,allowMaskOverflow:l=!1})=>{if(t.length<o)return t;let f=t.slice(0,o),i=t.slice(o),r=e.split("").filter(c=>c===n).length,s=i.slice(0,r),u=l?i.slice(r):"",m=f,v=0;for(let c of e.split("")){if(v>=s.length){if(!a&&c!==n){m+=c;continue}break}c===n?(m+=s[v],v+=1):m+=c}return m+u},G=t=>t?/^\d+$/.test(t):!1,X=t=>t.replace(/\D/g,""),be=(t,e)=>{let n=t.style.display;n!=="block"&&(t.style.display="block");let o=t.getBoundingClientRect(),a=e.getBoundingClientRect(),l=a.top-o.top,f=o.bottom-a.bottom;l>=0&&f>=0||(Math.abs(l)<Math.abs(f)?t.scrollTop+=l:t.scrollTop-=f),t.style.display=n},ve=()=>typeof window>"u"?!1:window.navigator.userAgent.toLowerCase().includes("macintosh"),we=(t,e)=>{let n=e.disableDialCodeAndPrefix?!1:e.forceDialCode,o=e.disableDialCodeAndPrefix?!1:e.insertDialCodeOnEmpty,a=t,l=s=>e.trimNonDigitsEnd?s.trim():s;if(!a)return o&&!a.length||n?l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`):l(a);if(a=X(a),a===e.dialCode&&!e.disableDialCodeAndPrefix)return l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(e.dialCode.startsWith(a)&&!e.disableDialCodeAndPrefix)return l(n?`${e.prefix}${e.dialCode}${e.charAfterDialCode}`:`${e.prefix}${a}`);if(!a.startsWith(e.dialCode)&&!e.disableDialCodeAndPrefix){if(n)return l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(a.length<e.dialCode.length)return l(`${e.prefix}${a}`)}let f=()=>{let s=e.dialCode.length,u=a.slice(0,s),m=a.slice(s);return{phoneLeftSide:u,phoneRightSide:m}},{phoneLeftSide:i,phoneRightSide:r}=f();return i=`${e.prefix}${i}${e.charAfterDialCode}`,r=ge({value:r,mask:e.mask,maskSymbol:e.maskChar,trimNonMaskCharsLeftover:e.trimNonDigitsEnd||e.disableDialCodeAndPrefix&&r.length===0,allowMaskOverflow:e.allowMaskOverflow}),e.disableDialCodeAndPrefix&&(i=""),l(`${i}${r}`)},De=({phoneBeforeInput:t,phoneAfterInput:e,phoneAfterFormatted:n,cursorPositionAfterInput:o,leftOffset:a=0,deletion:l})=>{if(o<a)return a;if(!t)return n.length;let f=null;for(let u=o-1;u>=0;u-=1)if(G(e[u])){f=u;break}if(f===null){for(let u=0;u<e.length;u+=1)if(G(n[u]))return u;return e.length}let i=0;for(let u=0;u<f;u+=1)G(e[u])&&(i+=1);let r=0,s=0;for(let u=0;u<n.length&&(r+=1,G(n[u])&&(s+=1),!(s>=i+1));u+=1);if(l!=="backward")for(;!G(n[r])&&r<n.length;)r+=1;return r},Q=({phone:t,prefix:e})=>t?`${e}${X(t)}`:"";function ee({value:t,country:e,insertDialCodeOnEmpty:n,trimNonDigitsEnd:o,countries:a,prefix:l,charAfterDialCode:f,forceDialCode:i,disableDialCodeAndPrefix:r,defaultMask:s,countryGuessingEnabled:u,disableFormatting:m,allowMaskOverflow:v}){let c=t;r&&(c=c.startsWith(`${l}`)?c:`${l}${e.dialCode}${c}`);let w=u?Ee({phone:c,countries:a,currentCountryIso2:e?.iso2}):void 0,p=w?.country??e,b=we(c,{prefix:l,mask:Ae({phone:c,country:p,defaultMask:s,disableFormatting:m}),maskChar:re,dialCode:p.dialCode,trimNonDigitsEnd:o,charAfterDialCode:f,forceDialCode:i,insertDialCodeOnEmpty:n,disableDialCodeAndPrefix:r,allowMaskOverflow:v}),y=u&&!w?.fullDialCodeMatch?e:p;return{phone:Q({phone:r?`${y.dialCode}${b}`:b,prefix:l}),inputValue:b,country:y}}var xe=t=>{if(t?.toLocaleLowerCase().includes("delete")??!1)return t?.toLocaleLowerCase().includes("forward")?"forward":"backward"},ke=(t,{country:e,insertDialCodeOnEmpty:n,phoneBeforeInput:o,prefix:a,charAfterDialCode:l,forceDialCode:f,disableDialCodeAndPrefix:i,countryGuessingEnabled:r,defaultMask:s,disableFormatting:u,countries:m,allowMaskOverflow:v})=>{let c=t.nativeEvent,w=c.inputType,p=xe(w),b=!!w?.startsWith("insertFrom"),y=w==="insertText",C=c?.data||void 0,N=t.target.value,z=t.target.selectionStart??0;if(w?.includes("history"))return{inputValue:o,phone:Q({phone:o,prefix:a}),cursorPosition:o.length,country:e};if(y&&!G(C)&&N!==a)return{inputValue:o,phone:Q({phone:i?`${e.dialCode}${o}`:o,prefix:a}),cursorPosition:z-(C?.length??0),country:e};if(f&&!N.startsWith(`${a}${e.dialCode}`)&&!b){let x=N?o:`${a}${e.dialCode}${l}`;return{inputValue:x,phone:Q({phone:x,prefix:a}),cursorPosition:a.length+e.dialCode.length+l.length,country:e}}let{phone:L,inputValue:d,country:g}=ee({value:N,country:e,trimNonDigitsEnd:p==="backward",insertDialCodeOnEmpty:n,countryGuessingEnabled:r,countries:m,prefix:a,charAfterDialCode:l,forceDialCode:f,disableDialCodeAndPrefix:i,disableFormatting:u,defaultMask:s,allowMaskOverflow:v}),h=De({cursorPositionAfterInput:z,phoneBeforeInput:o,phoneAfterInput:N,phoneAfterFormatted:d,leftOffset:f?a.length+e.dialCode.length+l.length:0,deletion:p});return{phone:L,inputValue:d,cursorPosition:h,country:g}},Ne=(t,e)=>{let n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let a of n)if(t[a]!==e[a])return!1;return!0},Pe=()=>{let t=_(),e=_(Date.now()),n=I(()=>{let o=Date.now(),a=t.current?o-e.current:void 0;return t.current=e.current,e.current=o,a},[]);return Z(()=>({check:n}),[n])},Se={size:20,overrideLastItemDebounceMS:-1};function Me(t,e){let{size:n,overrideLastItemDebounceMS:o,onChange:a}={...Se,...e},[l,f]=W(t),i=_([l]),r=_(0),s=Pe(),u=I((c,w)=>{let p=i.current[r.current];if(c===p||typeof c=="object"&&typeof p=="object"&&Ne(c,p))return;let b=o>0,y=s.check(),C=b&&y!==void 0?y>o:!0;if(w?.overrideLastItem!==void 0?w.overrideLastItem:!C)i.current=[...i.current.slice(0,r.current),c];else{let N=i.current.length>=n;i.current=[...i.current.slice(N?1:0,r.current+1),c],N||(r.current+=1)}f(c),a?.(c)},[a,o,n,s]),m=I(()=>{if(r.current<=0)return{success:!1};let c=i.current[r.current-1];return f(c),r.current-=1,a?.(c),{success:!0,value:c}},[a]),v=I(()=>{if(r.current+1>=i.current.length)return{success:!1};let c=i.current[r.current+1];return f(c),r.current+=1,a?.(c),{success:!0,value:c}},[a]);return[l,u,m,v]}var re=".",$={defaultCountry:"us",value:"",prefix:"+",defaultMask:"............",charAfterDialCode:" ",historySaveDebounceMS:200,disableCountryGuess:!1,disableDialCodePrefill:!1,forceDialCode:!1,disableDialCodeAndPrefix:!1,disableFormatting:!1,allowMaskOverflow:!1,countries:R},ne=({defaultCountry:t=$.defaultCountry,value:e=$.value,countries:n=$.countries,prefix:o=$.prefix,defaultMask:a=$.defaultMask,charAfterDialCode:l=$.charAfterDialCode,historySaveDebounceMS:f=$.historySaveDebounceMS,disableCountryGuess:i=$.disableCountryGuess,disableDialCodePrefill:r=$.disableDialCodePrefill,forceDialCode:s=$.forceDialCode,disableDialCodeAndPrefix:u=$.disableDialCodeAndPrefix,disableFormatting:m=$.disableFormatting,allowMaskOverflow:v=$.allowMaskOverflow,onChange:c,inputRef:w})=>{let p={countries:n,prefix:o,charAfterDialCode:l,forceDialCode:u?!1:s,disableDialCodeAndPrefix:u,defaultMask:a,countryGuessingEnabled:!i,disableFormatting:m,allowMaskOverflow:v},b=_(null),y=w||b,C=D=>{Promise.resolve().then(()=>{typeof window>"u"||y.current!==document?.activeElement||y.current?.setSelectionRange(D,D)})},N=I(D=>T({value:D,field:"iso2",countries:n}),[n]),z=I(({inputValue:D,phone:P,country:S})=>{if(!c)return;let B=N(S);c({phone:P,inputValue:D,country:B})},[N,c]),[{phone:L,inputValue:d,country:g},h,x,M]=Me(()=>{let D=T({value:t,field:"iso2",countries:n});D||console.error(`[react-international-phone]: can not find a country with "${t}" iso2 code`);let P=D||T({value:"us",field:"iso2",countries:n}),{phone:S,inputValue:B,country:U}=ee({value:e,country:P,insertDialCodeOnEmpty:!r,...p});return C(B.length),{phone:S,inputValue:B,country:U.iso2}},{overrideLastItemDebounceMS:f,onChange:z}),E=Z(()=>N(g),[g,N]);K(()=>{let D=y.current;if(!D)return;let P=S=>{if(!S.key)return;let B=S.ctrlKey,U=S.metaKey,oe=S.shiftKey;if(S.key.toLowerCase()==="z"){if(ve()){if(!U)return}else if(!B)return;oe?M():x()}};return D.addEventListener("keydown",P),()=>{D.removeEventListener("keydown",P)}},[y,x,M]);let V=D=>{D.preventDefault();let{phone:P,inputValue:S,country:B,cursorPosition:U}=ke(D,{country:E,phoneBeforeInput:d,insertDialCodeOnEmpty:!1,...p});return h({inputValue:S,phone:P,country:B.iso2}),C(U),e},O=I((D,P={focusOnInput:!1})=>{let S=T({value:D,field:"iso2",countries:n});if(!S){console.error(`[react-international-phone]: can not find a country with "${D}" iso2 code`);return}let B=u?"":`${o}${S.dialCode}${l}`;h({inputValue:B,phone:`${o}${S.dialCode}`,country:S.iso2}),P.focusOnInput&&Promise.resolve().then(()=>{y.current?.focus()})},[n,u,o,l,h,y]),[q,Y]=W(!1);return K(()=>{if(!q){Y(!0),e!==L&&c?.({inputValue:d,phone:L,country:E});return}if(e===L)return;let{phone:D,inputValue:P,country:S}=ee({value:e,country:E,insertDialCodeOnEmpty:!r,...p});h({phone:D,inputValue:P,country:S.iso2})},[e]),{phone:L,inputValue:d,country:E,setCountry:O,handlePhoneValueChange:V,inputRef:y}},Ae=({phone:t,country:e,defaultMask:n="............",disableFormatting:o=!1})=>{let a=e.format,l=i=>o?i.replace(new RegExp(`[^${re}]`,"g"),""):i;if(!a)return l(n);if(typeof a=="string")return l(a);if(!a.default)return console.error(`[react-international-phone]: default mask for ${e.iso2} is not provided`),l(n);let f=Object.keys(a).find(i=>{if(i==="default")return!1;if(!(i.charAt(0)==="/"&&i.charAt(i.length-1)==="/"))return console.error(`[react-international-phone]: format regex "${i}" for ${e.iso2} is not valid`),!1;let r=new RegExp(i.substring(1,i.length-1)),s=t.replace(e.dialCode,"");return r.test(X(s))});return l(f?a[f]:a.default)},F=t=>{let[e,n,o,a,l,f]=t;return{name:e,iso2:n,dialCode:o,format:a,priority:l,areaCodes:f}},$e=t=>`Field "${t}" is not supported`,T=({field:t,value:e,countries:n=R})=>{if(["priority"].includes(t))throw new Error($e(t));let o=n.find(a=>{let l=F(a);return e===l[t]});if(o)return F(o)},Ee=({phone:t,countries:e=R,currentCountryIso2:n})=>{let o={country:void 0,fullDialCodeMatch:!1};if(!t)return o;let a=X(t);if(!a)return o;let l=o,f=({country:i,fullDialCodeMatch:r})=>{let s=i.dialCode===l.country?.dialCode,u=(i.priority??0)<(l.country?.priority??0);(!s||u)&&(l={country:i,fullDialCodeMatch:r})};for(let i of e){let r=F(i),{dialCode:s,areaCodes:u}=r;if(a.startsWith(s)){let m=l.country?Number(s)>=Number(l.country.dialCode):!0;if(u){let v=a.substring(s.length);for(let c of u)if(v.startsWith(c))return{country:r,fullDialCodeMatch:!0}}(m||s===a||!l.fullDialCodeMatch)&&f({country:r,fullDialCodeMatch:!0})}l.fullDialCodeMatch||a.length<s.length&&s.startsWith(a)&&(!l.country||Number(s)<=Number(l.country.dialCode))&&f({country:r,fullDialCodeMatch:!1})}if(n){let i=T({value:n,field:"iso2",countries:e});if(!i)return l;let r=i?(s=>{if(!s?.areaCodes)return!1;let u=a.substring(s.dialCode.length);return s.areaCodes.some(m=>m.startsWith(u))})(i):!1;l&&l.country?.dialCode===i.dialCode&&l.country!==i&&l.fullDialCodeMatch&&(!i.areaCodes||r)&&(l={country:i,fullDialCodeMatch:!0})}return l},Ie=(t,e)=>{let n=parseInt(t,16);return Number(n+e).toString(16)},Le="abcdefghijklmnopqrstuvwxyz",Fe="1f1e6",te=Le.split("").reduce((t,e,n)=>({...t,[e]:Ie(Fe,n)}),{}),_e=t=>[te[t[0]],te[t[1]]].join("-"),le=({iso2:t,size:e,src:n,protocol:o="https",disableLazyLoading:a,className:l,style:f,...i})=>{if(!t)return k.createElement("img",{className:A({addPrefix:["flag-emoji"],rawClassNames:[l]}),width:e,height:e,...i});let r=()=>{if(n)return n;let s=_e(t);return`${o}://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${s}.svg`};return k.createElement("img",{className:A({addPrefix:["flag-emoji"],rawClassNames:[l]}),src:r(),width:e,height:e,draggable:!1,"data-country":t,loading:a?void 0:"lazy",style:{width:e,height:e,...f},alt:"",...i})},Be=1e3,Ve=({show:t,dialCodePrefix:e="+",selectedCountry:n,countries:o=R,preferredCountries:a=[],flags:l,onSelect:f,onClose:i,...r})=>{let s=_(null),u=_(),m=Z(()=>{if(!a||!a.length)return o;let d=[],g=[...o];for(let h of a){let x=g.findIndex(M=>F(M).iso2===h);if(x!==-1){let M=g.splice(x,1)[0];d.push(M)}}return d.concat(g)},[o,a]),v=_({updatedAt:void 0,value:""}),c=d=>{let g=v.current.updatedAt&&new Date().getTime()-v.current.updatedAt.getTime()>Be;v.current={value:g?d:`${v.current.value}${d}`,updatedAt:new Date};let h=m.findIndex(x=>F(x).name.toLowerCase().startsWith(v.current.value));h!==-1&&b(h)},w=I(d=>m.findIndex(g=>F(g).iso2===d),[m]),[p,b]=W(w(n)),y=()=>{u.current!==n&&b(w(n))},C=I(d=>{b(w(d.iso2)),f?.(d)},[f,w]),N=d=>{let g=m.length-1,h=x=>d==="prev"?x-1:d==="next"?x+1:d==="last"?g:0;b(x=>{let M=h(x);return M<0?0:M>g?g:M})},z=d=>{if(d.stopPropagation(),d.key==="Enter"){d.preventDefault();let g=F(m[p]);C(g);return}if(d.key==="Escape"){i?.();return}if(d.key==="ArrowUp"){d.preventDefault(),N("prev");return}if(d.key==="ArrowDown"){d.preventDefault(),N("next");return}if(d.key==="PageUp"){d.preventDefault(),N("first");return}if(d.key==="PageDown"){d.preventDefault(),N("last");return}d.key===" "&&d.preventDefault(),d.key.length===1&&!d.altKey&&!d.ctrlKey&&!d.metaKey&&c(d.key.toLocaleLowerCase())},L=I(()=>{if(!s.current||p===void 0)return;let d=F(m[p]).iso2;if(d===u.current)return;let g=s.current.querySelector(`[data-country="${d}"]`);g&&(be(s.current,g),u.current=d)},[p,m]);return K(()=>{L()},[p,L]),K(()=>{s.current&&(t?s.current.focus():y())},[t]),K(()=>{y()},[n]),k.createElement("ul",{ref:s,role:"listbox",className:A({addPrefix:["country-selector-dropdown"],rawClassNames:[r.className]}),style:{display:t?"block":"none",...r.style},onKeyDown:z,onBlur:i,tabIndex:-1,"aria-activedescendant":`react-international-phone__${F(m[p]).iso2}-option`},m.map((d,g)=>{let h=F(d),x=h.iso2===n,M=g===p,E=a.includes(h.iso2),V=g===a.length-1,O=l?.find(q=>q.iso2===h.iso2);return k.createElement(k.Fragment,{key:h.iso2},k.createElement("li",{"data-country":h.iso2,role:"option","aria-selected":x,"aria-label":`${h.name} ${e}${h.dialCode}`,id:`react-international-phone__${h.iso2}-option`,className:A({addPrefix:["country-selector-dropdown__list-item",E&&"country-selector-dropdown__list-item--preferred",x&&"country-selector-dropdown__list-item--selected",M&&"country-selector-dropdown__list-item--focused"],rawClassNames:[r.listItemClassName,E&&r.listItemPreferredClassName,x&&r.listItemSelectedClassName,M&&r.listItemFocusedClassName]}),onClick:()=>C(h),style:r.listItemStyle,title:h.name},k.createElement(le,{iso2:h.iso2,src:O?.src,className:A({addPrefix:["country-selector-dropdown__list-item-flag-emoji"],rawClassNames:[r.listItemFlagClassName]}),style:r.listItemFlagStyle}),k.createElement("span",{className:A({addPrefix:["country-selector-dropdown__list-item-country-name"],rawClassNames:[r.listItemCountryNameClassName]}),style:r.listItemCountryNameStyle},h.name),k.createElement("span",{className:A({addPrefix:["country-selector-dropdown__list-item-dial-code"],rawClassNames:[r.listItemDialCodeClassName]}),style:r.listItemDialCodeStyle},e,h.dialCode)),V?k.createElement("hr",{className:A({addPrefix:["country-selector-dropdown__preferred-list-divider"],rawClassNames:[r.preferredListDividerClassName]}),style:r.preferredListDividerStyle}):null)}))},ze=k.memo(({selectedCountry:t,onSelect:e,disabled:n,hideDropdown:o,countries:a=R,preferredCountries:l=[],flags:f,renderButtonWrapper:i,...r})=>{let[s,u]=W(!1),m=Z(()=>{if(t)return T({value:t,field:"iso2",countries:a})},[a,t]),v=_(null),c=p=>{p.key&&["ArrowUp","ArrowDown"].includes(p.key)&&(p.preventDefault(),u(!0))},w=()=>{let p={title:m?.name,onClick:()=>u(y=>!y),onMouseDown:y=>y.preventDefault(),onKeyDown:c,disabled:o||n,role:"combobox","aria-label":"Country selector","aria-haspopup":"listbox","aria-expanded":s},b=k.createElement("div",{className:A({addPrefix:["country-selector-button__button-content"],rawClassNames:[r.buttonContentWrapperClassName]}),style:r.buttonContentWrapperStyle},k.createElement(le,{iso2:t,src:f?.find(y=>y.iso2===t)?.src,className:A({addPrefix:["country-selector-button__flag-emoji",n&&"country-selector-button__flag-emoji--disabled"],rawClassNames:[r.flagClassName]}),style:{visibility:t?"visible":"hidden",...r.flagStyle}}),!o&&k.createElement("div",{className:A({addPrefix:["country-selector-button__dropdown-arrow",n&&"country-selector-button__dropdown-arrow--disabled",s&&"country-selector-button__dropdown-arrow--active"],rawClassNames:[r.dropdownArrowClassName]}),style:r.dropdownArrowStyle}));return i?i({children:b,rootProps:p}):k.createElement("button",{...p,type:"button",className:A({addPrefix:["country-selector-button",s&&"country-selector-button--active",n&&"country-selector-button--disabled",o&&"country-selector-button--hide-dropdown"],rawClassNames:[r.buttonClassName]}),"data-country":t,style:r.buttonStyle},b)};return k.createElement("div",{className:A({addPrefix:["country-selector"],rawClassNames:[r.className]}),style:r.style,ref:v},w(),k.createElement(Ve,{show:s,countries:a,preferredCountries:l,flags:f,onSelect:p=>{u(!1),e?.(p)},selectedCountry:t,onClose:()=>{u(!1)},...r.dropdownStyleProps}))}),Oe=({dialCode:t,prefix:e,disabled:n,style:o,className:a})=>k.createElement("div",{className:A({addPrefix:["dial-code-preview",n&&"dial-code-preview--disabled"],rawClassNames:[a]}),style:o},`${e}${t}`);se(({value:t,onChange:e,countries:n=R,preferredCountries:o,hideDropdown:a,showDisabledDialCodeAndPrefix:l,disableFocusAfterCountrySelect:f,flags:i,style:r,className:s,inputStyle:u,inputClassName:m,countrySelectorStyleProps:v,dialCodePreviewStyleProps:c,inputProps:w,placeholder:p,disabled:b,name:y,onFocus:C,onBlur:N,required:z,autoFocus:L,...d},g)=>{let h=I(P=>{e?.(P.phone,{country:P.country,inputValue:P.inputValue})},[e]),{phone:x,inputValue:M,inputRef:E,country:V,setCountry:O,handlePhoneValueChange:q}=ne({value:t,countries:n,...d,onChange:h}),Y=d.disableDialCodeAndPrefix&&l&&V?.dialCode,D=I(P=>{O(P.iso2,{focusOnInput:!f})},[O,f]);return ue(g,()=>E.current?Object.assign(E.current,{setCountry:O,state:{phone:x,inputValue:M,country:V}}):null,[E,O,x,M,V]),k.createElement("div",{ref:g,className:A({addPrefix:["input-container"],rawClassNames:[s]}),style:r},k.createElement(ze,{onSelect:D,flags:i,selectedCountry:V?.iso2,countries:n,preferredCountries:o,disabled:b,hideDropdown:a,...v}),Y&&k.createElement(Oe,{dialCode:V.dialCode,prefix:d.prefix??"+",disabled:b,...c}),k.createElement("input",{onChange:q,value:M,type:"tel",ref:E,className:A({addPrefix:["input",b&&"input--disabled"],rawClassNames:[m]}),placeholder:p,disabled:b,style:u,name:y,onFocus:C,onBlur:N,autoFocus:L,required:z,...w}))});const je=R.map(F);function Ze({value:t,onChange:e,defaultCountry:n="us",...o}){const a=_(null),l=_(null),{inputValue:f,handlePhoneValueChange:i,inputRef:r,country:s,setCountry:u}=ne({defaultCountry:n,value:t,countries:R,onChange:C=>{e?.(C.phone)},forceDialCode:!0}),m=`+${s.dialCode}`,{startsWith:v}=ie({sensitivity:"base"}),[c,w]=W(""),[p,b]=W(!1),y=Z(()=>je.filter(C=>v(C.name,c)),[c]);return K(()=>{p&&l.current?.focus()},[p]),H("div",{className:J("flex relative",o.label?"pt-4":""),"aria-label":o["aria-label"],children:[H(de,{isOpen:p,onOpenChange:b,children:[H(ce,{"aria-label":"Select Country",className:"flex px-4 h-10 text-sm items-center rounded-l-md bg-surface-subtle gap-2 uppercase [&[aria-expanded=false]_svg]:rotate-180 border border-r-0 border-border",excludeFromTabOrder:!0,children:[s.iso2,j("svg",{width:"15",height:"8",viewBox:"0 0 15 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:j("path",{d:"M1 7L7.5 0.999999L14 7",stroke:"currentColor"})})]}),H("div",{className:J("w-full grid absolute left-0 top-[calc(100%+.25rem)] bg-white z-50 rounded-md text-slate-600 border border-border","shadow-inner",p?"block":"hidden"),ref:a,children:[j("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",viewBox:"0 0 17 16",className:"absolute top-4 left-[1.325rem]",children:j("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.3 6.9a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-1.1 5.7c-1.1.7-2.4 1.2-3.8 1.2a6.9 6.9 0 1 1 5.3-2.5l3 3-1.4 1.4-3.1-3Z",clipRule:"evenodd"})}),j(fe,{"aria-label":"Search for countries",placeholder:"Search for countries",className:J("pl-12 pr-5 py-4 w-full m-0 border-0 text-fg-strong transition-all duration-[0.25s] ease outline-0 bg-transparent","placeholder:text-fg-strong focus:outline-0","border-b border-border-subtle"),onChange:C=>w(C.target.value),onBlur:()=>{b(!1),r.current?.focus()},value:c,ref:l}),j("div",{className:"p-2.5",children:j(pe,{className:"text-fg-strong max-h-60 overflow-y-auto",selectionMode:"single","aria-label":"Countries List",onSelectionChange:C=>{u(String([...C][0])),w(""),b(!1)},children:(p?y:[]).map(C=>H(me,{id:C.iso2,value:C,textValue:C.iso2,className:"p-3 text-fg data-[hovered]:bg-surface-subtle rounded-md",children:[C.name," (+",C.dialCode,")"]},C.iso2))})})]})]}),j(he,{...o,value:f,inputProps:{onChange:i},ref:r,classNames:{input:J("rounded-l-none",f.trim()===m?"text-slate-600":""),label:"absolute top-0 left-0"}})]})}export{Ze as PhoneInput,Ze as default};
|
|
1
|
+
"use client";import{jsxs as H,jsx as j}from"react/jsx-runtime";import{useFilter as ie}from"react-aria";import k,{useState as W,useMemo as Z,useRef as _,forwardRef as se,useCallback as I,useImperativeHandle as ue,useEffect as K}from"react";import{DialogTrigger as de,Button as ce,Input as fe,ListBox as pe,ListBoxItem as me}from"react-aria-components";import{cn as J}from"../../utils/cn.js";import{Input as he}from"../Input/Input.js";import"../Skeleton/Skeleton.js";import"../../hooks/useIsClient.js";var R=[["Afghanistan","af","93"],["Albania","al","355"],["Algeria","dz","213"],["Andorra","ad","376"],["Angola","ao","244"],["Antigua and Barbuda","ag","1268"],["Argentina","ar","54",{default:"(..) .... ....","/^11/":"(..) .... ....","/^15/":"(..) ... ....","/^(2|3|4|5)/":"(.) .... ....","/^9/":"(.) .... ....."},0],["Armenia","am","374",".. ......"],["Aruba","aw","297"],["Australia","au","61",{default:". .... ....","/^4/":"... ... ...","/^5(?!50)/":"... ... ...","/^1(3|8)00/":".... ... ...","/^13/":".. .. ..","/^180/":"... ...."},0,[]],["Austria","at","43"],["Azerbaijan","az","994","(..) ... .. .."],["Bahamas","bs","1242"],["Bahrain","bh","973",".... ...."],["Bangladesh","bd","880"],["Barbados","bb","1246"],["Belarus","by","375","(..) ... .. .."],["Belgium","be","32","... .. .. .."],["Belize","bz","501"],["Benin","bj","229"],["Bhutan","bt","975"],["Bolivia","bo","591"],["Bosnia and Herzegovina","ba","387"],["Botswana","bw","267"],["Brazil","br","55","(..) .....-...."],["British Indian Ocean Territory","io","246"],["Brunei","bn","673"],["Bulgaria","bg","359"],["Burkina Faso","bf","226"],["Burundi","bi","257"],["Cambodia","kh","855"],["Cameroon","cm","237"],["Canada","ca","1","(...) ...-....",1,["204","226","236","249","250","289","306","343","365","387","403","416","418","431","437","438","450","506","514","519","548","579","581","587","604","613","639","647","672","705","709","742","778","780","782","807","819","825","867","873","902","905"]],["Cape Verde","cv","238"],["Caribbean Netherlands","bq","599","",1],["Cayman Islands","ky","1","... ... ....",4,["345"]],["Central African Republic","cf","236"],["Chad","td","235"],["Chile","cl","56"],["China","cn","86","... .... ...."],["Colombia","co","57","... ... ...."],["Comoros","km","269"],["Congo","cd","243"],["Congo","cg","242"],["Costa Rica","cr","506","....-...."],["Côte d'Ivoire","ci","225",".. .. .. .. .."],["Croatia","hr","385"],["Cuba","cu","53"],["Curaçao","cw","599","",0],["Cyprus","cy","357",".. ......"],["Czech Republic","cz","420","... ... ..."],["Denmark","dk","45",".. .. .. .."],["Djibouti","dj","253",".. .. ...."],["Dominica","dm","1767"],["Dominican Republic","do","1","(...) ...-....",2,["809","829","849"]],["Ecuador","ec","593"],["Egypt","eg","20"],["El Salvador","sv","503","....-...."],["Equatorial Guinea","gq","240"],["Eritrea","er","291"],["Estonia","ee","372",".... ......"],["Ethiopia","et","251",".. ... ...."],["Faroe Islands","fo","298",".. .. .."],["Fiji","fj","679"],["Finland","fi","358",".. ... .. .."],["France","fr","33",". .. .. .. .."],["French Guiana","gf","594","... .. .. .."],["French Polynesia","pf","689",{"/^44/":".. .. ..","/^80[0-5]/":"... .. .. ..",default:".. .. .. .."}],["Gabon","ga","241"],["Gambia","gm","220"],["Georgia","ge","995"],["Germany","de","49","... ........."],["Ghana","gh","233"],["Gibraltar","gi","350"],["Greece","gr","30"],["Greenland","gl","299",".. .. .."],["Grenada","gd","1473"],["Guadeloupe","gp","590","... .. .. ..",0],["Guam","gu","1671"],["Guatemala","gt","502","....-...."],["Guinea","gn","224"],["Guinea-Bissau","gw","245"],["Guyana","gy","592"],["Haiti","ht","509","....-...."],["Honduras","hn","504"],["Hong Kong","hk","852",".... ...."],["Hungary","hu","36"],["Iceland","is","354","... ...."],["India","in","91",".....-....."],["Indonesia","id","62"],["Iran","ir","98","... ... ...."],["Iraq","iq","964"],["Ireland","ie","353",".. ......."],["Israel","il","972","... ... ...."],["Italy","it","39","... .......",0],["Jamaica","jm","1876"],["Japan","jp","81",".. .... ...."],["Jordan","jo","962"],["Kazakhstan","kz","7","... ...-..-..",0],["Kenya","ke","254"],["Kiribati","ki","686"],["Kosovo","xk","383"],["Kuwait","kw","965",".... ...."],["Kyrgyzstan","kg","996","... ... ..."],["Laos","la","856"],["Latvia","lv","371",".. ... ..."],["Lebanon","lb","961"],["Lesotho","ls","266"],["Liberia","lr","231"],["Libya","ly","218"],["Liechtenstein","li","423"],["Lithuania","lt","370"],["Luxembourg","lu","352"],["Macau","mo","853"],["Macedonia","mk","389"],["Madagascar","mg","261"],["Malawi","mw","265"],["Malaysia","my","60","..-....-...."],["Maldives","mv","960"],["Mali","ml","223"],["Malta","mt","356"],["Marshall Islands","mh","692"],["Martinique","mq","596","... .. .. .."],["Mauritania","mr","222"],["Mauritius","mu","230"],["Mayotte","yt","262","... .. .. ..",1,["269","639"]],["Mexico","mx","52","... ... ....",0],["Micronesia","fm","691"],["Moldova","md","373","(..) ..-..-.."],["Monaco","mc","377"],["Mongolia","mn","976"],["Montenegro","me","382"],["Morocco","ma","212"],["Mozambique","mz","258"],["Myanmar","mm","95"],["Namibia","na","264"],["Nauru","nr","674"],["Nepal","np","977"],["Netherlands","nl","31",{"/^06/":"(.). .........","/^6/":". .........","/^0(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":"(.).. ........","/^(10|13|14|15|20|23|24|26|30|33|35|36|38|40|43|44|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79|82|84|85|87|88|91)/":".. ........","/^0/":"(.)... .......",default:"... ......."}],["New Caledonia","nc","687"],["New Zealand","nz","64","...-...-...."],["Nicaragua","ni","505"],["Niger","ne","227"],["Nigeria","ng","234"],["North Korea","kp","850"],["Norway","no","47","... .. ..."],["Oman","om","968",".... ...."],["Pakistan","pk","92","...-......."],["Palau","pw","680"],["Palestine","ps","970"],["Panama","pa","507"],["Papua New Guinea","pg","675"],["Paraguay","py","595"],["Peru","pe","51"],["Philippines","ph","63","... ... ...."],["Poland","pl","48","...-...-..."],["Portugal","pt","351"],["Puerto Rico","pr","1","(...) ...-....",3,["787","939"]],["Qatar","qa","974",".... ...."],["Réunion","re","262","... .. .. ..",0],["Romania","ro","40"],["Russia","ru","7","(...) ...-..-..",1],["Rwanda","rw","250"],["Saint Kitts and Nevis","kn","1869"],["Saint Lucia","lc","1758"],["Saint Pierre & Miquelon","pm","508",{"/^708/":"... ... ...","/^8/":"... .. .. ..",default:".. .. .."}],["Saint Vincent and the Grenadines","vc","1784"],["Samoa","ws","685"],["San Marino","sm","378"],["São Tomé and Príncipe","st","239"],["Saudi Arabia","sa","966",".. ... ...."],["Senegal","sn","221"],["Serbia","rs","381"],["Seychelles","sc","248"],["Sierra Leone","sl","232"],["Singapore","sg","65","....-...."],["Slovakia","sk","421"],["Slovenia","si","386"],["Solomon Islands","sb","677"],["Somalia","so","252"],["South Africa","za","27"],["South Korea","kr","82","... .... ...."],["South Sudan","ss","211"],["Spain","es","34","... ... ..."],["Sri Lanka","lk","94"],["Sudan","sd","249"],["Suriname","sr","597"],["Swaziland","sz","268"],["Sweden","se","46","... ... ..."],["Switzerland","ch","41",".. ... .. .."],["Syria","sy","963"],["Taiwan","tw","886"],["Tajikistan","tj","992"],["Tanzania","tz","255"],["Thailand","th","66"],["Timor-Leste","tl","670"],["Togo","tg","228"],["Tonga","to","676"],["Trinidad and Tobago","tt","1868"],["Tunisia","tn","216"],["Turkey","tr","90","... ... .. .."],["Turkmenistan","tm","993"],["Tuvalu","tv","688"],["Uganda","ug","256"],["Ukraine","ua","380","(..) ... .. .."],["United Arab Emirates","ae","971",{default:".. ... ....","/^5[024568]/":".. ... ....","/^[234679]/":". ... ...."}],["United Kingdom","gb","44",".... ......"],["United States","us","1","(...) ...-....",0],["Uruguay","uy","598"],["Uzbekistan","uz","998",".. ... .. .."],["Vanuatu","vu","678"],["Vatican City","va","39",".. .... ....",1],["Venezuela","ve","58"],["Vietnam","vn","84"],["Wallis & Futuna","wf","681",".. .. .."],["Yemen","ye","967"],["Zambia","zm","260"],["Zimbabwe","zw","263"]],ye="react-international-phone-",ae=(...t)=>t.filter(e=>!!e).join(" ").trim(),Ce=(...t)=>ae(...t).split(" ").map(e=>`${ye}${e}`).join(" "),A=({addPrefix:t,rawClassNames:e})=>ae(Ce(...t),...e),ge=({value:t,mask:e,maskSymbol:n,offset:o=0,trimNonMaskCharsLeftover:a=!1,allowMaskOverflow:l=!1})=>{if(t.length<o)return t;let f=t.slice(0,o),i=t.slice(o),r=e.split("").filter(c=>c===n).length,s=i.slice(0,r),u=l?i.slice(r):"",m=f,v=0;for(let c of e.split("")){if(v>=s.length){if(!a&&c!==n){m+=c;continue}break}c===n?(m+=s[v],v+=1):m+=c}return m+u},G=t=>t?/^\d+$/.test(t):!1,X=t=>t.replace(/\D/g,""),be=(t,e)=>{let n=t.style.display;n!=="block"&&(t.style.display="block");let o=t.getBoundingClientRect(),a=e.getBoundingClientRect(),l=a.top-o.top,f=o.bottom-a.bottom;l>=0&&f>=0||(Math.abs(l)<Math.abs(f)?t.scrollTop+=l:t.scrollTop-=f),t.style.display=n},ve=()=>typeof window>"u"?!1:window.navigator.userAgent.toLowerCase().includes("macintosh"),we=(t,e)=>{let n=e.disableDialCodeAndPrefix?!1:e.forceDialCode,o=e.disableDialCodeAndPrefix?!1:e.insertDialCodeOnEmpty,a=t,l=s=>e.trimNonDigitsEnd?s.trim():s;if(!a)return o&&!a.length||n?l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`):l(a);if(a=X(a),a===e.dialCode&&!e.disableDialCodeAndPrefix)return l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(e.dialCode.startsWith(a)&&!e.disableDialCodeAndPrefix)return l(n?`${e.prefix}${e.dialCode}${e.charAfterDialCode}`:`${e.prefix}${a}`);if(!a.startsWith(e.dialCode)&&!e.disableDialCodeAndPrefix){if(n)return l(`${e.prefix}${e.dialCode}${e.charAfterDialCode}`);if(a.length<e.dialCode.length)return l(`${e.prefix}${a}`)}let f=()=>{let s=e.dialCode.length,u=a.slice(0,s),m=a.slice(s);return{phoneLeftSide:u,phoneRightSide:m}},{phoneLeftSide:i,phoneRightSide:r}=f();return i=`${e.prefix}${i}${e.charAfterDialCode}`,r=ge({value:r,mask:e.mask,maskSymbol:e.maskChar,trimNonMaskCharsLeftover:e.trimNonDigitsEnd||e.disableDialCodeAndPrefix&&r.length===0,allowMaskOverflow:e.allowMaskOverflow}),e.disableDialCodeAndPrefix&&(i=""),l(`${i}${r}`)},De=({phoneBeforeInput:t,phoneAfterInput:e,phoneAfterFormatted:n,cursorPositionAfterInput:o,leftOffset:a=0,deletion:l})=>{if(o<a)return a;if(!t)return n.length;let f=null;for(let u=o-1;u>=0;u-=1)if(G(e[u])){f=u;break}if(f===null){for(let u=0;u<e.length;u+=1)if(G(n[u]))return u;return e.length}let i=0;for(let u=0;u<f;u+=1)G(e[u])&&(i+=1);let r=0,s=0;for(let u=0;u<n.length&&(r+=1,G(n[u])&&(s+=1),!(s>=i+1));u+=1);if(l!=="backward")for(;!G(n[r])&&r<n.length;)r+=1;return r},Q=({phone:t,prefix:e})=>t?`${e}${X(t)}`:"";function ee({value:t,country:e,insertDialCodeOnEmpty:n,trimNonDigitsEnd:o,countries:a,prefix:l,charAfterDialCode:f,forceDialCode:i,disableDialCodeAndPrefix:r,defaultMask:s,countryGuessingEnabled:u,disableFormatting:m,allowMaskOverflow:v}){let c=t;r&&(c=c.startsWith(`${l}`)?c:`${l}${e.dialCode}${c}`);let w=u?Ee({phone:c,countries:a,currentCountryIso2:e?.iso2}):void 0,p=w?.country??e,b=we(c,{prefix:l,mask:Ae({phone:c,country:p,defaultMask:s,disableFormatting:m}),maskChar:re,dialCode:p.dialCode,trimNonDigitsEnd:o,charAfterDialCode:f,forceDialCode:i,insertDialCodeOnEmpty:n,disableDialCodeAndPrefix:r,allowMaskOverflow:v}),y=u&&!w?.fullDialCodeMatch?e:p;return{phone:Q({phone:r?`${y.dialCode}${b}`:b,prefix:l}),inputValue:b,country:y}}var xe=t=>{if(t?.toLocaleLowerCase().includes("delete")??!1)return t?.toLocaleLowerCase().includes("forward")?"forward":"backward"},ke=(t,{country:e,insertDialCodeOnEmpty:n,phoneBeforeInput:o,prefix:a,charAfterDialCode:l,forceDialCode:f,disableDialCodeAndPrefix:i,countryGuessingEnabled:r,defaultMask:s,disableFormatting:u,countries:m,allowMaskOverflow:v})=>{let c=t.nativeEvent,w=c.inputType,p=xe(w),b=!!w?.startsWith("insertFrom"),y=w==="insertText",C=c?.data||void 0,N=t.target.value,z=t.target.selectionStart??0;if(w?.includes("history"))return{inputValue:o,phone:Q({phone:o,prefix:a}),cursorPosition:o.length,country:e};if(y&&!G(C)&&N!==a)return{inputValue:o,phone:Q({phone:i?`${e.dialCode}${o}`:o,prefix:a}),cursorPosition:z-(C?.length??0),country:e};if(f&&!N.startsWith(`${a}${e.dialCode}`)&&!b){let x=N?o:`${a}${e.dialCode}${l}`;return{inputValue:x,phone:Q({phone:x,prefix:a}),cursorPosition:a.length+e.dialCode.length+l.length,country:e}}let{phone:L,inputValue:d,country:g}=ee({value:N,country:e,trimNonDigitsEnd:p==="backward",insertDialCodeOnEmpty:n,countryGuessingEnabled:r,countries:m,prefix:a,charAfterDialCode:l,forceDialCode:f,disableDialCodeAndPrefix:i,disableFormatting:u,defaultMask:s,allowMaskOverflow:v}),h=De({cursorPositionAfterInput:z,phoneBeforeInput:o,phoneAfterInput:N,phoneAfterFormatted:d,leftOffset:f?a.length+e.dialCode.length+l.length:0,deletion:p});return{phone:L,inputValue:d,cursorPosition:h,country:g}},Ne=(t,e)=>{let n=Object.keys(t),o=Object.keys(e);if(n.length!==o.length)return!1;for(let a of n)if(t[a]!==e[a])return!1;return!0},Pe=()=>{let t=_(),e=_(Date.now()),n=I(()=>{let o=Date.now(),a=t.current?o-e.current:void 0;return t.current=e.current,e.current=o,a},[]);return Z(()=>({check:n}),[n])},Se={size:20,overrideLastItemDebounceMS:-1};function Me(t,e){let{size:n,overrideLastItemDebounceMS:o,onChange:a}={...Se,...e},[l,f]=W(t),i=_([l]),r=_(0),s=Pe(),u=I((c,w)=>{let p=i.current[r.current];if(c===p||typeof c=="object"&&typeof p=="object"&&Ne(c,p))return;let b=o>0,y=s.check(),C=b&&y!==void 0?y>o:!0;if(w?.overrideLastItem!==void 0?w.overrideLastItem:!C)i.current=[...i.current.slice(0,r.current),c];else{let N=i.current.length>=n;i.current=[...i.current.slice(N?1:0,r.current+1),c],N||(r.current+=1)}f(c),a?.(c)},[a,o,n,s]),m=I(()=>{if(r.current<=0)return{success:!1};let c=i.current[r.current-1];return f(c),r.current-=1,a?.(c),{success:!0,value:c}},[a]),v=I(()=>{if(r.current+1>=i.current.length)return{success:!1};let c=i.current[r.current+1];return f(c),r.current+=1,a?.(c),{success:!0,value:c}},[a]);return[l,u,m,v]}var re=".",$={defaultCountry:"us",value:"",prefix:"+",defaultMask:"............",charAfterDialCode:" ",historySaveDebounceMS:200,disableCountryGuess:!1,disableDialCodePrefill:!1,forceDialCode:!1,disableDialCodeAndPrefix:!1,disableFormatting:!1,allowMaskOverflow:!1,countries:R},ne=({defaultCountry:t=$.defaultCountry,value:e=$.value,countries:n=$.countries,prefix:o=$.prefix,defaultMask:a=$.defaultMask,charAfterDialCode:l=$.charAfterDialCode,historySaveDebounceMS:f=$.historySaveDebounceMS,disableCountryGuess:i=$.disableCountryGuess,disableDialCodePrefill:r=$.disableDialCodePrefill,forceDialCode:s=$.forceDialCode,disableDialCodeAndPrefix:u=$.disableDialCodeAndPrefix,disableFormatting:m=$.disableFormatting,allowMaskOverflow:v=$.allowMaskOverflow,onChange:c,inputRef:w})=>{let p={countries:n,prefix:o,charAfterDialCode:l,forceDialCode:u?!1:s,disableDialCodeAndPrefix:u,defaultMask:a,countryGuessingEnabled:!i,disableFormatting:m,allowMaskOverflow:v},b=_(null),y=w||b,C=D=>{Promise.resolve().then(()=>{typeof window>"u"||y.current!==document?.activeElement||y.current?.setSelectionRange(D,D)})},N=I(D=>T({value:D,field:"iso2",countries:n}),[n]),z=I(({inputValue:D,phone:P,country:S})=>{if(!c)return;let B=N(S);c({phone:P,inputValue:D,country:B})},[N,c]),[{phone:L,inputValue:d,country:g},h,x,M]=Me(()=>{let D=T({value:t,field:"iso2",countries:n});D||console.error(`[react-international-phone]: can not find a country with "${t}" iso2 code`);let P=D||T({value:"us",field:"iso2",countries:n}),{phone:S,inputValue:B,country:U}=ee({value:e,country:P,insertDialCodeOnEmpty:!r,...p});return C(B.length),{phone:S,inputValue:B,country:U.iso2}},{overrideLastItemDebounceMS:f,onChange:z}),E=Z(()=>N(g),[g,N]);K(()=>{let D=y.current;if(!D)return;let P=S=>{if(!S.key)return;let B=S.ctrlKey,U=S.metaKey,oe=S.shiftKey;if(S.key.toLowerCase()==="z"){if(ve()){if(!U)return}else if(!B)return;oe?M():x()}};return D.addEventListener("keydown",P),()=>{D.removeEventListener("keydown",P)}},[y,x,M]);let V=D=>{D.preventDefault();let{phone:P,inputValue:S,country:B,cursorPosition:U}=ke(D,{country:E,phoneBeforeInput:d,insertDialCodeOnEmpty:!1,...p});return h({inputValue:S,phone:P,country:B.iso2}),C(U),e},O=I((D,P={focusOnInput:!1})=>{let S=T({value:D,field:"iso2",countries:n});if(!S){console.error(`[react-international-phone]: can not find a country with "${D}" iso2 code`);return}let B=u?"":`${o}${S.dialCode}${l}`;h({inputValue:B,phone:`${o}${S.dialCode}`,country:S.iso2}),P.focusOnInput&&Promise.resolve().then(()=>{y.current?.focus()})},[n,u,o,l,h,y]),[q,Y]=W(!1);return K(()=>{if(!q){Y(!0),e!==L&&c?.({inputValue:d,phone:L,country:E});return}if(e===L)return;let{phone:D,inputValue:P,country:S}=ee({value:e,country:E,insertDialCodeOnEmpty:!r,...p});h({phone:D,inputValue:P,country:S.iso2})},[e]),{phone:L,inputValue:d,country:E,setCountry:O,handlePhoneValueChange:V,inputRef:y}},Ae=({phone:t,country:e,defaultMask:n="............",disableFormatting:o=!1})=>{let a=e.format,l=i=>o?i.replace(new RegExp(`[^${re}]`,"g"),""):i;if(!a)return l(n);if(typeof a=="string")return l(a);if(!a.default)return console.error(`[react-international-phone]: default mask for ${e.iso2} is not provided`),l(n);let f=Object.keys(a).find(i=>{if(i==="default")return!1;if(!(i.charAt(0)==="/"&&i.charAt(i.length-1)==="/"))return console.error(`[react-international-phone]: format regex "${i}" for ${e.iso2} is not valid`),!1;let r=new RegExp(i.substring(1,i.length-1)),s=t.replace(e.dialCode,"");return r.test(X(s))});return l(f?a[f]:a.default)},F=t=>{let[e,n,o,a,l,f]=t;return{name:e,iso2:n,dialCode:o,format:a,priority:l,areaCodes:f}},$e=t=>`Field "${t}" is not supported`,T=({field:t,value:e,countries:n=R})=>{if(["priority"].includes(t))throw new Error($e(t));let o=n.find(a=>{let l=F(a);return e===l[t]});if(o)return F(o)},Ee=({phone:t,countries:e=R,currentCountryIso2:n})=>{let o={country:void 0,fullDialCodeMatch:!1};if(!t)return o;let a=X(t);if(!a)return o;let l=o,f=({country:i,fullDialCodeMatch:r})=>{let s=i.dialCode===l.country?.dialCode,u=(i.priority??0)<(l.country?.priority??0);(!s||u)&&(l={country:i,fullDialCodeMatch:r})};for(let i of e){let r=F(i),{dialCode:s,areaCodes:u}=r;if(a.startsWith(s)){let m=l.country?Number(s)>=Number(l.country.dialCode):!0;if(u){let v=a.substring(s.length);for(let c of u)if(v.startsWith(c))return{country:r,fullDialCodeMatch:!0}}(m||s===a||!l.fullDialCodeMatch)&&f({country:r,fullDialCodeMatch:!0})}l.fullDialCodeMatch||a.length<s.length&&s.startsWith(a)&&(!l.country||Number(s)<=Number(l.country.dialCode))&&f({country:r,fullDialCodeMatch:!1})}if(n){let i=T({value:n,field:"iso2",countries:e});if(!i)return l;let r=i?(s=>{if(!s?.areaCodes)return!1;let u=a.substring(s.dialCode.length);return s.areaCodes.some(m=>m.startsWith(u))})(i):!1;l&&l.country?.dialCode===i.dialCode&&l.country!==i&&l.fullDialCodeMatch&&(!i.areaCodes||r)&&(l={country:i,fullDialCodeMatch:!0})}return l},Ie=(t,e)=>{let n=parseInt(t,16);return Number(n+e).toString(16)},Le="abcdefghijklmnopqrstuvwxyz",Fe="1f1e6",te=Le.split("").reduce((t,e,n)=>({...t,[e]:Ie(Fe,n)}),{}),_e=t=>[te[t[0]],te[t[1]]].join("-"),le=({iso2:t,size:e,src:n,protocol:o="https",disableLazyLoading:a,className:l,style:f,...i})=>{if(!t)return k.createElement("img",{className:A({addPrefix:["flag-emoji"],rawClassNames:[l]}),width:e,height:e,...i});let r=()=>{if(n)return n;let s=_e(t);return`${o}://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/${s}.svg`};return k.createElement("img",{className:A({addPrefix:["flag-emoji"],rawClassNames:[l]}),src:r(),width:e,height:e,draggable:!1,"data-country":t,loading:a?void 0:"lazy",style:{width:e,height:e,...f},alt:"",...i})},Be=1e3,Ve=({show:t,dialCodePrefix:e="+",selectedCountry:n,countries:o=R,preferredCountries:a=[],flags:l,onSelect:f,onClose:i,...r})=>{let s=_(null),u=_(),m=Z(()=>{if(!a||!a.length)return o;let d=[],g=[...o];for(let h of a){let x=g.findIndex(M=>F(M).iso2===h);if(x!==-1){let M=g.splice(x,1)[0];d.push(M)}}return d.concat(g)},[o,a]),v=_({updatedAt:void 0,value:""}),c=d=>{let g=v.current.updatedAt&&new Date().getTime()-v.current.updatedAt.getTime()>Be;v.current={value:g?d:`${v.current.value}${d}`,updatedAt:new Date};let h=m.findIndex(x=>F(x).name.toLowerCase().startsWith(v.current.value));h!==-1&&b(h)},w=I(d=>m.findIndex(g=>F(g).iso2===d),[m]),[p,b]=W(w(n)),y=()=>{u.current!==n&&b(w(n))},C=I(d=>{b(w(d.iso2)),f?.(d)},[f,w]),N=d=>{let g=m.length-1,h=x=>d==="prev"?x-1:d==="next"?x+1:d==="last"?g:0;b(x=>{let M=h(x);return M<0?0:M>g?g:M})},z=d=>{if(d.stopPropagation(),d.key==="Enter"){d.preventDefault();let g=F(m[p]);C(g);return}if(d.key==="Escape"){i?.();return}if(d.key==="ArrowUp"){d.preventDefault(),N("prev");return}if(d.key==="ArrowDown"){d.preventDefault(),N("next");return}if(d.key==="PageUp"){d.preventDefault(),N("first");return}if(d.key==="PageDown"){d.preventDefault(),N("last");return}d.key===" "&&d.preventDefault(),d.key.length===1&&!d.altKey&&!d.ctrlKey&&!d.metaKey&&c(d.key.toLocaleLowerCase())},L=I(()=>{if(!s.current||p===void 0)return;let d=F(m[p]).iso2;if(d===u.current)return;let g=s.current.querySelector(`[data-country="${d}"]`);g&&(be(s.current,g),u.current=d)},[p,m]);return K(()=>{L()},[p,L]),K(()=>{s.current&&(t?s.current.focus():y())},[t]),K(()=>{y()},[n]),k.createElement("ul",{ref:s,role:"listbox",className:A({addPrefix:["country-selector-dropdown"],rawClassNames:[r.className]}),style:{display:t?"block":"none",...r.style},onKeyDown:z,onBlur:i,tabIndex:-1,"aria-activedescendant":`react-international-phone__${F(m[p]).iso2}-option`},m.map((d,g)=>{let h=F(d),x=h.iso2===n,M=g===p,E=a.includes(h.iso2),V=g===a.length-1,O=l?.find(q=>q.iso2===h.iso2);return k.createElement(k.Fragment,{key:h.iso2},k.createElement("li",{"data-country":h.iso2,role:"option","aria-selected":x,"aria-label":`${h.name} ${e}${h.dialCode}`,id:`react-international-phone__${h.iso2}-option`,className:A({addPrefix:["country-selector-dropdown__list-item",E&&"country-selector-dropdown__list-item--preferred",x&&"country-selector-dropdown__list-item--selected",M&&"country-selector-dropdown__list-item--focused"],rawClassNames:[r.listItemClassName,E&&r.listItemPreferredClassName,x&&r.listItemSelectedClassName,M&&r.listItemFocusedClassName]}),onClick:()=>C(h),style:r.listItemStyle,title:h.name},k.createElement(le,{iso2:h.iso2,src:O?.src,className:A({addPrefix:["country-selector-dropdown__list-item-flag-emoji"],rawClassNames:[r.listItemFlagClassName]}),style:r.listItemFlagStyle}),k.createElement("span",{className:A({addPrefix:["country-selector-dropdown__list-item-country-name"],rawClassNames:[r.listItemCountryNameClassName]}),style:r.listItemCountryNameStyle},h.name),k.createElement("span",{className:A({addPrefix:["country-selector-dropdown__list-item-dial-code"],rawClassNames:[r.listItemDialCodeClassName]}),style:r.listItemDialCodeStyle},e,h.dialCode)),V?k.createElement("hr",{className:A({addPrefix:["country-selector-dropdown__preferred-list-divider"],rawClassNames:[r.preferredListDividerClassName]}),style:r.preferredListDividerStyle}):null)}))},ze=k.memo(({selectedCountry:t,onSelect:e,disabled:n,hideDropdown:o,countries:a=R,preferredCountries:l=[],flags:f,renderButtonWrapper:i,...r})=>{let[s,u]=W(!1),m=Z(()=>{if(t)return T({value:t,field:"iso2",countries:a})},[a,t]),v=_(null),c=p=>{p.key&&["ArrowUp","ArrowDown"].includes(p.key)&&(p.preventDefault(),u(!0))},w=()=>{let p={title:m?.name,onClick:()=>u(y=>!y),onMouseDown:y=>y.preventDefault(),onKeyDown:c,disabled:o||n,role:"combobox","aria-label":"Country selector","aria-haspopup":"listbox","aria-expanded":s},b=k.createElement("div",{className:A({addPrefix:["country-selector-button__button-content"],rawClassNames:[r.buttonContentWrapperClassName]}),style:r.buttonContentWrapperStyle},k.createElement(le,{iso2:t,src:f?.find(y=>y.iso2===t)?.src,className:A({addPrefix:["country-selector-button__flag-emoji",n&&"country-selector-button__flag-emoji--disabled"],rawClassNames:[r.flagClassName]}),style:{visibility:t?"visible":"hidden",...r.flagStyle}}),!o&&k.createElement("div",{className:A({addPrefix:["country-selector-button__dropdown-arrow",n&&"country-selector-button__dropdown-arrow--disabled",s&&"country-selector-button__dropdown-arrow--active"],rawClassNames:[r.dropdownArrowClassName]}),style:r.dropdownArrowStyle}));return i?i({children:b,rootProps:p}):k.createElement("button",{...p,type:"button",className:A({addPrefix:["country-selector-button",s&&"country-selector-button--active",n&&"country-selector-button--disabled",o&&"country-selector-button--hide-dropdown"],rawClassNames:[r.buttonClassName]}),"data-country":t,style:r.buttonStyle},b)};return k.createElement("div",{className:A({addPrefix:["country-selector"],rawClassNames:[r.className]}),style:r.style,ref:v},w(),k.createElement(Ve,{show:s,countries:a,preferredCountries:l,flags:f,onSelect:p=>{u(!1),e?.(p)},selectedCountry:t,onClose:()=>{u(!1)},...r.dropdownStyleProps}))}),Oe=({dialCode:t,prefix:e,disabled:n,style:o,className:a})=>k.createElement("div",{className:A({addPrefix:["dial-code-preview",n&&"dial-code-preview--disabled"],rawClassNames:[a]}),style:o},`${e}${t}`);se(({value:t,onChange:e,countries:n=R,preferredCountries:o,hideDropdown:a,showDisabledDialCodeAndPrefix:l,disableFocusAfterCountrySelect:f,flags:i,style:r,className:s,inputStyle:u,inputClassName:m,countrySelectorStyleProps:v,dialCodePreviewStyleProps:c,inputProps:w,placeholder:p,disabled:b,name:y,onFocus:C,onBlur:N,required:z,autoFocus:L,...d},g)=>{let h=I(P=>{e?.(P.phone,{country:P.country,inputValue:P.inputValue})},[e]),{phone:x,inputValue:M,inputRef:E,country:V,setCountry:O,handlePhoneValueChange:q}=ne({value:t,countries:n,...d,onChange:h}),Y=d.disableDialCodeAndPrefix&&l&&V?.dialCode,D=I(P=>{O(P.iso2,{focusOnInput:!f})},[O,f]);return ue(g,()=>E.current?Object.assign(E.current,{setCountry:O,state:{phone:x,inputValue:M,country:V}}):null,[E,O,x,M,V]),k.createElement("div",{ref:g,className:A({addPrefix:["input-container"],rawClassNames:[s]}),style:r},k.createElement(ze,{onSelect:D,flags:i,selectedCountry:V?.iso2,countries:n,preferredCountries:o,disabled:b,hideDropdown:a,...v}),Y&&k.createElement(Oe,{dialCode:V.dialCode,prefix:d.prefix??"+",disabled:b,...c}),k.createElement("input",{onChange:q,value:M,type:"tel",ref:E,className:A({addPrefix:["input",b&&"input--disabled"],rawClassNames:[m]}),placeholder:p,disabled:b,style:u,name:y,onFocus:C,onBlur:N,autoFocus:L,required:z,...w}))});const je=R.map(F);function Ze({value:t,onChange:e,defaultCountry:n="us",...o}){const a=_(null),l=_(null),{inputValue:f,handlePhoneValueChange:i,inputRef:r,country:s,setCountry:u}=ne({defaultCountry:n,value:t,countries:R,onChange:C=>{e?.(C.phone)},forceDialCode:!0}),m=`+${s.dialCode}`,{startsWith:v}=ie({sensitivity:"base"}),[c,w]=W(""),[p,b]=W(!1),y=Z(()=>je.filter(C=>v(C.name,c)),[c]);return K(()=>{p&&l.current?.focus()},[p]),H("div",{className:J("flex relative",o.label?"pt-4":""),"aria-label":o["aria-label"],children:[H(de,{isOpen:p,onOpenChange:b,children:[H(ce,{"aria-label":"Select Country",className:"flex px-4 h-10 text-sm items-center rounded-l-md bg-surface-subtle gap-2 uppercase [&[aria-expanded=false]_svg]:rotate-180 border border-r-0 border-border",excludeFromTabOrder:!0,children:[s.iso2,j("svg",{width:"15",height:"8",viewBox:"0 0 15 8",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:j("path",{d:"M1 7L7.5 0.999999L14 7",stroke:"currentColor"})})]}),H("div",{className:J("w-full grid absolute left-0 top-[calc(100%+.25rem)] bg-surface z-50 rounded-md text-fg-muted border border-border","shadow-inner",p?"block":"hidden"),ref:a,children:[j("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",fill:"none",viewBox:"0 0 17 16",className:"absolute top-4 left-[1.325rem]",children:j("path",{fill:"currentColor",fillRule:"evenodd",d:"M12.3 6.9a4.9 4.9 0 1 1-9.8 0 4.9 4.9 0 0 1 9.8 0Zm-1.1 5.7c-1.1.7-2.4 1.2-3.8 1.2a6.9 6.9 0 1 1 5.3-2.5l3 3-1.4 1.4-3.1-3Z",clipRule:"evenodd"})}),j(fe,{"aria-label":"Search for countries",placeholder:"Search for countries",className:J("pl-12 pr-5 py-4 w-full m-0 border-0 text-fg-strong transition-all duration-[0.25s] ease outline-0 bg-transparent","placeholder:text-fg-strong focus:outline-0","border-b border-border-subtle"),onChange:C=>w(C.target.value),onBlur:()=>{b(!1),r.current?.focus()},value:c,ref:l}),j("div",{className:"p-2.5",children:j(pe,{className:"text-fg-strong max-h-60 overflow-y-auto",selectionMode:"single","aria-label":"Countries List",onSelectionChange:C=>{u(String([...C][0])),w(""),b(!1)},children:(p?y:[]).map(C=>H(me,{id:C.iso2,value:C,textValue:C.iso2,className:"p-3 text-fg data-[hovered]:bg-surface-subtle rounded-md",children:[C.name," (+",C.dialCode,")"]},C.iso2))})})]})]}),j(he,{...o,value:f,inputProps:{onChange:i},ref:r,classNames:{input:J("rounded-l-none",f.trim()===m?"text-fg-muted":""),label:"absolute top-0 left-0"}})]})}export{Ze as PhoneInput,Ze as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as L,jsx as m}from"react/jsx-runtime";import{useState as G,useRef as H,useCallback as b,useEffect as $}from"react";import{Group as U,Label as J}from"react-aria-components";import{cn as
|
|
1
|
+
"use client";import{jsxs as L,jsx as m}from"react/jsx-runtime";import{useState as G,useRef as H,useCallback as b,useEffect as $}from"react";import{Group as U,Label as J}from"react-aria-components";import{cn as l}from"../../utils/cn.js";const j={alpha:/^[a-z]$/i,alphanumeric:/^[a-z0-9]$/i,numeric:/^[0-9]$/};function E(g,x){const c=g.split("");return Array.from({length:x},(k,f)=>c[f]??"")}function Z({autoFocus:g=!1,description:x,errorMessage:c,isDisabled:k=!1,isInvalid:f=!1,isMasked:I=!1,isRequired:K=!0,label:D,length:o=6,name:y,onChange:C,value:A,type:d="numeric",validationBehavior:M,className:R,classNames:p,inputProps:N,...W}){const v=A!==void 0,[T,_]=G(()=>E(A??"",o)),r=v?E(A,o):T,s=H([]),u=b(e=>{_(e),C?.(e.join(""))},[C]),h=b(e=>j[d].test(e),[d]),w=b((e,t)=>{const n=[...r];let a=e;for(let i=0;i<t.length&&e+i<o;i++)n[e+i]=t[i],a=e+i;u(n),s.current[Math.min(a+1,o-1)]?.focus()},[r,o,u]);$(()=>{s.current=s.current.slice(0,o)},[o]),$(()=>{g&&s.current[0]?.focus()},[g]);const z=b(e=>{const t=e.target.value,n=Number(e.target.getAttribute("data-pin-input-index"));if(t===""){u(r.map((V,q)=>q===n?"":V));return}const a=r[n],B=(a!==""&&t.startsWith(a)?t.slice(a.length):t).split("").filter(h);B.length!==0&&w(n,B)},[r,u,h,w]),P=b(e=>{const t=Number(e.currentTarget.getAttribute("data-pin-input-index"));if(e.ctrlKey||e.metaKey)return;const n=["Backspace","Delete","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Control","Alt","Meta","Shift","Tab","Enter","Escape"];!j[d].test(e.key)&&!n.includes(e.key)&&e.preventDefault(),r[t]===""&&t>0&&e.key==="Backspace"&&(u(r.map((a,i)=>i===t-1?"":a)),s.current?.[t-1]?.focus(),e.preventDefault()),r[t]===""&&t<r.length-1&&e.key==="Delete"&&(u(r.map((a,i)=>i===t+1?"":a)),s.current?.[t+1]?.focus(),e.preventDefault())},[r,d,u]),S=b(e=>{const t=Number(e.currentTarget.getAttribute("data-pin-input-index"));e.preventDefault();const n=e.clipboardData?.getData("text");if(!n)return;const a=n.split("").filter(h);a.length!==0&&w(t,a)},[h,w]);return L(U,{className:l("flex flex-wrap gap-2",R),"aria-label":D,...W,children:[D&&m(J,{className:l("flex text-fg-muted text-sm grow shrink-0 basis-full",p?.label),children:D}),r.map((e,t)=>m("div",{className:l("flex flex-col w-full flex-1 text-fg",p?.inputWrap),children:m("input",{type:I?"password":"text",autoComplete:t===0?"one-time-code":"off",inputMode:d==="numeric"?"numeric":"text",pattern:d==="numeric"?"[0-9]*":void 0,"data-1p-ignore":"true","data-lpignore":"true","data-bwignore":"true","data-form-type":"other",...N,className:l("border-solid border rounded-md","text-sm text-fg placeholder-fg-subtle text-center","h-10 px-2 py-0 m-0 w-full","bg-surface","[&::-ms-reveal]:hidden [&::-ms-clear]:hidden","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus:outline-2 focus:outline focus:outline-border-subtle focus:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle",f&&"border-danger-soft bg-danger-surface text-danger",f&&"hover:border-danger-soft focus:border-danger-soft focus:outline-border-subtle",p?.input,N?.className),onChange:z,onKeyDown:P,onPaste:S,ref:n=>{s.current[t]=n},value:e,maxLength:void 0,"data-pin-input-index":t,disabled:k,required:K,"aria-label":`Pin Input Digit ${t+1}`})},`pin-input-${t}`)),y&&m("input",{type:"hidden",name:y,value:r.join("")}),(x||f&&c)&&L("div",{className:l("flex flex-row flex-wrap grow shrink-0 basis-full",p?.textWrap),children:[x&&m("p",{className:l("flex text-fg-muted text-sm grow shrink-0 basis-full",p?.description),children:x}),f&&c&&typeof c=="string"&&m("p",{className:l("flex text-danger text-sm grow shrink-0 basis-full",p?.error),children:c})]})]})}export{Z as PinInput,Z as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as
|
|
1
|
+
"use client";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{ProgressBar as h,Label as g}from"react-aria-components";import{cn as r}from"../../utils/cn.js";function y({label:f,value:m=0,showValue:d=!0,size:a=60,strokeWidth:s=6,className:x,classNames:l,...u}){const e=a/2,c=e-s,o=2*Math.PI*c;return t(h,{"aria-label":"Loading...",className:r("flex",x),...u,value:m,children:({percentage:i=0})=>n("div",{className:r("flex items-center flex-col",l?.base),children:[t(g,{className:r("text-sm",l?.label),children:f}),n("svg",{width:a,height:a,fill:"none",children:[t("circle",{className:r("stroke-border"),cx:e,cy:e,r:c,strokeWidth:s}),t("circle",{className:r("stroke-fg transition-stroke-dashoffset duration-500 ease-in-out"),cx:e,cy:e,r:c,strokeWidth:s,strokeDasharray:`${o} ${o}`,strokeDashoffset:(100-i)/100*o,strokeLinecap:"round",transform:`rotate(-90 ${e} ${e})`}),d&&n("text",{className:r("text-sm fill-fg",l?.value),x:"50%",y:"50%",alignmentBaseline:"middle",textAnchor:"middle",children:[i,"%"]})]})]})})}export{y as CircularProgressbar,y as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as i,Fragment as m}from"react/jsx-runtime";import{ProgressBar as u,Label as h}from"react-aria-components";import{m as p}from"framer-motion";import{cn as r}from"../../utils/cn.js";function g({label:a,isIndeterminate:n,showValue:l=!0,width:d,className:s,classNames:e,...c}){return t(u,{style:{width:d||"100%"},className:r("overflow-hidden",s),...c,children:({percentage:o,valueText:f})=>i(m,{children:[i("div",{className:r("flex items-center justify-between gap-2 mb-1",e?.labelWrapper),children:[t(h,{className:r("text-sm",e?.label),children:a}),l&&t("span",{className:r("text-sm",e?.value),children:f})]}),t("div",{className:r("overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-
|
|
1
|
+
"use client";import{jsx as t,jsxs as i,Fragment as m}from"react/jsx-runtime";import{ProgressBar as u,Label as h}from"react-aria-components";import{m as p}from"framer-motion";import{cn as r}from"../../utils/cn.js";function g({label:a,isIndeterminate:n,showValue:l=!0,width:d,className:s,classNames:e,...c}){return t(u,{style:{width:d||"100%"},className:r("overflow-hidden",s),...c,children:({percentage:o,valueText:f})=>i(m,{children:[i("div",{className:r("flex items-center justify-between gap-2 mb-1",e?.labelWrapper),children:[t(h,{className:r("text-sm",e?.label),children:a}),l&&t("span",{className:r("text-sm",e?.value),children:f})]}),t("div",{className:r("overflow-hidden forced-color-adjust-none h-2.5 rounded will-change-transform bg-border",e?.trackWrapper),children:t(p.div,{style:{width:!n&&typeof o=="number"?`${o}%`:""},...n&&{animate:{x:["-100%","250px"]},transition:{repeat:1/0,duration:1.5}},className:r("h-full bg-surface-inverse-hover rounded transition-width duration-500 ease-in-out",{"w-1/2":n,"transition-none":n},e?.track)})})]})})}export{g as LinearProgressbar,g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as
|
|
1
|
+
"use client";import{jsxs as b,jsx as t}from"react/jsx-runtime";import{cn as s}from"../../utils/cn.js";function x({cooldownSeconds:e,isResending:n,canResend:a,onResend:i,prompt:r="Didn't get a code?",label:d="Resend code",resendingLabel:l="Sending…",availableAnnouncement:o="You can request a new code now.",className:c,buttonClassName:u}){const p=e>0?`Resend in ${e}s`:n?l:d;return b("p",{className:s("text-sm",c),children:[r," ",t("button",{type:"button",onClick:i,disabled:!a,className:s("underline cursor-pointer disabled:no-underline disabled:opacity-50 disabled:cursor-not-allowed",u),children:p}),t("span",{"aria-live":"polite",className:"sr-only",children:e===0&&!n?o:""})]})}export{x as ResendCode,x as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as
|
|
1
|
+
"use client";import{jsxs as c,jsx as r}from"react/jsx-runtime";import{useRef as l}from"react";import{useSelect as z,useButton as A,HiddenSelect as E}from"react-aria";import{useInteractOutside as G}from"@react-aria/interactions";import{useSelectState as J}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as Q,SelectPopover as T,SelectListBox as U}from"./parts.js";import"react-aria-components";function se(d){const{label:a,description:u,errorMessage:f,children:g,placeholder:x,slots:h,popoverOffset:v,className:N,classNames:t,isLoading:I,name:b,selectedKey:P,defaultSelectedKey:S,onSelectionChange:y,isRequired:B,items:w,autoFocus:R,isInvalid:C,"aria-label":O,"aria-labelledby":L}=d,n=!!(d.isDisabled||I),m={label:a,children:g,items:w,name:b,selectedKey:P,defaultSelectedKey:S,onSelectionChange:y,isDisabled:n,isRequired:B,autoFocus:R,isInvalid:C,"aria-label":O,"aria-labelledby":L},s=J(m),p=l(null),o=l(null),j=l(null),H=l(null),{labelProps:M,triggerProps:D,valueProps:K,menuProps:_,descriptionProps:k,errorMessageProps:q,isInvalid:i}=z(m,s,o),{buttonProps:F}=A(D,o);return G({ref:p,onInteractOutside:()=>s.close()}),c("div",{ref:p,className:e("flex flex-col","w-full",N),children:[r("label",{...M,className:e("flex","text-xs text-fg-muted",t?.label),children:a}),r(E,{state:s,triggerRef:o,label:a,name:b,isDisabled:n}),c("div",{className:e("flex","relative","w-full",t?.comboBoxContainer),children:[c("button",{...F,ref:o,className:e("flex items-center justify-between gap-2","border border-solid border-border","text-sm text-fg text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-surface","cursor-pointer","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:outline focus:outline-2 focus:outline-border-subtle focus:border-border-emphasis","disabled:bg-surface-subtle disabled:border-border disabled:cursor-default",i&&"border-danger-soft bg-danger-surface text-danger hover:border-danger focus:border-danger focus:outline-danger-ring",t?.input),children:[r("span",{...K,className:e("truncate",!s.selectedItem&&"text-fg-subtle",t?.value),children:s.selectedItem?s.selectedItem.rendered:x??"Select..."}),r("span",{className:e("shrink-0 [&_svg]:w-4 [&_svg]:h-4",t?.arrowButton),children:r(Q,{isOpen:s.isOpen,isDisabled:n,isInvalid:i,buttonIcon:h?.buttonIcon})})]}),s.isOpen&&r(T,{popoverRef:H,offset:v,className:e(t?.listContainer),children:r(U,{state:s,listBoxProps:_,listBoxRef:j,optionClassName:e(t?.option),sectionHeadingClassName:e(t?.sectionHeading),className:e("max-h-80","overflow-y-auto","outline-none",t?.list)})})]}),u&&r("span",{...k,className:e("flex","text-xs","text-fg-muted",t?.description),children:u}),i&&typeof f=="string"&&r("span",{...q,className:e("flex","text-xs","text-danger-soft",t?.errorMessage),children:f})]})}export{se as ButtonSelect,se as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as G,jsx as c}from"react/jsx-runtime";import{forwardRef as Se,useRef as g,useState as Ke,useMemo as I,isValidElement as Ve,useEffect as R}from"react";import{useFilter as we,useObjectRef as Be,useComboBox as Fe,useButton as Ne,HiddenSelect as Pe}from"react-aria";import{Section as Me,useComboBoxState as Ae}from"react-stately";import{cn as r}from"../../utils/cn.js";import{Pulse as Oe}from"../Loader/Pulse.js";import{SelectTags as Te,ChevronIcon as ke,SelectOverlay as De,SelectListBox as Le}from"./parts.js";import"react-aria-components";function S(s){return s?typeof s.rendered=="string"?s.rendered:s.textValue??"":""}function Ee(s,i){const f=i.trim().toLowerCase();let p=null,a=s.getFirstKey();for(;a!=null;){const m=s.getItem(a);if(m?.type==="item"&&(p==null&&(p=a),f.length>0&&(m.textValue??"").toLowerCase().split(/\s+/).includes(f)))return a;a=s.getKeyAfter(a)}return p}function _(s,i){const f=s.toLowerCase(),p=f.split(/\s+/);return p.includes(i)?0:f.startsWith(i)?1:p.some(a=>a.startsWith(i))?2:3}function J(s){const i=s.props;return typeof i.textValue=="string"?i.textValue:typeof i.children=="string"?i.children:""}function He(s,i){const{label:f,description:p,errorMessage:a,children:m,placeholder:k,isLoading:D,slots:L,popoverOffset:Q,className:U,classNames:l,autoComplete:K,menuTrigger:X,selectTextOnFocus:Y=!0,autoFocusFirstOption:Z=!0,searchable:je,selectionMode:$="single",selectedKey:ee,defaultSelectedKey:te,selectedKeys:V,defaultSelectedKeys:w,onSelectionChange:E,name:ne,...x}=s,u=$==="multiple",B=!!x.isDisabled,C=g(!1),h=g(null),d=x.inputValue!==void 0,[F,y]=Ke(""),N=d?x.inputValue:F,oe=I(()=>{const e=(N??"").trim().toLowerCase();if(d||typeof m=="function"||e===""||!Array.isArray(m))return m;const n=m,o=n.filter(b=>Ve(b));return o.length!==n.length||o.length===0||o.some(b=>b.type===Me)?m:[...o].sort((b,Re)=>_(J(b),e)-_(J(Re),e))},[m,d,N]),re=I(()=>u&&V?[...V]:void 0,[u,V]),se=I(()=>u&&w?[...w]:void 0,[u,w]),H={...x,label:f,children:oe,placeholder:k,isDisabled:B,menuTrigger:X??"focus",autoComplete:K,inputValue:N,...u?{selectionMode:"multiple",value:re,defaultValue:se,onChange:E}:{selectedKey:ee,defaultSelectedKey:te,onSelectionChange:e=>{if(!d){const n=e!=null?h.current?.collection.getItem(e):null;y(S(n))}E?.(e)}},onInputChange:e=>{d||y(e),x.onInputChange?.(e),!u&&e===""&&h.current?.selectedKey!=null&&h.current.setSelectedKey(null)}},{contains:le}=we({sensitivity:"base"}),t=Ae({...H,defaultFilter:le,allowsEmptyCollection:!0});R(()=>{h.current=t});const j=g(0),P=t.selectionManager.selectedKeys.size;R(()=>{u&&(P>j.current&&!d&&y(""),j.current=P)},[u,P,d]);const M=S(t.selectedItem);R(()=>{d||u||C.current||F===M||y(M)},[M,d,F,u]);const ie=g(null),W=Be(i),q=g(null),z=g(null),A=g(null),O=g(null),T=g(null),{inputProps:ue,listBoxProps:ce,labelProps:ae,buttonProps:de,descriptionProps:fe,errorMessageProps:pe}=Fe({...H,inputRef:W,listBoxRef:q,popoverRef:z,buttonRef:A},t),{buttonProps:me}=Ne(de,A),v=t.displayValidation.isInvalid,{onKeyDown:ge,onFocus:be,onBlur:he,...xe}=ue,ye=e=>{e.key==="Home"||e.key==="End"||ge?.(e)};R(()=>{const e=t.selectionManager;if(!Z||!t.isOpen||t.inputValue.length===0){T.current=null;return}const n=e.focusedKey;if(n!=null&&n!==T.current)return;const o=Ee(t.collection,t.inputValue);T.current=o??null,o!=null&&o!==n&&e.setFocusedKey(o)});const Ce=e=>{be?.(e);const n=C.current;if(C.current=!0,n||!Y)return;const o=e.target,b=o.value;b&&requestAnimationFrame(()=>{o.value===b&&o.select()})},ve=e=>{he?.(e);const n=e.currentTarget;requestAnimationFrame(()=>{document.activeElement!==n&&(C.current=!1,h.current?.close(),d||y(u?"":S(h.current?.selectedItem)))})},Ie=I(()=>new Proxy(t,{get(e,n){return n==="setValue"?o=>e.setSelectedKey(o):Reflect.get(e,n)}}),[t]);return G("div",{ref:ie,className:r("flex flex-col","w-full",U),children:[c("label",{...ae,className:r("flex","text-xs text-fg-muted",l?.label),children:f}),c(Pe,{state:Ie,triggerRef:O,label:f,name:ne,isDisabled:B,autoComplete:K}),u&&c(Te,{items:(t.selectedItems??[]).map(e=>({id:e.key,label:S(e)})),onRemove:e=>t.selectionManager.toggleSelection(e),classNames:{tagGroup:r(l?.tagGroup),tag:r(l?.tag),tagRemoveButton:r(l?.tagRemoveButton)}}),G("div",{ref:O,className:r("flex","relative","w-full",l?.comboBoxContainer),children:[c("input",{...xe,onKeyDown:ye,onFocus:Ce,onBlur:ve,ref:W,placeholder:k,autoComplete:K,className:r("border border-solid border-border","text-sm text-fg","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-
|
|
1
|
+
"use client";import{jsxs as G,jsx as c}from"react/jsx-runtime";import{forwardRef as Se,useRef as g,useState as Ke,useMemo as I,isValidElement as Ve,useEffect as R}from"react";import{useFilter as we,useObjectRef as Be,useComboBox as Fe,useButton as Ne,HiddenSelect as Pe}from"react-aria";import{Section as Me,useComboBoxState as Ae}from"react-stately";import{cn as r}from"../../utils/cn.js";import{Pulse as Oe}from"../Loader/Pulse.js";import{SelectTags as Te,ChevronIcon as ke,SelectOverlay as De,SelectListBox as Le}from"./parts.js";import"react-aria-components";function S(s){return s?typeof s.rendered=="string"?s.rendered:s.textValue??"":""}function Ee(s,i){const f=i.trim().toLowerCase();let p=null,a=s.getFirstKey();for(;a!=null;){const m=s.getItem(a);if(m?.type==="item"&&(p==null&&(p=a),f.length>0&&(m.textValue??"").toLowerCase().split(/\s+/).includes(f)))return a;a=s.getKeyAfter(a)}return p}function _(s,i){const f=s.toLowerCase(),p=f.split(/\s+/);return p.includes(i)?0:f.startsWith(i)?1:p.some(a=>a.startsWith(i))?2:3}function J(s){const i=s.props;return typeof i.textValue=="string"?i.textValue:typeof i.children=="string"?i.children:""}function He(s,i){const{label:f,description:p,errorMessage:a,children:m,placeholder:k,isLoading:D,slots:L,popoverOffset:Q,className:U,classNames:l,autoComplete:K,menuTrigger:X,selectTextOnFocus:Y=!0,autoFocusFirstOption:Z=!0,searchable:je,selectionMode:$="single",selectedKey:ee,defaultSelectedKey:te,selectedKeys:V,defaultSelectedKeys:w,onSelectionChange:E,name:ne,...x}=s,u=$==="multiple",B=!!x.isDisabled,C=g(!1),h=g(null),d=x.inputValue!==void 0,[F,y]=Ke(""),N=d?x.inputValue:F,oe=I(()=>{const e=(N??"").trim().toLowerCase();if(d||typeof m=="function"||e===""||!Array.isArray(m))return m;const n=m,o=n.filter(b=>Ve(b));return o.length!==n.length||o.length===0||o.some(b=>b.type===Me)?m:[...o].sort((b,Re)=>_(J(b),e)-_(J(Re),e))},[m,d,N]),re=I(()=>u&&V?[...V]:void 0,[u,V]),se=I(()=>u&&w?[...w]:void 0,[u,w]),H={...x,label:f,children:oe,placeholder:k,isDisabled:B,menuTrigger:X??"focus",autoComplete:K,inputValue:N,...u?{selectionMode:"multiple",value:re,defaultValue:se,onChange:E}:{selectedKey:ee,defaultSelectedKey:te,onSelectionChange:e=>{if(!d){const n=e!=null?h.current?.collection.getItem(e):null;y(S(n))}E?.(e)}},onInputChange:e=>{d||y(e),x.onInputChange?.(e),!u&&e===""&&h.current?.selectedKey!=null&&h.current.setSelectedKey(null)}},{contains:le}=we({sensitivity:"base"}),t=Ae({...H,defaultFilter:le,allowsEmptyCollection:!0});R(()=>{h.current=t});const j=g(0),P=t.selectionManager.selectedKeys.size;R(()=>{u&&(P>j.current&&!d&&y(""),j.current=P)},[u,P,d]);const M=S(t.selectedItem);R(()=>{d||u||C.current||F===M||y(M)},[M,d,F,u]);const ie=g(null),W=Be(i),q=g(null),z=g(null),A=g(null),O=g(null),T=g(null),{inputProps:ue,listBoxProps:ce,labelProps:ae,buttonProps:de,descriptionProps:fe,errorMessageProps:pe}=Fe({...H,inputRef:W,listBoxRef:q,popoverRef:z,buttonRef:A},t),{buttonProps:me}=Ne(de,A),v=t.displayValidation.isInvalid,{onKeyDown:ge,onFocus:be,onBlur:he,...xe}=ue,ye=e=>{e.key==="Home"||e.key==="End"||ge?.(e)};R(()=>{const e=t.selectionManager;if(!Z||!t.isOpen||t.inputValue.length===0){T.current=null;return}const n=e.focusedKey;if(n!=null&&n!==T.current)return;const o=Ee(t.collection,t.inputValue);T.current=o??null,o!=null&&o!==n&&e.setFocusedKey(o)});const Ce=e=>{be?.(e);const n=C.current;if(C.current=!0,n||!Y)return;const o=e.target,b=o.value;b&&requestAnimationFrame(()=>{o.value===b&&o.select()})},ve=e=>{he?.(e);const n=e.currentTarget;requestAnimationFrame(()=>{document.activeElement!==n&&(C.current=!1,h.current?.close(),d||y(u?"":S(h.current?.selectedItem)))})},Ie=I(()=>new Proxy(t,{get(e,n){return n==="setValue"?o=>e.setSelectedKey(o):Reflect.get(e,n)}}),[t]);return G("div",{ref:ie,className:r("flex flex-col","w-full",U),children:[c("label",{...ae,className:r("flex","text-xs text-fg-muted",l?.label),children:f}),c(Pe,{state:Ie,triggerRef:O,label:f,name:ne,isDisabled:B,autoComplete:K}),u&&c(Te,{items:(t.selectedItems??[]).map(e=>({id:e.key,label:S(e)})),onRemove:e=>t.selectionManager.toggleSelection(e),classNames:{tagGroup:r(l?.tagGroup),tag:r(l?.tag),tagRemoveButton:r(l?.tagRemoveButton)}}),G("div",{ref:O,className:r("flex","relative","w-full",l?.comboBoxContainer),children:[c("input",{...xe,onKeyDown:ye,onFocus:Ce,onBlur:ve,ref:W,placeholder:k,autoComplete:K,className:r("border border-solid border-border","text-sm text-fg","py-0 px-2","h-10 w-full","m-0","rounded-md","bg-surface","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:border-border-emphasis focus:outline focus:outline-2 focus:outline-border-subtle","disabled:bg-surface-subtle disabled:border-border",D?"disabled:text-fg":"disabled:text-fg-muted",v&&"border-danger-soft bg-danger-surface text-danger placeholder:text-fg-subtle",v&&"hover:border-danger focus:border-danger focus:outline-danger-ring",l?.input)}),D?c("div",{className:r("absolute top-2 right-2","block",l?.loader),children:L?.loadingIcon||c(Oe,{})}):c("button",{...me,ref:A,className:r("absolute top-2 right-0","block","border-none bg-none","cursor-pointer disabled:cursor-not-allowed",l?.arrowButton),children:c(ke,{isOpen:t.isOpen,isDisabled:B,isInvalid:v,buttonIcon:L?.buttonIcon})}),t.isOpen&&t.collection.size>0&&c(De,{state:t,triggerRef:O,popoverRef:z,offset:Q,className:r(l?.listContainer),children:c(Le,{state:t,listBoxProps:ce,listBoxRef:q,optionVirtualFocus:!0,optionClassName:r(l?.option),sectionHeadingClassName:r(l?.sectionHeading),className:r("max-h-80","overflow-y-auto","outline-none",l?.list)})})]}),p&&c("span",{...fe,className:r("flex","text-xs","text-fg-muted",l?.description),children:p}),v&&typeof a=="string"&&c("span",{...pe,className:r("flex","text-xs","text-danger-soft",l?.errorMessage),children:a})]})}const Ye=Se(He);export{Ye as ComboBoxSelect,Ye as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as d,jsx as o}from"react/jsx-runtime";import{useRef as a}from"react";import{useButton as D}from"react-aria";import{useListState as F,useOverlayTriggerState as H}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as _,SelectOverlay as k,SelectListBox as T}from"./parts.js";import"react-aria-components";function J(u){const{label:f,description:b,errorMessage:m,children:x,placeholder:h,slots:v,popoverOffset:y,className:N,classNames:t,isLoading:S,items:B,isInvalid:
|
|
1
|
+
"use client";import{jsxs as d,jsx as o}from"react/jsx-runtime";import{useRef as a}from"react";import{useButton as D}from"react-aria";import{useListState as F,useOverlayTriggerState as H}from"react-stately";import{cn as e}from"../../utils/cn.js";import{ChevronIcon as _,SelectOverlay as k,SelectListBox as T}from"./parts.js";import"react-aria-components";function J(u){const{label:f,description:b,errorMessage:m,children:x,placeholder:h,slots:v,popoverOffset:y,className:N,classNames:t,isLoading:S,items:B,isInvalid:I,"aria-label":p,"aria-labelledby":O,selectedKeys:w,defaultSelectedKeys:C,onSelectionChange:R}=u,g=!!(u.isDisabled||S),r=F({children:x,items:B,selectionMode:"multiple",selectionBehavior:"toggle",selectedKeys:w,defaultSelectedKeys:C,onSelectionChange:s=>{s!=="all"&&R?.([...s])}}),l=H({}),L=a(null),n=a(null),M=a(null),j=a(null),{buttonProps:P}=D({isDisabled:g,onPress:()=>l.toggle(),"aria-label":p,"aria-labelledby":O},n),i=!!I,c=[...r.collection.getKeys()].map(s=>r.collection.getItem(s)).filter(s=>s!=null&&s.type==="item"&&r.selectionManager.isSelected(s.key)),K=c.map(s=>s.textValue).join(", ");return d("div",{ref:L,className:e("flex flex-col","w-full",N),children:[o("label",{className:e("flex","text-xs text-fg-muted",t?.label),children:f}),d("div",{className:e("flex","relative","w-full",t?.comboBoxContainer),children:[d("button",{...P,ref:n,"aria-haspopup":"listbox","aria-expanded":l.isOpen,className:e("flex items-center justify-between gap-2","border border-solid border-border","text-sm text-fg text-left","py-0 px-3","h-10 w-full","m-0","rounded-md","bg-surface","cursor-pointer","transition-all ease-in-out duration-200","hover:border-border-emphasis","focus:outline focus:outline-2 focus:outline-border-subtle focus:border-border-emphasis","disabled:bg-surface-subtle disabled:border-border disabled:cursor-default",i&&"border-danger-soft bg-danger-surface text-danger hover:border-danger focus:border-danger focus:outline-danger-ring",t?.input),children:[o("span",{className:e("truncate",c.length===0&&"text-fg-subtle",t?.value),children:c.length>0?K:h??"Select..."}),o("span",{className:e("shrink-0 [&_svg]:w-4 [&_svg]:h-4",t?.arrowButton),children:o(_,{isOpen:l.isOpen,isDisabled:g,isInvalid:i,buttonIcon:v?.buttonIcon})})]}),l.isOpen&&o(k,{state:l,triggerRef:n,popoverRef:j,offset:y,className:e(t?.listContainer),children:o(T,{state:r,listBoxProps:{"aria-label":f??p??"Options",autoFocus:"first",shouldFocusWrap:!0},listBoxRef:M,optionClassName:e(t?.option),sectionHeadingClassName:e(t?.sectionHeading),className:e("max-h-80","overflow-y-auto","outline-none",t?.list)})})]}),b&&o("span",{className:e("flex","text-xs","text-fg-muted",t?.description),children:b}),i&&typeof m=="string"&&o("span",{className:e("flex","text-xs","text-danger-soft",t?.errorMessage),children:m})]})}export{J as MultiButtonSelect,J as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{useState as m,useLayoutEffect as x,useRef as b}from"react";import{usePopover as g,Overlay as h,DismissButton as
|
|
1
|
+
"use client";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{useState as m,useLayoutEffect as x,useRef as b}from"react";import{usePopover as g,Overlay as h,DismissButton as f,useListBox as v,useListBoxSection as y,useOption as _}from"react-aria";import{TagGroup as k,TagList as N,Tag as w,Button as S}from"react-aria-components";import{cn as n}from"../../utils/cn.js";function p({item:e,state:r,shouldUseVirtualFocus:o,className:t}){const a=b(null),{optionProps:d,isFocused:i,isSelected:u,isDisabled:l}=_({key:e.key,shouldUseVirtualFocus:o},r,a);return s("li",{...d,ref:a,"data-focused":i||void 0,"data-selected":u||void 0,"data-disabled":l||void 0,className:n("flex flex-auto items-center","rounded-md","p-2.5 mx-1.5","text-sm","cursor-default outline-none","text-fg","transition-all ease-in-out duration-150","data-[focused]:bg-surface-subtle","data-[selected]:font-semibold","data-[disabled]:text-fg-muted",t),children:e.rendered})}function L({section:e,state:r,shouldUseVirtualFocus:o,optionClassName:t,headingClassName:a}){const{itemProps:d,headingProps:i,groupProps:u}=y({heading:e.rendered,"aria-label":e["aria-label"]});return c("li",{...d,className:n("pt-1.5 first:pt-0"),children:[e.rendered!=null&&s("span",{...i,className:n("block px-3 pb-1 text-xs font-semibold text-fg-subtle",a),children:e.rendered}),s("ul",{...u,children:[...r.collection.getChildren(e.key)].map(l=>s(p,{item:l,state:r,shouldUseVirtualFocus:o,className:t},l.key))})]})}function O({state:e,listBoxProps:r,listBoxRef:o,className:t,optionClassName:a,sectionHeadingClassName:d,optionVirtualFocus:i}){const{listBoxProps:u}=v(r,e,o);return s("ul",{...u,ref:o,className:t,children:[...e.collection].map(l=>l.type==="section"?s(L,{section:l,state:e,shouldUseVirtualFocus:i,optionClassName:a,headingClassName:d},l.key):s(p,{item:l,state:e,shouldUseVirtualFocus:i,className:a},l.key))})}function W({children:e,popoverRef:r,offset:o,className:t}){return s("div",{ref:r,style:{marginTop:o??4},className:n("absolute top-full left-0 z-50 w-full","px-0 py-1.5","rounded-md bg-surface","border border-solid border-border","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",t),children:e})}function z({state:e,triggerRef:r,popoverRef:o,offset:t,className:a,children:d}){const{popoverProps:i}=g({triggerRef:r,popoverRef:o,isNonModal:!0,placement:"bottom start",offset:t??4},e),[u,l]=m();return x(()=>{r.current&&l(r.current.offsetWidth)},[r]),s(h,{children:c("div",{...i,ref:o,style:{...i.style,width:u},className:n("z-50","px-0 py-1.5","rounded-md bg-surface","border border-solid border-border","shadow-[0_10px_15px_-3px_rgba(0,0,0,0.1),0_4px_6px_-4px_rgba(0,0,0,0.1)]",a),children:[s(f,{onDismiss:()=>e.close()}),d,s(f,{onDismiss:()=>e.close()})]})})}function C({items:e,onRemove:r,classNames:o}){return e.length===0?null:s(k,{"aria-label":"Selected options",onRemove:t=>{for(const a of t)r(a)},className:n("mb-1.5",o?.tagGroup),children:s(N,{items:e,className:n("flex flex-wrap gap-1.5"),children:t=>c(w,{id:t.id,textValue:t.label,className:n("inline-flex items-center gap-1","rounded-md bg-surface-subtle text-fg","px-2 py-0.5 text-xs","outline-none","data-[focus-visible]:ring-2 data-[focus-visible]:ring-border",o?.tag),children:[t.label,s(S,{slot:"remove","aria-label":`Remove ${t.label}`,className:n("leading-none outline-none","text-fg-muted hover:text-fg","data-[focus-visible]:text-fg",o?.tagRemoveButton),children:"×"})]})})})}function F({isOpen:e,isDisabled:r,isInvalid:o,buttonIcon:t}){return t?typeof t=="function"?t({isOpen:e,isDisabled:r,isInvalid:o}):t:s("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n("transition-all ease-in-out duration-200",e?"rotate-180":"rotate-0"),children:s("path",{d:"M6 9L12 15L18 9",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:n(["stroke-fg",r&&"stroke-fg-subtle",o&&"stroke-danger-soft"])})})}export{F as ChevronIcon,O as SelectListBox,p as SelectOption,z as SelectOverlay,W as SelectPopover,C as SelectTags};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{cn as t}from"../../utils/cn.js";function m({className:e}){return r("div",{className:t("relative rounded-md animate-pulse bg-border-subtle",e)})}export{m as Skeleton,m as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as o,jsxs as f,Fragment as m}from"react/jsx-runtime";import{Slider as p,Label as
|
|
1
|
+
"use client";import{jsx as o,jsxs as f,Fragment as m}from"react/jsx-runtime";import{Slider as p,Label as v,SliderOutput as s,SliderTrack as x,SliderThumb as w}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function S({label:n,showOutput:d=!0,thumbLabels:c,classNames:t,orientation:l,isDisabled:a,children:u,...b}){return o(p,{orientation:l,isDisabled:a,className:e('data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:flex data-[orientation="horizontal"]:flex-wrap','data-[orientation="vertical"]:w-8 data-[orientation="vertical"]:block data-[orientation="vertical"]:h-full',t?.base),...b,children:u||f(m,{children:[(n||d)&&f("div",{className:e("w-full flex justify-between items-center",l==="vertical"&&"gap-2 w-max mb-2",t?.outputWrapper),children:[o(v,{className:e("flex-1 text-sm",a&&"opacity-50",t?.label),children:n}),d&&o(s,{className:e("flex flex-initial ml-auto justify-end text-sm",a&&"opacity-50",t?.output),children:({state:i})=>i.values.map((h,r)=>i.getThumbValueLabel(r)).join(" – ")})]}),o(x,{className:e('data-[orientation="horizontal"]:w-full data-[orientation="horizontal"]:h-8','data-[orientation="vertical"]:w-8 data-[orientation="vertical"]:h-full',"transition-all duration-200 ease","before:bg-border before:block before:absolute cursor-pointer",'data-[orientation="horizontal"]:before:w-full data-[orientation="horizontal"]:before:h-0.5','data-[orientation="horizontal"]:before:top-1/2 data-[orientation="horizontal"]:before:-translate-y-1/2','data-[orientation="vertical"]:before:w-0.5 data-[orientation="vertical"]:before:h-full data-[orientation="vertical"]:before:left-1/2 data-[orientation="vertical"]:before:-translate-y-1/2 data-[orientation="vertical"]:before:-translate-x-1/2',a&&"opacity-50 before:cursor-default",t?.track),children:({state:i})=>i.values.map((h,r)=>o(w,{index:r,"aria-label":c?.[r],className:e("w-6 h-6 bg-border forced-color-adjust-none cursor-pointer top-1/2","border-2 border-border-emphasis rounded-full",a&&"cursor-default",l==="vertical"&&"left-1/2",t?.thumb)},r))})]})})}export{S as Slider,S as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as s,jsxs as u,Fragment as c}from"react/jsx-runtime";import{Switch as m}from"react-aria-components";import{cn as i}from"../../utils/cn.js";function x({children:e,className:
|
|
1
|
+
"use client";import{jsx as s,jsxs as u,Fragment as c}from"react/jsx-runtime";import{Switch as m}from"react-aria-components";import{cn as i}from"../../utils/cn.js";function x({children:e,className:b,classNames:d,...a}){return s(m,{className:i("flex items-center gap-2 text-sm text-fg-muted forced-color-adjust-none group","",b),...a,children:r=>{const{isSelected:n,isHovered:o,isFocused:t,isPressed:f,isDisabled:l}=r;return u(c,{children:[s("div",{className:i("w-12 h-7 bg-transparent border-solid border border-border rounded-3xl transition-all duration-200 ease-in-out","before:block before:w-5 before:h-5 before:m-[3px] before:bg-border before:rounded-full","before:transition-all before:duration-200 before:ease-in-out",[o&&"border-border-emphasis",n&&[" bg-border before:translate-x-full before:bg-surface",(o||t)&&"border-border-emphasis"],t&&["outline outline-2 outline-border-subtle"],f&&"before:bg-border-emphasis",l&&"bg-surface-subtle",d?.indicator])}),typeof e=="function"?e({defaultChildren:void 0,...r}):e]})}})}export{x as Switch,x as default};
|
package/components/Tabs/Tab.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as d,jsxs as u,Fragment as c}from"react/jsx-runtime";import{useContext as
|
|
1
|
+
"use client";import{jsx as d,jsxs as u,Fragment as c}from"react/jsx-runtime";import{useContext as f}from"react";import{Tab as b}from"react-aria-components";import{m}from"framer-motion";import{cn as i}from"../../utils/cn.js";import{TabsOrientationContext as p}from"./Tabs.context.js";function x({orientation:o,variant:e="base",className:l,children:t,...r}){return d(b,{className:i("flex items-center relative z-10","text-sm cursor-pointer forced-color-adjust-none","transition-all duration-300 ease-in-out","justify-center","disabled:opacity-50","selected:outline-0 hover:outline-0 hover:text-fg-muted",e==="underline"&&o==="vertical"&&"justify-start","py-2 px-3",e==="underline"&&o==="horizontal"&&"p-3",e==="underline"&&o==="vertical"&&"py-3 pr-3 pl-0",(e==="underline"||e==="outline"||e==="enclosed")&&"text-fg",e==="solid"&&"text-fg-subtle",(e==="underline"||e==="outline")&&"selected:text-fg",(e==="solid"||e==="enclosed")&&"selected:text-fg-inverse",l),...r,children:t})}function z({variant:o="base",children:e,className:l,classNames:t,...r}){const s=f(p);return d(x,{orientation:s,variant:o,className:l,...r,children:n=>u(c,{children:[typeof e=="function"?e({defaultChildren:void 0,...n}):e,(n.isFocusVisible||n.isSelected)&&d(m.span,{className:i("absolute z-0",o==="solid"&&"inset-0 rounded-lg bg-fg-muted mix-blend-color",o==="outline"&&"inset-0 rounded-lg border-solid border-2 border-surface-inverse-hover",o==="underline"&&"rounded-lg bg-surface-inverse-hover mix-blend-color bottom-0",o==="underline"&&s==="horizontal"&&"left-0 w-full h-px",o==="underline"&&s==="vertical"&&"right-0 w-px h-full",o==="enclosed"&&"inset-0 border-solid border-1 border-surface-inverse-hover -mb-px border-b-0 rounded-t-lg rounded-b-none bg-surface mix-blend-difference",o==="base"&&"hidden",t?.overflow),layoutId:o,transition:{type:"spring",bounce:.2,duration:.75}})]})})}export{x as BaseTab,z as Tab,z as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as r}from"react/jsx-runtime";import{useContext as
|
|
1
|
+
"use client";import{jsx as r}from"react/jsx-runtime";import{useContext as f}from"react";import{TabList as s}from"react-aria-components";import{cn as a}from"../../utils/cn.js";import{BaseTab as d}from"./Tab.js";import{TabsOrientationContext as u}from"./Tabs.context.js";import"framer-motion";function T({items:t,children:i,variant:e="base",className:b,...l}){const o=f(u);return r(s,{className:a("flex flex-row w-full flex-wrap gap-2 relative",o==="vertical"&&"orientation-vertical:max-w-max orientation-vertical:flex-col orientation-vertical:justify-start",[e==="solid"&&["bg-border-subtle rounded-xl p-1"],e==="outline"&&["border-solid border-2 border-border-subtle rounded-xl p-1"],e==="underline"&&o==="vertical"&&["before:block before:absolute before:inset-y-0 before:right-0 before:w-px before:bg-border-subtle"],e==="underline"&&o==="horizontal"&&["before:block before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-border-subtle"]],b),items:t,...l,children:i||(n=>r(d,{orientation:o,children:n.title}))})}export{T as TabList,T as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{TimeField as u,Label as f,DateInput as c,DateSegment as b,Text as
|
|
1
|
+
"use client";import{jsxs as s,jsx as r}from"react/jsx-runtime";import{TimeField as u,Label as f,DateInput as c,DateSegment as b,Text as g,FieldError as x}from"react-aria-components";import{cn as e}from"../../utils/cn.js";function v({label:a,description:i,errorMessage:o,className:d,classNames:t,...n}){return s(u,{className:e("text-fg",d),...n,children:[r(f,{className:e("flex text-fg-muted text-sm",t?.label),children:a}),r(c,{className:e("flex items-center","border-solid border border-border rounded-md","text-sm text-fg","h-10 px-1 py-0 m-0 w-full","bg-surface","transition-all duration-200 ease-in-out","hover:border-border-emphasis","focus-within:outline-2 focus-within:outline focus-within:outline-border-subtle focus-within:border-border-emphasis","disabled:border-border-subtle disabled:bg-surface-subtle","invalid:border-danger-soft invalid:bg-danger-surface invalid:text-danger","invalid:hover:border-danger invalid:focus-within:border-danger invalid:focus-within:outline-danger-ring",t?.input),children:l=>r(b,{segment:l,className:e("p-1 tabular-nums text-end text-fg","invalid:text-danger-soft","disabled:cursor-default disabled:select-none disabled:text-fg-subtle","focus:text-fg focus:bg-border-subtle focus:outline-0 focus:rounded-md focus:caret-transparent focus:invalid:bg-danger-soft focus:invalid:text-fg-inverse","type-literal:p-0.5","data-[placeholder]:text-fg-subtle data-[placeholder]:invalid:text-danger-soft data-[placeholder]:invalid:focus:text-fg-inverse","aria-[readonly]:focus-visible:outline aria-[readonly]:focus-visible:outline-fg-muted aria-[readonly]:focus-visible:outline-1","aria-[readonly]:focus:outline aria-[readonly]:focus:outline-fg-muted aria-[readonly]:focus:bg-transparent aria-[readonly]:focus:outline-2",t?.segment)})}),i&&r(g,{className:e("flex text-fg-muted text-sm",t?.description),slot:"description",children:i}),r(x,{className:e("flex text-danger-soft text-sm",t?.error),children:o})]})}export{v as TimeInput,v as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as
|
|
1
|
+
"use client";import{jsx as n}from"react/jsx-runtime";import{ToggleButton as a}from"react-aria-components";import{cn as i}from"../../utils/cn.js";function g({children:d,size:e="md",variant:r="solid",className:t,...b}){return n(a,{className:s=>{const{isDisabled:o}=s;return i("flex items-center justify-center","font-semibold text-sm","rounded-md border-solid border","px-4","transition-all duration-200 ease-in-out","focus:outline-2 focus:outline focus:outline-border-subtle pressed:scale-95",{"h-8":e==="sm","h-10":e==="md","h-12":e==="lg"},[r==="ghost"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-transparent hover:border-transparent focus:border-transparent disabled:border-transparent","text-fg disabled:text-fg-subtle",o&&["disabled:text-fg","opacity-75"]],r==="outline"&&["bg-transparent hover:bg-transparent focus:bg-transparent disabled:bg-transparent","border-border hover:border-border-emphasis focus:border-border-emphasis disabled:border-border-subtle","text-fg disabled:text-fg-muted",o&&["disabled:border-border","disabled:text-fg","opacity-75"]],r==="solid"&&["bg-surface-inverse-hover hover:bg-surface-inverse focus:bg-surface-inverse disabled:bg-surface-inverse","border-surface-inverse-hover hover:border-fg focus:border-fg disabled:border-border-subtle","text-fg-inverse disabled:text-fg-subtle",o&&["disabled:border-fg","disabled:text-fg-inverse","opacity-75"]]],typeof t=="function"?t(s):t)},...b,children:d})}export{g as ToggleButton,g as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as
|
|
1
|
+
"use client";import{jsxs as t,jsx as e}from"react/jsx-runtime";import{TooltipTrigger as f,Focusable as d,Tooltip as m,OverlayArrow as b}from"react-aria-components";import{cn as i}from"../../utils/cn.js";function h({children:l,content:n,placement:s="top",offset:r=8,showArrow:u=!1,isDisabled:a,delay:c=500,classNames:o}){return t(f,{delay:c,isDisabled:a,children:[e(d,{children:e("span",{role:"button",tabIndex:0,className:"inline-flex outline-none",children:l})}),t(m,{placement:s,offset:r,className:i("z-50 outline-none","focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-fg-muted",o?.base),children:[u&&e(b,{children:e("span",{className:"block rotate-45 w-2.5 h-2.5 -translate-y-1/2 rounded-sm bg-fg-muted shadow-sm"})}),e("div",{className:i("inline-flex flex-col items-center justify-center outline-none","w-full py-1 px-2.5 box-border bg-fg-muted rounded-md shadow-sm","text-sm text-fg-inverse subpixel-antialiased",o?.content),children:n})]})]})}export{h as Tooltip,h as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsxs as l,Fragment as u,jsx as e}from"react/jsx-runtime";import{forwardRef as y,useState as v}from"react";import{m as j}from"framer-motion";import{FieldError as V}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import _ from"../../hooks/useIsClient.js";import{Skeleton as p}from"../Skeleton/Skeleton.js";function
|
|
1
|
+
"use client";import{jsxs as l,Fragment as u,jsx as e}from"react/jsx-runtime";import{forwardRef as y,useState as v}from"react";import{m as j}from"framer-motion";import{FieldError as V}from"react-aria-components";import{cn as r}from"../../utils/cn.js";import _ from"../../hooks/useIsClient.js";import{Skeleton as p}from"../Skeleton/Skeleton.js";function U({hasTitle:a,className:s}){return l("div",{className:"w-full h-full flex flex-col gap-4",children:[a&&e(p,{className:"w-1/2 h-8 mx-auto rounded-md z-20"}),e(p,{className:r("w-full h-56 rounded-md z-20 relative",s)})]})}const H=y(({title:a,description:s="Preview will display here.",fileExtension:m,actionTitle:g="select file",variant:i,errorMessage:f,defaultImagePath:n,classNames:h,...c},b)=>{const x=_(),[t,w]=v({src:null,alt:null}),C=!!f,N=m?m.split(",").map(o=>`image/${o.trim()}`).join(", "):"image/*";return l("div",{className:r("w-full h-full","flex flex-col gap-4"),children:[x?l(u,{children:[a&&e("h6",{className:r("text-center","text-2xl","m-0 mb-4"),children:a}),l("div",{className:r("w-full h-full","flex flex-col justify-between gap-5 items-center",["bg-surface-subtle",i==="base"&&"bg-transparent"],"rounded-md",[i==="base"&&"rounded-none"],["p-6 lg:p-7",i==="base"&&"p-0 lg:p-0"]),children:[l("label",{htmlFor:`${c?.name}-upload-file`,"aria-label":"image upload",onChange:o=>{const{target:{files:d}}=o;d&&w({src:URL.createObjectURL(d[0]),alt:d[0].name})},className:r("inline-flex justify-center items-center","uppercase text-base border-border-subtle","bg-transparent","border-1 border-solid","px-4 py-0","rounded-2xl","cursor-pointer","w-full h-9",["max-w-48",i==="base"&&"max-w-none"],"my-0 mx-auto","has-[:disabled]:bg-transparent has-[:disabled]:text-fg-strong","hover:bg-surface-subtle hover:text-fg",h?.label),children:[g,e("input",{id:`${c?.name}-upload-file`,accept:N,type:"file",hidden:!0,...c,ref:b,className:"hidden"})]}),n&&!t.src?e("div",{className:"flex justify-center items-center w-60",children:e("a",{href:n,target:"_blank",rel:"noreferrer",children:e("img",{src:n,alt:"",className:"w-full h-auto"})})}):l(u,{children:[e(j.div,{initial:{opacity:0},animate:{opacity:1},transition:{type:"spring",duration:3,bounce:0},className:"flex justify-center items-center w-52 h-auto",children:t.src?e("img",{src:t.src,height:96,width:200,alt:t.alt||"",className:"max-h-full object-contain"}):l("svg",{xmlns:"http://www.w3.org/2000/svg",width:"31",height:"55",viewBox:"0 0 31 55",fill:"none",children:[e("g",{clipPath:"url(#clip0_15607_32844)",children:e("path",{d:"M15.9521 0.721924C24.2431 0.721924 30.9521 7.36392 30.9521 15.5719V43.9219C30.9521 49.8889 26.0703 54.7219 20.0431 54.7219C14.0158 54.7219 9.13397 49.8889 9.13397 43.9219V20.9719C9.13397 17.2459 12.1885 14.2219 15.9521 14.2219C19.7158 14.2219 22.7703 17.2459 22.7703 20.9719V41.2219H17.3158V20.7289C17.3158 19.2439 14.5885 19.2439 14.5885 20.7289V43.9219C14.5885 46.8919 17.0431 49.3219 20.0431 49.3219C23.0431 49.3219 25.4976 46.8919 25.4976 43.9219V15.5719C25.4976 10.3609 21.2158 6.12192 15.9521 6.12192C10.6885 6.12192 6.40669 10.3609 6.40669 15.5719V41.2219H0.952148V15.5719C0.952148 7.36392 7.66124 0.721924 15.9521 0.721924Z",fill:"#646464"})}),e("defs",{children:e("clipPath",{id:"clip0_15607_32844",children:e("rect",{width:"30",height:"54",fill:"white",transform:"translate(0.952148 0.721924)"})})})]})},t.src),e("p",{className:"m-0 text-fg-strong text-center",children:t.alt||s})]})]})]}):e(U,{hasTitle:!!a,className:h?.skeleton}),C&&e(V,{className:r("-mt-2","self-start"),children:f})]})});export{H as UploadImage,H as default};
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# BUGFIX: `Drawer` no longer silently becomes a full-screen takeover
|
|
2
|
+
|
|
3
|
+
**Date:** 2026-09-23
|
|
4
|
+
**Package:** `@clicktap/ui`
|
|
5
|
+
**Affects:** `src/components/Drawer/Drawer.tsx`, `Drawer.types.ts` — every `<Drawer>` whose `size` (or default) exceeds the viewport along its opening axis.
|
|
6
|
+
**Classification:** BUGFIX
|
|
7
|
+
**Breaking:** No API change. **Visual:** a `left`/`right` drawer wider than 88% of the viewport, or a `top`/`bottom` drawer taller than 88% of it, now leaves a visible sliver of the page instead of covering it entirely. A drawer that already fit is unchanged.
|
|
8
|
+
**Ticket:** CTAP-1877
|
|
9
|
+
|
|
10
|
+
## Problem
|
|
11
|
+
|
|
12
|
+
`Drawer` rendered its `size` as a custom property and capped it with `max-w-full` (left/right) or
|
|
13
|
+
`max-h-[var(--visual-viewport-height)]` (top/bottom). Both caps are exactly 100% of the viewport, so
|
|
14
|
+
a `size` wider/taller than the viewport did not render "nearly full" — it rendered **exactly** full:
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
w-[var(--drawer-size)] max-w-full → effective width = 100vw
|
|
18
|
+
h-[var(--drawer-size)] max-h-[var(--visual-viewport-height)] → effective height = 100%
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
`size="30rem"` (480px) on a 375px phone hit this on every storefront drawer that used it (header
|
|
22
|
+
menu, cart, add-items, collection filters). The **default** `size` (`20rem` = 320px) hit it too,
|
|
23
|
+
leaving only 55px at 375px and nothing at all at 320px.
|
|
24
|
+
|
|
25
|
+
A drawer with no visible edge reads as a new page rather than a layer over the current one, and it
|
|
26
|
+
removes the obvious place to tap to dismiss.
|
|
27
|
+
|
|
28
|
+
## What changed
|
|
29
|
+
|
|
30
|
+
The cap is now 88% of the viewport along the drawer's opening axis, so the declared `size` is a
|
|
31
|
+
maximum rather than a promise:
|
|
32
|
+
|
|
33
|
+
- `left` / `right`: `max-w-[88vw]` (was `max-w-full`)
|
|
34
|
+
- `top` / `bottom`: `max-h-[min(var(--visual-viewport-height),88vh)]` (was `max-h-[var(--visual-viewport-height)]`)
|
|
35
|
+
|
|
36
|
+
88vw/88vh leaves a 45–50px sliver at common phone widths and changes nothing once the drawer's own
|
|
37
|
+
size is already under 88% of the viewport — which every desktop width is, for every `size` this
|
|
38
|
+
package has shipped.
|
|
39
|
+
|
|
40
|
+
**New `fullScreen` prop** is the escape hatch: `<Drawer fullScreen>` restores the old unclamped
|
|
41
|
+
behavior (`max-w-full` / `max-h-[var(--visual-viewport-height)]`) for the rare drawer that
|
|
42
|
+
legitimately wants the whole screen. Full-screen is now something you ask for, not something an
|
|
43
|
+
oversized `size` gives you by accident.
|
|
44
|
+
|
|
45
|
+
## Consumer Impact
|
|
46
|
+
|
|
47
|
+
**No action needed for a drawer whose `size` already fit its viewport.** Nothing changes for it.
|
|
48
|
+
|
|
49
|
+
**Drop any hand-rolled clamp.** If you were passing `size="min(30rem, 88vw)"` (or similar) as a
|
|
50
|
+
workaround, remove it — `size="30rem"` now behaves the same way natively:
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
// BEFORE
|
|
54
|
+
<Drawer size="min(30rem, 88vw)" direction="left" aria-label="Filters">
|
|
55
|
+
|
|
56
|
+
// AFTER
|
|
57
|
+
<Drawer size="30rem" direction="left" aria-label="Filters">
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
**If a drawer genuinely needs the full screen**, add `fullScreen`:
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
<Drawer size="100vw" direction="right" fullScreen aria-label="Full-screen picker">
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Without `fullScreen`, a `size="100vw"` (or any value ≥ 88% of the viewport) is now clamped to 88vw —
|
|
67
|
+
that clamp is the point of this fix, so an existing call site that relied on `size` alone to reach
|
|
68
|
+
full screen needs the new prop.
|
|
69
|
+
|
|
70
|
+
The overlay's own dismiss-on-tap-outside behavior (`isDismissable` on `ModalOverlay`) is unaffected
|
|
71
|
+
by this change; the sliver only makes that existing behavior discoverable.
|
|
72
|
+
|
|
73
|
+
## Verification
|
|
74
|
+
|
|
75
|
+
`Drawer.spec.tsx` — 10 tests: for each of the four directions, asserts the clamp class is present
|
|
76
|
+
and the old unconditional full-viewport class is absent, plus the `fullScreen` escape hatch restores
|
|
77
|
+
the old classes and removes the clamp. Also covers that the default `size` (`20rem`) is still subject
|
|
78
|
+
to the clamp, and that a `size` under the clamp still renders via `w-[var(--drawer-size)]` /
|
|
79
|
+
`h-[var(--drawer-size)]` (i.e. the fix does not force every drawer to exactly 88vw/88vh — it is a
|
|
80
|
+
ceiling, not a fixed size).
|
|
81
|
+
|
|
82
|
+
These are cancellation assertions, the same shape as `Button`'s `variant="link"` tests: they check
|
|
83
|
+
the old full-viewport class is **gone**, not merely that a clamp class was appended alongside it —
|
|
84
|
+
`tailwind-merge` collapses conflicting `max-w-*`/`max-h-*` utilities to the last one it sees, so a
|
|
85
|
+
fix that left both classes present would still resolve to whichever one happened to come last.
|
|
86
|
+
|
|
87
|
+
⚠️ **Not visually verified against real touch devices.** The tests assert which Tailwind classes
|
|
88
|
+
survive in jsdom; they cannot show that 88vw/88vh is the right percentage for a given storefront's
|
|
89
|
+
breakpoints, only that some percentage other than 100% is now applied. The ticket already flags this
|
|
90
|
+
as a design judgment call, not an engineering one.
|