| 1 | import type { ComponentProps } from "react"; |
| 2 | |
| 3 | import { cn } from "../../lib/cn"; |
| 4 | |
| 5 | // shadcn/ui's table, styled with g1t's tokens. The table sits in a frame |
| 6 | // that scrolls sideways on its own, so a wide one never widens the page; |
| 7 | // the frame takes focus when it has to scroll, for the keyboard. |
| 8 | |
| 9 | export function Table({ className, frameProps, ...props }: Omit<ComponentProps<"table">, "frame"> & { frameProps?: ComponentProps<"div"> }) { |
| 10 | return ( |
| 11 | <div |
| 12 | data-slot="table-frame" |
| 13 | {...frameProps} |
| 14 | className={cn("relative w-full overflow-x-auto outline-none [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-accent", frameProps?.className)} |
| 15 | > |
| 16 | <table data-slot="table" className={cn("w-full caption-bottom border-collapse text-sm", className)} {...props} /> |
| 17 | </div> |
| 18 | ); |
| 19 | } |
| 20 | |
| 21 | export function TableHeader({ className, ...props }: ComponentProps<"thead">) { |
| 22 | return <thead data-slot="table-header" className={cn("bg-surface [&_tr]:border-b [&_tr]:border-line", className)} {...props} />; |
| 23 | } |
| 24 | |
| 25 | export function TableBody({ className, ...props }: ComponentProps<"tbody">) { |
| 26 | return <tbody data-slot="table-body" className={cn("[&_tr:last-child]:border-0", className)} {...props} />; |
| 27 | } |
| 28 | |
| 29 | export function TableRow({ className, ...props }: ComponentProps<"tr">) { |
| 30 | return <tr data-slot="table-row" className={cn("border-b border-line transition-colors data-[state=selected]:bg-raised", className)} {...props} />; |
| 31 | } |
| 32 | |
| 33 | export function TableHead({ className, ...props }: ComponentProps<"th">) { |
| 34 | return <th data-slot="table-head" className={cn("h-9 px-3 text-left align-middle font-medium whitespace-nowrap text-muted", className)} {...props} />; |
| 35 | } |
| 36 | |
| 37 | export function TableCell({ className, ...props }: ComponentProps<"td">) { |
| 38 | return <td data-slot="table-cell" className={cn("px-3 py-2 align-top", className)} {...props} />; |
| 39 | } |
| 40 | |
| 41 | export function TableCaption({ className, ...props }: ComponentProps<"caption">) { |
| 42 | return <caption data-slot="table-caption" className={cn("mt-3 text-xs text-faint", className)} {...props} />; |
| 43 | } |