flikkui 0.1.0-beta.11

package/dist/components/core/Table/components/TablePagination/TablePagination.js

@@ -0,0 +1,51 @@
+import React__default from 'react';
+import { Pagination } from '../../../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-[var(--color-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-[var(--color-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/core/Table/components/TablePagination/TablePagination.types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * TablePagination component props for seamless integration with Table component
+ */
+export interface TablePaginationProps {
+    /** Current active page number (1-based) */
+    currentPage: number;
+    /** Total number of items across all pages */
+    totalItems: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Whether to show the page size selector */
+    showPageSizeSelector?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}

package/dist/components/core/Table/components/TablePagination/index.d.ts

@@ -0,0 +1,2 @@
+export { TablePagination } from "./TablePagination";
+export type { TablePaginationProps } from "./TablePagination.types";

package/dist/components/core/Table/components/TableSelectionHeader/TableSelectionHeader.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { BulkAction } from "../../Table.types";
+export interface TableSelectionHeaderProps {
+    selectedCount: number;
+    totalCount: number;
+    selectedRows: string[];
+    bulkActions?: BulkAction[];
+    onClearSelection: () => void;
+    className?: string;
+}
+/**
+ * Selection header that appears when rows are selected
+ * Shows selection count and bulk action buttons
+ */
+export declare const TableSelectionHeader: React.FC<TableSelectionHeaderProps>;

package/dist/components/core/Table/components/TableSelectionHeader/TableSelectionHeader.js

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { Button } from '../../../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-[var(--color-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, color: "neutral", variant: "filled", onClick: function () { return action.onClick(selectedRows); }, className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm" }, action.label));
+            })))),
+        React__default.createElement(Button, { color: "primary", variant: "link", onClick: onClearSelection, "aria-label": "Clear selection" },
+            React__default.createElement(ForwardRef, { className: "size-4" }),
+            "Clear")));
+};
+
+export { TableSelectionHeader };

package/dist/components/core/Table/components/TableSelectionHeader/index.d.ts

@@ -0,0 +1,3 @@
+export { TableSelectionHeader } from './TableSelectionHeader';
+export type { TableSelectionHeaderProps } from './TableSelectionHeader';
+export type { BulkAction } from '../../Table.types';

package/dist/components/core/Table/components/core/TableBody.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InternalTableBodyProps } from '../../Table.types';
+export declare const TableBody: <T extends Record<string, any>>(props: InternalTableBodyProps<T>) => React.ReactElement;

package/dist/components/core/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/core/Table/components/core/TableCell.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { InternalTableCellProps } from '../../Table.types';
+/**
+ * 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
+ */
+declare function TableCellComponent<T extends Record<string, any>>({ column, row, rowId, isHeader, isFrozen, isLastFrozen, theme, children, }: InternalTableCellProps<T>): React.ReactElement;
+declare namespace TableCellComponent {
+    var displayName: string;
+}
+export declare const TableCell: typeof TableCellComponent;
+export {};

package/dist/components/core/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/core/Table/components/core/TableHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InternalTableHeaderProps } from '../../Table.types';
+export declare const TableHeader: <T extends Record<string, any>>(props: InternalTableHeaderProps<T>) => React.ReactElement;

package/dist/components/core/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/core/Table/components/core/TableRow.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InternalTableRowProps } from "../../Table.types";
+export declare const TableRow: <T extends Record<string, any>>(props: InternalTableRowProps<T>) => React.ReactElement;

package/dist/components/core/Table/components/core/TableRow.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { TableCell } from './TableCell.js';
+import { Button } from '../../../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, { color: "primary", variant: "ghost", 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/core/Table/components/core/index.d.ts

@@ -0,0 +1,4 @@
+export { TableHeader } from './TableHeader';
+export { TableBody } from './TableBody';
+export { TableRow } from './TableRow';
+export { TableCell } from './TableCell';

package/dist/components/core/Table/index.d.ts

