{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "Composable table primitives (Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption) with hover rows, selected state and horizontal scroll. Table takes density (compact, comfortable, relaxed) and variant (line, striped, outline), both flowing to rows and cells via context.",
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/ui/table.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype TableDensity = \"compact\" | \"comfortable\" | \"relaxed\"\ntype TableVariant = \"line\" | \"striped\" | \"outline\"\n\nconst TableContext = React.createContext<{\n  density: TableDensity\n  variant: TableVariant\n}>({ density: \"comfortable\", variant: \"line\" })\n\ninterface TableProps extends React.ComponentProps<\"table\"> {\n  density?: TableDensity\n  variant?: TableVariant\n}\n\nfunction Table({\n  className,\n  density = \"comfortable\",\n  variant = \"line\",\n  ...props\n}: TableProps) {\n  return (\n    <TableContext.Provider value={{ density, variant }}>\n      <div\n        data-slot=\"table-container\"\n        className={cn(\n          \"relative w-full overflow-x-auto\",\n          variant === \"outline\" && \"rounded-lg border border-border\"\n        )}\n      >\n        <table\n          data-slot=\"table\"\n          data-density={density}\n          data-variant={variant}\n          className={cn(\"w-full caption-bottom text-sm\", className)}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b [&_tr]:border-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\n        \"[&_tr:last-child]:border-0\",\n        variant === \"striped\" && \"[&_tr:nth-child(even)]:bg-surface-2/60\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\"border-t border-border bg-surface-2 font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"transition-colors duration-(--motion-fast) hover:bg-surface-2 data-[state=selected]:bg-accent\",\n        variant !== \"striped\" && \"border-b border-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst densityHead: Record<TableDensity, string> = {\n  compact: \"h-8 px-2\",\n  comfortable: \"h-10 px-3\",\n  relaxed: \"h-12 px-4\",\n}\n\nconst densityCell: Record<TableDensity, string> = {\n  compact: \"p-2\",\n  comfortable: \"p-3\",\n  relaxed: \"p-4\",\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  const { density, variant } = React.useContext(TableContext)\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0\",\n        densityHead[density],\n        variant === \"outline\" && \"border-r border-border last:border-r-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  const { density, variant } = React.useContext(TableContext)\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"align-middle [&:has([role=checkbox])]:pe-0\",\n        densityCell[density],\n        variant === \"outline\" && \"border-r border-border last:border-r-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n  type TableProps,\n}\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Wrap in your own data logic (e.g. TanStack Table) or use directly. The container handles overflow-x for wide tables.",
  "categories": [
    "display",
    "data"
  ],
  "type": "registry:ui"
}