flikkui 0.1.0-beta.4 → 0.1.0-beta.5

package/dist/components/data-display/Table/components/TableColumnManager/TableColumnManager.js

@@ -0,0 +1,85 @@
+import { __assign, __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useEffect } from 'react';
+import { tableColumnManagerTheme } from './TableColumnManager.theme.js';
+import { cn } from '../../../../../utils/cn.js';
+import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
+import Button from '../../../../core/Button/Button.js';
+import { Sortable, SortableItem } from '../../../../layout/Sortable/Sortable.js';
+
+/**
+ * TableColumnManager component for managing column visibility in tables
+ * Follows the established library patterns with proper theming and accessibility
+ */
+var TableColumnManagerComponent = function (_a) {
+    var columns = _a.columns, visibleColumns = _a.visibleColumns, initialVisibleColumns = _a.initialVisibleColumns, onVisibleColumnsChange = _a.onVisibleColumnsChange, onColumnReorder = _a.onColumnReorder, onColumnOrderReset = _a.onColumnOrderReset, onClose = _a.onClose, className = _a.className, themeOverrides = _a.theme;
+    var dialogRef = useRef(null);
+    // Focus management for accessibility
+    useEffect(function () {
+        var _a;
+        var focusableElements = (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button, input, [tabindex]:not([tabindex="-1"])');
+        var firstElement = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements[0];
+        // Focus first interactive element when dialog opens
+        if (firstElement) {
+            firstElement.focus();
+        }
+    }, []);
+    // Handle keyboard navigation
+    var handleKeyDown = function (event) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onClose();
+        }
+    };
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, tableColumnManagerTheme), themeOverrides);
+    var handleToggleColumn = function (columnId) {
+        // Prevent toggling locked columns
+        var column = columns.find(function (col) { return col.id === columnId; });
+        if (column === null || column === void 0 ? void 0 : column.locked) {
+            return;
+        }
+        var newVisibleColumns = visibleColumns.includes(columnId)
+            ? visibleColumns.filter(function (id) { return id !== columnId; })
+            : __spreadArray(__spreadArray([], visibleColumns, true), [columnId], false);
+        onVisibleColumnsChange(newVisibleColumns);
+    };
+    var handleResetToDefault = function () {
+        // Get all locked column IDs to ensure they remain visible
+        var lockedColumnIds = columns.filter(function (col) { return col.locked; }).map(function (col) { return col.id; });
+        // Combine initial visible columns with locked columns (remove duplicates)
+        var resetVisibleColumns = Array.from(new Set(__spreadArray(__spreadArray([], initialVisibleColumns, true), lockedColumnIds, true)));
+        // Reset to initial visible columns with locked columns guaranteed to be visible
+        onVisibleColumnsChange(resetVisibleColumns);
+        // Reset column order to default if handler is provided
+        onColumnOrderReset === null || onColumnOrderReset === void 0 ? void 0 : onColumnOrderReset();
+    };
+    var handleColumnReorder = function (fromIndex, toIndex) {
+        if (onColumnReorder) {
+            onColumnReorder(fromIndex, toIndex);
+        }
+    };
+    return (React__default.createElement("div", { ref: dialogRef, className: cn(theme.container, className), role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", onKeyDown: handleKeyDown },
+        React__default.createElement("div", { id: "column-manager-title", className: theme.header }, "Manage Columns"),
+        React__default.createElement("div", { id: "column-manager-description", className: "sr-only" }, "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden."),
+        React__default.createElement("div", { className: theme.columnList, role: "group", "aria-label": "Column visibility options" }, onColumnReorder ? (React__default.createElement(Sortable, { onReorder: handleColumnReorder, showDragHandle: true, className: "space-y-0.5" }, columns.map(function (column) {
+            var isVisible = visibleColumns.includes(column.id);
+            var isLocked = column.locked === true;
+            var displayName = typeof column.header === "string" ? column.header : column.id;
+            return (React__default.createElement(SortableItem, { key: column.id, id: column.id, disabled: isLocked, className: cn(theme.columnItem, isLocked && "bg-gray-50") },
+                React__default.createElement(Checkbox, { id: "column-checkbox-".concat(column.id), name: "column-".concat(column.id), value: column.id, checked: isVisible, onChange: function () { return handleToggleColumn(column.id); }, "aria-label": "Toggle visibility for ".concat(displayName, " column"), label: displayName, state: isLocked ? "disabled" : "default" })));
+        }))) : (columns.map(function (column) {
+            var isVisible = visibleColumns.includes(column.id);
+            var isLocked = column.locked === true;
+            var displayName = typeof column.header === "string" ? column.header : column.id;
+            return (React__default.createElement("div", { key: column.id, className: cn(theme.columnItem, isLocked && "bg-gray-50") },
+                React__default.createElement(Checkbox, { id: "column-checkbox-".concat(column.id), name: "column-".concat(column.id), value: column.id, checked: isVisible, onChange: function () { return handleToggleColumn(column.id); }, "aria-label": "Toggle visibility for ".concat(displayName, " column"), label: displayName, state: isLocked ? "disabled" : "default" })));
+        }))),
+        React__default.createElement("div", { className: theme.footer },
+            React__default.createElement(Button, { variant: "secondary", className: "w-full", onClick: handleResetToDefault }, "Reset to Default"))));
+};
+// Set display name for dev tools
+TableColumnManagerComponent.displayName = "TableColumnManager";
+// Memoize component to prevent unnecessary re-renders
+var TableColumnManager = React__default.memo(TableColumnManagerComponent);
+
+export { TableColumnManager };

