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

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { InternalTableBodyProps } from '../../Table.types';
+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 → TableBody.js}

@@ -1,32 +1,26 @@
 import React__default from 'react';
 import { TableRow } from './TableRow.js';
-import { getRowId } from '../../Table.utils.js';
+import { getRowId } from './Table.utils.js';
+import { useTableExpansion } from './hooks/useTableExpansion.js';
+import { useTableSelection } from './hooks/useTableSelection.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);
-    };
+    const { handleExpandChange } = useTableExpansion({
+        expandedRows,
+        onExpandedRowsChange,
+    });
+    const { handleSelectionChange } = useTableSelection({
+        data,
+        rowKey,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    });
     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 };

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

@@ -1,17 +1,9 @@
 import React from 'react';
-import { InternalTableCellProps } from '../../Table.types';
+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;

package/dist/components/core/Table/{components/core/TableCell.js → TableCell.js}

@@ -1,25 +1,19 @@
 import React__default from 'react';
-import { cn } from '../../../../../utils/cn.js';
+import { cn } from '../../../utils/cn.js';
+import { UTILITY_COLUMN_ID, alignmentClasses } from './Table.utils.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({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, theme, children, }) {
     const Cell = isHeader ? 'th' : 'td';
+    const isUtilityColumn = column.id === UTILITY_COLUMN_ID;
     // For header cells, render the column header content
     if (isHeader) {
-        const cellClasses = 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-${column.align}`);
+        const cellClasses = 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 && alignmentClasses[column.align], isUtilityColumn && 'whitespace-nowrap');
         return (React__default.createElement(Cell, { className: cellClasses, "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)
@@ -34,12 +28,10 @@ function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = f
         : column.tooltip
             ? String(value)
             : undefined;
-    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), column.align && `text-${column.align}`, column.ellipsis && 'truncate');
+    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), column.align && alignmentClasses[column.align], column.ellipsis && 'truncate', isUtilityColumn && 'whitespace-nowrap');
     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
 const TableCell = React__default.memo(TableCellComponent);
 
 export { TableCell };

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

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

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

@@ -0,0 +1,34 @@
+import React__default from 'react';
+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';
+
+function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onToggleColumn, onResetToDefault, onColumnReorder, }) {
+    const orderedColumns = columnOrder.length > 0
+        ? columnOrder.map(colId => columns.find(col => col.id === colId)).filter(Boolean)
+        : columns;
+    const renderColumnItem = (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(Checkbox, { id: `column-checkbox-${column.id}`, name: `column-${column.id}`, value: column.id, checked: isVisible, onChange: () => onToggleColumn(column.id), "aria-label": `Toggle visibility for ${displayName} column`, label: displayName, state: isLocked ? 'disabled' : 'default' }));
+    };
+    return (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: onColumnReorder, showDragHandle: true, className: "space-y-0.5" }, orderedColumns.map((column) => (React__default.createElement(SortableItem, { key: column.id, id: column.id, disabled: column.locked === true, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}` }, renderColumnItem(column)))))) : (orderedColumns.map((column) => (React__default.createElement("div", { key: column.id, className: `bg-white hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}` }, renderColumnItem(column)))))),
+                React__default.createElement("div", { className: "mt-3 flex justify-end" },
+                    React__default.createElement(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault }, "Reset to Default"))))));
+}
+const TableColumnManager = TableColumnManagerComponent;
+
+export { TableColumnManager };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps } from '../Table.types';
+import { TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps } from './Table.types';
 export declare const Header: React.NamedExoticComponent<TableHeaderProps>;
 export declare const Body: React.NamedExoticComponent<TableBodyProps>;
 export declare const Row: React.NamedExoticComponent<TableRowProps>;

package/dist/components/core/Table/{components/DeclarativeComponents.js → TableDeclarative.js}

@@ -1,19 +1,10 @@
 import React__default, { useContext } from 'react';
-import { TableContext } from '../Table.js';
-import { cn } from '../../../../utils/cn.js';
+import { TableContext } from './Table.js';
+import { cn } from '../../../utils/cn.js';
+import { alignmentClasses } from './Table.utils.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);
@@ -23,37 +14,19 @@ const HeaderComponent = ({ children, freezeHeader, className = '' }) => {
         : (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);
@@ -65,53 +38,30 @@ const RowComponent = ({ children, isExpandable = false, isExpanded = false, onEx
     };
     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);
+    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 && alignmentClasses[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);
+    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 && alignmentClasses[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' ? '↑' : '↓')))));
+            isSortable && sortDirection && (React__default.createElement("span", { className: "ml-1" }, sortDirection === 'asc' ? '\u2191' : '\u2193')))));
 };
