@pagamio/frontend-commons-lib 0.8.212 → 0.8.214

package/lib/dashboard-visuals-v2/visualRegistry.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @fileoverview V2 Visual Registry - Maps visual type strings to ApexCharts components
+ * Compatible with V1 registry keys for easy migration
+ */
+import type React from 'react';
+/**
+ * Visual type enum for type-safe visual selection
+ */
+export declare const VisualType: {
+    readonly BarChart: "BarChart";
+    readonly LineChart: "LineChart";
+    readonly AreaChart: "AreaChart";
+    readonly DonutChart: "DonutChart";
+    readonly PieChart: "PieChart";
+    readonly HeatmapChart: "HeatmapChart";
+    readonly RadialChart: "RadialChart";
+    readonly GaugeChart: "GaugeChart";
+    readonly MixedChart: "MixedChart";
+    readonly BarLineChart: "BarLineChart";
+    readonly HorizontalBarChart: "HorizontalBarChart";
+    readonly GroupedBarChart: "GroupedBarChart";
+    readonly Tile: "Tile";
+    readonly StatCard: "StatCard";
+    readonly MetricCard: "MetricCard";
+    readonly InfoCard: "InfoCard";
+    readonly TopItemsCard: "TopItemsCard";
+    readonly ItemPerformanceCard: "ItemPerformanceCard";
+    readonly TransactionListCard: "TransactionListCard";
+};
+export type VisualTypeKey = keyof typeof VisualType;
+/**
+ * V2 Component Registry
+ * Maps visual type strings to their corresponding V2 (ApexCharts) components
+ */
+declare const visualRegistryV2: Record<string, React.FC<any>>;
+/**
+ * Get a visual component from the registry
+ * @param type - The visual type string
+ * @returns The component or undefined if not found
+ */
+export declare function getVisualComponent(type: string): React.FC<any> | undefined;
+/**
+ * Check if a visual type is registered
+ * @param type - The visual type string
+ * @returns Boolean indicating if the type is registered
+ */
+export declare function isRegisteredVisual(type: string): boolean;
+/**
+ * Get all registered visual types
+ * @returns Array of registered visual type strings
+ */
+export declare function getRegisteredVisualTypes(): string[];
+/**
+ * Register a custom visual component
+ * @param type - The visual type string
+ * @param component - The React component to register
+ */
+export declare function registerVisual(type: string, component: React.FC<any>): void;
+export default visualRegistryV2;

package/lib/dashboard-visuals-v2/visualRegistry.js

