@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,373 @@
+import { ReactNode } from 'react';
+/**
+ * Defines bulk actions available when rows are selected
+ */
+export interface BulkAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Display label for the action button */
+    label: string;
+    /** Optional icon component to display in the action button */
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Visual style variant for the action button */
+    variant?: 'primary' | 'secondary' | 'danger';
+    /** Callback function when action is triggered with selected row IDs */
+    onClick: (selectedRows: string[]) => void;
+}
+/** Table visual variants for different styling approaches */
+export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+/** Text alignment options for table cells and headers */
+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' | 'notEquals' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'isEmpty' | 'isNotEmpty' | 'isTrue' | 'isFalse' | 'before' | 'after' | 'between';
+/** Filter type for column filter UI */
+export type FilterType = 'text' | 'number' | 'select' | 'multiSelect' | 'date' | 'boolean';
+/** Filter logic for combining multiple filters */
+export type FilterLogic = 'and' | 'or';
+/** Possible filter value types used in FilterConfig */
+export type FilterValue = string | number | boolean | string[];
+/** Option for select-type filter columns */
+export interface FilterOption {
+    label: string;
+    value: string;
+}
+/**
+ * Column definition for table data display and behavior
+ */
+export interface Column<T = any> {
+    /** Unique identifier for the column */
+    id: string;
+    /** Header content - can be string or React element */
+    header: string | ReactNode;
+    /** Property key or function to extract cell data from row object */
+    accessor: keyof T | ((row: T) => any);
+    /** Optional custom renderer for cell content */
+    cell?: (row: T) => ReactNode;
+    /** Enable sorting for this column */
+    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 */
+    tooltip?: boolean | ((row: T) => string);
+    /** Fixed width for the column */
+    width?: string | number;
+    /** Text alignment for column content */
+    align?: TableAlignment;
+    /** Whether column is hidden by default */
+    hidden?: boolean;
+    /** Whether column is locked and cannot be hidden or reordered */
+    locked?: boolean;
+}
+/**
+ * Configuration for column sorting state
+ */
+export interface SortConfig {
+    /** ID of the column being sorted */
+    columnId: string;
+    /** Sort direction - ascending or descending */
+    direction: 'asc' | 'desc';
+    /** Priority for multi-column sorting (lower numbers = higher priority) */
+    priority: number;
+}
+/**
+ * Configuration for column filtering state
+ */
+export interface FilterConfig {
+    /** Unique identifier for this filter instance */
+    id?: string;
+    /** ID of the column being filtered */
+    columnId: string;
+    /** Filter value - type depends on column data type */
+    value: FilterValue;
+    /** Filter operator for comparison */
+    operator?: FilterOperator;
+}
+export interface TableThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<TableVariant, string>>;
+    headerStyle?: string;
+    cellStyle?: string;
+    rowStyle?: string;
+    selectedRowStyle?: string;
+    hoverRowStyle?: string;
+    frozenColumnStyle?: string;
+    lastFrozenColumnStyle?: string;
+    frozenHeaderStyle?: string;
+    bodyStyle?: string;
+    headerContainerStyle?: string;
+    columnManagerButton?: string;
+    columnManagerContainer?: string;
+}
+export interface TableContextType {
+    theme: TableThemeOverrides;
+    variant: TableVariant;
+    freezeHeader?: boolean;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    sortable?: boolean;
+    sortConfig?: SortConfig[];
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    filterable?: boolean;
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    filterLogic?: FilterLogic;
+    expandable?: boolean;
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+}
+/**
+ * Main Table component props supporting both data-driven and declarative APIs
+ *
+ * @template T The type of data objects in each table row
+ */
+export interface TableProps<T = any> {
+    /** Array of data objects to display - required for data-driven API */
+    data?: T[];
+    /** Column definitions for data display and behavior - required for data-driven API */
+    columns?: Column<T>[];
+    /**
+     * Property name or function to extract stable row identifiers for React keys and selection.
+     * Provides consistent component identity during row reordering or updates.
+     */
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    /** Visual variant for different table styles */
+    variant?: TableVariant;
+    /** Theme overrides for custom styling */
+    theme?: TableThemeOverrides;
+    /** Additional CSS classes for customization */
+    className?: string;
+    /** Keep header visible when scrolling vertically */
+    freezeHeader?: boolean;
+    /** Keep first column visible when scrolling horizontally */
+    freezeFirstColumn?: boolean;
+    /** Keep last column visible when scrolling horizontally */
+    freezeLastColumn?: boolean;
+    /** Enable sorting functionality for sortable columns */
+    sortable?: boolean;
+    /** Current sort configuration state */
+    sortConfig?: SortConfig[];
+    /** Callback when sort configuration changes */
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    /** Enable filtering functionality for filterable columns */
+    filterable?: boolean;
+    /** Current filter configuration state */
+    filterConfig?: FilterConfig[];
+    /** Callback when filter configuration changes */
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    /** Logic for combining multiple filters (default: 'and') */
+    filterLogic?: FilterLogic;
+    /** Enable built-in automatic data filtering (opt-in). When true, the table filters data internally. */
+    enableBuiltInFilter?: boolean;
+    expandable?: boolean;
+    expandedRowRender?: (row: T) => ReactNode;
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+    bulkActions?: BulkAction[];
+    showColumnManager?: boolean;
+    visibleColumns?: string[];
+    onVisibleColumnsChange?: (visibleColumns: string[]) => void;
+    onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+    pagination?: {
+        pageSize: number;
+        currentPage: number;
+        totalItems: number;
+    };
+    children?: ReactNode;
+}
+export interface TableHeaderProps {
+    children?: ReactNode;
+    freezeHeader?: boolean;
+    className?: string;
+}
+export interface TableBodyProps {
+    children?: ReactNode;
+    className?: string;
+}
+export interface TableRowProps {
+    children?: ReactNode;
+    isExpandable?: boolean;
+    isExpanded?: boolean;
+    onExpandToggle?: () => void;
+    isSelected?: boolean;
+    onSelectToggle?: () => void;
+    className?: string;
+}
+export interface TableCellProps {
+    children?: ReactNode;
+    isFrozen?: boolean;
+    isLastFrozen?: boolean;
+    align?: TableAlignment;
+    width?: string | number;
+    className?: string;
+    colSpan?: number;
+}
+export interface TableHeaderCellProps extends Omit<TableCellProps, 'colSpan'> {
+    isSortable?: boolean;
+    sortDirection?: 'asc' | 'desc' | undefined;
+    onSort?: () => void;
+}
+export interface InternalTableHeaderProps<T> {
+    columns: Column<T>[];
+    sortConfig?: SortConfig[];
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    filterConfig?: FilterConfig[];
+    onFilterChange?: (filterConfig: FilterConfig[]) => void;
+    freezeHeader?: boolean;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    expandable?: boolean;
+    expandedRowRender?: (row: T) => ReactNode;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+    totalRowCount?: number;
+    theme?: TableThemeOverrides;
+    data?: T[];
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+}
+export interface InternalTableBodyProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    expandedRowRender?: (row: T) => ReactNode;
+    expandedRows?: string[];
+    onExpandedRowsChange?: (expandedRows: string[]) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    selectedRows?: string[];
+    onSelectionChange?: (selectedRows: string[]) => void;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    theme?: TableThemeOverrides;
+}
+export interface InternalTableRowProps<T> {
+    row: T;
+    rowId: string;
+    columns: Column<T>[];
+    expandedRowRender?: (row: T) => ReactNode;
+    isExpanded?: boolean;
+    onExpandChange?: (expanded: boolean) => void;
+    selectable?: boolean;
+    selectionType?: SelectionType;
+    isSelected?: boolean;
+    onSelectionChange?: (selected: boolean) => void;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    theme?: TableThemeOverrides;
+}
+export interface InternalTableCellProps<T> {
+    column: Column<T>;
+    row: T;
+    rowId: string;
+    isHeader?: boolean;
+    isFrozen?: boolean;
+    isLastFrozen?: boolean;
+    isSelected?: boolean;
+    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;
+    /** Logic for combining multiple filters */
+    filterLogic?: FilterLogic;
+    /** Callback when filter logic changes */
+    onFilterLogicChange?: (logic: FilterLogic) => void;
+    /** Data array for auto-detecting filter types from column values */
+    data?: T[];
+    className?: string;
+}

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

@@ -0,0 +1,15 @@
+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
+ * @param index - The row index as fallback
+ * @param rowKey - Optional key extractor function or property name
+ * @returns A stable string identifier for the row
+ */
+export declare function getRowId<T extends Record<string, any>>(row: T, index: number, rowKey?: keyof T | ((row: T, index: number) => string | number)): string;

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

@@ -0,0 +1,40 @@
+/** 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
+ * @param index - The row index as fallback
+ * @param rowKey - Optional key extractor function or property name
+ * @returns A stable string identifier for the row
+ */
+function getRowId(row, index, rowKey) {
+    if (!rowKey) {
+        // Fallback to index if no rowKey is provided (maintains backward compatibility)
+        return `row-${index}`;
+    }
+    if (typeof rowKey === 'function') {
+        // Use the function to extract the key
+        const key = rowKey(row, index);
+        return `row-${key}`;
+    }
+    // Use the property name to extract the key
+    const key = row[rowKey];
+    if (key === undefined || key === null) {
+        // Fallback to index if the property doesn't exist or is null/undefined
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[Table]: Row key property "${String(rowKey)}" is undefined or null for row at index ${index}. Falling back to index-based key.`);
+        }
+        return `row-${index}`;
+    }
+    return `row-${key}`;
+}
+
+export { UTILITY_COLUMN_ID, UTILITY_COLUMN_WIDTH, alignmentClasses, getRowId };

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

@@ -0,0 +1,7 @@
+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
+ */
+export declare const TableActions: <T>({ actions, row, maxVisibleActions, className, }: TableActionsProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+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 '../Dropdown/Dropdown.theme.js';
+import { Button } from '../Button/Button.js';
+import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
+
+/**
+ * TableActions component with smart display logic
+ * - <=2 actions: Show as individual icon buttons
+ * - >=3 actions: Show all actions in overflow menu using Dropdown
+ */
+const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
+    const sortedActions = useMemo(() => {
+        return [...actions].sort((a, b) => {
+            const priorityOrder = { high: 0, normal: 1 };
+            const aPriority = priorityOrder[a.priority || "normal"];
+            const bPriority = priorityOrder[b.priority || "normal"];
+            return aPriority - bPriority;
+        });
+    }, [actions]);
+    const shouldUseMenu = actions.length > maxVisibleActions;
+    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]);
+    const handleAction = (key) => {
+        var _a;
+        const action = sortedActions.find((a) => a.id === key);
+        if (action && !((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))) {
+            action.onClick(row);
+        }
+    };
+    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 (jsx(Button, { color: "primary", variant: "link", iconOnly: true, onClick: () => action.onClick(row), disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === "danger"
+                    ? "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)]"), children: jsx(Icon, { className: "size-4" }) }, action.id));
+        });
+    };
+    const renderOverflowMenu = () => {
+        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "neutral", variant: "link", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(EllipsisHorizontalIcon, { className: "size-4" }) }) }), jsx(Dropdown.Menu, { "aria-label": "Row actions", children: sortedActions.map((action) => {
+                        const Icon = action.icon;
+                        return (jsx(Dropdown.Item, { itemKey: action.id, isDanger: action.variant === "danger", startContent: jsx(Icon, { className: "size-4" }), children: action.label }, action.id));
+                    }) })] }));
+    };
+    return (jsx("div", { className: cn("flex items-center justify-end", className), children: shouldUseMenu
+            ? renderOverflowMenu()
+            : renderInlineActions(sortedActions) }));
+};
+
+export { TableActions };

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

@@ -0,0 +1,5 @@
+import { TableActionsMenuProps } from './Table.types';
+/**
+ * TableActionsMenu component for displaying actions in an overflow menu
+ */
+export declare const TableActionsMenu: <T>({ actions, row, onClose, className, }: TableActionsMenuProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../utils/cn.js';
+import 'react';
+
+/**
+ * TableActionsMenu component for displaying actions in an overflow menu
+ */
+const TableActionsMenu = ({ actions, row, onClose, className, }) => {
+    const handleActionClick = (action) => {
+        var _a;
+        if ((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))
+            return;
+        action.onClick(row);
+        onClose();
+    };
+    return (jsx("div", { className: cn("min-w-[180px] p-1", className), role: "menu", "aria-label": "Row actions", children: 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 (jsxs("button", { 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, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
+        }) }));
+};
+
+export { TableActionsMenu };

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

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

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

@@ -0,0 +1,26 @@
+import { jsx } from 'react/jsx-runtime';
+import { TableRow } from './TableRow.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 } = useTableExpansion({
+        expandedRows,
+        onExpandedRowsChange,
+    });
+    const { handleSelectionChange } = useTableSelection({
+        data,
+        rowKey,
+        selectionType,
+        selectedRows,
+        onSelectionChange,
+    });
+    return (jsx("tbody", { children: data.map((row, index) => {
+            const rowId = getRowId(row, index, rowKey);
+            return (jsx(TableRow, { 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 }, rowId));
+        }) }));
+}
+const TableBody = TableBodyComponent;
+
+export { TableBody };

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

@@ -0,0 +1,14 @@
+import React from 'react';
+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
+ *
+ * @internal This component is used internally by the Table component
+ */
+declare function TableCellComponent<T extends Record<string, any>>({ column, row, rowId, isHeader, isFrozen, isLastFrozen, isSelected, theme, children, }: InternalTableCellProps<T>): React.ReactElement;
+declare namespace TableCellComponent {
+    var displayName: string;
+}
+export declare const TableCell: typeof TableCellComponent;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+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
+ *
+ * @internal This component is used internally by the Table component
+ */
+function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, isSelected = 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 && alignmentClasses[column.align], isUtilityColumn && 'whitespace-nowrap');
+        return (jsx(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: children || column.header }));
+    }
+    // For data cells, extract value using accessor (string key or function)
+    const value = typeof column.accessor === 'function'
+        ? column.accessor(row)
+        : row[column.accessor];
+    // Use custom cell renderer if provided, otherwise display raw value
+    const content = column.cell ? column.cell(row) : value;
+    // Generate tooltip content if tooltip is enabled
+    const tooltipContent = typeof column.tooltip === 'function'
+        ? column.tooltip(row)
+        : 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), isSelected && "bg-[var(--color-primary-50)]/50 dark:bg-[var(--color-primary-500)]/20", column.align && alignmentClasses[column.align], column.ellipsis && 'truncate', isUtilityColumn && 'whitespace-nowrap');
+    return (jsx(Cell, { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: column.width }, title: tooltipContent, role: "cell", children: children || content }));
+}
+TableCellComponent.displayName = 'TableCell';
+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,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 (jsx(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 (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "neutral", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Cog6ToothIcon, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Content, { className: "p-0", children: jsxs("div", { className: "w-64 p-3 overflow-hidden", role: "dialog", "aria-labelledby": "column-manager-title", "aria-describedby": "column-manager-description", "aria-modal": "true", children: [jsx("div", { id: "column-manager-title", className: "text-xs uppercase font-bold mb-3 text-[var(--color-text-placeholder)]", children: "Manage Columns" }), jsx("div", { id: "column-manager-description", className: "sr-only", children: "Use checkboxes to control which columns are visible in the table. Locked columns cannot be hidden." }), jsx("div", { className: "space-y-0.5", role: "group", "aria-label": "Column visibility options", children: onColumnReorder ? (jsx(Sortable, { onReorder: onColumnReorder, showDragHandle: true, className: "space-y-0.5", children: orderedColumns.map((column) => (jsx(SortableItem, { id: column.id, disabled: column.locked === true, className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id))) })) : (orderedColumns.map((column) => (jsx("div", { className: `hover:bg-[var(--color-background-tertiary)] rounded-lg p-1.5 transition-colors ${column.locked ? 'bg-[var(--color-background-secondary)]' : ''}`, children: renderColumnItem(column) }, column.id)))) }), jsx("div", { className: "mt-3 flex justify-end", children: jsx(Button, { color: "neutral", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
+}
+const TableColumnManager = TableColumnManagerComponent;
+
+export { TableColumnManager };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+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>;
+export declare const Cell: React.NamedExoticComponent<TableCellProps>;
+export declare const HeaderCell: React.NamedExoticComponent<TableHeaderCellProps>;