package/dist/components/data-display/Table/components/TableColumnManager/TableColumnManager.theme.js

@@ -0,0 +1,21 @@
+var tableColumnManagerTheme = {
+    container: "w-64 z-50 p-3 overflow-hidden bg-white border border-border rounded-lg shadow-lg",
+    content: "space-y-3",
+    header: "text-xs uppercase font-bold mb-3 text-text-placeholder",
+    title: "text-sm font-medium text-text-primary",
+    description: "text-xs text-text-muted mt-1",
+    actions: "flex items-center gap-2 mb-3",
+    quickActionButton: "text-xs px-2 py-1 text-[var(--color-primary)] hover:text-[var(--color-primary)] hover:bg-[var(--color-primary-50)] rounded transition-colors",
+    quickActionButtonDisabled: "text-xs px-2 py-1 text-text-disabled cursor-not-allowed",
+    columnList: "space-y-2",
+    columnItem: "bg-white hover:bg-[var(--color-neutral-50)] rounded-lg p-1.5 transition-colors",
+    columnItemVisible: "bg-white hover:bg-[var(--color-neutral-50)] rounded-lg p-1.5",
+    checkbox: "",
+    columnLabel: "text-sm text-text-primary",
+    columnIcon: "w-4 h-4 text-text-muted",
+    footer: "mt-3 flex justify-end",
+    summary: "text-xs text-text-muted",
+    closeButton: "text-sm px-3 py-1.5 text-text-primary hover:bg-[var(--color-neutral-50)] rounded-md transition-colors",
+};
+
+export { tableColumnManagerTheme };

package/dist/components/data-display/Table/components/TablePagination/TablePagination.js

@@ -0,0 +1,51 @@
+import React__default from 'react';
+import Pagination from '../../../../core/Pagination/Pagination.js';
+import { Select } from '../../../../forms/Select/Select.js';
+import '../../../../forms/Select/Select.theme.js';
+import { cn } from '../../../../../utils/cn.js';
+import '../../../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ *
+ * @example
+ * <Table.Pagination
+ *   currentPage={currentPage}
+ *   totalItems={data.length}
+ *   pageSize={pageSize}
+ *   onPageChange={setCurrentPage}
+ *   onPageSizeChange={setPageSize}
+ *   pageSizeOptions={[10, 25, 50, 100]}
+ * />
+ */
+var TablePagination = function (_a) {
+    var currentPage = _a.currentPage, totalItems = _a.totalItems, pageSize = _a.pageSize, _b = _a.pageSizeOptions, pageSizeOptions = _b === void 0 ? [10, 25, 50, 100] : _b, onPageChange = _a.onPageChange, onPageSizeChange = _a.onPageSizeChange, _c = _a.showPageSizeSelector, showPageSizeSelector = _c === void 0 ? true : _c, className = _a.className;
+    var totalPages = Math.ceil(totalItems / pageSize);
+    var startItem = (currentPage - 1) * pageSize + 1;
+    var endItem = Math.min(currentPage * pageSize, totalItems);
+    // Create options for the Select component
+    var pageSizeSelectOptions = pageSizeOptions.map(function (option) { return ({
+        id: option,
+        label: option.toString(),
+        value: option,
+    }); });
+    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-4 py-3 border-t border-border bg-white", className) },
+        React__default.createElement("div", { className: "flex items-center gap-4" },
+            showPageSizeSelector && (React__default.createElement("div", { className: "flex items-center gap-2" },
+                React__default.createElement("span", { className: "text-sm text-text-muted" }, "Rows per page:"),
+                React__default.createElement(Select, { value: pageSize, onChange: function (value) { return onPageSizeChange(value); }, options: pageSizeSelectOptions, size: "sm", className: "w-20" }))),
+            React__default.createElement("div", { className: "text-sm text-text-muted" }, totalItems > 0 ? (React__default.createElement(React__default.Fragment, null,
+                "Showing ",
+                startItem.toLocaleString(),
+                " to ",
+                endItem.toLocaleString(),
+                " of",
+                " ",
+                totalItems.toLocaleString(),
+                " results")) : ("No results"))),
+        totalPages > 1 && (React__default.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))));
+};
+TablePagination.displayName = "Table.Pagination";
+
+export { TablePagination };

