@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 1.78 kB
JavaScript
import{cn}from"@loke/design-system/cn";import{forwardRef}from"react";import{jsx}from"react/jsx-runtime";var Table=forwardRef(({className,...props},ref)=>jsx("div",{className:"relative w-full overflow-auto",children:jsx("table",{className:cn("w-full caption-bottom text-sm",className),ref,...props})}));Table.displayName="Table";var TableHeader=forwardRef(({className,...props},ref)=>jsx("thead",{className:cn("[&_tr]:border-b",className),ref,...props}));TableHeader.displayName="TableHeader";var TableBody=forwardRef(({className,...props},ref)=>jsx("tbody",{className:cn("[&_tr:last-child]:border-0",className),ref,...props}));TableBody.displayName="TableBody";var TableFooter=forwardRef(({className,...props},ref)=>jsx("tfoot",{className:cn("border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",className),ref,...props}));TableFooter.displayName="TableFooter";var TableRow=forwardRef(({className,...props},ref)=>jsx("tr",{className:cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",className),ref,...props}));TableRow.displayName="TableRow";var TableHead=forwardRef(({className,...props},ref)=>jsx("th",{className:cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",className),ref,...props}));TableHead.displayName="TableHead";var TableCell=forwardRef(({className,...props},ref)=>jsx("td",{className:cn("p-4 align-middle [&:has([role=checkbox])]:pr-0",className),ref,...props}));TableCell.displayName="TableCell";var TableCaption=forwardRef(({className,...props},ref)=>jsx("caption",{className:cn("mt-4 text-muted-foreground text-sm",className),ref,...props}));TableCaption.displayName="TableCaption";export{TableRow,TableHeader,TableHead,TableFooter,TableCell,TableCaption,TableBody,Table};