flikkui 0.1.0-beta.11

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

@@ -0,0 +1,268 @@
+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';
+/**
+ * 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;
+    /** 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 {
+    /** ID of the column being filtered */
+    columnId: string;
+    /** Filter value - type depends on column data type */
+    value: any;
+}
+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;
+    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.
+     *
+     * @example
+     * // Using a property name
+     * rowKey="id"
+     *
+     * // Using a function for complex keys
+     * rowKey={(row, index) => `${row.category}-${row.id}`}
+     */
+    rowKey?: keyof T | ((row: T, index: number) => string | number);
+    /** Visual variant for different table styles */
+    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;
+    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>[];
+    /** Row key extractor for stable row identification */
+    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;
+    theme?: TableThemeOverrides;
+    children?: ReactNode;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * 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,30 @@
+/**
+ * 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-".concat(index);
+    }
+    if (typeof rowKey === 'function') {
+        // Use the function to extract the key
+        var key_1 = rowKey(row, index);
+        return "row-".concat(key_1);
+    }
+    // Use the property name to extract the key
+    var 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 \"".concat(String(rowKey), "\" is undefined or null for row at index ").concat(index, ". Falling back to index-based key."));
+        }
+        return "row-".concat(index);
+    }
+    return "row-".concat(key);
+}
+
+export { getRowId };

package/dist/components/core/Table/components/DeclarativeComponents.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>;

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

@@ -0,0 +1,123 @@
+import React__default, { useContext } from 'react';
+import { TableContext } from '../Table.js';
+import { cn } from '../../../../utils/cn.js';
+import '../../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Declarative Table Header component
+ * Used within the declarative API for flexible table composition
+ *
+ * @example
+ * <Table>
+ *   <Table.Header freezeHeader>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ * </Table>
+ */
+var HeaderComponent = function (_a) {
+    var children = _a.children, freezeHeader = _a.freezeHeader, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var contextValue = useContext(TableContext);
+    var theme = contextValue.theme;
+    var 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 (React__default.createElement("thead", { className: headerClasses, "data-freeze": freezeHeader ? 'true' : undefined }, children));
+};
+// Set display name for dev tools
+HeaderComponent.displayName = 'Table.Header';
+// Memoize component to prevent unnecessary re-renders
+var Header = React__default.memo(HeaderComponent);
+/**
+ * Declarative Table Body component
+ * Container for table rows in the declarative API
+ *
+ * @example
+ * <Table.Body>
+ *   <Table.Row>
+ *     <Table.Cell>Data</Table.Cell>
+ *   </Table.Row>
+ * </Table.Body>
+ */
+var BodyComponent = function (_a) {
+    var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var theme = useContext(TableContext).theme;
+    return (React__default.createElement("tbody", { className: cn(theme === null || theme === void 0 ? void 0 : theme.bodyStyle, className) }, children));
+};
+// Set display name for dev tools
+BodyComponent.displayName = 'Table.Body';
+// Memoize component to prevent unnecessary re-renders
+var Body = React__default.memo(BodyComponent);
+/**
+ * Declarative Table Row component
+ * Supports selection, expansion, and custom styling
+ *
+ * @example
+ * <Table.Row isSelected onSelectToggle={() => setSelected(!selected)}>
+ *   <Table.Cell>Data</Table.Cell>
+ * </Table.Row>
+ */
+var RowComponent = function (_a) {
+    var children = _a.children, _b = _a.isExpandable, isExpandable = _b === void 0 ? false : _b, _c = _a.isExpanded, isExpanded = _c === void 0 ? false : _c; _a.onExpandToggle; var _d = _a.isSelected, isSelected = _d === void 0 ? false : _d, onSelectToggle = _a.onSelectToggle, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var theme = useContext(TableContext).theme;
+    var 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);
+    var handleRowClick = function () {
+        if (onSelectToggle) {
+            onSelectToggle();
+        }
+    };
+    return (React__default.createElement("tr", { className: rowClasses, "data-selected": isSelected ? 'true' : undefined, "data-expanded": isExpandable && isExpanded ? 'true' : undefined, onClick: onSelectToggle ? handleRowClick : undefined, role: "row", "aria-selected": isSelected, "aria-expanded": isExpandable ? isExpanded : undefined }, children));
+};
+// Set display name for dev tools
+RowComponent.displayName = 'Table.Row';
+// Memoize component to prevent unnecessary re-renders
+var Row = React__default.memo(RowComponent);
+/**
+ * Declarative Table Cell component
+ * Standard data cell with alignment, width, and frozen column support
+ *
+ * @example
+ * <Table.Cell align="right" width="200px" isFrozen>
+ *   $1,234.56
+ * </Table.Cell>
+ */
+var CellComponent = function (_a) {
+    var children = _a.children, _b = _a.isFrozen, isFrozen = _b === void 0 ? false : _b, _c = _a.isLastFrozen, isLastFrozen = _c === void 0 ? false : _c, align = _a.align, width = _a.width, _d = _a.className, className = _d === void 0 ? '' : _d, colSpan = _a.colSpan;
+    var theme = useContext(TableContext).theme;
+    var cellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.cellStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), align && "text-".concat(align), className);
+    return (React__default.createElement("td", { className: cellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, style: { width: width }, colSpan: colSpan, role: "cell" }, children));
+};
+// Set display name for dev tools
+CellComponent.displayName = 'Table.Cell';
+// Memoize component to prevent unnecessary re-renders
+var Cell = React__default.memo(CellComponent);
+/**
+ * Declarative Table Header Cell component
+ * Header cell with sorting functionality and alignment options
+ *
+ * @example
+ * <Table.HeaderCell
+ *   isSortable
+ *   sortDirection="asc"
+ *   onSort={() => handleSort('name')}
+ *   align="left"
+ * >
+ *   Name
+ * </Table.HeaderCell>
+ */
+var HeaderCellComponent = function (_a) {
+    var children = _a.children, _b = _a.isFrozen, isFrozen = _b === void 0 ? false : _b, _c = _a.isLastFrozen, isLastFrozen = _c === void 0 ? false : _c, _d = _a.isSortable, isSortable = _d === void 0 ? false : _d, sortDirection = _a.sortDirection, onSort = _a.onSort, _e = _a.align, align = _e === void 0 ? 'left' : _e, width = _a.width, _f = _a.className, className = _f === void 0 ? '' : _f;
+    var theme = useContext(TableContext).theme;
+    var headerCellClasses = cn(theme === null || theme === void 0 ? void 0 : theme.headerStyle, isFrozen && (theme === null || theme === void 0 ? void 0 : theme.frozenColumnStyle), isLastFrozen && (theme === null || theme === void 0 ? void 0 : theme.lastFrozenColumnStyle), align && "text-".concat(align), isSortable && 'cursor-pointer', className);
+    return (React__default.createElement("th", { className: headerCellClasses, "data-frozen": isFrozen ? 'true' : isLastFrozen ? 'last' : undefined, onClick: isSortable && onSort ? onSort : undefined, style: { width: width }, role: "columnheader", "aria-sort": sortDirection ? (sortDirection === 'asc' ? 'ascending' : 'descending') : undefined },
+        React__default.createElement("div", { className: "flex items-center" },
+            children,
+            isSortable && sortDirection && (React__default.createElement("span", { className: "ml-1" }, sortDirection === 'asc' ? '↑' : '↓')))));
+};
+// Set display name for dev tools
+HeaderCellComponent.displayName = 'Table.HeaderCell';
+// Memoize component to prevent unnecessary re-renders
+var HeaderCell = React__default.memo(HeaderCellComponent);
+
+export { Body, Cell, Header, HeaderCell, Row };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TableActionsProps } from './TableActions.types';
+/**
+ * TableActions component with smart display logic
+ * - ≤2 actions: Show as individual icon buttons
+ * - ≥3 actions: Show all actions in overflow menu
+ */
+export declare const TableActions: <T>({ actions, row, maxVisibleActions, className, }: TableActionsProps<T>) => React.JSX.Element;

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

