{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "region-card",
  "title": "RegionCard",
  "description": "Floating server-info chip: region name, mono id, and a color-coded ping line.",
  "dependencies": [
    "@hugeicons/react",
    "@hugeicons/core-free-icons"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.neon.com/r/neon-tokens.json"
  ],
  "files": [
    {
      "path": "src/components/region-card/region-card.tsx",
      "content": "\"use client\";\n\nimport { CpuIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/* Ping color coding: green under 80 ms, amber under 180, red past that. */\nconst PING_FAST_MS = 80;\nconst PING_OK_MS = 180;\n\nexport const pingTone = (ping: number) => {\n  if (ping < PING_FAST_MS) {\n    return \"text-primary\";\n  }\n\n  return ping < PING_OK_MS ? \"text-amber-500\" : \"text-destructive\";\n};\n\nexport type RegionCardProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /** Display name, e.g. \"AWS Europe Central 1 (Frankfurt)\". */\n  title: string;\n  /** Mono region id, e.g. \"aws-eu-central-1\". */\n  regionId: string;\n  /** Measured round-trip in ms; renders color-coded when present. */\n  ping?: number | null;\n  /** Uppercase kicker above the title. */\n  label?: string;\n  /** Leading icon; defaults to the CPU mark. */\n  icon?: ReactNode;\n  /** Trailing content, e.g. a status badge. */\n  children?: ReactNode;\n};\n\n/**\n * The floating server-info chip: kicker, region name, and a mono\n * id line with a color-coded ping. Position it via className —\n * it ships unpositioned so maps, globes, and lists can anchor it\n * however they need.\n */\nexport const RegionCard = ({\n  children,\n  className,\n  icon,\n  label = \"Region\",\n  ping,\n  regionId,\n  title,\n  ...props\n}: RegionCardProps) => (\n  <div\n    className={cn(\n      \"flex animate-in items-center gap-2.5 rounded-lg border border-primary/40 bg-popover/90 py-2 pr-3 pl-2.5 fade-in-0 backdrop-blur-sm duration-200 motion-reduce:animate-none\",\n      className\n    )}\n    data-slot=\"region-card\"\n    {...props}\n  >\n    {icon ?? (\n      <HugeiconsIcon\n        aria-hidden=\"true\"\n        icon={CpuIcon}\n        strokeWidth={2}\n        className=\"size-4 shrink-0 text-muted-foreground\"\n      />\n    )}\n    <div className=\"min-w-0\">\n      <p className=\"text-[10px] text-muted-foreground uppercase tracking-wide\">\n        {label}\n      </p>\n      <p className=\"truncate font-medium text-foreground text-sm\">{title}</p>\n      <p className=\"truncate font-mono text-[10px] text-muted-foreground/70\">\n        {regionId}\n        {typeof ping === \"number\" ? (\n          <>\n            {\" · \"}\n            <span className={pingTone(ping)}>ping: {ping} ms</span>\n          </>\n        ) : null}\n      </p>\n    </div>\n    {children}\n  </div>\n);\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}