package/dist/components/data-display/Table/components/TableSelectionHeader/TableSelectionHeader.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import Button from '../../../../core/Button/Button.js';
+import { cn } from '../../../../../utils/cn.js';
+import '../../../../../node_modules/tslib/tslib.es6.js';
+import ForwardRef from '../../../../../node_modules/@heroicons/react/24/outline/esm/XMarkIcon.js';
+
+/**
+ * Selection header that appears when rows are selected
+ * Shows selection count and bulk action buttons
+ */
+var TableSelectionHeader = function (_a) {
+    var selectedCount = _a.selectedCount, totalCount = _a.totalCount, selectedRows = _a.selectedRows, _b = _a.bulkActions, bulkActions = _b === void 0 ? [] : _b, onClearSelection = _a.onClearSelection, className = _a.className;
+    if (selectedCount === 0)
+        return null;
+    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-neutral-50 z-10", className) },
+        React__default.createElement("div", { className: "flex items-center gap-3" },
+            React__default.createElement("span", { className: "text-text-muted text-sm border-r border-border pr-3" }, selectedCount === totalCount
+                ? "All ".concat(selectedCount, " selected")
+                : "".concat(selectedCount, " selected")),
+            bulkActions.length > 0 && (React__default.createElement("div", { className: "flex items-center gap-2" }, bulkActions.map(function (action) {
+                action.icon;
+                return (React__default.createElement(Button, { key: action.id, variant: "secondary", onClick: function () { return action.onClick(selectedRows); }, className: "text-text-secondary hover:text-text-primary", size: "sm" }, action.label));
+            })))),
+        React__default.createElement(Button, { variant: "link", onClick: onClearSelection, "aria-label": "Clear selection" },
+            React__default.createElement(ForwardRef, { className: "size-4" }),
+            "Clear")));
+};
+
+export { TableSelectionHeader, TableSelectionHeader as default };

package/dist/components/data-display/Table/components/core/TableBody.js

@@ -0,0 +1,32 @@
+import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { TableRow } from './TableRow.js';
+import { getRowId } from '../../Table.utils.js';
+
+function TableBodyComponent(_a) {
+    var data = _a.data, columns = _a.columns, rowKey = _a.rowKey, expandedRowRender = _a.expandedRowRender, _b = _a.expandedRows, expandedRows = _b === void 0 ? [] : _b, onExpandedRowsChange = _a.onExpandedRowsChange, selectable = _a.selectable, selectionType = _a.selectionType, _c = _a.selectedRows, selectedRows = _c === void 0 ? [] : _c, onSelectionChange = _a.onSelectionChange, freezeFirstColumn = _a.freezeFirstColumn, freezeLastColumn = _a.freezeLastColumn, theme = _a.theme;
+    var handleExpandChange = function (rowId, expanded) {
+        if (!onExpandedRowsChange)
+            return;
+        var newExpandedRows = expanded
+            ? __spreadArray(__spreadArray([], expandedRows, true), [rowId], false) : expandedRows.filter(function (id) { return id !== rowId; });
+        onExpandedRowsChange(newExpandedRows);
+    };
+    var handleSelectionChange = function (rowId, selected) {
+        if (!onSelectionChange)
+            return;
+        var newSelectedRows = selectionType === 'checkbox'
+            ? selected
+                ? __spreadArray(__spreadArray([], selectedRows, true), [rowId], false) : selectedRows.filter(function (id) { return id !== rowId; })
+            : selected ? [rowId] : [];
+        onSelectionChange(newSelectedRows);
+    };
+    return (React__default.createElement("tbody", null, data.map(function (row, index) {
+        var rowId = getRowId(row, index, rowKey);
+        return (React__default.createElement(TableRow, { key: rowId, row: row, rowId: rowId, columns: columns, expandedRowRender: expandedRowRender, isExpanded: expandedRows.includes(rowId), onExpandChange: function (expanded) { return handleExpandChange(rowId, expanded); }, selectable: selectable, selectionType: selectionType, isSelected: selectedRows.includes(rowId), onSelectionChange: function (selected) { return handleSelectionChange(rowId, selected); }, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }));
+    })));
+}
+// Export with proper type annotation
+var TableBody = TableBodyComponent;
+
+export { TableBody };

package/dist/components/data-display/Table/components/core/TableCell.js

