flikkui 0.1.0-beta.2

package/dist/components/data-display/Masonry/Masonry.js

@@ -0,0 +1,184 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { getMasonryTheme } from './Masonry.theme.js';
+
+var Masonry = function (_a) {
+    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 3 : _b, _c = _a.gap, gap = _c === void 0 ? 16 : _c, gapBreakpoints = _a.gapBreakpoints, className = _a.className, style = _a.style, _d = _a.minColumns, minColumns = _d === void 0 ? 1 : _d, _e = _a.maxColumns, maxColumns = _e === void 0 ? 10 : _e, _f = _a.sequential, sequential = _f === void 0 ? false : _f, themeOverrides = _a.themeOverrides, _g = _a.loading, loading = _g === void 0 ? false : _g, props = __rest(_a, ["children", "columns", "gap", "gapBreakpoints", "className", "style", "minColumns", "maxColumns", "sequential", "themeOverrides", "loading"]);
+    var containerRef = useRef(null);
+    var _h = useState(typeof columns === 'number' ? columns : 3), currentColumns = _h[0], setCurrentColumns = _h[1];
+    var _j = useState(gap), currentGap = _j[0], setCurrentGap = _j[1];
+    var _k = useState(0), containerWidth = _k[0], setContainerWidth = _k[1];
+    // Get the theme with any overrides applied
+    var theme = getMasonryTheme(themeOverrides);
+    // Calculate responsive columns and gap
+    var calculateLayout = useCallback(function () {
+        if (!containerRef.current)
+            return;
+        // Use getBoundingClientRect for more accurate width measurement
+        var containerRect = containerRef.current.getBoundingClientRect();
+        var width = Math.floor(containerRect.width);
+        // Only update if width actually changed to prevent unnecessary re-renders
+        if (width !== containerWidth && width > 0) {
+            setContainerWidth(width);
+        }
+        // Handle responsive columns
+        if (typeof columns === 'object') {
+            var breakpoints = Object.keys(columns)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            var newColumns = 3; // Default fallback
+            for (var _i = 0, breakpoints_1 = breakpoints; _i < breakpoints_1.length; _i++) {
+                var breakpoint = breakpoints_1[_i];
+                if (width >= breakpoint) {
+                    newColumns = columns[breakpoint];
+                }
+            }
+            // Ensure columns are within min/max bounds
+            newColumns = Math.min(Math.max(newColumns, minColumns), maxColumns);
+            setCurrentColumns(newColumns);
+        }
+        else {
+            var clampedColumns = Math.min(Math.max(columns, minColumns), maxColumns);
+            setCurrentColumns(clampedColumns);
+        }
+        // Handle responsive gap
+        if (gapBreakpoints) {
+            var gapBreakpointKeys = Object.keys(gapBreakpoints)
+                .map(Number)
+                .sort(function (a, b) { return a - b; });
+            var newGap = gap;
+            for (var _a = 0, gapBreakpointKeys_1 = gapBreakpointKeys; _a < gapBreakpointKeys_1.length; _a++) {
+                var breakpoint = gapBreakpointKeys_1[_a];
+                if (width >= breakpoint) {
+                    newGap = gapBreakpoints[breakpoint];
+                }
+            }
+            setCurrentGap(newGap);
+        }
+        else {
+            setCurrentGap(gap);
+        }
+    }, [columns, gap, gapBreakpoints, minColumns, maxColumns, containerWidth]);
+    // Arrange items in masonry layout
+    var arrangeItems = useCallback(function () {
+        if (!containerRef.current)
+            return;
+        var container = containerRef.current;
+        var items = Array.from(container.children);
+        if (items.length === 0)
+            return;
+        // Get fresh container width to avoid stale closure issues
+        var currentContainerWidth = container.offsetWidth;
+        // Calculate column width
+        var availableWidth = currentContainerWidth - (currentGap * (currentColumns - 1));
+        var columnWidth = Math.floor(availableWidth / currentColumns);
+        if (columnWidth <= 0)
+            return; // Prevent invalid layouts
+        // Initialize column heights
+        var columnHeights = new Array(currentColumns).fill(0);
+        // Process items synchronously first for positioning
+        items.forEach(function (item, index) {
+            var _a;
+            // Reset item positioning
+            item.style.position = 'absolute';
+            item.style.width = "".concat(columnWidth, "px");
+            // Apply transition classes
+            if (!item.classList.contains('transition-all')) {
+                (_a = item.classList).add.apply(_a, theme.animations.transition.split(' '));
+            }
+            var targetColumn;
+            if (sequential) {
+                // Sequential placement: round-robin distribution
+                targetColumn = index % currentColumns;
+            }
+            else {
+                // Optimal placement: shortest column
+                targetColumn = columnHeights.indexOf(Math.min.apply(Math, columnHeights));
+            }
+            // Calculate position
+            var left = targetColumn * (columnWidth + currentGap);
+            var top = columnHeights[targetColumn];
+            // Position the item
+            item.style.left = "".concat(left, "px");
+            item.style.top = "".concat(top, "px");
+            // Force layout to get accurate height measurement
+            var itemHeight = item.offsetHeight;
+            if (itemHeight > 0) {
+                columnHeights[targetColumn] = top + itemHeight + currentGap;
+            }
+        });
+        // Set final container height after all items are positioned
+        requestAnimationFrame(function () {
+            var maxHeight = Math.max.apply(Math, columnHeights) - currentGap;
+            container.style.height = "".concat(Math.max(0, maxHeight), "px");
+        });
+    }, [currentColumns, currentGap, sequential, theme.animations.transition]);
+    // Handle container resize with ResizeObserver for better performance
+    useEffect(function () {
+        if (!containerRef.current)
+            return;
+        var resizeTimeoutId;
+        var resizeObserver = new ResizeObserver(function (_entries) {
+            // Debounce resize events to prevent excessive recalculations
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(function () {
+                calculateLayout();
+            }, 100);
+        });
+        // Fallback window resize handler for older browsers
+        var handleWindowResize = function () {
+            clearTimeout(resizeTimeoutId);
+            resizeTimeoutId = setTimeout(function () {
+                calculateLayout();
+            }, 100);
+        };
+        resizeObserver.observe(containerRef.current);
+        window.addEventListener('resize', handleWindowResize);
+        return function () {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', handleWindowResize);
+            clearTimeout(resizeTimeoutId);
+        };
+    }, [calculateLayout]);
+    // Initial layout calculation and arrangement
+    useEffect(function () {
+        // Wait for next tick to ensure container is mounted and measured
+        var timer = setTimeout(function () {
+            calculateLayout();
+            // Only arrange items if we have a valid container width
+            if (containerWidth > 0) {
+                arrangeItems();
+            }
+        }, 0);
+        return function () { return clearTimeout(timer); };
+    }, [calculateLayout, arrangeItems, children, containerWidth]);
+    // Re-arrange when children change (with debouncing)
+    useEffect(function () {
+        var timeoutId;
+        var observer = new MutationObserver(function () {
+            // Debounce multiple rapid changes
+            clearTimeout(timeoutId);
+            timeoutId = setTimeout(function () {
+                arrangeItems();
+            }, 10);
+        });
+        if (containerRef.current) {
+            observer.observe(containerRef.current, {
+                childList: true,
+                subtree: false, // Only watch direct children, not nested changes
+            });
+        }
+        return function () {
+            observer.disconnect();
+            clearTimeout(timeoutId);
+        };
+    }, [arrangeItems]);
+    // Generate container classes
+    var containerClasses = cn(theme.container.base, loading && theme.container.loading, className);
+    return (React__default.createElement("div", __assign({ ref: containerRef, className: containerClasses, style: __assign(__assign({}, style), { 
+            // Ensure container has minimum dimensions for proper layout calculation
+            minHeight: loading ? '200px' : undefined }) }, props), children));
+};
+
+export { Masonry as default };