@@ -0,0 +1,56 @@
+import { __spreadArray } from '../../../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../../../utils/cn.js';
+import { Popover } from '../../../Popover/Popover.js';
+import '../../../Popover/PopoverContext.js';
+import { Button } from '../../../Button/Button.js';
+import { TableActionsMenu } from './TableActionsMenu.js';
+import ForwardRef from '../../../../../node_modules/@heroicons/react/24/outline/esm/EllipsisVerticalIcon.js';
+
+/**
+ * TableActions component with smart display logic
+ * - ≤2 actions: Show as individual icon buttons
+ * - ≥3 actions: Show all actions in overflow menu
+ */
+var TableActions = function (_a) {
+    var actions = _a.actions, row = _a.row, _b = _a.maxVisibleActions, maxVisibleActions = _b === void 0 ? 2 : _b, className = _a.className;
+    // Sort actions by priority (high priority first)
+    var sortedActions = useMemo(function () {
+        return __spreadArray([], actions, true).sort(function (a, b) {
+            var priorityOrder = { high: 0, normal: 1 };
+            var aPriority = priorityOrder[a.priority || 'normal'];
+            var bPriority = priorityOrder[b.priority || 'normal'];
+            return aPriority - bPriority;
+        });
+    }, [actions]);
+    // Determine display strategy
+    var shouldUseMenu = actions.length > maxVisibleActions;
+    // Render individual action buttons
+    var renderInlineActions = function (actionsToRender) {
+        return actionsToRender.map(function (action) {
+            var _a;
+            var isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
+            var Icon = action.icon;
+            return (React__default.createElement(Button, { key: action.id, color: "primary", variant: "link", iconOnly: true, onClick: function () { return action.onClick(row); }, disabled: isDisabled, "aria-label": action.label, className: cn(action.variant === 'danger'
+                    ? "text-red-400 hover:text-red-600"
+                    : "text-neutral-400 hover:text-neutral-700") },
+                React__default.createElement(Icon, { className: "size-4" })));
+        });
+    };
+    // Render overflow menu
+    var renderOverflowMenu = function () {
+        return (React__default.createElement(Popover, { placement: "bottom-end", offset: 4 },
+            React__default.createElement(Popover.Trigger, null,
+                React__default.createElement(Button, { color: "neutral", variant: "filled", size: "sm", iconOnly: true, "aria-label": "More actions", className: "text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]" },
+                    React__default.createElement(ForwardRef, { className: "size-4" }))),
+            React__default.createElement(Popover.Content, { className: "p-0" },
+                React__default.createElement(TableActionsMenu, { actions: sortedActions, row: row, onClose: function () { } }))));
+    };
+    return (React__default.createElement("div", { className: cn("flex items-center justify-end", className) }, shouldUseMenu ? (
+    // All actions in overflow menu
+    renderOverflowMenu()) : (
+    // Show actions inline
+    renderInlineActions(sortedActions))));
+};
+
+export { TableActions };

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

