{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "author": "DesignX <ui@designx.dev>",
  "name": "country-select",
  "type": "registry:component",
  "title": "Country Select",
  "description": "A region picker dialog with flags, search and locale detection.",
  "dependencies": [
    "lucide-react@^0.577.0"
  ],
  "registryDependencies": [
    "@dx/dialog",
    "@dx/utils"
  ],
  "files": [
    {
      "path": "dx/country-select.tsx",
      "type": "registry:component",
      "target": "components/dx/country-select.tsx",
      "content": "import * as React from \"react\";\nimport { CheckIcon, ChevronDownIcon, SearchIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"@/components/ui/dialog\";\n\n/**\n * CountrySelecta flag pill that opens a searchable region dialog. Flags\n * and names come from flagcdn.com (CORS-friendly), fetched once and cached\n * for the session. Defaults to the visitor's region from navigator.language.\n */\n\ntype Country = { code: string; name: string; flag: string };\n\nconst flagUrl = (code: string) => `https://flagcdn.com/${code.toLowerCase()}.svg`;\n\nlet cache: Promise<Country[]> | null = null;\n\nfunction fetchCountries(): Promise<Country[]> {\n  if (!cache) {\n    cache = fetch(\"https://flagcdn.com/en/codes.json\")\n      .then((r) => {\n        if (!r.ok) throw new Error(\"Failed to load countries\");\n        return r.json() as Promise<Record<string, string>>;\n      })\n      .then((data) =>\n        Object.entries(data)\n          .filter(([code]) => code.length === 2)\n          .map(([code, name]) => ({ code: code.toUpperCase(), name, flag: flagUrl(code) }))\n          .sort((a, b) => a.name.localeCompare(b.name)),\n      )\n      .catch((e: unknown) => {\n        cache = null;\n        throw e;\n      });\n  }\n  return cache;\n}\n\n/** Loads the country list. Shared across every CountrySelect on the page. */\nfunction useCountries() {\n  const [state, setState] = React.useState<{ data: Country[]; loading: boolean; error: string | null }>({\n    data: [],\n    loading: true,\n    error: null,\n  });\n  React.useEffect(() => {\n    let live = true;\n    fetchCountries().then(\n      (data) => live && setState({ data, loading: false, error: null }),\n      (e: unknown) => live && setState({ data: [], loading: false, error: e instanceof Error ? e.message : \"Failed to load countries\" }),\n    );\n    return () => {\n      live = false;\n    };\n  }, []);\n  return state;\n}\n\nfunction userRegion(): string | undefined {\n  if (typeof navigator === \"undefined\") return undefined;\n  const locale = navigator.language || navigator.languages?.[0] || \"\";\n  return locale.split(/[-_]/)[1]?.toUpperCase();\n}\n\nfunction Flag({ src, className }: { src: string; className?: string }) {\n  return (\n    <span className={cn(\"inline-block shrink-0 overflow-hidden rounded-full bg-container-high ring-1 ring-outline-variant ring-inset\", className)}>\n      <img src={src} alt=\"\" loading=\"lazy\" className=\"size-full object-cover\" />\n    </span>\n  );\n}\n\ntype CountrySelectProps = {\n  /** ISO 3166-1 alpha-2 code, e.g. \"US\". */\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (code: string, country: Country) => void;\n  /** Use the visitor's locale region when uncontrolled and no default is given. */\n  detectRegion?: boolean;\n  title?: string;\n  placeholder?: string;\n  /** Show the selected country's name next to the flag. */\n  showName?: boolean;\n  className?: string;\n  disabled?: boolean;\n};\n\nfunction CountrySelect({\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  detectRegion = true,\n  title = \"Select your region\",\n  placeholder = \"Search by country or region\",\n  showName = false,\n  className,\n  disabled,\n}: CountrySelectProps) {\n  const { data, loading, error } = useCountries();\n  const [open, setOpen] = React.useState(false);\n  const [query, setQuery] = React.useState(\"\");\n  const [inner, setInner] = React.useState<string | undefined>(defaultValue ?? (detectRegion ? userRegion() : undefined));\n  const value = valueProp ?? inner ?? \"US\";\n  const selected = data.find((c) => c.code === value);\n\n  const filtered = React.useMemo(() => {\n    const q = query.trim().toLowerCase();\n    if (!q) return data;\n    return data.filter((c) => c.name.toLowerCase().includes(q) || c.code.toLowerCase() === q);\n  }, [data, query]);\n\n  const pick = (c: Country) => {\n    setInner(c.code);\n    onValueChange?.(c.code, c);\n    setOpen(false);\n  };\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-slot=\"country-select\"\n        disabled={disabled}\n        onClick={() => setOpen(true)}\n        aria-haspopup=\"dialog\"\n        aria-label={`Region: ${selected?.name ?? value}`}\n        className={cn(\n          \"state-layer focus-ring inline-flex h-9 items-center gap-1 rounded-full bg-container-high p-1.5 pr-2 text-sm font-medium transition-colors hover:bg-container-higher disabled:pointer-events-none disabled:opacity-50\",\n          className,\n        )}\n      >\n        <Flag src={flagUrl(value)} className=\"size-6\" />\n        {showName && <span className=\"max-w-40 truncate pl-1\">{selected?.name ?? value}</span>}\n        <ChevronDownIcon className=\"size-4 text-muted-foreground\" />\n      </button>\n\n      <Dialog\n        open={open}\n        onOpenChange={(o) => {\n          setOpen(o);\n          if (!o) setQuery(\"\");\n        }}\n      >\n        <DialogContent className=\"flex h-[min(640px,85svh)] flex-col gap-0 overflow-hidden p-0 sm:max-w-md\">\n          <DialogHeader className=\"gap-3 p-5 pb-3\">\n            <DialogTitle className=\"text-base\">{title}</DialogTitle>\n            <DialogDescription className=\"sr-only\">Search and choose a country or region.</DialogDescription>\n            <label className=\"flex h-11 items-center gap-2 rounded-xl bg-container-high px-3 ring-1 ring-outline-variant transition-shadow ring-inset focus-within:ring-foreground/40\">\n              <SearchIcon className=\"size-4.5 shrink-0 text-muted-foreground\" />\n              <input\n                type=\"search\"\n                value={query}\n                onChange={(e) => setQuery(e.target.value)}\n                placeholder={placeholder}\n                aria-label={placeholder}\n                className=\"w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground\"\n              />\n            </label>\n          </DialogHeader>\n\n          <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-2 pb-2\">\n            {loading ? (\n              <ul aria-hidden className=\"flex flex-col\">\n                {Array.from({ length: 8 }, (_, i) => (\n                  <li key={i} className=\"flex h-14 items-center gap-3 px-3\">\n                    <span className=\"size-8 animate-pulse rounded-full bg-container-high\" />\n                    <span className=\"h-3 w-32 animate-pulse rounded-full bg-container-high\" />\n                  </li>\n                ))}\n              </ul>\n            ) : error ? (\n              <p className=\"p-8 text-center text-sm text-destructive\">{error}</p>\n            ) : filtered.length === 0 ? (\n              <p className=\"p-8 text-center text-sm text-muted-foreground\">No countries found</p>\n            ) : (\n              <ul aria-label=\"Countries\" className=\"flex flex-col\">\n                {filtered.map((c) => {\n                  const active = c.code === value;\n                  return (\n                    <li key={c.code}>\n                      <button\n                        type=\"button\"\n                        aria-current={active || undefined}\n                        onClick={() => pick(c)}\n                        className={cn(\n                          \"state-layer focus-ring flex h-14 w-full items-center gap-3 rounded-xl px-3 text-left text-sm font-medium tracking-tight transition-colors\",\n                          active && \"bg-container\",\n                        )}\n                      >\n                        <Flag src={c.flag} className=\"size-8\" />\n                        <span className=\"flex-1 truncate\">{c.name}</span>\n                        {active && <CheckIcon className=\"size-4.5\" />}\n                      </button>\n                    </li>\n                  );\n                })}\n              </ul>\n            )}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n\nexport { CountrySelect, useCountries };\nexport type { Country, CountrySelectProps };\n"
    }
  ],
  "categories": [
    "motion"
  ],
  "meta": {
    "group": "dx",
    "docs": "https://dxuireact.com/docs/components/country-select"
  }
}