{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "phone-input",
	"dependencies": ["react-phone-number-input"],
	"registryDependencies": [
		"@9ui/button",
		"@9ui/command",
		"@9ui/input",
		"@9ui/popover",
		"@9ui/scroll-area"
	],
	"files": [
		{
			"path": "ui/phone-input.tsx",
			"content": "import * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\nimport * as BasePhoneInput from \"react-phone-number-input\"\nimport flags from \"react-phone-number-input/flags\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n\tCombobox,\n\tComboboxContent,\n\tComboboxEmpty,\n\tComboboxInput,\n\tComboboxItem,\n\tComboboxList,\n\tComboboxTrigger,\n} from \"@/components/ui/combobox\"\nimport { Input } from \"@/components/ui/input\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype PhoneInputProps = Omit<\n\tReact.ComponentProps<\"input\">,\n\t\"onChange\" | \"value\" | \"ref\"\n> &\n\tOmit<BasePhoneInput.Props<typeof BasePhoneInput.default>, \"onChange\"> & {\n\t\tonChange?: (value: BasePhoneInput.Value) => void\n\t}\n\nfunction PhoneInput({ className, onChange, value, ...props }: PhoneInputProps) {\n\treturn (\n\t\t<BasePhoneInput.default\n\t\t\tclassName={cn(\n\t\t\t\t\"flex\",\n\t\t\t\tprops[\"aria-invalid\"] &&\n\t\t\t\t\t\"[&_*[data-slot=combobox-trigger]]:border-destructive [&_*[data-slot=combobox-trigger]]:ring-destructive/50\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tflagComponent={FlagComponent}\n\t\t\tcountrySelectComponent={CountrySelect}\n\t\t\tinputComponent={InputComponent}\n\t\t\tsmartCaret={false}\n\t\t\tvalue={value || undefined}\n\t\t\tonChange={(value) => onChange?.(value || (\"\" as BasePhoneInput.Value))}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction InputComponent({\n\tclassName,\n\t...props\n}: React.ComponentProps<typeof Input>) {\n\treturn <Input className={cn(\"rounded-s-none\", className)} {...props} />\n}\n\ntype CountryEntry = { label: string; value: BasePhoneInput.Country | undefined }\n\ntype CountrySelectProps = {\n\tdisabled?: boolean\n\tvalue: BasePhoneInput.Country\n\toptions: CountryEntry[]\n\tonChange: (country: BasePhoneInput.Country) => void\n}\n\nfunction CountrySelect({\n\tdisabled,\n\tvalue: selectedCountry,\n\toptions: countryList,\n\tonChange,\n}: CountrySelectProps) {\n\treturn (\n\t\t<Combobox items={countryList} value={selectedCountry || \"\"}>\n\t\t\t<ComboboxTrigger\n\t\t\t\trender={(props) => (\n\t\t\t\t\t<Button\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tclassName=\"flex gap-1 rounded-s-md rounded-e-none border-r-0 px-3 focus:z-10\"\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t>\n\t\t\t\t\t\t<FlagComponent\n\t\t\t\t\t\t\tcountry={selectedCountry}\n\t\t\t\t\t\t\tcountryName={selectedCountry}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<ChevronsUpDown className={cn(\"-mr-1\", disabled && \"hidden\")} />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t/>\n\t\t\t<ComboboxContent className=\"max-h-[20rem] w-[300px] [--input-container-height:4rem]\">\n\t\t\t\t<ComboboxInput\n\t\t\t\t\tclassName=\"focus-visible:ring-0\"\n\t\t\t\t\tinputContainerClassName=\"mb-2\"\n\t\t\t\t\tplaceholder=\"Search country...\"\n\t\t\t\t\tshowClear={false}\n\t\t\t\t/>\n\t\t\t\t<ComboboxEmpty>No countries found.</ComboboxEmpty>\n\t\t\t\t<ComboboxList className=\"max-h-[min(calc(20rem-var(--input-container-height)),calc(var(--available-height)-var(--input-container-height)))] scroll-py-2 overflow-y-auto overscroll-contain\">\n\t\t\t\t\t{(country: CountryEntry) =>\n\t\t\t\t\t\tcountry.value ? (\n\t\t\t\t\t\t\t<CountrySelectOption\n\t\t\t\t\t\t\t\tkey={country.value}\n\t\t\t\t\t\t\t\tcountry={country.value}\n\t\t\t\t\t\t\t\tcountryName={country.label}\n\t\t\t\t\t\t\t\tselectedCountry={selectedCountry}\n\t\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null\n\t\t\t\t\t}\n\t\t\t\t</ComboboxList>\n\t\t\t</ComboboxContent>\n\t\t</Combobox>\n\t)\n}\n\ninterface CountrySelectOptionProps extends BasePhoneInput.FlagProps {\n\tselectedCountry: BasePhoneInput.Country\n\tonChange: (country: BasePhoneInput.Country) => void\n}\n\nfunction CountrySelectOption({\n\tcountry,\n\tcountryName,\n\tonChange,\n}: CountrySelectOptionProps) {\n\tconst handleSelect = () => {\n\t\tonChange(country)\n\t}\n\n\treturn (\n\t\t<ComboboxItem onClick={handleSelect} value={country}>\n\t\t\t<FlagComponent country={country} countryName={countryName} />\n\t\t\t<span className=\"flex-1 text-sm\">{countryName}</span>\n\t\t\t<span className=\"text-foreground/50 text-sm\">{`+${BasePhoneInput.getCountryCallingCode(country)}`}</span>\n\t\t</ComboboxItem>\n\t)\n}\n\nfunction FlagComponent({ country, countryName }: BasePhoneInput.FlagProps) {\n\tconst Flag = flags[country]\n\n\treturn (\n\t\t<span className=\"bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm [&_svg:not([class*='size-'])]:size-full\">\n\t\t\t{Flag && <Flag title={countryName} />}\n\t\t</span>\n\t)\n}\n\nexport { PhoneInput }\n",
			"type": "registry:ui",
			"target": ""
		}
	],
	"type": "registry:ui"
}