{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stat-card-grid",
  "title": "Stat card grid",
  "description": "A responsive grid of StatCards with an optional `tabs` slot above for a time-span switch (Daily / Weekly / All-time).",
  "registryDependencies": [
    "@engram/cn",
    "@engram/tokens"
  ],
  "files": [
    {
      "path": "src/components/stat-card-grid.tsx",
      "content": "import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn.js\";\n\nexport interface StatCardGridProps extends HTMLAttributes<HTMLDivElement> {\n  /** A control rendered above the grid — typically a time-span {@link TabBar}. */\n  tabs?: ReactNode;\n  /** Min card width for the responsive auto-fill grid (px). Default 140. */\n  min?: number;\n  /** Gap between cards (px). Default 8. */\n  gap?: number;\n  /** The {@link StatCard}s. */\n  children: ReactNode;\n}\n\n/**\n * A responsive grid of {@link StatCard}s with an optional `tabs` slot above for a\n * time-span switch (Daily / Weekly / All-time). The container for a PGCR stat\n * block or PvP dashboard summary.\n */\nexport function StatCardGrid({\n  tabs,\n  min = 140,\n  gap = 8,\n  className,\n  style,\n  children,\n  ...props\n}: StatCardGridProps) {\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      {tabs ? <div>{tabs}</div> : null}\n      <div\n        className=\"grid\"\n        style={\n          {\n            gridTemplateColumns: `repeat(auto-fill, minmax(${min}px, 1fr))`,\n            gap,\n            ...style,\n          } as CSSProperties\n        }\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/engram/stat-card-grid.tsx"
    }
  ],
  "meta": {
    "level": "component"
  },
  "docs": "Extend without forking: edit the copied source, use `asChild` (Radix Slot) to change the rendered element, pass the typed `annotations` prop for curated data (verdict/tags/per-plug), or use slot / render-prop props for arbitrary content. Requires the @engram/tokens theme (--engram-* CSS variables).",
  "categories": [
    "stats"
  ],
  "type": "registry:component"
}