@eml-payments/ui-kit 1.3.3 → 1.4.3

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

@@ -1,5 +1,11 @@
-import type { ColumnDef, Row, SortingState } from '@tanstack/react-table';
+import type { SortingState, ColumnDef, Table } from '@tanstack/react-table';
 import type { DropdownOption, DropdownStructure } from '../DropdownWrapper/DropdownWrapper.types';
+import type { ReactNode } from 'react';
+declare module '@tanstack/react-table' {
+    interface TableMeta<TData> {
+        hasActions?: boolean;
+    }
+}
 export type FlexColumnDef<T> = ColumnDef<T> & {
     flex?: number;
 };
@@ -12,47 +18,84 @@ export type InfiniteScrollOptions = {
     loadingMoreMessage?: string;
     noMoreDataMessage?: string;
 };
-export type PaginationMode = 'client' | 'server' | 'none';
-export interface VirtualizationOptions {
+export type VirtualizationOptions = {
     enabled: boolean;
     rowEstimate?: number;
     overscan?: number;
+};
+export type ClientPaginationProps = {
+    paginationMode?: 'client' | 'none';
+    rowsPerPage?: number;
+    onRefetch?: never;
+    totalServerRows?: never;
+};
+export type ServerPaginationProps = {
+    paginationMode: 'server';
+    rowsPerPage?: number;
+    onRefetch: (pageIndex: number, pageSize: number) => void;
+    totalServerRows: number;
+};
+export type StandardPaginationProps = ClientPaginationProps | ServerPaginationProps;
+export interface ITableActionsDropdownProps<T> {
+    getOptions: (row: T) => DropdownOption[];
+    structure?: DropdownStructure;
+    renderCustomTrigger?: (row: T) => ReactNode;
+    menuAlignment?: 'start' | 'end' | 'center';
+    isDisabled?: boolean | ((row: T) => boolean);
 }
-export interface TableProps<T> {
+export type GroupRowClickHandler<T> = (args: {
+    columnId: string;
+    value: unknown;
+    rows: T[];
+}) => void;
+export interface TableInputProps<T> {
     id: string;
-    height?: number | string;
     data: T[];
     columns: FlexColumnDef<T>[];
     rowIdKey?: keyof T | 'id';
+    height?: number | string;
+    showHeader?: boolean;
     className?: string;
-    isLoading?: boolean;
-    showSkeletonRows?: boolean;
-    checkboxSelection?: boolean;
-    checkboxPosition?: 'start' | 'end';
+    /** Sorting */
     sorting?: SortingState;
     onSortingChange?: (s: SortingState) => void;
-    onSelectionChange?: (selectedIds: string[]) => void;
-    enableRowSelection?: (row: Row<T>) => boolean;
-    onRefetch?: (pageIndex: number, pageSize: number) => void;
-    isMultiRowSelection?: boolean;
-    totalServerRows?: number;
-    paginationMode?: PaginationMode;
-    noRowsMessage?: string;
-    rowsPerPage?: number;
-    selectedRowIds?: string[];
-    tableActionsDropdown?: {
-        getOptions: (row: T) => DropdownOption[];
-        structure?: DropdownStructure;
-        renderCustomTrigger?: (row: T) => React.ReactNode;
-        menuAlignment?: 'start' | 'end' | 'center' | undefined;
-        isDisabled?: boolean | ((row: T) => boolean);
-    };
+    /** Grouping */
+    grouping?: string[];
+    isLoading?: boolean;
+    /** Row interactions */
     onRowClick?: (row: T) => void;
     isRowClickable?: (row: T) => boolean;
-    showHeader?: boolean;
-    grouping?: string[];
+    onGroupRowClick?: GroupRowClickHandler<T>;
+    /** Search */
     isSearchActive?: boolean;
+    searchQuery?: string;
+    minSearchLength?: number;
     noSearchResultsMessage?: string;
-    infiniteScroll?: InfiniteScrollOptions;
-    virtualization?: VirtualizationOptions;
+    noRowsMessage?: string;
+    /** Actions */
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
 }
+export interface BaseTableProps<T> {
+    table: Table<T>;
+    height?: number | string;
+    showHeader?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    renderBody: () => ReactNode;
+    footer?: ReactNode;
+    containerRef?: React.Ref<HTMLDivElement>;
+}
+export type StandardTableProps<T extends {
+    id: string;
+}> = TableInputProps<T> & StandardPaginationProps;
+export type InfiniteScrollTableProps<T extends {
+    id: string;
+}> = TableInputProps<T> & {
+    infiniteScroll: InfiniteScrollOptions;
+    virtualization?: VirtualizationOptions;
+    /** explicitly not supported */
+    paginationMode?: never;
+    rowsPerPage?: never;
+    onRefetch?: never;
+    totalServerRows?: never;
+};

package/dist/src/components/Table/body/Body.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/components/Table/body/renderGroupRow.d.ts

@@ -0,0 +1,13 @@
+import type { Row } from '@tanstack/react-table';
+interface RenderGroupRowProps<T> {
+    row: Row<T> & {
+        groupingColumnId: string;
+    };
+    onGroupRowClick?: (args: {
+        columnId: string;
+        value: unknown;
+        rows: T[];
+    }) => void;
+}
+export declare function renderGroupRow<T>({ row, onGroupRowClick }: RenderGroupRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/Table/body/renderGroupRow.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../../utils';
+export function renderGroupRow({ row, onGroupRowClick }) {
+    const columnId = row.groupingColumnId;
+    const groupValue = row.getGroupingValue(columnId);
+    const clickable = Boolean(onGroupRowClick);
+    return (_jsx("tr", { className: classNames('border-none', clickable && 'cursor-pointer hover:bg-muted/40'), onClick: clickable
+            ? () => onGroupRowClick === null || onGroupRowClick === void 0 ? void 0 : onGroupRowClick({
+                columnId,
+                value: groupValue,
+                rows: row.subRows.map((r) => r.original),
+            })
+            : undefined, children: _jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0", children: _jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground", children: String(groupValue) }) }) }));
+}

