{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "region-picker",
  "type": "registry:ui",
  "title": "Region picker",
  "description": "Deployment region picker with selectable cards for each region and its latency in milliseconds. Uses radio semantics and an accent tint for the chosen one.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/region-picker.tsx",
      "type": "registry:ui",
      "target": "components/ui/region-picker.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\nconst regions = [\n  { id: \"us-east\", label: \"US East\", latency: \"18ms\" },\n  { id: \"eu-west\", label: \"EU West\", latency: \"42ms\" },\n  { id: \"ap-south\", label: \"AP South\", latency: \"68ms\" },\n]\n\nfunction RegionPicker({\n  value = \"us-east\",\n  onChange,\n  className,\n}: {\n  value?: string\n  onChange?: (id: string) => void\n  className?: string\n}) {\n  return (\n    <div data-slot=\"region-picker\" role=\"radiogroup\" aria-label=\"Region\" className={cn(\"grid gap-2 sm:grid-cols-3\", className)}>\n      {regions.map((r) => {\n        const on = r.id === value\n        return (\n          <button\n            key={r.id}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={on}\n            onClick={() => onChange?.(r.id)}\n            className={cn(\n              \"rounded-xl border px-3 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-accent\",\n              on ? \"border-accent/40 bg-accent/10\" : \"border-border bg-surface hover:border-fg-subtle\"\n            )}\n          >\n            <p className=\"text-sm font-medium text-fg\">{r.label}</p>\n            <p className=\"mt-1 font-mono text-xs tabular-nums text-fg-muted\">{r.latency}</p>\n          </button>\n        )\n      })}\n    </div>\n  )\n}\nexport { RegionPicker }\n"
    }
  ]
}