@@ -0,0 +1,20 @@
+import { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction } from './Table.types';
+import { TableActions } from './components/TableActions/TableActions';
+import { TableActionsMenu } from './components/TableActions/TableActionsMenu';
+import { TablePagination } from './components/TablePagination';
+import { ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps } from './components/TableActions/TableActions.types';
+import { TablePaginationProps } from './components/TablePagination/TablePagination.types';
+interface TableCompound {
+    <T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
+    Header: React.FC<TableHeaderProps>;
+    Body: React.FC<TableBodyProps>;
+    Row: React.FC<TableRowProps>;
+    Cell: React.FC<TableCellProps>;
+    HeaderCell: React.FC<TableHeaderCellProps>;
+    Actions: typeof TableActions;
+    Pagination: React.FC<TablePaginationProps>;
+}
+declare const Table: TableCompound;
+export { Table };
+export type { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, };
+export { TableActions, TableActionsMenu, TablePagination };

package/dist/components/core/Table/index.js

@@ -0,0 +1,20 @@
+import { Table as 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 };

package/dist/components/core/Tabs/Tabs.animations.d.ts

@@ -0,0 +1,23 @@
+import { Variants, Transition } from "motion/react";
+/**
+ * Get Tabs trigger animation variants based on reduced motion preference
+ * Provides subtle micro-interactions for enhanced UX while respecting accessibility
+ */
+export declare const getTabsTriggerVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;
+/**
+ * Underline position interface for type safety
+ */
+export interface UnderlinePosition {
+    left: number;
+    width: number;
+}
+/**
+ * Get underline transition configuration based on reduced motion preference
+ * Uses spring animation for natural, fluid movement between tabs
+ */
+export declare const getUnderlineTransition: (shouldReduceMotion: boolean | null) => Transition;
+/**
+ * Get TabsContent animation variants for directional fade animations
+ * Provides smooth fade-in from bottom and fade-out to top transitions
+ */
+export declare const getTabsContentVariants: (shouldReduceMotion: boolean | null) => Variants | undefined;

package/dist/components/core/Tabs/Tabs.animations.js

@@ -0,0 +1,86 @@
+/**
+ * Get Tabs trigger animation variants based on reduced motion preference
+ * Provides subtle micro-interactions for enhanced UX while respecting accessibility
+ */
+var getTabsTriggerVariants = function (shouldReduceMotion) {
+    return (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false)
+        ? undefined
+        : {
+            tap: {
+                scale: 0.98,
+                transition: {
+                    duration: 0.1,
+                    type: "spring",
+                    stiffness: 400,
+                    damping: 12,
+                },
+            },
+            hover: {
+                scale: 1.02,
+                transition: {
+                    duration: 0.2,
+                    type: "spring",
+                    stiffness: 300,
+                    damping: 15,
+                },
+            },
+        };
+};
+/**
+ * Get underline transition configuration based on reduced motion preference
+ * Uses spring animation for natural, fluid movement between tabs
+ */
+var getUnderlineTransition = function (shouldReduceMotion) {
+    if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
+        // Reduced motion: instant transition
+        return {
+            duration: 0,
+        };
+    }
+    // Full motion: smooth spring transition
+    return {
+        type: "spring",
+        stiffness: 300,
+        damping: 30,
+        mass: 0.8,
+        restDelta: 0.1,
+    };
+};
+/**
+ * Get TabsContent animation variants for directional fade animations
+ * Provides smooth fade-in from bottom and fade-out to top transitions
+ */
+var getTabsContentVariants = function (shouldReduceMotion) {
+    if (shouldReduceMotion !== null && shouldReduceMotion !== void 0 ? shouldReduceMotion : false) {
+        // Reduced motion: no animation variants
+        return undefined;
+    }
+    // Full motion: directional fade animations
+    return {
+        initial: {
+            opacity: 0,
+            y: 10, // Start below natural position
+        },
+        animate: {
+            opacity: 1,
+            y: 0, // Move to natural position
+            transition: {
+                duration: 0.3,
+                type: "spring",
+                stiffness: 200,
+                damping: 25,
+                mass: 0.8,
+            },
+        },
+        exit: {
+            opacity: 0,
+            y: -10, // Exit slightly upward
+            transition: {
+                duration: 0.2,
+                ease: "easeIn",
+            },
+        },
+    };
+};
+
+export { getTabsContentVariants, getTabsTriggerVariants, getUnderlineTransition };

package/dist/components/core/Tabs/Tabs.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { TabsProps } from "./Tabs.types";
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {
+    List: React.ForwardRefExoticComponent<import("./Tabs.types").TabsListProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<import("./Tabs.types").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<import("./Tabs.types").TabsContentProps & React.RefAttributes<HTMLDivElement>>;
+};

