@temboplus/frontend-react-core 0.1.3-beta.0 → 0.1.3-beta.10

package/dist/features/input-validation/amount-validator.js

@@ -0,0 +1,100 @@
+import { Amount } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for monetary amounts using the Amount class.
+ * Validates format, currency, and range constraints with currency-specific defaults.
+ * Only allows positive amounts (including zero).
+ *
+ * **Default Range Constraints by Currency:**
+ * - **TZS (Tanzanian Shilling)**: Min: 1,000 TZS, Max: 1,000,000 TZS
+ * - **KES (Kenyan Shilling)**: Min: 40 KES, Max: 40,000,000 KES
+ * - **Other Currencies**: Min: 1, Max: 1,000,000 (in respective currency units)
+ *
+ * These defaults are applied only when `min` and/or `max` options are not explicitly provided.
+ * You can override these defaults by providing explicit `min` and `max` values in the options.
+ * Set `min` or `max` to `null` to completely disable that constraint.
+ *
+ * @param options - Configuration options for amount validation
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // Basic validation with TZS currency (uses default min: 1,000 TZS, max: 1,000,000 TZS)
+ * rules: [{ required: true, validator: AMOUNT_VALIDATOR() }]
+ *
+ * @example
+ * // Basic validation with KES currency (uses default min: 40 KES, max: 40,000,000 KES)
+ * rules: [{ required: true, validator: AMOUNT_VALIDATOR({ currencyCode: 'KES' }) }]
+ *
+ * @example
+ * // Override default ranges with custom min/max values
+ * rules: [{
+ *   required: true,
+ *   validator: AMOUNT_VALIDATOR({
+ *     currencyCode: 'USD',
+ *     min: 1,           // Custom minimum (overrides default)
+ *     max: 10000,       // Custom maximum (overrides default)
+ *   })
+ * }]
+ *
+ * @example
+ * // Disable range validation by setting min and max to null
+ * rules: [{
+ *   required: true,
+ *   validator: AMOUNT_VALIDATOR({
+ *     currencyCode: 'USD',
+ *     min: null,        // No minimum constraint
+ *     max: null,        // No maximum constraint
+ *   })
+ * }]
+ *
+ * @example
+ * // Disable only minimum constraint, keep maximum
+ * rules: [{
+ *   required: true,
+ *   validator: AMOUNT_VALIDATOR({
+ *     currencyCode: 'TZS',
+ *     min: null,        // No minimum constraint
+ *     // max uses default (1,000,000 TZS)
+ *   })
+ * }]
+ */
+export const AMOUNT_VALIDATOR = (options = {}) => {
+    const { currencyCode = "TZS", invalidFormatMessage, minMessage, maxMessage, } = options;
+    const { min: defaultMin, max: defaultMax } = Amount.getTransactionLimits(currencyCode);
+    // Use provided values, or fall back to currency-specific defaults
+    // If explicitly set to null, no constraint will be applied
+    const min = options.min !== undefined ? options.min : defaultMin;
+    const max = options.max !== undefined ? options.max : defaultMax;
+    return (rule, value) => {
+        // Convert value to string for processing
+        const amountString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!amountString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Amount is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        // Try to create Amount instance
+        const amountInstance = Amount.from(amountString, currencyCode);
+        if (!amountInstance) {
+            return Promise.reject(new Error(invalidFormatMessage ||
+                `Invalid amount format. Please enter a valid monetary amount (e.g., "1000", "1,234.56").`));
+        }
+        // Reject negative amounts (always not allowed)
+        if (amountInstance.isNegative()) {
+            return Promise.reject(new Error("Negative amounts are not allowed. Please enter a positive amount."));
+        }
+        // Check minimum constraint (only if min is not null)
+        if (min !== null && amountInstance.lessThan(min)) {
+            return Promise.reject(new Error(minMessage ||
+                `Amount must be at least ${(defaultMin === null || defaultMin === void 0 ? void 0 : defaultMin.label) || min}. Please enter a higher amount.`));
+        }
+        // Check maximum constraint (only if max is not null)
+        if (max !== null && amountInstance.greaterThan(max)) {
+            return Promise.reject(new Error(maxMessage ||
+                `Amount must not exceed ${(defaultMax === null || defaultMax === void 0 ? void 0 : defaultMax.label) || max}. Please enter a lower amount.`));
+        }
+        // Return the formatted numeric value (normalized)
+        return Promise.resolve(amountInstance.formattedNumericValue);
+    };
+};

package/dist/features/input-validation/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./account-name-validator.js";
+export * from "./account-number-validator.js";
+export * from "./amount-validator.js";
+export * from "./phone-number-validator.js";
+export * from "./swift-code-validator.js";

