{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "map-stat-overlay",
  "title": "Map Stat Overlay",
  "description": "A floating glass stat and legend panel that sits over a map.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/maps/map-stat-overlay.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * map-stat-overlay — a floating glass stat/legend panel for nx-ui maps.\n *\n * A `bg-background/80 backdrop-blur` card meant to be dropped inside a map\n * frame (e.g. MapView's `overlay` slot, or any relatively-positioned container)\n * to surface at-a-glance stats and a legend. Three composable parts:\n *   • <MapStatOverlay> — the positioned glass panel wrapper.\n *   • <MapStat> — a labelled value (stat) row.\n *   • <MapLegendItem> — a swatch + label legend row.\n */\n\ntype OverlayCorner = \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"\n\nconst CORNER_CLASSES: Record<OverlayCorner, string> = {\n  \"top-left\": \"top-3 left-3\",\n  \"top-right\": \"top-3 right-3\",\n  \"bottom-left\": \"bottom-3 left-3\",\n  \"bottom-right\": \"bottom-3 right-3\",\n}\n\nexport interface MapStatOverlayProps\n  extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** Which corner of the map frame the panel floats in. Default bottom-left. */\n  corner?: OverlayCorner\n  /** Optional panel heading. */\n  title?: React.ReactNode\n}\n\nexport function MapStatOverlay({\n  corner = \"bottom-left\",\n  title,\n  className,\n  children,\n  ...props\n}: MapStatOverlayProps) {\n  return (\n    <div\n      className={cn(\n        \"pointer-events-auto absolute z-10 max-w-[calc(100%-1.5rem)] rounded-xl border border-border bg-background/80 p-3.5 shadow-lg backdrop-blur-md\",\n        CORNER_CLASSES[corner],\n        className\n      )}\n      {...props}\n    >\n      {title ? (\n        <p className=\"mb-2.5 text-xs font-semibold tracking-wide text-muted-foreground uppercase\">\n          {title}\n        </p>\n      ) : null}\n      {children}\n    </div>\n  )\n}\n\nexport interface MapStatProps {\n  label: React.ReactNode\n  value: React.ReactNode\n  className?: string\n}\n\nexport function MapStat({ label, value, className }: MapStatProps) {\n  return (\n    <div className={cn(\"flex flex-col gap-0.5\", className)}>\n      <span className=\"text-xs text-muted-foreground\">{label}</span>\n      <span className=\"text-lg font-semibold tabular-nums text-foreground\">\n        {value}\n      </span>\n    </div>\n  )\n}\n\nexport interface MapLegendItemProps {\n  /** Any CSS colour (hex or a token like var(--color-brand-600)). */\n  color: string\n  label: React.ReactNode\n  className?: string\n}\n\nexport function MapLegendItem({ color, label, className }: MapLegendItemProps) {\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)}>\n      <span\n        aria-hidden\n        className=\"size-3 shrink-0 rounded-full ring-1 ring-inset ring-black/10\"\n        style={{ backgroundColor: color }}\n      />\n      <span className=\"text-sm text-secondary-foreground\">{label}</span>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/maps/map-stat-overlay.tsx"
    }
  ],
  "type": "registry:block"
}