art-bd-ui 1.0.0

package/dist/cjs/components/ui/button/button.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var utils = require('../../../lib/utils.js');
+var icon = require('../icon/icon.js');
+
+const buttonVariants = classVarianceAuthority.cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = react.forwardRef((_a, ref) => {
+    var { className, variant, size, asChild = false, loading, children, leftIcon, rightIcon } = _a, props = tslib.__rest(_a, ["className", "variant", "size", "asChild", "loading", "children", "leftIcon", "rightIcon"]);
+    const Comp = asChild ? reactSlot.Slot : "button";
+    const leftElement = loading ? (jsxRuntime.jsx(icon.Icon, { name: "loader-2", className: "animate-spin" })) : (leftIcon && jsxRuntime.jsx(icon.Icon, { name: leftIcon }));
+    const rightElement = rightIcon && jsxRuntime.jsx(icon.Icon, { name: rightIcon });
+    return (jsxRuntime.jsxs(Comp, Object.assign({ ref: ref, "data-slot": "button", className: utils.cn(buttonVariants({ variant, size }), className) }, props, { children: [leftElement, jsxRuntime.jsx(reactSlot.Slottable, { children: children }), rightElement] })));
+});
+Button.displayName = "Button";
+
+exports.Button = Button;

package/dist/cjs/components/ui/calendar/calendar.js

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var reactDayPicker = require('react-day-picker');
+var utils = require('../../../lib/utils.js');
+var icon = require('../../media/icon/icon.js');
+var button = require('../../buttons/button/button.js');
+
+function Calendar(_a) {
+    var { className, classNames, showOutsideDays = true } = _a, props = tslib.__rest(_a, ["className", "classNames", "showOutsideDays"]);
+    return (jsxRuntime.jsx(reactDayPicker.DayPicker, Object.assign({ showOutsideDays: showOutsideDays, className: utils.cn("p-3", className), classNames: Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: utils.cn(button.buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: utils.cn("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range"
+                ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+                : "[&:has([aria-selected])]:rounded-md"), day: utils.cn(button.buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"), day_range_start: "day-range-start", day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible" }, classNames), components: {
+            Chevron: (_a) => {
+                var { className, orientation } = _a, props = tslib.__rest(_a, ["className", "orientation"]);
+                return (jsxRuntime.jsx(icon.Icon, Object.assign({ name: `chevron-${orientation}`, className: utils.cn("h-4 w-4", className) }, props)));
+            },
+        } }, props)));
+}
+Calendar.displayName = "Calendar";
+
+exports.Calendar = Calendar;

package/dist/cjs/components/ui/command/command.js

