@je-es/client 0.2.3 → 0.2.5

package/dist/main.d.ts

@@ -2,7 +2,7 @@ import { ApiInterceptors } from '@je-es/capi';
 export { ApiError, ApiInterceptors, ApiOptions, ApiResponse, ApiConfig as CapiConfig, HttpMethod, ParamValue, RequestData, api, configureApi, getApiConfig, http, resetApiConfig } from '@je-es/capi';
 import * as _je_es_vdom from '@je-es/vdom';
 import { VNode } from '@je-es/vdom';
-export { VNode, VNodeChild, VNodeProps, createDOMElement, createElement, html, patch } from '@je-es/vdom';
+export { VNode, VNodeChild, VNodeChildren, VNodeProps, a, button, createDOMElement, createElement, div, form, h1, h2, h3, h4, h5, h6, html, i, img, input, isVNode, label, option, p, patch, select, span, textarea, validateVNode } from '@je-es/vdom';
 
 declare abstract class Component<P = Record<string, unknown>, S = Record<string, unknown>> {
     props: P;
@@ -125,6 +125,9 @@ interface I18nConfig {
     supportedLanguages?: LanguageCode[];
     staticPath?: string;
 }
+interface FAConfig {
+    theme?: 'solid' | 'regular' | 'light' | 'thin' | 'duotone' | 'brands' | 'sharp-solid' | 'sharp-regular' | 'sharp-light' | 'sharp-thin' | 'sharp-duotone-solid' | 'sharp-duotone-regular' | 'sharp-duotone-light' | 'sharp-duotone-thin' | 'notdog' | 'notdog-duo' | 'jelly' | 'jelly-fill' | 'jelly-duo' | 'chisel' | 'etch' | 'slab' | 'slab-press' | 'thumbprint' | 'utility' | 'utility-fill' | 'utility-duo' | 'whiteboard';
+}
 interface ClientConfig {
     build?: BuildConfig;
     app?: AppConfig;
@@ -133,6 +136,7 @@ interface ClientConfig {
     router?: RouterConfig;
     api?: ApiConfig;
     devTools?: DevToolsConfig;
+    fa?: FAConfig;
 }
 interface Route {
     path: string;
@@ -179,10 +183,21 @@ interface FormFieldOption {
     label: string;
     value: string | number;
 }
-interface FormFieldConfig {
-    name: string;
+interface FieldButtonConfig {
+    type: 'rules' | 'togglePassword' | 'custom';
+    icon?: string;
     label?: string;
+    title?: string;
+    onClick?: () => void | Promise<void>;
+}
+interface LabelConfig {
+    text?: string;
     icon?: string;
+    title?: string;
+}
+interface FormFieldConfig {
+    name: string;
+    label?: string | LabelConfig;
     type?: string;
     placeholder?: string;
     value?: unknown;
@@ -190,6 +205,8 @@ interface FormFieldConfig {
     validation?: ValidationRule;
     disabled?: boolean;
     className?: string;
+    fieldButtons?: (FieldButtonConfig | 'rules' | 'togglePassword')[];
+    showValidationRules?: boolean;
 }
 type FormSubmitHandler = (data: Record<string, unknown>, event: Event) => void | Promise<void>;
 type ClassValue = string | Record<string, boolean> | undefined | null | false;
@@ -733,284 +750,247 @@ declare class StyleManager {
  */
 declare function css(strings: TemplateStringsArray, ...values: (string | number | boolean | null | undefined)[]): string;
 
-declare class I18nManager {
-    private translations;
-    private currentLanguage;
-    private defaultLanguage;
-    private supportedLanguages;
-    private cachePath;
-    private readyListeners;
-    constructor(config?: I18nConfig);
-    /**
-     * Load translations for a specific language
-     * @param lang Language code (e.g., 'en', 'ar', 'fr')
-     * @param translations Translation object
-     */
-    loadLanguage(lang: LanguageCode, translations: Record<string, string>): void;
+interface ButtonConfig {
+    label?: string;
+    className?: string;
+    icon?: string;
+    title?: string;
+    loadingLabel?: string;
+    onClick?: 'submit' | (() => void | Promise<void>);
+}
+interface FormConfig {
+    fields: (FormFieldConfig | (FormFieldConfig | VNode)[])[];
+    endpoint?: string;
+    method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+    onSubmit?: (data: Record<string, unknown>, event: Event) => void | Promise<void>;
+    onSuccess?: (data: unknown) => void;
+    onError?: (error: unknown) => void;
+    onValidationError?: (errors: Record<string, string>) => void;
+    buttons?: Record<string, ButtonConfig>;
+    className?: string;
+    autoValidate?: boolean;
+}
+interface FormField extends FormFieldConfig {
+    error?: string;
+    touched?: boolean;
+}
+/**
+ * SmartForm Component
+ * Auto-validation, CSRF protection, API submission
+ */
+declare class SmartFormComponent extends Component<FormConfig> {
+    fields: FormField[];
+    formData: Record<string, unknown>;
+    isSubmitting: boolean;
+    submitError: string;
+    submitSuccess: boolean;
+    passwordVisibility: Record<string, boolean>;
+    constructor(props: FormConfig);
+    onMount(): void;
     /**
-     * Load all translations from static files
-     * @param translations Object with language codes as keys and translation objects as values
+     * Handle field change
      */
-    loadTranslations(translations: TranslationSet): void;
+    handleChange(fieldName: string, value: unknown): void;
     /**
-     * Set the current language
-     * @param lang Language code
+     * Handle field blur
      */
-    setLanguage(lang: LanguageCode): void;
+    handleBlur(fieldName: string): void;
     /**
-     * Get the current language
+     * Validate single field
      */
-    getLanguage(): LanguageCode;
+    validateField(field: FormField, value: unknown): string | undefined;
     /**
-     * Get all supported languages
+     * Validate all fields
      */
-    getSupportedLanguages(): LanguageCode[];
+    validateForm(): boolean;
     /**
-     * Translate a key with smart parameter replacement
-     * Supports nested translation keys as parameter values
-     *
-     * @example
-     * // Simple translation
-     * t('hello') // => "Hello" or "مرحبا" depending on current language
-     *
-     * @example
-     * // With parameters
-     * t('welcome', { app_name: 'MyApp' })
-     * // => "Welcome to MyApp"
-     *
-     * @example
-     * // With nested translation keys as parameters
-     * t('greeting', { salutation: 'hello' })
-     * // => "Say Hello to everyone"
-     *
-     * @param key Translation key
-     * @param params Optional parameters for replacement
-     * @param defaultValue Optional default translation key
-     * @returns Translated string with replaced parameters
+     * Handle form submission
      */
-    t(key: string, params?: Record<string, string>, defaultValue?: string): string;
-    private getTranslation;
+    handleSubmit(event: Event): Promise<void>;
     /**
-     * Translate with a specific language (overrides current language temporarily)
-     *
-     * @param key Translation key
-     * @param lang Language code
-     * @param params Optional parameters
-     * @returns Translated string
+     * Render label with optional icon
      */
-    tLang(key: string, lang: LanguageCode, params?: Record<string, string>): string;
+    renderLabel(field: FormField): VNode | string;
     /**
-     * Translate a key and convert HTML tags in the translation to VNode elements
-     * Supports tags like <br>, <strong>, <em>, <b>, <i>, etc.
-     * Useful for multiline translations with formatting
-     *
-     * @example
-     * // Translation: "Hello <br> World"
-     * tHtml('greeting') // => [text node, br element, text node]
-     *
-     * @param key Translation key
-     * @param params Optional parameters for replacement
-     * @param defaultValue Optional default translation key
-     * @returns Array of VNode and string elements that can be used as children
+     * Get field buttons configuration
      */
-    tHtml(key: string, params?: Record<string, string>, defaultValue?: string): (VNode | string)[];
+    getFieldButtons(field: FormField): FieldButtonConfig[];
     /**
-     * Parse HTML string into VNode and text elements
-     * Converts \n and /n sequences to <br> tags
-     * @private
+     * Handle field button click
      */
-    private parseHtmlString;
+    handleFieldButton(field: FormField, buttonType: string): void;
     /**
-     * Get all translations for current language
+     * Render validation rules popup
      */
-    getTranslations(): Record<string, string>;
+    renderValidationRules(field: FormField): VNode | string;
     /**
-     * Check if a translation key exists
-     * @param key Translation key
-     * @returns true if key exists in current or default language
+     * Render field input buttons
      */
-    hasKey(key: string): boolean;
+    renderFieldButtons(field: FormField): VNode | string;
     /**
-     * Create a reactive translation function that listens to language changes
-     * @param updateCallback Callback function to execute when language changes
-     * @returns Function to unsubscribe from language changes
+     * Render form field
      */
-    createTranslator(updateCallback: () => void): () => void;
+    renderField(field: FormField): VNode;
     /**
-     * Load translations from URL(s)
-     * Supports patterns like '/static/i18n/*.json' or specific URLs
-     *
-     * @example
-     * // Load from a pattern
-     * await loadFromUrl('/static/i18n/*.json');
-     *
-     * @example
-     * // Load specific language files
-     * await loadFromUrl(['/static/i18n/en.json', '/static/i18n/ar.json']);
-     *
-     * @param urlPattern String pattern or array of URLs
-     * @returns Promise that resolves when all translations are loaded
+     * Render buttons section
      */
-    loadFromUrl(urlPattern: string | string[]): Promise<void>;
+    renderButtons(): VNode;
+    render(): VNode;
+    styles(): string;
+}
+/**
+ * SmartForm helper function
+ */
+declare function SmartForm(config: FormConfig): VNode;
+
+type PopupType = 'confirm' | 'alert' | 'form' | 'custom' | 'prompt';
+type PopupVariant = 'default' | 'danger' | 'warning' | 'success' | 'info';
+type PopupSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
+interface PopupButton {
+    label: string;
+    translateKey?: string;
+    variant?: 'primary' | 'secondary' | 'danger' | 'success';
+    icon?: string;
+    onClick: () => void | Promise<void>;
+    loading?: boolean;
+}
+interface PopupFormOptions {
+    title: string;
+    titleTranslateKey?: string;
+    description?: string;
+    descriptionTranslateKey?: string;
+    formConfig: FormConfig;
+    variant?: PopupVariant;
+    icon?: string;
+    size?: PopupSize;
+    closeOnOverlay?: boolean;
+    closeOnEscape?: boolean;
+    showCloseButton?: boolean;
+}
+interface PopupOptions {
+    title: string;
+    titleTranslateKey?: string;
+    message?: string;
+    messageTranslateKey?: string;
+    description?: string;
+    descriptionTranslateKey?: string;
+    type?: PopupType;
+    variant?: PopupVariant;
+    size?: PopupSize;
+    buttons?: PopupButton[];
+    customContent?: VNode;
+    formConfig?: FormConfig;
+    closeOnOverlay?: boolean;
+    closeOnEscape?: boolean;
+    showCloseButton?: boolean;
+    icon?: string;
+    onConfirm?: () => void | Promise<void>;
+    onCancel?: () => void | Promise<void>;
+}
+interface ActivePopup extends PopupOptions {
+    id: number;
+    resolve?: (value: boolean | string | null | Record<string, unknown>) => void;
+    inputValue?: string;
+    isSubmitting?: boolean;
+}
+declare class Popup extends Component {
+    popups: ActivePopup[];
+    private nextId;
+    private handleEscapeKey?;
+    onMount(): Promise<void>;
+    onUnmount(): void;
+    render(): VNode;
+    renderPopup(popup: ActivePopup): VNode;
     /**
-     * Register a callback for when i18n is ready
+     * Show a custom popup
      */
-    onReady(callback: () => void): void;
+    show(options: PopupOptions): Promise<boolean | string | null | Record<string, unknown>>;
     /**
-     * Notify all listeners that i18n is ready
+     * Show a form popup
      */
-    private notifyReady;
+    showForm(options: PopupFormOptions): Promise<boolean | string | null | Record<string, unknown>>;
     /**
-     * Get language from localStorage
+     * Show a confirmation dialog
      */
-    private getStoredLanguage;
+    confirm(options: {
+        title: string;
+        titleTranslateKey?: string;
+        message: string;
+        messageTranslateKey?: string;
+        confirmLabel?: string;
+        confirmTranslateKey?: string;
+        cancelLabel?: string;
+        cancelTranslateKey?: string;
+        variant?: PopupVariant;
+        icon?: string;
+        size?: PopupSize;
+        onConfirm?: () => void | Promise<void>;
+        onCancel?: () => void | Promise<void>;
+    }): Promise<boolean>;
     /**
-     * Store language in localStorage
+     * Show an alert dialog
      */
-    private storeLanguage;
+    alert(options: {
+        title: string;
+        titleTranslateKey?: string;
+        message: string;
+        messageTranslateKey?: string;
+        okLabel?: string;
+        okTranslateKey?: string;
+        variant?: PopupVariant;
+        icon?: string;
+        size?: PopupSize;
+        onConfirm?: () => void | Promise<void>;
+    }): Promise<boolean>;
     /**
-     * Dispatch language change event
+     * Show a prompt dialog
      */
-    private dispatchLanguageChangeEvent;
-}
-/**
- * Get the global i18n instance
- */
-declare function getI18n(): I18nManager;
-
-/**
- * Global translation function
- * @param key Translation key
- * @param params Optional parameters
- * @param defaultValue Optional default translation key
- * @returns Translated string
- */
-declare function t(key: string, params?: Record<string, string>, defaultValue?: string): string;
-/**
- * Translate with a specific language (overrides current language temporarily)
- * @param key Translation key
- * @param lang Language code
- * @param params Optional parameters
- * @returns Translated string
- */
-declare function tLang(key: string, lang: string, params?: Record<string, string>): string;
-/**
- * Translate a key and convert HTML tags to VNode elements
- * Useful for multiline translations with formatting like <br>
- * @param key Translation key
- * @param params Optional parameters
- * @param defaultValue Optional default translation key
- * @returns Array of VNode and string elements that can be used as children
- */
-declare function tHtml(key: string, params?: Record<string, string>, defaultValue?: string): (VNode | string)[];
-/**
- * Set the current language globally (synchronous)
- * @param lang Language code
- */
-declare function setLanguage(lang: string): void;
-/**
- * Set the current language globally with lazy-loading support (asynchronous)
- * Use this when you want to lazy-load language files on demand
- * @param lang Language code
- * @param staticPath Path to language files for lazy-loading
- * @returns Promise that resolves when language is loaded and set
- */
-declare function setLanguageAsync(lang: string, staticPath?: string): Promise<void>;
-/**
- * Get the current language
- */
-declare function getCurrentLanguage(): string;
-/**
- * Load translations for a specific language
- * @param lang Language code
- * @param translations Translation object
- */
-declare function loadLanguage(lang: string, translations: Record<string, string>): void;
-/**
- * Load all translations
- * @param translations The translations object
- */
-declare function loadTranslations(translations: Record<string, Record<string, string>>): void;
-/**
- * Get all supported languages
- */
-declare function getSupportedLanguages(): string[];
-/**
- * Check if a translation key exists
- * @param key The translation key to check
- * @returns Whether the key exists
- */
-declare function hasKey(key: string): boolean;
-/**
- * Get all translations for current language
- */
-declare function getTranslations(): Record<string, string>;
-/**
- * Create a reactive translator that listens to language changes
- * @param updateCallback Callback function to execute when language changes
- * @returns Function to unsubscribe from language changes
- */
-declare function createTranslator(updateCallback: () => void): () => void;
-/**
- * Load translations from URL(s)
- * Supports patterns like '/static/i18n/*.json' or specific URLs
- *
- * @example
- * // Load from a pattern
- * await loadFromUrl('/static/i18n/*.json');
- *
- * @example
- * // Load specific language files
- * await loadFromUrl(['/static/i18n/en.json', '/static/i18n/ar.json']);
- *
- * @param urlPattern String pattern or array of URLs
- * @returns Promise that resolves when all translations are loaded
- */
-declare function loadFromUrl(urlPattern: string | string[]): Promise<void>;
-/**
- * Initialize i18n synchronously (useful for testing)
- * Creates a new I18nManager instance with the provided config
- *
- * @param config I18n configuration
- *
- * @example
- * initializeI18n({
- *     defaultLanguage: 'en',
- *     supportedLanguages: ['en', 'ar']
- * });
- */
-declare function initializeI18n(config?: I18nConfig): void;
-/**
- * Setup i18n: Initialize and load the currently selected language
- * Uses stored language from localStorage if available, otherwise uses default
- * Other languages are lazy-loaded when setLanguage is called
- *
- * @param config I18n configuration
- * @returns Promise that resolves when the selected language is loaded
- *
- * @example
- * await setupI18n({
- *     defaultLanguage: 'en',
- *     supportedLanguages: ['en', 'ar'],
- *     staticPath: 'static/i18n'
- * });
- * console.log(t('hello')); // Ready to use in current language!
- */
-declare function setupI18n(config: I18nConfig): Promise<void>;
-/**
- * Load a specific language file on-demand
- * Use this when user switches to a language that hasn't been loaded yet
- *
- * @param lang Language code (e.g., 'ar', 'fr')
- * @param staticPath Optional path to language files (defaults to 'static/i18n')
- * @returns Promise that resolves when language is loaded
- *
- * @example
- * // User switches to Arabic - load it first if not already loaded
- * await loadLanguageFile('ar');
- * setLanguage('ar');
- */
-declare function loadLanguageFile(lang: string, staticPath?: string): Promise<void>;
+    prompt(options: {
+        title: string;
+        titleTranslateKey?: string;
+        message: string;
+        messageTranslateKey?: string;
+        defaultValue?: string;
+        confirmLabel?: string;
+        confirmTranslateKey?: string;
+        cancelLabel?: string;
+        cancelTranslateKey?: string;
+        icon?: string;
+        onConfirm?: (value: string) => void | Promise<void>;
+        onCancel?: () => void | Promise<void>;
+    }): Promise<string | null>;
+    /**
+     * Close a specific popup
+     */
+    closePopup(id: number, result: boolean | string | null | Record<string, unknown>): void;
+    /**
+     * Close all popups
+     */
+    closeAll(): void;
+    private applyBodyLock;
+    private removeBodyLock;
+    private setupKeyboardListener;
+}
+declare function initPopup(container?: HTMLElement): Popup;
+declare function getPopup$1(): Popup;
+declare const popup: {
+    show: (options: PopupOptions) => Promise<string | boolean | Record<string, unknown> | null>;
+    confirm: (options: Parameters<Popup["confirm"]>[0]) => Promise<boolean>;
+    alert: (options: Parameters<Popup["alert"]>[0]) => Promise<boolean>;
+    prompt: (options: {
+        title: string;
+        titleTranslateKey?: string;
+        message: string;
+        icon?: string;
+        messageTranslateKey?: string;
+        onConfirm?: () => void | Promise<void>;
+    }) => Promise<string | null>;
+    showForm: (options: PopupFormOptions) => Promise<string | boolean | Record<string, unknown> | null>;
+    closePopup: (id: number, result: boolean | string | null | Record<string, unknown>) => void;
+    closeLastPopup: () => void;
+    closeFirstPopup: () => void;
+    closeAll: () => void;
+};
 
 type ToastType = 'success' | 'error' | 'info' | 'warning';
 interface ToastMessage {
@@ -1033,11 +1013,11 @@ declare class Toast extends Component {
     error(message: string, duration?: number, translateKey?: string): void;
     info(message: string, duration?: number, translateKey?: string): void;
     warning(message: string, duration?: number, translateKey?: string): void;
-    render(): _je_es_vdom.VNode;
-    renderToast(msg: ToastMessage): _je_es_vdom.VNode;
+    render(): VNode;
+    renderToast(msg: ToastMessage): VNode;
 }
 declare function initToast(container?: HTMLElement): Toast;
-declare function getToast(): Toast;
+declare function getToast$1(): Toast;
 declare const toast: {
     show: (message: string, type?: ToastType, duration?: number, translateKey?: string) => void;
     success: (message: string, duration?: number, translateKey?: string) => void;
@@ -1066,10 +1046,10 @@ declare class Loader extends Component {
     private hideTimeout;
     onMount(): Promise<void>;
     onUnmount(): void;
-    render(): _je_es_vdom.VNode;
-    renderSpinner(): _je_es_vdom.VNode;
-    renderMessage(): _je_es_vdom.VNode;
-    renderProgressBar(): _je_es_vdom.VNode;
+    render(): VNode;
+    renderSpinner(): VNode;
+    renderMessage(): VNode;
+    renderProgressBar(): VNode;
     show(options?: LoaderOptions | string): void;
     hide(delay?: number): void;
     setMessage(message: string): void;
@@ -1089,222 +1069,446 @@ declare class Loader extends Component {
     };
 }
 
-interface FormConfig {
-    fields: FormFieldConfig[];
-    endpoint?: string;
-    method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-    onSubmit?: (data: Record<string, unknown>, event: Event) => void | Promise<void>;
-    onSuccess?: (data: unknown) => void;
-    onError?: (error: unknown) => void;
-    onValidationError?: (errors: Record<string, string>) => void;
-    submitButton?: {
-        label?: string;
-        loadingLabel?: string;
+declare const ClassMaker: {
+    /**
+     * Generate Font Awesome icon classes
+     * @param icon Icon name (without 'fa-' prefix)
+     * @param style Font Awesome style (default: global default theme or 'solid')
+     */
+    fa: (icon: string, style?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "sharp-solid" | "sharp-regular" | "sharp-light" | "sharp-thin" | "sharp-duotone-solid" | "sharp-duotone-regular" | "sharp-duotone-light" | "sharp-duotone-thin" | "notdog" | "notdog-duo" | "jelly" | "jelly-fill" | "jelly-duo" | "chisel" | "etch" | "slab" | "slab-press" | "thumbprint" | "utility" | "utility-fill" | "utility-duo" | "whiteboard") => string;
+    /**
+     * Generate button classes
+     * @param level Button level (primary, secondary, tertiary)
+     * @param className Additional classes
+     */
+    btn: (level: "primary" | "secondary" | "tertiary", className?: string) => string;
+};
+declare const CM: {
+    /**
+     * Generate Font Awesome icon classes
+     * @param icon Icon name (without 'fa-' prefix)
+     * @param style Font Awesome style (default: global default theme or 'solid')
+     */
+    fa: (icon: string, style?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "sharp-solid" | "sharp-regular" | "sharp-light" | "sharp-thin" | "sharp-duotone-solid" | "sharp-duotone-regular" | "sharp-duotone-light" | "sharp-duotone-thin" | "notdog" | "notdog-duo" | "jelly" | "jelly-fill" | "jelly-duo" | "chisel" | "etch" | "slab" | "slab-press" | "thumbprint" | "utility" | "utility-fill" | "utility-duo" | "whiteboard") => string;
+    /**
+     * Generate button classes
+     * @param level Button level (primary, secondary, tertiary)
+     * @param className Additional classes
+     */
+    btn: (level: "primary" | "secondary" | "tertiary", className?: string) => string;
+};
+declare const ElementCreator: {
+    div: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    span: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h1: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h2: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h3: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h4: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h5: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h6: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    p: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    i: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    img: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    a: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    button: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    input: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    select: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    option: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    textarea: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    form: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    /**
+     * Create icon element with Font Awesome classes
+     * @param icon Icon name (without 'fa-' prefix)
+     * @param style Font Awesome style (default: 'solid')
+     */
+    icon: (icon: string, style?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "sharp-solid" | "sharp-regular" | "sharp-light" | "sharp-thin" | "sharp-duotone-solid" | "sharp-duotone-regular" | "sharp-duotone-light" | "sharp-duotone-thin" | "notdog" | "notdog-duo" | "jelly" | "jelly-fill" | "jelly-duo" | "chisel" | "etch" | "slab" | "slab-press" | "thumbprint" | "utility" | "utility-fill" | "utility-duo" | "whiteboard") => VNode;
+    /**
+     * Create button element
+     */
+    btn: (args: {
+        label: string;
+        onClick?: () => void | Promise<void>;
         className?: string;
-    };
-    className?: string;
-    autoValidate?: boolean;
-}
-interface FormField extends FormFieldConfig {
-    error?: string;
-    touched?: boolean;
+        icon?: string;
+        iconStyle?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "sharp-solid" | "sharp-regular" | "sharp-light" | "sharp-thin" | "sharp-duotone-solid" | "sharp-duotone-regular" | "sharp-duotone-light" | "sharp-duotone-thin" | "notdog" | "notdog-duo" | "jelly" | "jelly-fill" | "jelly-duo" | "chisel" | "etch" | "slab" | "slab-press" | "thumbprint" | "utility" | "utility-fill" | "utility-duo" | "whiteboard";
+        level?: "primary" | "secondary" | "tertiary";
+        disabled?: boolean;
+    }) => VNode;
+};
+declare const EC: {
+    div: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    span: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h1: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h2: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h3: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h4: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h5: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    h6: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    p: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    i: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    img: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    a: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    button: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    input: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    select: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    option: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    textarea: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    form: (props?: _je_es_vdom.VNodeProps | string | null | undefined, ...children: _je_es_vdom.VNodeChildren[]) => VNode;
+    /**
+     * Create icon element with Font Awesome classes
+     * @param icon Icon name (without 'fa-' prefix)
+     * @param style Font Awesome style (default: 'solid')
+     */
+    icon: (icon: string, style?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "sharp-solid" | "sharp-regular" | "sharp-light" | "sharp-thin" | "sharp-duotone-solid" | "sharp-duotone-regular" | "sharp-duotone-light" | "sharp-duotone-thin" | "notdog" | "notdog-duo" | "jelly" | "jelly-fill" | "jelly-duo" | "chisel" | "etch" | "slab" | "slab-press" | "thumbprint" | "utility" | "utility-fill" | "utility-duo" | "whiteboard") => VNode;
+    /**
+     * Create button element
+     */
+    btn: (args: {
+        label: string;
+        onClick?: () => void | Promise<void>;
+        className?: string;
+        icon?: string;
+        iconStyle?: "solid" | "regular" | "light" | "thin" | "duotone" | "brands" | "sharp-solid" | "sharp-regular" | "sharp-light" | "sharp-thin" | "sharp-duotone-solid" | "sharp-duotone-regular" | "sharp-duotone-light" | "sharp-duotone-thin" | "notdog" | "notdog-duo" | "jelly" | "jelly-fill" | "jelly-duo" | "chisel" | "etch" | "slab" | "slab-press" | "thumbprint" | "utility" | "utility-fill" | "utility-duo" | "whiteboard";
+        level?: "primary" | "secondary" | "tertiary";
+        disabled?: boolean;
+    }) => VNode;
+};
+declare class EventsManager {
+    private _handlers;
+    constructor();
+    add(event: string, listener: EventListener): void;
+    remove(event: string, listener: EventListener): void;
+    removeAll(event?: string): void;
+    get(event: string): Set<EventListener> | undefined;
+    has(event: string): boolean;
+    count(event?: string): number;
 }
-/**
- * SmartForm Component
- * Auto-validation, CSRF protection, API submission
- */
-declare class SmartFormComponent extends Component<FormConfig> {
-    fields: FormField[];
-    formData: Record<string, unknown>;
-    isSubmitting: boolean;
-    submitError: string;
-    submitSuccess: boolean;
-    constructor(props: FormConfig);
-    onMount(): void;
+declare function getToast(): Toast;
+declare function getPopup(): Popup;
+declare function getLoader(): Loader;
+declare function hideLoader(): void;
+declare function showLoader(message?: string): void;
+declare const Window$1: {
+    Events: EventsManager;
+    toast: typeof getToast;
+    popup: typeof getPopup;
+    loader: typeof getLoader;
+    showLoader: typeof showLoader;
+    hideLoader: typeof hideLoader;
+    reload: () => void;
+    getPathName: () => string;
+    setAttributes: (key: string, value: string) => void;
+    getAttributes: (key: string) => string | null;
+    setLocalStorage: (key: string, value: string) => void;
+    getLocalStorage: (key: string) => string | null;
+    addEventListener: (event: string, listener: EventListener) => void;
+    removeEventListener: (event: string, listener: EventListener) => void;
+    dispatchEvent: (event: CustomEvent) => void;
+    onScroll: (callback: () => void) => void;
+    getScrollY: () => number;
+};
+
+declare class I18nManager {
+    private translations;
+    private currentLanguage;
+    private defaultLanguage;
+    private supportedLanguages;
+    private cachePath;
+    private readyListeners;
+    constructor(config?: I18nConfig);
     /**
-     * Handle field change
+     * Load translations for a specific language
+     * @param lang Language code (e.g., 'en', 'ar', 'fr')
+     * @param translations Translation object (can be nested)
      */
-    handleChange(fieldName: string, value: unknown): void;
+    loadLanguage(lang: LanguageCode, translations: Record<string, any>): void;
     /**
-     * Handle field blur
+     * Flatten nested object into dot notation
+     * @param obj Nested object
+     * @param prefix Current prefix
+     * @returns Flattened object with dot notation keys
      */
-    handleBlur(fieldName: string): void;
+    private flattenObject;
     /**
-     * Validate single field
+     * Load all translations from static files
+     * @param translations Object with language codes as keys and translation objects as values
      */
-    validateField(field: FormField, value: unknown): string | undefined;
+    loadTranslations(translations: TranslationSet): void;
     /**
-     * Validate all fields
+     * Set the current language
+     * @param lang Language code
      */
-    validateForm(): boolean;
+    setLanguage(lang: LanguageCode): void;
     /**
-     * Handle form submission
+     * Get the current language
      */
-    handleSubmit(event: Event): Promise<void>;
+    getLanguage(): LanguageCode;
     /**
-     * Render label with optional icon
+     * Get all supported languages
      */
-    renderLabel(field: FormField): VNode | string;
+    getSupportedLanguages(): LanguageCode[];
     /**
-     * Render form field
+     * Translate a key with smart parameter replacement
+     * Supports nested translation keys as parameter values
+     *
+     * @example
+     * // Simple translation
+     * t('button.login') // => "Login" or "دخـول" depending on current language
+     *
+     * @example
+     * // With parameters
+     * t('nav.credits', { count: '100' })
+     * // => "Available Credits: 100"
+     *
+     * @example
+     * // With nested translation keys as parameters
+     * t('language.switching_to', { language: 'button.login' })
+     * // => "Switching to Login..."
+     *
+     * @param key Translation key (supports dot notation for nested keys)
+     * @param params Optional parameters for replacement
+     * @param defaultValue Optional default translation key
+     * @returns Translated string with replaced parameters
      */
-    renderField(field: FormField): VNode;
-    render(): VNode;
-    styles(): string;
-}
-/**
- * SmartForm helper function
- */
-declare function SmartForm(config: FormConfig): VNode;
-
-type PopupType = 'confirm' | 'alert' | 'form' | 'custom' | 'prompt';
-type PopupVariant = 'default' | 'danger' | 'warning' | 'success' | 'info';
-type PopupSize = 'small' | 'medium' | 'large' | 'xlarge' | 'fullscreen';
-interface PopupButton {
-    label: string;
-    translateKey?: string;
-    variant?: 'primary' | 'secondary' | 'danger' | 'success';
-    icon?: string;
-    onClick: () => void | Promise<void>;
-    loading?: boolean;
-}
-interface PopupFormOptions {
-    title: string;
-    titleTranslateKey?: string;
-    description?: string;
-    descriptionTranslateKey?: string;
-    formConfig: FormConfig;
-    variant?: PopupVariant;
-    icon?: string;
-    size?: PopupSize;
-    closeOnOverlay?: boolean;
-    closeOnEscape?: boolean;
-    showCloseButton?: boolean;
-}
-interface PopupOptions {
-    title: string;
-    titleTranslateKey?: string;
-    message?: string;
-    messageTranslateKey?: string;
-    description?: string;
-    descriptionTranslateKey?: string;
-    type?: PopupType;
-    variant?: PopupVariant;
-    size?: PopupSize;
-    buttons?: PopupButton[];
-    customContent?: VNode;
-    formConfig?: FormConfig;
-    closeOnOverlay?: boolean;
-    closeOnEscape?: boolean;
-    showCloseButton?: boolean;
-    icon?: string;
-    onConfirm?: () => void | Promise<void>;
-    onCancel?: () => void | Promise<void>;
-}
-interface ActivePopup extends PopupOptions {
-    id: number;
-    resolve?: (value: boolean | string | null | Record<string, unknown>) => void;
-    inputValue?: string;
-    isSubmitting?: boolean;
-}
-declare class Popup extends Component {
-    popups: ActivePopup[];
-    private nextId;
-    private handleEscapeKey?;
-    onMount(): Promise<void>;
-    onUnmount(): void;
-    render(): VNode;
-    renderPopup(popup: ActivePopup): VNode;
+    t(key: string, params?: Record<string, string>, defaultValue?: string): string;
+    private getTranslation;
     /**
-     * Show a custom popup
+     * Translate with a specific language (overrides current language temporarily)
+     *
+     * @param key Translation key
+     * @param lang Language code
+     * @param params Optional parameters
+     * @returns Translated string
+     */
+    tLang(key: string, lang: LanguageCode, params?: Record<string, string>): string;
+    /**
+     * Translate a key and convert HTML tags in the translation to VNode elements
+     * Supports tags like <br>, <strong>, <em>, <b>, <i>, etc.
+     * Useful for multiline translations with formatting
+     *
+     * @example
+     * // Translation: "Hello <br> World"
+     * tHtml('page.home.title') // => [text node, br element, text node]
+     *
+     * @param key Translation key
+     * @param params Optional parameters for replacement
+     * @param defaultValue Optional default translation key
+     * @returns Array of VNode and string elements that can be used as children
+     */
+    tHtml(key: string, params?: Record<string, string>, defaultValue?: string): (VNode | string)[];
+    /**
+     * Parse HTML string into VNode and text elements
+     * Converts \n and /n sequences to <br> tags
+     * @private
+     */
+    private parseHtmlString;
+    /**
+     * Get all translations for current language
+     */
+    getTranslations(): Record<string, string>;
+    /**
+     * Check if a translation key exists
+     * @param key Translation key
+     * @returns true if key exists in current or default language
+     */
+    hasKey(key: string): boolean;
+    /**
+     * Create a reactive translation function that listens to language changes
+     * @param updateCallback Callback function to execute when language changes
+     * @returns Function to unsubscribe from language changes
      */
-    show(options: PopupOptions): Promise<boolean | string | null | Record<string, unknown>>;
+    createTranslator(updateCallback: () => void): () => void;
     /**
-     * Show a form popup
+     * Load translations from URL(s)
+     * Supports patterns like '/static/i18n/*.json' or specific URLs
+     *
+     * @example
+     * // Load from a pattern
+     * await loadFromUrl('/static/i18n/*.json');
+     *
+     * @example
+     * // Load specific language files
+     * await loadFromUrl(['/static/i18n/en.json', '/static/i18n/ar.json']);
+     *
+     * @param urlPattern String pattern or array of URLs
+     * @returns Promise that resolves when all translations are loaded
      */
-    showForm(options: PopupFormOptions): Promise<boolean | string | null | Record<string, unknown>>;
+    loadFromUrl(urlPattern: string | string[]): Promise<void>;
     /**
-     * Show a confirmation dialog
+     * Register a callback for when i18n is ready
      */
-    confirm(options: {
-        title: string;
-        titleTranslateKey?: string;
-        message: string;
-        messageTranslateKey?: string;
-        confirmLabel?: string;
-        confirmTranslateKey?: string;
-        cancelLabel?: string;
-        cancelTranslateKey?: string;
-        variant?: PopupVariant;
-        icon?: string;
-        size?: PopupSize;
-        onConfirm?: () => void | Promise<void>;
-        onCancel?: () => void | Promise<void>;
-    }): Promise<boolean>;
+    onReady(callback: () => void): void;
     /**
-     * Show an alert dialog
+     * Notify all listeners that i18n is ready
      */
-    alert(options: {
-        title: string;
-        titleTranslateKey?: string;
-        message: string;
-        messageTranslateKey?: string;
-        okLabel?: string;
-        okTranslateKey?: string;
-        variant?: PopupVariant;
-        icon?: string;
-        size?: PopupSize;
-        onConfirm?: () => void | Promise<void>;
-    }): Promise<boolean>;
+    private notifyReady;
     /**
-     * Show a prompt dialog
+     * Get language from localStorage
      */
-    prompt(options: {
-        title: string;
-        titleTranslateKey?: string;
-        message: string;
-        messageTranslateKey?: string;
-        defaultValue?: string;
-        confirmLabel?: string;
-        confirmTranslateKey?: string;
-        cancelLabel?: string;
-        cancelTranslateKey?: string;
-        icon?: string;
-        onConfirm?: (value: string) => void | Promise<void>;
-        onCancel?: () => void | Promise<void>;
-    }): Promise<string | null>;
+    private getStoredLanguage;
     /**
-     * Close a specific popup
+     * Store language in localStorage
      */
-    closePopup(id: number, result: boolean | string | null | Record<string, unknown>): void;
+    private storeLanguage;
     /**
-     * Close all popups
+     * Dispatch language change event
      */
-    closeAll(): void;
-    private applyBodyLock;
-    private removeBodyLock;
-    private setupKeyboardListener;
+    private dispatchLanguageChangeEvent;
 }
-declare function initPopup(container?: HTMLElement): Popup;
-declare function getPopup(): Popup;
-declare const popup: {
-    show: (options: PopupOptions) => Promise<string | boolean | Record<string, unknown> | null>;
-    confirm: (options: Parameters<Popup["confirm"]>[0]) => Promise<boolean>;
-    alert: (options: Parameters<Popup["alert"]>[0]) => Promise<boolean>;
-    prompt: (options: {
-        title: string;
-        titleTranslateKey?: string;
-        message: string;
-        icon?: string;
-        messageTranslateKey?: string;
-        onConfirm?: () => void | Promise<void>;
-    }) => Promise<string | null>;
-    showForm: (options: PopupFormOptions) => Promise<string | boolean | Record<string, unknown> | null>;
-    closePopup: (id: number, result: boolean | string | null | Record<string, unknown>) => void;
-    closeLastPopup: () => void;
-    closeFirstPopup: () => void;
-    closeAll: () => void;
-};
+/**
+ * Get the global i18n instance
+ */
+declare function getI18n(): I18nManager;
+
+/**
+ * Global translation function
+ * @param key Translation key (supports dot notation for nested keys)
+ * @param params Optional parameters
+ * @param defaultValue Optional default translation key
+ * @returns Translated string
+ */
+declare function t(key: string, params?: Record<string, string>, defaultValue?: string): string;
+/**
+ * Translate with a specific language (overrides current language temporarily)
+ * @param key Translation key
+ * @param lang Language code
+ * @param params Optional parameters
+ * @returns Translated string
+ */
+declare function tLang(key: string, lang: string, params?: Record<string, string>): string;
+/**
+ * Translate a key and convert HTML tags to VNode elements
+ * Useful for multiline translations with formatting like <br>
+ * @param key Translation key
+ * @param params Optional parameters
+ * @param defaultValue Optional default translation key
+ * @returns Array of VNode and string elements that can be used as children
+ */
+declare function tHtml(key: string, params?: Record<string, string>, defaultValue?: string): (VNode | string)[];
+/**
+ * Set the current language globally (synchronous)
+ * @param lang Language code
+ */
+declare function setLanguage(lang: string): void;
+/**
+ * Set the current language globally with lazy-loading support (asynchronous)
+ * Use this when you want to lazy-load language files on demand
+ * @param lang Language code
+ * @param staticPath Path to language files for lazy-loading
+ * @returns Promise that resolves when language is loaded and set
+ */
+declare function setLanguageAsync(lang: string, staticPath?: string): Promise<void>;
+/**
+ * Get the current language
+ */
+declare function getCurrentLanguage(): string;
+/**
+ * Load translations for a specific language
+ * @param lang Language code
+ * @param translations Translation object (can be nested)
+ */
+declare function loadLanguage(lang: string, translations: Record<string, any>): void;
+/**
+ * Load all translations
+ * @param translations The translations object (can be nested)
+ */
+declare function loadTranslations(translations: Record<string, Record<string, any>>): void;
+/**
+ * Get all supported languages
+ */
+declare function getSupportedLanguages(): string[];
+/**
+ * Check if a translation key exists
+ * @param key The translation key to check
+ * @returns Whether the key exists
+ */
+declare function hasKey(key: string): boolean;
+/**
+ * Get all translations for current language
+ */
+declare function getTranslations(): Record<string, string>;
+/**
+ * Create a reactive translator that listens to language changes
+ * @param updateCallback Callback function to execute when language changes
+ * @returns Function to unsubscribe from language changes
+ */
+declare function createTranslator(updateCallback: () => void): () => void;
+/**
+ * Load translations from URL(s)
+ * Supports patterns like '/static/i18n/*.json' or specific URLs
+ *
+ * @example
+ * // Load from a pattern
+ * await loadFromUrl('/static/i18n/*.json');
+ *
+ * @example
+ * // Load specific language files
+ * await loadFromUrl(['/static/i18n/en.json', '/static/i18n/ar.json']);
+ *
+ * @param urlPattern String pattern or array of URLs
+ * @returns Promise that resolves when all translations are loaded
+ */
+declare function loadFromUrl(urlPattern: string | string[]): Promise<void>;
+/**
+ * Initialize i18n synchronously (useful for testing)
+ * Creates a new I18nManager instance with the provided config
+ *
+ * @param config I18n configuration
+ *
+ * @example
+ * initializeI18n({
+ *     defaultLanguage: 'en',
+ *     supportedLanguages: ['en', 'ar']
+ * });
+ */
+declare function initializeI18n(config?: I18nConfig): void;
+/**
+ * Setup i18n: Initialize and load the currently selected language
+ * Uses stored language from localStorage if available, otherwise uses default
+ * Other languages are lazy-loaded when setLanguage is called
+ *
+ * @param config I18n configuration
+ * @returns Promise that resolves when the selected language is loaded
+ *
+ * @example
+ * await setupI18n({
+ *     defaultLanguage: 'en',
+ *     supportedLanguages: ['en', 'ar'],
+ *     staticPath: 'static/i18n'
+ * });
+ * console.log(t('button.login')); // Ready to use in current language!
+ */
+declare function setupI18n(config: I18nConfig): Promise<void>;
+/**
+ * Load a specific language file on-demand
+ * Use this when user switches to a language that hasn't been loaded yet
+ *
+ * @param lang Language code (e.g., 'ar', 'fr')
+ * @param staticPath Optional path to language files (defaults to 'static/i18n')
+ * @returns Promise that resolves when language is loaded
+ *
+ * @example
+ * // User switches to Arabic - load it first if not already loaded
+ * await loadLanguageFile('ar');
+ * setLanguage('ar');
+ */
+declare function loadLanguageFile(lang: string, staticPath?: string): Promise<void>;
+
+type FATheme = 'solid' | 'regular' | 'light' | 'thin' | 'duotone' | 'brands' | 'sharp-solid' | 'sharp-regular' | 'sharp-light' | 'sharp-thin' | 'sharp-duotone-solid' | 'sharp-duotone-regular' | 'sharp-duotone-light' | 'sharp-duotone-thin' | 'notdog' | 'notdog-duo' | 'jelly' | 'jelly-fill' | 'jelly-duo' | 'chisel' | 'etch' | 'slab' | 'slab-press' | 'thumbprint' | 'utility' | 'utility-fill' | 'utility-duo' | 'whiteboard';
+/**
+ * Get the default FontAwesome theme
+ */
+declare function getDefaultFATheme(): FATheme;
+/**
+ * Set the default FontAwesome theme
+ * @param theme The FontAwesome theme to use as default
+ */
+declare function setDefaultFATheme(theme: FATheme): void;
+/**
+ * Initialize FontAwesome config from ClientConfig
+ * @param faConfig The FA configuration from ClientConfig
+ */
+declare function initializeFAConfig(faConfig?: FAConfig): void;
 
 type TabPosition = 'top' | 'side';
 type TabStyle = 'default' | 'pills' | 'minimal';
@@ -1375,7 +1579,7 @@ declare class TabbedView extends Component {
     renderTabList(): VNode;
     renderTab(tab: Tab): VNode;
     renderTabContent(): VNode;
-    renderActiveTabContent(tab: Tab): any;
+    renderActiveTabContent(tab: Tab): VNode;
 }
 /**
  * Create a new TabbedView instance with options
@@ -1520,6 +1724,7 @@ declare class Dropdown extends Component {
     config: DropdownConfig;
     isOpen: boolean;
     private mounted;
+    private bb_;
     constructor(config: DropdownConfig);
     onMount(): void;
     onUnmount(): void;
@@ -1732,4 +1937,111 @@ declare function formatTimeAgo(timestamp: string | Date): string;
  */
 declare function getTimeTitle(timestamp: string | Date): string;
 
-export { type ApiConfig, type AppConfig, type BuildConfig, type ClassValue, type ClientConfig, CombinedContext, Component, type ComponentConstructor, Context, type ContextSubscriber, type DeepPartial, type DevToolsConfig, Dropdown, type DropdownConfig, type DropdownItemConfig, type EventHandler, type FormConfig, type FormField, type FormFieldConfig, type FormFieldOption, type FormSubmitHandler, type FormsConfig, type I18nConfig, I18nManager, type IntersectionConfig, ItemsLoader, type ItemsLoaderConfig, type LanguageCode, Loader, type LoaderOptions, type LoaderSize, type LoaderVariant, type NavigationGuard, Popup, type PopupButton, type PopupFormOptions, type PopupOptions, type PopupSize, type PopupType, type PopupVariant, Provider, type ProviderProps, type Route, type RouteConfig, Router, type RouterConfig, SmartForm, SmartFormComponent, type StateConfig, Store, type StoreMiddleware, type StoreOptions, type StoreSubscriber, StyleManager, type Tab, type TabPosition, type TabStyle, TabbedView, type TabbedViewOptions, Toast, type ToastMessage, type ToastType, type TranslationSet, type ValidationRule, VisibilityObserver, camelCase, capitalize, clamp, classNames, clearHookContext, client, computed, connect, createCombinedContext, createComputedStore, createContext, createDropdown, createFunctionalComponent, createItemsLoader, createStore, createTabbedView, createTranslator, css, debounce, deepClone, deepMerge, formatDate, formatRelativeTime, formatTimeAgo, getCurrentLanguage, getCurrentPath, getI18n, getPopup, getQueryParam, getQueryParams, getSupportedLanguages, getTimeDisplay, getTimeTitle, getToast, getTranslations, goBack, goForward, hasKey, initPopup, initToast, initializeI18n, isBrowser, isCurrentPath, isCurrentPathPrefix, isEmpty, kebabCase, loadFromUrl, loadLanguage, loadLanguageFile, loadTranslations, mountTabbedView, navigate, navigateWithQuery, observeVisibility, parseQuery, pascalCase, popup, reloadRoute, router, safeJsonParse, scheduler, setHookContext, setLanguage, setLanguageAsync, setupI18n, sleep, state, stringifyQuery, t, tHtml, tLang, throttle, toast, truncate, uniqueId, useCallback, useContext, useDebounce, useEffect, useEventListener, useFetch, useInterval, useLocalStorage, useMemo, usePrevious, useReducer, useRef, useState, useToggle, useWindowSize, utils, watch };
+declare const bbMap: {
+    form: {
+        base: string;
+        field: string;
+        fieldCheckbox: string;
+        fieldInput: string;
+        fieldInputContainer: string;
+        fieldInputButtons: string;
+        fieldInputButton: string;
+        fieldInputButtonRules: string;
+        fieldInputButtonRulesContent: string;
+        fieldTextarea: string;
+        fieldSelect: string;
+        fieldLabel: string;
+        fieldError: string;
+        fieldTitle: string;
+        buttonsContainer: string;
+        button: string;
+        alert: string;
+        alertError: string;
+        alertSuccess: string;
+    };
+    toast: {
+        container: string;
+        toast: string;
+        icon: string;
+        msg: string;
+    };
+    loader: {
+        container: string;
+        containerOverlay: string;
+        bg: string;
+        loader: string;
+        spinner: {
+            container: string;
+            icon: string;
+            dot: string;
+            pulse: string;
+            text: string;
+        };
+        progress: {
+            container: string;
+            bar: string;
+            text: string;
+        };
+    };
+    popup: {
+        container: string;
+        overlay: string;
+        popup: {
+            base: string;
+            close: string;
+        };
+        header: {
+            container: string;
+            icon: string;
+            content: string;
+            title: string;
+            description: string;
+        };
+        body: {
+            container: string;
+            message: string;
+            input: string;
+            formContainer: string;
+        };
+        footer: string;
+        button: string;
+    };
+    dropdown: {
+        container: string;
+        trigger: string;
+        menu: string;
+        item: string;
+        divider: string;
+        icon: string;
+    };
+    itemsLoader: {
+        container: string;
+        list: string;
+        searchbar: string;
+        loading: string;
+        error: string;
+        trigger: string;
+        end: string;
+        emptyState: string;
+        button: string;
+        item: string;
+        formFieldInput: string;
+    };
+    tabbedView: {
+        container: string;
+        header: string;
+        tab: {
+            base: string;
+            active: string;
+            disabled: string;
+            badge: string;
+        };
+        content: {
+            container: string;
+            emptyState: string;
+            error: string;
+        };
+    };
+};
+
+export { type ApiConfig, type AppConfig, type BuildConfig, type ButtonConfig, CM, ClassMaker, type ClassValue, type ClientConfig, CombinedContext, Component, type ComponentConstructor, Context, type ContextSubscriber, type DeepPartial, type DevToolsConfig, Dropdown, type DropdownConfig, type DropdownItemConfig, EC, ElementCreator, type EventHandler, type FAConfig, type FieldButtonConfig, type FormConfig, type FormFieldConfig, type FormFieldOption, type FormSubmitHandler, type FormsConfig, type I18nConfig, I18nManager, type IntersectionConfig, ItemsLoader, type ItemsLoaderConfig, type LabelConfig, type LanguageCode, Loader, type LoaderOptions, type LoaderSize, type LoaderVariant, type NavigationGuard, Popup, type PopupButton, type PopupFormOptions, type PopupOptions, type PopupSize, type PopupType, type PopupVariant, Provider, type ProviderProps, type Route, type RouteConfig, Router, type RouterConfig, SmartForm, SmartFormComponent, type StateConfig, Store, type StoreMiddleware, type StoreOptions, type StoreSubscriber, StyleManager, type Tab, type TabPosition, type TabStyle, TabbedView, type TabbedViewOptions, Toast, type ToastMessage, type ToastType, type TranslationSet, type ValidationRule, VisibilityObserver, Window$1 as Window, bbMap, camelCase, capitalize, clamp, classNames, clearHookContext, client, computed, connect, createCombinedContext, createComputedStore, createContext, createDropdown, createFunctionalComponent, createItemsLoader, createStore, createTabbedView, createTranslator, css, debounce, deepClone, deepMerge, formatDate, formatRelativeTime, formatTimeAgo, getCurrentLanguage, getCurrentPath, getDefaultFATheme, getI18n, getPopup$1 as getPopup, getQueryParam, getQueryParams, getSupportedLanguages, getTimeDisplay, getTimeTitle, getToast$1 as getToast, getTranslations, goBack, goForward, hasKey, initPopup, initToast, initializeFAConfig, initializeI18n, isBrowser, isCurrentPath, isCurrentPathPrefix, isEmpty, kebabCase, loadFromUrl, loadLanguage, loadLanguageFile, loadTranslations, mountTabbedView, navigate, navigateWithQuery, observeVisibility, parseQuery, pascalCase, popup, reloadRoute, router, safeJsonParse, scheduler, setDefaultFATheme, setHookContext, setLanguage, setLanguageAsync, setupI18n, sleep, state, stringifyQuery, t, tHtml, tLang, throttle, toast, truncate, uniqueId, useCallback, useContext, useDebounce, useEffect, useEventListener, useFetch, useInterval, useLocalStorage, useMemo, usePrevious, useReducer, useRef, useState, useToggle, useWindowSize, utils, watch };