{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeletons",
  "title": "Skeletons",
  "description": "Route-level loading skeletons: StatGridSkeleton, TableSkeleton, CardsGridSkeleton, PageHeaderSkeleton.",
  "registryDependencies": [
    "@sav/card",
    "@sav/data-panel",
    "@sav/skeleton"
  ],
  "files": [
    {
      "path": "registry/sav/components/skeletons.tsx",
      "content": "// @sav-registry: skeletons\nimport { Card, CardContent } from \"@/registry/sav/ui/card\"\nimport { Skeleton } from \"@/registry/sav/ui/skeleton\"\nimport { DataPanel } from \"@/registry/sav/components/data-panel\"\n\n/**\n * Route-level loading skeletons (for loading.tsx files). They keep the shell\n * responsive instead of a blank page while a slow first request (a paused\n * database, a cold function) completes.\n */\n\nexport function StatGridSkeleton({ count = 4 }: { count?: number }) {\n  return (\n    <div className=\"grid grid-cols-2 gap-3 sm:grid-cols-4\">\n      {Array.from({ length: count }).map((_, i) => (\n        <Card size=\"sm\" key={i}>\n          <CardContent className=\"flex flex-col gap-2\">\n            <Skeleton className=\"h-3 w-20\" />\n            <Skeleton className=\"h-7 w-16\" />\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  )\n}\n\nexport function TableSkeleton({\n  rows = 8,\n  cols = 5,\n}: {\n  rows?: number\n  cols?: number\n}) {\n  return (\n    <DataPanel>\n      <div className=\"divide-y\">\n        <div className=\"flex gap-4 px-4 py-3\">\n          {Array.from({ length: cols }).map((_, i) => (\n            <Skeleton key={i} className=\"h-4 flex-1\" />\n          ))}\n        </div>\n        {Array.from({ length: rows }).map((_, r) => (\n          <div className=\"flex gap-4 px-4 py-3\" key={r}>\n            {Array.from({ length: cols }).map((_, c) => (\n              <Skeleton key={c} className=\"h-4 flex-1\" />\n            ))}\n          </div>\n        ))}\n      </div>\n    </DataPanel>\n  )\n}\n\nexport function CardsGridSkeleton({ count = 8 }: { count?: number }) {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\n      {Array.from({ length: count }).map((_, i) => (\n        <Card key={i} className=\"p-0\">\n          <Skeleton className=\"aspect-video w-full\" />\n          <CardContent className=\"flex flex-col gap-2 py-4\">\n            <Skeleton className=\"h-4 w-24\" />\n            <Skeleton className=\"h-3 w-32\" />\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  )\n}\n\nexport function PageHeaderSkeleton() {\n  return (\n    <div className=\"flex flex-col gap-2 border-b pb-4\">\n      <Skeleton className=\"h-7 w-40\" />\n      <Skeleton className=\"h-4 w-64\" />\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/skeletons.tsx"
    }
  ],
  "categories": [
    "patterns"
  ],
  "type": "registry:component"
}