package/dist/src/components/Table/body/renderLeafRow.d.ts

@@ -0,0 +1,11 @@
+import { type Row } from '@tanstack/react-table';
+import type { ITableActionsDropdownProps } from '../Table.types';
+export declare function renderLeafRow<T extends {
+    id: string;
+}>({ row, onRowClick, isRowClickable, hasActions, tableActionsDropdown, }: {
+    row: Row<T>;
+    onRowClick?: (row: T) => void;
+    isRowClickable?: (row: T) => boolean;
+    hasActions?: boolean;
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Table/body/renderLeafRow.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../Button';
+import { DropdownWrapper } from '../../DropdownWrapper';
+import { classNames } from '../../../utils';
+import { flexRender } from '@tanstack/react-table';
+import { FiMoreHorizontal } from 'react-icons/fi';
+import { getRowInteractivity } from '../table.helpers';
+export function renderLeafRow({ row, onRowClick, isRowClickable, hasActions, tableActionsDropdown, }) {
+    var _a, _b;
+    const original = row.original;
+    const { clickable, disabled } = getRowInteractivity(original, onRowClick, isRowClickable);
+    return (_jsxs("tr", { className: classNames('border-t transition-colors', clickable && 'cursor-pointer hover:bg-gray-50', disabled && 'bg-muted/40 text-muted-foreground cursor-not-allowed'), onClick: clickable ? () => onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(original) : undefined, children: [row.getVisibleCells().map((cell) => {
+                const width = cell.column.getSize();
+                const isSelect = cell.column.id === 'select';
+                return (_jsx("td", { style: { width }, className: isSelect ? 'p-1' : 'px-4 py-3', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+            }), hasActions && tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { options: tableActionsDropdown.getOptions(original), menuAlignment: tableActionsDropdown.menuAlignment, isTriggerElementDisabled: disabled, triggerElement: (_b = (_a = tableActionsDropdown.renderCustomTrigger) === null || _a === void 0 ? void 0 : _a.call(tableActionsDropdown, original)) !== null && _b !== void 0 ? _b : (_jsx(Button, { size: "icon", variant: "ghost", className: "p-1", disabled: disabled, children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.id));
+}

package/dist/src/components/Table/body/renderTableBody.d.ts

@@ -0,0 +1,22 @@
+import type { Table } from '@tanstack/react-table';
+import type { ITableActionsDropdownProps } from '../Table.types';
+import type { TableBodyState } from './utils';
+interface RenderTableBodyProps<T extends {
+    id: string;
+}> {
+    table: Table<T>;
+    state: TableBodyState<T>;
+    colSpan: number;
+    onRowClick?: (row: T) => void;
+    isRowClickable?: (row: T) => boolean;
+    onGroupRowClick?: (args: {
+        columnId: string;
+        value: unknown;
+        rows: T[];
+    }) => void;
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
+}
+export declare function renderTableBody<T extends {
+    id: string;
+}>({ table, state, colSpan, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, }: RenderTableBodyProps<T>): React.ReactNode;
+export {};

package/dist/src/components/Table/body/renderTableBody.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderTableRows } from '../render-rows/renderTableRows';
+export function renderTableBody({ table, state, colSpan, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, }) {
+    var _a;
+    switch (state.type) {
+        case 'loading':
+            return null; // spinner handled by BaseTable
+        case 'empty':
+            return (_jsx("tr", { children: _jsx("td", { colSpan: colSpan, className: "px-4 py-8 text-center text-muted-foreground", children: state.message }) }));
+        case 'rows':
+            return renderTableRows({
+                table,
+                rows: state.rows,
+                hasActions: Boolean((_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.hasActions),
+                onRowClick,
+                isRowClickable,
+                onGroupRowClick,
+                tableActionsDropdown,
+            });
+    }
+}

package/dist/src/components/Table/body/utils/getColSpan.d.ts

@@ -0,0 +1,2 @@
+import type { Table } from '@tanstack/react-table';
+export declare function getColSpan<T>(table: Table<T>): number;

package/dist/src/components/Table/body/utils/getColSpan.js

@@ -0,0 +1,4 @@
+export function getColSpan(table) {
+    var _a;
+    return table.getVisibleLeafColumns().length + (((_a = table.options.meta) === null || _a === void 0 ? void 0 : _a.hasActions) ? 1 : 0);
+}

package/dist/src/components/Table/body/utils/getTableBodyState.d.ts

@@ -0,0 +1,16 @@
+import type { Row } from '@tanstack/react-table';
+import type { ReactNode } from 'react';
+export type TableBodyState<T> = {
+    type: 'loading';
+} | {
+    type: 'empty';
+    message: ReactNode;
+} | {
+    type: 'rows';
+    rows: Row<T>[];
+};
+export declare function getTableBodyState<T>({ rows, isLoading, noResultsMessage, }: {
+    rows: Row<T>[];
+    isLoading?: boolean;
+    noResultsMessage: ReactNode;
+}): TableBodyState<T>;

package/dist/src/components/Table/body/utils/getTableBodyState.js

@@ -0,0 +1,9 @@
+export function getTableBodyState({ rows, isLoading, noResultsMessage, }) {
+    if (isLoading) {
+        return { type: 'loading' };
+    }
+    if (rows.length === 0) {
+        return { type: 'empty', message: noResultsMessage };
+    }
+    return { type: 'rows', rows };
+}

package/dist/src/components/Table/body/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './getTableBodyState';
+export * from './getColSpan';

package/dist/src/components/Table/body/utils/index.js

@@ -0,0 +1,2 @@
+export * from './getTableBodyState';
+export * from './getColSpan';

package/dist/src/components/Table/hooks/useTableColumns.d.ts

@@ -0,0 +1,2 @@
+import type { FlexColumnDef } from '../Table.types';
+export declare function useTableColumns<T>(columns: FlexColumnDef<T>[], containerWidth: number, virtualizationEnabled: boolean): import("../table.helpers").VirtualFlexColumnDef<T>[];

package/dist/src/components/Table/hooks/useTableColumns.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+import { applyFlexSizes } from '../table.helpers';
+export function useTableColumns(columns, containerWidth, virtualizationEnabled) {
+    return useMemo(() => applyFlexSizes(columns, containerWidth, virtualizationEnabled), [columns, containerWidth, virtualizationEnabled]);
+}

package/dist/src/components/Table/hooks/useTableLayout.d.ts

@@ -0,0 +1,5 @@
+export declare function useTableLayout(): {
+    parentScrollRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    loaderRef: import("react").MutableRefObject<HTMLTableRowElement | null>;
+    containerWidth: number;
+};

package/dist/src/components/Table/hooks/useTableLayout.js

@@ -0,0 +1,21 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+export function useTableLayout() {
+    const parentScrollRef = useRef(null);
+    const loaderRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!parentScrollRef.current) {
+            return;
+        }
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(parentScrollRef.current);
+        return () => ro.disconnect();
+    }, []);
+    return {
+        parentScrollRef,
+        loaderRef,
+        containerWidth,
+    };
+}

package/dist/src/components/Table/hooks/useTableSorting.d.ts

@@ -0,0 +1,5 @@
+import type { SortingState } from '@tanstack/react-table';
+export declare function useTableSorting(controlledSorting?: SortingState, onSortingChange?: (s: SortingState) => void): {
+    sorting: SortingState;
+    onSortingChange: (updater: SortingState | ((prev: SortingState) => SortingState)) => void;
+};

package/dist/src/components/Table/hooks/useTableSorting.js

@@ -0,0 +1,14 @@
+import { useState } from 'react';
+export function useTableSorting(controlledSorting, onSortingChange) {
+    const [internalSorting, setInternalSorting] = useState(controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : []);
+    const sorting = controlledSorting !== null && controlledSorting !== void 0 ? controlledSorting : internalSorting;
+    const handleSortingChange = (updater) => {
+        const next = typeof updater === 'function' ? updater(sorting) : updater;
+        setInternalSorting(next);
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
+    };
+    return {
+        sorting,
+        onSortingChange: handleSortingChange,
+    };
+}

package/dist/src/components/Table/hooks/useUrlPaginationSync.d.ts

@@ -1,6 +1,5 @@
-export declare function useUrlPaginationSync(rowsPerPage: number, tableId: string): {
-    pageIndex: number;
-    setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    pageSize: number;
-    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+export declare function useUrlPaginationSync(tableId: string, defaultPageSize: number): {
+    initialPageIndex: number;
+    initialPageSize: number;
+    syncToUrl: (pageIndex: number, pageSize: number) => void;
 };

package/dist/src/components/Table/hooks/useUrlPaginationSync.js

@@ -1,12 +1,26 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-export function useUrlPaginationSync(rowsPerPage, tableId) {
-    const [searchParams] = useSearchParams();
-    const pageSizeKey = `${tableId}_pageSize`;
+export function useUrlPaginationSync(tableId, defaultPageSize) {
+    const [searchParams, setSearchParams] = useSearchParams();
     const pageNoKey = `${tableId}_pageNo`;
-    const initialPageIndex = Math.max(parseInt(searchParams.get(pageNoKey) || '1') - 1, 0);
-    const initialPageSize = Math.max(parseInt(searchParams.get(pageSizeKey) || String(rowsPerPage !== null && rowsPerPage !== void 0 ? rowsPerPage : 10)), 1);
-    const [pageIndex, setPageIndex] = useState(initialPageIndex);
-    const [pageSize, setPageSize] = useState(initialPageSize);
-    return { pageIndex, setPageIndex, pageSize, setPageSize };
+    const pageSizeKey = `${tableId}_pageSize`;
+    const [initialPageIndex] = useState(() => {
+        const raw = Number(searchParams.get(pageNoKey));
+        return Number.isFinite(raw) && raw > 0 ? raw - 1 : 0;
+    });
+    const [initialPageSize] = useState(() => {
+        const raw = Number(searchParams.get(pageSizeKey));
+        return Number.isFinite(raw) && raw > 0 ? raw : defaultPageSize;
+    });
+    const syncToUrl = useCallback((pageIndex, pageSize) => {
+        const next = new URLSearchParams(searchParams);
+        next.set(pageNoKey, String(pageIndex + 1)); // 1-based
+        next.set(pageSizeKey, String(pageSize));
+        setSearchParams(next, { replace: true });
+    }, [pageNoKey, pageSizeKey, searchParams, setSearchParams]);
+    return {
+        initialPageIndex,
+        initialPageSize,
+        syncToUrl,
+    };
 }

package/dist/src/components/Table/index.d.ts

@@ -1,2 +1,5 @@
-export * from './Table';
-export * from './Table.types';
+export { StandardTable } from './StandardTable';
+export { InfiniteTable } from './InfiniteTable';
+export type { StandardTableProps } from './StandardTable/StandardTable.types';
+export type { InfiniteTableProps } from './InfiniteTable/InfiniteTable.props';
+export type { FlexColumnDef, TableInputProps, ITableActionsDropdownProps, GroupRowClickHandler, StandardPaginationProps, ClientPaginationProps, ServerPaginationProps, InfiniteScrollOptions, VirtualizationOptions, InfiniteScrollTableProps, } from './Table.types';

package/dist/src/components/Table/index.js

@@ -1,2 +1,2 @@
-export * from './Table';
-export * from './Table.types';
+export { StandardTable } from './StandardTable';
+export { InfiniteTable } from './InfiniteTable';

package/dist/src/components/Table/render-rows/renderTableRows.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import { type Row, type Table } from '@tanstack/react-table';
+import type { ITableActionsDropdownProps } from '../Table.types';
+interface RenderTableRowsProps<T extends {
+    id: string;
+}> {
+    table: Table<T>;
+    rows: Row<T>[];
+    hasActions: boolean;
+    onRowClick?: (row: T) => void;
+    isRowClickable?: (row: T) => boolean;
+    onGroupRowClick?: (args: {
+        columnId: string;
+        value: unknown;
+        rows: T[];
+    }) => void;
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
+}
+export declare function renderTableRows<T extends {
+    id: string;
+}>({ table, rows, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, hasActions, }: RenderTableRowsProps<T>): React.ReactNode[];
+export {};

package/dist/src/components/Table/render-rows/renderTableRows.js

@@ -0,0 +1,31 @@
+import { renderGroupRow } from '../body/renderGroupRow';
+import { renderLeafRow } from '../body/renderLeafRow';
+export function renderTableRows({ table, rows, onRowClick, isRowClickable, onGroupRowClick, tableActionsDropdown, hasActions, }) {
+    const result = [];
+    for (const row of rows) {
+        if (row.getIsGrouped() && row.groupingColumnId) {
+            const groupedRow = row;
+            result.push(renderGroupRow({
+                row: groupedRow,
+                onGroupRowClick,
+            }), ...renderTableRows({
+                table,
+                rows: row.subRows,
+                hasActions,
+                onRowClick,
+                isRowClickable,
+                onGroupRowClick,
+                tableActionsDropdown,
+            }));
+            continue;
+        }
+        result.push(renderLeafRow({
+            row,
+            onRowClick,
+            isRowClickable,
+            hasActions,
+            tableActionsDropdown,
+        }));
+    }
+    return result;
+}

package/dist/src/components/Table/table.helpers.d.ts

@@ -1,8 +1,11 @@
-import type { Table } from '@tanstack/react-table';
 import type { FlexColumnDef } from './Table.types';
-export declare function getCheckboxSelectionColumn<T>(table: Table<T>): FlexColumnDef<T>;
+export declare function getCheckboxSelectionColumn<T>(): FlexColumnDef<T>;
 export type VirtualFlexColumnDef<T> = FlexColumnDef<T> & {
     size?: number;
     _virtualLocked?: boolean;
 };
 export declare function applyFlexSizes<T>(columns?: FlexColumnDef<T>[], containerWidth?: number, virtualizationEnabled?: boolean): VirtualFlexColumnDef<T>[];
+export declare function getRowInteractivity<T>(row: T, onRowClick?: (row: T) => void, isRowClickable?: (row: T) => boolean): {
+    clickable: boolean;
+    disabled: boolean;
+};

package/dist/src/components/Table/table.helpers.js

@@ -1,21 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox } from '../Checkbox';
-export function getCheckboxSelectionColumn(table) {
+export function getCheckboxSelectionColumn() {
     return {
         id: 'select',
         size: 24,
-        header: () => {
+        header: ({ table }) => {
             if (!table.options.enableMultiRowSelection) {
                 return null;
             }
             const hasSelectableRows = table.getRowModel().rows.some((row) => row.getCanSelect());
-            return (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsx(Checkbox, { checked: table.getIsAllPageRowsSelected(), 
-                    // indeterminate={table.getIsSomeRowsSelected()} TODO: Implement indeterminate state
-                    disabled: !hasSelectableRows, onCheckedChange: (checked) => {
+            return (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Checkbox, { checked: table.getIsAllPageRowsSelected(), disabled: !hasSelectableRows, onCheckedChange: (checked) => {
                         table.toggleAllPageRowsSelected(Boolean(checked));
                     } }) }));
         },
-        cell: ({ row }) => (_jsx("div", { className: "flex justify-center items-center h-full", children: _jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => {
+        cell: ({ row }) => (_jsx("div", { className: "flex h-full items-center justify-center", children: _jsx(Checkbox, { checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (checked) => {
                     row.toggleSelected(Boolean(checked));
                 } }) })),
         enableSorting: false,
@@ -24,8 +22,9 @@ export function getCheckboxSelectionColumn(table) {
     };
 }
 export function applyFlexSizes(columns, containerWidth = 0, virtualizationEnabled = false) {
-    if (!columns)
+    if (!columns) {
         return [];
+    }
     if (!virtualizationEnabled || containerWidth === 0) {
         return columns;
     }
@@ -40,3 +39,10 @@ export function applyFlexSizes(columns, containerWidth = 0, virtualizationEnable
         };
     });
 }
+export function getRowInteractivity(row, onRowClick, isRowClickable) {
+    const allowed = isRowClickable ? isRowClickable(row) : true;
+    return {
+        clickable: Boolean(onRowClick) && allowed,
+        disabled: !allowed,
+    };
+}

package/dist/src/components/Tooltip/Tooltip.stories.js

@@ -12,7 +12,7 @@ export const Default = {
     render: () => (_jsx(TooltipStoryWrapper, { content: "Simple tooltip", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const LongTextResponsive = {
-    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\r\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\r\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
+    render: () => (_jsx(TooltipStoryWrapper, { content: "This tooltip contains a longer message that wraps gracefully across multiple lines. On smaller\n\t\tscreens, it narrows and stacks vertically so it's easier to read\u2014especially useful for\n\t\taccessibility, mobile devices, or multi-language support.", side: "top", children: _jsx(Button, { children: "Hover me" }) })),
 };
 export const OnDifferentSides = {
     render: () => (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(TooltipStoryWrapper, { content: "Top tooltip", side: "top", children: _jsx(Button, { children: "Top" }) }), _jsx(TooltipStoryWrapper, { content: "Bottom tooltip", side: "bottom", children: _jsx(Button, { children: "Bottom" }) }), _jsx(TooltipStoryWrapper, { content: "Left tooltip", side: "left", children: _jsx(Button, { children: "Left" }) }), _jsx(TooltipStoryWrapper, { content: "Right tooltip", side: "right", children: _jsx(Button, { children: "Right" }) })] })),

package/dist/src/components/UICreditCard/UICreditCard.js

@@ -13,5 +13,5 @@ export const UICreditCard = ({ cvv, cvvLabel = 'CVV', cardNumber, cardNumberLabe
                         backgroundImage: `url(${backImageUrl})`,
                     }, children: customBackContent !== null && customBackContent !== void 0 ? customBackContent : (_jsxs("div", { className: "flex flex-col justify-end flex-1 gap-2", children: [_jsx("div", { children: _jsxs("div", { className: "flex flex-col items-start", children: [_jsx("div", { className: `text-xs text-(--uikit-textSecondary) ${classNames === null || classNames === void 0 ? void 0 : classNames.fieldLabel}`, children: cardholderNameLabel }), _jsx("div", { className: `text-base text-(--uikit-textPrimary) ${classNames === null || classNames === void 0 ? void 0 : classNames.fieldValue}`, children: cardholderName })] }) }), _jsxs("div", { className: "flex flex-col items-start", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: `text-xs text-(--uikit-textSecondary) ${classNames === null || classNames === void 0 ? void 0 : classNames.fieldLabel}`, children: cardNumberLabel }), enableCopy && _jsx(CopyButton, { value: cardNumber, className: classNames === null || classNames === void 0 ? void 0 : classNames.copyIcon })] }), _jsx("div", { className: `text-base text-(--uikit-textPrimary) ${classNames === null || classNames === void 0 ? void 0 : classNames.fieldValue}`, children: cardNumber })] }), _jsxs("div", { className: "flex items-start gap-10", children: [expiryDate && (_jsxs("div", { className: "flex flex-col items-start", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-(--uikit-textSecondary)", children: expiryDateLabel }), enableCopy && (_jsx(CopyButton, { value: expiryDate, className: classNames === null || classNames === void 0 ? void 0 : classNames.copyIcon }))] }), _jsx("div", { className: `text-base text-(--uikit-textPrimary) ${classNames === null || classNames === void 0 ? void 0 : classNames.fieldValue}`, children: expiryDate })] })), cvv && (_jsxs("div", { className: "flex flex-col items-start", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs text-(--uikit-textSecondary)", children: cvvLabel }), enableCopy && _jsx(CopyButton, { value: cvv, className: classNames === null || classNames === void 0 ? void 0 : classNames.copyIcon })] }), _jsx("div", { className: `text-base text-(--uikit-textPrimary) ${classNames === null || classNames === void 0 ? void 0 : classNames.fieldValue}`, children: cvv })] }))] })] })) }), isBlocked && (_jsx("div", { className: `absolute inset-0 h-full w-full opacity-50 ${classNames === null || classNames === void 0 ? void 0 : classNames.blockedOverlay}`, style: {
                         zIndex: 10,
-                    }, children: _jsx("img", { src: blockedImageUrlOverlay, alt: "Card blocked", className: 'h-full w-full object-cover rounded-(--uikit-radius)' }) }))] }) }));
+                    }, children: _jsx("img", { src: blockedImageUrlOverlay, alt: "Card blocked", className: "h-full w-full object-cover rounded-(--uikit-radius)" }) }))] }) }));
 };

