@clicktap/ui 2.3.2 → 2.3.4
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.js +1 -1
- 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/PasswordCheck/PasswordCheck.utils.d.ts +15 -0
- package/components/PasswordCheck/PasswordCheck.utils.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/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-24-dialog-semantic-surface-tokens.md +81 -0
- package/docs/migrations/2026/09/ui-2026-09-24-password-check-lowercase-and-trim.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 +30 -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 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
|
|
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,81 @@
|
|
|
1
|
+
# BUGFIX: `Dialog` paints from semantic tokens instead of literal `bg-white`
|
|
2
|
+
|
|
3
|
+
**Date:** 2026-09-24
|
|
4
|
+
**Package:** `@clicktap/ui`
|
|
5
|
+
**Affects:** `src/components/Dialog/Dialog.tsx` — every `<Dialog>` that does not already pass its own background in `className`.
|
|
6
|
+
**Classification:** BUGFIX
|
|
7
|
+
**Breaking:** No. It is a change of default, and the default only moves where a consumer has re-themed the tokens: an app on the shipped light theme sees **no visual change at all** (`--color-surface` is `#fff`, the exact value `bg-white` produced, and `--color-fg` is the slate-900 such an app already inherited). A dark-themed app stops getting a white panel and gets its own surface. No API change, and the `className` escape hatch is untouched.
|
|
8
|
+
**Ticket:** CTAP-1902
|
|
9
|
+
|
|
10
|
+
## Problem
|
|
11
|
+
|
|
12
|
+
`Dialog`'s base class list carried the literal `bg-white` and set no text color at all. In an app
|
|
13
|
+
whose semantic tokens resolve dark, the panel painted white while the text inherited the app's
|
|
14
|
+
light `--color-fg` — so the dialog was not merely off-brand, it was **illegible**.
|
|
15
|
+
|
|
16
|
+
The same class list already used `border-border-emphasis`, a semantic token, which is what makes
|
|
17
|
+
this read as a class the CTAP-1123 sweep missed rather than a deliberate choice. A reader could
|
|
18
|
+
not tell which colors in it were intentional.
|
|
19
|
+
|
|
20
|
+
Measured, rendering `<Dialog aria-label="probe">hi</Dialog>` with no `className` and reading the
|
|
21
|
+
resulting class attribute:
|
|
22
|
+
|
|
23
|
+
**Before**
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2
|
|
27
|
+
max-h-[calc(100dvh-2rem)] overflow-y-auto shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg
|
|
28
|
+
bg-white border border-solid border-border-emphasis
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**After**
|
|
32
|
+
|
|
33
|
+
```
|
|
34
|
+
p-8 outline-0 max-w-max w-screen absolute top-2/4 left-2/4 -translate-x-1/2 -translate-y-1/2
|
|
35
|
+
max-h-[calc(100dvh-2rem)] overflow-y-auto bg-surface text-fg
|
|
36
|
+
shadow-[0_8px_24px_rgba(0,0,0,0.1)] rounded-lg border border-solid border-border-emphasis
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## What changed
|
|
40
|
+
|
|
41
|
+
* `bg-white` → `bg-surface`, the token the rest of the package's surfaces use. `theme.css`
|
|
42
|
+
defines `--color-surface: #fff`, so the shipped default renders identically.
|
|
43
|
+
* `text-fg` added, so the panel's contrast is self-contained rather than inherited from whatever
|
|
44
|
+
encloses the dialog. `--color-fg` is the slate-900 those apps were already inheriting.
|
|
45
|
+
* The shadow stays the literal `shadow-[0_8px_24px_rgba(0,0,0,0.1)]`, now with a comment in the
|
|
46
|
+
source saying so is deliberate. `theme.css` publishes no `--shadow-*` token, and inventing one
|
|
47
|
+
from inside a bugfix would enlarge the package's public token surface; that belongs with the
|
|
48
|
+
theming work in CTAP-1834. Unlike the background it also degrades gracefully — a 10%-black drop
|
|
49
|
+
shadow goes near-invisible on a dark ground rather than wrong.
|
|
50
|
+
|
|
51
|
+
`Dialog.spec.tsx` is new and permanent. Beyond asserting the two tokens it fails on **any**
|
|
52
|
+
literal palette utility reaching the rendered panel, so a later edit cannot quietly reintroduce
|
|
53
|
+
one here. It verified the failure against the pre-fix source before the fix landed.
|
|
54
|
+
|
|
55
|
+
## Consumer action
|
|
56
|
+
|
|
57
|
+
None.
|
|
58
|
+
|
|
59
|
+
A consumer that passes its own background or foreground still wins outright — `cn`/tailwind-merge
|
|
60
|
+
drops the base class, and that is covered by tests now. Measured:
|
|
61
|
+
|
|
62
|
+
```
|
|
63
|
+
<Dialog className="bg-admin-surface"> → … text-fg shadow-[…] rounded-lg
|
|
64
|
+
border border-solid border-border-emphasis bg-admin-surface
|
|
65
|
+
<Dialog className="text-admin-fg"> → … bg-surface shadow-[…] … text-admin-fg
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
`text-fg` is a text-**color** for tailwind-merge, not a font size, so it does not collide with a
|
|
69
|
+
caller's `text-lg` or with the package's own `typography-*` scale.
|
|
70
|
+
|
|
71
|
+
An app that wants the old unconditional white keeps it by overriding the token
|
|
72
|
+
(`--color-surface: #fff`, which is already the default) or by passing `className="bg-white"`.
|
|
73
|
+
|
|
74
|
+
## Still open
|
|
75
|
+
|
|
76
|
+
The rest of the package is not swept. A survey of `libs/frontend-modules/ui/src` (excluding
|
|
77
|
+
stories and tests) found **139 literal palette utilities across 54 component files** after this
|
|
78
|
+
fix — `Collection` (31), `FeatureGate` (10), `Tabs` (8), `Pagination` (7), `TimeInput` (6),
|
|
79
|
+
`Select` (6), `DateInput` (6) lead it. A lint rule that fails on literal color utilities was
|
|
80
|
+
considered here and deliberately deferred: turning it on means fixing or annotating all 139, which
|
|
81
|
+
is its own piece of work. It should be a separate ticket, landing the rule and the sweep together.
|