@eml-payments/ui-kit 1.3.2 → 1.4.3

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/UICreditCard/UICreditCard.d.ts

@@ -1,3 +1,3 @@
 import { type JSX } from 'react';
 import type { UICreditCardProps } from './UICreditCard.types';
-export declare const UICreditCard: ({ cvv, cvvLabel, cardNumber, cardNumberLabel, expiryDate, expiryDateLabel, enableCopy, classNames, backImageUrl, frontImageUrl, cardholderName, cardholderNameLabel, isFlipped, customBackContent, customFrontContent, aspectRatio, }: UICreditCardProps) => JSX.Element;
+export declare const UICreditCard: ({ cvv, cvvLabel, cardNumber, cardNumberLabel, expiryDate, expiryDateLabel, enableCopy, classNames, backImageUrl, frontImageUrl, cardholderName, cardholderNameLabel, isFlipped, customBackContent, customFrontContent, aspectRatio, isBlocked, blockedImageUrlOverlay, }: UICreditCardProps) => JSX.Element;

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CopyButton } from '../CopyButton/CopyButton';
-export const UICreditCard = ({ cvv, cvvLabel = 'CVV', cardNumber, cardNumberLabel = 'Card number', expiryDate, expiryDateLabel = 'Expiry', enableCopy, classNames, backImageUrl, frontImageUrl, cardholderName, cardholderNameLabel = 'Cardholder name', isFlipped = false, customBackContent, customFrontContent, aspectRatio = 3 / 2, }) => {
+export const UICreditCard = ({ cvv, cvvLabel = 'CVV', cardNumber, cardNumberLabel = 'Card number', expiryDate, expiryDateLabel = 'Expiry', enableCopy, classNames, backImageUrl, frontImageUrl, cardholderName, cardholderNameLabel = 'Cardholder name', isFlipped = false, customBackContent, customFrontContent, aspectRatio = 3 / 2, isBlocked = false, blockedImageUrlOverlay, }) => {
     return (_jsx("div", { className: "relative mx-auto group", style: { aspectRatio, width: '100%', perspective: '500px' }, children: _jsxs("div", { className: `absolute w-full h-full transition-transform duration-700 ease-in-out top-0 ${classNames === null || classNames === void 0 ? void 0 : classNames.container}`, style: {
                 transformStyle: 'preserve-3d',
                 transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)',
@@ -11,5 +11,7 @@ export const UICreditCard = ({ cvv, cvvLabel = 'CVV', cardNumber, cardNumberLabe
                         backfaceVisibility: 'hidden',
                         transform: 'rotateY(180deg)',
                         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 })] }))] })] })) })] }) }));
+                    }, 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)" }) }))] }) }));
 };

package/dist/src/components/UICreditCard/UICreditCard.stories.d.ts

@@ -8,3 +8,4 @@ export declare const WithCustomContent: Story;
 export declare const WithDefaultFlipState: Story;
 export declare const CopyDisabled: Story;
 export declare const ControlledFlipToggle: Story;
+export declare const BlockedCard: Story;

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

@@ -31,9 +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: () => _jsx(BlockedCardExample, {}),
 };

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

@@ -5,6 +5,8 @@ export interface UICreditCardProps {
     cardNumberLabel?: string;
     frontImageUrl: string;
     backImageUrl: string;
+    isBlocked?: boolean;
+    blockedImageUrlOverlay?: string;
     cvv?: string;
     cvvLabel?: string;
     expiryDate?: string;
@@ -17,6 +19,7 @@ export interface UICreditCardProps {
         fieldLabel?: string;
         fieldValue?: string;
         copyIcon?: string;
+        blockedOverlay?: string;
     };
     customFrontContent?: React.ReactNode;
     customBackContent?: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.3.2",
+	"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.562.0",
+		"lucide-react": "^0.575.0",
 		"prettier": "^3.6.2",
 		"react": ">=18.0.0",
 		"react-day-picker": "^9.13.0",
@@ -94,7 +94,7 @@
 		"eslint-plugin-prettier": "^5.5.1",
 		"eslint-plugin-react": "^7.37.5",
 		"eslint-plugin-react-hooks": "^7.0.0",
-		"eslint-plugin-react-refresh": "^0.4.20",
+		"eslint-plugin-react-refresh": "^0.5.0",
 		"eslint-plugin-storybook": "^10.0.6",
 		"husky": "^9.1.7",
 		"lint-staged": "^16.1.2",