-// 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/TableFilter.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableFilterProps } from './Table.types';
+export declare function TableFilter<T>({ columns, filterConfig, onFilterChange, className, }: TableFilterProps<T>): React.JSX.Element | null;

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

@@ -0,0 +1,122 @@
+import React__default, { useState } from 'react';
+import { Button } from '../Button/Button.js';
+import { Input } from '../../forms/Input/Input.js';
+import '../../forms/Input/Input.theme.js';
+import { Select } from '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+
+const operatorOptions = [
+    { id: 'contains', label: 'Contains', value: 'contains' },
+    { id: 'equals', label: 'Equals', value: 'equals' },
+    { id: 'startsWith', label: 'Starts with', value: 'startsWith' },
+    { id: 'endsWith', label: 'Ends with', value: 'endsWith' },
+    { id: 'greaterThan', label: 'Greater than', value: 'greaterThan' },
+    { id: 'lessThan', label: 'Less than', value: 'lessThan' },
+];
+function TableFilter({ columns, filterConfig, onFilterChange, className, }) {
+    const filterableColumns = columns.filter(col => col.filterable);
+    const [activeFilters, setActiveFilters] = useState(() => filterConfig.map((fc, i) => ({
+        id: `filter-${i}`,
+        columnId: fc.columnId,
+        operator: fc.operator || 'contains',
+        value: String(fc.value || ''),
+    })));
+    if (filterableColumns.length === 0)
+        return null;
+    const columnOptions = filterableColumns.map(col => ({
+        id: col.id,
+        label: typeof col.header === 'string' ? col.header : col.id,
+        value: col.id,
+    }));
+    const getFilterOperatorOptions = (column) => {
+        if (!column)
+            return operatorOptions;
+        if (column.filterType === 'number') {
+            return operatorOptions;
+        }
+        // Text filters: no greaterThan/lessThan
+        return operatorOptions.filter(op => op.value !== 'greaterThan' && op.value !== 'lessThan');
+    };
+    const syncFilters = (filters) => {
+        const newFilterConfig = filters
+            .filter(f => f.columnId && f.value)
+            .map(f => ({
+            columnId: f.columnId,
+            value: f.value,
+            operator: f.operator,
+        }));
+        onFilterChange(newFilterConfig);
+    };
+    const handleAddFilter = () => {
+        const defaultColumn = filterableColumns[0];
+        if (!defaultColumn)
+            return;
+        setActiveFilters(prev => [
+            ...prev,
+            {
+                id: `filter-${Date.now()}`,
+                columnId: defaultColumn.id,
+                operator: 'contains',
+                value: '',
+            },
+        ]);
+    };
+    const handleRemoveFilter = (filterId) => {
+        setActiveFilters(prev => {
+            const updated = prev.filter(f => f.id !== filterId);
+            syncFilters(updated);
+            return updated;
+        });
+    };
+    const handleFilterColumnChange = (filterId, columnId) => {
+        setActiveFilters(prev => {
+            const updated = prev.map(f => f.id === filterId ? { ...f, columnId, value: '' } : f);
+            syncFilters(updated);
+            return updated;
+        });
+    };
+    const handleFilterOperatorChange = (filterId, operator) => {
+        setActiveFilters(prev => {
+            const updated = prev.map(f => f.id === filterId ? { ...f, operator } : f);
+            syncFilters(updated);
+            return updated;
+        });
+    };
+    const handleFilterValueChange = (filterId, value) => {
+        setActiveFilters(prev => {
+            const updated = prev.map(f => f.id === filterId ? { ...f, value } : f);
+            syncFilters(updated);
+            return updated;
+        });
+    };
+    const handleClearAll = () => {
+        setActiveFilters([]);
+        onFilterChange([]);
+    };
+    const getSelectedColumn = (columnId) => filterableColumns.find(col => col.id === columnId);
+    return (React__default.createElement("div", { className: cn('space-y-2', className) },
+        activeFilters.map((filter) => {
+            const selectedColumn = getSelectedColumn(filter.columnId);
+            const filteredOperatorOptions = getFilterOperatorOptions(selectedColumn);
+            return (React__default.createElement("div", { key: filter.id, className: "flex items-center gap-2" },
+                React__default.createElement(FunnelIcon, { className: "size-4 flex-shrink-0 text-[var(--color-text-muted)]" }),
+                React__default.createElement(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "w-36" }),
+                React__default.createElement(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: filteredOperatorOptions, size: "sm", className: "w-32" }),
+                (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.filterType) === 'select' && selectedColumn.filterOptions ? (React__default.createElement(Select, { value: filter.value, onChange: (value) => handleFilterValueChange(filter.id, value), options: selectedColumn.filterOptions.map(opt => ({
+                        id: opt.value,
+                        label: opt.label,
+                        value: opt.value,
+                    })), size: "sm", className: "w-40" })) : (React__default.createElement(Input, { value: filter.value, onChange: (e) => handleFilterValueChange(filter.id, e.target.value), placeholder: "Filter value...", size: "sm", type: (selectedColumn === null || selectedColumn === void 0 ? void 0 : selectedColumn.filterType) === 'number' ? 'number' : 'text', className: "w-40" })),
+                React__default.createElement(Button, { color: "neutral", variant: "ghost", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter" },
+                    React__default.createElement(XMarkIcon, { className: "size-4" }))));
+        }),
+        React__default.createElement("div", { className: "flex items-center gap-2" },
+            React__default.createElement(Button, { color: "neutral", variant: "ghost", size: "sm", onClick: handleAddFilter },
+                React__default.createElement(PlusIcon, { className: "size-4" }),
+                "Add Filter"),
+            activeFilters.length > 0 && (React__default.createElement(Button, { color: "neutral", variant: "ghost", size: "sm", onClick: handleClearAll }, "Clear All")))));
+}
+
+export { TableFilter };

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { InternalTableHeaderProps } from '../../Table.types';
+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 → TableHeader.js}

@@ -1,16 +1,15 @@
-import React__default from 'react';
+import React__default, { useCallback } from 'react';
 import { TableCell } from './TableCell.js';
-import { Checkbox } from '../../../../forms/Checkbox/Checkbox.js';
-import { getRowId } from '../../Table.utils.js';
+import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
+import { getRowId, UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
 
-function TableHeaderComponent({ columns, sortConfig = [], onSortChange, filterConfig = [], onFilterChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, totalRowCount = 0, theme, data = [], rowKey, }) {
-    const handleSort = (columnId) => {
+function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, theme, data = [], rowKey, }) {
+    const handleSort = useCallback((columnId) => {
         if (!onSortChange)
             return;
         const currentSort = sortConfig.find(sort => sort.columnId === columnId);
         const newSortConfig = [...sortConfig.filter(sort => sort.columnId !== columnId)];
         if (!currentSort) {
-            // Add new sort
             newSortConfig.push({
                 columnId,
                 direction: 'asc',
@@ -18,58 +17,45 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, filterCo
             });
         }
         else if (currentSort.direction === 'asc') {
-            // Change to desc
             newSortConfig.push({
                 columnId,
                 direction: 'desc',
                 priority: currentSort.priority,
             });
         }
-        // If desc, remove sort
         onSortChange(newSortConfig);
-    };
-    const handleSelectAll = (checked) => {
+    }, [sortConfig, onSortChange]);
+    const handleSelectAll = useCallback((checked) => {
         if (!onSelectionChange || selectionType !== 'checkbox')
             return;
         if (checked) {
-            // Select all rows - generate row IDs using the same logic as TableBody
             const allRowIds = data.map((row, index) => getRowId(row, index, rowKey));
             onSelectionChange(allRowIds);
         }
         else {
-            // Deselect all
             onSelectionChange([]);
         }
-    };
-    // Calculate select all checkbox state
+    }, [data, rowKey, selectionType, onSelectionChange]);
     const dataLength = data.length;
     const isAllSelected = selectedRows.length === dataLength && dataLength > 0;
     const 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',
+            (selectable || (expandable && expandedRowRender)) && (React__default.createElement(TableCell, { column: {
+                    id: UTILITY_COLUMN_ID,
                     header: '',
                     accessor: () => '',
-                    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: () => '',
-                    width: '48px',
-                    align: 'center'
-                }, row: {}, rowId: "", isHeader: true, theme: theme })),
+                    width: UTILITY_COLUMN_WIDTH,
+                }, row: {}, rowId: "", isHeader: true, theme: theme },
+                React__default.createElement("div", { className: "flex items-center gap-2" }, selectable && 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" }))))),
             columns.map((column, index) => {
                 const currentSort = sortConfig.find(sort => sort.columnId === column.id);
                 const 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: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-primary-600 transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}` },
+                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: () => handleSort(column.id), className: "flex items-center gap-1 w-full text-left hover:text-[var(--color-primary)] transition-colors", "aria-label": `Sort by ${typeof column.header === 'string' ? column.header : column.id}` },
                     column.header,
-                    currentSort && (React__default.createElement("span", { className: "text-xs" }, currentSort.direction === 'asc' ? '↑' : '↓')))) : (column.header)));
+                    currentSort && (React__default.createElement("span", { className: "text-xs" }, currentSort.direction === 'asc' ? '\u2191' : '\u2193')))) : (column.header)));
             }))));
 }
-// Export with proper type annotation
 const TableHeader = TableHeaderComponent;
 
 export { TableHeader };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TablePaginationProps } from "./Table.types";
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ */
+export declare const TablePagination: React.FC<TablePaginationProps>;

package/dist/components/core/Table/{components/TablePagination/TablePagination.js → TablePagination.js}

@@ -1,34 +1,23 @@
 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 { 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) },
+    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-4 py-3 border-t border-[var(--color-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:"),

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { InternalTableRowProps } from "./Table.types";
+declare function TableRowComponent<T extends Record<string, any>>({ row, rowId, columns, expandedRowRender, isExpanded, onExpandChange, selectable, selectionType, isSelected, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }: InternalTableRowProps<T>): React.JSX.Element;
+declare namespace TableRowComponent {
+    var displayName: string;
+}
+export declare const TableRow: typeof TableRowComponent;
+export {};

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

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import { AnimatePresence, motion } from 'motion/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 { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { UTILITY_COLUMN_WIDTH, UTILITY_COLUMN_ID } from './Table.utils.js';
+import { tableExpandAnimations, tableExpandContentAnimations } from './Table.animations.js';
+
+function TableRowComponent({ row, rowId, columns, expandedRowRender, isExpanded = false, onExpandChange, selectable, selectionType, isSelected = false, onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
+    const rowClasses = [
+        (theme === null || theme === void 0 ? void 0 : theme.rowStyle) || "",
+        isSelected ? (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle) || "" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const handleExpandClick = (e) => {
+        e.stopPropagation();
+        onExpandChange === null || onExpandChange === void 0 ? void 0 : onExpandChange(!isExpanded);
+    };
+    const colSpan = columns.length + (selectable || !!expandedRowRender ? 1 : 0);
+    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 || expandedRowRender) && (React__default.createElement(TableCell, { column: {
+                    id: UTILITY_COLUMN_ID,
+                    header: "",
+                    accessor: () => "",
+                    width: UTILITY_COLUMN_WIDTH,
+                }, row: row, rowId: rowId, theme: theme },
+                React__default.createElement("div", { className: "flex items-center gap-2" },
+                    selectable &&
+                        (selectionType === "checkbox" ? (React__default.createElement(Checkbox, { id: `table-checkbox-${rowId}`, name: `table-selection-${rowId}`, value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), onClick: (e) => e.stopPropagation(), "aria-label": "Select row" })) : (React__default.createElement("div", { onClick: (e) => e.stopPropagation() },
+                            React__default.createElement(Radio, { id: `table-radio-${rowId}`, name: "table-selection", value: String(rowId), checked: isSelected, onChange: (checked) => onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(checked), "aria-label": "Select row" })))),
+                    expandedRowRender && (React__default.createElement(Button, { color: "neutral", variant: "outline", size: "sm", iconOnly: true, onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row" }, isExpanded ? (React__default.createElement(MinusIcon, { className: "size-4", strokeWidth: 2 })) : (React__default.createElement(PlusIcon, { className: "size-4", strokeWidth: 2 }))))))),
+            columns.map((column, index) => (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 })))),
+        React__default.createElement(AnimatePresence, { initial: false }, isExpanded && expandedRowRender && (React__default.createElement(motion.tr, { key: `${rowId}-expanded`, initial: "collapsed", animate: "expanded", exit: "collapsed" },
+            React__default.createElement("td", { colSpan: colSpan, className: "p-0 border-b border-[var(--color-border)] dark:border-[var(--color-neutral-700)]" },
+                React__default.createElement(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" } },
+                    React__default.createElement(motion.div, { variants: tableExpandContentAnimations }, expandedRowRender(row)))))))));
+}
+TableRowComponent.displayName = "TableRow";
+const TableRow = React__default.memo(TableRowComponent);
+
+export { TableRow };