flikkui 0.2.0-beta.2 → 0.2.0-beta.5

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

@@ -1,15 +1,14 @@
-import React__default, { createContext, useState, useEffect } from 'react';
+import React__default, { createContext, useMemo } from 'react';
 import { tableTheme } from './Table.theme.js';
 import { cn } from '../../../utils/cn.js';
-import { TableHeader } from './components/core/TableHeader.js';
-import { TableBody } from './components/core/TableBody.js';
-import { TableSelectionHeader } from './components/TableSelectionHeader/TableSelectionHeader.js';
-import { Popover } from '../Popover/Popover.js';
-import '../Popover/PopoverContext.js';
-import { Cog6ToothIcon } from '@heroicons/react/24/outline';
-import { Button } from '../Button/Button.js';
-import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
-import { Sortable, SortableItem } from '../Sortable/Sortable.js';
+import { TableHeader } from './TableHeader.js';
+import { TableBody } from './TableBody.js';
+import { TableSelectionHeader } from './TableSelectionHeader.js';
+import { TableColumnManager } from './TableColumnManager.js';
+import { TableFilter } from './TableFilter.js';
+import { useTableColumns } from './hooks/useTableColumns.js';
+import { useTableSelection } from './hooks/useTableSelection.js';
+import { useTablePagination } from './hooks/useTablePagination.js';
 
 /**
  * Context for sharing table state across all table components
@@ -34,131 +33,61 @@ const TableContext = createContext({
  * - Pagination support
  * - Full accessibility compliance (WCAG 2.1 AA)
  * - Theme customization with className overrides
- *
- * @example
- * // Data-driven API with stable row keys
- * <Table data={data} columns={columns} rowKey="id" sortable selectable />
- *
- * // Using a function for complex row keys
- * <Table
- *   data={data}
- *   columns={columns}
- *   rowKey={(row, index) => `${row.category}-${row.id}`}
- *   sortable
- *   selectable
- * />
- *
- * // Declarative API
- * <Table>
- *   <Table.Header>
- *     <Table.Row>
- *       <Table.HeaderCell>Name</Table.HeaderCell>
- *     </Table.Row>
- *   </Table.Header>
- *   <Table.Body>
- *     <Table.Row>
- *       <Table.Cell>John Doe</Table.Cell>
- *     </Table.Row>
- *   </Table.Body>
- * </Table>
  */
 function TableComponent(props) {
     var _a;
-    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
-    // Store the initial state for reset functionality
-    const defaultVisibleColumns = initialVisibleColumns || (columns ? columns.map((col) => col.id) : []);
-    const defaultColumnOrder = columns ? columns.map((col) => col.id) : [];
-    const [visibleColumns, setVisibleColumns] = useState(defaultVisibleColumns);
-    const [columnOrder, setColumnOrder] = useState(defaultColumnOrder);
-    // Sync column order when columns prop changes
-    useEffect(() => {
-        if (columns) {
-            setColumnOrder(columns.map((col) => col.id));
-        }
-    }, [columns]);
+    const { data, columns, rowKey, variant = "default", theme: themeOverrides, className = "", freezeHeader = false, freezeFirstColumn = false, freezeLastColumn = false, sortable = false, sortConfig = [], onSortChange, filterable = false, filterConfig = [], onFilterChange, expandable = false, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable = false, selectionType = "checkbox", selectedRows = [], onSelectionChange, bulkActions = [], showColumnManager = false, visibleColumns: initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, pagination, children, } = props;
+    // Column management hook
+    const { visibleColumns, columnOrder, visibleColumnsList, handleToggleColumn, handleColumnReorder, handleResetToDefault, } = useTableColumns({
+        columns,
+        initialVisibleColumns,
+        onVisibleColumnsChange,
+        onColumnReorder,
+    });
+    // Pagination hook
+    const { paginatedData } = useTablePagination({
+        data,
+        pagination,
+    });
+    // Selection hook (for clear selection in header)
+    const { handleClearSelection } = useTableSelection({
+        data: paginatedData,
+        rowKey,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    });
     // Determine which API is being used (declarative vs data-driven)
     const isDeclarativeAPI = !!children;
     // Merge global theme with component-specific overrides
-    const theme = {
+    const theme = useMemo(() => ({
         ...tableTheme,
         ...(themeOverrides || {}),
-    };
+    }), [themeOverrides]);
     // Get base classes from theme
     const baseClasses = theme.baseStyle || "";
     const variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
-    /**
-     * Handle column visibility changes from the column manager
-     * Updates both internal state and calls the external callback
-     */
-    const handleVisibleColumnsChange = (newVisibleColumns) => {
-        setVisibleColumns(newVisibleColumns);
-        onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
-    };
-    /**
-     * Handle column reordering from the column manager
-     * Updates column order and calls the external callback
-     */
-    const handleColumnReorder = (fromIndex, toIndex) => {
-        const newColumnOrder = [...columnOrder];
-        const [movedColumn] = newColumnOrder.splice(fromIndex, 1);
-        newColumnOrder.splice(toIndex, 0, movedColumn);
-        setColumnOrder(newColumnOrder);
-        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(fromIndex, toIndex);
-    };
-    /**
-     * Handle column order reset from the column manager
-     * Resets column order back to the original columns order
-     */
-    const handleColumnOrderReset = () => {
-        if (columns) {
-            const originalOrder = columns.map((col) => col.id);
-            setColumnOrder(originalOrder);
-        }
-    };
-    /**
-     * Handle clearing all row selections
-     */
-    const handleClearSelection = () => {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
-    };
-    /**
-     * Handle toggling column visibility
-     * Prevents toggling locked columns
-     */
-    const handleToggleColumn = (columnId) => {
-        const column = columns === null || columns === void 0 ? void 0 : columns.find(col => col.id === columnId);
-        if (column === null || column === void 0 ? void 0 : column.locked)
-            return; // Prevent toggling locked columns
-        const newVisibleColumns = visibleColumns.includes(columnId)
-            ? visibleColumns.filter((id) => id !== columnId)
-            : [...visibleColumns, columnId];
-        handleVisibleColumnsChange(newVisibleColumns);
-    };
-    /**
-     * Handle resetting columns to default visibility and order
-     */
-    const handleResetToDefault = () => {
-        // Get all locked column IDs to ensure they remain visible
-        const lockedColumnIds = (columns === null || columns === void 0 ? void 0 : columns.filter(col => col.locked).map(col => col.id)) || [];
-        // Combine initial visible columns with locked columns (remove duplicates)
-        const resetVisibleColumns = Array.from(new Set([...defaultVisibleColumns, ...lockedColumnIds]));
-        // Reset to initial visible columns with locked columns guaranteed to be visible
-        handleVisibleColumnsChange(resetVisibleColumns);
-        // Reset column order to default
-        handleColumnOrderReset();
-    };
-    // Filter and order columns based on column order and visibility settings
-    const visibleColumnsList = columns && columnOrder.length > 0
-        ? columnOrder
-            .map(colId => columns.find(col => col.id === colId))
-            .filter((col) => col !== undefined && visibleColumns.includes(col.id))
-        : (columns ? columns.filter((col) => visibleColumns.includes(col.id)) : []);
-    // Calculate paginated data slice based on current page and page size
-    const paginatedData = pagination && data
-        ? data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
-        : data || [];
-    // Create context value with all table configuration and callbacks
-    const contextValue = {
+    // Memoize context value to prevent unnecessary re-renders in consumers
+    const contextValue = useMemo(() => ({
+        theme,
+        variant,
+        freezeHeader,
+        freezeFirstColumn,
+        freezeLastColumn,
+        sortable,
+        sortConfig,
+        onSortChange,
+        filterable,
+        filterConfig,
+        onFilterChange,
+        expandable,
+        expandedRows,
+        onExpandedRowsChange,
+        selectable,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    }), [
         theme,
         variant,
         freezeHeader,
@@ -177,47 +106,20 @@ function TableComponent(props) {
         selectionType,
         selectedRows,
         onSelectionChange,
-    };
+    ]);
     return (React__default.createElement(TableContext.Provider, { value: contextValue },
         React__default.createElement("div", { className: "relative" },
-            !isDeclarativeAPI && columns && (React__default.createElement("div", { className: theme.columnManagerContainer },
-                React__default.createElement(Popover, { placement: "bottom-end", offset: 8 },
-                    React__default.createElement(Popover.Trigger, null,
-                        React__default.createElement(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility" },
-                            React__default.createElement(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }),
-                            "Manage Columns")),
-                    React__default.createElement(Popover.Content, { className: "p-0" },
-                        React__default.createElement("div", { className: "w-64 p-3 overflow-hidden bg-white", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true" },
-                            React__default.createElement("div", { id: "column-manager-title", className: "text-xs uppercase font-bold mb-3 text-[var(--color-text-placeholder)]" }, "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: "space-y-0.5", role: "group", "aria-label": "Column visibility options" }, onColumnReorder ? (React__default.createElement(Sortable, { onReorder: handleColumnReorder, showDragHandle: true, className: "space-y-0.5" }, (columnOrder.length > 0
-                                ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
-                                : columns).map((column) => {
-                                const isVisible = visibleColumns.includes(column.id);
-                                const isLocked = column.locked === true;
-                                const displayName = typeof column.header === "string" ? column.header : column.id;
-                                return (React__default.createElement(SortableItem, { key: column.id, id: column.id, disabled: isLocked, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${isLocked ? "bg-gray-50" : ""}` },
-                                    React__default.createElement(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => handleToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? "disabled" : "default" })));
-                            }))) : ((columnOrder.length > 0
-                                ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
-                                : columns).map((column) => {
-                                const isVisible = visibleColumns.includes(column.id);
-                                const isLocked = column.locked === true;
-                                const displayName = typeof column.header === "string" ? column.header : column.id;
-                                return (React__default.createElement("div", { key: column.id, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${isLocked ? "bg-gray-50" : ""}` },
-                                    React__default.createElement(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => handleToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? "disabled" : "default" })));
-                            }))),
-                            React__default.createElement("div", { className: "mt-3 flex justify-end" },
-                                React__default.createElement(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: handleResetToDefault }, "Reset to Default"))))))),
+            !isDeclarativeAPI && columns && showColumnManager && (React__default.createElement("div", { className: theme.columnManagerContainer },
+                React__default.createElement(TableColumnManager, { columns: columns, visibleColumns: visibleColumns, columnOrder: columnOrder, onToggleColumn: handleToggleColumn, onResetToDefault: handleResetToDefault, onColumnReorder: onColumnReorder ? handleColumnReorder : undefined }))),
+            !isDeclarativeAPI && filterable && onFilterChange && columns && (React__default.createElement("div", { className: "mb-3" },
+                React__default.createElement(TableFilter, { columns: columns, filterConfig: filterConfig, onFilterChange: onFilterChange }))),
             !isDeclarativeAPI && selectable && selectedRows.length > 0 && (React__default.createElement(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })),
             React__default.createElement("div", { className: "overflow-x-auto" },
                 React__default.createElement("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : `Data table with ${paginatedData.length} rows`, "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length }, isDeclarativeAPI ? (children) : (React__default.createElement(React__default.Fragment, null,
                     React__default.createElement(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }),
                     React__default.createElement(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }))))))));
 }