@@ -0,0 +1,47 @@
+import React__default from 'react';
+import { cn } from '../../../../../utils/cn.js';
+import '../../../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Internal TableCell component used by the data-driven API
+ * Handles both header and data cells with proper theming and accessibility
+ *
+ * Features:
+ * - Dynamic cell type (th/td) based on isHeader prop
+ * - Frozen column support with visual indicators
+ * - Custom cell rendering via column.cell function
+ * - Tooltip support for truncated content
+ * - Alignment and width customization
+ * - Full accessibility with proper ARIA attributes
+ *
+ * @internal This component is used internally by the Table component
+ */
+function TableCellComponent(_a) {
+    var column = _a.column, row = _a.row; _a.rowId; var _b = _a.isHeader, isHeader = _b === void 0 ? false : _b, _c = _a.isFrozen, isFrozen = _c === void 0 ? false : _c, _d = _a.isLastFrozen, isLastFrozen = _d === void 0 ? false : _d, theme = _a.theme, children = _a.children;
+    var Cell = isHeader ? 'th' : 'td';
+    // For header cells, render the column header content
+    if (isHeader) {
+        var cellClasses_1 = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), column.align && "text-".concat(column.align));
+        return (React__default.createElement(Cell, { className: cellClasses_1, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, role: "columnheader", "aria-label": typeof column.header === 'string' ? column.header : column.id }, children || column.header));
+    }
+    // For data cells, extract value using accessor (string key or function)
+    var value = typeof column.accessor === 'function'
+        ? column.accessor(row)
+        : row[column.accessor];
+    // Use custom cell renderer if provided, otherwise display raw value
+    var content = column.cell ? column.cell(row) : value;
+    // Generate tooltip content if tooltip is enabled
+    var tooltipContent = typeof column.tooltip === 'function'
+        ? column.tooltip(row)
+        : column.tooltip
+            ? String(value)
+            : undefined;
+    var cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), column.align && "text-".concat(column.align), column.ellipsis && 'truncate');
+    return (React__default.createElement(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, title: tooltipContent, role: "cell" }, children || content));
+}
+// Set display name for dev tools
+TableCellComponent.displayName = 'TableCell';
+// Memoize component to prevent unnecessary re-renders when props haven't changed
+var TableCell = React__default.memo(TableCellComponent);
+
+export { TableCell };

package/dist/components/data-display/Table/components/core/TableHeader.js

@@ -0,0 +1,77 @@
+import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { TableCell } from './TableCell.js';
+import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
+import { getRowId } from '../../Table.utils.js';
+
+function TableHeaderComponent(_a) {
+    var columns = _a.columns, _b = _a.sortConfig, sortConfig = _b === void 0 ? [] : _b, onSortChange = _a.onSortChange; _a.filterConfig; _a.onFilterChange; var freezeHeader = _a.freezeHeader, freezeFirstColumn = _a.freezeFirstColumn, freezeLastColumn = _a.freezeLastColumn, expandable = _a.expandable, expandedRowRender = _a.expandedRowRender, selectable = _a.selectable, selectionType = _a.selectionType, _d = _a.selectedRows, selectedRows = _d === void 0 ? [] : _d, onSelectionChange = _a.onSelectionChange; _a.totalRowCount; var theme = _a.theme, _f = _a.data, data = _f === void 0 ? [] : _f, rowKey = _a.rowKey;
+    var handleSort = function (columnId) {
+        if (!onSortChange)
+            return;
+        var currentSort = sortConfig.find(function (sort) { return sort.columnId === columnId; });
+        var newSortConfig = __spreadArray([], sortConfig.filter(function (sort) { return sort.columnId !== columnId; }), true);
+        if (!currentSort) {
+            // Add new sort
+            newSortConfig.push({
+                columnId: columnId,
+                direction: 'asc',
+                priority: sortConfig.length + 1,
+            });
+        }
+        else if (currentSort.direction === 'asc') {
+            // Change to desc
+            newSortConfig.push({
+                columnId: columnId,
+                direction: 'desc',
+                priority: currentSort.priority,
+            });
+        }
+        // If desc, remove sort
+        onSortChange(newSortConfig);
+    };
+    var handleSelectAll = function (checked) {
+        if (!onSelectionChange || selectionType !== 'checkbox')
+            return;
+        if (checked) {
+            // Select all rows - generate row IDs using the same logic as TableBody
+            var allRowIds = data.map(function (row, index) { return getRowId(row, index, rowKey); });
+            onSelectionChange(allRowIds);
+        }
+        else {
+            // Deselect all
+            onSelectionChange([]);
+        }
+    };
+    // Calculate select all checkbox state
+    var dataLength = data.length;
+    var isAllSelected = selectedRows.length === dataLength && dataLength > 0;
+    var isIndeterminate = selectedRows.length > 0 && selectedRows.length < dataLength;
+    return (React__default.createElement("thead", { className: freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '' },
+        React__default.createElement("tr", null,
+            selectable && (React__default.createElement(TableCell, { column: {
+                    id: 'selection',
+                    header: '',
+                    accessor: function () { return ''; },
+                    width: '48px',
+                    align: 'center'
+                }, row: {}, rowId: "", isHeader: true, theme: theme }, selectionType === 'checkbox' && (React__default.createElement(Checkbox, { id: "table-select-all", name: "table-select-all", value: "select-all", checked: isAllSelected, indeterminate: isIndeterminate, onChange: handleSelectAll, "aria-label": "Select all rows" })))),
+            expandable && expandedRowRender && (React__default.createElement(TableCell, { column: {
+                    id: 'expand',
+                    header: '',
+                    accessor: function () { return ''; },
+                    width: '48px',
+                    align: 'center'
+                }, row: {}, rowId: "", isHeader: true, theme: theme })),
+            columns.map(function (column, index) {
+                var currentSort = sortConfig.find(function (sort) { return sort.columnId === column.id; });
+                var isSortable = column.sortable && onSortChange;
+                return (React__default.createElement(TableCell, { key: column.id, column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme }, isSortable ? (React__default.createElement("button", { onClick: function () { return handleSort(column.id); }, className: "flex items-center gap-1 w-full text-left hover:text-primary-600 transition-colors", "aria-label": "Sort by ".concat(typeof column.header === 'string' ? column.header : column.id) },
+                    column.header,
+                    currentSort && (React__default.createElement("span", { className: "text-xs" }, currentSort.direction === 'asc' ? '↑' : '↓')))) : (column.header)));
+            }))));
+}
+// Export with proper type annotation
+var TableHeader = TableHeaderComponent;
+
+export { TableHeader };

