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

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,124 @@
+import { ToastOptions, ToastContent, Id } from 'react-toastify';
+import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
+export interface NotifyOptions {
+    /**
+     * Duration in milliseconds before auto-closing (default: 4000 for most, 6000 for errors)
+     * Set to false to prevent auto-close
+     */
+    duration?: number | false;
+    /**
+     * Custom position for the notification
+     */
+    position?: ToastOptions['position'];
+    /**
+     * Callback when notification is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Callback when notification is closed
+     */
+    onClose?: () => void;
+}
+/**
+ * TemboNotify - Unified notification system
+ *
+ * Wraps react-toastify with consistent styling and behavior
+ * aligned with Tembo's design system.
+ *
+ * Note: This class needs to be initialized with theme tokens before use.
+ * Call TemboNotify.init(colors, constants) in your app setup.
+ *
+ * @example
+ * ```typescript
+ * // In your app setup (e.g., App.tsx)
+ * const { colors, constants } = useTemboTheme();
+ * useEffect(() => {
+ *   TemboNotify.init(colors, constants);
+ * }, [colors, constants]);
+ *
+ * // Then use anywhere in your app
+ * TemboNotify.success('Payment sent successfully!');
+ *
+ * // With options
+ * TemboNotify.error('Payment failed', {
+ *   duration: 8000,
+ *   onClick: () => console.log('Error clicked')
+ * });
+ *
+ * // Loading with promise
+ * const loadingId = TemboNotify.loading('Processing payment...');
+ * await processPayment();
+ * TemboNotify.success('Payment complete!', { id: loadingId });
+ *
+ * // Promise-based
+ * TemboNotify.promise(
+ *   apiCall(),
+ *   {
+ *     pending: 'Processing...',
+ *     success: 'Done!',
+ *     error: 'Failed!'
+ *   }
+ * );
+ * ```
+ */
+export declare class TemboNotify {
+    private static configs;
+    /**
+     * Initialize TemboNotify with theme tokens
+     * Must be called before using any notification methods
+     */
+    static init(colors: TemboColorPalette, constants: TemboUIConstants): void;
+    /**
+     * Get current toast configs, throws if not initialized
+     */
+    private static getConfigs;
+    /**
+     * Display a success notification
+     */
+    static success(message: ToastContent, options?: NotifyOptions): Id;
+    /**
+     * Display an error notification
+     */
+    static error(message: ToastContent, options?: NotifyOptions): Id;
+    /**
+     * Display a warning notification
+     */
+    static warning(message: ToastContent, options?: NotifyOptions): Id;
+    /**
+     * Display an info notification
+     */
+    static info(message: ToastContent, options?: NotifyOptions): Id;
+    /**
+     * Display a loading notification
+     * Returns an ID that can be used to update/dismiss it
+     */
+    static loading(message: ToastContent, options?: Omit<NotifyOptions, 'duration'>): Id;
+    /**
+     * Update an existing notification
+     */
+    static update(id: Id, options: {
+        type?: 'success' | 'error' | 'warning' | 'info';
+        message?: ToastContent;
+        autoClose?: number | false;
+    }): void;
+    /**
+     * Dismiss a specific notification by ID
+     */
+    static dismiss(id: Id): void;
+    /**
+     * Dismiss all notifications
+     */
+    static dismissAll(): void;
+    /**
+     * Check if a notification is active
+     */
+    static isActive(id: Id): boolean;
+    /**
+     * Handle promise-based operations with notifications
+     */
+    static promise<T>(promise: Promise<T>, messages: {
+        pending: ToastContent;
+        success: ToastContent<T>;
+        error: ToastContent | ((error: any) => ToastContent);
+    }, options?: NotifyOptions): Promise<T>;
+}

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

