{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "Semantic tables with mono numerals, zebra rows and a sticky header.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/table.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype TableProps = React.ComponentProps<\"table\"> & {\n  /** Zebra rows. */\n  striped?: boolean;\n  /** Keeps the header visible while the container scrolls (give the container a max height). */\n  stickyHeader?: boolean;\n};\n\n/** A semantic, crawlable HTML table with hairline rows, mono numerals and optional zebra striping. */\nfunction Table({ className, striped, stickyHeader, ...props }: TableProps) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-auto rounded-lg border border-border bg-card shadow-control\">\n      <table\n        data-slot=\"table\"\n        data-striped={striped || undefined}\n        data-sticky={stickyHeader || undefined}\n        className={cn(\"w-full caption-bottom border-collapse text-sm\", className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"bg-muted/50 [[data-sticky]_&]:sticky [[data-sticky]_&]:top-0 [[data-sticky]_&]:z-10 [[data-sticky]_&]:backdrop-blur-sm [&_tr]:border-b [&_tr]:border-border\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return <tbody data-slot=\"table-body\" className={cn(\"[&_tr:last-child]:border-0 [[data-striped]_&_tr:nth-child(even)]:bg-muted/40\", className)} {...props} />;\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return <tfoot data-slot=\"table-footer\" className={cn(\"cue-dash-t bg-muted/40 font-medium [&>tr]:last:border-b-0\", className)} {...props} />;\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return <tr data-slot=\"table-row\" className={cn(\"border-b border-border transition-colors hover:bg-accent/40 data-[state=selected]:bg-accent/60\", className)} {...props} />;\n}\n\nfunction TableHead({ className, numeric, ...props }: React.ComponentProps<\"th\"> & { numeric?: boolean }) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\"cue-label h-10 px-3 text-start align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0\", numeric && \"text-end\", className)}\n      {...props}\n    />\n  );\n}\n\n/** `numeric` right-aligns and uses tabular mono figures so columns of numbers line up. */\nfunction TableCell({ className, numeric, ...props }: React.ComponentProps<\"td\"> & { numeric?: boolean }) {\n  return <td data-slot=\"table-cell\" className={cn(\"px-3 py-2.5 align-middle whitespace-nowrap [&:has([role=checkbox])]:pe-0\", numeric && \"text-end font-mono tabular-nums\", className)} {...props} />;\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return <caption data-slot=\"table-caption\" className={cn(\"py-3 text-xs text-muted-foreground\", className)} {...props} />;\n}\n\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };\nexport type { TableProps };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/table",
  "categories": [
    "display"
  ],
  "type": "registry:ui"
}