flikkui 0.1.0-beta.9 → 0.2.0-beta.2

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

@@ -0,0 +1,268 @@
+import { ReactNode } from 'react';
+/**
+ * Defines bulk actions available when rows are selected
+ */
+export interface BulkAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Display label for the action button */
+    label: string;
+    /** Optional icon component to display in the action button */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Visual style variant for the action button */
+    variant?: 'primary' | 'secondary' | 'danger';
+    /** Callback function when action is triggered with selected row IDs */
+    onClick: (selectedRows: string[]) => void;
+}
+/** Table visual variants for different styling approaches */
+export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+/** Text alignment options for table cells and headers */
+export type TableAlignment = 'left' | 'center' | 'right';
+/** Selection control types for row selection */
+export type SelectionType = 'checkbox' | 'radio';
+/**
+ * Column definition for table data display and behavior
+ */
+export interface Column<T = any> {
+    /** Unique identifier for the column */
+    id: string;
+    /** Header content - can be string or React element */
+    header: string | ReactNode;
+    /** Property key or function to extract cell data from row object */
+    accessor: keyof T | ((row: T) => any);
+    /** Optional custom renderer for cell content */
+    cell?: (row: T) => ReactNode;
+    /** Enable sorting for this column */
+    sortable?: boolean;
+    /** Enable filtering for this column */
+    filterable?: boolean;
+    /** Truncate long content with ellipsis */
+    ellipsis?: boolean;
+    /** Show tooltip on hover - boolean or function returning tooltip text */
+    tooltip?: boolean | ((row: T) => string);
+    /** Fixed width for the column */
+    width?: string | number;
+    /** Text alignment for column content */
+    align?: TableAlignment;
+    /** Whether column is hidden by default */
+    hidden?: boolean;
+    /** Whether column is locked and cannot be hidden or reordered */
+    locked?: boolean;
+}
+/**
+ * Configuration for column sorting state
+ */
+export interface SortConfig {
+    /** ID of the column being sorted */
+    columnId: string;
+    /** Sort direction - ascending or descending */
+    direction: 'asc' | 'desc';
+    /** Priority for multi-column sorting (lower numbers = higher priority) */
+    priority: number;
+}
+/**
+ * Configuration for column filtering state
+ */
+export interface FilterConfig {
+    /** ID of the column being filtered */
+    columnId: string;
+    /** Filter value - type depends on column data type */
+    value: any;
+}
+export interface TableThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<TableVariant, string>>;
+    headerStyle?: string;
+    cellStyle?: string;
+    rowStyle?: string;
+    selectedRowStyle?: string;
+    hoverRowStyle?: string;
+    frozenColumnStyle?: string;
+    lastFrozenColumnStyle?: string;
+    frozenHeaderStyle?: string;
+    bodyStyle?: string;
+    headerContainerStyle?: string;
+    columnManagerButton?: string;
+    columnManagerContainer?: string;
+}
+export interface TableContextType {
+    theme: TableThemeOverrides;
+    variant: TableVariant;
+    freezeHeader?: boolean;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    sortable?: boolean;
+    sortConfig?: SortConfig[];
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    filterable?: boolean;
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    expandable?: boolean;
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+}
+/**
+ * Main Table component props supporting both data-driven and declarative APIs
+ *
+ * @template T The type of data objects in each table row
+ */
+export interface TableProps<T = any> {
+    /** Array of data objects to display - required for data-driven API */
+    data?: T[];
+    /** Column definitions for data display and behavior - required for data-driven API */
+    columns?: Column<T>[];
+    /**
+     * Property name or function to extract stable row identifiers for React keys and selection.
+     * Provides consistent component identity during row reordering or updates.
+     *
+     * @example
+     * // Using a property name
+     * rowKey="id"
+     *
+     * // Using a function for complex keys
+     * rowKey={(row, index) => `${row.category}-${row.id}`}
+     */
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    /** Visual variant for different table styles */
+    variant?: TableVariant;
+    /** Theme overrides for custom styling */
+    theme?: TableThemeOverrides;
+    /** Additional CSS classes for customization */
+    className?: string;
+    /** Keep header visible when scrolling vertically */
+    freezeHeader?: boolean;
+    /** Keep first column visible when scrolling horizontally */
+    freezeFirstColumn?: boolean;
+    /** Keep last column visible when scrolling horizontally */
+    freezeLastColumn?: boolean;
+    /** Enable sorting functionality for sortable columns */
+    sortable?: boolean;
+    /** Current sort configuration state */
+    sortConfig?: SortConfig[];
+    /** Callback when sort configuration changes */
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    /** Enable filtering functionality for filterable columns */
+    filterable?: boolean;
+    /** Current filter configuration state */
+    filterConfig?: FilterConfig[];
+    /** Callback when filter configuration changes */
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    expandable?: boolean;
+    expandedRowRender?: (row: T) => ReactNode;
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+    bulkActions?: BulkAction[];
+    showColumnManager?: boolean;
+    visibleColumns?: string[];
+    onVisibleColumnsChange?: (visibleColumns: string[]) => void;
+    onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+    pagination?: {
+        pageSize: number;
+        currentPage: number;
+        totalItems: number;
+    };
+    children?: ReactNode;
+}
+export interface TableHeaderProps {
+    children?: ReactNode;
+    freezeHeader?: boolean;
+    className?: string;
+}
+export interface TableBodyProps {
+    children?: ReactNode;
+    className?: string;
+}
+export interface TableRowProps {
+    children?: ReactNode;
+    isExpandable?: boolean;
+    isExpanded?: boolean;
+    onExpandToggle?: () => void;
+    isSelected?: boolean;
+    onSelectToggle?: () => void;
+    className?: string;
+}
+export interface TableCellProps {
+    children?: ReactNode;
+    isFrozen?: boolean;
+    isLastFrozen?: boolean;
+    align?: TableAlignment;
+    width?: string | number;
+    className?: string;
+    colSpan?: number;
+}
+export interface TableHeaderCellProps extends Omit<TableCellProps, 'colSpan'> {
+    isSortable?: boolean;
+    sortDirection?: 'asc' | 'desc' | undefined;
+    onSort?: () => void;
+}
+export interface InternalTableHeaderProps<T> {
+    columns: Column<T>[];
+    sortConfig?: SortConfig[];
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    freezeHeader?: boolean;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    expandable?: boolean;
+    expandedRowRender?: (row: T) => ReactNode;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+    totalRowCount?: number;
+    theme?: TableThemeOverrides;
+    data?: T[];
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+}
+export interface InternalTableBodyProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    /** Row key extractor for stable row identification */
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    expandedRowRender?: (row: T) => ReactNode;
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    theme?: TableThemeOverrides;
+}
+export interface InternalTableRowProps<T> {
+    row: T;
+    rowId: string;
+    columns: Column<T>[];
+    expandedRowRender?: (row: T) => ReactNode;
+    isExpanded?: boolean;
+    onExpandChange?: (expanded: boolean) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    isSelected?: boolean;
+    onSelectionChange?: (selected: boolean) => void;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    theme?: TableThemeOverrides;
+}
+export interface InternalTableCellProps<T> {
+    column: Column<T>;
+    row: T;
+    rowId: string;
+    isHeader?: boolean;
+    isFrozen?: boolean;
+    isLastFrozen?: boolean;
+    theme?: TableThemeOverrides;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Generate a stable row identifier for React keys and row IDs
+ * @param row - The data row object
+ * @param index - The row index as fallback
+ * @param rowKey - Optional key extractor function or property name
+ * @returns A stable string identifier for the row
+ */
+function getRowId(row, index, rowKey) {
+    if (!rowKey) {
+        // Fallback to index if no rowKey is provided (maintains backward compatibility)
+        return `row-${index}`;
+    }
+    if (typeof rowKey === 'function') {
+        // Use the function to extract the key
+        const key = rowKey(row, index);
+        return `row-${key}`;
+    }
+    // Use the property name to extract the key
+    const key = row[rowKey];
+    if (key === undefined || key === null) {
+        // Fallback to index if the property doesn't exist or is null/undefined
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[Table]: Row key property "${String(rowKey)}" is undefined or null for row at index ${index}. Falling back to index-based key.`);
+        }
+        return `row-${index}`;
+    }
+    return `row-${key}`;
+}
+
+export { getRowId };

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

@@ -0,0 +1,117 @@
+import React__default, { useContext } from 'react';
+import { TableContext } from '../Table.js';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * Declarative Table Header component
+ * Used within the declarative API for flexible table composition
+ *
+ * @example
+ * <Table>
+ *   <Table.Header freezeHeader>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ * </Table>
+ */
+const HeaderComponent = ({ children, freezeHeader, className = '' }) => {
+    const contextValue = useContext(TableContext);
+    const { theme } = contextValue;
+    const headerClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerContainerStyle, freezeHeader !== undefined
+        ? (freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '')
+        : (contextValue.freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : ''), className);
+    return (React__default.createElement("thead", { className: headerClasses, "data-freeze": freezeHeader ? 'true' : undefined }, children));
+};
+// Set display name for dev tools
+HeaderComponent.displayName = 'Table.Header';
+// Memoize component to prevent unnecessary re-renders
+const Header = React__default.memo(HeaderComponent);
+/**
+ * Declarative Table Body component
+ * Container for table rows in the declarative API
+ *
+ * @example
+ * <Table.Body>
+ *   <Table.Row>
+ *     <Table.Cell>Data</Table.Cell>
+ *   </Table.Row>
+ * </Table.Body>
+ */
+const BodyComponent = ({ children, className = '', }) => {
+    const { theme } = useContext(TableContext);
+    return (React__default.createElement("tbody", { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyStyle, className) }, children));
+};
+// Set display name for dev tools
+BodyComponent.displayName = 'Table.Body';
+// Memoize component to prevent unnecessary re-renders
+const Body = React__default.memo(BodyComponent);
+/**
+ * Declarative Table Row component
+ * Supports selection, expansion, and custom styling
+ *
+ * @example
+ * <Table.Row isSelected onSelectToggle={() => setSelected(!selected)}>
+ *   <Table.Cell>Data</Table.Cell>
+ * </Table.Row>
+ */
+const RowComponent = ({ children, isExpandable = false, isExpanded = false, onExpandToggle, isSelected = false, onSelectToggle, className = '', }) => {
+    const { theme } = useContext(TableContext);
+    const rowClasses = cn(theme === null || theme === void 0 ? void 0 : theme.rowStyle, isSelected && (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle), theme === null || theme === void 0 ? void 0 : theme.hoverRowStyle, className);
+    const handleRowClick = () => {
+        if (onSelectToggle) {
+            onSelectToggle();
+        }
+    };
+    return (React__default.createElement("tr", { className: rowClasses, "data-selected": isSelected ? 'true' : undefined, "data-expanded": isExpandable && isExpanded ? 'true' : undefined, onClick: onSelectToggle ? handleRowClick : undefined, role: "row", "aria-selected": isSelected, "aria-expanded": isExpandable ? isExpanded : undefined }, children));
+};
+// Set display name for dev tools
+RowComponent.displayName = 'Table.Row';
+// Memoize component to prevent unnecessary re-renders
+const Row = React__default.memo(RowComponent);
+/**
+ * Declarative Table Cell component
+ * Standard data cell with alignment, width, and frozen column support
+ *
+ * @example
+ * <Table.Cell align="right" width="200px" isFrozen>
+ *   $1,234.56
+ * </Table.Cell>
+ */
+const CellComponent = ({ children, isFrozen = false, isLastFrozen = false, align, width, className = '', colSpan, }) => {
+    const { theme } = useContext(TableContext);
+    const 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), align && `text-${align}`, className);
+    return (React__default.createElement("td", { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width }, colSpan: colSpan, role: "cell" }, children));
+};
+// Set display name for dev tools
+CellComponent.displayName = 'Table.Cell';
+// Memoize component to prevent unnecessary re-renders
+const Cell = React__default.memo(CellComponent);
+/**
+ * Declarative Table Header Cell component
+ * Header cell with sorting functionality and alignment options
+ *
+ * @example
+ * <Table.HeaderCell
+ *   isSortable
+ *   sortDirection="asc"
+ *   onSort={() => handleSort('name')}
+ *   align="left"
+ * >
+ *   Name
+ * </Table.HeaderCell>
+ */
+const HeaderCellComponent = ({ children, isFrozen = false, isLastFrozen = false, isSortable = false, sortDirection, onSort, align = 'left', width, className = '', }) => {
+    const { theme } = useContext(TableContext);
+    const headerCellClasses = 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), align && `text-${align}`, isSortable && 'cursor-pointer', className);
+    return (React__default.createElement("th", { className: headerCellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, onClick: isSortable && onSort ? onSort : undefined, style: { width }, role: "columnheader", "aria-sort": sortDirection ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined },
+        React__default.createElement("div", { className: "flex items-center" },
+            children,
+            isSortable && sortDirection && (React__default.createElement("span", { className: "ml-1" }, sortDirection === 'asc' ? '↑' : '↓')))));
+};
+// Set display name for dev tools
+HeaderCellComponent.displayName = 'Table.HeaderCell';
+// Memoize component to prevent unnecessary re-renders
+const HeaderCell = React__default.memo(HeaderCellComponent);
+
+export { Body, Cell, Header, HeaderCell, Row };

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { TableActionsProps } from "./TableActions.types";
+/**
+ * TableActions component with smart display logic
+ * - ≤2 actions: Show as individual icon buttons
+ * - ≥3 actions: Show all actions in overflow menu using Dropdown
+ */
+export declare const TableActions: <T>({ actions, row, maxVisibleActions, className, }: TableActionsProps<T>) => React.JSX.Element;

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

@@ -0,0 +1,73 @@
+import React__default, { useMemo } from 'react';
+import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../../../utils/cn.js';
+import { Dropdown } from '../../../Dropdown/Dropdown.js';
+import '../../../Dropdown/DropdownTrigger.js';
+import '../../../Dropdown/DropdownMenu.js';
+import '../../../Dropdown/DropdownItem.js';
+import '../../../Dropdown/DropdownSection.js';
+import '../../../Dropdown/DropdownSeparator.js';
+import { Button } from '../../../Button/Button.js';
+
+/**
+ * TableActions component with smart display logic
+ * - ≤2 actions: Show as individual icon buttons
+ * - ≥3 actions: Show all actions in overflow menu using Dropdown
+ */
+const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
+    // Sort actions by priority (high priority first)
+    const sortedActions = useMemo(() => {
+        return [...actions].sort((a, b) => {
+            const priorityOrder = { high: 0, normal: 1 };
+            const aPriority = priorityOrder[a.priority || "normal"];
+            const bPriority = priorityOrder[b.priority || "normal"];
+            return aPriority - bPriority;
+        });
+    }, [actions]);
+    // Determine display strategy
+    const shouldUseMenu = actions.length > maxVisibleActions;
+    // Get disabled keys for Dropdown
+    const disabledKeys = useMemo(() => {
+        return sortedActions
+            .filter((action) => { var _a; return (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row); })
+            .map((action) => action.id);
+    }, [sortedActions, row]);
+    // Handle action click from Dropdown
+    const handleAction = (key) => {
+        var _a;
+        const action = sortedActions.find((a) => a.id === key);
+        if (action && !((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))) {
+            action.onClick(row);
+        }
+    };
+    // Render individual action buttons
+    const renderInlineActions = (actionsToRender) => {
+        return actionsToRender.map((action) => {
+            var _a;
+            const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
+            const Icon = action.icon;
+            return (React__default.createElement(Button, { key: action.id, color: "primary", variant: "link", iconOnly: true, onClick: () => action.onClick(row), disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === "danger"
+                    ? "text-red-400 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300"
+                    : "text-neutral-400 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-300") },
+                React__default.createElement(Icon, { className: "size-4" })));
+        });
+    };
+    // Render overflow menu using Dropdown
+    const renderOverflowMenu = () => {
+        return (React__default.createElement(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction },
+            React__default.createElement(Dropdown.Trigger, null,
+                React__default.createElement(Button, { color: "neutral", variant: "filled", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]" },
+                    React__default.createElement(EllipsisVerticalIcon, { className: "size-4" }))),
+            React__default.createElement(Dropdown.Menu, { "aria-label": "Row actions" }, sortedActions.map((action) => {
+                const Icon = action.icon;
+                return (React__default.createElement(Dropdown.Item, { key: action.id, itemKey: action.id, isDanger: action.variant === "danger", startContent: React__default.createElement(Icon, { className: "size-4" }) }, action.label));
+            }))));
+    };
+    return (React__default.createElement("div", { className: cn("flex items-center justify-end", className) }, shouldUseMenu
+        ? // All actions in overflow menu
+            renderOverflowMenu()
+        : // Show actions inline
+            renderInlineActions(sortedActions)));
+};
+
+export { TableActions };

package/dist/components/core/Table/components/TableActions/TableActionsMenu.js

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { cn } from '../../../../../utils/cn.js';
+
+/**
+ * TableActionsMenu component for displaying actions in an overflow menu
+ */
+const TableActionsMenu = ({ actions, row, onClose, className, }) => {
+    const handleActionClick = (action) => {
+        var _a;
+        if ((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))
+            return;
+        action.onClick(row);
+        onClose();
+    };
+    return (React__default.createElement("div", { className: cn(" min-w-[180px] p-1", className), role: "menu", "aria-label": "Row actions" }, actions.map((action, index) => {
+        var _a;
+        const isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
+        const Icon = action.icon;
+        return (React__default.createElement("button", { key: action.id, onClick: () => handleActionClick(action), disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-left transition-all duration-300", "hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
+                ? "text-danger-600 hover:bg-danger-50 focus:bg-danger-50"
+                : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), role: "menuitem", "aria-label": action.label },
+            React__default.createElement(Icon, { className: "size-4 flex-shrink-0" }),
+            React__default.createElement("span", null, action.label)));
+    })));
+};
+
+export { TableActionsMenu };

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

@@ -0,0 +1,49 @@
+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';
+
+/**
+ * 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]}
+ * />
+ */
+const TablePagination = ({ currentPage, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, showPageSizeSelector = true, className, }) => {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+    // Create options for the Select component
+    const pageSizeSelectOptions = pageSizeOptions.map((option) => ({
+        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: (value) => 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/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,27 @@
+import React__default from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { Button } from '../../../Button/Button.js';
+import { cn } from '../../../../../utils/cn.js';
+
+/**
+ * Selection header that appears when rows are selected
+ * Shows selection count and bulk action buttons
+ */
+const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkActions = [], onClearSelection, 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 ${selectedCount} selected`
+                : `${selectedCount} selected`),
+            bulkActions.length > 0 && (React__default.createElement("div", { className: "flex items-center gap-2" }, bulkActions.map((action) => {
+                action.icon;
+                return (React__default.createElement(Button, { key: action.id, color: "neutral", variant: "filled", onClick: () => 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(XMarkIcon, { 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.js

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import { TableRow } from './TableRow.js';
+import { getRowId } from '../../Table.utils.js';
+
+function TableBodyComponent({ data, columns, rowKey, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable, selectionType, selectedRows = [], onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
+    const handleExpandChange = (rowId, expanded) => {
+        if (!onExpandedRowsChange)
+            return;
+        const newExpandedRows = expanded
+            ? [...expandedRows, rowId]
+            : expandedRows.filter(id => id !== rowId);
+        onExpandedRowsChange(newExpandedRows);
+    };
+    const handleSelectionChange = (rowId, selected) => {
+        if (!onSelectionChange)
+            return;
+        const newSelectedRows = selectionType === 'checkbox'
+            ? selected
+                ? [...selectedRows, rowId]
+                : selectedRows.filter(id => id !== rowId)
+            : selected ? [rowId] : [];
+        onSelectionChange(newSelectedRows);
+    };
+    return (React__default.createElement("tbody", null, data.map((row, index) => {
+        const 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: (expanded) => handleExpandChange(rowId, expanded), selectable: selectable, selectionType: selectionType, isSelected: selectedRows.includes(rowId), onSelectionChange: (selected) => handleSelectionChange(rowId, selected), freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }));
+    })));
+}
+// Export with proper type annotation
+const TableBody = TableBodyComponent;
+
+export { TableBody };