@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useContext } from 'react';
+import { TableContext } from './Table.js';
+import { cn } from '../../../utils/cn.js';
+import { alignmentClasses } from './Table.utils.js';
+
+/**
+ * Declarative Table Header component
+ */
+const HeaderComponent = ({ children, freezeHeader, className = '' }) => {
+    const contextValue = useContext(TableContext);
+    const { theme } = contextValue;
+    const headerClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerContainerStyle, freezeHeader !== undefined
+        ? (freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '')
+        : (contextValue.freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : ''), className);
+    return (jsx("thead", { className: headerClasses, "data-freeze": freezeHeader ? 'true' : undefined, children: children }));
+};
+HeaderComponent.displayName = 'Table.Header';
+const Header = React__default.memo(HeaderComponent);
+/**
+ * Declarative Table Body component
+ */
+const BodyComponent = ({ children, className = '', }) => {
+    const { theme } = useContext(TableContext);
+    return (jsx("tbody", { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyStyle, className), children: children }));
+};
+BodyComponent.displayName = 'Table.Body';
+const Body = React__default.memo(BodyComponent);
+/**
+ * Declarative Table Row component
+ */
+const RowComponent = ({ children, isExpandable = false, isExpanded = false, onExpandToggle, isSelected = false, onSelectToggle, className = '', }) => {
+    const { theme } = useContext(TableContext);
+    const rowClasses = cn(theme === null || theme === void 0 ? void 0 : theme.rowStyle, isSelected && (theme === null || theme === void 0 ? void 0 : theme.selectedRowStyle), theme === null || theme === void 0 ? void 0 : theme.hoverRowStyle, className);
+    const handleRowClick = () => {
+        if (onSelectToggle) {
+            onSelectToggle();
+        }
+    };
+    return (jsx("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: children }));
+};
+RowComponent.displayName = 'Table.Row';
+const Row = React__default.memo(RowComponent);
+/**
+ * Declarative Table Cell component
+ */
+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 && alignmentClasses[align], className);
+    return (jsx("td", { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width }, colSpan: colSpan, role: "cell", children: children }));
+};
+CellComponent.displayName = 'Table.Cell';
+const Cell = React__default.memo(CellComponent);
+/**
+ * Declarative Table Header Cell component
+ */
+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 && alignmentClasses[align], isSortable && 'cursor-pointer', className);
+    return (jsx("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, children: jsxs("div", { className: cn("flex items-center", {
+                'justify-end': align === 'right',
+                'justify-center': align === 'center',
+            }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc' ? '\u2191' : '\u2193' }))] }) }));
+};
+HeaderCellComponent.displayName = 'Table.HeaderCell';
+const HeaderCell = React__default.memo(HeaderCellComponent);
+
+export { Body, Cell, Header, HeaderCell, Row };

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

@@ -0,0 +1,2 @@
+import { TableFilterProps } from "./Table.types";
+export declare function TableFilter<T>({ columns, filterConfig, onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, className, }: TableFilterProps<T>): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,221 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useCallback } from 'react';
+import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
+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 { Popover } from '../Popover/Popover.js';
+import '../Popover/PopoverContext.js';
+import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Renders the appropriate value input based on resolved filter type and operator
+ */
+function FilterValueInput({ filter, column, filterType, onValueChange, }) {
+    var _a, _b, _c, _d, _e;
+    // Unary operators need no value input
+    if (isUnaryOperator(filter.operator))
+        return null;
+    // Between operator needs two inputs
+    if (isBetweenOperator(filter.operator)) {
+        const betweenValue = Array.isArray(filter.value) ? filter.value : ["", ""];
+        const inputType = filterType === "date" ? "date" : "number";
+        return (jsxs("div", { className: "flex items-center gap-1 flex-1 min-w-0", children: [jsx(Input, { value: (_a = betweenValue[0]) !== null && _a !== void 0 ? _a : "", onChange: (e) => onValueChange([e.target.value, betweenValue[1]]), placeholder: "Min", size: "sm", type: inputType, className: "flex-1 min-w-0" }), jsx("span", { className: "text-xs text-[var(--color-text-muted)]", children: "\u2013" }), jsx(Input, { value: (_b = betweenValue[1]) !== null && _b !== void 0 ? _b : "", onChange: (e) => onValueChange([betweenValue[0], e.target.value]), placeholder: "Max", size: "sm", type: inputType, className: "flex-1 min-w-0" })] }));
+    }
+    // Select filter type
+    if (filterType === "select" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
+        const selectOptions = column.filterOptions.map((opt) => ({
+            id: opt.value,
+            label: opt.label,
+            value: opt.value,
+        }));
+        return (jsx(Select, { value: filter.value, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select..." }));
+    }
+    // MultiSelect filter type
+    if (filterType === "multiSelect" && (column === null || column === void 0 ? void 0 : column.filterOptions)) {
+        const selectOptions = column.filterOptions.map((opt) => ({
+            id: opt.value,
+            label: opt.label,
+            value: opt.value,
+        }));
+        return (jsx(Select, { value: filter.value, onChange: (value) => onValueChange(value), options: selectOptions, size: "sm", className: "flex-1 min-w-0", placeholder: "Select...", multiple: true }));
+    }
+    // Date filter type
+    if (filterType === "date") {
+        return (jsx(Input, { value: String((_c = filter.value) !== null && _c !== void 0 ? _c : ""), onChange: (e) => onValueChange(e.target.value), placeholder: "Select date...", size: "sm", type: "date", className: "flex-1 min-w-0" }));
+    }
+    // Number filter type
+    if (filterType === "number") {
+        return (jsx(Input, { value: String((_d = filter.value) !== null && _d !== void 0 ? _d : ""), onChange: (e) => onValueChange(e.target.value), placeholder: "Value...", size: "sm", type: "number", className: "flex-1 min-w-0" }));
+    }
+    // Default: text input
+    return (jsx(Input, { value: String((_e = filter.value) !== null && _e !== void 0 ? _e : ""), onChange: (e) => onValueChange(e.target.value), placeholder: "Filter value...", size: "sm", type: "text", className: "flex-1 min-w-0" }));
+}
+function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, className, }) {
+    const filterableColumns = columns.filter((col) => col.filterable);
+    // Internal filter logic state
+    const [internalLogic, setInternalLogic] = useState("and");
+    const filterLogic = controlledLogic !== null && controlledLogic !== void 0 ? controlledLogic : internalLogic;
+    const handleSetLogic = useCallback((logic) => {
+        if (onFilterLogicChange) {
+            onFilterLogicChange(logic);
+        }
+        else {
+            setInternalLogic(logic);
+        }
+    }, [onFilterLogicChange]);
+    const [activeFilters, setActiveFilters] = useState(() => {
+        if (filterConfig.length > 0) {
+            return filterConfig.map((fc, i) => {
+                var _a;
+                return ({
+                    id: fc.id || `filter-${i}`,
+                    columnId: fc.columnId,
+                    operator: fc.operator || "contains",
+                    value: (_a = fc.value) !== null && _a !== void 0 ? _a : "",
+                });
+            });
+        }
+        // Auto-show one empty filter row on first open
+        const defaultColumn = filterableColumns[0];
+        if (!defaultColumn)
+            return [];
+        const resolvedType = inferFilterType(defaultColumn, data);
+        return [
+            {
+                id: `filter-${Date.now()}`,
+                columnId: defaultColumn.id,
+                operator: getDefaultOperator(resolvedType),
+                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 getSelectedColumn = (columnId) => filterableColumns.find((col) => col.id === columnId);
+    const getResolvedFilterType = (column) => {
+        if (!column)
+            return "text";
+        return inferFilterType(column, data);
+    };
+    const syncFilters = (filters) => {
+        const newFilterConfig = filters
+            .filter((f) => {
+            if (!f.columnId)
+                return false;
+            // Unary operators are always active
+            if (isUnaryOperator(f.operator))
+                return true;
+            // Non-unary operators need a value
+            if (f.value == null || f.value === "")
+                return false;
+            // Between needs both values
+            if (isBetweenOperator(f.operator)) {
+                return (Array.isArray(f.value) && f.value[0] !== "" && f.value[1] !== "");
+            }
+            return true;
+        })
+            .map((f) => ({
+            id: f.id,
+            columnId: f.columnId,
+            value: f.value,
+            operator: f.operator,
+        }));
+        onFilterChange(newFilterConfig);
+    };
+    const handleAddFilter = () => {
+        const defaultColumn = filterableColumns[0];
+        if (!defaultColumn)
+            return;
+        const resolvedType = getResolvedFilterType(defaultColumn);
+        const defaultOp = getDefaultOperator(resolvedType);
+        setActiveFilters((prev) => [
+            ...prev,
+            {
+                id: `filter-${Date.now()}`,
+                columnId: defaultColumn.id,
+                operator: defaultOp,
+                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) => {
+                if (f.id !== filterId)
+                    return f;
+                const newColumn = getSelectedColumn(columnId);
+                const newType = getResolvedFilterType(newColumn);
+                const newOp = getDefaultOperator(newType);
+                return { ...f, columnId, operator: newOp, value: "" };
+            });
+            syncFilters(updated);
+            return updated;
+        });
+    };
+    const handleFilterOperatorChange = (filterId, operator) => {
+        setActiveFilters((prev) => {
+            const updated = prev.map((f) => {
+                if (f.id !== filterId)
+                    return f;
+                // Reset value when switching to/from between or unary operators
+                const wasUnary = isUnaryOperator(f.operator);
+                const nowUnary = isUnaryOperator(operator);
+                const wasBetween = isBetweenOperator(f.operator);
+                const nowBetween = isBetweenOperator(operator);
+                let newValue = f.value;
+                if (wasUnary !== nowUnary || wasBetween !== nowBetween) {
+                    newValue = nowBetween ? ["", ""] : "";
+                }
+                return { ...f, operator, value: newValue };
+            });
+            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 appliedFilterCount = activeFilters.filter((f) => {
+        if (!f.columnId)
+            return false;
+        if (isUnaryOperator(f.operator))
+            return true;
+        return f.value != null && f.value !== "";
+    }).length;
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(FunnelIcon, { className: "size-4", "aria-hidden": "true" }), "Filters", appliedFilterCount > 0 && (jsx("span", { className: "ml-1 inline-flex items-center justify-center size-5 rounded-full bg-[var(--color-primary)] text-white text-xs font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Content, { className: "p-0 max-w-none", children: jsxs("div", { className: cn("w-[500px] p-3", className), role: "dialog", "aria-labelledby": "table-filter-title", "aria-modal": "true", children: [jsxs("div", { className: "flex items-center justify-between mb-3", children: [jsx("div", { id: "table-filter-title", className: "text-xs uppercase font-bold text-[var(--color-text-placeholder)]", children: "Filters" }), activeFilters.length > 1 && (jsxs("div", { className: "flex items-center gap-0.5 rounded-md bg-[var(--color-background-secondary)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "and"
+                                                ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
+                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("and"), children: "AND" }), jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-xs font-medium rounded transition-colors", filterLogic === "or"
+                                                ? "bg-[var(--color-background)] text-[var(--color-text-primary)] shadow-sm"
+                                                : "text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"), onClick: () => handleSetLogic("or"), children: "OR" })] }))] }), jsx("div", { className: "-m-1 p-1 space-y-2 max-h-[300px] overflow-y-auto", children: activeFilters.map((filter) => {
+                                const selectedColumn = getSelectedColumn(filter.columnId);
+                                const resolvedType = getResolvedFilterType(selectedColumn);
+                                const operatorOptions = getOperatorsForFilterType(resolvedType);
+                                return (jsxs("div", { className: "flex items-center gap-1.5", children: [jsx(Select, { value: filter.columnId, onChange: (value) => handleFilterColumnChange(filter.id, value), options: columnOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(Select, { value: filter.operator, onChange: (value) => handleFilterOperatorChange(filter.id, value), options: operatorOptions, size: "sm", className: "flex-1 min-w-0" }), jsx(FilterValueInput, { filter: filter, column: selectedColumn, filterType: resolvedType, onValueChange: (value) => handleFilterValueChange(filter.id, value) }), jsx(Button, { color: "neutral", variant: "link", size: "sm", iconOnly: true, onClick: () => handleRemoveFilter(filter.id), "aria-label": "Remove filter", className: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]", children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2.5 }) })] }, filter.id));
+                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Button, { color: "neutral", variant: "link", size: "sm", onClick: handleAddFilter, children: [jsx(PlusIcon, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Button, { color: "neutral", variant: "link", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
+}
+
+export { TableFilter };

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

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

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

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { TableCell } from './TableCell.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, 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) {
+            newSortConfig.push({
+                columnId,
+                direction: 'asc',
+                priority: sortConfig.length + 1,
+            });
+        }
+        else if (currentSort.direction === 'asc') {
+            newSortConfig.push({
+                columnId,
+                direction: 'desc',
+                priority: currentSort.priority,
+            });
+        }
+        onSortChange(newSortConfig);
+    }, [sortConfig, onSortChange]);
+    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 dataLength = data.length;
+    const isAllSelected = selectedRows.length === dataLength && dataLength > 0;
+    const isIndeterminate = selectedRows.length > 0 && selectedRows.length < dataLength;
+    return (jsx("thead", { className: freezeHeader ? theme === null || theme === void 0 ? void 0 : theme.frozenHeaderStyle : '', children: jsxs("tr", { children: [(selectable || (expandable && expandedRowRender)) && (jsx(TableCell, { column: {
+                        id: UTILITY_COLUMN_ID,
+                        header: '',
+                        accessor: () => '',
+                        width: UTILITY_COLUMN_WIDTH,
+                    }, row: {}, rowId: "", isHeader: true, theme: theme, children: jsx("div", { className: "flex items-center gap-2", children: selectable && selectionType === 'checkbox' && (jsx(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 (jsx(TableCell, { column: column, row: {}, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, theme: theme, children: isSortable ? (jsxs("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}`, children: [column.header, currentSort && (jsx("span", { className: "text-xs", children: currentSort.direction === 'asc' ? '\u2191' : '\u2193' }))] })) : (column.header) }, column.id));
+                })] }) }));
+}
+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.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,25 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React__default from 'react';
+import { Pagination } from '../Pagination/Pagination.js';
+import { Select } from '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ */
+const TablePagination = React__default.forwardRef(({ currentPage, totalItems, pageSize, pageSizeOptions = [10, 25, 50, 100], onPageChange, onPageSizeChange, showPageSizeSelector = true, className, }, ref) => {
+    const totalPages = Math.ceil(totalItems / pageSize);
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, totalItems);
+    const pageSizeSelectOptions = pageSizeOptions.map((option) => ({
+        id: option,
+        label: option.toString(),
+        value: option,
+    }));
+    return (jsxs("div", { ref: ref, className: cn("flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] bg-[var(--color-background)]", className), children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm text-[var(--color-text-muted)]", children: "Rows per page:" }), jsx(Select, { value: pageSize, onChange: (value) => onPageSizeChange(value), options: pageSizeSelectOptions, size: "sm", className: "w-20" })] })), jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: totalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", startItem.toLocaleString(), " to ", endItem.toLocaleString(), " of", " ", totalItems.toLocaleString(), " results"] })) : ("No results") })] }), totalPages > 1 && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange, showPrevNext: true, showFirstLast: false, siblingCount: 1 }))] }));
+});
+TablePagination.displayName = "Table.Pagination";
+
+export { TablePagination };

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

@@ -0,0 +1,7 @@
+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>): import("react/jsx-runtime").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,35 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+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 (jsxs(Fragment, { children: [jsxs("tr", { className: rowClasses, "data-selected": isSelected, role: "row", "aria-selected": selectable ? isSelected : undefined, "aria-expanded": Boolean(expandedRowRender) ? isExpanded : undefined, children: [(selectable || expandedRowRender) && (jsx(TableCell, { column: {
+                            id: UTILITY_COLUMN_ID,
+                            header: "",
+                            accessor: () => "",
+                            width: UTILITY_COLUMN_WIDTH,
+                        }, row: row, rowId: rowId, isSelected: isSelected, theme: theme, children: jsxs("div", { className: "flex items-center gap-2", children: [selectable &&
+                                    (selectionType === "checkbox" ? (jsx(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" })) : (jsx("div", { onClick: (e) => e.stopPropagation(), children: jsx(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 && (jsx(Button, { color: "neutral", variant: "outline", size: "sm", iconOnly: true, onClick: handleExpandClick, "aria-label": isExpanded ? "Collapse row" : "Expand row", children: isExpanded ? (jsx(MinusIcon, { className: "size-4", strokeWidth: 2 })) : (jsx(PlusIcon, { className: "size-4", strokeWidth: 2 })) }))] }) })), columns.map((column, index) => (jsx(TableCell, { column: column, row: row, rowId: rowId, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, isSelected: isSelected, theme: theme }, column.id)))] }), jsx(AnimatePresence, { initial: false, children: isExpanded && expandedRowRender && (jsx(motion.tr, { initial: "collapsed", animate: "expanded", exit: "collapsed", children: jsx("td", { colSpan: colSpan, className: "p-0 border-b border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: jsx(motion.div, { variants: tableExpandAnimations, style: { overflow: "hidden" }, children: jsx(motion.div, { variants: tableExpandContentAnimations, children: expandedRowRender(row) }) }) }) }, `${rowId}-expanded`)) })] }));
+}
+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/TableSelectionHeader.js

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

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, UseTableFilterOptions } 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,33 @@
+import { FilterConfig, FilterLogic, FilterOperator, FilterValue, Column } from '../Table.types';
+export interface UseTableFilterOptions<T = any> {
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    /** Logic for combining filters */
+    filterLogic?: FilterLogic;
+    /** Callback when filter logic changes */
+    onFilterLogicChange?: (logic: FilterLogic) => void;
+    /** Data for built-in filtering */
+    data?: T[];
+    /** Columns for built-in filtering */
+    columns?: Column<T>[];
+    /** Enable built-in automatic filtering */
+    enableBuiltInFilter?: boolean;
+}
+export interface UseTableFilterReturn<T = any> {
+    handleAddFilter: (columnId: string, value: FilterValue, operator?: FilterOperator) => void;
+    handleRemoveFilter: (columnId: string) => void;
+    handleUpdateFilter: (columnId: string, value: FilterValue, operator?: FilterOperator) => void;
+    handleUpdateFilterById: (filterId: string, updates: Partial<FilterConfig>) => void;
+    handleClearFilters: () => void;
+    /** Current filter logic ('and' | 'or') */
+    filterLogic: FilterLogic;
+    /** Toggle between AND and OR logic */
+    handleToggleLogic: () => void;
+    /** Set filter logic directly */
+    handleSetLogic: (logic: FilterLogic) => void;
+    /** Generate a unique ID for a new filter */
+    generateFilterId: () => string;
+    /** Filtered data (only populated when enableBuiltInFilter is true) */
+    filteredData: T[];
+}
+export declare function useTableFilter<T = any>({ filterConfig, onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, columns, enableBuiltInFilter, }: UseTableFilterOptions<T>): UseTableFilterReturn<T>;