1import * as React from "react"
  2
  3import { cn } from "@marzneshin/common/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}