@@ -0,0 +1,110 @@
+import { InfoCard } from './cards/InfoCard';
+import { MetricCard } from './cards/MetricCard';
+import { StatCard } from './cards/StatCard';
+import { TopItemsCard } from './cards/TopItemsCard';
+import { TransactionListCard } from './cards/TransactionListCard';
+import { AreaChart } from './charts/AreaChart';
+import { BarChart } from './charts/BarChart';
+import { DonutChart } from './charts/DonutChart';
+import { HeatmapChart } from './charts/HeatmapChart';
+import { LineChart } from './charts/LineChart';
+import { MixedChart } from './charts/MixedChart';
+import { PieChart } from './charts/PieChart';
+import { RadialChart } from './charts/RadialChart';
+/**
+ * Visual type enum for type-safe visual selection
+ */
+export const VisualType = {
+    // Charts
+    BarChart: 'BarChart',
+    LineChart: 'LineChart',
+    AreaChart: 'AreaChart',
+    DonutChart: 'DonutChart',
+    PieChart: 'PieChart',
+    HeatmapChart: 'HeatmapChart',
+    RadialChart: 'RadialChart',
+    GaugeChart: 'GaugeChart', // Alias for RadialChart
+    MixedChart: 'MixedChart',
+    BarLineChart: 'BarLineChart', // Alias for MixedChart
+    HorizontalBarChart: 'HorizontalBarChart',
+    GroupedBarChart: 'GroupedBarChart',
+    // Cards/Tiles
+    Tile: 'Tile',
+    StatCard: 'StatCard',
+    MetricCard: 'MetricCard',
+    InfoCard: 'InfoCard',
+    TopItemsCard: 'TopItemsCard',
+    ItemPerformanceCard: 'ItemPerformanceCard',
+    TransactionListCard: 'TransactionListCard',
+};
+/**
+ * V2 Component Registry
+ * Maps visual type strings to their corresponding V2 (ApexCharts) components
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const visualRegistryV2 = {
+    // Chart components
+    BarChart,
+    LineChart,
+    AreaChart,
+    DonutChart,
+    PieChart,
+    HeatmapChart,
+    RadialChart,
+    MixedChart,
+    // Aliases for V1 compatibility
+    GaugeChart: RadialChart,
+    MultiGaugeChart: RadialChart,
+    SpeedometerChart: RadialChart,
+    BarLineChart: MixedChart,
+    LineGraph: LineChart,
+    // Horizontal bar is bar chart with horizontal prop
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    HorizontalBarChart: (props) => BarChart({ ...props, horizontal: true }),
+    // Grouped bar is bar chart with multi-series
+    GroupedBarChart: BarChart,
+    // Card/Tile components
+    Tile: StatCard,
+    StatCard,
+    MetricCard,
+    InfoCard,
+    TopItemsCard,
+    TransactionListCard,
+    // Aliases for V1 compatibility
+    ItemPerformanceCard: TopItemsCard,
+    SelectedEventTile: StatCard,
+};
+/**
+ * Get a visual component from the registry
+ * @param type - The visual type string
+ * @returns The component or undefined if not found
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function getVisualComponent(type) {
+    return visualRegistryV2[type];
+}
+/**
+ * Check if a visual type is registered
+ * @param type - The visual type string
+ * @returns Boolean indicating if the type is registered
+ */
+export function isRegisteredVisual(type) {
+    return type in visualRegistryV2;
+}
+/**
+ * Get all registered visual types
+ * @returns Array of registered visual type strings
+ */
+export function getRegisteredVisualTypes() {
+    return Object.keys(visualRegistryV2);
+}
+/**
+ * Register a custom visual component
+ * @param type - The visual type string
+ * @param component - The React component to register
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function registerVisual(type, component) {
+    visualRegistryV2[type] = component;
+}
+export default visualRegistryV2;

package/lib/data-table-v2/DataTable.d.ts

@@ -0,0 +1,7 @@
+import type { DataTableProps } from './types';
+/**
+ * DataTable V2 Component
+ * Headless table powered by TanStack Table
+ */
+export declare function DataTable<TData>({ data, columns: columnConfig, rowSelection: rowSelectionOptions, pagination: paginationOptions, sorting: sortingOptions, filtering: filteringOptions, columnVisibility: columnVisibilityOptions, export: exportOptions, rowActions, bulkActions, loading, error, emptyMessage, title, description, striped, hoverable, bordered, compact, stickyHeader, maxHeight, onRowClick, onRowDoubleClick, getRowId, rowClassName, className, classNames, headerContent, footerContent, onRefresh, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/lib/data-table-v2/DataTable.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable V2 - Main Component using TanStack Table
+ */
+import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import React, { useCallback, useMemo, useState } from 'react';
+import { cn } from '../helpers';
+import { DataTableBody, DataTableEmpty, DataTableError, DataTableHeader, DataTableLoading, DataTablePagination, DataTableRowActions, DataTableToolbar, } from './components';
+/**
+ * Convert DataTableColumn to TanStack ColumnDef
+ */
+function toColumnDef(column) {
+    return {
+        id: column.id,
+        accessorKey: column.accessorKey,
+        accessorFn: column.accessorFn,
+        header: column.header,
+        cell: column.cell,
+        footer: column.footer,
+        enableSorting: column.enableSorting ?? true,
+        enableColumnFilter: column.enableFiltering ?? false,
+        enableHiding: column.enableHiding ?? true,
+        size: column.size,
+        minSize: column.minSize,
+        maxSize: column.maxSize,
+        filterFn: column.filterFn,
+        aggregationFn: column.aggregationFn,
+        meta: {
+            align: column.align,
+        },
+    };
+}
+/**
+ * DataTable V2 Component
+ * Headless table powered by TanStack Table
+ */
+export function DataTable({ data, columns: columnConfig, rowSelection: rowSelectionOptions, pagination: paginationOptions, sorting: sortingOptions, filtering: filteringOptions, columnVisibility: columnVisibilityOptions, export: exportOptions, rowActions, bulkActions, loading = false, error, emptyMessage = 'No data available', title, description, striped = false, hoverable = true, bordered = false, compact = false, stickyHeader = false, maxHeight, onRowClick, onRowDoubleClick, getRowId, rowClassName, className, classNames, headerContent, footerContent, onRefresh, }) {
+    // State
+    const [sorting, setSorting] = useState(sortingOptions?.initialSorting ?? []);
+    const [columnFilters, setColumnFilters] = useState(filteringOptions?.initialFilters ?? []);
+    const [globalFilter, setGlobalFilter] = useState('');
+    const [columnVisibility, setColumnVisibility] = useState(columnVisibilityOptions?.initialVisibility ?? {});
+    const [rowSelectionState, setRowSelectionState] = useState(rowSelectionOptions?.selectedRowIds ?? {});
+    // Convert column config to TanStack ColumnDef
+    const columns = useMemo(() => {
+        const cols = [];
+        // Add selection column if enabled
+        if (rowSelectionOptions?.enabled) {
+            cols.push({
+                id: 'select',
+                header: rowSelectionOptions.enableSelectAll !== false
+                    ? ({ table }) => (_jsx("input", { type: "checkbox", checked: table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500" }))
+                    : undefined,
+                cell: ({ row }) => (_jsx("input", { type: "checkbox", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler(), onClick: (e) => e.stopPropagation(), className: "rounded border-gray-300 text-blue-600 focus:ring-blue-500" })),
+                enableSorting: false,
+                enableHiding: false,
+                size: 40,
+            });
+        }
+        // Add data columns
+        cols.push(...columnConfig.map(toColumnDef));
+        // Add actions column if provided
+        if (rowActions && rowActions.length > 0) {
+            cols.push({
+                id: 'actions',
+                header: '',
+                cell: ({ row }) => _jsx(DataTableRowActions, { row: row.original, actions: rowActions }),
+                enableSorting: false,
+                enableHiding: false,
+                size: 50,
+            });
+        }
+        return cols;
+    }, [columnConfig, rowSelectionOptions, rowActions]);
+    // Create table instance
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            columnFilters,
+            globalFilter,
+            columnVisibility,
+            rowSelection: rowSelectionState,
+        },
+        onSortingChange: (updater) => {
+            const newSorting = typeof updater === 'function' ? updater(sorting) : updater;
+            setSorting(newSorting);
+            sortingOptions?.onSortingChange?.(newSorting);
+        },
+        onColumnFiltersChange: (updater) => {
+            const newFilters = typeof updater === 'function' ? updater(columnFilters) : updater;
+            setColumnFilters(newFilters);
+            filteringOptions?.onFiltersChange?.(newFilters);
+        },
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnVisibilityChange: (updater) => {
+            const newVisibility = typeof updater === 'function' ? updater(columnVisibility) : updater;
+            setColumnVisibility(newVisibility);
+            columnVisibilityOptions?.onVisibilityChange?.(newVisibility);
+        },
+        onRowSelectionChange: (updater) => {
+            const newSelection = typeof updater === 'function' ? updater(rowSelectionState) : updater;
+            setRowSelectionState(newSelection);
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: sortingOptions?.enabled !== false ? getSortedRowModel() : undefined,
+        getFilteredRowModel: filteringOptions?.enabled !== false ? getFilteredRowModel() : undefined,
+        getPaginationRowModel: paginationOptions?.enabled !== false ? getPaginationRowModel() : undefined,
+        getRowId: getRowId,
+        enableRowSelection: rowSelectionOptions?.enabled ?? false,
+        enableMultiRowSelection: rowSelectionOptions?.mode !== 'single',
+        enableSorting: sortingOptions?.enabled ?? true,
+        enableMultiSort: sortingOptions?.enableMultiSort ?? false,
+        enableGlobalFilter: filteringOptions?.enableGlobalFilter ?? true,
+        enableColumnFilters: filteringOptions?.enableColumnFilters ?? false,
+        manualSorting: sortingOptions?.serverSide,
+        manualFiltering: filteringOptions?.serverSide,
+        manualPagination: paginationOptions?.serverSide,
+        pageCount: paginationOptions?.serverSide
+            ? Math.ceil((paginationOptions.totalRows ?? 0) / (paginationOptions.pageSize ?? 10))
+            : undefined,
+    });
+    // Update pagination if controlled
+    React.useEffect(() => {
+        if (paginationOptions?.pageSize) {
+            table.setPageSize(paginationOptions.pageSize);
+        }
+        if (typeof paginationOptions?.pageIndex === 'number') {
+            table.setPageIndex(paginationOptions.pageIndex);
+        }
+    }, [paginationOptions?.pageSize, paginationOptions?.pageIndex, table]);
+    // Notify parent of selection changes
+    React.useEffect(() => {
+        if (rowSelectionOptions?.onSelectionChange) {
+            const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+            rowSelectionOptions.onSelectionChange(selectedRows);
+        }
+    }, [rowSelectionState, table, rowSelectionOptions]);
+    // Export handler
+    const handleExport = useCallback((format) => {
+        if (exportOptions?.onExport) {
+            const exportData = table.getFilteredRowModel().rows.map((row) => row.original);
+            exportOptions.onExport(format, exportData);
+            return;
+        }
+        // Default export implementation
+        const rows = table.getFilteredRowModel().rows;
+        const exportColumns = columns.filter((col) => {
+            if (col.id === 'select' || col.id === 'actions')
+                return false;
+            if (exportOptions?.includeColumns?.length) {
+                return exportOptions.includeColumns.includes(col.id ?? '');
+            }
+            if (exportOptions?.excludeColumns?.length) {
+                return !exportOptions.excludeColumns.includes(col.id ?? '');
+            }
+            return true;
+        });
+        const exportData = rows.map((row) => {
+            const rowData = {};
+            exportColumns.forEach((col) => {
+                const cellValue = row.getValue(col.id ?? '');
+                rowData[col.id ?? ''] = cellValue;
+            });
+            return rowData;
+        });
+        const filename = exportOptions?.filename ?? 'export';
+        if (format === 'csv') {
+            const headers = exportColumns.map((col) => col.id ?? '').join(',');
+            const csvRows = exportData.map((row) => exportColumns.map((col) => JSON.stringify(row[col.id ?? ''] ?? '')).join(','));
+            const csv = [headers, ...csvRows].join('\n');
+            downloadFile(csv, `${filename}.csv`, 'text/csv');
+        }
+        else if (format === 'json') {
+            const json = JSON.stringify(exportData, null, 2);
+            downloadFile(json, `${filename}.json`, 'application/json');
+        }
+    }, [table, columns, exportOptions]);
+    // Get selected rows for bulk actions
+    const selectedRows = useMemo(() => table.getSelectedRowModel().rows.map((row) => row.original), [table, rowSelectionState]);
+    // Column count for empty/loading states
+    const colCount = columns.length;
+    return (_jsxs("div", { className: cn('bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden', className, classNames?.wrapper), children: [_jsx(DataTableToolbar, { title: title, description: description, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, enableGlobalFilter: filteringOptions?.enableGlobalFilter !== false, globalFilterPlaceholder: filteringOptions?.globalFilterPlaceholder, filterDebounceMs: filteringOptions?.filterDebounceMs, columnVisibility: columnVisibility, setColumnVisibility: setColumnVisibility, columnVisibilityOptions: columnVisibilityOptions, allColumns: table.getAllColumns(), exportOptions: exportOptions, onExport: exportOptions?.enabled ? handleExport : undefined, onRefresh: onRefresh, selectedCount: selectedRows.length, bulkActions: bulkActions, selectedRows: selectedRows, headerContent: headerContent, classNames: classNames }), _jsx("div", { className: cn('overflow-auto', maxHeight && 'overflow-y-auto'), style: { maxHeight: maxHeight }, children: _jsxs("table", { className: cn('w-full text-sm', bordered && 'border-collapse', compact && 'text-xs', classNames?.table), children: [_jsx(DataTableHeader, { table: table, stickyHeader: stickyHeader, classNames: classNames }), loading ? (_jsx(DataTableLoading, { rowCount: 5, colCount: colCount, classNames: classNames })) : error ? (_jsx("tbody", { children: _jsx(DataTableError, { error: error, onRetry: onRefresh, classNames: classNames, colSpan: colCount }) })) : table.getRowModel().rows.length === 0 ? (_jsx("tbody", { children: _jsx(DataTableEmpty, { message: emptyMessage, classNames: classNames, colSpan: colCount }) })) : (_jsx(DataTableBody, { table: table, striped: striped, hoverable: hoverable, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, rowClassName: rowClassName, classNames: classNames }))] }) }), paginationOptions?.enabled !== false && !loading && !error && data.length > 0 && (_jsx(DataTablePagination, { pageIndex: table.getState().pagination.pageIndex, pageSize: table.getState().pagination.pageSize, totalRows: paginationOptions?.serverSide ? (paginationOptions.totalRows ?? 0) : data.length, pageCount: table.getPageCount(), canPreviousPage: table.getCanPreviousPage(), canNextPage: table.getCanNextPage(), previousPage: table.previousPage, nextPage: table.nextPage, firstPage: () => table.setPageIndex(0), lastPage: () => table.setPageIndex(table.getPageCount() - 1), setPageIndex: table.setPageIndex, setPageSize: (size) => {
+                    table.setPageSize(size);
+                    paginationOptions?.onPaginationChange?.({
+                        pageIndex: 0,
+                        pageSize: size,
+                    });
+                }, options: paginationOptions, classNames: classNames })), footerContent && _jsx("div", { className: "px-4 py-3 border-t border-gray-200", children: footerContent })] }));
+}
+/**
+ * Utility function to download file
+ */
+function downloadFile(content, filename, mimeType) {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
+export default DataTable;

package/lib/data-table-v2/components/DataTableBody.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @fileoverview DataTable Body Component
+ */
+import { type Table } from '@tanstack/react-table';
+import type { DataTableClassNames } from '../types';
+interface DataTableBodyProps<TData> {
+    table: Table<TData>;
+    striped?: boolean;
+    hoverable?: boolean;
+    onRowClick?: (row: TData) => void;
+    onRowDoubleClick?: (row: TData) => void;
+    rowClassName?: string | ((row: TData, index: number) => string);
+    classNames?: DataTableClassNames;
+}
+/**
+ * DataTable Body Component
+ */
+export declare function DataTableBody<TData>({ table, striped, hoverable, onRowClick, onRowDoubleClick, rowClassName, classNames, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DataTableBody;

package/lib/data-table-v2/components/DataTableBody.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Body Component
+ */
+import { flexRender } from '@tanstack/react-table';
+import { cn } from '../../helpers';
+/**
+ * DataTable Body Component
+ */
+export function DataTableBody({ table, striped, hoverable, onRowClick, onRowDoubleClick, rowClassName, classNames, }) {
+    const rows = table.getRowModel().rows;
+    return (_jsx("tbody", { className: cn('divide-y divide-gray-200', classNames?.tbody), children: rows.map((row, index) => {
+            const customClassName = typeof rowClassName === 'function' ? rowClassName(row.original, index) : rowClassName;
+            return (_jsx("tr", { className: cn('transition-colors', striped && index % 2 === 1 && 'bg-gray-50/50', hoverable && 'hover:bg-gray-50', (onRowClick || onRowDoubleClick) && 'cursor-pointer', row.getIsSelected() && 'bg-blue-50', customClassName, classNames?.tr), onClick: () => onRowClick?.(row.original), onDoubleClick: () => onRowDoubleClick?.(row.original), children: row.getVisibleCells().map((cell) => {
+                    const alignment = cell.column.columnDef.meta?.align ?? 'left';
+                    return (_jsx("td", { className: cn('px-4 py-3 text-sm text-gray-900', alignment === 'center' && 'text-center', alignment === 'right' && 'text-right', classNames?.td), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                }) }, row.id));
+        }) }));
+}
+export default DataTableBody;

package/lib/data-table-v2/components/DataTableEmpty.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { DataTableClassNames } from '../types';
+interface DataTableEmptyProps {
+    /** Empty message */
+    message?: string | React.ReactNode;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Custom classNames */
+    classNames?: DataTableClassNames;
+    /** Number of columns for colspan */
+    colSpan?: number;
+}
+/**
+ * DataTable Empty State Component
+ */
+export declare function DataTableEmpty({ message, icon, classNames, colSpan }: DataTableEmptyProps): import("react/jsx-runtime").JSX.Element;
+export default DataTableEmpty;

package/lib/data-table-v2/components/DataTableEmpty.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Empty State Component
+ */
+import { Inbox } from 'lucide-react';
+import { cn } from '../../helpers';
+/**
+ * DataTable Empty State Component
+ */
+export function DataTableEmpty({ message = 'No data available', icon, classNames, colSpan = 1 }) {
+    return (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: cn('px-4 py-12', classNames?.empty), children: _jsxs("div", { className: "flex flex-col items-center justify-center text-gray-500", children: [icon ?? _jsx(Inbox, { className: "w-12 h-12 mb-3 text-gray-300" }), _jsx("div", { className: "text-sm", children: message })] }) }) }));
+}
+export default DataTableEmpty;

package/lib/data-table-v2/components/DataTableError.d.ts

@@ -0,0 +1,16 @@
+import type { DataTableClassNames } from '../types';
+interface DataTableErrorProps {
+    /** Error message or object */
+    error?: Error | string | null;
+    /** Retry handler */
+    onRetry?: () => void;
+    /** Custom classNames */
+    classNames?: DataTableClassNames;
+    /** Number of columns for colspan */
+    colSpan?: number;
+}
+/**
+ * DataTable Error State Component
+ */
+export declare function DataTableError({ error, onRetry, classNames, colSpan }: DataTableErrorProps): import("react/jsx-runtime").JSX.Element;
+export default DataTableError;

package/lib/data-table-v2/components/DataTableError.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Error State Component
+ */
+import { AlertCircle, RefreshCw } from 'lucide-react';
+import { cn } from '../../helpers';
+/**
+ * DataTable Error State Component
+ */
+export function DataTableError({ error, onRetry, classNames, colSpan = 1 }) {
+    const errorMessage = error instanceof Error ? error.message : typeof error === 'string' ? error : 'An error occurred while loading data';
+    return (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: cn('px-4 py-12', classNames?.error), children: _jsxs("div", { className: "flex flex-col items-center justify-center", children: [_jsx(AlertCircle, { className: "w-12 h-12 mb-3 text-red-400" }), _jsx("div", { className: "text-sm text-red-600 mb-3", children: errorMessage }), onRetry && (_jsxs("button", { onClick: onRetry, className: "flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 transition-colors", children: [_jsx(RefreshCw, { className: "w-4 h-4" }), "Retry"] }))] }) }) }));
+}
+export default DataTableError;

package/lib/data-table-v2/components/DataTableHeader.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @fileoverview DataTable Header Component
+ */
+import { type Table } from '@tanstack/react-table';
+import type { DataTableClassNames } from '../types';
+interface DataTableHeaderProps<TData> {
+    table: Table<TData>;
+    stickyHeader?: boolean;
+    classNames?: DataTableClassNames;
+}
+/**
+ * DataTable Header Component
+ */
+export declare function DataTableHeader<TData>({ table, stickyHeader, classNames }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
+export default DataTableHeader;

package/lib/data-table-v2/components/DataTableHeader.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Header Component
+ */
+import { flexRender } from '@tanstack/react-table';
+import { ChevronDown, ChevronUp, ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../helpers';
+/**
+ * Sort indicator component
+ */
+function SortIndicator({ direction }) {
+    if (direction === 'asc') {
+        return _jsx(ChevronUp, { className: "w-4 h-4 ml-1" });
+    }
+    if (direction === 'desc') {
+        return _jsx(ChevronDown, { className: "w-4 h-4 ml-1" });
+    }
+    return _jsx(ChevronsUpDown, { className: "w-4 h-4 ml-1 opacity-30" });
+}
+/**
+ * DataTable Header Component
+ */
+export function DataTableHeader({ table, stickyHeader, classNames }) {
+    return (_jsx("thead", { className: cn('bg-gray-50 border-b border-gray-200', stickyHeader && 'sticky top-0 z-10', classNames?.thead), children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { className: classNames?.tr, children: headerGroup.headers.map((header) => {
+                const canSort = header.column.getCanSort();
+                const sortDirection = header.column.getIsSorted();
+                const alignment = header.column.columnDef.meta?.align ?? 'left';
+                return (_jsx("th", { colSpan: header.colSpan, style: { width: header.getSize() !== 150 ? header.getSize() : undefined }, className: cn('px-4 py-3 text-xs font-semibold text-gray-600 uppercase tracking-wider', alignment === 'center' && 'text-center', alignment === 'right' && 'text-right', canSort && 'cursor-pointer select-none hover:bg-gray-100', classNames?.th), onClick: canSort ? header.column.getToggleSortingHandler() : undefined, children: header.isPlaceholder ? null : (_jsxs("div", { className: cn('flex items-center', alignment === 'center' && 'justify-center', alignment === 'right' && 'justify-end'), children: [flexRender(header.column.columnDef.header, header.getContext()), canSort && _jsx(SortIndicator, { direction: sortDirection })] })) }, header.id));
+            }) }, headerGroup.id))) }));
+}
+export default DataTableHeader;