package/dist/components/data-display/Table/components/core/TableRow.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { TableCell } from './TableCell.js';
+import Button from '../../../../core/Button/Button.js';
+import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
+import { Radio } from '../../../../forms/Radio/Radio.js';
+import ForwardRef from '../../../../../node_modules/@heroicons/react/24/outline/esm/MinusIcon.js';
+import ForwardRef$1 from '../../../../../node_modules/@heroicons/react/24/outline/esm/PlusIcon.js';
+
+function TableRowComponent(_a) {
+    var row = _a.row, rowId = _a.rowId, columns = _a.columns, expandedRowRender = _a.expandedRowRender, _b = _a.isExpanded, isExpanded = _b === void 0 ? false : _b, onExpandChange = _a.onExpandChange, selectable = _a.selectable, selectionType = _a.selectionType, _c = _a.isSelected, isSelected = _c === void 0 ? false : _c, onSelectionChange = _a.onSelectionChange, freezeFirstColumn = _a.freezeFirstColumn, freezeLastColumn = _a.freezeLastColumn, theme = _a.theme;
+    var rowClasses = [
+        (theme === null || theme === void 0 ? void 0 : theme.rowStyle) || "",
+        isSelected ? (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle) || "" : ""
+    ].filter(Boolean).join(" ");
+    var handleExpandClick = function (e) {
+        e.stopPropagation();
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!isExpanded);
+    };
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("tr", { className: rowClasses, "data-selected": isSelected, role: "row", "aria-selected": selectable ? isSelected : undefined, "aria-expanded": Boolean(expandedRowRender) ? isExpanded : undefined },
+            selectable && (React__default.createElement(TableCell, { column: {
+                    id: 'selection',
+                    header: '',
+                    accessor: function () { return ''; },
+                    width: '48px',
+                    align: 'center'
+                }, row: row, rowId: rowId, theme: theme }, selectionType === "checkbox" ? (React__default.createElement(Checkbox, { id: "table-checkbox-".concat(rowId), name: "table-selection-".concat(rowId), value: String(rowId), checked: isSelected, onChange: function (checked) { return onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked); }, onClick: function (e) { return e.stopPropagation(); }, "aria-label": "Select row" })) : (React__default.createElement("div", { onClick: function (e) { return e.stopPropagation(); } },
+                React__default.createElement(Radio, { id: "table-radio-".concat(rowId), name: "table-selection", value: String(rowId), checked: isSelected, onChange: function (checked) { return onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked); }, "aria-label": "Select row" }))))),
+            expandedRowRender && (React__default.createElement(TableCell, { column: {
+                    id: 'expand',
+                    header: '',
+                    accessor: function () { return ''; },
+                    width: '48px',
+                    align: 'center'
+                }, row: row, rowId: rowId, theme: theme },
+                React__default.createElement(Button, { variant: "clear", size: "sm", onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row" }, isExpanded ? React__default.createElement(ForwardRef, { className: "w-4 h-4", strokeWidth: 2 }) : React__default.createElement(ForwardRef$1, { className: "w-4 h-4", strokeWidth: 2 })))),
+            columns.map(function (column, index) { return (React__default.createElement(TableCell, { key: column.id, column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme })); })),
+        isExpanded && expandedRowRender && (React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: columns.length +
+                    (selectable ? 1 : 0) +
+                    1 }, expandedRowRender(row))))));
+}
+// Export with proper type annotation
+var TableRow = TableRowComponent;
+
+export { TableRow };

