{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton-presets",
  "title": "Skeleton layouts",
  "description": "Loading table with row/column counts, card and description-list presets built from the same kit layout parts as real content. Each exposes one loading announcement and hides placeholder cells from assistive technology.",
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme",
    "@waimakers/skeleton",
    "@waimakers/card",
    "@waimakers/description-list",
    "@waimakers/table"
  ],
  "files": [
    {
      "path": "src/components/ui/skeleton-presets.tsx",
      "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Skeleton } from \"./skeleton\";\nimport { Card, CardContent, CardHeader } from \"./card\";\nimport {\n  DescriptionList,\n  DescriptionItem,\n  DescriptionTerm,\n  DescriptionDetails,\n} from \"./description-list\";\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"./table\";\n\nfunction SkeletonTable({\n  rows = 5,\n  cols = 4,\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { rows?: number; cols?: number }) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading table\"\n      data-slot=\"skeleton-table\"\n      className={cn(\"min-w-0\", className)}\n      {...props}\n    >\n      <span className=\"sr-only\">Loading table</span>\n      <div aria-hidden=\"true\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              {Array.from({ length: cols }, (_, col) => (\n                <TableHead key={col}>\n                  <Skeleton className=\"h-4 w-20\" />\n                </TableHead>\n              ))}\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {Array.from({ length: rows }, (_, row) => (\n              <TableRow key={row}>\n                {Array.from({ length: cols }, (_, col) => (\n                  <TableCell key={col}>\n                    <Skeleton className={cn(\"my-1 h-5\", col === 0 ? \"w-32\" : \"w-20\")} />\n                  </TableCell>\n                ))}\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  );\n}\nfunction SkeletonCard({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <Card\n      role=\"status\"\n      aria-label=\"Loading card\"\n      data-slot=\"skeleton-card\"\n      className={className}\n      {...props}\n    >\n      <span className=\"sr-only\">Loading card</span>\n      <CardHeader aria-hidden=\"true\">\n        <Skeleton className=\"h-5 w-40\" />\n        <Skeleton className=\"h-4 w-3/4\" />\n      </CardHeader>\n      <CardContent aria-hidden=\"true\" className=\"space-y-3\">\n        <Skeleton className=\"h-4 w-full\" />\n        <Skeleton className=\"h-4 w-5/6\" />\n        <Skeleton className=\"h-9 w-24 rounded-full\" />\n      </CardContent>\n    </Card>\n  );\n}\nfunction SkeletonDescriptionList({\n  rows = 3,\n  layout = \"stacked\",\n  className,\n  ...props\n}: ComponentProps<\"div\"> & { rows?: number; layout?: \"stacked\" | \"inline\" | \"grid-2\" }) {\n  return (\n    <div\n      role=\"status\"\n      aria-label=\"Loading details\"\n      data-slot=\"skeleton-description-list\"\n      className={className}\n      {...props}\n    >\n      <span className=\"sr-only\">Loading details</span>\n      <DescriptionList layout={layout} aria-hidden=\"true\">\n        {Array.from({ length: rows }, (_, row) => (\n          <DescriptionItem key={row}>\n            <DescriptionTerm>\n              <Skeleton className=\"h-5 w-24\" />\n            </DescriptionTerm>\n            <DescriptionDetails>\n              <Skeleton className=\"h-5 w-40\" />\n            </DescriptionDetails>\n          </DescriptionItem>\n        ))}\n      </DescriptionList>\n    </div>\n  );\n}\nexport { SkeletonTable, SkeletonCard, SkeletonDescriptionList };\n",
      "type": "registry:ui",
      "target": "components/ui/skeleton-presets.tsx"
    }
  ],
  "type": "registry:ui"
}