package/lib/data-table-v2/components/DataTableLoading.d.ts

@@ -0,0 +1,14 @@
+import type { DataTableClassNames } from '../types';
+interface DataTableLoadingProps {
+    /** Number of skeleton rows */
+    rowCount?: number;
+    /** Number of columns for skeleton */
+    colCount?: number;
+    /** Custom classNames */
+    classNames?: DataTableClassNames;
+}
+/**
+ * DataTable Loading State Component
+ */
+export declare function DataTableLoading({ rowCount, colCount, classNames }: DataTableLoadingProps): import("react/jsx-runtime").JSX.Element;
+export default DataTableLoading;

package/lib/data-table-v2/components/DataTableLoading.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../helpers';
+/**
+ * DataTable Loading State Component
+ */
+export function DataTableLoading({ rowCount = 5, colCount = 4, classNames }) {
+    return (_jsx("tbody", { className: cn('animate-pulse', classNames?.loading), children: Array.from({ length: rowCount })
+            .map((value, index) => {
+            void value;
+            return index;
+        })
+            .map((rowIndex) => (_jsx("tr", { className: "border-b border-gray-100", children: Array.from({ length: colCount })
+                .map((value, index) => {
+                void value;
+                return index;
+            })
+                .map((colIndex) => (_jsx("td", { className: "px-4 py-3", children: _jsx("div", { className: "h-4 bg-gray-200 rounded w-full max-w-[150px]" }) }, colIndex))) }, rowIndex))) }));
+}
+export default DataTableLoading;