package/dist/components/data-display/Table/index.js

@@ -0,0 +1,20 @@
+import Table$1 from './Table.js';
+import { HeaderCell, Cell, Row, Body, Header } from './components/DeclarativeComponents.js';
+import { TableActions } from './components/TableActions/TableActions.js';
+import 'react';
+import '../../../node_modules/tslib/tslib.es6.js';
+import { TablePagination } from './components/TablePagination/TablePagination.js';
+
+// First import the Table component itself
+// Create a compound component by attaching the subcomponents
+var Table = Object.assign(Table$1, {
+    Header: Header,
+    Body: Body,
+    Row: Row,
+    Cell: Cell,
+    HeaderCell: HeaderCell,
+    Actions: TableActions,
+    Pagination: TablePagination
+});
+
+export { Table, TableActions, TablePagination, Table as default };

package/dist/components/feedback/Alert/Alert.js

@@ -0,0 +1,36 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { alertTheme } from './Alert.theme.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/XCircleIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/solid/esm/ExclamationTriangleIcon.js';
+import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/solid/esm/CheckCircleIcon.js';
+import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/solid/esm/InformationCircleIcon.js';
+import ForwardRef$4 from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
+
+var variantIcons = {
+    info: ForwardRef$3,
+    success: ForwardRef$2,
+    warning: ForwardRef$1,
+    error: ForwardRef,
+};
+var Alert = React__default.forwardRef(function (_a, ref) {
+    var _b;
+    var _c = _a.variant, variant = _c === void 0 ? 'info' : _c, title = _a.title, description = _a.description, _d = _a.dismissible, dismissible = _d === void 0 ? false : _d, icon = _a.icon, _e = _a.showIcon, showIcon = _e === void 0 ? true : _e, onDismiss = _a.onDismiss, className = _a.className, _f = _a.theme, customTheme = _f === void 0 ? {} : _f, children = _a.children, props = __rest(_a, ["variant", "title", "description", "dismissible", "icon", "showIcon", "onDismiss", "className", "theme", "children"]);
+    var IconComponent = variantIcons[variant];
+    var handleDismiss = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    var hasContent = title || description || children;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(alertTheme.baseStyle, alertTheme.variants[variant], customTheme.baseStyle, (_b = customTheme.variants) === null || _b === void 0 ? void 0 : _b[variant], className), role: "alert" }, props),
+        showIcon && (React__default.createElement("div", { className: cn(alertTheme.iconStyle, customTheme.iconStyle) }, icon || React__default.createElement(IconComponent, { className: "w-5 h-5" }))),
+        hasContent && (React__default.createElement("div", { className: cn(alertTheme.contentStyle, customTheme.contentStyle) },
+            title && (React__default.createElement("div", { className: cn(alertTheme.titleStyle, customTheme.titleStyle) }, title)),
+            description && (React__default.createElement("div", { className: cn(alertTheme.descriptionStyle, customTheme.descriptionStyle) }, description)),
+            children && (React__default.createElement("div", { className: cn(alertTheme.childrenStyle, customTheme.childrenStyle) }, children)))),
+        dismissible && (React__default.createElement("button", { type: "button", className: cn(alertTheme.closeButtonStyle, customTheme.closeButtonStyle), onClick: handleDismiss, "aria-label": "Dismiss alert" },
+            React__default.createElement(ForwardRef$4, { className: "w-5 h-5" })))));
+});
+Alert.displayName = 'Alert';
+
+export { Alert };

package/dist/components/feedback/Alert/Alert.theme.js

@@ -0,0 +1,17 @@
+var alertTheme = {
+    baseStyle: 'relative flex items-start gap-3 rounded-lg border px-4 py-3',
+    variants: {
+        info: 'bg-[var(--color-primary-50)] border-[var(--color-primary-200)] text-[var(--color-primary-900)]',
+        success: 'bg-[var(--color-success-50)] border-[var(--color-success-200)] text-[var(--color-success-900)]',
+        warning: 'bg-[var(--color-warning-50)] border-[var(--color-warning-200)] text-[var(--color-warning-900)]',
+        error: 'bg-[var(--color-danger-50)] border-[var(--color-danger-200)] text-[var(--color-danger-900)]',
+    },
+    iconStyle: 'flex-shrink-0 w-5 h-5 mt-0.5',
+    contentStyle: 'flex-1 min-w-0',
+    titleStyle: 'font-medium text-sm',
+    descriptionStyle: 'text-sm mt-1 opacity-90',
+    childrenStyle: 'mt-1',
+    closeButtonStyle: 'absolute top-3 right-3 flex-shrink-0 w-5 h-5 opacity-70 hover:opacity-100 transition-opacity cursor-pointer',
+};
+
+export { alertTheme };