package/dist/components/core/Tabs/Tabs.js

@@ -0,0 +1,92 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useCallback, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tabsTheme } from './Tabs.theme.js';
+import { TabsContext } from './TabsContext.js';
+import { TabsList } from './TabsList.js';
+import { TabsTrigger } from './TabsTrigger.js';
+import { TabsContent } from './TabsContent.js';
+
+/**
+ * Tabs component for organizing content into separate views
+ * Uses compound component pattern with Tabs.List, Tabs.Trigger, and Tabs.Content
+ * Supports optional Framer Motion animations and comprehensive accessibility
+ */
+var TabsComponent = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, _b = _a.orientation, orientation = _b === void 0 ? "horizontal" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, children = _a.children, className = _a.className, props = __rest(_a, ["value", "defaultValue", "onValueChange", "orientation", "size", "disabled", "children", "className"]);
+    var _e = useState(value || defaultValue || ""), currentValue = _e[0], setCurrentValue = _e[1];
+    // Track trigger elements for underline positioning
+    var triggerRefs = useRef(new Map());
+    // Handle controlled vs uncontrolled
+    var isControlled = value !== undefined;
+    var activeValue = isControlled ? value : currentValue;
+    // Dev-time warnings for common issues
+    if (process.env.NODE_ENV !== 'production') {
+        // Warn if no defaultValue or value provided and no active tab will be selected
+        if (!value && !defaultValue && currentValue === "") {
+            // eslint-disable-next-line no-console
+            console.warn("Tabs: No 'value' or 'defaultValue' provided. Consider providing at least 'defaultValue' for initial tab selection.");
+        }
+        // Warn if both controlled and uncontrolled props are provided
+        if (value !== undefined && defaultValue !== undefined) {
+            // eslint-disable-next-line no-console
+            console.warn("Tabs: Both 'value' and 'defaultValue' provided. Component will be controlled (value takes precedence).");
+        }
+        // Warn if controlled but no onValueChange handler
+        if (isControlled && !onValueChange) {
+            // eslint-disable-next-line no-console
+            console.warn("Tabs: 'value' prop provided but no 'onValueChange' handler. Tabs will not be interactive.");
+        }
+    }
+    // Safe value change handler with error handling
+    var handleValueChange = useCallback(function (newValue) {
+        try {
+            if (!isControlled) {
+                setCurrentValue(newValue);
+            }
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+        }
+        catch (error) {
+            if (process.env.NODE_ENV !== 'production') {
+                // eslint-disable-next-line no-console
+                console.error("Error in tabs value change handler:", error);
+            }
+        }
+    }, [isControlled, onValueChange]);
+    // Register and unregister trigger elements for underline positioning
+    var registerTrigger = useCallback(function (triggerValue, element) {
+        triggerRefs.current.set(triggerValue, element);
+    }, []);
+    var unregisterTrigger = useCallback(function (triggerValue) {
+        triggerRefs.current.delete(triggerValue);
+    }, []);
+    // Memoize context value to prevent unnecessary re-renders
+    var contextValue = useMemo(function () { return ({
+        value: activeValue,
+        onValueChange: handleValueChange,
+        orientation: orientation,
+        size: size,
+        disabled: disabled,
+        registerTrigger: registerTrigger,
+        unregisterTrigger: unregisterTrigger,
+    }); }, [activeValue, handleValueChange, orientation, size, disabled, registerTrigger, unregisterTrigger]);
+    // Memoize theme classes for performance
+    var themeClasses = useMemo(function () { return ({
+        baseStyle: tabsTheme.baseStyle,
+        disabledStyle: disabled ? "opacity-50 cursor-not-allowed pointer-events-none" : "",
+    }); }, [disabled]);
+    return (React__default.createElement(TabsContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: ref, className: cn(themeClasses.baseStyle, themeClasses.disabledStyle, className // User overrides take precedence
+            ), "data-orientation": orientation, "data-size": size, "data-disabled": disabled, role: "tablist" // Add semantic role for screen readers
+            , "aria-orientation": orientation }, props), children)));
+});
+// Set display name for dev tools and Storybook
+TabsComponent.displayName = "Tabs";
+// Create compound component with proper typing
+var Tabs = Object.assign(TabsComponent, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Content: TabsContent,
+});
+
+export { Tabs };