@@ -0,0 +1,83 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var cmdk = require('cmdk');
+var utils = require('../../../lib/utils.js');
+var dialog = require('../../popovers/dialog/dialog.js');
+var icon = require('../../media/icon/icon.js');
+
+const Command = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(cmdk.Command, Object.assign({ "data-slot": "command", className: utils.cn("flex h-full w-full flex-col overflow-hidden rounded-md", "bg-popover text-popover-foreground", className) }, props)));
+};
+Command.displayName = "Command";
+const CommandDialog = (_a) => {
+    var { title = "Command Palette", description = "Search for a command to run...", children } = _a, props = tslib.__rest(_a, ["title", "description", "children"]);
+    return (jsxRuntime.jsxs(dialog.Dialog, Object.assign({}, props, { children: [jsxRuntime.jsxs(dialog.DialogHeader, { className: "sr-only", children: [jsxRuntime.jsx(dialog.DialogTitle, { children: title }), jsxRuntime.jsx(dialog.DialogDescription, { children: description })] }), jsxRuntime.jsx(dialog.DialogContent, { className: "overflow-hidden p-0", children: jsxRuntime.jsx(Command, { className: utils.cn(
+                    // Group heading styles
+                    "[&_[cmdk-group-heading]]:text-muted-foreground", "[&_[cmdk-group-heading]]:px-2", "[&_[cmdk-group-heading]]:font-medium", 
+                    // Group styles
+                    "[&_[cmdk-group]]:px-2", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0", 
+                    // Input wrapper styles
+                    "**:data-[slot=command-input-wrapper]:h-12", "[&_[cmdk-input-wrapper]_svg]:h-5", "[&_[cmdk-input-wrapper]_svg]:w-5", 
+                    // Input styles
+                    "[&_[cmdk-input]]:h-12", 
+                    // Item styles
+                    "[&_[cmdk-item]]:px-2", "[&_[cmdk-item]]:py-3", "[&_[cmdk-item]_svg]:h-5", "[&_[cmdk-item]_svg]:w-5"), children: children }) })] })));
+};
+CommandDialog.displayName = "CommandDialog";
+const CommandInput = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [jsxRuntime.jsx(icon.Icon, { name: "search", className: "size-4 shrink-0 opacity-50" }), jsxRuntime.jsx(cmdk.Command.Input, Object.assign({ "data-slot": "command-input", className: utils.cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }, props))] }));
+};
+CommandInput.displayName = "CommandInput";
+const CommandList = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(cmdk.Command.List, Object.assign({ "data-slot": "command-list", className: utils.cn("max-h-[300px] overflow-x-hidden overflow-y-auto", "scroll-py-1", className) }, props)));
+};
+CommandList.displayName = "CommandList";
+const CommandEmpty = (_a) => {
+    var props = tslib.__rest(_a, []);
+    return jsxRuntime.jsx(cmdk.Command.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props));
+};
+CommandEmpty.displayName = "CommandEmpty";
+const CommandGroup = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(cmdk.Command.Group, Object.assign({ "data-slot": "command-group", className: utils.cn("overflow-hidden p-1", "text-foreground", 
+        // Group heading styles
+        "[&_[cmdk-group-heading]]:text-muted-foreground", "[&_[cmdk-group-heading]]:px-2", "[&_[cmdk-group-heading]]:py-1.5", "[&_[cmdk-group-heading]]:text-xs", "[&_[cmdk-group-heading]]:font-medium", className) }, props)));
+};
+CommandGroup.displayName = "CommandGroup";
+const CommandSeparator = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(cmdk.Command.Separator, Object.assign({ "data-slot": "command-separator", className: utils.cn("bg-border -mx-1 h-px", className) }, props)));
+};
+CommandSeparator.displayName = "CommandSeparator";
+const CommandItem = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx(cmdk.Command.Item, Object.assign({ "data-slot": "command-item", className: utils.cn(
+        // Layout
+        "relative flex items-center gap-2 rounded-sm px-2 py-1.5", "text-sm outline-hidden select-none", 
+        // States
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", 
+        // Icon styles
+        "[&_svg:not([class*='text-'])]:text-muted-foreground", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className) }, props)));
+};
+CommandItem.displayName = "CommandItem";
+const CommandShortcut = (_a) => {
+    var { className } = _a, props = tslib.__rest(_a, ["className"]);
+    return (jsxRuntime.jsx("span", Object.assign({ "data-slot": "command-shortcut", className: utils.cn("ml-auto text-xs tracking-widest", "text-muted-foreground", className) }, props)));
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+exports.Command = Command;
+exports.CommandDialog = CommandDialog;
+exports.CommandEmpty = CommandEmpty;
+exports.CommandGroup = CommandGroup;
+exports.CommandInput = CommandInput;
+exports.CommandItem = CommandItem;
+exports.CommandList = CommandList;
+exports.CommandSeparator = CommandSeparator;
+exports.CommandShortcut = CommandShortcut;

package/dist/cjs/components/ui/data-table/components/cell.js

@@ -0,0 +1,24 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var contextHooks = require('../hooks/contextHooks.js');
+require('../../table/table.js');
+var tableHead = require('../../table/components/table-head.js');
+var cell = require('../../table/components/cell.js');
+
+const Cell = (_a) => {
+    var _b;
+    var { variant = "body", sticky, columnId, colSpan = 1 } = _a, rest = tslib.__rest(_a, ["variant", "sticky", "columnId", "colSpan"]);
+    const Component = variant === "header" ? tableHead.TableHead : cell.TableCell;
+    const { columnConfig } = contextHooks.useTableColumnContext();
+    const columnInfo = columnId ? columnConfig[columnId] : undefined;
+    const finalSticky = sticky || ((columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.isStickyLeft) ? "left" : (columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.isStickyRight) ? "right" : undefined);
+    const finalHasMinWidth = (_b = columnInfo === null || columnInfo === void 0 ? void 0 : columnInfo.hasMinWidth) !== null && _b !== void 0 ? _b : false;
+    const colSpanShift = finalHasMinWidth ? 1 : 0;
+    return jsxRuntime.jsx(Component, Object.assign({}, rest, { colSpan: colSpan + colSpanShift, sticky: finalSticky }));
+};
+Cell.displayName = "Table.Cell";
+
+exports.Cell = Cell;

package/dist/cjs/components/ui/data-table/components/column-group.js

@@ -0,0 +1,45 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var contextHooks = require('../hooks/contextHooks.js');
+
+/**
+ * The ColumnGroup component is used to apply column sizing for a table with a fixed layout.
+ *
+ * HTML tables with `table-layout: fixed` tend to ignore `min-width` and `max-width` properties,
+ * sizing columns based solely on the first row of cells. This component implements a workaround
+ * that allows for a faux `min-width` effect on columns, enabling flexible column widths
+ * while respecting minimum size constraints.
+ *
+ * The solution involves using a combination of <colgroup> and <col> elements, with the
+ * latter's style being conditionally set based on the column configurations provided.
+ * In cases where a `minWidth` is specified for a column, an additional empty <col> is rendered
+ * next to the one with the `minWidth` style. This tricks the table layout into respecting
+ * the minimum width while allowing the column to flex beyond it when extra space is available.
+ *
+ * For columns with a fixed width, a single <col> with the specified width is rendered.
+ * In the absence of width specifications, an empty <col> is rendered, allowing the table to auto-size.
+ *
+ * Read more -> https://css-tricks.com/faking-min-width-on-a-table-column/
+ */
+const ColumnGroup = react.memo(({ columns }) => {
+    const { selectedRows } = contextHooks.useTableSelectionContext();
+    return (jsxRuntime.jsxs("colgroup", { children: [selectedRows && jsxRuntime.jsx("col", {}, "column_selection"), columns.map((column) => {
+                const columnStyles = column.style;
+                const testId = `column_${column.id}`;
+                if (columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles.minWidth) {
+                    return (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx("col", { "data-testid": `${testId}_static`, style: { width: columnStyles.minWidth } }), jsxRuntime.jsx("col", { "data-testid": `${testId}_flexible` })] }, `${testId}-minWidth`));
+                }
+                else if (columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles.width) {
+                    return jsxRuntime.jsx("col", { "data-testid": testId, style: { width: columnStyles.width } }, `${testId}-width`);
+                }
+                else {
+                    return jsxRuntime.jsx("col", { "data-testid": `${testId}_auto` }, `${testId}-auto`);
+                }
+            })] }));
+});
+ColumnGroup.displayName = "Table.ColumnGroup";
+
+exports.ColumnGroup = ColumnGroup;

package/dist/cjs/components/ui/data-table/components/table-body.js

@@ -0,0 +1,47 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var _pick = require('lodash/pick');
+var cell = require('./cell.js');
+var contextHooks = require('../hooks/contextHooks.js');
+require('clsx');
+var toggle = require('../../../../utils/toggle.js');
+var checkbox = require('../../../forms/checkbox/checkbox.js');
+require('../../table/table.js');
+var row = require('../../table/components/row.js');
+var tableBody = require('../../table/components/table-body.js');
+
+const DefaultColumnRenderer = react.memo(({ value }) => value);
+const CheckboxCell = react.memo(({ id, isSelected }) => {
+    const { selectedRows = [], onSelect } = contextHooks.useTableSelectionContext();
+    const { stickyColumnsLeft } = contextHooks.useTableStickyContext();
+    return (jsxRuntime.jsx(cell.Cell, { sticky: stickyColumnsLeft > 0 ? "left" : undefined, children: jsxRuntime.jsx(checkbox.Checkbox, { checked: isSelected, onCheckedChange: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(toggle.toggle(selectedRows, id), id) }) }, `body-checkbox-${id}`));
+});
+const DefaultRowRenderer = react.memo(({ row: row$1 }) => {
+    const { rowId, rowDataKeys } = contextHooks.useTableDataContext();
+    const { columnRenderers } = contextHooks.useTableRendererContext();
+    const { colSpan: colSpanConfig, rowSpan: rowSpanConfig } = contextHooks.useTableStyleContext();
+    const { selectedRows } = contextHooks.useTableSelectionContext();
+    const withCheckbox = selectedRows !== undefined;
+    const id = typeof rowId === "function" ? rowId(row$1) : row$1[rowId];
+    const rowData = _pick(row$1, rowDataKeys);
+    const isSelected = !!(selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.includes(id));
+    return (jsxRuntime.jsxs(row.TableRow, { selected: isSelected, children: [withCheckbox && jsxRuntime.jsx(CheckboxCell, { id: id, isSelected: isSelected }), Object.entries(rowData).map(([columnKey, columnValue], index) => {
+                var _a, _b;
+                const ContentRenderer = (columnRenderers && columnRenderers[columnKey]) || DefaultColumnRenderer;
+                return (jsxRuntime.jsx(cell.Cell, { columnId: columnKey, colSpan: (_a = colSpanConfig === null || colSpanConfig === void 0 ? void 0 : colSpanConfig[id]) === null || _a === void 0 ? void 0 : _a[columnKey], rowSpan: (_b = rowSpanConfig === null || rowSpanConfig === void 0 ? void 0 : rowSpanConfig[id]) === null || _b === void 0 ? void 0 : _b[columnKey], children: jsxRuntime.jsx(ContentRenderer, { dataKey: columnKey, value: columnValue, index: index + (withCheckbox ? 2 : 1), row: row$1 }) }, `body-${columnKey}-cell-${id}`));
+            })] }));
+});
+const TableBody = react.memo(({ rows }) => {
+    const { rowId } = contextHooks.useTableDataContext();
+    const { rowRenderer: RowRenderer = DefaultRowRenderer } = contextHooks.useTableRendererContext();
+    return (jsxRuntime.jsx(tableBody.TableBody, { children: rows.map((row) => {
+            const id = typeof rowId === "function" ? rowId(row) : row[rowId];
+            return jsxRuntime.jsx(RowRenderer, { row: row }, `body-row-${id}`);
+        }) }));
+});
+TableBody.displayName = "Table.TableBody";
+
+exports.TableBody = TableBody;

package/dist/cjs/components/ui/data-table/components/table-fallback.js

@@ -0,0 +1,28 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+require('../../table/table.js');
+var emptyState = require('../../../utility/empty-state/empty-state.js');
+var icon = require('../../../media/icon/icon.js');
+var tableBody = require('../../table/components/table-body.js');
+var row = require('../../table/components/row.js');
+var cell = require('../../table/components/cell.js');
+
+const NoData = (jsxRuntime.jsxs(emptyState.EmptyState, { children: [jsxRuntime.jsx(emptyState.EmptyState.Image, { children: jsxRuntime.jsx(icon.Icon, { name: "file-warning", size: 80 }) }), jsxRuntime.jsx(emptyState.EmptyState.Title, { children: "No Data" }), jsxRuntime.jsx(emptyState.EmptyState.Description, { children: "Visit this page later" })] }));
+const Error = (jsxRuntime.jsxs(emptyState.EmptyState, { children: [jsxRuntime.jsx(emptyState.EmptyState.Image, { children: jsxRuntime.jsx(icon.Icon, { name: "bug", size: 80 }) }), jsxRuntime.jsx(emptyState.EmptyState.Title, { children: "An error occurred!" }), jsxRuntime.jsx(emptyState.EmptyState.Description, { children: "Please contact us for assistance or try again later." })] }));
+const TableFallback = react.memo(({ type, columnsAmount, customFallback }) => {
+    const EmptyStateContent = react.useMemo(() => {
+        switch (type) {
+            case "error":
+                return Error;
+            case "empty":
+                return NoData;
+        }
+    }, [type]);
+    return (jsxRuntime.jsx(tableBody.TableBody, { children: jsxRuntime.jsx(row.TableRow, { children: jsxRuntime.jsx(cell.TableCell, { colSpan: columnsAmount, children: customFallback || EmptyStateContent }) }) }));
+});
+TableFallback.displayName = "Table.TableFallback";
+
+exports.TableFallback = TableFallback;

package/dist/cjs/components/ui/data-table/components/table-head.js

@@ -0,0 +1,56 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var _difference = require('lodash/difference');
+var _map = require('lodash/map');
+var utils = require('../utils.js');
+var cell = require('./cell.js');
+var contextHooks = require('../hooks/contextHooks.js');
+var button = require('../../../buttons/button/button.js');
+var checkbox = require('../../../forms/checkbox/checkbox.js');
+require('../../table/table.js');
+require('clsx');
+var addIf = require('../../../../utils/addIf.js');
+var tableHeader = require('../../table/components/table-header.js');
+var row = require('../../table/components/row.js');
+
+const HeaderCell = (_a) => {
+    var { column, index } = _a, rest = tslib.__rest(_a, ["column", "index"]);
+    const { sortBy, sortDirection, onSortChange } = contextHooks.useTableSortContext();
+    const { id, label, sortable = false, align, style } = column;
+    const isActiveSort = sortBy === id;
+    return (jsxRuntime.jsx(cell.Cell, Object.assign({}, rest, { variant: "header", columnId: id, align: align, style: style, children: sortable ? (jsxRuntime.jsx(button.Button, { variant: "ghost", rightIcon: isActiveSort
+                ? sortDirection === "desc"
+                    ? "arrow-down-wide-narrow"
+                    : "arrow-up-narrow-wide"
+                : "arrow-up-down", onClick: (e) => onSortChange && onSortChange(id, e), children: label })) : (label) })));
+};
+HeaderCell.displayName = "Table.HeaderCell";
+const SelectAllCell = react.memo((props) => {
+    const { rows, rowId } = contextHooks.useTableDataContext();
+    const { stickyColumnsLeft } = contextHooks.useTableStickyContext();
+    const { selectedRows = [], onSelect } = contextHooks.useTableSelectionContext();
+    const rowsIds = react.useMemo(() => _map(rows, (row) => (typeof rowId === "function" ? rowId(row) : row[rowId])), [rowId, rows]);
+    const isAllSelected = rowsIds.length > 0 && _difference(rowsIds, selectedRows).length === 0;
+    return (jsxRuntime.jsx(cell.Cell, Object.assign({}, props, { variant: "header", sticky: stickyColumnsLeft > 0 ? "left" : undefined, className: "w-[32px]", children: jsxRuntime.jsx(checkbox.Checkbox, { checked: isAllSelected, indeterminate: !isAllSelected && selectedRows.length > 0, onCheckedChange: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(isAllSelected ? [] : rowsIds) }) })));
+});
+SelectAllCell.displayName = "Table.SelectAllCell";
+const TableHead = react.memo(({ columns, withSelection }) => {
+    const headerRows = react.useMemo(() => utils.convertHeadersToRows(columns), [columns]);
+    return (jsxRuntime.jsx(tableHeader.TableHeader, { children: headerRows.map((headerRow, headerRowIndex) => (jsxRuntime.jsxs(row.TableRow, { children: [withSelection && headerRowIndex === 0 && jsxRuntime.jsx(SelectAllCell, { rowSpan: headerRows.length }), headerRow.map((column, index) => {
+                    const children = utils.collectColumnsWithoutChildren(column.children || []);
+                    const childCount = children.length;
+                    const childrenWithMinWidth = children.filter((c) => { var _a; return (_a = c.style) === null || _a === void 0 ? void 0 : _a.minWidth; }).length;
+                    return (jsxRuntime.jsx(HeaderCell, Object.assign({ index: index, column: column }, addIf.addIf(childCount > 0, {
+                        colSpan: childCount + childrenWithMinWidth,
+                    }), addIf.addIf(childCount === 0, {
+                        rowSpan: headerRows.length - headerRowIndex,
+                    })), `header-${column.id}`));
+                })] }, `header-row-${headerRowIndex}`))) }));
+});
+TableHead.displayName = "Table.TableHead";
+
+exports.TableHead = TableHead;

