{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "country-selector",
  "type": "registry:block",
  "title": "Country Selector",
  "description": "A country selector component for phone number input with country codes and flags.",
  "dependencies": [
    "@invertase/firebaseui-react"
  ],
  "registryDependencies": [
    "select"
  ],
  "files": [
    {
      "path": "src/components/country-selector.tsx",
      "content": "\"use client\";\n\nimport { forwardRef, useCallback, useImperativeHandle, useState } from \"react\";\nimport type { CountryCode, CountryData } from \"@invertase/firebaseui-core\";\nimport {\n  type CountrySelectorRef,\n  type CountrySelectorProps,\n  useCountries,\n  useDefaultCountry,\n} from \"@invertase/firebaseui-react\";\n\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\n\nexport type { CountrySelectorRef };\n\nexport const CountrySelector = forwardRef<CountrySelectorRef, CountrySelectorProps>((_props, ref) => {\n  const countries = useCountries();\n  const defaultCountry = useDefaultCountry();\n  const [selected, setSelected] = useState<CountryData>(defaultCountry);\n\n  const setCountry = useCallback(\n    (code: CountryCode) => {\n      const foundCountry = countries.find((country) => country.code === code);\n      setSelected(foundCountry!);\n    },\n    [countries]\n  );\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      getCountry: () => selected,\n      setCountry,\n    }),\n    [selected, setCountry]\n  );\n\n  return (\n    <Select value={selected.code} onValueChange={setCountry}>\n      <SelectTrigger className=\"w-[120px]\">\n        <SelectValue>\n          {selected.emoji} {selected.dialCode}\n        </SelectValue>\n      </SelectTrigger>\n      <SelectContent>\n        {countries.map((country) => (\n          <SelectItem key={country.code} value={country.code}>\n            {country.dialCode} ({country.name})\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n});\n\nCountrySelector.displayName = \"CountrySelector\";\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "version": "0.0.2"
  }
}