@adiba-banking-cloud/backoffice 0.0.106 → 0.0.107

package/build/index.esm.js/index.js

@@ -1,4 +1,4 @@
-export { A as ApplicationMenu, o as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, n as ConnectionPanel, D as DonutChart, z as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, u as ErrorModal, F as File, d as Icons, v as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, H as MaskedTilePanel, M as MultiAxisArea, P as PageTitle, q as PaymentMethod, r as PaymentMethodAdd, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, G as SimpleForm, w as SimpleModal, i as SimplePanel, s as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, p as SubscriptionPlans, x as SuccessModal, J as TilePanel, m as TitleWithIndex, T as TitledPanel, y as TwoFactorModal, U as UserMenu, t as theme, N as useManagedModals, K as useModal } from './index-CWjYoFnK.js';
+export { A as ApplicationMenu, p as ApplicationPanel, k as AvatarLabelPanel, B as BasicHeatmap, C as CalendarHeatmap, o as ConnectionPanel, u as CreditCard, v as DetailCard, D as DonutChart, O as Drawer, e as DynamicLogo, f as DynamicShigaLogo, E as EqualizerColumn, G as ErrorModal, F as File, d as Icons, r as InfoGrid, H as InfoModal, I as InterpolatedHeatmap, L as LabelPanel, R as MaskedTilePanel, W as MerchantCard, M as MultiAxisArea, m as PageTitle, w as PaymentMethod, x as PaymentMethodAdd, P as PieChart, j as SearchPanel, h as SideMenu, b as SimpleArea, S as SimpleColumn, Q as SimpleForm, J as SimpleModal, i as SimplePanel, y as SimpleTable, l as SimpleText, c as StackedArea, a as StackedColumn, t as StatusAlert, q as SubscriptionPlans, K as SuccessModal, V as TilePanel, n as TitleWithIndex, T as TitledPanel, N as TwoFactorModal, U as UserMenu, s as UserProfileCard, z as theme, Y as useManagedModals, X as useModal } from './index-Df9bhaj8.js';
 import '@mantine/modals';
 import 'react';
 import '@mantine/core';

package/build/styles.css