@@ -0,0 +1,149 @@
+import { toast } from 'react-toastify';
+import { buildToastConfigs } from './toast-config.js';
+/**
+ * TemboNotify - Unified notification system
+ *
+ * Wraps react-toastify with consistent styling and behavior
+ * aligned with Tembo's design system.
+ *
+ * Note: This class needs to be initialized with theme tokens before use.
+ * Call TemboNotify.init(colors, constants) in your app setup.
+ *
+ * @example
+ * ```typescript
+ * // In your app setup (e.g., App.tsx)
+ * const { colors, constants } = useTemboTheme();
+ * useEffect(() => {
+ *   TemboNotify.init(colors, constants);
+ * }, [colors, constants]);
+ *
+ * // Then use anywhere in your app
+ * TemboNotify.success('Payment sent successfully!');
+ *
+ * // With options
+ * TemboNotify.error('Payment failed', {
+ *   duration: 8000,
+ *   onClick: () => console.log('Error clicked')
+ * });
+ *
+ * // Loading with promise
+ * const loadingId = TemboNotify.loading('Processing payment...');
+ * await processPayment();
+ * TemboNotify.success('Payment complete!', { id: loadingId });
+ *
+ * // Promise-based
+ * TemboNotify.promise(
+ *   apiCall(),
+ *   {
+ *     pending: 'Processing...',
+ *     success: 'Done!',
+ *     error: 'Failed!'
+ *   }
+ * );
+ * ```
+ */
+export class TemboNotify {
+    /**
+     * Initialize TemboNotify with theme tokens
+     * Must be called before using any notification methods
+     */
+    static init(colors, constants) {
+        this.configs = buildToastConfigs(colors, constants);
+    }
+    /**
+     * Get current toast configs, throws if not initialized
+     */
+    static getConfigs() {
+        if (!this.configs) {
+            throw new Error('TemboNotify not initialized. Call TemboNotify.init(colors, constants) before using notifications.');
+        }
+        return this.configs;
+    }
+    /**
+     * Display a success notification
+     */
+    static success(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.success(message, Object.assign(Object.assign({}, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display an error notification
+     */
+    static error(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.error(message, Object.assign(Object.assign({}, configs.errorConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.errorConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display a warning notification
+     */
+    static warning(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.warning(message, Object.assign(Object.assign({}, configs.warningConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.warningConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display an info notification
+     */
+    static info(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.info(message, Object.assign(Object.assign({}, configs.infoConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.infoConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display a loading notification
+     * Returns an ID that can be used to update/dismiss it
+     */
+    static loading(message, options) {
+        const configs = this.getConfigs();
+        return toast.loading(message, Object.assign(Object.assign({}, configs.loadingConfig), { position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Update an existing notification
+     */
+    static update(id, options) {
+        var _a;
+        const configs = this.getConfigs();
+        const config = options.type ? {
+            success: configs.successConfig,
+            error: configs.errorConfig,
+            warning: configs.warningConfig,
+            info: configs.infoConfig,
+        }[options.type] : undefined;
+        toast.update(id, Object.assign({ render: options.message, type: options.type, isLoading: false, autoClose: (_a = options.autoClose) !== null && _a !== void 0 ? _a : config === null || config === void 0 ? void 0 : config.autoClose }, config));
+    }
+    /**
+     * Dismiss a specific notification by ID
+     */
+    static dismiss(id) {
+        toast.dismiss(id);
+    }
+    /**
+     * Dismiss all notifications
+     */
+    static dismissAll() {
+        toast.dismiss();
+    }
+    /**
+     * Check if a notification is active
+     */
+    static isActive(id) {
+        return toast.isActive(id);
+    }
+    /**
+     * Handle promise-based operations with notifications
+     */
+    static promise(promise, messages, options) {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return toast.promise(promise, {
+            pending: Object.assign({ render: messages.pending }, configs.loadingConfig),
+            success: Object.assign(Object.assign({ render: messages.success }, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose }),
+            error: Object.assign(Object.assign({ render: messages.error }, configs.errorConfig), { autoClose: (_b = options === null || options === void 0 ? void 0 : options.duration) !== null && _b !== void 0 ? _b : configs.errorConfig.autoClose }),
+        }, {
+            position: options === null || options === void 0 ? void 0 : options.position,
+        });
+    }
+}
+TemboNotify.configs = null;

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

@@ -0,0 +1,15 @@
+import { ToastOptions } from 'react-toastify';
+import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
+/**
+ * Build toast configurations from theme tokens
+ * This function is called with theme values to generate toast configs
+ */
+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>;
+};
+export type ToastConfigs = ReturnType<typeof buildToastConfigs>;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, } from '@ant-design/icons';
+/**
+ * Build toast configurations from theme tokens
+ * This function is called with theme values to generate toast configs
+ */
+export const buildToastConfigs = (colors, constants) => {
+    /**
+     * Common toast configuration aligned with Tembo theme
+     */
+    const baseConfig = {
+        position: 'top-right',
+        autoClose: 4000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        style: {
+            fontFamily: constants.typography.fontFamily,
+            fontSize: constants.typography.fontSize.base,
+            borderRadius: constants.radius.base,
+        },
+    };
+    /**
+     * Success notification configuration
+     */
+    const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CheckCircleOutlined, { style: { fontSize: 20, color: colors.success.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.success.border}` }) });
+    /**
+     * Error notification configuration
+     */
+    const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CloseCircleOutlined, { style: { fontSize: 20, color: colors.error.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.error.border}` }), autoClose: 6000 });
+    /**
+     * Warning notification configuration
+     */
+    const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(ExclamationCircleOutlined, { style: { fontSize: 20, color: colors.warning.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.warning.border}` }) });
+    /**
+     * Info notification configuration
+     */
+    const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(InfoCircleOutlined, { style: { fontSize: 20, color: colors.info.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.info.border}` }) });
+    /**
+     * Loading notification configuration
+     */
+    const loadingConfig = Object.assign(Object.assign({}, baseConfig), { autoClose: false, closeButton: false });
+    return {
+        loadingConfig,
+        infoConfig,
+        warningConfig,
+        errorConfig,
+        successConfig,
+        baseConfig,
+    };
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ToastContainerProps as RTToastContainerProps } from 'react-toastify';
+export type TemboToastContainerProps = RTToastContainerProps;
+/**
+ * Toast container that automatically initializes TemboNotify with current theme
+ * Reinitializes when theme changes to respect color/constant overrides
+ */
+declare const TemboToastContainer: React.FC<TemboToastContainerProps>;
+export default TemboToastContainer;

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

@@ -0,0 +1,18 @@
+import { jsx as _jsx } 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 that automatically initializes TemboNotify with current theme
+ * Reinitializes when theme changes to respect color/constant overrides
+ */
+const TemboToastContainer = (props) => {
+    const { colors, constants } = useTemboTheme();
+    // Initialize/update TemboNotify whenever theme changes
+    useEffect(() => {
+        TemboNotify.init(colors, constants);
+    }, [colors, constants]);
+    return _jsx(ToastContainer, Object.assign({}, props));
+};
+export default TemboToastContainer;