package/dist/features/input-validation/index.js

@@ -0,0 +1,5 @@
+export * from "./account-name-validator.js";
+export * from "./account-number-validator.js";
+export * from "./amount-validator.js";
+export * from "./phone-number-validator.js";
+export * from "./swift-code-validator.js";

package/dist/features/input-validation/phone-number-validator.d.ts

@@ -0,0 +1,25 @@
+import { ISO2CountryCode } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for general phone numbers that validates format and country.
+ * Uses PhoneNumberFactory.canCreate() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }]
+ */
+export declare const PHONE_NUMBER_VALIDATOR: (countryCode?: ISO2CountryCode) => (rule: any, value: string | null | undefined) => Promise<string | undefined>;
+/**
+ * Creates a validator for mobile phone numbers eligible for payout operations.
+ * Uses PhoneNumberFactory.checkPayoutEligibility() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: MOBILE_PHONE_VALIDATOR('TZ') }]
+ */
+export declare const MOBILE_PHONE_VALIDATOR: (countryCode?: ISO2CountryCode) => (rule: any, value: string | null | undefined) => Promise<string | undefined>;

package/dist/features/input-validation/phone-number-validator.js

@@ -0,0 +1,79 @@
+import { Country, PhoneNumberFactory } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for general phone numbers that validates format and country.
+ * Uses PhoneNumberFactory.canCreate() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }]
+ */
+export const PHONE_NUMBER_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const phoneString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!phoneString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Phone number is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        const isValid = PhoneNumberFactory.canCreate(phoneString, {
+            defaultCountry: countryCode,
+        });
+        if (isValid) {
+            // Return normalized phone number
+            const phoneInstance = PhoneNumberFactory.create(phoneString, {
+                defaultCountry: countryCode,
+            });
+            return Promise.resolve((phoneInstance === null || phoneInstance === void 0 ? void 0 : phoneInstance.e164Format) || phoneString);
+        }
+        if (countryCode) {
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            return Promise.reject(new Error(`Invalid ${countryName} phone number format. Please enter a valid ${countryName} phone number.`));
+        }
+        return Promise.reject(new Error("This phone number is invalid."));
+    };
+};
+/**
+ * Creates a validator for mobile phone numbers eligible for payout operations.
+ * Uses PhoneNumberFactory.checkPayoutEligibility() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: MOBILE_PHONE_VALIDATOR('TZ') }]
+ */
+export const MOBILE_PHONE_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const phoneString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!phoneString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Mobile phone number is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        const phoneInstance = PhoneNumberFactory.create(phoneString, {
+            defaultCountry: countryCode,
+        });
+        if (!phoneInstance) {
+            return Promise.reject(new Error("This phone number is invalid."));
+        }
+        const isEligibleForPayout = PhoneNumberFactory.checkPayoutEligibility(phoneInstance);
+        if (isEligibleForPayout) {
+            return Promise.resolve((phoneInstance === null || phoneInstance === void 0 ? void 0 : phoneInstance.e164Format) || phoneString);
+        }
+        if (countryCode) {
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            return Promise.reject(new Error(`Invalid ${countryName} phone number format. Please enter a valid ${countryName} phone number.`));
+        }
+        return Promise.reject(new Error("This phone number is invalid."));
+    };
+};

package/dist/features/input-validation/swift-code-validator.d.ts

@@ -0,0 +1,13 @@
+import { ISO2CountryCode } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for SWIFT/BIC codes specific to a country.
+ * Uses BankValidation.validateSwiftCode() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: SWIFT_CODE_VALIDATOR('TZ') }]
+ */
+export declare const SWIFT_CODE_VALIDATOR: (countryCode?: ISO2CountryCode) => (rule: any, value: string | null | undefined) => Promise<string | undefined>;

package/dist/features/input-validation/swift-code-validator.js

