flikkui 0.2.0-beta.4 → 0.2.0-beta.5

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)));

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;