flikkui 0.1.0-beta.9 → 0.2.0-beta.1

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

@@ -1,177 +0,0 @@
-import { __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { createContext, useState, useEffect } from 'react';
-import { tableTheme } from './Table.theme.js';
-import { cn } from '../../../utils/cn.js';
-import { TableHeader } from './components/core/TableHeader.js';
-import { TableBody } from './components/core/TableBody.js';
-import { TableColumnManager } from './components/TableColumnManager/TableColumnManager.js';
-import { TableSelectionHeader } from './components/TableSelectionHeader/TableSelectionHeader.js';
-import Popover from '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import Button from '../../core/Button/Button.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/Cog6ToothIcon.js';
-
-/**
- * Context for sharing table state across all table components
- * Provides theme, configuration, and callback functions to child components
- */
-var TableContext = createContext({
-    theme: tableTheme,
-    variant: "default",
-    freezeHeader: false,
-    freezeFirstColumn: false,
-    freezeLastColumn: false,
-});
-/**
- * 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>
- */
-function TableComponent(props) {
-    var _a;
-    var data = props.data, columns = props.columns, rowKey = props.rowKey, _b = props.variant, variant = _b === void 0 ? "default" : _b, themeOverrides = props.theme, _c = props.className, className = _c === void 0 ? "" : _c, _d = props.freezeHeader, freezeHeader = _d === void 0 ? false : _d, _e = props.freezeFirstColumn, freezeFirstColumn = _e === void 0 ? false : _e, _f = props.freezeLastColumn, freezeLastColumn = _f === void 0 ? false : _f, _g = props.sortable, sortable = _g === void 0 ? false : _g, _h = props.sortConfig, sortConfig = _h === void 0 ? [] : _h, onSortChange = props.onSortChange, _j = props.filterable, filterable = _j === void 0 ? false : _j, _k = props.filterConfig, filterConfig = _k === void 0 ? [] : _k, onFilterChange = props.onFilterChange, _l = props.expandable, expandable = _l === void 0 ? false : _l, expandedRowRender = props.expandedRowRender, _m = props.expandedRows, expandedRows = _m === void 0 ? [] : _m, onExpandedRowsChange = props.onExpandedRowsChange, _o = props.selectable, selectable = _o === void 0 ? false : _o, _p = props.selectionType, selectionType = _p === void 0 ? "checkbox" : _p, _q = props.selectedRows, selectedRows = _q === void 0 ? [] : _q, onSelectionChange = props.onSelectionChange, _r = props.bulkActions, bulkActions = _r === void 0 ? [] : _r, initialVisibleColumns = props.visibleColumns, onVisibleColumnsChange = props.onVisibleColumnsChange, onColumnReorder = props.onColumnReorder, pagination = props.pagination, children = props.children;
-    // Store the initial state for reset functionality
-    var defaultVisibleColumns = initialVisibleColumns || (columns ? columns.map(function (col) { return col.id; }) : []);
-    var defaultColumnOrder = columns ? columns.map(function (col) { return col.id; }) : [];
-    var _s = useState(defaultVisibleColumns), visibleColumns = _s[0], setVisibleColumns = _s[1];
-    var _t = useState(defaultColumnOrder), columnOrder = _t[0], setColumnOrder = _t[1];
-    // Sync column order when columns prop changes
-    useEffect(function () {
-        if (columns) {
-            setColumnOrder(columns.map(function (col) { return col.id; }));
-        }
-    }, [columns]);
-    // Determine which API is being used (declarative vs data-driven)
-    var isDeclarativeAPI = !!children;
-    // Merge global theme with component-specific overrides
-    var theme = __assign(__assign({}, tableTheme), (themeOverrides || {}));
-    // Get base classes from theme
-    var baseClasses = theme.baseStyle || "";
-    var variantClasses = ((_a = theme.variants) === null || _a === void 0 ? void 0 : _a[variant]) || "";
-    /**
-     * Handle column visibility changes from the column manager
-     * Updates both internal state and calls the external callback
-     */
-    var handleVisibleColumnsChange = function (newVisibleColumns) {
-        setVisibleColumns(newVisibleColumns);
-        onVisibleColumnsChange === null || onVisibleColumnsChange === void 0 ? void 0 : onVisibleColumnsChange(newVisibleColumns);
-    };
-    /**
-     * Handle column reordering from the column manager
-     * Updates column order and calls the external callback
-     */
-    var handleColumnReorder = function (fromIndex, toIndex) {
-        var newColumnOrder = __spreadArray([], columnOrder, true);
-        var movedColumn = newColumnOrder.splice(fromIndex, 1)[0];
-        newColumnOrder.splice(toIndex, 0, movedColumn);
-        setColumnOrder(newColumnOrder);
-        onColumnReorder === null || onColumnReorder === void 0 ? void 0 : onColumnReorder(fromIndex, toIndex);
-    };
-    /**
-     * Handle column order reset from the column manager
-     * Resets column order back to the original columns order
-     */
-    var handleColumnOrderReset = function () {
-        if (columns) {
-            var originalOrder = columns.map(function (col) { return col.id; });
-            setColumnOrder(originalOrder);
-        }
-    };
-    /**
-     * Handle clearing all row selections
-     */
-    var handleClearSelection = function () {
-        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange([]);
-    };
-    // Filter and order columns based on column order and visibility settings
-    var visibleColumnsList = columns && columnOrder.length > 0
-        ? columnOrder
-            .map(function (colId) { return columns.find(function (col) { return col.id === colId; }); })
-            .filter(function (col) {
-            return col !== undefined && visibleColumns.includes(col.id);
-        })
-        : (columns ? columns.filter(function (col) { return visibleColumns.includes(col.id); }) : []);
-    // Calculate paginated data slice based on current page and page size
-    var paginatedData = pagination && data
-        ? data.slice((pagination.currentPage - 1) * pagination.pageSize, pagination.currentPage * pagination.pageSize)
-        : data || [];
-    // Create context value with all table configuration and callbacks
-    var contextValue = {
-        theme: theme,
-        variant: variant,
-        freezeHeader: freezeHeader,
-        freezeFirstColumn: freezeFirstColumn,
-        freezeLastColumn: freezeLastColumn,
-        sortable: sortable,
-        sortConfig: sortConfig,
-        onSortChange: onSortChange,
-        filterable: filterable,
-        filterConfig: filterConfig,
-        onFilterChange: onFilterChange,
-        expandable: expandable,
-        expandedRows: expandedRows,
-        onExpandedRowsChange: onExpandedRowsChange,
-        selectable: selectable,
-        selectionType: selectionType,
-        selectedRows: selectedRows,
-        onSelectionChange: onSelectionChange,
-    };
-    return (React__default.createElement(TableContext.Provider, { value: contextValue },
-        React__default.createElement("div", { className: "relative" },
-            !isDeclarativeAPI && columns && (React__default.createElement("div", { className: theme.columnManagerContainer },
-                React__default.createElement(Popover, { placement: "bottom-end", offset: 8 },
-                    React__default.createElement(Popover.Trigger, null,
-                        React__default.createElement(Button, { variant: "secondary", "aria-label": "Manage column visibility" },
-                            React__default.createElement(ForwardRef, { className: "size-5", "aria-hidden": "true" }),
-                            "Manage Columns")),
-                    React__default.createElement(Popover.Content, { className: "p-0" },
-                        React__default.createElement(TableColumnManager, { columns: columnOrder.length > 0
-                                ? columnOrder.map(function (colId) { return columns.find(function (col) { return col.id === colId; }); }).filter(Boolean)
-                                : columns, visibleColumns: visibleColumns, initialVisibleColumns: defaultVisibleColumns, onVisibleColumnsChange: handleVisibleColumnsChange, onColumnReorder: handleColumnReorder, onColumnOrderReset: handleColumnOrderReset, onClose: function () { } }))))),
-            !isDeclarativeAPI && selectable && selectedRows.length > 0 && (React__default.createElement(TableSelectionHeader, { selectedCount: selectedRows.length, totalCount: paginatedData.length, selectedRows: selectedRows, bulkActions: bulkActions, onClearSelection: handleClearSelection })),
-            React__default.createElement("div", { className: "overflow-x-auto" },
-                React__default.createElement("table", { className: cn(baseClasses, variantClasses, className), role: "table", "aria-label": isDeclarativeAPI ? "Data table" : "Data table with ".concat(paginatedData.length, " rows"), "aria-rowcount": pagination ? pagination.totalItems : data === null || data === void 0 ? void 0 : data.length, "aria-colcount": visibleColumnsList.length }, isDeclarativeAPI ? (children) : (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(TableHeader, { columns: visibleColumnsList, sortConfig: sortConfig, onSortChange: onSortChange, filterConfig: filterConfig, onFilterChange: onFilterChange, freezeHeader: freezeHeader, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, expandable: expandable, expandedRowRender: expandedRowRender, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, totalRowCount: paginatedData.length, theme: theme, data: paginatedData, rowKey: rowKey }),
-                    React__default.createElement(TableBody, { data: paginatedData, columns: visibleColumnsList, rowKey: rowKey, expandedRowRender: expandedRowRender, expandedRows: expandedRows, onExpandedRowsChange: onExpandedRowsChange, selectable: selectable, selectionType: selectionType, selectedRows: selectedRows, onSelectionChange: onSelectionChange, freezeFirstColumn: freezeFirstColumn, freezeLastColumn: freezeLastColumn, theme: theme }))))))));
-}
-// Set display name for dev tools and Storybook
-TableComponent.displayName = "Table";
-// Export as default
-var Table = TableComponent;
-
-export { TableContext, Table as default };

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