package/dist/components/data-display/Masonry/Masonry.theme.d.ts

@@ -0,0 +1,9 @@
+import { MasonryTheme, MasonryThemeOverrides } from './Masonry.types';
+/**
+ * Default theme for the Masonry component
+ */
+export declare const masonryTheme: MasonryTheme;
+/**
+ * Apply theme overrides to the default theme
+ */
+export declare const getMasonryTheme: (overrides?: MasonryThemeOverrides) => MasonryTheme;

package/dist/components/data-display/Masonry/Masonry.theme.js

@@ -0,0 +1,40 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+/**
+ * Default theme for the Masonry component
+ */
+var masonryTheme = {
+    // Container styles
+    container: {
+        base: "relative w-full overflow-hidden",
+        loading: "opacity-70 pointer-events-none",
+    },
+    // Item styles (utility classes for masonry items)
+    item: {
+        base: "relative overflow-hidden rounded-[var(--form-rounded)] bg-white  border border-border transition-all duration-[var(--default-transition-duration)] ease-[var(--default-transition-timing-function)]",
+        hover: "hover:-translate-y-0.5 ",
+        content: "p-4",
+        title: "text-lg font-semibold mb-2 text-neutral-900",
+        description: "text-sm text-neutral-600 leading-relaxed",
+    },
+    // Animation classes
+    animations: {
+        transition: "transition-all duration-[var(--default-transition-duration)] ease-[var(--default-transition-timing-function)]",
+        enter: "opacity-0 scale-95",
+        exit: "opacity-100 scale-100",
+    },
+};
+/**
+ * Apply theme overrides to the default theme
+ */
+var getMasonryTheme = function (overrides) {
+    if (!overrides)
+        return masonryTheme;
+    return {
+        container: __assign(__assign({}, masonryTheme.container), overrides.container),
+        item: __assign(__assign({}, masonryTheme.item), overrides.item),
+        animations: __assign(__assign({}, masonryTheme.animations), overrides.animations),
+    };
+};
+
+export { getMasonryTheme, masonryTheme };

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

