@shohojdhara/atomix 0.3.4 → 0.3.5

package/dist/theme.d.ts

@@ -0,0 +1,1992 @@
+import * as React$1 from 'react';
+import React__default, { ReactNode, ErrorInfo, Component } from 'react';
+
+/**
+ * RTL (Right-to-Left) Support Utilities
+ *
+ * Provides utilities for managing RTL text direction in themes
+ */
+/**
+ * RTL configuration options
+ */
+interface RTLConfig {
+    /** Enable RTL mode */
+    enabled: boolean;
+    /** Current direction ('ltr' | 'rtl') */
+    direction: 'ltr' | 'rtl';
+    /** Data attribute name for direction */
+    dataAttribute?: string;
+    /** Auto-detect from locale */
+    autoDetect?: boolean;
+    /** Locale code (e.g., 'ar', 'he', 'fa') */
+    locale?: string;
+}
+/**
+ * RTL Manager
+ *
+ * Manages RTL text direction for the theme system
+ */
+declare class RTLManager {
+    private config;
+    private listeners;
+    constructor(config?: Partial<RTLConfig>);
+    /**
+     * Detect locale from browser
+     */
+    private detectLocale;
+    /**
+     * Check if locale is RTL
+     */
+    isRTLLocale(locale: string): boolean;
+    /**
+     * Get current direction
+     */
+    getDirection(): 'ltr' | 'rtl';
+    /**
+     * Check if RTL is enabled
+     */
+    isEnabled(): boolean;
+    /**
+     * Set direction
+     */
+    setDirection(direction: 'ltr' | 'rtl'): void;
+    /**
+     * Toggle direction
+     */
+    toggleDirection(): 'ltr' | 'rtl';
+    /**
+     * Enable RTL
+     */
+    enable(): void;
+    /**
+     * Disable RTL
+     */
+    disable(): void;
+    /**
+     * Set locale and auto-adjust direction
+     */
+    setLocale(locale: string): void;
+    /**
+     * Get current locale
+     */
+    getLocale(): string | undefined;
+    /**
+     * Apply direction to DOM
+     */
+    private applyDirection;
+    /**
+     * Add direction change listener
+     */
+    onDirectionChange(callback: (direction: 'ltr' | 'rtl') => void): () => void;
+    /**
+     * Notify listeners of direction change
+     */
+    private notifyListeners;
+    /**
+     * Get RTL-aware value
+     *
+     * Returns different values based on direction
+     */
+    getValue<T>(ltrValue: T, rtlValue: T): T;
+    /**
+     * Get RTL-aware CSS property
+     *
+     * Returns appropriate CSS property based on direction
+     */
+    getCSSProperty(property: string): string;
+    /**
+     * Destroy RTL manager
+     */
+    destroy(): void;
+}
+
+/**
+ * Atomix Configuration System
+ *
+ * Tailwind-like configuration for customizing the Atomix Design System.
+ *
+ * External developers can create `atomix.config.ts` in their project root
+ * to customize design tokens, similar to Tailwind's tailwind.config.js
+ *
+ * @example
+ * ```typescript
+ * // atomix.config.ts (in your project)
+ * import { defineConfig } from '@shohojdhara/atomix/config';
+ *
+ * export default defineConfig({
+ *   theme: {
+ *     extend: {
+ *       colors: {
+ *         primary: { main: '#7AFFD7' },
+ *       },
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Color Scale (1-10)
+ */
+interface ColorScale {
+    1?: string;
+    2?: string;
+    3?: string;
+    4?: string;
+    5?: string;
+    6?: string;
+    7?: string;
+    8?: string;
+    9?: string;
+    10?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Palette Color Options
+ */
+interface PaletteColorOptions {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: string;
+}
+/**
+ * Design Tokens Schema (Tailwind-like)
+ */
+interface ThemeTokens {
+    /** Color palette */
+    colors?: Record<string, string | PaletteColorOptions | ColorScale | Record<string, string>>;
+    /** Spacing scale */
+    spacing?: Record<string, string>;
+    /** Border radius scale */
+    borderRadius?: Record<string, string>;
+    /** Typography scale and settings */
+    typography?: {
+        fontFamilies?: Record<string, string>;
+        fontSizes?: Record<string, string>;
+        fontWeights?: Record<string, string | number>;
+        lineHeights?: Record<string, string | number>;
+        letterSpacings?: Record<string, string>;
+    };
+    /** Shadow scale */
+    shadows?: Record<string, string>;
+    /** Z-index scale */
+    zIndex?: Record<string, string | number>;
+    /** Breakpoints scale */
+    breakpoints?: Record<string, string | number>;
+    /** Transitions settings */
+    transitions?: {
+        durations?: Record<string, string>;
+        easings?: Record<string, string>;
+    };
+}
+/**
+ * CSS Theme Definition
+ */
+interface CSSThemeDefinition {
+    type: 'css';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    cssPath?: string;
+}
+/**
+ * JavaScript Theme Definition
+ */
+interface JSThemeDefinition {
+    type: 'js';
+    name: string;
+    class?: string;
+    description?: string;
+    author?: string;
+    version?: string;
+    tags?: string[];
+    supportsDarkMode?: boolean;
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    a11y?: {
+        contrastTarget?: number;
+        modes?: string[];
+    };
+    color?: string;
+    features?: string[];
+    dependencies?: string[];
+    createTheme: () => Theme;
+}
+/**
+ * Theme Definition (CSS or JS)
+ */
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+/**
+ * Build configuration (migrated from theme.config.ts)
+ */
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
+/**
+ * Runtime configuration (migrated from theme.config.ts)
+ */
+interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
+}
+/**
+ * Integration settings (migrated from theme.config.ts)
+ */
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
+}
+/**
+ * Atomix Configuration Interface
+ *
+ * Tailwind-like configuration for external developers.
+ * Focus on theme customization - build/runtime configs are internal only.
+ */
+interface AtomixConfig {
+    /**
+     * CSS variable prefix (default: 'atomix')
+     *
+     * Change this to customize all CSS variable names.
+     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+     */
+    prefix?: string;
+    /**
+     * Theme customization (Tailwind-like)
+     *
+     * Use `extend` to add or override design tokens.
+     * Use `tokens` to completely replace the default token system (advanced).
+     */
+    theme?: {
+        /**
+         * Extend the default design tokens
+         *
+         * This is the recommended way to customize Atomix.
+         * Your values will override or extend the base tokens.
+         */
+        extend?: ThemeTokens;
+        /**
+         * Override the default tokens entirely (advanced)
+         *
+         * Use with caution - this replaces the entire token system.
+         * Most users should use `extend` instead.
+         */
+        tokens?: ThemeTokens;
+        /**
+         * Register custom themes (optional)
+         *
+         * Define CSS or JavaScript themes that can be loaded dynamically.
+         */
+        themes?: Record<string, ThemeDefinition>;
+    };
+    /** @internal Build configuration (internal use only) */
+    build?: BuildConfig;
+    /** @internal Runtime configuration (internal use only) */
+    runtime?: RuntimeConfig;
+    /** @internal Integration settings (internal use only) */
+    integration?: IntegrationConfig;
+    /** @internal Theme dependencies mapping (internal use only) */
+    dependencies?: Record<string, string[]>;
+}
+
+/**
+ * Theme Configuration Types
+ *
+ * Type definitions for the theme configuration system
+ */
+
+/**
+ * Loaded and validated theme configuration
+ */
+interface LoadedThemeConfig {
+    /** Registered themes */
+    themes: Record<string, ThemeDefinition>;
+    /** Build configuration */
+    build: BuildConfig;
+    /** Runtime configuration */
+    runtime: RuntimeConfig;
+    /** Integration settings */
+    integration: IntegrationConfig;
+    /** Theme dependencies mapping */
+    dependencies: Record<string, string[]>;
+    /** Whether config was validated */
+    validated: boolean;
+    /** Validation errors (if any) */
+    errors?: string[];
+    /** Validation warnings (if any) */
+    warnings?: string[];
+    /** Internal tokens (for generator) */
+    __tokens?: any;
+    /** Internal extensions (for generator) */
+    __extend?: any;
+}
+
+/**
+ * Theme Registry
+ *
+ * Central registry for all themes with discovery and dependency management
+ */
+
+/**
+ * Registry entry
+ */
+interface RegistryEntry {
+    /** Theme ID */
+    id: string;
+    /** Theme definition from config */
+    definition: ThemeDefinition;
+    /** Resolved theme object (for JS themes) */
+    theme?: Theme;
+    /** Whether theme is loaded */
+    loaded: boolean;
+    /** Loading promise (if currently loading) */
+    loading?: Promise<Theme | void>;
+    /** Dependencies */
+    dependencies: string[];
+    /** Dependent themes (themes that depend on this one) */
+    dependents: string[];
+}
+/**
+ * Theme Registry
+ *
+ * Manages theme registration, discovery, and dependency resolution
+ */
+declare class ThemeRegistry {
+    private entries;
+    private config;
+    private initialized;
+    /**
+     * Initialize registry from config
+     */
+    initialize(config?: LoadedThemeConfig): Promise<void>;
+    /**
+     * Register a theme
+     */
+    register(themeId: string, definition: ThemeDefinition): void;
+    /**
+     * Get theme entry
+     */
+    get(themeId: string): RegistryEntry | undefined;
+    /**
+     * Check if theme exists
+     */
+    has(themeId: string): boolean;
+    /**
+     * Get all theme IDs
+     */
+    getAllIds(): string[];
+    /**
+     * Get all theme metadata
+     */
+    getAllMetadata(): ThemeMetadata[];
+    /**
+     * Get theme definition
+     */
+    getDefinition(themeId: string): ThemeDefinition | undefined;
+    /**
+     * Get theme object (for JS themes)
+     */
+    getTheme(themeId: string): Theme | undefined;
+    /**
+     * Set theme object (for JS themes)
+     */
+    setTheme(themeId: string, theme: Theme): void;
+    /**
+     * Get dependencies for a theme
+     */
+    getDependencies(themeId: string): string[];
+    /**
+     * Get dependents for a theme (themes that depend on this one)
+     */
+    getDependents(themeId: string): string[];
+    /**
+     * Resolve all dependencies in correct order
+     */
+    resolveDependencyOrder(themeId: string): string[];
+    /**
+     * Resolve dependencies and build dependency graph
+     */
+    private resolveDependencies;
+    /**
+     * Validate all themes
+     */
+    validate(): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Clear registry
+     */
+    clear(): void;
+}
+
+/**
+ * Theme Cache
+ *
+ * Performance caching layer for loaded themes (CSS and JS)
+ */
+
+/**
+ * Cache entry for CSS theme
+ */
+interface CSSCacheEntry {
+    type: 'css' | 'js';
+    themeId: string;
+    cssContent?: string;
+    loaded: boolean;
+    loading: Promise<void> | null;
+    timestamp: number;
+}
+/**
+ * Cache entry for JS theme
+ */
+interface JSCacheEntry {
+    type: 'js';
+    themeId: string;
+    theme: Theme;
+    loaded: boolean;
+    timestamp: number;
+}
+/**
+ * Theme cache configuration
+ */
+interface CacheConfig {
+    /** Maximum cache size (number of themes) */
+    maxSize?: number;
+    /** Cache TTL in milliseconds (0 = no expiration) */
+    ttl?: number;
+    /** Enable cache */
+    enabled?: boolean;
+}
+/**
+ * Theme Cache
+ *
+ * Manages caching of loaded themes for performance optimization
+ */
+declare class ThemeCache {
+    private cache;
+    private config;
+    private accessOrder;
+    constructor(config?: CacheConfig);
+    /**
+     * Get cached CSS theme
+     */
+    getCSS(themeId: string): CSSCacheEntry | null;
+    /**
+     * Get cached JS theme
+     */
+    getJS(themeId: string): JSCacheEntry | null;
+    /**
+     * Set CSS theme cache entry
+     */
+    setCSS(themeId: string, entry: Partial<CSSCacheEntry>): void;
+    /**
+     * Set JS theme cache entry
+     */
+    setJS(themeId: string, theme: Theme): void;
+    /**
+     * Check if theme is cached
+     */
+    has(themeId: string): boolean;
+    /**
+     * Remove theme from cache
+     */
+    delete(themeId: string): boolean;
+    /**
+     * Clear all cache
+     */
+    clear(): void;
+    /**
+     * Get cache statistics
+     */
+    getStats(): {
+        size: number;
+        maxSize: number;
+        cssThemes: number;
+        jsThemes: number;
+    };
+    /**
+     * Update access order for LRU
+     */
+    private updateAccessOrder;
+    /**
+     * Remove from access order
+     */
+    private removeFromAccessOrder;
+    /**
+     * Evict least recently used entries if cache is full
+     */
+    private evictIfNeeded;
+}
+
+/**
+ * Theme Engine
+ *
+ * Core engine for unified CSS and JS theme support
+ */
+
+/**
+ * Theme change event
+ */
+interface ThemeChangeEvent$1 {
+    /** Previous theme ID */
+    previousTheme: string | null;
+    /** Current theme ID */
+    currentTheme: string;
+    /** Theme object (for JS themes) */
+    themeObject?: Theme | null;
+    /** Timestamp */
+    timestamp: number;
+    /** Source of change */
+    source: 'user' | 'system' | 'storage';
+}
+/**
+ * Theme load options
+ */
+interface ThemeLoadOptions$1 {
+    /** Force reload even if already loaded */
+    force?: boolean;
+    /** Preload without applying */
+    preload?: boolean;
+    /** Remove previous theme CSS */
+    removePrevious?: boolean;
+    /** Custom CSS path override */
+    customPath?: string;
+    /** Fallback to default theme on error */
+    fallbackOnError?: boolean;
+}
+/**
+ * Theme revert event
+ */
+interface ThemeRevertEvent {
+    /** Theme ID that was attempted */
+    attemptedTheme: string;
+    /** Theme ID that was reverted to (null if no previous theme) */
+    revertedToTheme: string | null;
+    /** Error that caused the revert */
+    error: Error;
+    /** Timestamp */
+    timestamp: number;
+}
+/**
+ * Event listener types
+ */
+type ThemeChangeListener = (event: ThemeChangeEvent$1) => void;
+type ThemeLoadListener = (themeId: string) => void;
+type ThemeErrorListener = (error: Error, themeId: string) => void;
+type ThemeRevertListener = (event: ThemeRevertEvent) => void;
+/**
+ * Theme Engine Configuration
+ */
+interface ThemeEngineConfig {
+    /** Base path for CSS themes */
+    basePath?: string;
+    /** CDN path for CSS themes */
+    cdnPath?: string | null;
+    /** Use minified CSS */
+    useMinified?: boolean;
+    /** Data attribute name */
+    dataAttribute?: string;
+    /** Enable caching */
+    enableCache?: boolean;
+    /** Cache configuration */
+    cacheConfig?: {
+        maxSize?: number;
+        ttl?: number;
+    };
+    /** Custom style ID for JS theme CSS injection */
+    styleId?: string;
+}
+/**
+ * Theme Engine
+ *
+ * Unified engine for managing CSS and JS themes
+ */
+declare class ThemeEngine {
+    private registry;
+    private cache;
+    private validator;
+    private config;
+    private currentTheme;
+    private activeTheme;
+    private loadedThemes;
+    private loadingThemes;
+    private failedThemes;
+    private changeListeners;
+    private loadListeners;
+    private errorListeners;
+    private revertListeners;
+    private logger;
+    constructor(config?: ThemeEngineConfig);
+    /**
+     * Initialize engine with theme registry
+     */
+    initialize(): Promise<void>;
+    /**
+     * Get current theme ID
+     */
+    getCurrentTheme(): string | null;
+    /**
+     * Get active theme object
+     */
+    getActiveTheme(): Theme | null;
+    /**
+     * Check if theme is loaded
+     */
+    isThemeLoaded(themeId: string): boolean;
+    /**
+     * Load and apply theme
+     */
+    setTheme(themeId: string | Theme, options?: ThemeLoadOptions$1): Promise<void>;
+    /**
+     * Load theme (CSS or JS)
+     */
+    private loadTheme;
+    /**
+     * Load CSS theme
+     */
+    private loadCSSTheme;
+    /**
+     * Load JS theme
+     */
+    private loadJSTheme;
+    /**
+     * Apply theme (set as active)
+     */
+    private applyTheme;
+    /**
+     * Apply CSS theme
+     */
+    private applyCSSTheme;
+    /**
+     * Apply JS theme
+     */
+    private applyJSTheme;
+    /**
+     * Remove theme
+     */
+    private removeTheme;
+    /**
+     * Preload theme
+     */
+    preloadTheme(themeId: string): Promise<void>;
+    /**
+     * Get registry
+     */
+    getRegistry(): ThemeRegistry;
+    /**
+     * Get cache
+     */
+    getCache(): ThemeCache;
+    /**
+     * Clear failed theme tracking (allows retry of previously failed themes)
+     */
+    clearFailedThemes(): void;
+    /**
+     * Clear specific failed theme (allows retry of a specific theme)
+     */
+    clearFailedTheme(themeId: string): void;
+    /**
+     * Check if theme has failed to load
+     */
+    hasFailedTheme(themeId: string): boolean;
+    /**
+     * Add change listener
+     */
+    on(event: 'change', listener: ThemeChangeListener): void;
+    on(event: 'load', listener: ThemeLoadListener): void;
+    on(event: 'error', listener: ThemeErrorListener): void;
+    on(event: 'revert', listener: ThemeRevertListener): void;
+    /**
+     * Remove listener
+     */
+    off(event: 'change', listener: ThemeChangeListener): void;
+    off(event: 'load', listener: ThemeLoadListener): void;
+    off(event: 'error', listener: ThemeErrorListener): void;
+    off(event: 'revert', listener: ThemeRevertListener): void;
+    /**
+     * Emit change event
+     */
+    private emitChange;
+    /**
+     * Emit load event
+     */
+    private emitLoad;
+    /**
+     * Emit error event
+     * Emits error to listeners (error emission is controlled at call site)
+     */
+    private emitError;
+    /**
+     * Emit revert event
+     */
+    private emitRevert;
+}
+
+/**
+ * Theme Manager
+ *
+ * Core theme management class for the Atomix Design System.
+ * Rewritten to use the new ThemeEngine architecture.
+ * Handles theme loading, switching, persistence, and events.
+ * Supports both CSS-based themes and JavaScript-based themes.
+ */
+
+/**
+ * ThemeManager class
+ *
+ * Manages theme loading, switching, and persistence for Atomix Design System.
+ * Uses the new ThemeEngine architecture for unified CSS/JS theme support.
+ *
+ * @example
+ * ```typescript
+ * const themeManager = new ThemeManager({
+ *   // No defaultTheme - uses built-in styles
+ * });
+ *
+ * await themeManager.setTheme('my-custom-theme');
+ * ```
+ */
+declare class ThemeManager {
+    private engine;
+    private config;
+    private currentTheme;
+    private activeTheme;
+    private eventListeners;
+    private storageAdapter;
+    private initialized;
+    private rtlManager?;
+    private logger;
+    /**
+     * Create a new ThemeManager instance
+     *
+     * @param config - Theme manager configuration
+     */
+    constructor(config: ThemeManagerConfig);
+    /**
+     * Initialize the theme manager
+     */
+    private initialize;
+    /**
+     * Get default theme
+     */
+    private getDefaultTheme;
+    /**
+     * Set theme
+     */
+    setTheme(theme: string | Theme, options?: ThemeLoadOptions): Promise<void>;
+    /**
+     * Get current theme
+     */
+    getTheme(): string;
+    /**
+     * Get active theme object (for JS themes)
+     */
+    getActiveTheme(): Theme | null;
+    /**
+     * Get available themes
+     */
+    getAvailableThemes(): ThemeMetadata[];
+    /**
+     * Check if theme is loaded
+     */
+    isThemeLoaded(themeName: string): boolean;
+    /**
+     * Preload theme
+     */
+    preloadTheme(themeName: string): Promise<void>;
+    /**
+     * Add event listener
+     */
+    on(event: 'themeChange', callback: ThemeChangeCallback): void;
+    on(event: 'themeLoad', callback: ThemeLoadCallback): void;
+    on(event: 'themeError', callback: ThemeErrorCallback): void;
+    /**
+     * Remove event listener
+     */
+    off(event: 'themeChange', callback: ThemeChangeCallback): void;
+    off(event: 'themeLoad', callback: ThemeLoadCallback): void;
+    off(event: 'themeError', callback: ThemeErrorCallback): void;
+    /**
+     * Emit theme change event
+     */
+    private emitThemeChange;
+    /**
+     * Emit theme load event
+     */
+    private emitThemeLoad;
+    /**
+     * Emit theme error event
+     */
+    private emitThemeError;
+    /**
+     * Get engine instance (for advanced usage)
+     */
+    getEngine(): ThemeEngine;
+    /**
+     * Get RTL manager
+     */
+    getRTLManager(): RTLManager | undefined;
+    /**
+     * Set RTL direction
+     */
+    setDirection(direction: 'ltr' | 'rtl'): void;
+    /**
+     * Get current direction
+     */
+    getDirection(): 'ltr' | 'rtl';
+    /**
+     * Destroy theme manager
+     */
+    destroy(): void;
+}
+
+/**
+ * Theme metadata interface matching themes.config.js structure
+ */
+interface ThemeMetadata {
+    /** Display name of the theme */
+    name: string;
+    /** Unique identifier/class name for the theme */
+    class?: string;
+    /** Theme description */
+    description?: string;
+    /** Theme author */
+    author?: string;
+    /** Theme version (semver) */
+    version?: string;
+    /** Theme tags for categorization */
+    tags?: string[];
+    /** Whether the theme supports dark mode */
+    supportsDarkMode?: boolean;
+    /** Theme status: stable, beta, experimental, deprecated */
+    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
+    /** Accessibility information */
+    a11y?: {
+        /** Target contrast ratio */
+        contrastTarget?: number;
+        /** Supported color modes */
+        modes?: string[];
+    };
+    /** Primary theme color (for UI display) */
+    color?: string;
+    /** Theme features list */
+    features?: string[];
+    /** Theme dependencies (other themes required) */
+    dependencies?: string[];
+}
+/**
+ * Theme manager configuration options
+ */
+interface ThemeManagerConfig {
+    /** Available themes metadata */
+    themes: Record<string, ThemeMetadata>;
+    /** Default theme to use */
+    defaultTheme?: string | Theme;
+    /** Base path for theme CSS files */
+    basePath?: string;
+    /** CDN path for theme CSS files (optional) */
+    cdnPath?: string | null;
+    /** Themes to preload on initialization */
+    preload?: string[];
+    /** Enable lazy loading of themes */
+    lazy?: boolean;
+    /** localStorage key for persistence */
+    storageKey?: string;
+    /** Data attribute name for theme */
+    dataAttribute?: string;
+    /** Enable persistence */
+    enablePersistence?: boolean;
+    /** Custom CSS file extension */
+    cssExtension?: string;
+    /** Use minified CSS files */
+    useMinified?: boolean;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: string | Theme) => void;
+    /** Callback when theme load fails */
+    onError?: (error: Error, themeName: string) => void;
+    /** RTL configuration */
+    rtl?: RTLConfig;
+}
+/**
+ * Theme change event payload
+ */
+interface ThemeChangeEvent {
+    /** Previous theme name */
+    previousTheme: string | null;
+    /** New theme name */
+    currentTheme: string;
+    /** Theme object (for JS themes) */
+    themeObject?: Theme | null;
+    /** Timestamp of the change */
+    timestamp: number;
+    /** Whether the change was from user action or system */
+    source: 'user' | 'system' | 'storage';
+}
+/**
+ * Theme load options
+ */
+interface ThemeLoadOptions {
+    /** Force reload even if already loaded */
+    force?: boolean;
+    /** Preload without applying */
+    preload?: boolean;
+    /** Remove previous theme CSS */
+    removePrevious?: boolean;
+    /** Custom CSS path override */
+    customPath?: string;
+    /** Fallback to default theme on error */
+    fallbackOnError?: boolean;
+}
+/**
+ * Theme validation result
+ */
+interface ThemeValidationResult {
+    /** Whether the theme is valid */
+    valid: boolean;
+    /** Validation errors */
+    errors: string[];
+    /** Validation warnings */
+    warnings: string[];
+}
+/**
+ * Theme change callback function
+ */
+type ThemeChangeCallback = (event: ThemeChangeEvent) => void;
+/**
+ * Theme load callback function
+ */
+type ThemeLoadCallback = (themeName: string) => void;
+/**
+ * Theme error callback function
+ */
+type ThemeErrorCallback = (error: Error, themeName: string) => void;
+/**
+ * React hook return type for useTheme
+ */
+interface UseThemeReturn {
+    /** Current theme name */
+    theme: string;
+    /** Current active theme object (for JS themes) */
+    activeTheme: Theme | null;
+    /** Function to change theme */
+    setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
+    /** Available themes */
+    availableThemes: ThemeMetadata[];
+    /** Whether a theme is currently loading */
+    isLoading: boolean;
+    /** Current error, if any */
+    error: Error | null;
+    /** Whether a specific theme is loaded */
+    isThemeLoaded: (themeName: string) => boolean;
+    /** Preload a theme */
+    preloadTheme: (themeName: string) => Promise<void>;
+}
+/**
+ * Component-level theme override configuration
+ */
+interface ComponentThemeOverride {
+    /** CSS variable overrides for the component */
+    cssVars?: Record<string, string | number>;
+    /** Default prop overrides */
+    defaultProps?: Record<string, any>;
+    /** Part-specific overrides */
+    parts?: Record<string, {
+        cssVars?: Record<string, string | number>;
+        className?: string;
+    }>;
+    /** Variant overrides */
+    variants?: Record<string, {
+        cssVars?: Record<string, string | number>;
+        className?: string;
+    }>;
+    /** Additional className for the component */
+    className?: string;
+}
+/**
+ * Theme component overrides for all components
+ */
+interface ThemeComponentOverrides {
+    Button?: ComponentThemeOverride;
+    Card?: ComponentThemeOverride;
+    Input?: ComponentThemeOverride;
+    Modal?: ComponentThemeOverride;
+    Dropdown?: ComponentThemeOverride;
+    Badge?: ComponentThemeOverride;
+    Tabs?: ComponentThemeOverride;
+    Progress?: ComponentThemeOverride;
+    Tooltip?: ComponentThemeOverride;
+    Select?: ComponentThemeOverride;
+    Checkbox?: ComponentThemeOverride;
+    Radio?: ComponentThemeOverride;
+    Textarea?: ComponentThemeOverride;
+    FormGroup?: ComponentThemeOverride;
+    Navbar?: ComponentThemeOverride;
+    Accordion?: ComponentThemeOverride;
+    DataTable?: ComponentThemeOverride;
+    Avatar?: ComponentThemeOverride;
+    List?: ComponentThemeOverride;
+    Popover?: ComponentThemeOverride;
+    Messages?: ComponentThemeOverride;
+    Callout?: ComponentThemeOverride;
+    Spinner?: ComponentThemeOverride;
+    [key: string]: ComponentThemeOverride | undefined;
+}
+/**
+ * Theme provider props
+ */
+interface ThemeProviderProps {
+    /** Child components */
+    children: React.ReactNode;
+    /** Default theme */
+    defaultTheme?: string | Theme;
+    /** Available themes */
+    themes?: Record<string, ThemeMetadata>;
+    /** Base path for theme CSS */
+    basePath?: string;
+    /** CDN path for theme CSS */
+    cdnPath?: string | null;
+    /** Themes to preload */
+    preload?: string[];
+    /** Enable lazy loading */
+    lazy?: boolean;
+    /** localStorage key */
+    storageKey?: string;
+    /** Data attribute name */
+    dataAttribute?: string;
+    /** Enable persistence */
+    enablePersistence?: boolean;
+    /** Use minified CSS */
+    useMinified?: boolean;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: string | Theme) => void;
+    /** Callback on error */
+    onError?: (error: Error, themeName: string) => void;
+}
+/**
+ * Theme context value
+ */
+interface ThemeContextValue {
+    /** Current theme name */
+    theme: string;
+    /** Current active theme object (for JS themes) */
+    activeTheme: Theme | null;
+    /** Set theme function */
+    setTheme: (theme: string | Theme, options?: ThemeLoadOptions) => Promise<void>;
+    /** Available themes */
+    availableThemes: ThemeMetadata[];
+    /** Loading state */
+    isLoading: boolean;
+    /** Error state */
+    error: Error | null;
+    /** Check if theme is loaded */
+    isThemeLoaded: (themeName: string) => boolean;
+    /** Preload theme */
+    preloadTheme: (themeName: string) => Promise<void>;
+    /** Theme manager instance */
+    themeManager: ThemeManager;
+}
+/**
+ * Color palette configuration for a single color
+ */
+interface PaletteColor {
+    /** Main color value */
+    main: string;
+    /** Light variant (auto-generated if not provided) */
+    light?: string;
+    /** Dark variant (auto-generated if not provided) */
+    dark?: string;
+    /** Contrast text color (auto-generated if not provided) */
+    contrastText?: string;
+}
+/**
+ * Palette configuration options for createTheme
+ */
+interface PaletteOptions {
+    /** Primary color configuration */
+    primary?: Partial<PaletteColor> | string;
+    /** Secondary color configuration */
+    secondary?: Partial<PaletteColor> | string;
+    /** Error color configuration */
+    error?: Partial<PaletteColor> | string;
+    /** Warning color configuration */
+    warning?: Partial<PaletteColor> | string;
+    /** Info color configuration */
+    info?: Partial<PaletteColor> | string;
+    /** Success color configuration */
+    success?: Partial<PaletteColor> | string;
+    /** Background colors */
+    background?: {
+        default?: string;
+        subtle?: string;
+    };
+    /** Text colors */
+    text?: {
+        primary?: string;
+        secondary?: string;
+        disabled?: string;
+    };
+    /** Additional custom colors */
+    [key: string]: any;
+}
+/**
+ * Typography configuration options for createTheme
+ */
+interface TypographyOptions {
+    /** Font family */
+    fontFamily?: string;
+    /** Base font size in pixels */
+    fontSize?: number;
+    /** Font weight scale */
+    fontWeightLight?: number;
+    fontWeightRegular?: number;
+    fontWeightMedium?: number;
+    fontWeightSemiBold?: number;
+    fontWeightBold?: number;
+    /** Heading configurations */
+    h1?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h2?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h3?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h4?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h5?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    h6?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+        letterSpacing?: string;
+    };
+    /** Body text configurations */
+    body1?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+    };
+    body2?: {
+        fontSize?: string | number;
+        fontWeight?: number;
+        lineHeight?: number | string;
+    };
+    /** Additional custom typography */
+    [key: string]: any;
+}
+/**
+ * Spacing function type
+ */
+type SpacingFunction = (...values: number[]) => string;
+/**
+ * Spacing configuration options for createTheme
+ */
+type SpacingOptions = number | number[] | SpacingFunction;
+/**
+ * Breakpoint values configuration
+ */
+interface BreakpointValues {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    [key: string]: number | undefined;
+}
+/**
+ * Breakpoints configuration options for createTheme
+ */
+interface BreakpointsOptions {
+    /** Breakpoint values in pixels */
+    values?: BreakpointValues;
+    /** Unit for breakpoints (default: 'px') */
+    unit?: string;
+}
+/**
+ * Shadow configuration
+ */
+interface ShadowOptions {
+    xs?: string;
+    sm?: string;
+    md?: string;
+    lg?: string;
+    xl?: string;
+    [key: string]: string | undefined;
+}
+/**
+ * Transition configuration
+ */
+interface TransitionOptions {
+    /** Transition duration values */
+    duration?: {
+        shortest?: number;
+        shorter?: number;
+        short?: number;
+        standard?: number;
+        complex?: number;
+        enteringScreen?: number;
+        leavingScreen?: number;
+    };
+    /** Easing functions */
+    easing?: {
+        easeInOut?: string;
+        easeOut?: string;
+        easeIn?: string;
+        sharp?: string;
+    };
+}
+/**
+ * Z-index configuration
+ */
+interface ZIndexOptions {
+    mobileStepper?: number;
+    speedDial?: number;
+    appBar?: number;
+    drawer?: number;
+    modal?: number;
+    snackbar?: number;
+    tooltip?: number;
+    [key: string]: number | undefined;
+}
+/**
+ * Border radius configuration
+ */
+interface BorderRadiusOptions {
+    /** Base border radius */
+    base?: string | number;
+    /** Small border radius */
+    sm?: string | number;
+    /** Medium border radius */
+    md?: string | number;
+    /** Large border radius */
+    lg?: string | number;
+    /** Extra large border radius */
+    xl?: string | number;
+    /** 2X large border radius */
+    xxl?: string | number;
+    /** 3X large border radius */
+    '3xl'?: string | number;
+    /** 4X large border radius */
+    '4xl'?: string | number;
+    /** Pill shape (fully rounded) */
+    pill?: string | number;
+    [key: string]: string | number | undefined;
+}
+/**
+ * Custom theme properties for extension
+ * Users can augment this interface via module augmentation
+ */
+interface ThemeCustomProperties {
+    [key: string]: any;
+}
+/**
+ * Theme configuration options for createTheme
+ * Extends ThemeMetadata to support both CSS and JS theme properties
+ */
+interface ThemeOptions extends Partial<ThemeMetadata> {
+    /** Color palette configuration */
+    palette?: PaletteOptions;
+    /** Typography configuration */
+    typography?: TypographyOptions;
+    /** Spacing configuration */
+    spacing?: SpacingOptions;
+    /** Breakpoints configuration */
+    breakpoints?: BreakpointsOptions;
+    /** Shadow configuration */
+    shadows?: ShadowOptions;
+    /** Transition configuration */
+    transitions?: TransitionOptions;
+    /** Z-index configuration */
+    zIndex?: ZIndexOptions;
+    /** Border radius configuration */
+    borderRadius?: BorderRadiusOptions;
+    /** Custom properties */
+    custom?: ThemeCustomProperties;
+}
+/**
+ * Complete theme object with computed values
+ * Generated by createTheme function
+ */
+interface Theme extends ThemeMetadata {
+    /** Color palette with computed values */
+    palette: {
+        primary: PaletteColor;
+        secondary: PaletteColor;
+        error: PaletteColor;
+        warning: PaletteColor;
+        info: PaletteColor;
+        success: PaletteColor;
+        background: {
+            default: string;
+            paper: string;
+            subtle: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        [key: string]: any;
+    };
+    /** Typography with computed values */
+    typography: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeightLight: number;
+        fontWeightRegular: number;
+        fontWeightMedium: number;
+        fontWeightSemiBold: number;
+        fontWeightBold: number;
+        h1: Required<NonNullable<TypographyOptions['h1']>>;
+        h2: Required<NonNullable<TypographyOptions['h2']>>;
+        h3: Required<NonNullable<TypographyOptions['h3']>>;
+        h4: Required<NonNullable<TypographyOptions['h4']>>;
+        h5: Required<NonNullable<TypographyOptions['h5']>>;
+        h6: Required<NonNullable<TypographyOptions['h6']>>;
+        body1: Required<NonNullable<TypographyOptions['body1']>>;
+        body2: Required<NonNullable<TypographyOptions['body2']>>;
+        [key: string]: any;
+    };
+    /** Spacing function */
+    spacing: SpacingFunction;
+    /** Breakpoints with computed values */
+    breakpoints: {
+        values: Required<BreakpointValues>;
+        unit: string;
+        up: (key: keyof BreakpointValues | number) => string;
+        down: (key: keyof BreakpointValues | number) => string;
+        between: (start: keyof BreakpointValues | number, end: keyof BreakpointValues | number) => string;
+    };
+    /** Shadows */
+    shadows: Required<ShadowOptions>;
+    /** Transitions */
+    transitions: Required<TransitionOptions>;
+    /** Z-index values */
+    zIndex: Required<ZIndexOptions>;
+    /** Border radius values */
+    borderRadius: Required<BorderRadiusOptions>;
+    /** Custom properties */
+    custom: ThemeCustomProperties;
+    /** Global CSS variables to apply */
+    cssVars?: Record<string, string | number>;
+    /** Indicates this is a JS theme (not CSS-only) */
+    __isJSTheme: true;
+}
+
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management
+ * Updated to use the new ThemeEngine architecture
+ */
+
+/**
+ * ThemeProvider component
+ *
+ * Provides theme context to child components and manages theme state.
+ * Uses the new ThemeEngine-based ThemeManager.
+ *
+ * @example
+ * ```tsx
+ * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ *
+ * function App() {
+ *   return (
+ *     <ThemeProvider>
+ *       <YourApp />
+ *     </ThemeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+/**
+ * useTheme Hook
+ *
+ * React hook for accessing theme context
+ * Updated to work with new ThemeEngine architecture
+ */
+
+/**
+ * useTheme hook
+ *
+ * Access theme context and theme management functions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, setTheme, availableThemes } = useTheme();
+ *
+ *   return (
+ *     <div>
+ *       <p>Current theme: {theme}</p>
+ *       <button onClick={() => setTheme('dark-theme')}>
+ *         Switch to Dark
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useTheme(): UseThemeReturn;
+
+/**
+ * Theme context with default values
+ */
+declare const ThemeContext: React$1.Context<ThemeContextValue | null>;
+
+/**
+ * Theme Error Boundary
+ *
+ * React error boundary for catching and handling theme-related errors.
+ * Prevents the entire app from crashing when theme errors occur.
+ */
+
+/**
+ * Error boundary state
+ */
+interface ThemeErrorBoundaryState {
+    /** Whether an error has occurred */
+    hasError: boolean;
+    /** The error that occurred */
+    error: Error | null;
+    /** Error information */
+    errorInfo: ErrorInfo | null;
+}
+/**
+ * Error boundary props
+ */
+interface ThemeErrorBoundaryProps {
+    /** Child components */
+    children: ReactNode;
+    /** Fallback UI to render when error occurs */
+    fallback?: (error: Error, errorInfo: ErrorInfo) => ReactNode;
+    /** Callback when error occurs */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Whether to reset error on children change */
+    resetOnPropsChange?: boolean;
+    /** Custom error message */
+    errorMessage?: string;
+}
+/**
+ * Theme Error Boundary Component
+ *
+ * Catches errors in the theme system and displays a fallback UI
+ * instead of crashing the entire application.
+ */
+declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, ThemeErrorBoundaryState> {
+    private logger;
+    constructor(props: ThemeErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ThemeErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void;
+    render(): ReactNode;
+}
+
+/**
+ * createTheme - Create a theme object with computed values
+ *
+ * Similar to Material-UI's createTheme, this function accepts theme configuration
+ * options and returns a complete theme object with computed values.
+ *
+ * @example
+ * ```typescript
+ * const theme = createTheme({
+ *   palette: {
+ *     primary: { main: '#7AFFD7' },
+ *     secondary: { main: '#FF5733' },
+ *   },
+ *   typography: {
+ *     fontFamily: 'Inter, sans-serif',
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Create a theme object with computed values
+ *
+ * @param options - Theme configuration options
+ * @returns Complete theme object
+ */
+declare function createTheme(...options: ThemeOptions[]): Theme;
+
+/**
+ * Create a theme from Atomix configuration
+ *
+ * This function converts atomix.config.ts format to a theme object
+ * that can be used with ThemeProvider.
+ *
+ * @param config - Atomix configuration object
+ * @returns Theme object ready for use
+ *
+ * @example
+ * ```typescript
+ * import { createThemeFromConfig } from '@shohojdhara/atomix/theme';
+ * import config from './atomix.config';
+ *
+ * const theme = createThemeFromConfig(config);
+ * ```
+ */
+declare function createThemeFromConfig(config: AtomixConfig): Theme;
+
+/**
+ * Theme Tools for Library Users
+ *
+ * Developer-friendly utilities for working with Atomix themes
+ */
+
+/**
+ * Quick theme creator with sensible defaults
+ */
+declare function quickTheme(name: string, primaryColor: string, secondaryColor?: string): Theme;
+/**
+ * Create a dark theme variant from a light theme
+ */
+declare function createDarkVariant(lightTheme: Theme): Theme;
+/**
+ * Validate theme structure
+ */
+declare function validateTheme(theme: Theme): {
+    valid: boolean;
+    errors: string[];
+};
+/**
+ * Generate CSS string from theme
+ */
+declare function themeToCSS(theme: Theme, selector?: string): string;
+/**
+ * Export theme as JSON
+ */
+declare function exportTheme(theme: Theme): string;
+/**
+ * Import theme from JSON
+ */
+declare function importTheme(json: string): Theme;
+
+/**
+ * Theme CLI
+ *
+ * Command-line interface for theme management
+ */
+/**
+ * CLI command interface
+ */
+interface CLICommand {
+    name: string;
+    description: string;
+    options?: Record<string, string>;
+    handler: (args: string[], options: Record<string, any>) => Promise<void> | void;
+}
+/**
+ * Theme CLI
+ *
+ * Command-line interface for theme operations
+ */
+declare class ThemeCLI {
+    private commands;
+    constructor();
+    /**
+     * Register default commands
+     */
+    private registerDefaultCommands;
+    /**
+     * Register a command
+     */
+    register(command: CLICommand): void;
+    /**
+     * Run CLI with arguments
+     */
+    run(args: string[]): Promise<void>;
+    /**
+     * Parse command arguments
+     */
+    private parseArgs;
+    /**
+     * Handle validate command
+     */
+    private handleValidate;
+    /**
+     * Handle list command
+     */
+    private handleList;
+    /**
+     * Handle inspect command
+     */
+    private handleInspect;
+    /**
+     * Handle compare command
+     */
+    private handleCompare;
+    /**
+     * Handle export command
+     */
+    private handleExport;
+    /**
+     * Handle help command
+     */
+    private handleHelp;
+}
+/**
+ * Create CLI instance
+ */
+declare function createCLI(): ThemeCLI;
+/**
+ * Run CLI with process arguments
+ */
+declare function runCLI(): void;
+
+/**
+ * Theme Preview Component
+ *
+ * React component for previewing themes in development
+ */
+
+/**
+ * Theme preview props
+ */
+interface ThemePreviewProps {
+    /** Theme to preview */
+    theme: Theme;
+    /** Show theme details */
+    showDetails?: boolean;
+    /** Show color palette */
+    showPalette?: boolean;
+    /** Show typography */
+    showTypography?: boolean;
+    /** Show spacing */
+    showSpacing?: boolean;
+    /** Custom components to render */
+    children?: React__default.ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Preview Component
+ *
+ * Renders a preview of a theme with sample components
+ */
+declare const ThemePreview: React__default.FC<ThemePreviewProps>;
+
+/**
+ * Theme Inspector Component
+ *
+ * React component for inspecting and debugging themes
+ */
+
+/**
+ * Theme inspector props
+ */
+interface ThemeInspectorProps {
+    /** Theme to inspect */
+    theme: Theme;
+    /** Show validation results */
+    showValidation?: boolean;
+    /** Show CSS variables */
+    showCSSVariables?: boolean;
+    /** Show theme structure */
+    showStructure?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Inspector Component
+ *
+ * Provides detailed inspection and debugging information for themes
+ */
+declare const ThemeInspector: React__default.FC<ThemeInspectorProps>;
+
+/**
+ * Theme Comparator Component
+ *
+ * React component for comparing two themes side-by-side
+ */
+
+/**
+ * Theme comparator props
+ */
+interface ThemeComparatorProps {
+    /** First theme to compare */
+    themeA: Theme;
+    /** Second theme to compare */
+    themeB: Theme;
+    /** Show only differences */
+    showOnlyDifferences?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Comparator Component
+ *
+ * Compares two themes and highlights differences
+ */
+declare const ThemeComparator: React__default.FC<ThemeComparatorProps>;
+
+/**
+ * Theme Live Editor Component
+ *
+ * React component for live editing themes in development
+ */
+
+/**
+ * Live editor props
+ */
+interface ThemeLiveEditorProps {
+    /** Initial theme */
+    initialTheme: Theme;
+    /** Callback when theme changes */
+    onChange?: (theme: Theme) => void;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React__default.CSSProperties;
+}
+/**
+ * Theme Live Editor Component
+ *
+ * Allows live editing of theme properties with instant preview
+ */
+declare const ThemeLiveEditor: React__default.FC<ThemeLiveEditorProps>;
+
+/**
+ * Theme Applicator
+ *
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ */
+
+/**
+ * Theme applicator class for runtime theme application
+ */
+declare class ThemeApplicator {
+    private appliedVars;
+    private root;
+    constructor(root?: HTMLElement);
+    /**
+     * Apply a complete theme configuration
+     */
+    applyTheme(theme: Theme): void;
+    /**
+     * Apply global CSS variables
+     */
+    private applyGlobalCSSVars;
+    /**
+     * Apply typography system
+     */
+    private applyTypography;
+    /**
+     * Apply spacing system
+     */
+    private applySpacing;
+    /**
+     * Apply color palette
+     */
+    private applyPalette;
+    /**
+     * Apply component-level overrides
+     */
+    private applyComponentOverrides;
+    /**
+     * Apply override for a specific component
+     */
+    private applyComponentOverride;
+    /**
+     * Clear all applied CSS variables
+     */
+    private clearAppliedVars;
+    /**
+     * Get all currently applied variables
+     */
+    getAppliedVars(): string[];
+    /**
+     * Remove theme application
+     */
+    removeTheme(): void;
+    /**
+     * Update specific CSS variables without clearing all
+     */
+    updateCSSVars(vars: Record<string, string | number>): void;
+}
+/**
+ * Get or create global theme applicator
+ */
+declare function getThemeApplicator(): ThemeApplicator;
+/**
+ * Apply theme using global applicator
+ */
+declare function applyTheme(theme: Theme): void;
+/**
+ * Remove theme using global applicator
+ */
+declare function removeTheme(): void;
+
+/**
+ * CSS Variable Mapper
+ *
+ * Utilities for generating and managing CSS custom properties from SCSS tokens
+ * and component configurations.
+ */
+/**
+ * Configuration for generating CSS variables for a component
+ */
+interface CSSVariableConfig {
+    /** Component name (e.g., 'button', 'card') */
+    component: string;
+    /** Base properties for the component */
+    properties: Record<string, string | number>;
+    /** Part-specific properties (e.g., icon, label) */
+    parts?: Record<string, Record<string, string | number>>;
+    /** State-specific properties (e.g., hover, active, disabled) */
+    states?: Record<string, Record<string, string | number>>;
+    /** Variant-specific properties (e.g., primary, secondary) */
+    variants?: Record<string, Record<string, string | number>>;
+}
+/**
+ * CSS variable naming options
+ */
+interface CSSVariableNamingOptions {
+    /** Prefix for all variables (default: 'atomix') */
+    prefix?: string;
+    /** Separator between parts (default: '-') */
+    separator?: string;
+    /** Whether to include component name in variable (default: true) */
+    includeComponent?: boolean;
+}
+/**
+ * Generate CSS variable name from parts
+ *
+ * @example
+ * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
+ * // Returns: '--atomix-button-bg'
+ */
+declare function generateCSSVariableName(component: string, property: string, options?: CSSVariableNamingOptions): string;
+/**
+ * Generate CSS variables object from configuration
+ *
+ * @example
+ * const vars = generateComponentCSSVars({
+ *   component: 'button',
+ *   properties: { bg: '#000', color: '#fff' }
+ * })
+ * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
+ */
+declare function generateComponentCSSVars(config: CSSVariableConfig, options?: CSSVariableNamingOptions): Record<string, string>;
+/**
+ * Map SCSS tokens to CSS custom properties
+ *
+ * @example
+ * const tokens = { '$primary-color': '#7AFFD7', '$spacing-md': '16px' }
+ * const vars = mapSCSSTokensToCSSVars(tokens)
+ * // Returns: { '--primary-color': '#7AFFD7', '--spacing-md': '16px' }
+ */
+declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: CSSVariableNamingOptions): Record<string, string>;
+/**
+ * Apply CSS variables to an element
+ *
+ * @param element - Target element (defaults to document.documentElement)
+ * @param vars - CSS variables to apply
+ */
+declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
+/**
+ * Remove CSS variables from an element
+ *
+ * @param varNames - Variable names to remove
+ * @param element - Target element (defaults to document.documentElement)
+ */
+declare function removeCSSVariables(varNames: string[], element?: HTMLElement): void;
+/**
+ * Get CSS variable value from an element
+ *
+ * @param varName - Variable name to get
+ * @param element - Target element (defaults to document.documentElement)
+ * @returns Variable value or null if not found
+ */
+declare function getCSSVariable(varName: string, element?: HTMLElement): string | null;
+/**
+ * Convert CSS variable object to inline style object
+ *
+ * @example
+ * const vars = { '--atomix-button-bg': '#000' }
+ * const style = cssVarsToStyle(vars)
+ * // Returns: { '--atomix-button-bg': '#000' } as React.CSSProperties
+ */
+declare function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties;
+/**
+ * Merge multiple CSS variable objects
+ * Later objects override earlier ones
+ */
+declare function mergeCSSVars(...varObjects: Array<Record<string, string | number> | undefined>): Record<string, string | number>;
+/**
+ * Validate CSS variable name format
+ */
+declare function isValidCSSVariableName(name: string): boolean;
+/**
+ * Extract component name from CSS variable name
+ *
+ * @example
+ * extractComponentName('--atomix-button-bg')
+ * // Returns: 'button'
+ */
+declare function extractComponentName(varName: string, prefix?: string): string | null;
+
+export { RTLManager, ThemeApplicator, ThemeCLI, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemeManager, ThemePreview, ThemeProvider, applyCSSVariables, applyTheme, createCLI, createDarkVariant, createTheme, createThemeFromConfig, cssVarsToStyle, exportTheme, extractComponentName, generateCSSVariableName, generateComponentCSSVars, getCSSVariable, getThemeApplicator, importTheme, isValidCSSVariableName, mapSCSSTokensToCSSVars, mergeCSSVars, quickTheme, removeCSSVariables, removeTheme, runCLI, themeToCSS, useTheme, validateTheme };
+export type { CLICommand, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOverride, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeManagerConfig, ThemeMetadata, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseThemeReturn };