art-bd-ui 1.0.0

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

@@ -0,0 +1,22 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useTableColumnContext } from '../hooks/contextHooks.js';
+import '../../table/table.js';
+import { TableHead } from '../../table/components/table-head.js';
+import { TableCell } from '../../table/components/cell.js';
+
+const Cell = (_a) => {
+    var _b;
+    var { variant = "body", sticky, columnId, colSpan = 1 } = _a, rest = __rest(_a, ["variant", "sticky", "columnId", "colSpan"]);
+    const Component = variant === "header" ? TableHead : TableCell;
+    const { columnConfig } = 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 jsx(Component, Object.assign({}, rest, { colSpan: colSpan + colSpanShift, sticky: finalSticky }));
+};
+Cell.displayName = "Table.Cell";
+
+export { Cell };

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

@@ -0,0 +1,43 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, Fragment } from 'react';
+import { useTableSelectionContext } from '../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 = memo(({ columns }) => {
+    const { selectedRows } = useTableSelectionContext();
+    return (jsxs("colgroup", { children: [selectedRows && 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 (jsxs(Fragment, { children: [jsx("col", { "data-testid": `${testId}_static`, style: { width: columnStyles.minWidth } }), jsx("col", { "data-testid": `${testId}_flexible` })] }, `${testId}-minWidth`));
+                }
+                else if (columnStyles === null || columnStyles === void 0 ? void 0 : columnStyles.width) {
+                    return jsx("col", { "data-testid": testId, style: { width: columnStyles.width } }, `${testId}-width`);
+                }
+                else {
+                    return jsx("col", { "data-testid": `${testId}_auto` }, `${testId}-auto`);
+                }
+            })] }));
+});
+ColumnGroup.displayName = "Table.ColumnGroup";
+
+export { ColumnGroup };

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

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

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

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

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