@@ -0,0 +1,53 @@
+import React from "react";
+/**
+ * Theme configuration for the Masonry component
+ */
+export interface MasonryTheme {
+    container: {
+        base: string;
+        loading: string;
+    };
+    item: {
+        base: string;
+        hover: string;
+        content: string;
+        title: string;
+        description: string;
+    };
+    animations: {
+        transition: string;
+        enter: string;
+        exit: string;
+    };
+}
+/**
+ * Masonry theme overrides interface for customization
+ */
+export interface MasonryThemeOverrides {
+    container?: Partial<MasonryTheme['container']>;
+    item?: Partial<MasonryTheme['item']>;
+    animations?: Partial<MasonryTheme['animations']>;
+}
+/**
+ * Masonry component props
+ */
+export interface MasonryProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Children elements to be arranged in masonry layout */
+    children: React.ReactNode;
+    /** Number of columns (static) or breakpoint configuration (responsive) */
+    columns?: number | Record<number, number>;
+    /** Gap between items in pixels */
+    gap?: number;
+    /** Gap configuration for different breakpoints */
+    gapBreakpoints?: Record<number, number>;
+    /** Minimum columns count */
+    minColumns?: number;
+    /** Maximum columns count */
+    maxColumns?: number;
+    /** Enable sequential placement (items placed in order vs optimal placement) */
+    sequential?: boolean;
+    /** Theme overrides for customizing appearance */
+    themeOverrides?: MasonryThemeOverrides;
+    /** Loading state */
+    loading?: boolean;
+}

package/dist/components/data-display/Masonry/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Masonry';
+export { masonryTheme, getMasonryTheme } from './Masonry.theme';
+export type { MasonryProps, MasonryThemeOverrides, MasonryTheme } from './Masonry.types';

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

@@ -0,0 +1,54 @@
+import React from "react";
+import { TableProps, TableContextType } from "./Table.types";
+/**
+ * Context for sharing table state across all table components
+ * Provides theme, configuration, and callback functions to child components
+ */
+declare const TableContext: React.Context<TableContextType>;
+/**
+ * Enhanced Table component with dual API support (declarative and data-driven)
+ *
+ * Features:
+ * - Dual API: Use with data/columns props OR declarative Table.Header/Body/Row/Cell components
+ * - Stable row identification using rowKey prop for consistent React reconciliation
+ * - Column management with visibility controls
+ * - Sorting, filtering, row selection, and expansion
+ * - Frozen columns and headers
+ * - Pagination support
+ * - Full accessibility compliance (WCAG 2.1 AA)
+ * - Theme customization with className overrides
+ *
+ * @example
+ * // Data-driven API with stable row keys
+ * <Table data={data} columns={columns} rowKey="id" sortable selectable />
+ *
+ * // Using a function for complex row keys
+ * <Table
+ *   data={data}
+ *   columns={columns}
+ *   rowKey={(row, index) => `${row.category}-${row.id}`}
+ *   sortable
+ *   selectable
+ * />
+ *
+ * // Declarative API
+ * <Table>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.HeaderCell>Name</Table.HeaderCell>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John Doe</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ */
+declare function TableComponent<T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
+declare namespace TableComponent {
+    var displayName: string;
+}
+declare const Table: typeof TableComponent;
+export default Table;
+export { TableContext };

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

