{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "phone-input",
	"title": "Phone Input",
	"type": "registry:ui",
	"description": "International phone input with validation and formatting.",
	"dependencies": [
		"@kevwpl/svelte-o-phone",
		"libphonenumber-js"
	],
	"registryDependencies": [
		"button",
		"input",
		"popover",
		"command"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { usePhonePicker } from '@kevwpl/svelte-o-phone';\n\timport * as ButtonGroup from '$lib/components/ui/button-group/index.js';\n\timport * as Select from '$lib/components/ui/select/index.js';\n\timport { Input } from '$lib/components/ui/input/index.js';\n\n\tlet {\n\t\tclass: className,\n\t\tplaceholder = 'Phone number',\n\n\t\tvalue = $bindable(''),\n\t\tcountry = $bindable('US'),\n\t\tinitialValue = '',\n\t\tallowedCountries = null,\n\t\tsorting = 'alphabetic',\n\t\tcustomOrder = null,\n\t\tautoDetectCountry = true,\n\t\tdetectInitialCountry = false,\n\t\tdetectionPriority = ['language', 'ip'],\n\t\tonchange,\n\t\t...rest\n\t}: {\n\t\tclass?: string;\n\t\tplaceholder?: string;\n\t\tvalue?: string;\n\t\tcountry?: string | null;\n\t\tinitialValue?: string;\n\t\tallowedCountries?: string[] | null;\n\t\tsorting?: 'alphabetic' | 'numeric' | 'custom';\n\t\tcustomOrder?: string[] | null;\n\t\tautoDetectCountry?: boolean;\n\t\tdetectInitialCountry?: boolean;\n\t\tdetectionPriority?: ('language' | 'ip')[];\n\t\tonchange?: (data: any) => void;\n\t\t[key: string]: any;\n\t} = $props();\n\n\tconst picker = usePhonePicker({\n\t\tinitialValue: initialValue || value,\n\t\tinitialCountry: country || 'US',\n\t\tallowedCountries,\n\t\tsorting,\n\t\tcustomOrder,\n\t\tautoDetectCountry,\n\t\tdetectInitialCountry,\n\t\tdetectionPriority,\n\t\tonchange: (data) => {\n\t\t\tvalue = data.value;\n\t\t\tcountry = data.country;\n\t\t\tif (onchange) onchange(data);\n\t\t}\n\t});\n\n\t$effect(() => {\n\t\tif (inputElement) {\n\t\t\tpicker.bindInput(inputElement);\n\t\t\tconsole.log('BOUND');\n\t\t}\n\t});\n\n\tlet inputElement: HTMLInputElement | null = $state(null);\n</script>\n\n<ButtonGroup.Root>\n\t<Select.Root open={picker.dropdownOpen} bind:value={picker.selectedCountryCode} type=\"single\">\n\t\t<Select.Trigger onclick={() => picker.toggleDropdown()}>\n\t\t\t<span>{picker.selectedCountry.flag}</span>\n\t\t\t<span>{picker.selectedCountry.dialCode}</span>\n\t\t</Select.Trigger>\n\t\t<Select.Content>\n\t\t\t{#each picker.countryList as c}\n\t\t\t\t<Select.Item\n\t\t\t\t\tvalue={c.code}\n\t\t\t\t\tclass=\"flex gap-2 items-center p-2 cursor-pointer\"\n\t\t\t\t\tonclick={() => picker.selectCountry(c)}\n\t\t\t\t>\n\t\t\t\t\t<span class=\"flag\">{c.flag}</span>\n\t\t\t\t\t<span class=\"name\">{c.name}</span>\n\t\t\t\t\t<span class=\"code\">{c.dialCode}</span>\n\t\t\t\t</Select.Item>\n\t\t\t{/each}\n\t\t</Select.Content>\n\t</Select.Root>\n\t<Input\n\t\tbind:ref={picker.ref}\n\t\ttype=\"tel\"\n\t\t{placeholder}\n\t\tvalue={picker.input}\n\t\toninput={picker.handleInput}\n\t\taria-label=\"Phone number input\"\n\t/>\n</ButtonGroup.Root>\n",
			"type": "registry:ui",
			"target": "phone-input/phone-input.svelte"
		},
		{
			"content": "import PhoneInput from \"./phone-input.svelte\";\r\nexport { PhoneInput };",
			"type": "registry:ui",
			"target": "phone-input/index.ts"
		}
	]
}