{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:ui",
  "title": "Table",
  "description": "Composable data table with header, body, row, cell, and caption sub-components.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/table.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n/**\n * @fileoverview Table primitives — composable data table with header, body, footer,\n * row, cell, head, and caption sub-components. Pure Tailwind CSS implementation\n * with no external UI library dependency. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/table\n * @layer core\n *\n * @component\n * @example\n * import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@saasflare/ui';\n * <Table>\n *   <TableHeader>\n *     <TableRow>\n *       <TableHead>Name</TableHead>\n *       <TableHead>Status</TableHead>\n *     </TableRow>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow>\n *       <TableCell>Acme Corp</TableCell>\n *       <TableCell>Active</TableCell>\n *     </TableRow>\n *   </TableBody>\n * </Table>\n */\n\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Props for {@link Table}. Extends {@link SaasflareComponentProps} so\n * `surface`, `radius`, `animated`, and `iconWeight` can be supplied\n * per-instance or inherited from the provider.\n */\ninterface TableProps extends Omit<React.ComponentProps<\"table\">, keyof SaasflareComponentProps>, SaasflareComponentProps {}\n\n/**\n * Data table root — a styled `<table>` wrapped in a horizontally scrollable\n * container so wide tables stay usable on narrow viewports. Compose with\n * {@link TableHeader}, {@link TableBody}, {@link TableRow}, and friends.\n *\n * @component\n * @layer core\n */\nfunction Table({ className, surface, radius, animated, iconWeight, ...props }: TableProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        {...props}\n        data-slot=\"table\"\n        data-surface={sf.surface}\n        data-radius={sf.radius}\n        data-animated={String(sf.animated)}\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n      />\n    </div>\n  )\n}\n\n/**\n * Table header section (`<thead>`) — wraps the heading row(s).\n *\n * @component\n * @layer core\n */\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Table body section (`<tbody>`) holding the data rows.\n *\n * @component\n * @layer core\n */\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * Table footer section (`<tfoot>`) — muted emphasis for totals or summary rows.\n *\n * @component\n * @layer core\n */\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Table row (`<tr>`) with hover and `data-state=\"selected\"` highlighting.\n *\n * @component\n * @layer core\n */\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Header cell (`<th>`) inside a {@link TableHeader} row.\n *\n * @component\n * @layer core\n */\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Data cell (`<td>`) inside a body or footer row.\n *\n * @component\n * @layer core\n */\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Table caption rendered below the table.\n *\n * @component\n * @layer core\n */\nfunction TableCaption({\n  className,\n  ...props\n}: 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",
      "target": "components/ui/table.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/table.json"
  }
}