Phone Input

1'use client'
2 
3import type { ComponentProps } from 'react'
4import { createContext, useContext, useMemo, useState } from 'react'
5 
6import * as BasePhoneInput from 'react-phone-number-input'
7import flags from 'react-phone-number-input/flags'
8import { Button } from '@/components/ui/button'
9import {
10  Combobox,
11  ComboboxContent,
12  ComboboxEmpty,
13  ComboboxInput,
14  ComboboxItem,
15  ComboboxList,
16  ComboboxSeparator,
17  ComboboxTrigger,
18  ComboboxValue
19} from '@/components/ui/combobox'
20import { Input } from '@/components/ui/input'
21import { ScrollArea } from '@/components/ui/scroll-area'
22import { cn } from '@/lib/utils'
23import { EarthIcon } from "lucide-react"
24 
25type PhoneInputSize = 'sm' | 'default' | 'lg'
26 
27const PhoneInputContext = createContext<{
28  variant: PhoneInputSize
29  popupClassName?: string
30  scrollAreaClassName?: string
31  inputClassName?: string
32  triggerClassName?: string
33  readOnly?: boolean
34}>({
35  variant: 'default',
36  popupClassName: undefined,
37  scrollAreaClassName: undefined,
38  inputClassName: undefined,
39  triggerClassName: undefined,
40  readOnly: false
41})
42 
43type PhoneInputProps = Omit<ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> &
44  Omit<
45    BasePhoneInput.Props<typeof BasePhoneInput.default>,
46    'onChange' | 'variant' | 'popupClassName' | 'scrollAreaClassName'
47  > & {
48    onChange?: (value: BasePhoneInput.Value) => void
49    variant?: PhoneInputSize
50    popupClassName?: string
51    scrollAreaClassName?: string
52    inputClassName?: string
53    triggerClassName?: string
54  }
55 
56const PhoneInput = ({
57  className,
58  variant,
59  popupClassName,
60  scrollAreaClassName,
61  inputClassName,
62  triggerClassName,
63  onChange,
64  value,
65  ...props
66}: PhoneInputProps) => {
67  const phoneInputSize = variant || 'default'
68 
69  return (
70    <PhoneInputContext.Provider
71      value={{
72        variant: phoneInputSize,
73        popupClassName,
74        scrollAreaClassName,
75        inputClassName,
76        triggerClassName,
77        readOnly: props.readOnly
78      }}
79    >
80      <BasePhoneInput.default
81        className={cn(
82          'flex',
83          props['aria-invalid'] &&
84            '[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50',
85          className
86        )}
87        flagComponent={FlagComponent}
88        countrySelectComponent={CountrySelect}
89        inputComponent={InputComponent}
90        smartCaret={false}
91        value={value || undefined}
92// … truncated