@@ -1 +1 @@
-svg>path{stroke-width:inherit}.backoffice-sidemenu.mantine-NavLink-root{padding:.25rem}.backoffice-sidemenu.mantine-NavLink-root[data-active] .mantine-NavLink-section:first-child{background:var(--mantine-color-adiba-4)}.backoffice-sidemenu.mantine-NavLink-root .mantine-NavLink-section:first-child{border-radius:9999px;display:flex;height:2rem;width:2rem}.payment-plan .mantine-Indicator-indicator{padding:0}
+svg>path{stroke-width:inherit}.backoffice-sidemenu.mantine-NavLink-root{padding:.25rem}.backoffice-sidemenu.mantine-NavLink-root[data-active] .mantine-NavLink-section:first-child{background:var(--mantine-color-adiba-4)}.backoffice-sidemenu.mantine-NavLink-root .mantine-NavLink-section:first-child{border-radius:9999px;display:flex;height:2rem;width:2rem}.payment-plan .mantine-Indicator-indicator{padding:0}@font-face{font-family:THICCCBOI;src:url(https://db.onlinewebfonts.com/t/74065c19f82d6a5933f924aea6d037a7.eot);src:url(https://db.onlinewebfonts.com/t/74065c19f82d6a5933f924aea6d037a7.eot?#iefix) format("embedded-opentype"),url(https://db.onlinewebfonts.com/t/74065c19f82d6a5933f924aea6d037a7.woff2) format("woff2"),url(https://db.onlinewebfonts.com/t/74065c19f82d6a5933f924aea6d037a7.woff) format("woff"),url(https://db.onlinewebfonts.com/t/74065c19f82d6a5933f924aea6d037a7.ttf) format("truetype"),url(https://db.onlinewebfonts.com/t/74065c19f82d6a5933f924aea6d037a7.svg#THICCCBOI) format("svg")}.credit-card-container{cursor:pointer;height:185px;perspective:1000px;width:320px}.credit-card-inner{height:100%;position:relative;text-align:center;transform-style:preserve-3d;transition:transform .6s;width:100%}.credit-card-container.flipped .credit-card-inner{transform:rotateY(180deg)}.credit-card-back,.credit-card-front{backface-visibility:hidden;border-radius:20px;box-shadow:0 4px 8px rgba(0,0,0,.1);height:100%;overflow:hidden;position:absolute;width:100%}.credit-card-back{transform:rotateY(180deg)}.magnetic-stripe{background-color:#2f2f2f;height:40px;margin-top:20px;width:100%}.add-card-container{align-items:center;background-color:#ecedef;border:1px dashed #6f758b;border-radius:20px;cursor:pointer;display:flex;height:185px;justify-content:center;transition:background-color .2s;width:320px}.add-card-container:hover{background-color:#e9ecef}

package/build/typings/components/charts/pie/Pie.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PieChartProps } from "./Pie.types";
+export declare const PieChart: React.FC<PieChartProps>;

package/build/typings/components/charts/pie/Pie.default.d.ts

@@ -0,0 +1,2 @@
+import { PieChartConfig, PieChartProps } from "./Pie.types";
+export declare const initChart: ({ withLegend, ...rest }: PieChartProps) => PieChartConfig;

package/build/typings/components/charts/pie/Pie.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { PieChart } from "./Pie";
+declare const _default: Meta<typeof PieChart>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Pie.types").PieChartProps>;

package/build/typings/components/charts/pie/Pie.types.d.ts

@@ -0,0 +1,31 @@
+export interface PieChartProps {
+    bgColor?: string;
+    plotBgColor?: string;
+    colors?: string[];
+    title?: string;
+    categories: string[];
+    series: number[];
+    withLegend: boolean | PieChartLegendProps;
+}
+interface PieChartLegendProps {
+    enabled: boolean;
+    layout?: "vertical" | "horizontal";
+    align?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
+    floating?: boolean;
+    x?: number;
+    y?: number;
+}
+export interface PieChartConfig {
+    chart: object;
+    title: object;
+    exporting: {
+        enabled: boolean;
+    };
+    tooltip: object;
+    legend: object;
+    plotOptions: object;
+    credits: object;
+    series: object;
+}
+export {};

package/build/typings/components/index.d.ts

@@ -2,6 +2,7 @@ export { SimpleColumn, EqualizerColumn, StackedColumn, } from "./charts/column/C
 export { SimpleArea, StackedArea, MultiAxisArea } from "./charts/area/Area";
 export { BasicHeatmap, InterpolatedHeatmap, CalendarHeatmap, } from "./charts/heatmap/Heatmap";
 export { DonutChart } from "./charts/donut/Donut";
+export { PieChart } from "./charts/pie/Pie";
 export { Icons } from "./general/icons/Icons";
 export { DynamicLogo, DynamicShigaLogo } from "./general/logos/Logos";
 export { ApplicationMenu } from "./menus/application/Application";
@@ -15,6 +16,11 @@ export { TitleWithIndex } from "./general/title/TitleWithIndex";
 export { ConnectionPanel } from "./panels/connection/Connection";
 export { ApplicationPanel } from "./panels/application/Application";
 export { SubscriptionPlans } from "./widgets/subscription_plan/SubscriptionPlan";
+export { InfoGrid } from "./widgets/info_grid/InfoGrid";
+export { UserProfileCard } from "./widgets/user_profile/UserProfileCard";
+export { StatusAlert } from "./widgets/status_alert/StatusAlert";
+export { CreditCard } from "./widgets/credit_card/CreditCard";
+export { DetailCard } from "./widgets/detail_card/DetailCard";
 export { PaymentMethod, PaymentMethodAdd, } from "./widgets/payment_method/PaymentMethod";
 export { SimpleTable } from "./tables/simple/Simple";
 export { File } from "./documents/file/File";
@@ -27,3 +33,4 @@ export { TwoFactorModal } from "./modals/twofactor/Twofactor";
 export { Drawer } from "./general/drawer/Drawer";
 export { SimpleForm } from "./forms/simple/Simple";
 export { MaskedTilePanel, TilePanel } from "./panels/tile/Tile";
+export { MerchantCard } from "./widgets/merchant/MerchantCard";

package/build/typings/components/tables/table-state/TableStateView.d.ts

@@ -0,0 +1,2 @@
+import { TableStateViewProps } from "./TableStateView.types";
+export declare const TableStateView: ({ icon, title, description, action, iconColor, iconBgColor, borderColor, }: TableStateViewProps) => import("react/jsx-runtime").JSX.Element;

package/build/typings/components/tables/table-state/TableStateView.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { TableStateView } from "./TableStateView";
+import { TableStateViewProps } from "./TableStateView.types";
+declare const _default: Meta<typeof TableStateView>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TableStateViewProps>;
+export declare const WithAction: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TableStateViewProps>;
+export declare const ErrorState: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TableStateViewProps>;
+export declare const CustomStyling: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TableStateViewProps>;

package/build/typings/components/tables/table-state/TableStateView.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface TableStateViewProps {
+    icon: ReactNode;
+    title: string;
+    description: string;
+    action?: ReactNode;
+    iconColor?: string;
+    iconBgColor?: string;
+    borderColor?: string;
+}

package/build/typings/components/theme.d.ts

@@ -42,7 +42,7 @@ export declare const theme: {
     headings?: {
         fontFamily?: string | undefined;
         fontWeight?: string | undefined;
-        textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
+        textWrap?: "nowrap" | "wrap" | "balance" | "stable" | "pretty" | undefined;
         sizes?: {
             h1?: {
                 fontSize?: string | undefined;

package/build/typings/components/widgets/credit_card/CreditCard.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { CreditCardProps } from "./CreditCard.types";
+import "./CreditCard.css";
+export declare const CreditCard: React.FC<CreditCardProps>;

package/build/typings/components/widgets/credit_card/CreditCard.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { CreditCard } from "./CreditCard";
+declare const _default: Meta<typeof CreditCard>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./CreditCard.types").CreditCardProps>;
+export declare const AddCard: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./CreditCard.types").CreditCardProps>;
+export declare const CustomGradient: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./CreditCard.types").CreditCardProps>;

package/build/typings/components/widgets/credit_card/CreditCard.types.d.ts

@@ -0,0 +1,39 @@
+export type CardVariant = "display" | "add";
+export type CardBrand = "mastercard" | "visa" | "verve" | "amex";
+export interface CreditCardProps {
+    /**
+     * Display mode or Add New mode
+     * @default "display"
+     */
+    variant?: CardVariant;
+    /**
+     * Card Number (masked or full)
+     */
+    cardNumber?: string;
+    /**
+     * Card Holder Name
+     */
+    cardHolder?: string;
+    /**
+     * Expiry Date (MM/YY)
+     */
+    expiryDate?: string;
+    /**
+     * CVV code (for back of card)
+     */
+    cvv?: string;
+    /**
+     * Card Brand / Network
+     */
+    brand?: CardBrand;
+    /**
+     * Custom background styles.
+     * Can be a URL (url('...')) or gradient (linear-gradient(...)) or color hex.
+     * Defaults to a dark gradient if not provided.
+     */
+    background?: string;
+    /**
+     * Click handler for "Add" variant
+     */
+    onAddClick?: () => void;
+}

package/build/typings/components/widgets/detail_card/DetailCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { DetailCardProps } from "./DetailCard.types";
+export declare const DetailCard: React.FC<DetailCardProps>;

package/build/typings/components/widgets/detail_card/DetailCard.stories.d.ts

@@ -0,0 +1,17 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { DetailCard } from "./DetailCard";
+declare const _default: Meta<typeof DetailCard>;
+export default _default;
+export declare const AddressSensitive: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const PhoneSensitive: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const VerificationBadge: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const IDTypesList: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const UtilityDocuments: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const DashboardGridExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const InvitesList: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const ActiveClientLoans: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const ActiveGroupLoans: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const ActiveOverdueGroupLoans: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const ActiveOverdueClientLoans: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;
+export declare const ActivationDate: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./DetailCard.types").DetailCardProps>;

package/build/typings/components/widgets/detail_card/DetailCard.types.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+import { IconsProps } from "../../general/icons/Icons.types";
+export type DetailCardVariant = "simple" | "sensitive" | "badge" | "document" | "list" | "user-list" | "value-list";
+export interface DetailCardItem {
+    id: string;
+    label: string;
+    subLabel?: string;
+    value?: string;
+    avatarUrl?: string;
+    initials?: string;
+    bgColor?: string;
+    color?: string;
+    icon?: IconsProps["name"];
+    onAction?: () => void;
+}
+export interface DetailCardProps {
+    /**
+     * Title or label of the card (top text)
+     */
+    label: string;
+    /**
+     * Type of card variant
+     * @default "simple"
+     */
+    variant?: DetailCardVariant;
+    /**
+     * Main value to display (for simple, sensitive, badge)
+     */
+    value?: string | ReactNode;
+    /**
+     * Color for the badge variant
+     * @default "green"
+     */
+    badgeColor?: string;
+    /**
+     * List of items for document or list variants
+     */
+    items?: DetailCardItem[];
+}

package/build/typings/components/widgets/info_grid/InfoGrid.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { InfoGridProps } from "./InfoGrid.types";
+export declare const InfoGrid: React.FC<InfoGridProps>;

package/build/typings/components/widgets/info_grid/InfoGrid.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { InfoGrid } from "./InfoGrid";
+declare const _default: Meta<typeof InfoGrid>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./InfoGrid.types").InfoGridProps>;
+export declare const TwoColumns: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./InfoGrid.types").InfoGridProps>;
+export declare const FourColumns: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./InfoGrid.types").InfoGridProps>;
+export declare const CustomBackground: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./InfoGrid.types").InfoGridProps>;
+export declare const MobileView: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./InfoGrid.types").InfoGridProps>;

package/build/typings/components/widgets/info_grid/InfoGrid.types.d.ts

@@ -0,0 +1,20 @@
+export interface InfoGridItem {
+    label: string;
+    value: string | number | React.ReactNode;
+}
+export interface InfoGridProps {
+    /**
+     * The data to display in the grid
+     */
+    data: InfoGridItem[];
+    /**
+     * Number of columns to display on desktop
+     * @default 3
+     */
+    columns?: 2 | 3 | 4 | 5;
+    /**
+     * Background color for the card
+     * @default "#0D1326"
+     */
+    bgColor?: string;
+}

package/build/typings/components/widgets/merchant/MerchantCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { MerchantCardProps } from "./MerchantCard.types";
+export declare const MerchantCard: React.FC<MerchantCardProps>;

package/build/typings/components/widgets/merchant/MerchantCard.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+import { MerchantCard } from "./MerchantCard";
+declare const _default: Meta<typeof MerchantCard>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./MerchantCard.types").MerchantCardProps>;
+export declare const NoLogo: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./MerchantCard.types").MerchantCardProps>;
+export declare const LongName: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./MerchantCard.types").MerchantCardProps>;
+export declare const Removable: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./MerchantCard.types").MerchantCardProps>;
+export declare const DraggableList: () => import("react/jsx-runtime").JSX.Element;

package/build/typings/components/widgets/merchant/MerchantCard.types.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+export interface MerchantCardProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Merchant name */
+    name: string;
+    /** Merchant logo URL */
+    logo?: string;
+    /** Merchant category (e.g. Messaging) */
+    category: string;
+    /** Price string (e.g. from ₦70/month) */
+    price: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Props for the drag handle from dnd-kit */
+    dragHandleProps?: any;
+    /** Component variant */
+    variant?: "default" | "closable";
+    /** Close handler (for closable variant) */
+    onClose?: () => void;
+}

package/build/typings/components/widgets/status_alert/StatusAlert.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { StatusAlertProps } from "./StatusAlert.types";
+export declare const StatusAlert: React.FC<StatusAlertProps>;

package/build/typings/components/widgets/status_alert/StatusAlert.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { StatusAlert } from "./StatusAlert";
+declare const _default: Meta<typeof StatusAlert>;
+export default _default;
+export declare const Danger: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./StatusAlert.types").StatusAlertProps>;
+export declare const Success: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./StatusAlert.types").StatusAlertProps>;
+export declare const Warning: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./StatusAlert.types").StatusAlertProps>;
+export declare const Info: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./StatusAlert.types").StatusAlertProps>;
+export declare const NoAction: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./StatusAlert.types").StatusAlertProps>;

package/build/typings/components/widgets/status_alert/StatusAlert.types.d.ts

@@ -0,0 +1,27 @@
+export type StatusAlertVariant = "success" | "danger" | "warning" | "info";
+export interface StatusAlertProps {
+    /**
+     * Title of the alert
+     */
+    title: string;
+    /**
+     * Body text of the alert
+     */
+    description: string;
+    /**
+     * Variant determining color scheme (red vs green)
+     */
+    variant: StatusAlertVariant;
+    /**
+     * Label for the action button. If provided, button will be shown.
+     */
+    actionLabel?: string;
+    /**
+     * Callback for the action button
+     */
+    onAction?: () => void;
+    /**
+     * Callback for the close button. If provided, close 'x' will be shown.
+     */
+    onClose?: () => void;
+}

package/build/typings/components/widgets/user_profile/UserProfileCard.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { UserProfileCardProps } from "./UserProfileCard.types";
+export declare const UserProfileCard: React.FC<UserProfileCardProps>;

package/build/typings/components/widgets/user_profile/UserProfileCard.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/react";
+import "@mantine/core/styles.css";
+import { UserProfileCard } from "./UserProfileCard";
+declare const _default: Meta<typeof UserProfileCard>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./UserProfileCard.types").UserProfileCardProps>;
+export declare const WithoutScore: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./UserProfileCard.types").UserProfileCardProps>;
+export declare const CustomScoreColor: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./UserProfileCard.types").UserProfileCardProps>;

package/build/typings/components/widgets/user_profile/UserProfileCard.types.d.ts

@@ -0,0 +1,32 @@
+export interface UserProfileCardProps {
+    /**
+     * User's display name
+     */
+    name: string;
+    /**
+     * URL for the user's avatar image
+     */
+    avatarUrl?: string;
+    /**
+     * Size of the avatar in pixels
+     * @default 120
+     */
+    avatarSize?: number;
+    /**
+     * User type label (e.g. "Individual")
+     */
+    userType: string;
+    /**
+     * User's unique identifier
+     */
+    userId: string;
+    /**
+     * Score or status to display in badge (e.g. "750/800")
+     */
+    score?: string;
+    /**
+     * Color theme for the score badge
+     * @default "green"
+     */
+    scoreColor?: string;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.106",
+  "version": "0.0.107",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",