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

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

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { TableSelectionHeaderProps } from "./Table.types";
+/**
+ * Selection header that appears when rows are selected
+ * Shows selection count and bulk action buttons
+ */
+export declare const TableSelectionHeader: React.FC<TableSelectionHeaderProps>;

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

@@ -1,7 +1,7 @@
 import React__default from 'react';
 import { XMarkIcon } from '@heroicons/react/24/outline';
-import { Button } from '../../../Button/Button.js';
-import { cn } from '../../../../../utils/cn.js';
+import { Button } from '../Button/Button.js';
+import { cn } from '../../../utils/cn.js';
 
 /**
  * Selection header that appears when rows are selected
@@ -10,13 +10,12 @@ import { cn } from '../../../../../utils/cn.js';
 const TableSelectionHeader = ({ selectedCount, totalCount, selectedRows, bulkActions = [], onClearSelection, className, }) => {
     if (selectedCount === 0)
         return null;
-    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-neutral-50 z-10", className) },
+    return (React__default.createElement("div", { className: cn("flex items-center justify-between px-3 py-1 rounded-lg shadow-xl bg-[var(--color-background-secondary)] z-10", className) },
         React__default.createElement("div", { className: "flex items-center gap-3" },
-            React__default.createElement("span", { className: "text-[var(--color-text-muted)] text-sm border-r border-border pr-3" }, selectedCount === totalCount
+            React__default.createElement("span", { className: "text-[var(--color-text-muted)] text-sm border-r border-[var(--color-border)] pr-3" }, selectedCount === totalCount
                 ? `All ${selectedCount} selected`
                 : `${selectedCount} selected`),
             bulkActions.length > 0 && (React__default.createElement("div", { className: "flex items-center gap-2" }, bulkActions.map((action) => {
-                action.icon;
                 return (React__default.createElement(Button, { key: action.id, color: "neutral", variant: "filled", onClick: () => action.onClick(selectedRows), className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", size: "sm" }, action.label));
             })))),
         React__default.createElement(Button, { color: "primary", variant: "link", onClick: onClearSelection, "aria-label": "Clear selection" },

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

@@ -0,0 +1,10 @@
+export { useTableColumns } from './useTableColumns';
+export { useTableSelection } from './useTableSelection';
+export { useTableExpansion } from './useTableExpansion';
+export { useTablePagination } from './useTablePagination';
+export { useTableFilter } from './useTableFilter';
+export type { UseTableColumnsReturn } from './useTableColumns';
+export type { UseTableSelectionReturn } from './useTableSelection';
+export type { UseTableExpansionReturn } from './useTableExpansion';
+export type { UseTablePaginationReturn } from './useTablePagination';
+export type { UseTableFilterReturn } from './useTableFilter';

package/dist/components/core/Table/hooks/useTableColumns.d.ts

@@ -0,0 +1,16 @@
+import { Column } from '../Table.types';
+export interface UseTableColumnsOptions<T> {
+    columns?: Column<T>[];
+    initialVisibleColumns?: string[];
+    onVisibleColumnsChange?: (visibleColumns: string[]) => void;
+    onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+}
+export interface UseTableColumnsReturn<T> {
+    visibleColumns: string[];
+    columnOrder: string[];
+    visibleColumnsList: Column<T>[];
+    handleToggleColumn: (columnId: string) => void;
+    handleColumnReorder: (fromIndex: number, toIndex: number) => void;
+    handleResetToDefault: () => void;
+}
+export declare function useTableColumns<T>({ columns, initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, }: UseTableColumnsOptions<T>): UseTableColumnsReturn<T>;

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

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+
+function useTableColumns({ columns, initialVisibleColumns, onVisibleColumnsChange, onColumnReorder, }) {
+    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 handleVisibleColumnsChange = useCallback((newVisibleColumns) => {
+        setVisibleColumns(newVisibleColumns);
+        onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
+    }, [onVisibleColumnsChange]);
+    const handleToggleColumn = useCallback((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;
+        setVisibleColumns(prev => {
+            const newVisibleColumns = prev.includes(columnId)
+                ? prev.filter((id) => id !== columnId)
+                : [...prev, columnId];
+            onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
+            return newVisibleColumns;
+        });
+    }, [columns, onVisibleColumnsChange]);
+    const handleColumnReorder = useCallback((fromIndex, toIndex) => {
+        setColumnOrder(prev => {
+            const newColumnOrder = [...prev];
+            const [movedColumn] = newColumnOrder.splice(fromIndex, 1);
+            newColumnOrder.splice(toIndex, 0, movedColumn);
+            return newColumnOrder;
+        });
+        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(fromIndex, toIndex);
+    }, [onColumnReorder]);
+    const handleResetToDefault = useCallback(() => {
+        const lockedColumnIds = (columns === null || columns === void 0 ? void 0 : columns.filter(col => col.locked).map(col => col.id)) || [];
+        const resetVisibleColumns = Array.from(new Set([...defaultVisibleColumns, ...lockedColumnIds]));
+        handleVisibleColumnsChange(resetVisibleColumns);
+        if (columns) {
+            setColumnOrder(columns.map((col) => col.id));
+        }
+    }, [columns, defaultVisibleColumns, handleVisibleColumnsChange]);
+    const visibleColumnsList = useMemo(() => {
+        if (!columns)
+            return [];
+        if (columnOrder.length > 0) {
+            return columnOrder
+                .map(colId => columns.find(col => col.id === colId))
+                .filter((col) => col !== undefined && visibleColumns.includes(col.id));
+        }
+        return columns.filter((col) => visibleColumns.includes(col.id));
+    }, [columns, columnOrder, visibleColumns]);
+    return {
+        visibleColumns,
+        columnOrder,
+        visibleColumnsList,
+        handleToggleColumn,
+        handleColumnReorder,
+        handleResetToDefault,
+    };
+}
+
+export { useTableColumns };

package/dist/components/core/Table/hooks/useTableExpansion.d.ts

@@ -0,0 +1,8 @@
+export interface UseTableExpansionOptions {
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+}
+export interface UseTableExpansionReturn {
+    handleExpandChange: (rowId: string, expanded: boolean) => void;
+}
+export declare function useTableExpansion({ expandedRows, onExpandedRowsChange, }: UseTableExpansionOptions): UseTableExpansionReturn;

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

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+function useTableExpansion({ expandedRows = [], onExpandedRowsChange, }) {
+    const handleExpandChange = useCallback((rowId, expanded) => {
+        if (!onExpandedRowsChange)
+            return;
+        const newExpandedRows = expanded
+            ? [...expandedRows, rowId]
+            : expandedRows.filter(id => id !== rowId);
+        onExpandedRowsChange(newExpandedRows);
+    }, [expandedRows, onExpandedRowsChange]);
+    return { handleExpandChange };
+}
+
+export { useTableExpansion };

package/dist/components/core/Table/hooks/useTableFilter.d.ts

@@ -0,0 +1,12 @@
+import { FilterConfig, FilterOperator } from '../Table.types';
+export interface UseTableFilterOptions {
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+}
+export interface UseTableFilterReturn {
+    handleAddFilter: (columnId: string, value: any, operator?: FilterOperator) => void;
+    handleRemoveFilter: (columnId: string) => void;
+    handleUpdateFilter: (columnId: string, value: any, operator?: FilterOperator) => void;
+    handleClearFilters: () => void;
+}
+export declare function useTableFilter({ filterConfig, onFilterChange, }: UseTableFilterOptions): UseTableFilterReturn;

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

@@ -0,0 +1,37 @@
+import { useCallback } from 'react';
+
+function useTableFilter({ filterConfig = [], onFilterChange, }) {
+    const handleAddFilter = useCallback((columnId, value, operator) => {
+        if (!onFilterChange)
+            return;
+        const existing = filterConfig.find(f => f.columnId === columnId);
+        if (existing) {
+            const updated = filterConfig.map(f => f.columnId === columnId ? { ...f, value, operator } : f);
+            onFilterChange(updated);
+        }
+        else {
+            onFilterChange([...filterConfig, { columnId, value, operator }]);
+        }
+    }, [filterConfig, onFilterChange]);
+    const handleRemoveFilter = useCallback((columnId) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.filter(f => f.columnId !== columnId));
+    }, [filterConfig, onFilterChange]);
+    const handleUpdateFilter = useCallback((columnId, value, operator) => {
+        if (!onFilterChange)
+            return;
+        onFilterChange(filterConfig.map(f => f.columnId === columnId ? { ...f, value, operator } : f));
+    }, [filterConfig, onFilterChange]);
+    const handleClearFilters = useCallback(() => {
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange([]);
+    }, [onFilterChange]);
+    return {
+        handleAddFilter,
+        handleRemoveFilter,
+        handleUpdateFilter,
+        handleClearFilters,
+    };
+}
+
+export { useTableFilter };

package/dist/components/core/Table/hooks/useTablePagination.d.ts

@@ -0,0 +1,12 @@
+export interface UseTablePaginationOptions<T> {
+    data?: T[];
+    pagination?: {
+        pageSize: number;
+        currentPage: number;
+        totalItems: number;
+    };
+}
+export interface UseTablePaginationReturn<T> {
+    paginatedData: T[];
+}
+export declare function useTablePagination<T>({ data, pagination, }: UseTablePaginationOptions<T>): UseTablePaginationReturn<T>;

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

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+
+function useTablePagination({ data, pagination, }) {
+    const paginatedData = useMemo(() => {
+        if (pagination && data) {
+            return data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize);
+        }
+        return data || [];
+    }, [data, pagination]);
+    return { paginatedData };
+}
+
+export { useTablePagination };

package/dist/components/core/Table/hooks/useTableSelection.d.ts

@@ -0,0 +1,17 @@
+import { SelectionType } from '../Table.types';
+export interface UseTableSelectionOptions<T> {
+    data: T[];
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+}
+export interface UseTableSelectionReturn {
+    isAllSelected: boolean;
+    isIndeterminate: boolean;
+    handleSelectAll: (checked: boolean) => void;
+    handleSelectionChange: (rowId: string, selected: boolean) => void;
+    handleClearSelection: () => void;
+}
+export declare function useTableSelection<T extends Record<string, any>>({ data, rowKey, selectionType, selectedRows, onSelectionChange, }: UseTableSelectionOptions<T>): UseTableSelectionReturn;

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

@@ -0,0 +1,40 @@
+import { useMemo, useCallback } from 'react';
+import { getRowId } from '../Table.utils.js';
+
+function useTableSelection({ data, rowKey, selectionType = 'checkbox', selectedRows = [], onSelectionChange, }) {
+    const isAllSelected = useMemo(() => selectedRows.length === data.length && data.length > 0, [selectedRows.length, data.length]);
+    const isIndeterminate = useMemo(() => selectedRows.length > 0 && selectedRows.length < data.length, [selectedRows.length, data.length]);
+    const handleSelectAll = useCallback((checked) => {
+        if (!onSelectionChange || selectionType !== 'checkbox')
+            return;
+        if (checked) {
+            const allRowIds = data.map((row, index) => getRowId(row, index, rowKey));
+            onSelectionChange(allRowIds);
+        }
+        else {
+            onSelectionChange([]);
+        }
+    }, [data, rowKey, selectionType, onSelectionChange]);
+    const handleSelectionChange = useCallback((rowId, selected) => {
+        if (!onSelectionChange)
+            return;
+        const newSelectedRows = selectionType === 'checkbox'
+            ? selected
+                ? [...selectedRows, rowId]
+                : selectedRows.filter(id => id !== rowId)
+            : selected ? [rowId] : [];
+        onSelectionChange(newSelectedRows);
+    }, [selectionType, selectedRows, onSelectionChange]);
+    const handleClearSelection = useCallback(() => {
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
+    }, [onSelectionChange]);
+    return {
+        isAllSelected,
+        isIndeterminate,
+        handleSelectAll,
+        handleSelectionChange,
+        handleClearSelection,
+    };
+}
+
+export { useTableSelection };