package/dist/cjs/components/ui/data-table/components/table-placeholder.js

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var skeleton = require('../../../utility/skeleton/skeleton.js');
+require('../../table/table.js');
+var tableBody = require('../../table/components/table-body.js');
+var row = require('../../table/components/row.js');
+var cell = require('../../table/components/cell.js');
+
+const TablePlaceholder = react.memo(({ columnsAmount, rowsAmount, customFallback }) => {
+    return (jsxRuntime.jsx(tableBody.TableBody, { children: customFallback ||
+            Array.from({ length: rowsAmount }).map((_, rowIndex) => (jsxRuntime.jsx(row.TableRow, { children: jsxRuntime.jsx(cell.TableCell, { colSpan: columnsAmount, children: jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full" }) }, `loading-cell-${columnsAmount}`) }, `loading-row-${rowIndex}`))) }));
+});
+TablePlaceholder.displayName = "Table.TablePlaceholder";
+
+exports.TablePlaceholder = TablePlaceholder;

package/dist/cjs/components/ui/data-table/data-table.js

@@ -0,0 +1,97 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var _map = require('lodash/map');
+var tableHead = require('./components/table-head.js');
+var tableBody = require('./components/table-body.js');
+var tableFallback = require('./components/table-fallback.js');
+var tablePlaceholder = require('./components/table-placeholder.js');
+var columnGroup = require('./components/column-group.js');
+var useStickyColumns = require('./hooks/useStickyColumns.js');
+var utils = require('./utils.js');
+var contextHooks = require('./hooks/contextHooks.js');
+var cell = require('./components/cell.js');
+var statusController = require('../../utility/status-controller/status-controller.js');
+require('clsx');
+var useStateRef = require('../../../hooks/useStateRef.js');
+var useScrollState = require('../../../hooks/useScrollState.js');
+var table = require('../table/table.js');
+var utils$1 = require('../../../lib/utils.js');
+var row = require('../table/components/row.js');
+
+const DataTableComponent = ({ columns, rows, rowId = "id", rowDataKeys, 
+// States API
+isLoading = false, isError = false, errorFallback, emptyFallback, loadingFallback, 
+// Renderer API
+columnRenderers, rowRenderer, 
+// Sticky API
+stickyHeader = false, stickyColumnsLeft = 0, stickyColumnsRight = 0, 
+// Sort API
+sortBy, sortDirection, onSortChange, 
+// Selection API
+selectedRows, onSelect, 
+// Body Cells Configs
+colSpan, rowSpan, }) => {
+    const containerRef = react.useRef(null);
+    const [tableElement, setTableRef] = useStateRef.useStateRef();
+    const { isScrolledToLeftCorner, isScrolledToRightCorner } = useScrollState.useScrollState(containerRef);
+    useStickyColumns.useStickyColumns(tableElement);
+    const mergedCells = !!colSpan || !!rowSpan || Object.values(columns).some((column) => column.children);
+    const columnsWithoutChildren = react.useMemo(() => utils.collectColumnsWithoutChildren(columns), [columns]);
+    const columnsWithMinWidth = react.useMemo(() => columnsWithoutChildren.filter((column) => { var _a; return ((_a = column.style) === null || _a === void 0 ? void 0 : _a.minWidth) !== undefined; }).length, [columnsWithoutChildren]);
+    const columnsAmount = columnsWithoutChildren.length + columnsWithMinWidth + (selectedRows ? 1 : 0);
+    // Compute column configuration once
+    const columnConfig = react.useMemo(() => {
+        const flattenedColumns = utils.flattenColumns(columns);
+        const config = {};
+        flattenedColumns.forEach((column, index) => {
+            var _a;
+            config[column.id] = {
+                index,
+                isStickyLeft: index < stickyColumnsLeft,
+                isStickyRight: index >= flattenedColumns.length - stickyColumnsRight,
+                hasMinWidth: ((_a = column.style) === null || _a === void 0 ? void 0 : _a.minWidth) !== undefined,
+            };
+        });
+        return config;
+    }, [columns, stickyColumnsLeft, stickyColumnsRight]);
+    // Memoize context values to prevent unnecessary re-renders
+    const dataContextValue = react.useMemo(() => ({ rowId: rowId, rows, rowDataKeys: _map(utils.flattenColumns(columns), "id") }), [rowId, rowDataKeys]);
+    const columnContextValue = react.useMemo(() => ({ columnConfig }), [columnConfig]);
+    const rendererContextValue = react.useMemo(() => ({
+        rowRenderer,
+        columnRenderers,
+    }), [rowRenderer, columnRenderers]);
+    const selectionContextValue = react.useMemo(() => ({
+        selectedRows,
+        onSelect,
+    }), [selectedRows, onSelect]);
+    const sortContextValue = react.useMemo(() => ({
+        sortBy,
+        sortDirection,
+        onSortChange,
+    }), [sortBy, sortDirection, onSortChange]);
+    const stickyContextValue = react.useMemo(() => ({
+        stickyHeader,
+        stickyColumnsLeft,
+        stickyColumnsRight,
+    }), [stickyHeader, stickyColumnsLeft, stickyColumnsRight]);
+    const styleContextValue = react.useMemo(() => ({
+        colSpan,
+        rowSpan,
+    }), [colSpan, rowSpan]);
+    return (jsxRuntime.jsx(contextHooks.TableColumnContext.Provider, { value: columnContextValue, children: jsxRuntime.jsx(contextHooks.TableRendererContext.Provider, { value: rendererContextValue, children: jsxRuntime.jsx(contextHooks.TableSelectionContext.Provider, { value: selectionContextValue, children: jsxRuntime.jsx(contextHooks.TableSortContext.Provider, { value: sortContextValue, children: jsxRuntime.jsx(contextHooks.TableStickyContext.Provider, { value: stickyContextValue, children: jsxRuntime.jsx(contextHooks.TableStyleContext.Provider, { value: styleContextValue, children: jsxRuntime.jsx(contextHooks.TableDataContext.Provider, { value: dataContextValue, children: jsxRuntime.jsx(table.TableContainer, { ref: containerRef, className: "h-full", children: jsxRuntime.jsxs(table.Table, { ref: setTableRef, stickyHeader: stickyHeader, grid: mergedCells, className: utils$1.cn("data-table", {
+                                            "h-full": isLoading || isError || !rows.length,
+                                            "left-corner-scrolled": isScrolledToLeftCorner,
+                                            "right-corner-scrolled": isScrolledToRightCorner,
+                                        }), children: [jsxRuntime.jsx(columnGroup.ColumnGroup, { columns: columnsWithoutChildren }), jsxRuntime.jsx(tableHead.TableHead, { columns: columns, withSelection: !!selectedRows }), jsxRuntime.jsx(statusController.StatusController, { loading: isLoading, loadingFallback: jsxRuntime.jsx(tablePlaceholder.TablePlaceholder, { rowsAmount: 16, columnsAmount: columnsAmount, customFallback: loadingFallback }), error: isError, errorFallback: jsxRuntime.jsx(tableFallback.TableFallback, { type: "error", columnsAmount: columnsAmount, customFallback: errorFallback }), empty: !rows.length, emptyFallback: jsxRuntime.jsx(tableFallback.TableFallback, { type: "empty", columnsAmount: columnsAmount, customFallback: emptyFallback }), children: jsxRuntime.jsx(tableBody.TableBody, { rows: rows }) })] }) }) }) }) }) }) }) }) }));
+};
+DataTableComponent.displayName = "DataTable";
+const DataTable = Object.assign(DataTableComponent, {
+    Row: row.TableRow,
+    Cell: cell.Cell,
+});
+
+exports.DataTable = DataTable;

package/dist/cjs/components/ui/data-table/hooks/contextHooks.js

@@ -0,0 +1,75 @@
+'use strict';
+
+var react = require('react');
+
+const TableDataContext = react.createContext(undefined);
+const useTableDataContext = () => {
+    const context = react.useContext(TableDataContext);
+    if (!context) {
+        throw new Error("useTableDataContext hook must be used within a TableDataContext.Provider");
+    }
+    return context;
+};
+const TableColumnContext = react.createContext(undefined);
+const useTableColumnContext = () => {
+    const context = react.useContext(TableColumnContext);
+    if (!context) {
+        throw new Error("useTableColumnContext hook must be used within a TableColumnContext.Provider");
+    }
+    return context;
+};
+const TableRendererContext = react.createContext(undefined);
+const useTableRendererContext = () => {
+    const context = react.useContext(TableRendererContext);
+    if (!context) {
+        throw new Error("useTableRendererContext hook must be used within a TableRendererContext.Provider");
+    }
+    return context;
+};
+const TableSelectionContext = react.createContext(undefined);
+const useTableSelectionContext = () => {
+    const context = react.useContext(TableSelectionContext);
+    if (!context) {
+        throw new Error("useTableSelectionContext hook must be used within a TableSelectionContext.Provider");
+    }
+    return context;
+};
+const TableSortContext = react.createContext(undefined);
+const useTableSortContext = () => {
+    const context = react.useContext(TableSortContext);
+    if (!context) {
+        throw new Error("useTableSortContext hook must be used within a TableSortContext.Provider");
+    }
+    return context;
+};
+const TableStickyContext = react.createContext(undefined);
+const useTableStickyContext = () => {
+    const context = react.useContext(TableStickyContext);
+    if (!context) {
+        throw new Error("useTableStickyContext hook must be used within a TableStickyContext.Provider");
+    }
+    return context;
+};
+const TableStyleContext = react.createContext(undefined);
+const useTableStyleContext = () => {
+    const context = react.useContext(TableStyleContext);
+    if (!context) {
+        throw new Error("useTableStyleContext hook must be used within a TableStyleContext.Provider");
+    }
+    return context;
+};
+
+exports.TableColumnContext = TableColumnContext;
+exports.TableDataContext = TableDataContext;
+exports.TableRendererContext = TableRendererContext;
+exports.TableSelectionContext = TableSelectionContext;
+exports.TableSortContext = TableSortContext;
+exports.TableStickyContext = TableStickyContext;
+exports.TableStyleContext = TableStyleContext;
+exports.useTableColumnContext = useTableColumnContext;
+exports.useTableDataContext = useTableDataContext;
+exports.useTableRendererContext = useTableRendererContext;
+exports.useTableSelectionContext = useTableSelectionContext;
+exports.useTableSortContext = useTableSortContext;
+exports.useTableStickyContext = useTableStickyContext;
+exports.useTableStyleContext = useTableStyleContext;