-// Set display name for dev tools and Storybook
 TableComponent.displayName = "Table";
-// Export as default
 const Table = TableComponent;
 
 export { Table, TableContext };

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

@@ -1,7 +1,9 @@
 const tableTheme = {
     // Base styles for the table
+    // Uses border-separate so sticky cells keep their borders (border-collapse
+    // paints borders on the table grid, which sticky cells float above)
     // Light: white background | Dark: neutral-900 background
-    baseStyle: "w-full border-collapse text-sm " +
+    baseStyle: "w-full border-separate border-spacing-0 text-sm " +
         "bg-white dark:bg-[var(--color-neutral-900)]",
     // Variant styles
     // Each variant gets dark mode border colors and alternate row colors
@@ -11,8 +13,8 @@ const tableTheme = {
         striped: "border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
             "[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] dark:[&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-800)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        bordered: "border border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
-            "[&_td]:border [&_th]:border " +
+        bordered: "border-t border-l border-[var(--color-border)] dark:border-[var(--color-neutral-700)] " +
+            "[&_td]:border-b [&_td]:border-r [&_th]:border-b [&_th]:border-r " +
             "[&_td]:border-[var(--color-border)] [&_th]:border-[var(--color-border)] " +
             "dark:[&_td]:border-[var(--color-neutral-700)] dark:[&_th]:border-[var(--color-neutral-700)] " +
             "[&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
@@ -24,29 +26,36 @@ const tableTheme = {
     headerStyle: "text-left font-medium sticky top-0 border-b " +
         "text-[var(--color-text-primary)] border-[var(--color-border)] " +
         "dark:text-[var(--color-neutral-200)] dark:border-[var(--color-neutral-700)]",
-    // Cell styles
-    // Light: primary text, light border | Dark: neutral-300 text, neutral-700 border
-    cellStyle: "border-t " +
-        "text-[var(--color-text-primary)] border-[var(--color-border)] " +
-        "dark:text-[var(--color-neutral-300)] dark:border-[var(--color-neutral-700)]",
-    // Row styles
+    // Cell styles — borders on cells (not rows) so sticky columns keep them
+    // Light: primary text | Dark: neutral-300 text
+    cellStyle: "border-b border-b-[var(--color-border)] " +
+        "text-[var(--color-text-primary)] " +
+        "dark:border-b-[var(--color-neutral-700)] dark:text-[var(--color-neutral-300)]",
+    // Row styles — hover and layout only (borders moved to cells)
     // Light: neutral-50 hover | Dark: neutral-800 hover
-    rowStyle: "transition-all duration-300 relative " +
-        "hover:bg-[var(--color-neutral-50)] dark:hover:bg-[var(--color-neutral-800)]",
+    rowStyle: "group transition-all duration-300 relative " +
+        "hover:bg-[var(--color-neutral-50)] " +
+        "dark:hover:bg-[var(--color-neutral-800)]",
     // Selected row styles
     // Light: primary-50 background | Dark: primary-900/50 background with adjusted shadow
     selectedRowStyle: "shadow-[inset_3px_0_0_0_var(--color-primary)] " +
         "bg-[var(--color-primary-50)]/50 hover:bg-[var(--color-primary-50)] " +
         "dark:bg-[var(--color-primary-900)]/30 dark:hover:bg-[var(--color-primary-900)]/50",
     hoverRowStyle: "cursor-pointer",
-    // Frozen column styles
-    // Light: white/80 with light outline | Dark: neutral-900/80 with dark outline
-    frozenColumnStyle: "sticky left-0 z-10 backdrop-blur-sm shadow-l-xl outline outline-1 " +
-        "bg-white/80 outline-[var(--color-neutral-200)] " +
-        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
-    lastFrozenColumnStyle: "sticky right-0 z-10 backdrop-blur-sm shadow-r-xl outline outline-1 " +
-        "bg-white/80 outline-[var(--color-neutral-200)] " +
-        "dark:bg-[var(--color-neutral-900)]/80 dark:outline-[var(--color-neutral-700)]",
+    // Frozen column styles — borders are on the cell (via cellStyle) so they
+    // travel with the sticky element. Only need vertical separator borders here.
+    frozenColumnStyle: "sticky left-0 z-10 backdrop-blur-sm shadow-l-xl " +
+        "border-r border-r-[var(--color-neutral-200)] " +
+        "bg-white/80 " +
+        "group-hover:bg-[var(--color-neutral-50)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:border-r-[var(--color-neutral-700)] " +
+        "dark:group-hover:bg-[var(--color-neutral-800)]",
+    lastFrozenColumnStyle: "sticky right-0 z-10 backdrop-blur-sm shadow-r-xl " +
+        "border-l border-l-[var(--color-neutral-200)] " +
+        "bg-white/80 " +
+        "group-hover:bg-[var(--color-neutral-50)] " +
+        "dark:bg-[var(--color-neutral-900)]/80 dark:border-l-[var(--color-neutral-700)] " +
+        "dark:group-hover:bg-[var(--color-neutral-800)]",
     frozenHeaderStyle: "sticky top-0 z-20 " +
         "shadow-lg shadow-[var(--color-neutral-200)]/50 " +
         "dark:shadow-[var(--color-neutral-900)]/50",

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

@@ -22,6 +22,15 @@ export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
 export type TableAlignment = 'left' | 'center' | 'right';
 /** Selection control types for row selection */
 export type SelectionType = 'checkbox' | 'radio';
+/** Filter operator types for column filtering */
+export type FilterOperator = 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan';
+/** Filter type for column filter UI */
+export type FilterType = 'text' | 'select' | 'number';
+/** Option for select-type filter columns */
+export interface FilterOption {
+    label: string;
+    value: string;
+}
 /**
  * Column definition for table data display and behavior
  */
@@ -38,6 +47,10 @@ export interface Column<T = any> {
     sortable?: boolean;
     /** Enable filtering for this column */
     filterable?: boolean;
+    /** Type of filter UI to display */
+    filterType?: FilterType;
+    /** Options for select-type filter columns */
+    filterOptions?: FilterOption[];
     /** Truncate long content with ellipsis */
     ellipsis?: boolean;
     /** Show tooltip on hover - boolean or function returning tooltip text */
@@ -70,6 +83,8 @@ export interface FilterConfig {
     columnId: string;
     /** Filter value - type depends on column data type */
     value: any;
+    /** Filter operator for comparison */
+    operator?: FilterOperator;
 }
 export interface TableThemeOverrides {
     baseStyle?: string;
@@ -120,13 +135,6 @@ export interface TableProps<T = any> {
     /**
      * 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 */
@@ -228,7 +236,6 @@ export interface InternalTableHeaderProps<T> {
 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[];
@@ -266,3 +273,83 @@ export interface InternalTableCellProps<T> {
     theme?: TableThemeOverrides;
     children?: ReactNode;
 }
+export type ActionVariant = 'default' | 'danger';
+export type ActionPriority = 'high' | 'normal';
+export interface ActionItem<T = any> {
+    /** Unique identifier for the action */
+    id: string;
+    /** Display label for the action */
+    label: string;
+    /** Icon component to display */
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Click handler that receives the row data */
+    onClick: (row: T) => void;
+    /** Visual variant for styling (default: 'default') */
+    variant?: ActionVariant;
+    /** Priority level for display ordering (default: 'normal') */
+    priority?: ActionPriority;
+    /** Function to determine if action should be disabled */
+    disabled?: (row: T) => boolean;
+}
+export interface TableActionsProps<T = any> {
+    /** Array of action items to display */
+    actions: ActionItem<T>[];
+    /** Row data to pass to action handlers */
+    row: T;
+    /** Maximum number of actions to show inline before using menu (default: 2) */
+    maxVisibleActions?: number;
+    /** Additional CSS class name */
+    className?: string;
+}
+export interface TableActionsMenuProps<T = any> {
+    /** Array of action items to display in menu */
+    actions: ActionItem<T>[];
+    /** Row data to pass to action handlers */
+    row: T;
+    /** Function to close the menu */
+    onClose: () => void;
+    /** Additional CSS class name */
+    className?: string;
+}
+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;
+}
+export interface TableSelectionHeaderProps {
+    selectedCount: number;
+    totalCount: number;
+    selectedRows: string[];
+    bulkActions?: BulkAction[];
+    onClearSelection: () => void;
+    className?: string;
+}
+export interface TableColumnManagerProps<T = any> {
+    columns: Column<T>[];
+    visibleColumns: string[];
+    columnOrder: string[];
+    onToggleColumn: (columnId: string) => void;
+    onResetToDefault: () => void;
+    onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+}
+export interface TableFilterProps<T = any> {
+    columns: Column<T>[];
+    filterConfig: FilterConfig[];
+    onFilterChange: (filterConfig: FilterConfig[]) => void;
+    className?: string;
+}

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

@@ -1,3 +1,10 @@
+import { TableAlignment } from './Table.types';
+/** Constant for the utility column ID used in selection/expansion columns */
+export declare const UTILITY_COLUMN_ID = "utility";
+/** Width value for the utility column (1px + nowrap = shrink-to-content) */
+export declare const UTILITY_COLUMN_WIDTH = 1;
+/** Tailwind JIT-safe alignment class mapping */
+export declare const alignmentClasses: Record<TableAlignment, string>;
 /**
  * Generate a stable row identifier for React keys and row IDs
  * @param row - The data row object

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

@@ -1,3 +1,13 @@
+/** Constant for the utility column ID used in selection/expansion columns */
+const UTILITY_COLUMN_ID = 'utility';
+/** Width value for the utility column (1px + nowrap = shrink-to-content) */
+const UTILITY_COLUMN_WIDTH = 1;
+/** Tailwind JIT-safe alignment class mapping */
+const alignmentClasses = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+};
 /**
  * Generate a stable row identifier for React keys and row IDs
  * @param row - The data row object
@@ -27,4 +37,4 @@ function getRowId(row, index, rowKey) {
     return `row-${key}`;
 }
 
-export { getRowId };
+export { UTILITY_COLUMN_ID, UTILITY_COLUMN_WIDTH, alignmentClasses, getRowId };

package/dist/components/core/Table/{components/TableActions/TableActions.d.ts → TableActions.d.ts}

@@ -1,8 +1,8 @@
 import React from "react";
-import { TableActionsProps } from "./TableActions.types";
+import { TableActionsProps } from "./Table.types";
 /**
  * TableActions component with smart display logic
- * - ≤2 actions: Show as individual icon buttons
- * - ≥3 actions: Show all actions in overflow menu using Dropdown
+ * - <=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 → TableActions.js}

@@ -1,21 +1,20 @@
 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';
+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
+ * - <=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 };
@@ -24,15 +23,12 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
             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);
@@ -40,34 +36,28 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
             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") },
+                    ? "text-[var(--color-danger-400)] hover:text-[var(--color-danger)] dark:text-[var(--color-danger-400)] dark:hover:text-[var(--color-danger-300)]"
+                    : "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] dark:text-[var(--color-text-muted)] dark:hover:text-[var(--color-text-secondary)]") },
                 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(Button, { color: "neutral", variant: "outline", 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)));
+    return (React__default.createElement("div", { className: cn("flex items-center justify-end", className) }, shouldUseMenu ? renderOverflowMenu() : renderInlineActions(sortedActions)));
 };
 
 export { TableActions };

package/dist/components/core/Table/{components/TableActions/TableActionsMenu.d.ts → TableActionsMenu.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableActionsMenuProps } from './TableActions.types';
+import { TableActionsMenuProps } from './Table.types';
 /**
  * TableActionsMenu component for displaying actions in an overflow menu
  */

package/dist/components/core/Table/{components/TableActions/TableActionsMenu.js → TableActionsMenu.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { cn } from '../../../../../utils/cn.js';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * TableActionsMenu component for displaying actions in an overflow menu
@@ -12,12 +12,12 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
         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) => {
+    return (React__default.createElement("div", { className: cn("min-w-[180px] p-1", className), role: "menu", "aria-label": "Row actions" }, actions.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, 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"
+        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-[var(--color-background-secondary)] focus:bg-[var(--color-background-secondary)] focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
+                ? "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)] focus:bg-[var(--color-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)));