@sikka/hawa
Version:
Modern UI Kit made with Tailwind
270 lines (264 loc) • 9.71 kB
JavaScript
"use client";
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// elements/simpleTable/index.ts
var simpleTable_exports = {};
__export(simpleTable_exports, {
SimpleTable: () => SimpleTable
});
module.exports = __toCommonJS(simpleTable_exports);
// elements/simpleTable/SimpleTable.tsx
var React3 = __toESM(require("react"));
var import_react_table = require("@tanstack/react-table");
// util/index.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// elements/skeleton/Skeleton.tsx
var import_react = __toESM(require("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__ */ import_react.default.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
var React2 = __toESM(require("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 = (0, import_react_table.useReactTable)({
data,
columns,
getCoreRowModel: (0, import_react_table.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 : (0, import_react_table.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
},
(0, import_react_table.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)))
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SimpleTable
});
//# sourceMappingURL=index.js.map