phone-input

1import * as React from "react"
2import { ChevronsUpDown } from "lucide-react"
3import * as BasePhoneInput from "react-phone-number-input"
4import flags from "react-phone-number-input/flags"
5 
6import { Button } from "@/components/ui/button"
7import {
8	Combobox,
9	ComboboxContent,
10	ComboboxEmpty,
11	ComboboxInput,
12	ComboboxItem,
13	ComboboxList,
14	ComboboxTrigger,
15} from "@/components/ui/combobox"
16import { Input } from "@/components/ui/input"
17 
18import { cn } from "@/lib/utils"
19 
20type PhoneInputProps = Omit<
21	React.ComponentProps<"input">,
22	"onChange" | "value" | "ref"
23> &
24	Omit<BasePhoneInput.Props<typeof BasePhoneInput.default>, "onChange"> & {
25		onChange?: (value: BasePhoneInput.Value) => void
26	}
27 
28function PhoneInput({ className, onChange, value, ...props }: PhoneInputProps) {
29	return (
30		<BasePhoneInput.default
31			className={cn(
32				"flex",
33				props["aria-invalid"] &&
34					"[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50",
35				className
36			)}
37			flagComponent={FlagComponent}
38			countrySelectComponent={CountrySelect}
39			inputComponent={InputComponent}
40			smartCaret={false}
41			value={value || undefined}
42			onChange={(value) => onChange?.(value || ("" as BasePhoneInput.Value))}
43			{...props}
44		/>
45	)
46}
47 
48function InputComponent({
49	className,
50	...props
51}: React.ComponentProps<typeof Input>) {
52	return <Input className={cn("rounded-s-none", className)} {...props} />
53}
54 
55type CountryEntry = { label: string; value: BasePhoneInput.Country | undefined }
56 
57type CountrySelectProps = {
58	disabled?: boolean
59	value: BasePhoneInput.Country
60	options: CountryEntry[]
61	onChange: (country: BasePhoneInput.Country) => void
62}
63 
64function CountrySelect({
65	disabled,
66	value: selectedCountry,
67	options: countryList,
68	onChange,
69}: CountrySelectProps) {
70	return (
71		<Combobox items={countryList} value={selectedCountry || ""}>
72			<ComboboxTrigger
73				render={(props) => (
74					<Button
75						{...props}
76						type="button"
77						variant="outline"
78						className="flex gap-1 rounded-s-md rounded-e-none border-r-0 px-3 focus:z-10"
79						disabled={disabled}
80					>
81						<FlagComponent
82							country={selectedCountry}
83							countryName={selectedCountry}
84						/>
85						<ChevronsUpDown className={cn("-mr-1", disabled && "hidden")} />
86					</Button>
87				)}
88			/>
89			<ComboboxContent className="max-h-[20rem] w-[300px] [--input-container-height:4rem]">
90				<ComboboxInput
91					className="focus-visible:ring-0"
92					inputContainerClassName="mb-2"
93// … truncated