@@ -0,0 +1,40 @@
+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;
+}

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

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

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

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { cn } from '../../../../../utils/cn.js';
+import '../../../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * TableActionsMenu component for displaying actions in an overflow menu
+ */
+var TableActionsMenu = function (_a) {
+    var actions = _a.actions, row = _a.row, onClose = _a.onClose, className = _a.className;
+    var handleActionClick = function (action) {
+        var _a;
+        if ((_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row))
+            return;
+        action.onClick(row);
+        onClose();
+    };
+    return (React__default.createElement("div", { className: cn(" min-w-[180px] p-1", className), role: "menu", "aria-label": "Row actions" }, actions.map(function (action, index) {
+        var _a;
+        var isDisabled = (_a = action.disabled) === null || _a === void 0 ? void 0 : _a.call(action, row);
+        var Icon = action.icon;
+        return (React__default.createElement("button", { key: action.id, onClick: function () { return handleActionClick(action); }, disabled: isDisabled, className: cn("w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-left transition-all duration-300", "hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-none rounded-sm cursor-pointer", action.variant === 'danger'
+                ? "text-danger-600 hover:bg-danger-50 focus:bg-danger-50"
+                : "text-[var(--color-text-primary)]", isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent"), role: "menuitem", "aria-label": action.label },
+            React__default.createElement(Icon, { className: "size-4 flex-shrink-0" }),
+            React__default.createElement("span", null, action.label)));
+    })));
+};
+
+export { TableActionsMenu };

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

@@ -0,0 +1,3 @@
+export { TableActions } from './TableActions';
+export { TableActionsMenu } from './TableActionsMenu';
+export * from './TableActions.types';

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

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

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

@@ -0,0 +1,17 @@
+import React from "react";
+import { TablePaginationProps } from "./TablePagination.types";
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ *
+ * @example
+ * <Table.Pagination
+ *   currentPage={currentPage}
+ *   totalItems={data.length}
+ *   pageSize={pageSize}
+ *   onPageChange={setCurrentPage}
+ *   onPageSizeChange={setPageSize}
+ *   pageSizeOptions={[10, 25, 50, 100]}
+ * />
+ */
+export declare const TablePagination: React.FC<TablePaginationProps>;