@@ -0,0 +1,38 @@
+import { BankValidation, Country } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for SWIFT/BIC codes specific to a country.
+ * Uses BankValidation.validateSwiftCode() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: SWIFT_CODE_VALIDATOR('TZ') }]
+ */
+export const SWIFT_CODE_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const swiftCodeString = value === null || value === void 0 ? void 0 : value.toString().trim().toUpperCase();
+        // If field is empty/undefined/null
+        if (!swiftCodeString) {
+            if (rule.required) {
+                return Promise.reject(new Error("SWIFT code is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        if (countryCode) {
+            const isValid = BankValidation.validateSwiftCode(swiftCodeString, countryCode);
+            if (isValid) {
+                return Promise.resolve(swiftCodeString);
+            }
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            return Promise.reject(new Error(`Invalid ${countryName} SWIFT code. Please enter a valid ${countryName} bank SWIFT/BIC code.`));
+        }
+        const isValid = BankValidation.validateSwiftCodeForAnyCountry(swiftCodeString);
+        if (isValid) {
+            return Promise.resolve(swiftCodeString);
+        }
+        return Promise.reject(new Error(`Invalid SWIFT code. Please enter a valid supported bank SWIFT/BIC code.`));
+    };
+};

package/dist/features/notifications/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./tembo-notify.js";
+export * from "./toast-config.js";
+export * from "./toast-container.js";

package/dist/features/notifications/index.js

@@ -0,0 +1,3 @@
+export * from "./tembo-notify.js";
+export * from "./toast-config.js";
+export * from "./toast-container.js";

package/dist/features/notifications/tembo-notify.d.ts

@@ -0,0 +1,50 @@
+import { ToastOptions, ToastContent, Id } from 'react-toastify';
+import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
+/**
+ * Message input - can be simple string or object with title and description
+ */
+export type NotifyMessage = ToastContent | {
+    title?: string;
+    description?: string;
+};
+export interface NotifyOptions extends Omit<ToastOptions, 'type'> {
+    toastId?: Id;
+    duration?: number | false;
+    onClick?: () => void;
+    onClose?: () => void;
+}
+/**
+ * TemboNotify - Unified notification system
+ */
+export declare class TemboNotify {
+    private static configs;
+    static init(colors: TemboColorPalette, constants: TemboUIConstants): void;
+    private static getConfigs;
+    /**
+     * Format message content for display
+     * - title only → bold
+     * - description only → weight 500
+     * - title + description → stacked
+     */
+    private static formatMessage;
+    private static buildOptions;
+    private static getSuccessConfig;
+    private static getErrorConfig;
+    private static getWarningConfig;
+    private static getInfoConfig;
+    private static getLoadingConfig;
+    static success(message: NotifyMessage, options?: NotifyOptions): Id;
+    static error(message: NotifyMessage, options?: NotifyOptions): Id;
+    static warning(message: NotifyMessage, options?: NotifyOptions): Id;
+    static info(message: NotifyMessage, options?: NotifyOptions): Id;
+    static loading(message: NotifyMessage, options?: Omit<NotifyOptions, 'duration'>): Id;
+    static update(id: Id, options: {
+        type?: 'success' | 'error' | 'warning' | 'info';
+        message?: NotifyMessage;
+        autoClose?: number | false;
+        render?: ToastContent;
+    }): void;
+    static dismiss(id?: Id): void;
+    static dismissAll(): void;
+    static isActive(id: Id): boolean;
+}

package/dist/features/notifications/tembo-notify.js

@@ -0,0 +1,140 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast } from 'react-toastify';
+import { buildToastConfigs } from './toast-config.js';
+/**
+ * Simple fallback config when TemboNotify.init hasn't been called yet.
+ */
+const FALLBACK_BASE_CONFIG = {
+    position: 'top-right',
+    autoClose: 4000, // ~4 seconds for everything except loading
+    hideProgressBar: true,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    closeButton: false,
+};
+/**
+ * TemboNotify - Unified notification system
+ */
+export class TemboNotify {
+    static init(colors, constants) {
+        this.configs = buildToastConfigs(colors, constants);
+    }
+    static getConfigs() {
+        return this.configs;
+    }
+    /**
+     * Format message content for display
+     * - title only → bold
+     * - description only → weight 500
+     * - title + description → stacked
+     */
+    static formatMessage(message) {
+        if (message && typeof message === 'object' && !('$$typeof' in message)) {
+            const hasTitle = !!message.title;
+            const hasDescription = !!message.description;
+            if (hasTitle && hasDescription) {
+                return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: 14 }, children: message.title }), _jsx("div", { style: { fontSize: 13, fontWeight: 400, opacity: 0.95 }, children: message.description })] }));
+            }
+            if (hasTitle && !hasDescription) {
+                return (_jsx("div", { style: { fontWeight: 600, fontSize: 14 }, children: message.title }));
+            }
+            if (!hasTitle && hasDescription) {
+                return (_jsx("div", { style: { fontSize: 13, fontWeight: 500 }, children: message.description }));
+            }
+            // Empty object case
+            return '';
+        }
+        return message;
+    }
+    static buildOptions(baseConfig, options) {
+        const _a = options || {}, { duration, toastId, onClick, onClose } = _a, restOptions = __rest(_a, ["duration", "toastId", "onClick", "onClose"]);
+        const effectiveBase = baseConfig !== null && baseConfig !== void 0 ? baseConfig : FALLBACK_BASE_CONFIG;
+        return Object.assign(Object.assign(Object.assign({}, effectiveBase), restOptions), { // includes custom icon if provided
+            toastId, autoClose: duration !== undefined
+                ? duration || false
+                : effectiveBase.autoClose, onClick,
+            onClose });
+    }
+    static getSuccessConfig() {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.successConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
+    }
+    static getErrorConfig() {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.errorConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
+    }
+    static getWarningConfig() {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.warningConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
+    }
+    static getInfoConfig() {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.infoConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
+    }
+    static getLoadingConfig() {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return (_b = (_a = configs === null || configs === void 0 ? void 0 : configs.loadingConfig) !== null && _a !== void 0 ? _a : configs === null || configs === void 0 ? void 0 : configs.baseConfig) !== null && _b !== void 0 ? _b : undefined;
+    }
+    static success(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getSuccessConfig(), options);
+        return toast.success(content, toastOptions);
+    }
+    static error(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getErrorConfig(), options);
+        return toast.error(content, toastOptions);
+    }
+    static warning(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getWarningConfig(), options);
+        return toast.warning(content, toastOptions);
+    }
+    static info(message, options) {
+        const content = this.formatMessage(message);
+        const toastOptions = this.buildOptions(this.getInfoConfig(), options);
+        return toast.info(content, toastOptions);
+    }
+    static loading(message, options) {
+        var _a;
+        const content = this.formatMessage(message);
+        const _b = options || {}, { toastId, onClick, onClose } = _b, restOptions = __rest(_b, ["toastId", "onClick", "onClose"]);
+        const baseConfig = (_a = this.getLoadingConfig()) !== null && _a !== void 0 ? _a : FALLBACK_BASE_CONFIG;
+        return toast.loading(content, Object.assign(Object.assign(Object.assign({}, baseConfig), restOptions), { toastId,
+            onClick,
+            onClose }));
+    }
+    static update(id, options) {
+        var _a, _b;
+        const configs = this.getConfigs();
+        const typeConfig = options.type && configs
+            ? {
+                success: configs.successConfig,
+                error: configs.errorConfig,
+                warning: configs.warningConfig,
+                info: configs.infoConfig,
+            }[options.type]
+            : undefined;
+        const content = options.message
+            ? this.formatMessage(options.message)
+            : options.render;
+        toast.update(id, Object.assign({ render: content, type: options.type, isLoading: false, autoClose: (_b = (_a = options.autoClose) !== null && _a !== void 0 ? _a : typeConfig === null || typeConfig === void 0 ? void 0 : typeConfig.autoClose) !== null && _b !== void 0 ? _b : FALLBACK_BASE_CONFIG.autoClose }, (typeConfig !== null && typeConfig !== void 0 ? typeConfig : {})));
+    }
+    static dismiss(id) {
+        toast.dismiss(id);
+    }
+    static dismissAll() {
+        toast.dismiss();
+    }
+    static isActive(id) {
+        return toast.isActive(id);
+    }
+}
+TemboNotify.configs = null;