package/dist/components/feedback/ChatMessage/ChatMessage.js

@@ -0,0 +1,26 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formatTimestamp } from '../../../utils/dateUtils.js';
+import { chatMessageTheme } from './ChatMessage.theme.js';
+import { Avatar } from '../../core/Avatar/Avatar.js';
+
+var ChatMessage = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.variant, variant = _b === void 0 ? 'receiver' : _b, message = _a.message, timestamp = _a.timestamp, avatar = _a.avatar, _c = _a.showTimestamp, showTimestamp = _c === void 0 ? true : _c, className = _a.className, _d = _a.theme, customTheme = _d === void 0 ? {} : _d, props = __rest(_a, ["variant", "message", "timestamp", "avatar", "showTimestamp", "className", "theme"]);
+    var isReceiver = variant === 'receiver';
+    var containerStyle = isReceiver ? chatMessageTheme.receiverContainerStyle : chatMessageTheme.senderContainerStyle;
+    var bubbleVariantStyle = isReceiver ? chatMessageTheme.receiverBubbleStyle : chatMessageTheme.senderBubbleStyle;
+    var timestampStyle = isReceiver ? chatMessageTheme.receiverTimestampStyle : chatMessageTheme.senderTimestampStyle;
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(chatMessageTheme.baseStyle, customTheme.baseStyle, className) }, props),
+        React__default.createElement("div", { className: cn(containerStyle, isReceiver ? customTheme.receiverContainerStyle : customTheme.senderContainerStyle) },
+            avatar && (React__default.createElement("div", { className: cn(chatMessageTheme.avatarContainerStyle, customTheme.avatarContainerStyle) },
+                React__default.createElement(Avatar, { src: avatar.src, alt: avatar.alt, fallback: avatar.fallback, size: "sm" }))),
+            React__default.createElement("div", { className: cn(chatMessageTheme.messageContainerStyle, customTheme.messageContainerStyle) },
+                React__default.createElement("div", { className: cn(chatMessageTheme.bubbleBaseStyle, bubbleVariantStyle, customTheme.bubbleBaseStyle, isReceiver ? customTheme.receiverBubbleStyle : customTheme.senderBubbleStyle) },
+                    React__default.createElement("p", { className: cn(chatMessageTheme.messageTextStyle, customTheme.messageTextStyle) }, message)),
+                showTimestamp && (React__default.createElement("div", { className: cn(timestampStyle, isReceiver ? customTheme.receiverTimestampStyle : customTheme.senderTimestampStyle) },
+                    React__default.createElement("time", { dateTime: typeof timestamp === 'string' ? timestamp : timestamp.toISOString(), className: cn(chatMessageTheme.timeStyle, customTheme.timeStyle) }, formatTimestamp(timestamp))))))));
+});
+ChatMessage.displayName = 'ChatMessage';
+
+export { ChatMessage };

package/dist/components/feedback/ChatMessage/ChatMessage.theme.js

@@ -0,0 +1,16 @@
+var chatMessageTheme = {
+    baseStyle: 'w-full max-w-full',
+    avatarContainerStyle: 'flex-shrink-0',
+    messageContainerStyle: 'flex flex-col min-w-0 flex-1',
+    bubbleBaseStyle: 'max-w-[80%] sm:max-w-[70%] rounded-3xl px-5 py-4 w-fit border-t-[0.5px] ring-1',
+    messageTextStyle: 'break-words text-base',
+    timeStyle: 'select-none',
+    senderContainerStyle: 'flex flex-row-reverse items-end gap-4',
+    senderBubbleStyle: 'bg-gradient-to-br from-primary-600 to-primary-700 text-white rounded-br-xs ml-auto ring-[var(--color-primary)] border-white/30',
+    senderTimestampStyle: 'text-xs text-gray-500 mt-1 text-right pr-1',
+    receiverContainerStyle: 'flex items-end gap-4',
+    receiverBubbleStyle: 'bg-gray-100 text-text-primary rounded-bl-xs shadow-black/10 ring-gray-100 border-white',
+    receiverTimestampStyle: 'text-xs text-text-placeholder mt-1 text-left pl-1',
+};
+
+export { chatMessageTheme };

package/dist/components/feedback/Empty/Empty.js

