Table

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7function Table({ className, ...props }: React.ComponentProps<"table">) {
8  return (
9    <div
10      data-slot="table-container"
11      className="relative w-full overflow-x-auto"
12    >
13      <table
14        data-slot="table"
15        className={cn("w-full caption-bottom text-sm", className)}
16        {...props}
17      />
18    </div>
19  )
20}
21 
22// Table header rule: "mono-uppercase navy-underline header".
23// The TableHeader carries a navy bottom border (--line-strong) to make the
24// uppercase column labels feel printed rather than UI'd.
25function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
26  return (
27    <thead
28      data-slot="table-header"
29      className={cn("[&_tr]:border-b [&_tr]:border-line-strong", className)}
30      {...props}
31    />
32  )
33}
34 
35// Seersucker zebra. Body rows alternate between the table bg and the cool
36// --stripe-light wash. The :last-child rule keeps the "no terminal border"
37// behavior.
38function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
39  return (
40    <tbody
41      data-slot="table-body"
42      className={cn(
43        "[&_tr:last-child]:border-0 [&_tr:nth-child(even)]:bg-stripe-light/50",
44        className,
45      )}
46      {...props}
47    />
48  )
49}
50 
51function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
52  return (
53    <tfoot
54      data-slot="table-footer"
55      className={cn(
56        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
57        className
58      )}
59      {...props}
60    />
61  )
62}
63 
64function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
65  return (
66    <tr
67      data-slot="table-row"
68      className={cn(
69        "border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted",
70        className
71      )}
72      {...props}
73    />
74  )
75}
76 
77// Table header cells: mono 10px 700 0.18em uppercase in slate
78// (--muted-foreground). The navy underline lives on the TableHeader row so
79// columns share one continuous rule.
80function TableHead({ className, ...props }: React.ComponentProps<"th">) {
81  return (
82    <th
83      data-slot="table-head"
84      className={cn(
85        "h-10 px-2 text-left align-middle whitespace-nowrap text-muted-foreground font-mono text-[10px] font-bold uppercase tracking-[0.18em] [&:has([role=checkbox])]:pr-0",
86        className
87      )}
88      {...props}
89    />
90  )
91}
92 
93// … truncated