@@ -1,28 +0,0 @@
-var tableTheme = {
-    // Base styles for the table
-    baseStyle: "w-full border-collapse bg-white text-sm",
-    // Variant styles
-    variants: {
-        default: "border-border [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        striped: "border-border [&>tbody>tr:nth-child(odd)]:bg-[var(--color-neutral-50)] [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        bordered: "border border-border [&_td]:border [&_th]:border [&_td]:border-border [&_th]:border-border [&_td]:px-3 [&_td]:py-2.5 [&_th]:px-3 [&_th]:py-2.5",
-        compact: "border-border [&_td]:px-3 [&_td]:py-1 [&_th]:px-3 [&_th]:py-1",
-    },
-    // Header styles
-    headerStyle: "text-left font-medium text-text-primary sticky top-0 border-b border-border",
-    // Cell styles
-    cellStyle: "text-text-primary border-t border-border",
-    // Row styles
-    rowStyle: "hover:bg-[var(--color-neutral-50)]  transition-all duration-300 relative",
-    selectedRowStyle: "bg-[var(--color-primary-50)]/50 shadow-[inset_3px_0_0_0_theme(colors.primary.base),0_20px_15px_-5px_theme(colors.primary.base/0.02),0_10px_10px_-5px_theme(colors.primary.base/0.02)] hover:bg-[var(--color-primary-50)]",
-    hoverRowStyle: "cursor-pointer",
-    // Frozen column styles
-    frozenColumnStyle: "sticky left-0 z-10 bg-white/80 backdrop-blur-sm shadow-l-xl outline outline-1 outline-[var(--color-neutral-200)]",
-    lastFrozenColumnStyle: "sticky right-0 z-10 bg-white/80 backdrop-blur-sm shadow-r-xl outline outline-1 outline-[var(--color-neutral-200)]",
-    frozenHeaderStyle: "sticky top-0 z-20 shadow-lg shadow-[var(--color-neutral-200)]/50",
-    // Utility controls
-    columnManagerButton: "inline-flex items-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-text-primary hover:bg-[var(--color-neutral-50)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 border border-[var(--color-neutral-300)]",
-    columnManagerContainer: "mb-4 flex justify-end",
-};
-
-export { tableTheme };

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

@@ -1,297 +0,0 @@
-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;
-}
-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.js

@@ -1,28 +0,0 @@
-/**
- * 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
-        console.warn("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/data-display/Table/components/DeclarativeComponents.js

@@ -1,123 +0,0 @@
-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/data-display/Table/components/TableActions/TableActions.d.ts

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