@sikka/hawa
Version:
Modern UI Kit made with Tailwind
238 lines (233 loc) • 7.87 kB
JavaScript
"use client";
// elements/simpleTable/SimpleTable.tsx
import * as React3 from "react";
import {
flexRender,
getCoreRowModel,
useReactTable
} from "@tanstack/react-table";
// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// elements/skeleton/Skeleton.tsx
import React from "react";
function Skeleton({
className,
content,
animation = "pulse",
fade,
...props
}) {
const animationStyles = {
none: "hawa-rounded hawa-bg-muted",
pulse: "hawa-animate-pulse hawa-rounded hawa-bg-muted",
shimmer: "hawa-space-y-5 hawa-rounded hawa-bg-muted hawa-p-4 hawa-relative before:hawa-absolute before:hawa-inset-0 before:hawa--translate-x-full before:hawa-animate-[shimmer_2s_infinite] before:hawa-bg-gradient-to-r before:hawa-from-transparent before:hawa-via-gray-300/40 dark:before:hawa-via-white/10 before:hawa-to-transparent hawa-isolate hawa-overflow-hidden before:hawa-border-t before:hawa-border-rose-100/10"
};
const fadeStyle = {
bottom: "hawa-mask-fade-bottom",
top: "hawa-mask-fade-top",
right: "hawa-mask-fade-right",
left: "hawa-mask-fade-left "
};
return /* @__PURE__ */ React.createElement(
"div",
{
className: cn(
animationStyles[animation],
content && "hawa-flex hawa-flex-col hawa-items-center hawa-justify-center",
fade && fadeStyle[fade],
className
),
...props
},
content && content
);
}
// elements/table/Table.tsx
import * as React2 from "react";
var Table = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement("div", { className: "hawa-relative hawa-w-full hawa-overflow-auto hawa-rounded hawa-border" }, /* @__PURE__ */ React2.createElement(
"table",
{
ref,
className: cn("hawa-w-full hawa-caption-bottom hawa-text-sm", className),
...props
}
)));
var TableHeader = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
"thead",
{
ref,
className: cn("[&_tr]:hawa-border-b", "hawa-bg-muted/50", className),
...props
}
));
var TableHead = React2.forwardRef(
({ className, condensed, clickable, dir, ...props }, ref) => /* @__PURE__ */ React2.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 = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement("tbody", { ref, className: cn("hawa-border-none", className), ...props }));
var TableFooter = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
"tfoot",
{
ref,
className: cn(
"hawa-bg-primary hawa-font-medium hawa-text-primary-foreground",
className
),
...props
}
));
var TableRow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.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 = React2.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__ */ React2.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 = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.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";
// elements/simpleTable/SimpleTable.tsx
var SimpleTable = ({
columns,
data,
classNames,
headerless,
...props
}) => {
var _a, _b;
const table = useReactTable({
data,
columns,
getCoreRowModel: getCoreRowModel()
});
return /* @__PURE__ */ React3.createElement(
"div",
{
className: cn(
"hawa-flex hawa-w-full hawa-flex-col hawa-gap-4",
classNames
)
},
props.isLoading ? /* @__PURE__ */ React3.createElement(Skeleton, { className: "h-[130px] w-full" }) : /* @__PURE__ */ React3.createElement("div", { className: "hawa-rounded" }, /* @__PURE__ */ React3.createElement(Table, null, !headerless && table.getAllColumns().length > 0 && /* @__PURE__ */ React3.createElement(TableHeader, null, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React3.createElement(TableRow, { key: headerGroup.id }, headerGroup.headers.map((header) => {
return /* @__PURE__ */ React3.createElement(
TableHead,
{
condensed: props.condensed,
dir: props.direction,
key: header.id,
style: {
maxWidth: header.column.columnDef.maxSize
}
},
header.isPlaceholder ? null : flexRender(
header.column.columnDef.header,
header.getContext()
)
);
})))), /* @__PURE__ */ React3.createElement(TableBody, null, ((_a = table.getRowModel().rows) == null ? void 0 : _a.length) ? table.getRowModel().rows.map((row) => /* @__PURE__ */ React3.createElement(
TableRow,
{
key: row.id,
"data-state": row.getIsSelected() && "selected"
},
row.getVisibleCells().map((cell) => {
var _a2;
return /* @__PURE__ */ React3.createElement(
TableCell,
{
dir: props.direction,
padding: props.condensed ? "condensed" : (_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.padding,
style: {
maxWidth: cell.column.columnDef.maxSize
},
key: cell.id
},
flexRender(
cell.column.columnDef.cell,
cell.getContext()
)
);
})
)) : /* @__PURE__ */ React3.createElement(TableRow, null, /* @__PURE__ */ React3.createElement(
TableCell,
{
colSpan: columns.length,
className: "hawa-h-24 hawa-text-center"
},
(_b = props.texts) == null ? void 0 : _b.noData
)), props.extra)))
);
};
export {
SimpleTable
};
//# sourceMappingURL=index.mjs.map