1import * as React from "react"
  2
  3import { cn } from "@marzneshin/utils"
  4
  5const Table = React.forwardRef<
  6  HTMLTableElement,
  7  React.HTMLAttributes<HTMLTableElement>
  8>(({ className, ...props }, ref) => (
  9  <div className="relative w-full overflow-auto">
 10    <table
 11      ref={ref}
 12      className={cn("w-full caption-bottom text-sm", className)}
 13      {...props}
 14    />
 15  </div>
 16))
 17Table.displayName = "Table"
 18
 19const TableHeader = React.forwardRef<
 20  HTMLTableSectionElement,
 21  React.HTMLAttributes<HTMLTableSectionElement>
 22>(({ className, ...props }, ref) => (
 23  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 24))
 25TableHeader.displayName = "TableHeader"
 26
 27const TableBody = React.forwardRef<
 28  HTMLTableSectionElement,
 29  React.HTMLAttributes<HTMLTableSectionElement>
 30>(({ className, ...props }, ref) => (
 31  <tbody
 32    ref={ref}
 33    className={cn("[&_tr:last-child]:border-0", className)}
 34    {...props}
 35  />
 36))
 37TableBody.displayName = "TableBody"
 38
 39const TableFooter = React.forwardRef<
 40  HTMLTableSectionElement,
 41  React.HTMLAttributes<HTMLTableSectionElement>
 42>(({ className, ...props }, ref) => (
 43  <tfoot
 44    ref={ref}
 45    className={cn(
 46      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
 47      className
 48    )}
 49    {...props}
 50  />
 51))
 52TableFooter.displayName = "TableFooter"
 53
 54const TableRow = React.forwardRef<
 55  HTMLTableRowElement,
 56  React.HTMLAttributes<HTMLTableRowElement>
 57>(({ className, ...props }, ref) => (
 58  <tr
 59    ref={ref}
 60    className={cn(
 61      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
 62      className
 63    )}
 64    {...props}
 65  />
 66))
 67TableRow.displayName = "TableRow"
 68
 69const TableHead = React.forwardRef<
 70  HTMLTableCellElement,
 71  React.ThHTMLAttributes<HTMLTableCellElement>
 72>(({ className, ...props }, ref) => (
 73  <th
 74    ref={ref}
 75    className={cn(
 76      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
 77      className
 78    )}
 79    {...props}
 80  />
 81))
 82TableHead.displayName = "TableHead"
 83
 84const TableCell = React.forwardRef<
 85  HTMLTableCellElement,
 86  React.TdHTMLAttributes<HTMLTableCellElement>
 87>(({ className, ...props }, ref) => (
 88  <td
 89    ref={ref}
 90    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
 91    {...props}
 92  />
 93))
 94TableCell.displayName = "TableCell"
 95
 96const TableCaption = React.forwardRef<
 97  HTMLTableCaptionElement,
 98  React.HTMLAttributes<HTMLTableCaptionElement>
 99>(({ className, ...props }, ref) => (
100  <caption
101    ref={ref}
102    className={cn("mt-4 text-sm text-muted-foreground", className)}
103    {...props}
104  />
105))
106TableCaption.displayName = "TableCaption"
107
108export {
109  Table,
110  TableHeader,
111  TableBody,
112  TableFooter,
113  TableHead,
114  TableRow,
115  TableCell,
116  TableCaption,
117}