@@ -0,0 +1,2 @@
+import { TableThemeOverrides } from "./Table.types";
+export declare const tableTheme: TableThemeOverrides;

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

@@ -0,0 +1,254 @@
+import { ReactNode } from 'react';
+export interface BulkAction {
+    id: string;
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    variant?: 'primary' | 'secondary' | 'danger';
+    onClick: (selectedRows: string[]) => void;
+}
+export type TableSize = 'sm' | 'md' | 'lg';
+export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+export type TableAlignment = 'left' | 'center' | 'right';
+export type SelectionType = 'checkbox' | 'radio';
+export interface Column<T = any> {
+    id: string;
+    header: string | ReactNode;
+    accessor: keyof T | ((row: T) => any);
+    cell?: (row: T) => ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    ellipsis?: boolean;
+    tooltip?: boolean | ((row: T) => string);
+    width?: string | number;
+    align?: TableAlignment;
+    hidden?: boolean;
+    locked?: boolean;
+}
+export interface SortConfig {
+    columnId: string;
+    direction: 'asc' | 'desc';
+    priority: number;
+}
+export interface FilterConfig {
+    columnId: string;
+    value: any;
+}
+export interface TableThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<Record<TableVariant, string>>;
+    sizes?: Partial<Record<TableSize, string>>;
+    headerStyle?: string;
+    cellStyle?: string;
+    rowStyle?: string;
+    selectedRowStyle?: string;
+    hoverRowStyle?: string;
+    frozenColumnStyle?: string;
+    lastFrozenColumnStyle?: string;
+    frozenHeaderStyle?: string;
+    bodyStyle?: string;
+    headerContainerStyle?: string;
+    paginationContainer?: string;
+    paginationLeftSection?: string;
+    paginationRightSection?: string;
+    paginationLabel?: string;
+    paginationSelect?: string;
+    paginationButton?: string;
+    paginationInfo?: string;
+    columnManagerButton?: string;
+    columnManagerContainer?: string;
+}
+export interface TableContextType {
+    theme: TableThemeOverrides;
+    size: TableSize;
+    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;
+}
+export interface TableProps<T = any> {
+    data?: T[];
+    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);
+    size?: TableSize;
+    variant?: TableVariant;
+    theme?: TableThemeOverrides;
+    className?: string;
+    freezeHeader?: boolean;
+    freezeFirstColumn?: boolean;
+    freezeLastColumn?: boolean;
+    sortable?: boolean;
+    sortConfig?: SortConfig[];
+    onSortChange?: (sortConfig: SortConfig[]) => void;
+    filterable?: boolean;
+    filterConfig?: FilterConfig[];
+    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;
+        onPageChange: (page: number) => void;
+        onPageSizeChange: (pageSize: number) => void;
+    };
+    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;
+}
+export interface TableColumnManagerProps {
+    columns: Column[];
+    visibleColumns: string[];
+    initialVisibleColumns: string[];
+    onVisibleColumnsChange: (visibleColumns: string[]) => void;
+    onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+    onColumnOrderReset?: () => void;
+    onClose: () => void;
+    className?: string;
+    theme?: {
+        container?: string;
+        content?: string;
+        header?: string;
+        title?: string;
+        description?: string;
+        actions?: string;
+        quickActionButton?: string;
+        quickActionButtonDisabled?: string;
+        columnList?: string;
+        columnItem?: string;
+        columnItemVisible?: string;
+        checkbox?: string;
+        columnLabel?: string;
+        columnIcon?: string;
+        footer?: string;
+        summary?: string;
+        closeButton?: string;
+    };
+}

package/dist/components/data-display/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/data-display/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/data-display/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/data-display/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/data-display/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;