@@ -0,0 +1,26 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { emptyTheme } from './Empty.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var Empty = React__default.forwardRef(function (_a, ref) {
+    var title = _a.title, description = _a.description, image = _a.image, imageAlt = _a.imageAlt, icon = _a.icon, action = _a.action, className = _a.className, children = _a.children, props = __rest(_a, ["title", "description", "image", "imageAlt", "icon", "action", "className", "children"]);
+    // Fixed image and icon dimensions
+    var imageDimensions = "size-32";
+    var iconDimensions = "size-16";
+    // If children are provided, render them instead of the default layout
+    if (children) {
+        return (React__default.createElement("div", __assign({ ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state" }, props), children));
+    }
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(emptyTheme.baseStyle, className), role: "region", "aria-label": "Empty state" }, props),
+        image ? (React__default.createElement("div", { className: "flex-shrink-0 mb-6" },
+            React__default.createElement("img", { src: image, alt: imageAlt || "Empty state illustration", className: cn("mx-auto object-cover", imageDimensions), loading: "lazy" }))) : icon ? (React__default.createElement("div", { className: cn("flex-shrink-0 mx-auto text-text-muted mb-6", iconDimensions), "aria-hidden": "true" }, icon)) : null,
+        React__default.createElement("div", { className: "flex flex-col items-center justify-center gap-1" },
+            title && React__default.createElement("div", { className: emptyTheme.titleStyle }, title),
+            description && (React__default.createElement("div", { className: emptyTheme.descriptionStyle }, description))),
+        action && (React__default.createElement("div", { className: "flex flex-col sm:flex-row gap-2 justify-center items-center mt-6" }, action))));
+});
+// Set display name for dev tools and Storybook
+Empty.displayName = "Empty";
+
+export { Empty as default };

package/dist/components/feedback/Empty/Empty.theme.js

@@ -0,0 +1,13 @@
+/**
+ * Default theme for the Empty component
+ */
+var emptyTheme = {
+    // Base container styles - customizable spacing, colors, and layout
+    baseStyle: "flex flex-col items-center justify-center text-center w-full max-w-md mx-auto space-y-4 py-12 px-6 ",
+    // Title text styles - customizable typography and colors
+    titleStyle: "text-base font-semibold text-text-primary",
+    // Description text styles - customizable typography and colors  
+    descriptionStyle: "text-base text-text-secondary/70",
+};
+
+export { emptyTheme };

package/dist/components/feedback/Notification/Notification.js

@@ -0,0 +1,41 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { notificationTheme } from './Notification.theme.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/solid/esm/XMarkIcon.js';
+
+var Notification = React__default.forwardRef(function (_a, ref) {
+    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, title = _a.title, description = _a.description, avatar = _a.avatar, icon = _a.icon, actions = _a.actions, onDismiss = _a.onDismiss, className = _a.className, children = _a.children, props = __rest(_a, ["variant", "title", "description", "avatar", "icon", "actions", "onDismiss", "className", "children"]);
+    var handleDismiss = function () {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+    };
+    var variantTheme = notificationTheme.variants[variant];
+    var renderIconOrAvatar = function () {
+        if (avatar) {
+            return (React__default.createElement("div", { className: "flex-shrink-0 w-10 h-10 rounded-full" }, avatar));
+        }
+        // icon={null} means hide icon completely
+        if (icon === null) {
+            return null;
+        }
+        // Use custom icon if provided, otherwise use variant's default icon
+        var IconToRender = icon || variantTheme.defaultIcon;
+        return (React__default.createElement("div", { className: "flex-shrink-0 w-6 h-6 mt-1" }, React__default.isValidElement(IconToRender)
+            ? IconToRender
+            : React__default.createElement(IconToRender, {
+                className: cn("w-6 h-6", variantTheme.iconColor)
+            })));
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn(notificationTheme.baseStyle, variantTheme.containerStyle, className), role: "alert" }, props),
+        renderIconOrAvatar(),
+        React__default.createElement("div", { className: "flex-1 min-w-0 ".concat(onDismiss ? 'mr-5' : '') },
+            React__default.createElement("div", { className: cn(notificationTheme.titleStyle, variantTheme.titleColor) }, title),
+            description && (React__default.createElement("div", { className: notificationTheme.descriptionStyle }, description)),
+            children && (React__default.createElement("div", { className: "mt-2" }, children)),
+            actions && (React__default.createElement("div", { className: "flex items-center gap-2 mt-6" }, actions))),
+        onDismiss && (React__default.createElement("button", { type: "button", className: "absolute top-3 right-3 flex-shrink-0 size-5 text-text-muted hover:text-text-primary transition-colors cursor-pointer", onClick: handleDismiss, "aria-label": "Dismiss notification" },
+            React__default.createElement(ForwardRef, { className: "size-4" })))));
+});
+Notification.displayName = 'Notification';
+
+export { Notification };