package/dist/features/notifications/toast-config.d.ts

@@ -0,0 +1,12 @@
+import { ToastOptions } from 'react-toastify';
+import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
+export declare const buildToastConfigs: (colors: TemboColorPalette, constants: TemboUIConstants) => {
+    loadingConfig: ToastOptions<unknown>;
+    infoConfig: ToastOptions<unknown>;
+    warningConfig: ToastOptions<unknown>;
+    errorConfig: ToastOptions<unknown>;
+    successConfig: ToastOptions<unknown>;
+    baseConfig: ToastOptions<unknown>;
+    colors: TemboColorPalette;
+};
+export type ToastConfigs = ReturnType<typeof buildToastConfigs>;

package/dist/features/notifications/toast-config.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, LoadingOutlined, } from '@ant-design/icons';
+export const buildToastConfigs = (colors, constants) => {
+    /**
+     * Base = WHITE background for everything unless overridden
+     */
+    const baseConfig = {
+        position: 'top-right',
+        autoClose: 4000,
+        hideProgressBar: true,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        closeButton: false,
+        style: {
+            fontFamily: constants.typography.fontFamily,
+            fontSize: 14,
+            borderRadius: 10,
+            padding: '10px 14px',
+            boxShadow: '0 12px 24px rgba(15, 23, 42, 0.12)',
+            border: 'none',
+            minHeight: 56,
+            backgroundColor: colors.surface.elevated,
+            color: colors.text.primary,
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+        },
+    };
+    /**
+     * SUCCESS → success colors
+     */
+    const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(CheckCircleOutlined, { style: { fontSize: 18, color: colors.success.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.success.bg, color: colors.success.text }), className: 'toast-success' });
+    /**
+     * ERROR → error colors
+     */
+    const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(CloseCircleOutlined, { style: { fontSize: 18, color: colors.error.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.error.bg, color: colors.error.text }), className: 'toast-error' });
+    /**
+     * WARNING → warning colors
+     */
+    const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(ExclamationCircleOutlined, { style: { fontSize: 18, color: colors.warning.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.warning.bg, color: colors.warning.text }), className: 'toast-warning' });
+    /**
+     * INFO → *white background*, blue accents only
+     * (no colored background)
+     */
+    const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(InfoCircleOutlined, { style: { fontSize: 18, color: colors.info.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.elevated, color: colors.text.primary }), className: 'toast-info' });
+    /**
+     * LOADING (unchanged)
+     */
+    const loadingConfig = Object.assign(Object.assign({}, baseConfig), { icon: (_jsx(LoadingOutlined, { style: { fontSize: 18, color: colors.primary.main } })), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.elevated, color: colors.text.primary }), autoClose: false, closeButton: false, hideProgressBar: true, className: 'toast-loading' });
+    return {
+        loadingConfig,
+        infoConfig,
+        warningConfig,
+        errorConfig,
+        successConfig,
+        baseConfig,
+        colors,
+    };
+};

