Table

1import * as React from "react";2​3import { cn } from "@/lib/utils";4​5// The console's table (Figma 427:2715, Email: Mailboxes; iMessage: Agents and lines). Three separate panels: a 48px6// lilac head with 10px corners and 14px muted labels; 8px below it a white body with 8px corners, the Shadow/S ring7// and its short drop, 64px rows of 14px ink ruled by Line/S Bottom; and a lilac foot 8px below (the pagination bar or8// totals). Cells keep 16px sides. The table scrolls sideways inside its frame on a narrow screen.9function Table({ className, ...props }: React.ComponentProps<"table">) {10  return (11    <div data-slot="table-container" className="relative w-full overflow-x-auto px-px pt-px pb-1">12      <table data-slot="table" className={cn("w-full caption-bottom border-separate border-spacing-0 font-sans text-body leading-tight text-fg", className)} {...props} />13    </div>14  );15}16​17function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {18  return (19    <thead20      data-slot="table-header"21      className={cn(22        "after:table-row after:h-2 after:content-[''] [&>tr>th]:bg-subtle [&>tr>th:first-child]:rounded-l-panel [&>tr>th:last-child]:rounded-r-panel",23        className,24      )}25      {...props}26    />27  );28}29​30function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {31  return (32    <tbody33      data-slot="table-body"34      className={cn(35        "[&>tr>td]:bg-surface [&>tr:not(:last-child)>td]:border-b [&>tr:not(:last-child)>td]:border-b-line-row [&>tr>td:first-child]:border-l [&>tr>td:first-child]:border-l-line-ring [&>tr>td:last-child]:border-r [&>tr>td:last-child]:border-r-line-ring [&>tr:first-child>td]:border-t [&>tr:first-child>td]:border-t-line-ring [&>tr:first-child>td:first-child]:rounded-tl-control [&>tr:first-child>td:last-child]:rounded-tr-control [&>tr:last-child>td]:border-b [&>tr:last-child>td]:border-b-line-ring [&>tr:last-child]:shadow-[0_2px_4px_-1px_var(--ds-color-shadow-drop)] [&>tr:last-child]:[clip-path:inset(0_-8px_-8px_-8px_round_0_0_8px_8px)] [&>tr:last-child>td:first-child]:rounded-bl-control [&>tr:last-child>td:last-child]:rounded-br-control",36        className,37      )}38      {...props}39    />40  );41}42​43function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {44  return (45    <tfoot46      data-slot="table-footer"47      className={cn(48        "before:table-row before:h-2 before:content-[''] [&>tr>td]:h-10.5 [&>tr>td]:bg-subtle [&>tr>td]:font-medium [&>tr>td:first-child]:rounded-l-panel [&>tr>td:last-child]:rounded-r-panel [&>tr>th]:bg-subtle",49        className,50      )}51      {...props}52    />53  );54}55​56function TableRow({ className, ...props }: React.ComponentProps<"tr">) {57  return (58    <tr59      data-slot="table-row"60      className={cn("transition-colors duration-150 ease-out hover:[&>td]:bg-subtle/60 data-[state=selected]:[&>td]:bg-subtle motion-reduce:transition-none", className)}61      {...props}62    />63  );64}65​66function TableHead({ className, ...props }: React.ComponentProps<"th">) {67  return (68    <th69      data-slot="table-head"70      className={cn("h-12 px-4 text-left align-middle text-body leading-tight font-normal whitespace-nowrap text-fg-muted [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0", className)}71      {...props}72    />73  );74}75​76function TableCell({ className, ...props }: React.ComponentProps<"td">) {77  return (78    <td79      data-slot="table-cell"80      className={cn("h-16 px-4 align-middle whitespace-nowrap transition-colors duration-150 ease-out motion-reduce:transition-none [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0", className)}81      {...props}82    />83  );84}85​86function TableCaption({ className, ...props }: React.ComponentProps<"caption">) {87  return <caption data-slot="table-caption" className={cn("mt-3 text-body-sm leading-body text-fg-muted", className)} {...props} />;88}89​90export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };