@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/data-display/Table/Table.types.d.ts

@@ -18,6 +18,13 @@ export interface BulkAction {
 }
 /** Table visual variants for different styling approaches */
 export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+/**
+ * Edge padding behavior for table cells.
+ * - `default`: First/last cells receive extra side padding (matches inner cells).
+ * - `flush`: First/last cells have zero side padding so values align flush with the table's container edges.
+ *   Useful for invoice-style layouts where the table sits inside a padded card.
+ */
+export type TablePadding = 'default' | 'flush';
 /** Text alignment options for table cells and headers */
 export type TableAlignment = 'left' | 'center' | 'right';
 /** Selection control types for row selection */
@@ -38,13 +45,13 @@ export interface FilterOption {
 /**
  * Column definition for table data display and behavior
  */
-export interface Column<T = any> {
+export interface Column<T = unknown> {
     /** 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);
+    accessor: keyof T | ((row: T) => ReactNode | string | number | boolean | null | undefined);
     /** Optional custom renderer for cell content */
     cell?: (row: T) => ReactNode;
     /** Enable sorting for this column */
@@ -95,6 +102,8 @@ export interface FilterConfig {
 export interface TableThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<TableVariant, string>>;
+    /** Edge-padding mode classes applied at the table root via descendant selectors */
+    paddingStyles?: Partial<Record<TablePadding, string>>;
     headerStyle?: string;
     cellStyle?: string;
     rowStyle?: string;
@@ -111,6 +120,8 @@ export interface TableThemeOverrides {
 export interface TableContextType {
     theme: TableThemeOverrides;
     variant: TableVariant;
+    /** Whether the scroll container is horizontally overflowing — used to apply frozen column backdrop styles */
+    isOverflowing?: boolean;
     freezeHeader?: boolean;
     freezeFirstColumn?: boolean;
     freezeLastColumn?: boolean;
@@ -134,7 +145,7 @@ export interface TableContextType {
  *
  * @template T The type of data objects in each table row
  */
-export interface TableProps<T = any> {
+export interface TableProps<T = unknown> {
     /** 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 */
@@ -144,8 +155,20 @@ export interface TableProps<T = any> {
      * Provides consistent component identity during row reordering or updates.
      */
     rowKey?: keyof T | ((row: T, index: number) => string | number);
+    /**
+     * Row-level click handler (data-driven API). When provided, body rows get a
+     * pointer cursor, keyboard focus (Enter/Space activates), and call back with
+     * the row record. Selection/expansion controls stop propagation as before.
+     */
+    onRowClick?: (row: T) => void;
     /** Visual variant for different table styles */
     variant?: TableVariant;
+    /**
+     * Edge padding behavior. `flush` removes left padding from the first cell and right padding
+     * from the last cell so column values align flush with the table's container edges.
+     * @default "default"
+     */
+    padding?: TablePadding;
     /** Theme overrides for custom styling */
     theme?: TableThemeOverrides;
     /** Additional CSS classes for customization */
@@ -191,6 +214,8 @@ export interface TableProps<T = any> {
         totalItems: number;
     };
     children?: ReactNode;
+    /** Optional accessible caption for the table, rendered as a visually-hidden <caption> element */
+    caption?: string;
 }
 export interface TableHeaderProps {
     children?: ReactNode;
@@ -248,6 +273,7 @@ export interface InternalTableBodyProps<T> {
     data: T[];
     columns: Column<T>[];
     rowKey?: keyof T | ((row: T, index: number) => string | number);
+    onRowClick?: (row: T) => void;
     expandedRowRender?: (row: T) => ReactNode;
     expandedRows?: string[];
     onExpandedRowsChange?: (expandedRows: string[]) => void;
@@ -263,6 +289,7 @@ export interface InternalTableRowProps<T> {
     row: T;
     rowId: string;
     columns: Column<T>[];
+    onRowClick?: (row: T) => void;
     expandedRowRender?: (row: T) => ReactNode;
     isExpanded?: boolean;
     onExpandChange?: (expanded: boolean) => void;
@@ -282,12 +309,14 @@ export interface InternalTableCellProps<T> {
     isFrozen?: boolean;
     isLastFrozen?: boolean;
     isSelected?: boolean;
+    /** Current sort direction for this header cell (data-driven API); sets aria-sort. */
+    sortDirection?: 'asc' | 'desc';
     theme?: TableThemeOverrides;
     children?: ReactNode;
 }
 export type ActionVariant = 'default' | 'danger';
 export type ActionPriority = 'high' | 'normal';
-export interface ActionItem<T = any> {
+export interface ActionItem<T = unknown> {
     /** Unique identifier for the action */
     id: string;
     /** Display label for the action */
@@ -305,7 +334,7 @@ export interface ActionItem<T = any> {
     /** Function to determine if action should be disabled */
     disabled?: (row: T) => boolean;
 }
-export interface TableActionsProps<T = any> {
+export interface TableActionsProps<T = unknown> {
     /** Array of action items to display */
     actions: ActionItem<T>[];
     /** Row data to pass to action handlers */
@@ -315,7 +344,7 @@ export interface TableActionsProps<T = any> {
     /** Additional CSS class name */
     className?: string;
 }
-export interface TableActionsMenuProps<T = any> {
+export interface TableActionsMenuProps<T = unknown> {
     /** Array of action items to display in menu */
     actions: ActionItem<T>[];
     /** Row data to pass to action handlers */
@@ -351,7 +380,7 @@ export interface TableSelectionHeaderProps {
     onClearSelection: () => void;
     className?: string;
 }
-export interface TableColumnManagerProps<T = any> {
+export interface TableColumnManagerProps<T = unknown> {
     columns: Column<T>[];
     visibleColumns: string[];
     columnOrder: string[];
@@ -359,7 +388,7 @@ export interface TableColumnManagerProps<T = any> {
     onResetToDefault: () => void;
     onColumnReorder?: (fromIndex: number, toIndex: number) => void;
 }
-export interface TableFilterProps<T = any> {
+export interface TableFilterProps<T = unknown> {
     columns: Column<T>[];
     filterConfig: FilterConfig[];
     onFilterChange: (filterConfig: FilterConfig[]) => void;

package/dist/components/data-display/Table/TableActions.js

@@ -1,5 +1,7 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
+import { DotsThree } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 import { Dropdown } from '../../core/Dropdown/Dropdown.js';
 import '../../core/Dropdown/DropdownTrigger.js';
@@ -9,7 +11,6 @@ import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
 import { Button } from '../../core/Button/Button.js';
-import { EllipsisHorizontalIcon } from '@heroicons/react/20/solid';
 
 /**
  * TableActions component with smart display logic
@@ -31,25 +32,25 @@ const TableActions = ({ actions, row, maxVisibleActions = 2, className, }) => {
             .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) => {
+    const handleAction = useCallback((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);
         }
-    };
+    }, [sortedActions, 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"
+            return (jsx(Button, { color: "primary", variant: "ghost", 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) => {
+        return (jsxs(Dropdown, { placement: "bottom-end", offset: 4, disabledKeys: disabledKeys, onAction: handleAction, children: [jsx(Dropdown.Trigger, { children: jsx(Button, { color: "mono", variant: "ghost", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] !border-none", children: jsx(DotsThree, { 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));
                     }) })] }));

package/dist/components/data-display/Table/TableActionsMenu.js

@@ -1,6 +1,8 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { cn } from '../../../utils/cn.js';
 import 'react';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * TableActionsMenu component for displaying actions in an overflow menu
@@ -17,9 +19,7 @@ const TableActionsMenu = ({ actions, row, onClose, className, }) => {
             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));
+            return (jsxs(Button, { variant: "ghost", color: action.variant === 'danger' ? 'danger' : 'mono', size: "sm", onClick: () => handleActionClick(action), disabled: isDisabled, className: "w-full justify-start gap-3", role: "menuitem", "aria-label": action.label, children: [jsx(Icon, { className: "size-4 flex-shrink-0" }), jsx("span", { children: action.label })] }, action.id));
         }) }));
 };
 

package/dist/components/data-display/Table/TableBody.js

@@ -1,10 +1,11 @@
+"use client";
 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, }) {
+function TableBodyComponent({ data, columns, rowKey, onRowClick, expandedRowRender, expandedRows = [], onExpandedRowsChange, selectable, selectionType, selectedRows = [], onSelectionChange, freezeFirstColumn, freezeLastColumn, theme, }) {
     const { handleExpandChange } = useTableExpansion({
         expandedRows,
         onExpandedRowsChange,
@@ -18,7 +19,7 @@ function TableBodyComponent({ data, columns, rowKey, expandedRowRender, expanded
     });
     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));
+            return (jsx(TableRow, { row: row, rowId: rowId, columns: columns, onRowClick: onRowClick, 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;

package/dist/components/data-display/Table/TableCell.d.ts

@@ -6,7 +6,7 @@ import { InternalTableCellProps } from './Table.types';
  *
  * @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 function TableCellComponent<T extends Record<string, any>>({ column, row, rowId, isHeader, isFrozen, isLastFrozen, isSelected, sortDirection, theme, children, }: InternalTableCellProps<T>): React.ReactElement;
 declare namespace TableCellComponent {
     var displayName: string;
 }

package/dist/components/data-display/Table/TableCell.js

@@ -1,7 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import React__default, { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { UTILITY_COLUMN_ID, alignmentClasses } from './Table.utils.js';
+import { TableContext } from './TableContext.js';
 
 /**
  * Internal TableCell component used by the data-driven API
@@ -9,13 +11,19 @@ import { UTILITY_COLUMN_ID, alignmentClasses } from './Table.utils.js';
  *
  * @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, }) {
+function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = false, isLastFrozen = false, isSelected = false, sortDirection, theme, children, }) {
+    const { isOverflowing } = useContext(TableContext);
+    const overflowFrozenStyle = isOverflowing ? "backdrop-blur-md" : undefined;
     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 }));
+        const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isFrozen && overflowFrozenStyle, isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), isLastFrozen && overflowFrozenStyle, 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", scope: "col", "aria-label": typeof column.header === 'string' ? column.header : column.id, "aria-sort": sortDirection
+                ? sortDirection === 'asc'
+                    ? 'ascending'
+                    : 'descending'
+                : undefined, children: children || column.header }));
     }
     // For data cells, extract value using accessor (string key or function)
     const value = typeof column.accessor === 'function'
@@ -29,7 +37,7 @@ function TableCellComponent({ column, row, rowId, isHeader = false, isFrozen = f
         : column.tooltip
             ? String(value)
             : undefined;
-    const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), 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');
+    const cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isFrozen && overflowFrozenStyle, isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), isLastFrozen && overflowFrozenStyle, 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';

package/dist/components/data-display/Table/TableColumnManager.js

@@ -1,8 +1,11 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Popover } from '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
-import { Cog6ToothIcon } from '@heroicons/react/24/outline';
+import '../../core/Popover/PopoverBody.js';
+import { Gear } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
+import 'react';
 import { Checkbox } from '../../forms/Checkbox/Checkbox.js';
 import { Sortable, SortableItem } from '../../core/Sortable/Sortable.js';
 
@@ -16,7 +19,7 @@ function TableColumnManagerComponent({ columns, visibleColumns, columnOrder, onT
         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" }) })] }) })] }));
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "filled", "aria-label": "Manage column visibility", children: [jsx(Gear, { className: "size-5", "aria-hidden": "true" }), "Manage Columns"] }) }), jsx(Popover.Body, { 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-sm 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-surface-hover)] 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-surface-hover)] 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: "mono", variant: "filled", className: "w-full", onClick: onResetToDefault, children: "Reset to Default" }) })] }) })] }));
 }
 const TableColumnManager = TableColumnManagerComponent;
 

package/dist/components/data-display/Table/TableContext.d.ts

@@ -0,0 +1,11 @@
+import { TableContextType } from "./Table.types";
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ *
+ * Lives in its own module (not Table.tsx) so sub-components (TableCell,
+ * TableDeclarative) can consume the context without importing Table.tsx,
+ * which imports them back (circular dep). Table.tsx re-exports `TableContext`,
+ * so `from "./Table"` keeps working.
+ */
+export declare const TableContext: import("react").Context<TableContextType>;

package/dist/components/data-display/Table/TableContext.js

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+import { tableTheme } from './Table.theme.js';
+
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ *
+ * Lives in its own module (not Table.tsx) so sub-components (TableCell,
+ * TableDeclarative) can consume the context without importing Table.tsx,
+ * which imports them back (circular dep). Table.tsx re-exports `TableContext`,
+ * so `from "./Table"` keeps working.
+ */
+const TableContext = createContext({
+    theme: tableTheme,
+    variant: "default",
+    freezeHeader: false,
+    freezeFirstColumn: false,
+    freezeLastColumn: false,
+});
+
+export { TableContext };

package/dist/components/data-display/Table/TableDeclarative.js

@@ -1,8 +1,10 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useContext } from 'react';
-import { TableContext } from './Table.js';
+import { TableContext } from './TableContext.js';
 import { cn } from '../../../utils/cn.js';
 import { alignmentClasses } from './Table.utils.js';
+import { CaretUp, CaretDown } from '@phosphor-icons/react';
 
 /**
  * Declarative Table Header component
@@ -32,12 +34,7 @@ const Body = React__default.memo(BodyComponent);
 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 }));
+    return (jsx("tr", { className: rowClasses, "data-selected": isSelected ? 'true' : undefined, "data-expanded": isExpandable && isExpanded ? 'true' : undefined, onClick: onSelectToggle, role: "row", "aria-selected": isSelected, "aria-expanded": isExpandable ? isExpanded : undefined, children: children }));
 };
 RowComponent.displayName = 'Table.Row';
 const Row = React__default.memo(RowComponent);
@@ -57,10 +54,12 @@ const Cell = React__default.memo(CellComponent);
 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", {
+    return (jsx("th", { className: headerCellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, onClick: isSortable && onSort ? onSort : undefined, style: { width }, role: "columnheader", scope: "col", "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' }))] }) }));
+            }), children: [children, isSortable && sortDirection && (jsx("span", { className: "ml-1", children: sortDirection === 'asc'
+                        ? jsx(CaretUp, { className: "size-3.5" })
+                        : jsx(CaretDown, { className: "size-3.5" }) }))] }) }));
 };
 HeaderCellComponent.displayName = 'Table.HeaderCell';
 const HeaderCell = React__default.memo(HeaderCellComponent);

package/dist/components/data-display/Table/TableFilter.js

@@ -1,14 +1,17 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
-import { inferFilterType, getDefaultOperator, isUnaryOperator, getOperatorsForFilterType, isBetweenOperator } from './Table.filterUtils.js';
+import { useRef, useState, useCallback } from 'react';
+import { inferFilterType, getDefaultOperator, isUnaryOperator, isBetweenOperator, getOperatorsForFilterType } from './Table.filterUtils.js';
 import { Button } from '../../core/Button/Button.js';
+import { Link } from '../../core/Link/Link.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 '../../core/Popover/Popover.js';
 import '../../core/Popover/PopoverContext.js';
-import { FunnelIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
+import '../../core/Popover/PopoverBody.js';
+import { Funnel, X, Plus } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
 
 /**
@@ -23,7 +26,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
     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" })] }));
+        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-sm 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)) {
@@ -56,6 +59,7 @@ function FilterValueInput({ filter, column, filterType, onValueChange, }) {
 }
 function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: controlledLogic, onFilterLogicChange, data, className, }) {
     const filterableColumns = columns.filter((col) => col.filterable);
+    const filterIdRef = useRef(0);
     // Internal filter logic state
     const [internalLogic, setInternalLogic] = useState("and");
     const filterLogic = controlledLogic !== null && controlledLogic !== void 0 ? controlledLogic : internalLogic;
@@ -86,15 +90,13 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         const resolvedType = inferFilterType(defaultColumn, data);
         return [
             {
-                id: `filter-${Date.now()}`,
+                id: `filter-${++filterIdRef.current}`,
                 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,
@@ -106,7 +108,7 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             return "text";
         return inferFilterType(column, data);
     };
-    const syncFilters = (filters) => {
+    const syncFilters = useCallback((filters) => {
         const newFilterConfig = filters
             .filter((f) => {
             if (!f.columnId)
@@ -130,8 +132,8 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             operator: f.operator,
         }));
         onFilterChange(newFilterConfig);
-    };
-    const handleAddFilter = () => {
+    }, [onFilterChange]);
+    const handleAddFilter = useCallback(() => {
         const defaultColumn = filterableColumns[0];
         if (!defaultColumn)
             return;
@@ -140,21 +142,22 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
         setActiveFilters((prev) => [
             ...prev,
             {
-                id: `filter-${Date.now()}`,
+                id: `filter-${++filterIdRef.current}`,
                 columnId: defaultColumn.id,
                 operator: defaultOp,
                 value: "",
             },
         ]);
-    };
-    const handleRemoveFilter = (filterId) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterableColumns, onFilterChange]);
+    const handleRemoveFilter = useCallback((filterId) => {
         setActiveFilters((prev) => {
             const updated = prev.filter((f) => f.id !== filterId);
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterColumnChange = (filterId, columnId) => {
+    }, [syncFilters]);
+    const handleFilterColumnChange = useCallback((filterId, columnId) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => {
                 if (f.id !== filterId)
@@ -167,8 +170,9 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterOperatorChange = (filterId, operator) => {
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filterableColumns, data, syncFilters]);
+    const handleFilterOperatorChange = useCallback((filterId, operator) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => {
                 if (f.id !== filterId)
@@ -187,18 +191,22 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleFilterValueChange = (filterId, value) => {
+    }, [syncFilters]);
+    const handleFilterValueChange = useCallback((filterId, value) => {
         setActiveFilters((prev) => {
             const updated = prev.map((f) => f.id === filterId ? { ...f, value } : f);
             syncFilters(updated);
             return updated;
         });
-    };
-    const handleClearAll = () => {
+    }, [syncFilters]);
+    const handleClearAll = useCallback(() => {
         setActiveFilters([]);
         onFilterChange([]);
-    };
+    }, [onFilterChange]);
+    // Nothing to filter — bail AFTER all hooks so the hook count stays stable
+    // when columns arrive asynchronously (empty → populated must not throw).
+    if (filterableColumns.length === 0)
+        return null;
     const appliedFilterCount = activeFilters.filter((f) => {
         if (!f.columnId)
             return false;
@@ -206,16 +214,16 @@ function TableFilter({ columns, filterConfig, onFilterChange, filterLogic: contr
             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"
+    return (jsxs(Popover, { placement: "bottom-end", offset: 8, closeOnClickOutside: false, children: [jsx(Popover.Trigger, { children: jsxs(Button, { color: "mono", variant: "outline", "aria-label": "Filter table data", size: "sm", children: [jsx(Funnel, { 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-[var(--color-primary-contrast)] text-sm font-medium", children: appliedFilterCount }))] }) }), jsx(Popover.Body, { 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-sm 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-surface-sunken)] p-0.5", children: [jsx("button", { type: "button", className: cn("px-2.5 py-0.5 text-sm 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"
+                                                : "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-sm 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" }))] })] }) })] }));
+                                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: "mono", variant: "ghost", 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(X, { className: "size-4", weight: "bold" }) })] }, filter.id));
+                            }) }), jsxs("div", { className: "mt-3 flex items-center gap-4", children: [jsxs(Link, { color: "mono", size: "sm", onClick: handleAddFilter, children: [jsx(Plus, { className: "size-4" }), "Add Filter"] }), activeFilters.length > 0 && (jsx(Link, { color: "mono", size: "sm", onClick: handleClearAll, children: "Clear All" }))] })] }) })] }));
 }
 
 export { TableFilter };

package/dist/components/data-display/Table/TableHeader.js

@@ -1,8 +1,10 @@
+"use client";
 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';
+import { CaretUp, CaretDown } from '@phosphor-icons/react';
 
 function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHeader, freezeFirstColumn, freezeLastColumn, expandable, expandedRowRender, selectable, selectionType, selectedRows = [], onSelectionChange, theme, data = [], rowKey, }) {
     const handleSort = useCallback((columnId) => {
@@ -45,10 +47,12 @@ function TableHeaderComponent({ columns, sortConfig = [], onSortChange, freezeHe
                         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) => {
+                    }, row: null, 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));
+                    return (jsx(TableCell, { column: column, row: null, rowId: "header", isHeader: true, isFrozen: freezeFirstColumn && index === 0, isLastFrozen: freezeLastColumn && index === columns.length - 1, sortDirection: currentSort === null || currentSort === void 0 ? void 0 : currentSort.direction, 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-sm", children: currentSort.direction === 'asc'
+                                        ? jsx(CaretUp, { className: "size-3.5" })
+                                        : jsx(CaretDown, { className: "size-3.5" }) }))] })) : (column.header) }, column.id));
                 })] }) }));
 }
 const TableHeader = TableHeaderComponent;