package/dist/features/notifications/toast-container.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ToastContainerProps as RTToastContainerProps } from 'react-toastify';
+export interface TemboToastContainerProps extends Omit<RTToastContainerProps, 'closeButton' | 'hideProgressBar'> {
+    /**
+     * Show the X close button on each toast
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Show the progress bar at the bottom of each toast
+     * @default false
+     */
+    showProgressBar?: boolean;
+}
+/**
+ * Toast container with Tembo styling
+ */
+declare const TemboToastContainer: React.FC<TemboToastContainerProps>;
+export default TemboToastContainer;

package/dist/features/notifications/toast-container.js

@@ -0,0 +1,89 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { ToastContainer, } from 'react-toastify';
+import { useTemboTheme } from '../../theme/index.js';
+import { TemboNotify } from './tembo-notify.js';
+/**
+ * Toast container with Tembo styling
+ */
+const TemboToastContainer = (_a) => {
+    var { showCloseButton = false, showProgressBar = false } = _a, rest = __rest(_a, ["showCloseButton", "showProgressBar"]);
+    const { colors, constants } = useTemboTheme();
+    useEffect(() => {
+        TemboNotify.init(colors, constants);
+    }, [colors, constants]);
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, Object.assign({ closeButton: showCloseButton, hideProgressBar: !showProgressBar }, rest)), _jsx("style", { children: `
+                .Toastify__toast {
+                    font-family: ${constants.typography.fontFamily};
+                    line-height: 1.5;
+                    display: flex;
+                    align-items: center; /* center icon + content */
+                }
+
+                .Toastify__toast-body {
+                    padding: 0;
+                    margin: 0;
+                    display: flex;
+                    align-items: flex-start;
+                }
+
+                .Toastify__toast-icon {
+                    width: 18px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    margin-inline-end: 6px; /* tighter spacing */
+                }
+
+                .Toastify__progress-bar {
+                    display: none;
+                }
+
+                .Toastify__close-button {
+                    opacity: 0.5;
+                    transition: opacity 0.2s ease;
+                }
+
+                .Toastify__close-button:hover {
+                    opacity: 1;
+                }
+
+                /* Force progress bar hidden in case someone enables it unintentionally */
+                .Toastify__progress-bar {
+                    display: none;
+                }
+
+                /* Smooth entrance animation */
+                @keyframes toastSlideIn {
+                    from {
+                        transform: translateX(110%);
+                        opacity: 0;
+                    }
+                    to {
+                        transform: translateX(0);
+                        opacity: 1;
+                    }
+                }
+
+                .Toastify__toast--top-right {
+                    animation: toastSlideIn 0.3s ease-out;
+                }
+
+                /* Optional: full-width mobile behaviour */
+                @media (max-width: 480px) {
+                    .Toastify__toast-container--top-right {
+                        right: 0;
+                        left: 0;
+                        padding: 0;
+                        width: 100vw;
+                    }
+
+                    .Toastify__toast {
+                        margin-bottom: 0;
+                        border-radius: 0;
+                    }
+                }
+            ` })] }));
+};
+export default TemboToastContainer;