package/dist/src/components/UICreditCard/UICreditCard.stories.js

@@ -31,15 +31,17 @@ export const WithDefaultFlipState = {
 export const CopyDisabled = {
     render: () => (_jsx("div", { style: { maxWidth: '450px', margin: '0 auto' }, children: _jsx(UICreditCard, { isFlipped: true, enableCopy: false, cardholderName: "No Copy", cardNumber: "4444 5555 6666 7777", expiryDate: "11/29", cvv: "000", frontImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU", backImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU" }) })),
 };
+function ControlledFlipToggleExample() {
+    const [flipped, setFlipped] = useState(false);
+    return (_jsx("div", { style: { maxWidth: '450px', margin: '0 auto' }, children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("button", { className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition", onClick: () => setFlipped((prev) => !prev), children: flipped ? 'Show Front' : 'Show Back' }), _jsx(UICreditCard, { isFlipped: flipped, cardholderName: "Toggle Flip", cardNumber: "8888 9999 0000 1111", expiryDate: "08/28", cvv: "456", enableCopy: true, frontImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU", backImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU" })] }) }));
+}
 export const ControlledFlipToggle = {
-    render: () => {
-        const [flipped, setFlipped] = useState(false);
-        return (_jsx("div", { style: { maxWidth: '450px', margin: '0 auto' }, children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("button", { className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition", onClick: () => setFlipped((prev) => !prev), children: flipped ? 'Show Front' : 'Show Back' }), _jsx(UICreditCard, { isFlipped: flipped, cardholderName: "Toggle Flip", cardNumber: "8888 9999 0000 1111", expiryDate: "08/28", cvv: "456", enableCopy: true, frontImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU", backImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU" })] }) }));
-    },
+    render: () => _jsx(ControlledFlipToggleExample, {}),
 };
+function BlockedCardExample() {
+    const [flipped, setFlipped] = useState(false);
+    return (_jsx("div", { style: { maxWidth: '450px', margin: '0 auto' }, children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("button", { className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition", onClick: () => setFlipped((prev) => !prev), children: flipped ? 'Show Front' : 'Show Back' }), _jsx(UICreditCard, { isFlipped: flipped, isBlocked: true, blockedImageUrlOverlay: "https://thumbs.dreamstime.com/b/frozen-background-12857463.jpg", cardholderName: "Blocked Card", cardNumber: "5555 6666 7777 8888", expiryDate: "10/27", cvv: "321", enableCopy: false, frontImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU", backImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU" })] }) }));
+}
 export const BlockedCard = {
-    render: () => {
-        const [flipped, setFlipped] = useState(false);
-        return (_jsx("div", { style: { maxWidth: '450px', margin: '0 auto' }, children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("button", { className: "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition", onClick: () => setFlipped((prev) => !prev), children: flipped ? 'Show Front' : 'Show Back' }), _jsx(UICreditCard, { isFlipped: flipped, isBlocked: true, blockedImageUrlOverlay: "https://thumbs.dreamstime.com/b/frozen-background-12857463.jpg", cardholderName: "Blocked Card", cardNumber: "5555 6666 7777 8888", expiryDate: "10/27", cvv: "321", enableCopy: false, frontImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU", backImageUrl: "https://fastly.picsum.photos/id/349/200/300.jpg?hmac=gEjHZbjuKtdD2GOM-qQtuaA95TCvDUs6iVvKraQ94nU" })] }) }));
-    },
+    render: () => _jsx(BlockedCardExample, {}),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.3.3",
+	"version": "1.4.3",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -67,7 +67,7 @@
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.19",
-		"lucide-react": "^0.563.0",
+		"lucide-react": "^0.575.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",
 		"react-day-picker": "^9.13.0",