@sikka/hawa
Version:
Modern UI Kit made with Tailwind
131 lines (128 loc) • 4.12 kB
JavaScript
"use client";
// elements/table/Table.tsx
import * as React from "react";
// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// elements/table/Table.tsx
var Table = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("div", { className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React.createElement(
"table",
{
ref,
className: cn("hawa-w-full hawa-caption-bottom hawa-text-sm", className),
...props
}
)));
var TableHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
"thead",
{
ref,
className: cn("[&_tr]:hawa-border-b", "hawa-bg-muted/50", className),
...props
}
));
var TableHead = React.forwardRef(
({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React.createElement(
"th",
{
ref,
className: cn(
"hawa-bg-muted/60 hawa-text-nowrap hawa-text-start hawa-align-middle hawa-font-medium hawa-text-muted-foreground dark:hawa-bg-muted/40 [&:has([role=checkbox])]:hawa-pr-0 [&:not(:last-child)&:not(:first-child)]:hawa-border-x",
dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
condensed ? "hawa-h-8" : "hawa-h-12",
clickable ? "hawa-px-1" : "hawa-px-4",
//First and last columns
clickable ? "[&:not(:last-child)&:not(:first-child)]:hawa-p-1" : "hawa-px-4",
//Columns in between
className
),
...props
}
)
);
var TableBody = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
"tfoot",
{
ref,
className: cn(
"hawa-bg-primary hawa-font-medium hawa-text-primary-foreground",
className
),
...props
}
));
var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
"tr",
{
ref,
className: cn(
"hawa-bg-background hawa-transition-colors data-[state=selected]:hawa-bg-muted",
"[&:not(:last-child)&:not(:first-child)]:hawa-border-y",
"[&:not(:last-child)]:hawa-border-b",
className
),
...props
}
));
var TableCell = React.forwardRef(
({ className, enablePadding = true, padding = "default", ...props }, ref) => {
let paddingStyles = {
condensed: "hawa-p-0 hawa-px-4",
default: "hawa-p-4",
noPadding: "hawa-p-0"
};
return /* @__PURE__ */ React.createElement(
"td",
{
ref,
className: cn(
paddingStyles[padding],
// "border-x",
// enablePadding ? "hawa-p-4" : "hawa-p-0",
// props.disablePadding ? "hawa-p-0" : "hawa-p-4",
// props.condensed ? "hawa-p-0 hawa-px-4" : "hawa-p-4",
"hawa-align-middle [&:has([role=checkbox])]:hawa-pr-0",
"[&:not(:last-child)&:not(:first-child)]:hawa-border-x",
// "[&:not(:last-child)]:hawa-border-r",
props.dir === "rtl" ? "[&:not(:last-child)]:hawa-border-l" : "[&:not(:last-child)]:hawa-border-r",
className
),
...props
}
);
}
);
var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
"caption",
{
ref,
className: cn(
"hawa-mt-4 hawa-text-sm hawa-text-muted-foreground",
className
),
...props
}
));
Table.displayName = "Table";
TableRow.displayName = "TableRow";
TableBody.displayName = "TableBody";
TableHead.displayName = "TableHead";
TableCell.displayName = "TableCell";
TableFooter.displayName = "TableFooter";
TableHeader.displayName = "TableHeader";
TableCaption.displayName = "TableCaption";
export {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow
};
//# sourceMappingURL=index.mjs.map