package/lib/data-table-v2/components/DataTablePagination.d.ts

@@ -0,0 +1,36 @@
+import type { DataTableClassNames, PaginationOptions } from '../types';
+interface DataTablePaginationProps {
+    /** Current page index (0-based) */
+    pageIndex: number;
+    /** Items per page */
+    pageSize: number;
+    /** Total number of rows */
+    totalRows: number;
+    /** Total number of pages */
+    pageCount: number;
+    /** Can go to previous page */
+    canPreviousPage: boolean;
+    /** Can go to next page */
+    canNextPage: boolean;
+    /** Go to previous page */
+    previousPage: () => void;
+    /** Go to next page */
+    nextPage: () => void;
+    /** Go to first page */
+    firstPage: () => void;
+    /** Go to last page */
+    lastPage: () => void;
+    /** Set page index */
+    setPageIndex: (index: number) => void;
+    /** Set page size */
+    setPageSize: (size: number) => void;
+    /** Pagination options */
+    options?: PaginationOptions;
+    /** Custom classNames */
+    classNames?: DataTableClassNames;
+}
+/**
+ * DataTable Pagination Component
+ */
+export declare function DataTablePagination({ pageIndex, pageSize, totalRows, pageCount, canPreviousPage, canNextPage, previousPage, nextPage, firstPage, lastPage, setPageIndex, setPageSize, options, classNames, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+export default DataTablePagination;

package/lib/data-table-v2/components/DataTablePagination.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @fileoverview DataTable Pagination Component
+ */
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import { cn } from '../../helpers';
+/**
+ * DataTable Pagination Component
+ */
+export function DataTablePagination({ pageIndex, pageSize, totalRows, pageCount, canPreviousPage, canNextPage, previousPage, nextPage, firstPage, lastPage, setPageIndex, setPageSize, options = {}, classNames, }) {
+    const { pageSizeOptions = [10, 25, 50, 100], showPageSizeSelector = true, showPageInfo = true } = options;
+    // Calculate display range
+    const start = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const end = Math.min((pageIndex + 1) * pageSize, totalRows);
+    return (_jsxs("div", { className: cn('flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-white', classNames?.pagination), children: [_jsx("div", { className: "flex items-center gap-2", children: showPageSizeSelector && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-sm text-gray-600", children: "Rows per page:" }), _jsx("select", { value: pageSize, onChange: (e) => setPageSize(Number(e.target.value)), className: "px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: size }, size))) })] })) }), showPageInfo && (_jsxs("div", { className: "text-sm text-gray-600", children: [start, "-", end, " of ", totalRows.toLocaleString()] })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { onClick: firstPage, disabled: !canPreviousPage, className: cn('p-1.5 rounded-md transition-colors', canPreviousPage ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed'), "aria-label": "First page", children: _jsx(ChevronsLeft, { className: "w-4 h-4" }) }), _jsx("button", { onClick: previousPage, disabled: !canPreviousPage, className: cn('p-1.5 rounded-md transition-colors', canPreviousPage ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed'), "aria-label": "Previous page", children: _jsx(ChevronLeft, { className: "w-4 h-4" }) }), _jsxs("div", { className: "flex items-center gap-1 mx-2", children: [_jsx("span", { className: "text-sm text-gray-600", children: "Page" }), _jsx("input", { type: "number", min: 1, max: pageCount, value: pageIndex + 1, onChange: (e) => {
+                                    const page = e.target.value ? Number(e.target.value) - 1 : 0;
+                                    setPageIndex(Math.min(Math.max(0, page), pageCount - 1));
+                                }, className: "w-14 px-2 py-1 text-sm text-center border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" }), _jsxs("span", { className: "text-sm text-gray-600", children: ["of ", pageCount] })] }), _jsx("button", { onClick: nextPage, disabled: !canNextPage, className: cn('p-1.5 rounded-md transition-colors', canNextPage ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed'), "aria-label": "Next page", children: _jsx(ChevronRight, { className: "w-4 h-4" }) }), _jsx("button", { onClick: lastPage, disabled: !canNextPage, className: cn('p-1.5 rounded-md transition-colors', canNextPage ? 'text-gray-600 hover:bg-gray-100' : 'text-gray-300 cursor-not-allowed'), "aria-label": "Last page", children: _jsx(ChevronsRight, { className: "w-4 h-4" }) })] })] }));
+}
+export default DataTablePagination;