4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T2018,'use client' import { IconWorld } from '@tabler/icons-react' import * as React from 'react' import { createContext, useContext, useMemo, useState } from 'react' import * as BasePhoneInput from 'react-phone-number-input' import flags from 'react-phone-number-input/flags' import { cn } from '@/lib/utils' import { Button } from '@/components/ui/button' import { Combobox, ComboboxPopup, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxSeparator, ComboboxTrigger, ComboboxValue, } from '@/components/ui/combobox' import { Input } from '@/components/ui/input' import { ScrollArea } from '@/components/ui/scroll-area' type PhoneInputSize = 'sm' | 'default' | 'lg' const PhoneInputContext = createContext<{ variant: PhoneInputSize popupClassName?: string scrollAreaClassName?: string }>({ variant: 'default', popupClassName: undefined, scrollAreaClassName: undefined, }) type PhoneInputProps = Omit, 'onChange' | 'value' | 'ref'> & Omit< BasePhoneInput.Props, 'onChange' | 'variant' | 'popupClassName' | 'scrollAreaClassName' | 'ref' > & { onChange?: (value: BasePhoneInput.Value) => void variant?: PhoneInputSize popupClassName?: string scrollAreaClassName?: string } const PhoneInput = React.forwardRef(function PhoneInput( { className, variant, popupClassName, scrollAreaClassName, onChange, value, ...props }, ref, ) { const phoneInputSize = variant || 'default' const contextValue = useMemo( () => ({ variant: phoneInputSize, popupClassName, scrollAreaClassName }), [phoneInputSize, popupClassName, scrollAreaClassName], ) return ( onChange?.(value || ('' as BasePhoneInput.Value))} {...props} /> ) }) PhoneInput.displayName = 'PhoneInput' const InputComponent = React.forwardRef>(function InputComponent( { className, ...props }, ref, ) { const { variant } = useContext(PhoneInputContext) return ( ) }) InputComponent.displayName = 'InputComponent' type CountryEntry = { label: string value: BasePhoneInput.Country | undefined } type CountrySelectProps = { disabled?: boolean value: BasePhoneInput.Country options: CountryEntry[] onChange: (country: BasePhoneInput.Country) => void } function CountrySelect({ disabled, value: selectedCountry, options: countryList, onChange }: CountrySelectProps) { const { variant, popupClassName } = useContext(PhoneInputContext) const [open, setOpen] = useState(false) const [searchValue, setSearchValue] = useState('') const filteredCountries = useMemo(() => { if (!searchValue.trim()) return countryList const query = searchValue.trim().toLowerCase() const normalizedQuery = query.startsWith('+') ? query.slice(1) : query return countryList .map((item) => { if (!item.value) return { item, score: 0 } const labelLower = item.label.toLowerCase() const isoCodeLower = item.value.toLowerCase() let callingCode = '' try { callingCode = BasePhoneInput.getCountryCallingCode(item.value) } catch { // ignore invalid country code } let score = 0 if (callingCode === normalizedQuery) { score = 100 } else if (callingCode.startsWith(normalizedQuery)) { score = 80 } else if (isoCodeLower === normalizedQuery) { score = 90 } else if (labelLower.startsWith(query)) { score = 70 } else if (labelLower.includes(query)) { score = 50 } else if (callingCode.includes(normalizedQuery)) { score = 40 } return { item, score } }) .filter(({ score }) => score > 0) .sort((a, b) => b.score - a.score) .map(({ item }) => item) }, [countryList, searchValue]) const handleOpenChange = (isOpen: boolean) => { setOpen(isOpen) if (!isOpen) { setSearchValue('') } } return ( { if (country) { onChange(country) setOpen(false) setSearchValue('') } }} > } /> setSearchValue(e.target.value)} showTrigger={false} className="border-input focus-visible:border-border rounded-none border-0 px-0 py-2.5 shadow-none ring-0! outline-none! focus-visible:ring-0 focus-visible:ring-offset-0" /> No country found.

{filteredCountries.map((item: CountryEntry) => item.value ? ( {item.label} {`+${BasePhoneInput.getCountryCallingCode(item.value)}`} ) : null, )}

) } function FlagComponent({ country, countryName }: BasePhoneInput.FlagProps) { const Flag = flags[country] return ( {Flag ? : } ) } export { PhoneInput, type PhoneInputProps, type PhoneInputSize } export { formatPhoneNumber, formatPhoneNumberIntl, isPossiblePhoneNumber, isValidPhoneNumber, getCountryCallingCode, } from 'react-phone-number-input' 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}],["$","li","react-phone-number-input",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-phone-number-input","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-phone-number-input"}]]}]}]]}],["$","$L4c",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-button.json","https://www.spaceui.one/r/primitives-combobox.json","https://www.spaceui.one/r/primitives-input.json","https://www.spaceui.one/r/primitives-scroll-area.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/registry/components/spaceui/phone-input/index.tsx","content":"$4e","type":"registry:component","target":"components/spaceui/phone-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]