@@ -0,0 +1,54 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo, useMemo } from 'react';
+import _difference from 'lodash/difference';
+import _map from 'lodash/map';
+import { convertHeadersToRows, collectColumnsWithoutChildren } from '../utils.js';
+import { Cell } from './cell.js';
+import { useTableDataContext, useTableStickyContext, useTableSelectionContext, useTableSortContext } from '../hooks/contextHooks.js';
+import { Button } from '../../../buttons/button/button.js';
+import { Checkbox } from '../../../forms/checkbox/checkbox.js';
+import '../../table/table.js';
+import 'clsx';
+import { addIf } from '../../../../utils/addIf.js';
+import { TableHeader } from '../../table/components/table-header.js';
+import { TableRow } from '../../table/components/row.js';
+
+const HeaderCell = (_a) => {
+    var { column, index } = _a, rest = __rest(_a, ["column", "index"]);
+    const { sortBy, sortDirection, onSortChange } = useTableSortContext();
+    const { id, label, sortable = false, align, style } = column;
+    const isActiveSort = sortBy === id;
+    return (jsx(Cell, Object.assign({}, rest, { variant: "header", columnId: id, align: align, style: style, children: sortable ? (jsx(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 = memo((props) => {
+    const { rows, rowId } = useTableDataContext();
+    const { stickyColumnsLeft } = useTableStickyContext();
+    const { selectedRows = [], onSelect } = useTableSelectionContext();
+    const rowsIds = useMemo(() => _map(rows, (row) => (typeof rowId === "function" ? rowId(row) : row[rowId])), [rowId, rows]);
+    const isAllSelected = rowsIds.length > 0 && _difference(rowsIds, selectedRows).length === 0;
+    return (jsx(Cell, Object.assign({}, props, { variant: "header", sticky: stickyColumnsLeft > 0 ? "left" : undefined, className: "w-[32px]", children: jsx(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 = memo(({ columns, withSelection }) => {
+    const headerRows = useMemo(() => convertHeadersToRows(columns), [columns]);
+    return (jsx(TableHeader, { children: headerRows.map((headerRow, headerRowIndex) => (jsxs(TableRow, { children: [withSelection && headerRowIndex === 0 && jsx(SelectAllCell, { rowSpan: headerRows.length }), headerRow.map((column, index) => {
+                    const children = 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 (jsx(HeaderCell, Object.assign({ index: index, column: column }, addIf(childCount > 0, {
+                        colSpan: childCount + childrenWithMinWidth,
+                    }), addIf(childCount === 0, {
+                        rowSpan: headerRows.length - headerRowIndex,
+                    })), `header-${column.id}`));
+                })] }, `header-row-${headerRowIndex}`))) }));
+});
+TableHead.displayName = "Table.TableHead";
+
+export { TableHead };

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

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

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

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import _map from 'lodash/map';
+import { TableHead } from './components/table-head.js';
+import { TableBody } from './components/table-body.js';
+import { TableFallback } from './components/table-fallback.js';
+import { TablePlaceholder } from './components/table-placeholder.js';
+import { ColumnGroup } from './components/column-group.js';
+import { useStickyColumns } from './hooks/useStickyColumns.js';
+import { collectColumnsWithoutChildren, flattenColumns } from './utils.js';
+import { TableColumnContext, TableRendererContext, TableSelectionContext, TableSortContext, TableStickyContext, TableStyleContext, TableDataContext } from './hooks/contextHooks.js';
+import { Cell } from './components/cell.js';
+import { StatusController } from '../../utility/status-controller/status-controller.js';
+import 'clsx';
+import { useStateRef } from '../../../hooks/useStateRef.js';
+import { useScrollState } from '../../../hooks/useScrollState.js';
+import { TableContainer, Table } from '../table/table.js';
+import { cn } from '../../../lib/utils.js';
+import { TableRow } from '../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 = useRef(null);
+    const [tableElement, setTableRef] = useStateRef();
+    const { isScrolledToLeftCorner, isScrolledToRightCorner } = useScrollState(containerRef);
+    useStickyColumns(tableElement);
+    const mergedCells = !!colSpan || !!rowSpan || Object.values(columns).some((column) => column.children);
+    const columnsWithoutChildren = useMemo(() => collectColumnsWithoutChildren(columns), [columns]);
+    const columnsWithMinWidth = 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 = useMemo(() => {
+        const flattenedColumns = 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 = useMemo(() => ({ rowId: rowId, rows, rowDataKeys: _map(flattenColumns(columns), "id") }), [rowId, rowDataKeys]);
+    const columnContextValue = useMemo(() => ({ columnConfig }), [columnConfig]);
+    const rendererContextValue = useMemo(() => ({
+        rowRenderer,
+        columnRenderers,
+    }), [rowRenderer, columnRenderers]);
+    const selectionContextValue = useMemo(() => ({
+        selectedRows,
+        onSelect,
+    }), [selectedRows, onSelect]);
+    const sortContextValue = useMemo(() => ({
+        sortBy,
+        sortDirection,
+        onSortChange,
+    }), [sortBy, sortDirection, onSortChange]);
+    const stickyContextValue = useMemo(() => ({
+        stickyHeader,
+        stickyColumnsLeft,
+        stickyColumnsRight,
+    }), [stickyHeader, stickyColumnsLeft, stickyColumnsRight]);
+    const styleContextValue = useMemo(() => ({
+        colSpan,
+        rowSpan,
+    }), [colSpan, rowSpan]);
+    return (jsx(TableColumnContext.Provider, { value: columnContextValue, children: jsx(TableRendererContext.Provider, { value: rendererContextValue, children: jsx(TableSelectionContext.Provider, { value: selectionContextValue, children: jsx(TableSortContext.Provider, { value: sortContextValue, children: jsx(TableStickyContext.Provider, { value: stickyContextValue, children: jsx(TableStyleContext.Provider, { value: styleContextValue, children: jsx(TableDataContext.Provider, { value: dataContextValue, children: jsx(TableContainer, { ref: containerRef, className: "h-full", children: jsxs(Table, { ref: setTableRef, stickyHeader: stickyHeader, grid: mergedCells, className: cn("data-table", {
+                                            "h-full": isLoading || isError || !rows.length,
+                                            "left-corner-scrolled": isScrolledToLeftCorner,
+                                            "right-corner-scrolled": isScrolledToRightCorner,
+                                        }), children: [jsx(ColumnGroup, { columns: columnsWithoutChildren }), jsx(TableHead, { columns: columns, withSelection: !!selectedRows }), jsx(StatusController, { loading: isLoading, loadingFallback: jsx(TablePlaceholder, { rowsAmount: 16, columnsAmount: columnsAmount, customFallback: loadingFallback }), error: isError, errorFallback: jsx(TableFallback, { type: "error", columnsAmount: columnsAmount, customFallback: errorFallback }), empty: !rows.length, emptyFallback: jsx(TableFallback, { type: "empty", columnsAmount: columnsAmount, customFallback: emptyFallback }), children: jsx(TableBody, { rows: rows }) })] }) }) }) }) }) }) }) }) }));
+};
+DataTableComponent.displayName = "DataTable";
+const DataTable = Object.assign(DataTableComponent, {
+    Row: TableRow,
+    Cell,
+});
+
+export { DataTable };

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

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

package/dist/esm/components/ui/data-table/hooks/useStickyColumns.js

@@ -0,0 +1,96 @@
+import { useRef, useCallback, useEffect } from 'react';
+import debounce from 'lodash/debounce';
+import fastdom from 'fastdom';
+import 'clsx';
+import { getBoundingRect } from '../../../../utils/getBoundingRect.js';
+
+function sortByDomNode(nodes, resolveKey = (i) => i) {
+    return nodes.slice().sort((aItem, zItem) => {
+        const a = resolveKey(aItem);
+        const z = resolveKey(zItem);
+        if (a === null || z === null)
+            return 0;
+        const position = a.compareDocumentPosition(z);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING)
+            return -1;
+        if (position & Node.DOCUMENT_POSITION_PRECEDING)
+            return 1;
+        return 0;
+    });
+}
+const calculateLeftPositions = (cells) => {
+    let currentPosition = 0;
+    cells.forEach((cell) => {
+        const rect = getBoundingRect(cell);
+        cell.style.left = `${Math.floor(currentPosition)}px`;
+        currentPosition += rect.width;
+    });
+};
+const calculateRightPositions = (cells) => {
+    let currentPosition = 0;
+    // Process cells from right to left
+    for (let i = cells.length - 1; i >= 0; i--) {
+        const cell = cells[i];
+        const rect = getBoundingRect(cell);
+        cell.style.right = `${Math.floor(currentPosition)}px`;
+        currentPosition += rect.width;
+    }
+};
+const useStickyColumns = (tableElement) => {
+    const resizeObserverRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const updateStickyPositions = useCallback(() => {
+        if (!tableElement)
+            return;
+        // Cancel any pending RAF
+        if (rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+        }
+        // Schedule the update in the next animation frame
+        rafIdRef.current = requestAnimationFrame(() => {
+            fastdom.measure(() => {
+                // Get all rows
+                const rows = Array.from(tableElement.getElementsByTagName("tr"));
+                rows.forEach((row) => {
+                    // Find sticky cells in this row
+                    const stickyCells = Array.from(row.querySelectorAll("[data-sticky]"));
+                    // Split cells into left and right sticky cells
+                    const leftStickyCells = stickyCells.filter((cell) => cell.getAttribute("data-sticky") === "left");
+                    const rightStickyCells = stickyCells.filter((cell) => cell.getAttribute("data-sticky") === "right");
+                    // Sort cells in DOM order within the row
+                    const sortedLeftCells = sortByDomNode(leftStickyCells);
+                    const sortedRightCells = sortByDomNode(rightStickyCells);
+                    fastdom.mutate(() => {
+                        calculateLeftPositions(sortedLeftCells);
+                        calculateRightPositions(sortedRightCells);
+                    });
+                });
+            });
+        });
+    }, [tableElement]);
+    useEffect(() => {
+        if (!tableElement)
+            return;
+        // Initial calculation
+        updateStickyPositions();
+        // Create debounced resize handler with trailing event
+        const debouncedResizeHandler = debounce(updateStickyPositions, 150, {
+            trailing: true,
+        });
+        // Create and configure ResizeObserver
+        resizeObserverRef.current = new ResizeObserver(debouncedResizeHandler);
+        resizeObserverRef.current.observe(tableElement);
+        return () => {
+            if (rafIdRef.current) {
+                cancelAnimationFrame(rafIdRef.current);
+            }
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+            // Cancel any pending debounced calls
+            debouncedResizeHandler.cancel();
+        };
+    }, [tableElement, updateStickyPositions]);
+};
+
+export { useStickyColumns };

package/dist/esm/components/ui/data-table/utils.js

@@ -0,0 +1,22 @@
+const convertHeadersToRows = (headers, level = 0, result = []) => {
+    headers.forEach((header) => {
+        if (result[level]) {
+            result[level].push(header);
+        }
+        else {
+            result[level] = [header];
+        }
+        if (header.children) {
+            convertHeadersToRows(header.children, level + 1, result);
+        }
+    });
+    return result;
+};
+const flattenColumns = (columns) => {
+    return columns.flatMap((column) => [column, ...(column.children ? flattenColumns(column.children) : [])]);
+};
+const collectColumnsWithoutChildren = (columns) => {
+    return flattenColumns(columns).filter((column) => !column.children);
+};
+
+export { collectColumnsWithoutChildren, convertHeadersToRows, flattenColumns };

package/dist/esm/components/ui/date-picker/date-picker.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { format } from 'date-fns';
+import { cn } from '../../../lib/utils.js';
+import { Button } from '../../buttons/button/button.js';
+import { Calendar } from '../calendar/calendar.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../../popovers/popover/popover.js';
+
+const DatePicker = ({ date, onChange, placeholder = "Pick a date" }) => {
+    return (jsxs(Popover, { children: [jsx(PopoverTrigger, { asChild: true, children: jsx(Button, { variant: "outline", leftIcon: "calendar", className: cn("w-[240px] justify-start text-left font-normal", !date && "text-muted-foreground"), children: date ? format(date, "PPP") : jsx("span", { children: placeholder }) }) }), jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: jsx(Calendar, { mode: "single", selected: date, onSelect: onChange, autoFocus: true }) })] }));
+};
+
+export { DatePicker };

package/dist/esm/components/ui/dropdown-menu/dropdown-menu.js

@@ -0,0 +1,84 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Root, Portal, Trigger, Content, Group, Label, Item, CheckboxItem, ItemIndicator, RadioGroup, RadioItem, Separator, Sub, SubTrigger, SubContent } from '@radix-ui/react-dropdown-menu';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const DropdownMenu = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Root, Object.assign({ "data-slot": "dropdown-menu" }, props));
+};
+DropdownMenu.displayName = "DropdownMenu";
+const DropdownMenuPortal = (_a) => {
+    var props = __rest(_a, []);
+    return (jsx(Portal, Object.assign({ "data-slot": "dropdown-menu-portal" }, props)));
+};
+DropdownMenuPortal.displayName = "DropdownMenuPortal";
+const DropdownMenuTrigger = (_a) => {
+    var props = __rest(_a, []);
+    return (jsx(Trigger, Object.assign({ "data-slot": "dropdown-menu-trigger" }, props)));
+};
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+const DropdownMenuContent = (_a) => {
+    var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
+    return (jsx(Portal, { children: jsx(Content, Object.assign({ "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className) }, props)) }));
+};
+DropdownMenuContent.displayName = "DropdownMenuContent";
+const DropdownMenuGroup = (_a) => {
+    var props = __rest(_a, []);
+    return (jsx(Group, Object.assign({ "data-slot": "dropdown-menu-group" }, props)));
+};
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+const DropdownMenuItem = (_a) => {
+    var { className, inset, variant = "default" } = _a, props = __rest(_a, ["className", "inset", "variant"]);
+    return (jsx(Item, Object.assign({ "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props)));
+};
+DropdownMenuItem.displayName = "DropdownMenuItem";
+const DropdownMenuCheckboxItem = (_a) => {
+    var { className, children, checked } = _a, props = __rest(_a, ["className", "children", "checked"]);
+    return (jsxs(CheckboxItem, Object.assign({ "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked }, props, { children: [jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(Icon, { name: "check", className: "size-4" }) }) }), children] })));
+};
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+const DropdownMenuRadioGroup = (_a) => {
+    var props = __rest(_a, []);
+    return (jsx(RadioGroup, Object.assign({ "data-slot": "dropdown-menu-radio-group" }, props)));
+};
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+const DropdownMenuRadioItem = (_a) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (jsxs(RadioItem, Object.assign({ "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className) }, props, { children: [jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(Icon, { name: "circle", className: "size-2 fill-current" }) }) }), children] })));
+};
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+const DropdownMenuLabel = (_a) => {
+    var { className, inset } = _a, props = __rest(_a, ["className", "inset"]);
+    return (jsx(Label, Object.assign({ "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className) }, props)));
+};
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+const DropdownMenuSeparator = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Separator, Object.assign({ "data-slot": "dropdown-menu-separator", className: cn("bg-border -mx-1 my-1 h-px", className) }, props)));
+};
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+const DropdownMenuShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("span", Object.assign({ "data-slot": "dropdown-menu-shortcut", className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className) }, props)));
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+const DropdownMenuSub = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Sub, Object.assign({ "data-slot": "dropdown-menu-sub" }, props));
+};
+DropdownMenuSub.displayName = "DropdownMenuSub";
+const DropdownMenuSubTrigger = (_a) => {
+    var { className, inset, children } = _a, props = __rest(_a, ["className", "inset", "children"]);
+    return (jsxs(SubTrigger, Object.assign({ "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className) }, props, { children: [children, jsx(Icon, { name: "chevron-right", className: "ml-auto size-4" })] })));
+};
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+const DropdownMenuSubContent = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(SubContent, Object.assign({ "data-slot": "dropdown-menu-sub-content", className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg", className) }, props)));
+};
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/esm/components/ui/icon/icon.js

@@ -0,0 +1,25 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { DynamicIcon } from 'lucide-react/dynamic';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const iconVariants = cva("", {
+    variants: {
+        disabled: {
+            true: "text-muted-foreground cursor-not-allowed",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        disabled: false,
+    },
+});
+const Icon = forwardRef((_a, ref) => {
+    var { color, size = 24, disabled = false, className } = _a, rest = __rest(_a, ["color", "size", "disabled", "className"]);
+    return (jsx(DynamicIcon, Object.assign({ ref: ref, color: color, "aria-disabled": disabled, size: size, className: cn(iconVariants({ disabled }), className) }, rest)));
+});
+Icon.displayName = "Icon";
+
+export { Icon };