@shohojdhara/atomix 0.5.2 → 0.5.5

package/dist/index.d.ts

@@ -8877,7 +8877,7 @@ type AccordionComponent = React__default.FC<AccordionProps> & {
     Header: typeof AccordionHeader;
     Body: typeof AccordionBody;
 };
-declare const _default: AccordionComponent;
+declare const _default$1: AccordionComponent;
 
 /**
  * Glass effect parameters for responsive breakpoints
@@ -11701,7 +11701,7 @@ declare function createBreakpoints(customBreakpoints: Partial<Record<string, Res
 /**
  * Performance metrics collected by the monitor
  */
-interface PerformanceMetrics {
+interface PerformanceMetrics$1 {
     /** Frames per second (target: 60) */
     fps: number;
     /** Time to render last frame in milliseconds (target: <16ms) */
@@ -11720,7 +11720,7 @@ interface PerformanceMetrics {
 /**
  * Configuration for performance monitor
  */
-interface PerformanceMonitorConfig {
+interface PerformanceMonitorConfig$1 {
     /** Enable/disable monitoring */
     enabled?: boolean;
     /** Target FPS for auto-scaling (default: 60) */
@@ -11743,7 +11743,7 @@ interface PerformanceMonitorConfig {
  */
 interface UsePerformanceMonitorReturn {
     /** Current performance metrics */
-    metrics: PerformanceMetrics;
+    metrics: PerformanceMetrics$1;
     /** Recommended quality level based on performance */
     recommendedQuality: 'low' | 'medium' | 'high';
     /** Whether performance is below target */
@@ -11780,7 +11780,7 @@ interface UsePerformanceMonitorReturn {
  * @param config Monitor configuration
  * @returns Performance metrics and controls
  */
-declare function usePerformanceMonitor(config?: PerformanceMonitorConfig): UsePerformanceMonitorReturn;
+declare function usePerformanceMonitor$1(config?: PerformanceMonitorConfig$1): UsePerformanceMonitorReturn;
 /**
  * Debug Overlay Component (Optional)
  *
@@ -11788,7 +11788,7 @@ declare function usePerformanceMonitor(config?: PerformanceMonitorConfig): UsePe
  * Only rendered when showOverlay is enabled.
  */
 declare function PerformanceOverlay({ metrics }: {
-    metrics: PerformanceMetrics;
+    metrics: PerformanceMetrics$1;
 }): null;
 /**
  * Utility to get quality multipliers for glass parameters
@@ -11909,8 +11909,6 @@ declare const __lib_composables_DeviceDetector: typeof DeviceDetector;
 type __lib_composables_LineChartOptions = LineChartOptions;
 declare const __lib_composables_MOBILE_OPTIMIZED_BREAKPOINTS: typeof MOBILE_OPTIMIZED_BREAKPOINTS;
 declare const __lib_composables_PERFORMANCE_PRESET: typeof PERFORMANCE_PRESET;
-type __lib_composables_PerformanceMetrics = PerformanceMetrics;
-type __lib_composables_PerformanceMonitorConfig = PerformanceMonitorConfig;
 declare const __lib_composables_PerformanceOverlay: typeof PerformanceOverlay;
 type __lib_composables_PieChartOptions = PieChartOptions;
 type __lib_composables_PieSlice = PieSlice;
@@ -11943,7 +11941,6 @@ declare const __lib_composables_useNav: typeof useNav;
 declare const __lib_composables_useNavDropdown: typeof useNavDropdown;
 declare const __lib_composables_useNavItem: typeof useNavItem;
 declare const __lib_composables_useNavbar: typeof useNavbar;
-declare const __lib_composables_usePerformanceMonitor: typeof usePerformanceMonitor;
 declare const __lib_composables_usePieChart: typeof usePieChart;
 declare const __lib_composables_useRadio: typeof useRadio;
 declare const __lib_composables_useResponsiveGlass: typeof useResponsiveGlass;
@@ -11955,8 +11952,8 @@ declare const __lib_composables_useSpinner: typeof useSpinner;
 declare const __lib_composables_useTextarea: typeof useTextarea;
 declare const __lib_composables_useTodo: typeof useTodo;
 declare namespace __lib_composables {
-  export { __lib_composables_BALANCED_PRESET as BALANCED_PRESET, __lib_composables_DEFAULT_BREAKPOINTS as DEFAULT_BREAKPOINTS, __lib_composables_DeviceDetector as DeviceDetector, __lib_composables_MOBILE_OPTIMIZED_BREAKPOINTS as MOBILE_OPTIMIZED_BREAKPOINTS, __lib_composables_PERFORMANCE_PRESET as PERFORMANCE_PRESET, __lib_composables_PerformanceOverlay as PerformanceOverlay, __lib_composables_QUALITY_PRESET as QUALITY_PRESET, __lib_composables_createBreakpoints as createBreakpoints, __lib_composables_getDefaultBreakpoints as getDefaultBreakpoints, __lib_composables_getDevicePreset as getDevicePreset, __lib_composables_getMobileOptimizedParams as getMobileOptimizedParams, __lib_composables_getQualityMultipliers as getQualityMultipliers, __lib_composables_useAccordion as useAccordion, __lib_composables_useAtomixGlass as useAtomixGlass, __lib_composables_useBadge as useBadge, __lib_composables_useBarChart as useBarChart, __lib_composables_useBlock as useBlock, __lib_composables_useChartData as useChartData, __lib_composables_useChartInteraction as useChartInteraction, __lib_composables_useChartScale as useChartScale, __lib_composables_useEdgePanel as useEdgePanel, __lib_composables_useForm as useForm, __lib_composables_useFormGroup as useFormGroup, __lib_composables_useHero as useHero, __lib_composables_useInput as useInput, __lib_composables_useLineChart as useLineChart, __lib_composables_useNav as useNav, __lib_composables_useNavDropdown as useNavDropdown, __lib_composables_useNavItem as useNavItem, __lib_composables_useNavbar as useNavbar, __lib_composables_usePerformanceMonitor as usePerformanceMonitor, __lib_composables_usePieChart as usePieChart, __lib_composables_useRadio as useRadio, __lib_composables_useResponsiveGlass as useResponsiveGlass, __lib_composables_useRiver as useRiver, __lib_composables_useSelect as useSelect, __lib_composables_useSideMenu as useSideMenu, __lib_composables_useSideMenuItem as useSideMenuItem, __lib_composables_useSpinner as useSpinner, __lib_composables_useTextarea as useTextarea, __lib_composables_useTodo as useTodo };
-  export type { __lib_composables_BarChartOptions as BarChartOptions, __lib_composables_BarDimensions as BarDimensions, __lib_composables_LineChartOptions as LineChartOptions, __lib_composables_PerformanceMetrics as PerformanceMetrics, __lib_composables_PerformanceMonitorConfig as PerformanceMonitorConfig, __lib_composables_PieChartOptions as PieChartOptions, __lib_composables_PieSlice as PieSlice, __lib_composables_RiverContentColumn as RiverContentColumn, __lib_composables_RiverProps as RiverProps, __lib_composables_UseBlockOptions as UseBlockOptions, __lib_composables_UseBlockReturn as UseBlockReturn, __lib_composables_UsePerformanceMonitorReturn as UsePerformanceMonitorReturn };
+  export { __lib_composables_BALANCED_PRESET as BALANCED_PRESET, __lib_composables_DEFAULT_BREAKPOINTS as DEFAULT_BREAKPOINTS, __lib_composables_DeviceDetector as DeviceDetector, __lib_composables_MOBILE_OPTIMIZED_BREAKPOINTS as MOBILE_OPTIMIZED_BREAKPOINTS, __lib_composables_PERFORMANCE_PRESET as PERFORMANCE_PRESET, __lib_composables_PerformanceOverlay as PerformanceOverlay, __lib_composables_QUALITY_PRESET as QUALITY_PRESET, __lib_composables_createBreakpoints as createBreakpoints, __lib_composables_getDefaultBreakpoints as getDefaultBreakpoints, __lib_composables_getDevicePreset as getDevicePreset, __lib_composables_getMobileOptimizedParams as getMobileOptimizedParams, __lib_composables_getQualityMultipliers as getQualityMultipliers, __lib_composables_useAccordion as useAccordion, __lib_composables_useAtomixGlass as useAtomixGlass, __lib_composables_useBadge as useBadge, __lib_composables_useBarChart as useBarChart, __lib_composables_useBlock as useBlock, __lib_composables_useChartData as useChartData, __lib_composables_useChartInteraction as useChartInteraction, __lib_composables_useChartScale as useChartScale, __lib_composables_useEdgePanel as useEdgePanel, __lib_composables_useForm as useForm, __lib_composables_useFormGroup as useFormGroup, __lib_composables_useHero as useHero, __lib_composables_useInput as useInput, __lib_composables_useLineChart as useLineChart, __lib_composables_useNav as useNav, __lib_composables_useNavDropdown as useNavDropdown, __lib_composables_useNavItem as useNavItem, __lib_composables_useNavbar as useNavbar, usePerformanceMonitor$1 as usePerformanceMonitor, __lib_composables_usePieChart as usePieChart, __lib_composables_useRadio as useRadio, __lib_composables_useResponsiveGlass as useResponsiveGlass, __lib_composables_useRiver as useRiver, __lib_composables_useSelect as useSelect, __lib_composables_useSideMenu as useSideMenu, __lib_composables_useSideMenuItem as useSideMenuItem, __lib_composables_useSpinner as useSpinner, __lib_composables_useTextarea as useTextarea, __lib_composables_useTodo as useTodo };
+  export type { __lib_composables_BarChartOptions as BarChartOptions, __lib_composables_BarDimensions as BarDimensions, __lib_composables_LineChartOptions as LineChartOptions, PerformanceMetrics$1 as PerformanceMetrics, PerformanceMonitorConfig$1 as PerformanceMonitorConfig, __lib_composables_PieChartOptions as PieChartOptions, __lib_composables_PieSlice as PieSlice, __lib_composables_RiverContentColumn as RiverContentColumn, __lib_composables_RiverProps as RiverProps, __lib_composables_UseBlockOptions as UseBlockOptions, __lib_composables_UseBlockReturn as UseBlockReturn, __lib_composables_UsePerformanceMonitorReturn as UsePerformanceMonitorReturn };
 }
 
 interface AtomixLogoProps extends React__default.SVGProps<SVGSVGElement> {
@@ -13195,6 +13192,47 @@ interface DesignTokens {
     'breakpoint-lg': string;
     'breakpoint-xl': string;
     'breakpoint-xxl': string;
+    'interactive-vortex-enabled': string;
+    'interactive-vortex-strength': string;
+    'interactive-vortex-radius': string;
+    'interactive-vortex-decay': string;
+    'interactive-chromatic-enabled': string;
+    'interactive-chromatic-mode': string;
+    'interactive-chromatic-red-shift': string;
+    'interactive-chromatic-green-shift': string;
+    'interactive-chromatic-blue-shift': string;
+    'interactive-chromatic-edge-only': string;
+    'interactive-chromatic-edge-threshold': string;
+    'interactive-mouse-sensitivity': string;
+    'interactive-mouse-trail-effect': string;
+    'interactive-animation-speed-base': string;
+    'interactive-animation-speed-multiplier': string;
+    'optimization-breakpoint-mobile': string;
+    'optimization-breakpoint-tablet': string;
+    'optimization-breakpoint-desktop': string;
+    'optimization-breakpoint-wide': string;
+    'optimization-device-scaling-mobile': string;
+    'optimization-device-scaling-tablet': string;
+    'optimization-device-scaling-desktop': string;
+    'optimization-performance-fps-target': string;
+    'optimization-auto-scaling-enabled': string;
+    'optimization-auto-scaling-low-end': string;
+    'optimization-auto-scaling-mid-range': string;
+    'optimization-auto-scaling-high-end': string;
+    'visual-polish-border-iridescent-glow': string;
+    'visual-polish-border-shimmer-effect': string;
+    'visual-polish-border-beveled-edges': string;
+    'visual-polish-border-pulsing-glow': string;
+    'visual-polish-content-aware-blur-enabled': string;
+    'visual-polish-content-aware-depth-detection': string;
+    'visual-polish-content-aware-edge-preservation': string;
+    'visual-polish-content-aware-variable-radius': string;
+    'visual-polish-holographic-enabled': string;
+    'visual-polish-holographic-rainbow-diffraction': string;
+    'visual-polish-holographic-scanline-animation': string;
+    'visual-polish-holographic-grid-overlay': string;
+    'visual-polish-holographic-data-stream': string;
+    'visual-polish-holographic-pulse-rings': string;
     [key: string]: string | undefined;
 }
 /**
@@ -13219,203 +13257,6 @@ declare const defaultTokens: DesignTokens;
  */
 declare function createTokens(overrides?: Partial<DesignTokens>): DesignTokens;
 
-/**
- * CSS Variable Generator
- *
- * Generates CSS custom properties from design tokens.
- */
-
-/**
- * Options for CSS variable generation
- */
-interface GenerateCSSVariablesOptions {
-    /** CSS selector for the variables (default: ':root') */
-    selector?: string;
-    /** Prefix for CSS variables (default: 'atomix') */
-    prefix?: string;
-}
-/**
- * Generate CSS variables from tokens
- *
- * Converts flat token object to CSS custom properties.
- *
- * @param tokens - Design tokens object
- * @param options - Generation options
- * @returns CSS string with custom properties
- *
- * @example
- * ```typescript
- * const tokens = {
- *   'primary': '#7c3aed',
- *   'spacing-4': '1rem',
- * };
- *
- * const css = generateCSSVariables(tokens);
- * // Returns: ":root {\n  --atomix-primary: #7c3aed;\n  --atomix-spacing-4: 1rem;\n}"
- * ```
- */
-declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
-/**
- * Generate CSS variables with custom selector
- *
- * Useful for theme-specific selectors like `[data-theme="dark"]`
- *
- * @param tokens - Design tokens object
- * @param selector - CSS selector (e.g., '[data-theme="dark"]')
- * @param prefix - CSS variable prefix
- * @returns CSS string
- *
- * @example
- * ```typescript
- * const css = generateCSSVariablesForSelector(
- *   tokens,
- *   '[data-theme="dark"]',
- *   'atomix'
- * );
- * ```
- */
-declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
-
-/**
- * Core Theme Functions
- *
- * Simplified theme system using DesignTokens only.
- * Config-first approach: loads from atomix.config.ts when no input is provided.
- */
-
-/**
- * Create theme CSS from DesignTokens
- *
- * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
- *
- * @param input - DesignTokens (partial) or undefined (loads from config)
- * @param options - CSS generation options (prefix is automatically read from config if not provided)
- * @returns CSS string with custom properties
- * @throws Error if config loading fails when no input is provided
- *
- * @example
- * ```typescript
- * // Loads from atomix.config.ts
- * const css = createTheme();
- *
- * // Using DesignTokens
- * const css = createTheme({
- *   'primary': '#7c3aed',
- *   'spacing-4': '1rem',
- * });
- *
- * // With custom options
- * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
- * ```
- */
-declare function createTheme(input?: Partial<DesignTokens>, options?: GenerateCSSVariablesOptions): string;
-
-/**
- * Theme Composition Utilities
- *
- * Simplified utilities for composing and merging DesignTokens.
- */
-/**
- * Deep merge multiple objects
- * Later objects override earlier ones
- */
-declare function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T;
-
-/**
- * Merge multiple DesignTokens objects into a single DesignTokens object
- *
- * @param tokens - DesignTokens objects to merge
- * @returns Merged DesignTokens object
- *
- * @example
- * ```typescript
- * const baseTokens = { 'primary': '#000', 'spacing-4': '1rem' };
- * const customTokens = { 'secondary': '#fff', 'spacing-4': '1.5rem' };
- * const merged = mergeTheme(baseTokens, customTokens);
- * // Returns: { 'primary': '#000', 'secondary': '#fff', 'spacing-4': '1.5rem' }
- * ```
- */
-declare function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTokens>;
-/**
- * Extend DesignTokens with additional tokens
- *
- * @param baseTokens - Base DesignTokens to extend
- * @param extension - Additional DesignTokens to merge
- * @returns Extended DesignTokens object
- *
- * @example
- * ```typescript
- * const base = { 'primary': '#000' };
- * const extended = extendTheme(base, { 'secondary': '#fff' });
- * // Returns: { 'primary': '#000', 'secondary': '#fff' }
- * ```
- */
-declare function extendTheme(baseTokens: Partial<DesignTokens>, extension: Partial<DesignTokens>): Partial<DesignTokens>;
-
-/**
- * Theme Metadata interface
- */
-interface ThemeMetadata$1 {
-    name: string;
-    class: string;
-    description?: string;
-    version?: string;
-    [key: string]: any;
-}
-/**
- * Theme Registry type - a record of theme IDs to metadata
- */
-type ThemeRegistry = Record<string, ThemeMetadata$1>;
-/**
- * Create a new theme registry
- */
-declare function createThemeRegistry(): ThemeRegistry;
-/**
- * Register a theme
- * @param registry - Theme registry object
- * @param id - Theme identifier
- * @param metadata - Theme metadata
- */
-declare function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata$1): void;
-/**
- * Unregister a theme
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */
-declare function unregisterTheme(registry: ThemeRegistry, id: string): boolean;
-/**
- * Check if a theme is registered
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */
-declare function hasTheme(registry: ThemeRegistry, id: string): boolean;
-/**
- * Get theme metadata
- * @param registry - Theme registry object
- * @param id - Theme identifier
- */
-declare function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata$1 | undefined;
-/**
- * Get all registered theme metadata
- * @param registry - Theme registry object
- */
-declare function getAllThemes(registry: ThemeRegistry): ThemeMetadata$1[];
-/**
- * Get all registered theme IDs
- * @param registry - Theme registry object
- */
-declare function getThemeIds(registry: ThemeRegistry): string[];
-/**
- * Clear all registered themes
- * @param registry - Theme registry object
- */
-declare function clearThemes(registry: ThemeRegistry): void;
-/**
- * Get the number of registered themes
- * @param registry - Theme registry object
- */
-declare function getThemeCount(registry: ThemeRegistry): number;
-
 /**
  * Theme Manager Type Definitions
  *
@@ -13424,7 +13265,7 @@ declare function getThemeCount(registry: ThemeRegistry): number;
 /**
  * Theme metadata interface matching themes.config.js structure
  */
-interface ThemeMetadata {
+interface ThemeMetadata$1 {
     /** Display name of the theme */
     name: string;
     /** Unique identifier/class name for the theme */
@@ -13506,8 +13347,10 @@ interface UseThemeReturn {
     activeTokens: DesignTokens | null;
     /** Function to change theme (supports string or DesignTokens) */
     setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Update a specific theme section */
+    updateTheme: (section: ThemeSection, values: any) => Promise<void>;
     /** Available themes */
-    availableThemes: ThemeMetadata[];
+    availableThemes: ThemeMetadata$1[];
     /** Whether a theme is currently loading */
     isLoading: boolean;
     /** Current error, if any */
@@ -13576,7 +13419,7 @@ interface ThemeProviderProps {
     /** Default theme (string name or DesignTokens) */
     defaultTheme?: string | DesignTokens | Partial<DesignTokens>;
     /** Available themes */
-    themes?: Record<string, ThemeMetadata>;
+    themes?: Record<string, ThemeMetadata$1>;
     /** Base path for theme CSS */
     basePath?: string;
     /** CDN path for theme CSS */
@@ -13598,6 +13441,10 @@ interface ThemeProviderProps {
     /** Callback on error */
     onError?: (error: Error, themeName: string) => void;
 }
+/**
+ * Theme section name
+ */
+type ThemeSection = keyof DesignTokens;
 /**
  * Theme context value
  */
@@ -13608,8 +13455,10 @@ interface ThemeContextValue {
     activeTokens: DesignTokens | null;
     /** Set theme function (supports string or DesignTokens) */
     setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Update a specific theme section */
+    updateTheme: (section: ThemeSection, values: any) => Promise<void>;
     /** Available themes */
-    availableThemes: ThemeMetadata[];
+    availableThemes: ThemeMetadata$1[];
     /** Loading state */
     isLoading: boolean;
     /** Error state */
@@ -13701,6 +13550,10 @@ interface TypographyOptions {
  * Spacing function type
  */
 type SpacingFunction = (...values: number[]) => string;
+/**
+ * Spacing configuration options for createTheme
+ */
+type SpacingOptions = number | number[] | SpacingFunction;
 /**
  * Breakpoint values configuration
  */
@@ -13787,13 +13640,87 @@ interface BorderRadiusOptions {
  * Users can augment this interface via module augmentation
  */
 interface ThemeCustomProperties {
+    interactiveEffects?: {
+        vortex?: {
+            enabled?: boolean;
+            strength?: number;
+            radius?: number;
+            decay?: number;
+        };
+        chromaticAberration?: {
+            enabled?: boolean;
+            mode?: 'longitudinal' | 'lateral' | 'hybrid';
+            redShift?: number;
+            greenShift?: number;
+            blueShift?: number;
+            edgeOnly?: boolean;
+            edgeThreshold?: number;
+        };
+        mouseInteraction?: {
+            sensitivity?: number;
+            trailEffect?: boolean;
+        };
+        animationSpeed?: {
+            base?: number;
+            timeMultiplier?: number;
+        };
+    };
+    optimization?: {
+        responsive?: {
+            breakpoints?: {
+                mobile?: string;
+                tablet?: string;
+                desktop?: string;
+                wide?: string;
+            };
+            deviceScaling?: {
+                mobile?: number;
+                tablet?: number;
+                desktop?: number;
+            };
+        };
+        performance?: {
+            fpsTarget?: number;
+            autoScaling?: boolean;
+        };
+        autoScaling?: {
+            enabled?: boolean;
+            qualityThresholds?: {
+                lowEnd?: number;
+                midRange?: number;
+                highEnd?: number;
+            };
+        };
+    };
+    visualPolish?: {
+        borders?: {
+            iridescentGlow?: boolean;
+            shimmerEffect?: boolean;
+            beveledEdges?: boolean;
+            pulsingGlow?: boolean;
+        };
+        contentAwareBlur?: {
+            enabled?: boolean;
+            depthDetection?: boolean;
+            edgePreservation?: boolean;
+            variableRadius?: boolean;
+        };
+        holographicEffects?: {
+            enabled?: boolean;
+            rainbowDiffraction?: boolean;
+            scanlineAnimation?: boolean;
+            gridOverlay?: boolean;
+            dataStream?: boolean;
+            pulseRings?: boolean;
+        };
+    };
     [key: string]: any;
 }
 /**
  * Complete theme object with computed values
  * Generated by createTheme function
  */
-interface Theme extends ThemeMetadata {
+interface Theme extends ThemeMetadata$1 {
     /** Color palette with computed values */
     palette: {
         primary: PaletteColor;
@@ -13860,67 +13787,207 @@ interface Theme extends ThemeMetadata {
 }
 
 /**
- * Naming Utilities
+ * CSS Variable Generator
  *
- * Provides consistent naming conventions across the theme system
+ * Generates CSS custom properties from design tokens.
  */
-interface NamingOptions {
-    prefix?: string;
-    component?: string;
-    variant?: string;
-    state?: string;
-}
+
 /**
- * Generate consistent CSS class names following BEM methodology
+ * Options for CSS variable generation
  */
-declare function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): string;
+interface GenerateCSSVariablesOptions {
+    /** CSS selector for the variables (default: ':root') */
+    selector?: string;
+    /** Prefix for CSS variables (default: 'atomix') */
+    prefix?: string;
+}
 /**
- * Generate consistent CSS variable names
+ * Generate CSS variables from tokens
+ *
+ * Converts flat token object to CSS custom properties.
+ *
+ * @param tokens - Design tokens object
+ * @param options - Generation options
+ * @returns CSS string with custom properties
+ *
+ * @example
+ * ```typescript
+ * const tokens = {
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * };
+ *
+ * const css = generateCSSVariables(tokens);
+ * // Returns: ":root {\n  --atomix-primary: #7c3aed;\n  --atomix-spacing-4: 1rem;\n}"
+ * ```
  */
-declare function generateCSSVariableName(property: string, options?: NamingOptions): string;
+declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
 /**
- * Normalize theme tokens to consistent naming convention
+ * Generate CSS variables with custom selector
+ *
+ * Useful for theme-specific selectors like `[data-theme="dark"]`
+ *
+ * @param tokens - Design tokens object
+ * @param selector - CSS selector (e.g., '[data-theme="dark"]')
+ * @param prefix - CSS variable prefix
+ * @returns CSS string
+ *
+ * @example
+ * ```typescript
+ * const css = generateCSSVariablesForSelector(
+ *   tokens,
+ *   '[data-theme="dark"]',
+ *   'atomix'
+ * );
+ * ```
  */
-declare function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any>;
+declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
+
 /**
- * Convert camelCase to kebab-case for CSS custom properties
+ * Core Theme Functions
+ *
+ * Unified theme system that handles both DesignTokens and Theme objects.
+ * Config-first approach: loads from atomix.config.ts when no input is provided.
+ * Config-first approach: loads advanced features from config when available.
  */
-declare function camelToKebab(str: string): string;
+
 /**
- * Convert theme property to CSS variable name
+ * Create theme CSS from tokens or Theme object
+ *
+ * **Config-First Approach**: If no input is provided, loads from `atomix.config.ts`.
+ * Config file is required for automatic loading.
+ *
+ * @param input - DesignTokens (partial), Theme object, or undefined (loads from config)
+ * @param options - CSS generation options (prefix is automatically read from config if not provided)
+ * @returns CSS string with custom properties
+ * @throws Error if config loading fails when no input is provided
+ *
+ * @example
+ * ```typescript
+ * // Loads from atomix.config.ts (config file required)
+ * const css = createTheme();
+ *
+ * // Using DesignTokens
+ * const css = createTheme({
+ *   'primary': '#7c3aed',
+ *   'spacing-4': '1rem',
+ * });
+ *
+ * // Using Theme object
+ * const theme = createThemeObject({ palette: { primary: { main: '#7c3aed' } } });
+ * const css = createTheme(theme);
+ *
+ * // With custom options
+ * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
+ * ```
  */
-declare function themePropertyToCSSVar(propertyPath: string, prefix?: string): string;
+declare function createTheme(input?: Partial<DesignTokens> | Theme, options?: GenerateCSSVariablesOptions): string;
 
 /**
- * Component Theming Utilities
+ * Theme Composition Utilities
  *
- * Provides consistent patterns for applying theme values to components
- * using DesignTokens and CSS variables
+ * Simplified utilities for composing and merging DesignTokens.
+ */
+/**
+ * Deep merge multiple objects
+ * Later objects override earlier ones
  */
+declare function deepMerge<T extends Record<string, unknown>>(...objects: Partial<T>[]): T;
 
-interface ComponentThemeOptions {
-    component: string;
-    variant?: string;
-    size?: string;
-    tokens?: Partial<DesignTokens>;
+/**
+ * Merge multiple DesignTokens objects into a single DesignTokens object
+ *
+ * @param tokens - DesignTokens objects to merge
+ * @returns Merged DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const baseTokens = { 'primary': '#000', 'spacing-4': '1rem' };
+ * const customTokens = { 'secondary': '#fff', 'spacing-4': '1.5rem' };
+ * const merged = mergeTheme(baseTokens, customTokens);
+ * // Returns: { 'primary': '#000', 'secondary': '#fff', 'spacing-4': '1.5rem' }
+ * ```
+ */
+declare function mergeTheme(...tokens: Partial<DesignTokens>[]): Partial<DesignTokens>;
+/**
+ * Extend DesignTokens with additional tokens
+ *
+ * @param baseTokens - Base DesignTokens to extend
+ * @param extension - Additional DesignTokens to merge
+ * @returns Extended DesignTokens object
+ *
+ * @example
+ * ```typescript
+ * const base = { 'primary': '#000' };
+ * const extended = extendTheme(base, { 'secondary': '#fff' });
+ * // Returns: { 'primary': '#000', 'secondary': '#fff' }
+ * ```
+ */
+declare function extendTheme(baseTokens: Partial<DesignTokens>, extension: Partial<DesignTokens>): Partial<DesignTokens>;
+
+/**
+ * Theme Metadata interface
+ */
+interface ThemeMetadata {
+    name: string;
+    class: string;
+    description?: string;
+    version?: string;
+    [key: string]: any;
 }
 /**
- * Get a theme value for a specific component using CSS variables
- * This ensures all components access theme values consistently
+ * Theme Registry type - a record of theme IDs to metadata
  */
-declare function getComponentThemeValue(component: string, property: string, variant?: string, size?: string): string;
+type ThemeRegistry = Record<string, ThemeMetadata>;
 /**
- * Generate component-specific CSS variables from DesignTokens
+ * Create a new theme registry
  */
-declare function generateComponentCSSVars(component: string, tokens?: Partial<DesignTokens>, variant?: string, size?: string): Record<string, string>;
+declare function createThemeRegistry(): ThemeRegistry;
 /**
- * Apply consistent theme to component style object using DesignTokens
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
  */
-declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, tokens?: Partial<DesignTokens>): React.CSSProperties;
+declare function registerTheme(registry: ThemeRegistry, id: string, metadata: ThemeMetadata): void;
 /**
- * Create a hook for consistent component theming
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
  */
-declare function useComponentTheme(component: string, variant?: string, size?: string, tokens?: Partial<DesignTokens>): (property: string) => string;
+declare function unregisterTheme(registry: ThemeRegistry, id: string): boolean;
+/**
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function hasTheme(registry: ThemeRegistry, id: string): boolean;
+/**
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */
+declare function getTheme(registry: ThemeRegistry, id: string): ThemeMetadata | undefined;
+/**
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */
+declare function getAllThemes(registry: ThemeRegistry): ThemeMetadata[];
+/**
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */
+declare function getThemeIds(registry: ThemeRegistry): string[];
+/**
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */
+declare function clearThemes(registry: ThemeRegistry): void;
+/**
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */
+declare function getThemeCount(registry: ThemeRegistry): number;
 
 /**
  * CSS Injection Utilities
@@ -13969,61 +14036,408 @@ declare function removeCSS(id?: string): void;
 declare function isCSSInjected(id?: string): boolean;
 
 /**
- * Theme Provider
+ * Naming Utilities
  *
- * React context provider for theme management with separated concerns
- * Updated to use the new simplified theme system
+ * Provides consistent naming conventions across the theme system
+ */
+interface NamingOptions {
+    prefix?: string;
+    component?: string;
+    variant?: string;
+    state?: string;
+}
+/**
+ * Generate consistent CSS class names following BEM methodology
+ */
+declare function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): string;
+/**
+ * Generate consistent CSS variable names
+ */
+declare function generateCSSVariableName(property: string, options?: NamingOptions): string;
+/**
+ * Normalize theme tokens to consistent naming convention
  */
+declare function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any>;
+/**
+ * Convert camelCase to kebab-case for CSS custom properties
+ */
+declare function camelToKebab(str: string): string;
+/**
+ * Convert theme property to CSS variable name
+ */
+declare function themePropertyToCSSVar(propertyPath: string, prefix?: string): string;
 
 /**
- * Theme Provider
- *
- * React context provider for theme management with separated concerns.
- * Simplified version focusing on core functionality:
- * - String-based themes (CSS files)
- * - DesignTokens (dynamic themes)
- * - Persistence via localStorage
+ * Component Theming Utilities
  *
- * Falls back to 'default' theme if no configuration is found.
+ * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
-declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
+interface ComponentThemeOptions {
+    component: string;
+    variant?: string;
+    size?: string;
+    tokens?: Partial<DesignTokens>;
+}
 /**
- * useTheme Hook
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */
+declare function getComponentThemeValue(component: string, property: string, variant?: string, size?: string): string;
+/**
+ * Generate component-specific CSS variables from DesignTokens
+ */
+declare function generateComponentCSSVars(component: string, tokens?: Partial<DesignTokens>, variant?: string, size?: string): Record<string, string>;
+/**
+ * Apply consistent theme to component style object using DesignTokens
+ */
+declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, tokens?: Partial<DesignTokens>): React.CSSProperties;
+/**
+ * Create a hook for consistent component theming
+ */
+declare function useComponentTheme(component: string, variant?: string, size?: string, tokens?: Partial<DesignTokens>): (property: string) => string;
+
+/**
+ * Theme Utilities
  *
- * React hook for accessing theme context
+ * Helper functions for common theme operations including:
+ * - Theme switching (dark/light mode)
+ * - Theme persistence (localStorage)
+ * - System preference detection
+ * - Smooth transitions
+ * - Color manipulation
  */
 
+type ThemeMode = 'light' | 'dark' | 'system';
+interface ThemeSwitcherOptions {
+    /** CSS selector for root element (default: ':root') */
+    selector?: string;
+    /** Storage key for theme persistence (default: 'atomix-theme') */
+    storageKey?: string;
+    /** Enable smooth transitions (default: true) */
+    enableTransition?: boolean;
+    /** Transition duration in ms (default: 300) */
+    transitionDuration?: number;
+}
+interface ThemePersistenceOptions {
+    /** Storage key (default: 'atomix-theme') */
+    storageKey?: string;
+    /** Storage type (default: 'localStorage') */
+    storageType?: 'localStorage' | 'sessionStorage';
+}
 /**
- * useTheme hook
+ * Switch between light and dark themes
  *
- * Access theme context and theme management functions
+ * Automatically toggles a class on the root element and persists the choice.
+ *
+ * @param mode - Theme mode ('light', 'dark', or 'system')
+ * @param options - Configuration options
  *
  * @example
- * ```tsx
- * function MyComponent() {
- *   const { theme, setTheme, availableThemes } = useTheme();
+ * ```typescript
+ * import { switchTheme } from '@shohojdhara/atomix/theme/utils';
  *
- *   return (
- *     <div>
- *       <p>Current theme: {theme}</p>
- *       <button onClick={() => setTheme('dark-theme')}>
- *         Switch to Dark
- *       </button>
- *     </div>
- *   );
- * }
+ * // Switch to dark mode
+ * switchTheme('dark');
+ *
+ * // Toggle between light/dark
+ * const current = getCurrentTheme();
+ * switchTheme(current === 'dark' ? 'light' : 'dark');
  * ```
  */
-declare function useTheme(): UseThemeReturn;
-
+declare function switchTheme(mode: ThemeMode, options?: ThemeSwitcherOptions): void;
 /**
- * Standardized hook for accessing theme tokens in components
+ * Toggle between light and dark themes
  *
- * Provides consistent access to theme values using CSS custom properties
- * and DesignTokens.
+ * @param options - Configuration options
+ * @returns The new theme mode
+ *
+ * @example
+ * ```typescript
+ * const newMode = toggleTheme();
+ * console.log('Switched to:', newMode);
+ * ```
  */
-type ThemeTokens$1 = {
+declare function toggleTheme(options?: ThemeSwitcherOptions): ThemeMode;
+/**
+ * Get current theme mode
+ *
+ * @param storageKey - Storage key (default: 'atomix-theme')
+ * @returns Current theme mode or 'light' if not set
+ */
+declare function getCurrentTheme(storageKey?: string): ThemeMode;
+/**
+ * Get system theme preference
+ *
+ * @returns 'dark' if system prefers dark mode, 'light' otherwise
+ */
+declare function getSystemTheme(): ThemeMode;
+/**
+ * Initialize theme based on saved preference or system preference
+ *
+ * Call this once at app startup.
+ *
+ * @param options - Configuration options
+ * @returns The initialized theme mode
+ *
+ * @example
+ * ```typescript
+ * // In your app entry point
+ * import { initializeTheme } from '@shohojdhara/atomix/theme/utils';
+ *
+ * const theme = initializeTheme();
+ * console.log('Theme initialized:', theme);
+ * ```
+ */
+declare function initializeTheme(options?: ThemeSwitcherOptions): ThemeMode;
+/**
+ * Listen for system theme changes
+ *
+ * @param callback - Function to call when system theme changes
+ * @returns Cleanup function to stop listening
+ *
+ * @example
+ * ```typescript
+ * const cleanup = listenToSystemTheme((mode) => {
+ *   console.log('System theme changed to:', mode);
+ *   switchTheme(mode);
+ * });
+ *
+ * // Later, when component unmounts
+ * cleanup();
+ * ```
+ */
+declare function listenToSystemTheme(callback: (mode: ThemeMode) => void): () => void;
+/**
+ * Save theme preference to storage
+ *
+ * @param mode - Theme mode to save
+ * @param options - Persistence options
+ */
+declare function persistTheme(mode: ThemeMode, options?: ThemePersistenceOptions): void;
+/**
+ * Clear saved theme preference
+ *
+ * @param options - Persistence options
+ */
+declare function clearThemePreference(options?: ThemePersistenceOptions): void;
+/**
+ * Merge multiple token sets
+ *
+ * Deep merges token objects, with later tokens overriding earlier ones.
+ *
+ * @param tokens - Token objects to merge
+ * @returns Merged tokens
+ *
+ * @example
+ * ```typescript
+ * const merged = mergeTokens(
+ *   baseTokens,
+ *   { colors: { primary: { main: '#custom' } } }
+ * );
+ * ```
+ */
+declare function mergeTokens(...tokens: Array<Partial<DesignTokens>>): Partial<DesignTokens>;
+/**
+ * Override specific tokens
+ *
+ * Creates a new token object with specific overrides.
+ *
+ * @param base - Base tokens
+ * @param overrides - Tokens to override
+ * @returns New tokens with overrides applied
+ *
+ * @example
+ * ```typescript
+ * const customized = overrideTokens(defaultTokens, {
+ *   colors: {
+ *     primary: { main: '#ff0000' }
+ *   }
+ * });
+ * ```
+ */
+declare function overrideTokens(base: Partial<DesignTokens>, overrides: Partial<DesignTokens>): Partial<DesignTokens>;
+/**
+ * Pick specific token categories
+ *
+ * Extracts only the specified categories from tokens.
+ *
+ * @param tokens - Source tokens
+ * @param categories - Categories to pick
+ * @returns Tokens with only selected categories
+ *
+ * @example
+ * ```typescript
+ * const colorTokens = pickTokens(allTokens, ['colors']);
+ * ```
+ */
+declare function pickTokens(tokens: Partial<DesignTokens>, categories: Array<keyof DesignTokens>): Partial<DesignTokens>;
+/**
+ * Omit specific token categories
+ *
+ * Removes specified categories from tokens.
+ *
+ * @param tokens - Source tokens
+ * @param categories - Categories to omit
+ * @returns Tokens without omitted categories
+ *
+ * @example
+ * ```typescript
+ * const withoutColors = omitTokens(allTokens, ['colors']);
+ * ```
+ */
+declare function omitTokens(tokens: Partial<DesignTokens>, categories: Array<keyof DesignTokens>): Partial<DesignTokens>;
+/**
+ * Convert hex color to RGB
+ *
+ * @param hex - Hex color (with or without #)
+ * @returns RGB object { r, g, b }
+ */
+declare function hexToRgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * Convert RGB to hex
+ *
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns Hex color with #
+ */
+declare function rgbToHex(r: number, g: number, b: number): string;
+/**
+ * Calculate luminance of a color
+ *
+ * Used for determining contrast ratios.
+ *
+ * @param hex - Hex color
+ * @returns Luminance value (0-1)
+ */
+declare function getLuminance(hex: string): number;
+/**
+ * Calculate contrast ratio between two colors
+ *
+ * @param hex1 - First hex color
+ * @param hex2 - Second hex color
+ * @returns Contrast ratio (1-21)
+ */
+declare function getContrastRatio(hex1: string, hex2: string): number;
+/**
+ * Check if text color passes WCAG AA standard
+ *
+ * @param textColor - Text color hex
+ * @param backgroundColor - Background color hex
+ * @param size - Font size ('small' or 'large')
+ * @returns true if passes WCAG AA
+ */
+declare function isAccessible(textColor: string, backgroundColor: string, size?: 'small' | 'large'): boolean;
+/**
+ * Get appropriate text color (black or white) for a background
+ *
+ * @param backgroundColor - Background hex color
+ * @param threshold - Contrast threshold (default: 3)
+ * @returns '#000000' or '#FFFFFF'
+ */
+declare function getContrastText(backgroundColor: string, threshold?: number): string;
+/**
+ * Lighten a color
+ *
+ * @param hex - Base hex color
+ * @param amount - Amount to lighten (0-1)
+ * @returns Lightened hex color
+ */
+declare function lighten(hex: string, amount?: number): string;
+/**
+ * Darken a color
+ *
+ * @param hex - Base hex color
+ * @param amount - Amount to darken (0-1)
+ * @returns Darkened hex color
+ */
+declare function darken(hex: string, amount?: number): string;
+/**
+ * Add alpha to a color
+ *
+ * @param hex - Hex color
+ * @param opacity - Opacity value (0-1)
+ * @returns RGBA color string
+ */
+declare function alpha(hex: string, opacity: number): string;
+/**
+ * Emphasize a color (lighten if dark, darken if light)
+ *
+ * @param hex - Hex color
+ * @param amount - Amount to emphasize (0-1)
+ * @returns Emphasized hex color
+ */
+declare function emphasize(hex: string, amount?: number): string;
+/**
+ * Create a spacing utility
+ *
+ * @param spacingInput - Spacing configuration
+ * @returns Spacing function
+ */
+declare function createSpacing(spacingInput?: SpacingOptions): SpacingFunction;
+
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management with separated concerns
+ * Updated to use the new simplified theme system
+ */
+
+/**
+ * Theme Provider
+ *
+ * React context provider for theme management with separated concerns.
+ * Simplified version focusing on core functionality:
+ * - String-based themes (CSS files)
+ * - DesignTokens (dynamic themes)
+ * - Persistence via localStorage
+ *
+ * Falls back to 'default' theme if no configuration is found.
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+
+/**
+ * useTheme Hook
+ *
+ * React hook for accessing theme context
+ */
+
+/**
+ * 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;
+
+/**
+ * Standardized hook for accessing theme tokens in components
+ *
+ * Provides consistent access to theme values using CSS custom properties
+ * and DesignTokens.
+ */
+type ThemeTokens$1 = {
     theme: string;
     activeTokens: DesignTokens | null;
     getToken: (tokenName: string, fallback?: string) => string;
@@ -14102,6 +14516,85 @@ declare class ThemeErrorBoundary extends Component<ThemeErrorBoundaryProps, Them
     render(): ReactNode;
 }
 
+/**
+ * useThemeSwitcher Hook
+ *
+ * React hook for managing theme switching with persistence and system preference detection.
+ * Provides an easy-to-use API for dark/light mode toggling.
+ *
+ * @example
+ * ```tsx
+ * import { useThemeSwitcher } from '@shohojdhara/atomix/theme';
+ *
+ * function ThemeToggle() {
+ *   const { mode, toggle, setMode, isDark } = useThemeSwitcher();
+ *
+ *   return (
+ *     <button onClick={toggle}>
+ *       {isDark ? '☀️ Light' : '🌙 Dark'}
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+
+interface UseThemeSwitcherOptions extends ThemeSwitcherOptions {
+    /** Initial theme mode (default: 'system') */
+    initialMode?: ThemeMode;
+    /** Automatically sync with system preference (default: false) */
+    syncWithSystem?: boolean;
+}
+interface UseThemeSwitcherReturn {
+    /** Current theme mode */
+    mode: ThemeMode;
+    /** Whether current theme is dark */
+    isDark: boolean;
+    /** Whether current theme is light */
+    isLight: boolean;
+    /** Toggle between light and dark */
+    toggle: () => ThemeMode;
+    /** Set specific theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Reset to system preference */
+    resetToSystem: () => void;
+    /** Clear saved preference */
+    clearPreference: () => void;
+}
+/**
+ * Hook for managing theme switching
+ *
+ * @param options - Configuration options
+ * @returns Theme switcher controls
+ */
+declare function useThemeSwitcher(options?: UseThemeSwitcherOptions): UseThemeSwitcherReturn;
+
+interface ThemeToggleProps extends Omit<UseThemeSwitcherOptions, 'initialMode'> {
+    /** Custom class name */
+    className?: string;
+    /** Show text label (default: false) */
+    showLabel?: boolean;
+    /** Label for light mode (default: 'Light') */
+    lightLabel?: string;
+    /** Label for dark mode (default: 'Dark') */
+    darkLabel?: string;
+    /** Icon size in pixels (default: 20) */
+    iconSize?: number;
+    /** Button variant (default: 'icon') */
+    variant?: 'icon' | 'button' | 'switch';
+    /** Custom render function */
+    render?: (props: {
+        isDark: boolean;
+        toggle: () => void;
+        mode: ThemeMode;
+    }) => React__default.ReactNode;
+    /** Aria label (default: 'Toggle theme') */
+    ariaLabel?: string;
+}
+/**
+ * ThemeToggle component with multiple variants
+ */
+declare const ThemeToggle: React__default.FC<ThemeToggleProps>;
+
 /**
  * Theme Applicator
  *
@@ -14309,7 +14802,7 @@ declare const DesignTokensCustomizer: React__default.FC<DesignTokensCustomizerPr
 /**
  * Validation result
  */
-interface ValidationResult {
+interface ValidationResult$1 {
     /** Whether theme is valid */
     valid: boolean;
     /** Validation errors */
@@ -14345,7 +14838,7 @@ declare class ThemeValidator {
     /**
      * Validate theme
      */
-    validate(theme: Theme, metadata?: ThemeMetadata): ValidationResult;
+    validate(theme: Theme, metadata?: ThemeMetadata$1): ValidationResult$1;
     /**
      * Validate palette
      */
@@ -14436,757 +14929,1322 @@ interface UseHistoryReturn<T> {
 declare function useHistory<T>(options?: UseHistoryOptions): UseHistoryReturn<T>;
 
 /**
- * Theme Adapter
+ * Configuration Types
  *
- * Converts between Theme objects and DesignTokens.
+ * Type definitions for the Atomix configuration system.
  */
 
 /**
- * Convert DesignTokens to Theme-compatible CSS variables
- *
- * @param tokens - DesignTokens object
- * @returns CSS variables object compatible with Theme.cssVars
+ * Design token categories
  */
-declare function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string>;
-
+type DesignTokenCategory = 'colors' | 'spacing' | 'typography' | 'borderRadius' | 'shadows' | 'zIndex' | 'transitions' | 'breakpoints';
 /**
- * CSS Variable Mapper
- *
- * Utilities for generating and managing CSS custom properties from SCSS tokens
- * and component configurations.
+ * Design token value types
  */
+type DesignTokenValue = string | number;
 /**
- * Configuration for generating CSS variables for a component
+ * Color Scale (1-10)
  */
-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>>;
+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;
 }
 /**
- * CSS variable naming options
+ * Palette Color 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;
+interface PaletteColorOptions {
+    main: string;
+    light?: string;
+    dark?: string;
+    contrastText?: 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' }
+ * Interactive Effect Configuration
  */
-declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: CSSVariableNamingOptions): Record<string, string>;
+interface InteractiveEffectsConfig {
+    /** Vortex & flow field effects */
+    vortex?: {
+        enabled?: boolean;
+        strength?: number;
+        radius?: number;
+        decay?: number;
+        curlNoise?: boolean;
+        velocityTracking?: boolean;
+    };
+    /** Chromatic aberration effects */
+    chromaticAberration?: {
+        enabled?: boolean;
+        mode?: 'longitudinal' | 'lateral' | 'hybrid';
+        redShift?: number;
+        greenShift?: number;
+        blueShift?: number;
+        edgeOnly?: boolean;
+        edgeThreshold?: number;
+    };
+    /** Mouse interaction settings */
+    mouseInteraction?: {
+        sensitivity?: number;
+        trailEffect?: boolean;
+        pressureSensitivity?: boolean;
+    };
+    /** Animation speed controls */
+    animationSpeed?: {
+        base?: number;
+        timeMultiplier?: number;
+    };
+}
 /**
- * Apply CSS variables to an element
- *
- * @param vars - CSS variables to apply
- * @param element - Target element (defaults to document.documentElement)
+ * Optimization Configuration
  */
-declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
+interface OptimizationConfig {
+    /** Responsive breakpoint system */
+    responsive?: {
+        breakpoints?: {
+            mobile?: string;
+            tablet?: string;
+            desktop?: string;
+            wide?: string;
+        };
+        /** Device-aware parameter scaling */
+        deviceScaling?: {
+            mobile?: number;
+            tablet?: number;
+            desktop?: number;
+        };
+    };
+    /** Performance monitoring */
+    performance?: {
+        enabled?: boolean;
+        fpsTarget?: number;
+        autoScaling?: boolean;
+        monitorDashboard?: boolean;
+    };
+    /** Auto-scaling logic based on device capabilities */
+    autoScaling?: {
+        enabled?: boolean;
+        qualityThresholds?: {
+            lowEnd?: number;
+            midRange?: number;
+            highEnd?: number;
+        };
+    };
+}
 /**
- * Remove CSS variables from an element
- *
- * @param varNames - Variable names to remove
- * @param element - Target element (defaults to document.documentElement)
+ * Visual Polish Configuration
  */
-declare function removeCSSVariables(varNames: string[], element?: HTMLElement): void;
+interface VisualPolishConfig {
+    /** Advanced border effects */
+    borders?: {
+        iridescentGlow?: boolean;
+        shimmerEffect?: boolean;
+        beveledEdges?: boolean;
+        pulsingGlow?: boolean;
+    };
+    /** Content-aware blur */
+    contentAwareBlur?: {
+        enabled?: boolean;
+        depthDetection?: boolean;
+        edgePreservation?: boolean;
+        variableRadius?: boolean;
+    };
+    /** Holographic effect modes */
+    holographicEffects?: {
+        enabled?: boolean;
+        rainbowDiffraction?: boolean;
+        scanlineAnimation?: boolean;
+        gridOverlay?: boolean;
+        dataStream?: boolean;
+        pulseRings?: boolean;
+    };
+}
 /**
- * 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
+ * Design Tokens Schema (Tailwind-like)
  */
-declare function getCSSVariable(varName: string, element?: HTMLElement): string | null;
+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>;
+    };
+}
 /**
- * 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
+ * CSS Theme Definition
  */
-declare function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties;
+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;
+}
 /**
- * Merge multiple CSS variable objects
- * Later objects override earlier ones
+ * JavaScript Theme Definition
  */
-declare function mergeCSSVars(...varObjects: Array<Record<string, string | number> | undefined>): Record<string, string | number>;
+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;
+}
 /**
- * Validate CSS variable name format
+ * Theme Definition (CSS or JS)
  */
-declare function isValidCSSVariableName(name: string): boolean;
+type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
 /**
- * Extract component name from CSS variable name
+ * Build configuration
+ */
+interface BuildConfig {
+    output?: {
+        directory?: string;
+        formats?: {
+            expanded?: string;
+            compressed?: string;
+        };
+    };
+    sass?: {
+        style?: 'expanded' | 'compressed';
+        sourceMap?: boolean;
+        loadPaths?: string[];
+    };
+}
+/**
+ * Runtime configuration
+ */
+interface RuntimeConfig {
+    basePath?: string;
+    cdnPath?: string | null;
+    preload?: string[];
+    lazy?: boolean;
+    defaultTheme?: string;
+    storageKey?: string;
+    dataAttribute?: string;
+    enablePersistence?: boolean;
+    useMinified?: boolean;
+}
+/**
+ * Integration settings
+ */
+interface IntegrationConfig {
+    cssVariables?: Record<string, string>;
+    classNames?: {
+        theme?: string;
+        colorMode?: string;
+    };
+}
+/**
+ * Plugin Configuration
+ */
+interface PluginConfig {
+    name: string;
+    options?: Record<string, any>;
+}
+/**
+ * Token Provider Configuration
+ */
+interface TokenProviderConfig {
+    type: 'figma' | 'style-dictionary' | 'w3c' | string;
+    options?: Record<string, any>;
+}
+/**
+ * Token Engine Configuration
+ */
+interface TokenEngineConfig {
+    providers?: Record<string, TokenProviderConfig>;
+    sync?: {
+        pull?: boolean;
+        push?: boolean;
+        onBuild?: boolean;
+    };
+}
+/**
+ * CLI component generator defaults
+ */
+interface GeneratorConfig {
+    /** Default output directory for generated components */
+    outputPath?: string;
+    /** Override detected framework */
+    framework?: 'react' | 'next' | 'vanilla';
+    /** Per-feature defaults */
+    features?: {
+        storybook?: boolean;
+        hook?: boolean;
+        styles?: boolean;
+        tests?: boolean;
+    };
+    /** Composable hooks directory relative to project root */
+    hookOutputDir?: string;
+    /** Story file: side-effect import for global Atomix styles */
+    storybookCssImport?: string;
+    /** Barrel file strategy for new components */
+    barrel?: 'index' | 'none';
+}
+/**
+ * Atomix Configuration Interface
  *
- * @example
- * extractComponentName('--atomix-button-bg')
- * // Returns: 'button'
+ * Tailwind-like configuration for external developers.
  */
-declare function extractComponentName(varName: string, prefix?: string): string | null;
+interface AtomixConfig {
+    prefix?: string;
+    plugins?: (string | PluginConfig)[];
+    tokenEngine?: TokenEngineConfig;
+    ai?: {
+        provider?: 'openai' | 'anthropic';
+        model?: string;
+        apiKey?: string;
+        temperature?: number;
+        maxTokens?: number;
+        rateLimit?: {
+            requests: number;
+            windowMs: number;
+        };
+    };
+    telemetry?: {
+        enabled?: boolean;
+        path?: string;
+        anonymize?: boolean;
+    };
+    generator?: GeneratorConfig;
+    interactiveEffects?: InteractiveEffectsConfig;
+    optimization?: OptimizationConfig;
+    visualPolish?: VisualPolishConfig;
+    theme?: {
+        extend?: ThemeTokens;
+        tokens?: ThemeTokens;
+        themes?: Record<string, ThemeDefinition>;
+    };
+    /** @internal Build configuration */
+    build?: BuildConfig;
+    /** @internal Runtime configuration */
+    runtime?: RuntimeConfig;
+    /** @internal Integration settings */
+    integration?: IntegrationConfig;
+    /** @internal Theme dependencies mapping */
+    dependencies?: Record<string, string[]>;
+}
+/**
+ * Helper function to define Atomix configuration with type safety
+ */
+declare function defineConfig(config: AtomixConfig): AtomixConfig;
 
 /**
- * Theme Helper Functions
+ * Atomix Config Loader
  *
- * Utility functions for working with DesignTokens
+ * Helper functions to load atomix.config.ts from external projects.
+ * Now also supports atomix.config.js and atomix.config.json
  */
 
 /**
- * Check if a value is DesignTokens
+ * Load Atomix configuration from project root
  *
- * Type guard to check if an object is DesignTokens format.
+ * Attempts to load atomix.config.ts, atomix.config.js, or atomix.config.json from the current working directory.
+ * Falls back to default config if file doesn't exist.
  *
- * @param value - Value to check
- * @returns True if value is DesignTokens
+ * @param options - Loader options
+ * @returns Loaded configuration or default
+ *
+ * @example
+ * ```typescript
+ * import { loadAtomixConfig } from '@shohojdhara/atomix/config';
+ * import { createTheme } from '@shohojdhara/atomix/theme';
+ *
+ * const config = loadAtomixConfig();
+ * const theme = createTheme(config.theme?.tokens || {});
+ * ```
  */
-declare function isDesignTokens(value: unknown): value is DesignTokens;
+declare function loadAtomixConfig(options?: {
+    /** Custom config path (default: 'atomix.config.ts') */
+    configPath?: string;
+    /** Whether to throw error if config not found (default: false) */
+    required?: boolean;
+}): AtomixConfig;
+/**
+ * Resolve config path
+ *
+ * Finds atomix.config.ts in the project, checking common locations.
+ * Returns null in browser environments where file system access is not available.
+ *
+ * This function is designed to help tools identify if a config exists without loading it.
+ *
+ * @param configPath - Optional custom path to check
+ * @returns Absolute path to config file or null if not found
+ */
+declare function resolveConfigPath(configPath?: string): string | null;
 
 /**
- * RTL (Right-to-Left) Support Utilities
+ * Configuration Validator
  *
- * Provides utilities for managing RTL text direction in themes
+ * Provides detailed validation and feedback for Atomix configurations,
+ * especially for advanced features (Phases 2, 3, and 4).
  */
+
 /**
- * RTL configuration options
+ * Validation result with detailed information
  */
-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;
+interface ValidationResult {
+    /** Whether the configuration is valid */
+    isValid: boolean;
+    /** Warnings about potential issues */
+    warnings: string[];
+    /** Suggestions for improvement */
+    suggestions: string[];
+    /** Performance impact assessment */
+    performanceImpact: 'low' | 'medium' | 'high';
+    /** Compatibility report */
+    compatibility: {
+        /** Browser support status */
+        browsers: boolean;
+        /** SSR support status */
+        ssr: boolean;
+        /** Framework compatibility */
+        frameworks: ('react' | 'vue' | 'angular' | 'svelte' | 'vanillajs')[];
+    };
 }
 /**
- * RTL Manager
+ * Validate an Atomix configuration with detailed feedback
  *
- * 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;
-}
-
-/**
- * Theme System Exports
- *
- * Simplified theme system using DesignTokens only.
+ * @param config - The configuration to validate
+ * @param options - Validation options
+ * @returns Detailed validation result
  *
  * @example
  * ```typescript
- * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
+ * import { validateConfiguration } from '@shohojdhara/atomix/config';
  *
- * // Using DesignTokens
- * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
- * injectTheme(css);
+ * const config = { /* your config *\/ };
+ * const result = validateConfiguration(config);
  *
- * // Or use with ThemeProvider
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
- * const tokens = { 'primary': '#7c3aed' };
- * <ThemeProvider defaultTheme={tokens}>...</ThemeProvider>
+ * if (!result.isValid) {
+ *   console.warn('Warnings:', result.warnings);
+ *   console.info('Suggestions:', result.suggestions);
+ * }
  * ```
  */
-
-/**
- * Inject theme CSS into DOM
- */
-declare function injectTheme(css: string, id?: string): void;
+declare function validateConfiguration(config: AtomixConfig, options?: {
+    /** Include performance impact analysis (default: true) */
+    performanceAnalysis?: boolean;
+    /** Include compatibility report (default: true) */
+    compatibilityReport?: boolean;
+}): ValidationResult;
 /**
- * Remove theme from DOM
+ * Print a detailed configuration report to the console
+ *
+ * @param config - The configuration to analyze
+ * @param title - Optional title for the report
+ *
+ * @example
+ * ```typescript
+ * import { printConfigReport } from '@shohojdhara/atomix/config';
+ *
+ * const config = { /* your config *\/ };
+ * printConfigReport(config, 'My Application Config');
+ * ```
  */
-declare function removeTheme(id?: string): void;
-
-type themeImport_A11yIssue = A11yIssue;
-type themeImport_CSSVariableConfig = CSSVariableConfig;
-type themeImport_CSSVariableNamingOptions = CSSVariableNamingOptions;
-type themeImport_ComponentThemeOptions = ComponentThemeOptions;
-type themeImport_ComponentThemeOverride = ComponentThemeOverride;
-type themeImport_DesignTokens = DesignTokens;
-declare const themeImport_DesignTokensCustomizer: typeof DesignTokensCustomizer;
-type themeImport_DesignTokensCustomizerProps = DesignTokensCustomizerProps;
-type themeImport_GenerateCSSVariablesOptions = GenerateCSSVariablesOptions;
-type themeImport_NamingOptions = NamingOptions;
-type themeImport_RTLConfig = RTLConfig;
-type themeImport_RTLManager = RTLManager;
-declare const themeImport_RTLManager: typeof RTLManager;
-type themeImport_Theme = Theme;
-type themeImport_ThemeApplicator = ThemeApplicator;
-declare const themeImport_ThemeApplicator: typeof ThemeApplicator;
-type themeImport_ThemeChangeEvent = ThemeChangeEvent;
-declare const themeImport_ThemeComparator: typeof ThemeComparator;
-type themeImport_ThemeComparatorProps = ThemeComparatorProps;
-type themeImport_ThemeComponentOverrides = ThemeComponentOverrides;
-declare const themeImport_ThemeContext: typeof ThemeContext;
-type themeImport_ThemeContextValue = ThemeContextValue;
-type themeImport_ThemeErrorBoundary = ThemeErrorBoundary;
-declare const themeImport_ThemeErrorBoundary: typeof ThemeErrorBoundary;
-type themeImport_ThemeErrorBoundaryProps = ThemeErrorBoundaryProps;
-declare const themeImport_ThemeInspector: typeof ThemeInspector;
-type themeImport_ThemeInspectorProps = ThemeInspectorProps;
-declare const themeImport_ThemeLiveEditor: typeof ThemeLiveEditor;
-type themeImport_ThemeLiveEditorProps = ThemeLiveEditorProps;
-type themeImport_ThemeLoadOptions = ThemeLoadOptions;
-declare const themeImport_ThemePreview: typeof ThemePreview;
-type themeImport_ThemePreviewProps = ThemePreviewProps;
-declare const themeImport_ThemeProvider: typeof ThemeProvider;
-type themeImport_ThemeProviderProps = ThemeProviderProps;
-type themeImport_ThemeValidationResult = ThemeValidationResult;
-type themeImport_ThemeValidator = ThemeValidator;
-declare const themeImport_ThemeValidator: typeof ThemeValidator;
-type themeImport_UseHistoryOptions = UseHistoryOptions;
-type themeImport_UseHistoryReturn<T> = UseHistoryReturn<T>;
-type themeImport_UseThemeReturn = UseThemeReturn;
-type themeImport_ValidationResult = ValidationResult;
-declare const themeImport_applyCSSVariables: typeof applyCSSVariables;
-declare const themeImport_applyComponentTheme: typeof applyComponentTheme;
-declare const themeImport_applyTheme: typeof applyTheme;
-declare const themeImport_camelToKebab: typeof camelToKebab;
-declare const themeImport_clearThemes: typeof clearThemes;
-declare const themeImport_createTheme: typeof createTheme;
-declare const themeImport_createThemeRegistry: typeof createThemeRegistry;
-declare const themeImport_createTokens: typeof createTokens;
-declare const themeImport_cssVarsToStyle: typeof cssVarsToStyle;
-declare const themeImport_deepMerge: typeof deepMerge;
-declare const themeImport_defaultTokens: typeof defaultTokens;
-declare const themeImport_designTokensToCSSVars: typeof designTokensToCSSVars;
-declare const themeImport_extendTheme: typeof extendTheme;
-declare const themeImport_extractComponentName: typeof extractComponentName;
-declare const themeImport_generateCSSVariableName: typeof generateCSSVariableName;
-declare const themeImport_generateCSSVariables: typeof generateCSSVariables;
-declare const themeImport_generateCSSVariablesForSelector: typeof generateCSSVariablesForSelector;
-declare const themeImport_generateClassName: typeof generateClassName;
-declare const themeImport_generateComponentCSSVars: typeof generateComponentCSSVars;
-declare const themeImport_getAllThemes: typeof getAllThemes;
-declare const themeImport_getCSSVariable: typeof getCSSVariable;
-declare const themeImport_getComponentThemeValue: typeof getComponentThemeValue;
-declare const themeImport_getTheme: typeof getTheme;
-declare const themeImport_getThemeApplicator: typeof getThemeApplicator;
-declare const themeImport_getThemeCount: typeof getThemeCount;
-declare const themeImport_getThemeIds: typeof getThemeIds;
-declare const themeImport_hasTheme: typeof hasTheme;
-declare const themeImport_injectCSS: typeof injectCSS;
-declare const themeImport_injectTheme: typeof injectTheme;
-declare const themeImport_isCSSInjected: typeof isCSSInjected;
-declare const themeImport_isDesignTokens: typeof isDesignTokens;
-declare const themeImport_isValidCSSVariableName: typeof isValidCSSVariableName;
-declare const themeImport_mapSCSSTokensToCSSVars: typeof mapSCSSTokensToCSSVars;
-declare const themeImport_mergeCSSVars: typeof mergeCSSVars;
-declare const themeImport_mergeTheme: typeof mergeTheme;
-declare const themeImport_normalizeThemeTokens: typeof normalizeThemeTokens;
-declare const themeImport_registerTheme: typeof registerTheme;
-declare const themeImport_removeCSS: typeof removeCSS;
-declare const themeImport_removeCSSVariables: typeof removeCSSVariables;
-declare const themeImport_removeTheme: typeof removeTheme;
-declare const themeImport_themePropertyToCSSVar: typeof themePropertyToCSSVar;
-declare const themeImport_unregisterTheme: typeof unregisterTheme;
-declare const themeImport_useComponentTheme: typeof useComponentTheme;
-declare const themeImport_useHistory: typeof useHistory;
-declare const themeImport_useTheme: typeof useTheme;
-declare const themeImport_useThemeTokens: typeof useThemeTokens;
-declare namespace themeImport {
-  export { themeImport_DesignTokensCustomizer as DesignTokensCustomizer, themeImport_RTLManager as RTLManager, themeImport_ThemeApplicator as ThemeApplicator, themeImport_ThemeComparator as ThemeComparator, themeImport_ThemeContext as ThemeContext, themeImport_ThemeErrorBoundary as ThemeErrorBoundary, themeImport_ThemeInspector as ThemeInspector, themeImport_ThemeLiveEditor as ThemeLiveEditor, themeImport_ThemePreview as ThemePreview, themeImport_ThemeProvider as ThemeProvider, themeImport_ThemeValidator as ThemeValidator, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyComponentTheme as applyComponentTheme, themeImport_applyTheme as applyTheme, themeImport_camelToKebab as camelToKebab, themeImport_clearThemes as clearThemes, themeImport_createTheme as createTheme, themeImport_createThemeRegistry as createThemeRegistry, themeImport_createTokens as createTokens, themeImport_cssVarsToStyle as cssVarsToStyle, themeImport_deepMerge as deepMerge, themeImport_defaultTokens as defaultTokens, themeImport_designTokensToCSSVars as designTokensToCSSVars, themeImport_extendTheme as extendTheme, themeImport_extractComponentName as extractComponentName, themeImport_generateCSSVariableName as generateCSSVariableName, themeImport_generateCSSVariables as generateCSSVariables, themeImport_generateCSSVariablesForSelector as generateCSSVariablesForSelector, themeImport_generateClassName as generateClassName, themeImport_generateComponentCSSVars as generateComponentCSSVars, themeImport_getAllThemes as getAllThemes, themeImport_getCSSVariable as getCSSVariable, themeImport_getComponentThemeValue as getComponentThemeValue, themeImport_getTheme as getTheme, themeImport_getThemeApplicator as getThemeApplicator, themeImport_getThemeCount as getThemeCount, themeImport_getThemeIds as getThemeIds, themeImport_hasTheme as hasTheme, themeImport_injectCSS as injectCSS, themeImport_injectTheme as injectTheme, themeImport_isCSSInjected as isCSSInjected, themeImport_isDesignTokens as isDesignTokens, themeImport_isValidCSSVariableName as isValidCSSVariableName, themeImport_mapSCSSTokensToCSSVars as mapSCSSTokensToCSSVars, themeImport_mergeCSSVars as mergeCSSVars, themeImport_mergeTheme as mergeTheme, themeImport_normalizeThemeTokens as normalizeThemeTokens, themeImport_registerTheme as registerTheme, themeImport_removeCSS as removeCSS, themeImport_removeCSSVariables as removeCSSVariables, themeImport_removeTheme as removeTheme, themeImport_themePropertyToCSSVar as themePropertyToCSSVar, themeImport_unregisterTheme as unregisterTheme, themeImport_useComponentTheme as useComponentTheme, themeImport_useHistory as useHistory, themeImport_useTheme as useTheme, themeImport_useThemeTokens as useThemeTokens };
-  export type { themeImport_A11yIssue as A11yIssue, themeImport_CSSVariableConfig as CSSVariableConfig, themeImport_CSSVariableNamingOptions as CSSVariableNamingOptions, themeImport_ComponentThemeOptions as ComponentThemeOptions, themeImport_ComponentThemeOverride as ComponentThemeOverride, themeImport_DesignTokens as DesignTokens, themeImport_DesignTokensCustomizerProps as DesignTokensCustomizerProps, themeImport_GenerateCSSVariablesOptions as GenerateCSSVariablesOptions, themeImport_NamingOptions as NamingOptions, themeImport_RTLConfig as RTLConfig, themeImport_Theme as Theme, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeComparatorProps as ThemeComparatorProps, themeImport_ThemeComponentOverrides as ThemeComponentOverrides, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeErrorBoundaryProps as ThemeErrorBoundaryProps, themeImport_ThemeInspectorProps as ThemeInspectorProps, themeImport_ThemeLiveEditorProps as ThemeLiveEditorProps, themeImport_ThemeLoadOptions as ThemeLoadOptions, themeImport_ThemePreviewProps as ThemePreviewProps, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseHistoryOptions as UseHistoryOptions, themeImport_UseHistoryReturn as UseHistoryReturn, themeImport_UseThemeReturn as UseThemeReturn, themeImport_ValidationResult as ValidationResult };
-}
+declare function printConfigReport(config: AtomixConfig, title?: string): void;
 
 /**
- * Component Customization Hook
+ * Public API for loading and managing Atomix configuration
  *
- * Merges theme-level component overrides with component-level props
- * for comprehensive customization support.
+ * This module provides the public-facing API for configuration loading
+ * in external projects.
  */
 
 /**
- * Component names that support customization
- */
-type ComponentName = keyof ComponentPartsMap;
-/**
- * Props for a customizable component
- */
-interface CustomizableComponentProps<T extends ComponentName> {
-    /** CSS variable overrides */
-    cssVars?: T extends keyof ComponentCSSVariables ? Partial<Record<ComponentCSSVariables[T], string | number>> : Record<string, string | number>;
-    /** Part-based styling */
-    parts?: ComponentPartsMap[T];
-    /** Additional className */
-    className?: string;
-    /** Inline styles */
-    style?: React.CSSProperties;
-}
-/**
- * Result of component customization
- */
-interface ComponentCustomization<T extends ComponentName> {
-    /** Merged CSS variables */
-    cssVars: Record<string, string | number>;
-    /** Merged part styles */
-    parts: ComponentPartsMap[T];
-    /** Merged className */
-    className: string;
-    /** Merged inline styles */
-    style: React.CSSProperties;
-    /** CSS variable style object for inline application */
-    cssVarStyle: React.CSSProperties;
-}
-/**
- * Hook to merge theme overrides with component props
+ * Load Atomix configuration from an external project.
+ *
+ * @param options - Loading options
+ * @returns The loaded configuration
  *
  * @example
- * function Button(props: ButtonProps) {
- *   const customization = useComponentCustomization('Button', props);
+ * ```typescript
+ * import { loadConfig } from '@shohojdhara/atomix/config';
  *
- *   return (
- *     <button
- *       className={customization.className}
- *       style={customization.style}
- *     >
- *       {props.children}
- *     </button>
- *   );
- * }
- */
-declare function useComponentCustomization<T extends ComponentName>(component: T, props: CustomizableComponentProps<T>): ComponentCustomization<T>;
-/**
- * Hook to get default props from theme
+ * const config = loadConfig();
+ * console.log(config.prefix); // 'atomix' or user's custom prefix
+ * ```
  */
-declare function useComponentDefaultProps<T extends ComponentName>(component: T): Record<string, any>;
+declare function loadConfig(options?: {
+    configPath?: string;
+    required?: boolean;
+}): AtomixConfig;
 /**
- * Hook to merge default props with provided props
+ * Validate Atomix configuration structure.
+ *
+ * @param config - Configuration object to validate
+ * @returns Array of validation warnings (empty if valid)
  */
-declare function useMergedProps<T extends Record<string, any>>(defaultProps: T, props: Partial<T>): T;
+declare function validateConfig(config: AtomixConfig): string[];
+
 /**
- * Utility to apply CSS variables to style object
+ * Theme Adapter
+ *
+ * Converts between Theme objects and DesignTokens
  */
-declare function applyCSSVarsToStyle(cssVars: Record<string, string | number>, baseStyle?: React.CSSProperties): React.CSSProperties;
 
 /**
- * Atomix Configuration System
+ * Converts an AtomixConfig to DesignTokens
  *
- * Tailwind-like configuration for customizing the Atomix Design System.
+ * This function maps the configuration from the user-facing format
+ * to the internal DesignTokens format used by the theme system.
  *
- * External developers can create `atomix.config.ts` in their project root
- * to customize design tokens, similar to Tailwind's tailwind.config.js
+ * @param config - The configuration object to convert
+ * @returns DesignTokens object ready for theme generation
  *
  * @example
  * ```typescript
- * // atomix.config.ts (in your project)
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
+ * import { configToTokens } from '@shohojdhara/atomix/theme';
+ *
+ * const config = {
+ *   prefix: 'myapp',
+ *   theme: { extend: { colors: { primary: { main: '#7AFFD7' } } } }
+ * };
+ * const tokens = configToTokens(config);
  * ```
  */
-
+declare function configToTokens(config: AtomixConfig): DesignTokens;
 /**
- * Color Scale (1-10)
+ * Converts DesignTokens to CSS variables
+ *
+ * @param tokens - The tokens to convert
+ * @returns A record of CSS variable names and values
  */
-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;
-}
+declare function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string>;
+
 /**
- * Palette Color Options
+ * CSS Variable Mapper
+ *
+ * Utilities for generating and managing CSS custom properties from SCSS tokens
+ * and component configurations.
  */
-interface PaletteColorOptions {
-    main: string;
-    light?: string;
-    dark?: string;
-    contrastText?: string;
-}
 /**
- * Design Tokens Schema (Tailwind-like)
+ * Configuration for generating CSS variables for a component
  */
-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>;
-    };
+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 Theme Definition
+ * CSS variable naming options
  */
-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;
+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;
 }
 /**
- * JavaScript Theme Definition
+ * 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' }
  */
-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;
-}
+declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: CSSVariableNamingOptions): Record<string, string>;
 /**
- * Theme Definition (CSS or JS)
+ * Apply CSS variables to an element
+ *
+ * @param vars - CSS variables to apply
+ * @param element - Target element (defaults to document.documentElement)
  */
-type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
+declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
 /**
- * Build configuration (migrated from theme.config.ts)
+ * Remove CSS variables from an element
+ *
+ * @param varNames - Variable names to remove
+ * @param element - Target element (defaults to document.documentElement)
  */
-interface BuildConfig {
-    output?: {
-        directory?: string;
-        formats?: {
-            expanded?: string;
-            compressed?: string;
-        };
-    };
-    sass?: {
-        style?: 'expanded' | 'compressed';
-        sourceMap?: boolean;
-        loadPaths?: string[];
-    };
-}
+declare function removeCSSVariables(varNames: string[], element?: HTMLElement): void;
 /**
- * Runtime configuration (migrated from theme.config.ts)
+ * 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
  */
-interface RuntimeConfig {
-    basePath?: string;
-    cdnPath?: string | null;
-    preload?: string[];
-    lazy?: boolean;
-    defaultTheme?: string;
-    storageKey?: string;
-    dataAttribute?: string;
-    enablePersistence?: boolean;
-    useMinified?: boolean;
-}
+declare function getCSSVariable(varName: string, element?: HTMLElement): string | null;
 /**
- * Integration settings (migrated from theme.config.ts)
+ * 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
  */
-interface IntegrationConfig {
-    cssVariables?: Record<string, string>;
-    classNames?: {
-        theme?: string;
-        colorMode?: string;
-    };
-}
+declare function cssVarsToStyle(vars: Record<string, string | number>): React.CSSProperties;
 /**
- * Plugin Configuration
+ * Merge multiple CSS variable objects
+ * Later objects override earlier ones
  */
-interface PluginConfig {
-    name: string;
-    options?: Record<string, any>;
-}
+declare function mergeCSSVars(...varObjects: Array<Record<string, string | number> | undefined>): Record<string, string | number>;
 /**
- * Token Provider Configuration
+ * Validate CSS variable name format
  */
-interface TokenProviderConfig {
-    type: 'figma' | 'style-dictionary' | 'w3c' | string;
-    options?: Record<string, any>;
-}
+declare function isValidCSSVariableName(name: string): boolean;
 /**
- * Token Engine Configuration
+ * Extract component name from CSS variable name
+ *
+ * @example
+ * extractComponentName('--atomix-button-bg')
+ * // Returns: 'button'
  */
-interface TokenEngineConfig {
-    providers?: Record<string, TokenProviderConfig>;
-    sync?: {
-        pull?: boolean;
-        push?: boolean;
-        onBuild?: boolean;
-    };
-}
+declare function extractComponentName(varName: string, prefix?: string): string | null;
+
 /**
- * CLI component generator defaults (merged before CLI flags; flags win).
+ * Theme Helper Functions
+ *
+ * Utility functions for working with DesignTokens
  */
-interface GeneratorConfig {
-    /** Default output directory for generated components */
-    outputPath?: string;
-    /** Override detected framework */
-    framework?: 'react' | 'next' | 'vanilla';
-    /** Per-feature defaults (CLI --no-* flags override) */
-    features?: {
-        storybook?: boolean;
-        hook?: boolean;
-        styles?: boolean;
-        tests?: boolean;
+
+/**
+ * Check if a value is DesignTokens
+ *
+ * Type guard to check if an object is DesignTokens format.
+ *
+ * @param value - Value to check
+ * @returns True if value is DesignTokens
+ */
+declare function isDesignTokens(value: unknown): value is DesignTokens;
+
+/**
+ * Performance Monitor Utility
+ *
+ * Provides performance monitoring and metrics collection for the Atomix theme system.
+ * Used to measure and optimize performance of advanced visual effects.
+ */
+/**
+ * Performance metrics collected by the monitor
+ */
+interface PerformanceMetrics {
+    /** Frames per second */
+    fps: number;
+    /** Average frame render time in ms */
+    frameTime: number;
+    /** Peak frame render time in ms */
+    peakFrameTime: number;
+    /** Memory usage statistics */
+    memory?: {
+        usedJSHeapSize: number;
+        totalJSHeapSize: number;
+        jsHeapSizeLimit: number;
     };
-    /** Composable hooks directory relative to project root */
-    hookOutputDir?: string;
-    /** Story file: side-effect import for global Atomix styles */
-    storybookCssImport?: string;
-    /** Barrel file strategy for new components */
-    barrel?: 'index' | 'none';
+    /** Timestamp of measurement */
+    timestamp: number;
+    /** Whether performance is degrading */
+    isDegraded: boolean;
 }
 /**
- * Atomix Configuration Interface
- *
- * Tailwind-like configuration for external developers.
- * Focus on theme customization - build/runtime configs are internal only.
+ * Performance monitor configuration
  */
-interface AtomixConfig {
-    /**
-     * CSS variable prefix (default: 'atomix')
+interface PerformanceMonitorConfig {
+    /** Target FPS threshold (default: 60) */
+    fpsTarget?: number;
+    /** How frequently to sample (default: 500ms) */
+    sampleInterval?: number;
+    /** Callback for performance updates */
+    onUpdate?: (metrics: PerformanceMetrics) => void;
+    /** Callback when performance degrades */
+    onDegraded?: (metrics: PerformanceMetrics) => void;
+    /** Enable/disable memory monitoring */
+    enableMemoryMonitoring?: boolean;
+}
+/**
+ * Performance monitor class
+ */
+declare class PerformanceMonitor {
+    config: Required<PerformanceMonitorConfig>;
+    private frameCount;
+    private lastSampleTime;
+    private lastFpsUpdate;
+    private frameTimes;
+    private animationFrameId;
+    private isActive;
+    private startTime;
+    /**
+     * Create a new performance monitor
      *
-     * Change this to customize all CSS variable names.
-     * Example: prefix: 'myapp' → --myapp-primary instead of --atomix-primary
+     * @param config Configuration options
      */
-    prefix?: string;
+    constructor(config?: PerformanceMonitorConfig);
     /**
-     * Plugins to extend CLI functionality
+     * Start monitoring performance
      */
-    plugins?: (string | PluginConfig)[];
+    start(): void;
     /**
-     * Universal Token Engine configuration
+     * Stop monitoring performance
      */
-    tokenEngine?: TokenEngineConfig;
+    stop(): void;
     /**
-     * AI-Assisted Scaffolding configuration
+     * Get current performance metrics
      */
-    ai?: {
-        /** AI provider (default: 'openai') */
-        provider?: 'openai' | 'anthropic';
-        /** LLM model to use */
-        model?: string;
-        /** API key for the provider */
-        apiKey?: string;
-        /** Temperature for AI creativity (0.0-1.0, default: 0.7) */
-        temperature?: number;
-        /** Maximum tokens per AI response (default: 4000) */
-        maxTokens?: number;
-        /** Rate limiting configuration */
-        rateLimit?: {
-            /** Maximum requests allowed */
-            requests: number;
-            /** Time window in milliseconds */
-            windowMs: number;
-        };
-    };
+    getMetrics(): PerformanceMetrics;
     /**
-     * Performance & Telemetry (Phase 4)
+     * Get the current FPS
      */
-    telemetry?: {
-        /** Enable local telemetry logging (default: false) */
-        enabled?: boolean;
-        /** Output path for telemetry logs (default: '.atomix/telemetry.json') */
-        path?: string;
-        /** Anonymize telemetry data (default: true) */
-        anonymize?: boolean;
-    };
+    getFps(): number;
     /**
-     * `atomix generate` defaults (CLI overrides these)
+     * Check if performance is degraded
      */
-    generator?: GeneratorConfig;
+    isPerformanceDegraded(): boolean;
+    /**
+     * Private method called on each animation frame
+     */
+    private onFrame;
     /**
-     * Theme customization (Tailwind-like)
+     * Run a performance test for a specific function
      *
-     * Use `extend` to add or override design tokens.
-     * Use `tokens` to completely replace the default token system (advanced).
+     * @param fn Function to test
+     * @param iterations Number of iterations (default: 100)
+     * @returns Average execution time in ms
      */
-    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[]>;
+    testFunctionPerformance(fn: () => void, iterations?: number): Promise<number>;
 }
 /**
- * Helper function to define Atomix configuration with type safety
+ * Create a performance monitor instance
+ *
+ * @param config Configuration options
+ * @returns PerformanceMonitor instance
+ *
+ * @example
+ * ```typescript
+ * import { createPerformanceMonitor } from '@shohojdhara/atomix/theme';
  *
- * @param config - Atomix configuration object
- * @returns The configuration object
+ * const monitor = createPerformanceMonitor({
+ *   fpsTarget: 60,
+ *   onUpdate: (metrics) => console.log('FPS:', metrics.fps),
+ *   onDegraded: (metrics) => console.warn('Performance degraded!', metrics),
+ * });
+ *
+ * monitor.start();
+ *
+ * // Later...
+ * monitor.stop();
+ * ```
  */
+declare function createPerformanceMonitor(config?: PerformanceMonitorConfig): PerformanceMonitor;
 /**
- * Helper function to define Atomix configuration with type safety
- *
- * Similar to Tailwind's defineConfig, provides autocomplete and type checking.
+ * Hook for React components to monitor performance
  *
- * @param config - Atomix configuration object
- * @returns The configuration object
+ * @param config Configuration options
+ * @returns Performance metrics and monitor controls
  *
  * @example
  * ```typescript
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
+ * import { usePerformanceMonitor } from '@shohojdhara/atomix/theme';
+ *
+ * function MyComponent() {
+ *   const { metrics, start, stop } = usePerformanceMonitor({ fpsTarget: 60 });
+ *
+ *   useEffect(() => {
+ *     start();
+ *     return () => stop();
+ *   }, []);
+ *
+ *   return <div>FPS: {metrics.fps}</div>;
+ * }
  * ```
  */
-declare function defineConfig(config: AtomixConfig): AtomixConfig;
+declare function usePerformanceMonitor(config?: PerformanceMonitorConfig): {
+    metrics: PerformanceMetrics;
+    start: () => void;
+    stop: () => void;
+};
+
+/**
+ * Responsive Utility for Atomix Theme System
+ *
+ * Provides responsive breakpoint detection and device-aware parameter scaling
+ * based on configuration from the advanced optimization features.
+ */
+/**
+ * Breakpoint definitions
+ */
+interface Breakpoints {
+    mobile: string;
+    tablet: string;
+    desktop: string;
+    wide: string;
+}
+/**
+ * Device scaling factors
+ */
+interface DeviceScaling {
+    mobile: number;
+    tablet: number;
+    desktop: number;
+}
+/**
+ * Responsive configuration
+ */
+interface ResponsiveConfig {
+    breakpoints: Breakpoints;
+    deviceScaling: DeviceScaling;
+}
+/**
+ * Current device type
+ */
+type DeviceType = 'mobile' | 'tablet' | 'desktop' | 'wide';
+/**
+ * Responsive utility class
+ */
+declare class ResponsiveUtil {
+    private config;
+    private currentDevice;
+    private resizeHandler;
+    private observer;
+    constructor(config: ResponsiveConfig);
+    /**
+     * Get the current device type based on viewport width
+     */
+    getCurrentDeviceType(): DeviceType;
+    /**
+     * Get the scaling factor for the current device
+     */
+    getCurrentScalingFactor(): number;
+    /**
+     * Scale a value based on the current device's scaling factor
+     */
+    scaleValue(value: number): number;
+    /**
+     * Check if the current device matches a specific type
+     */
+    isDevice(device: DeviceType): boolean;
+    /**
+     * Check if the current device is mobile or smaller
+     */
+    isMobileOrSmaller(): boolean;
+    /**
+     * Check if the current device is tablet or smaller
+     */
+    isTabletOrSmaller(): boolean;
+    /**
+     * Check if the current device is desktop or larger
+     */
+    isDesktopOrLarger(): boolean;
+    /**
+     * Update the responsive configuration
+     */
+    updateConfig(config: ResponsiveConfig): void;
+    /**
+     * Destroy the responsive utility and clean up listeners
+     */
+    destroy(): void;
+    /**
+     * Parse a CSS value to pixels
+     */
+    private parsePxValue;
+    /**
+     * Set up the resize listener
+     */
+    private setupResizeListener;
+}
+/**
+ * Create a responsive utility instance
+ *
+ * @param config Responsive configuration
+ * @returns ResponsiveUtil instance
+ */
+declare function createResponsiveUtil(config: ResponsiveConfig): ResponsiveUtil;
+/**
+ * Hook for React components to use responsive features
+ *
+ * @param config Responsive configuration
+ * @returns Current device type and utility functions
+ */
+declare function useResponsive(config: ResponsiveConfig): {
+    deviceType: DeviceType;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isWide: boolean;
+    scaleValue: (value: number) => number;
+    getCurrentDeviceType: () => DeviceType;
+    getCurrentScalingFactor: () => number;
+    isMobileOrSmaller: () => boolean;
+    isTabletOrSmaller: () => boolean;
+    isDesktopOrLarger: () => boolean;
+};
+
+/**
+ * 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;
+}
+/**
+ * Create RTL manager instance
+ */
+declare function createRTLManager(config?: RTLConfig): RTLManager;
+/**
+ * Check if locale is RTL
+ */
+declare function isRTLLocale(locale: string): boolean;
+/**
+ * Get direction from locale
+ */
+declare function getDirectionFromLocale(locale: string): 'ltr' | 'rtl';
+/**
+ * RTL-aware CSS helper
+ *
+ * Returns appropriate CSS based on direction
+ */
+declare function rtlCSS(ltrCSS: string, rtlCSS: string, direction?: 'ltr' | 'rtl'): string;
+
+/**
+ * Inject theme CSS into DOM
+ */
+declare function injectTheme(css: string, id?: string): void;
+/**
+ * Remove theme from DOM
+ */
+declare function removeTheme(id?: string): void;
+
+/**
+ * Main theme module interface
+ */
+declare const _default: {
+    createTheme: typeof createTheme;
+    injectTheme: typeof injectTheme;
+    removeTheme: typeof removeTheme;
+    ThemeProvider: React$1.FC<ThemeProviderProps>;
+    useTheme: typeof useTheme;
+    useThemeTokens: typeof useThemeTokens;
+    ThemeContext: React$1.Context<ThemeContextValue | null>;
+    ThemeErrorBoundary: typeof ThemeErrorBoundary;
+    configToTokens: typeof configToTokens;
+    designTokensToCSSVars: typeof designTokensToCSSVars;
+    switchTheme: typeof switchTheme;
+    toggleTheme: typeof toggleTheme;
+    getCurrentTheme: typeof getCurrentTheme;
+    getSystemTheme: typeof getSystemTheme;
+    initializeTheme: typeof initializeTheme;
+    listenToSystemTheme: typeof listenToSystemTheme;
+    persistTheme: typeof persistTheme;
+    clearThemePreference: typeof clearThemePreference;
+    mergeTokens: typeof mergeTokens;
+    overrideTokens: typeof overrideTokens;
+    pickTokens: typeof pickTokens;
+    omitTokens: typeof omitTokens;
+    hexToRgb: typeof hexToRgb;
+    rgbToHex: typeof rgbToHex;
+    getLuminance: typeof getLuminance;
+    getContrastRatio: typeof getContrastRatio;
+    isAccessible: typeof isAccessible;
+    getContrastText: typeof getContrastText;
+    lighten: typeof lighten;
+    darken: typeof darken;
+    alpha: typeof alpha;
+    emphasize: typeof emphasize;
+    createSpacing: typeof createSpacing;
+    createPerformanceMonitor: typeof createPerformanceMonitor;
+    usePerformanceMonitor: typeof usePerformanceMonitor;
+    createResponsiveUtil: typeof createResponsiveUtil;
+    useResponsive: typeof useResponsive;
+    ThemeToggle: React$1.FC<ThemeToggleProps>;
+    ThemeApplicator: typeof ThemeApplicator;
+    applyTheme: typeof applyTheme;
+    getThemeApplicator: typeof getThemeApplicator;
+    createThemeRegistry: typeof createThemeRegistry;
+    registerTheme: typeof registerTheme;
+    unregisterTheme: typeof unregisterTheme;
+    hasTheme: typeof hasTheme;
+    getTheme: typeof getTheme;
+    getAllThemes: typeof getAllThemes;
+    getThemeIds: typeof getThemeIds;
+    clearThemes: typeof clearThemes;
+    getThemeCount: typeof getThemeCount;
+    deepMerge: typeof deepMerge;
+    mergeTheme: typeof mergeTheme;
+    extendTheme: typeof extendTheme;
+    createTokens: typeof createTokens;
+    defaultTokens: DesignTokens;
+    generateCSSVariables: typeof generateCSSVariables;
+    generateCSSVariablesForSelector: typeof generateCSSVariablesForSelector;
+    generateClassName: typeof generateClassName;
+    generateCSSVariableName: typeof generateCSSVariableName;
+    normalizeThemeTokens: typeof normalizeThemeTokens;
+    camelToKebab: typeof camelToKebab;
+    themePropertyToCSSVar: typeof themePropertyToCSSVar;
+    getComponentThemeValue: typeof getComponentThemeValue;
+    generateComponentCSSVars: typeof generateComponentCSSVars;
+    applyComponentTheme: typeof applyComponentTheme;
+    useComponentTheme: typeof useComponentTheme;
+    useThemeSwitcher: typeof useThemeSwitcher;
+    isDesignTokens: typeof isDesignTokens;
+    mapSCSSTokensToCSSVars: typeof mapSCSSTokensToCSSVars;
+    applyCSSVariables: typeof applyCSSVariables;
+    removeCSSVariables: typeof removeCSSVariables;
+    getCSSVariable: typeof getCSSVariable;
+    cssVarsToStyle: typeof cssVarsToStyle;
+    mergeCSSVars: typeof mergeCSSVars;
+    isValidCSSVariableName: typeof isValidCSSVariableName;
+    extractComponentName: typeof extractComponentName;
+    injectCSS: typeof injectCSS;
+    removeCSS: typeof removeCSS;
+    isCSSInjected: typeof isCSSInjected;
+    RTLManager: typeof RTLManager;
+    createRTLManager: typeof createRTLManager;
+    isRTLLocale: typeof isRTLLocale;
+    getDirectionFromLocale: typeof getDirectionFromLocale;
+    rtlCSS: typeof rtlCSS;
+};
+
+type themeImport_A11yIssue = A11yIssue;
+type themeImport_CSSVariableConfig = CSSVariableConfig;
+type themeImport_CSSVariableNamingOptions = CSSVariableNamingOptions;
+type themeImport_ComponentThemeOptions = ComponentThemeOptions;
+type themeImport_ComponentThemeOverride = ComponentThemeOverride;
+type themeImport_DesignTokens = DesignTokens;
+declare const themeImport_DesignTokensCustomizer: typeof DesignTokensCustomizer;
+type themeImport_DesignTokensCustomizerProps = DesignTokensCustomizerProps;
+type themeImport_GenerateCSSVariablesOptions = GenerateCSSVariablesOptions;
+type themeImport_NamingOptions = NamingOptions;
+type themeImport_PerformanceMetrics = PerformanceMetrics;
+type themeImport_RTLConfig = RTLConfig;
+type themeImport_RTLManager = RTLManager;
+declare const themeImport_RTLManager: typeof RTLManager;
+type themeImport_Theme = Theme;
+type themeImport_ThemeApplicator = ThemeApplicator;
+declare const themeImport_ThemeApplicator: typeof ThemeApplicator;
+type themeImport_ThemeChangeEvent = ThemeChangeEvent;
+declare const themeImport_ThemeComparator: typeof ThemeComparator;
+type themeImport_ThemeComparatorProps = ThemeComparatorProps;
+type themeImport_ThemeComponentOverrides = ThemeComponentOverrides;
+declare const themeImport_ThemeContext: typeof ThemeContext;
+type themeImport_ThemeContextValue = ThemeContextValue;
+type themeImport_ThemeErrorBoundary = ThemeErrorBoundary;
+declare const themeImport_ThemeErrorBoundary: typeof ThemeErrorBoundary;
+type themeImport_ThemeErrorBoundaryProps = ThemeErrorBoundaryProps;
+declare const themeImport_ThemeInspector: typeof ThemeInspector;
+type themeImport_ThemeInspectorProps = ThemeInspectorProps;
+declare const themeImport_ThemeLiveEditor: typeof ThemeLiveEditor;
+type themeImport_ThemeLiveEditorProps = ThemeLiveEditorProps;
+type themeImport_ThemeLoadOptions = ThemeLoadOptions;
+type themeImport_ThemeMode = ThemeMode;
+type themeImport_ThemePersistenceOptions = ThemePersistenceOptions;
+declare const themeImport_ThemePreview: typeof ThemePreview;
+type themeImport_ThemePreviewProps = ThemePreviewProps;
+declare const themeImport_ThemeProvider: typeof ThemeProvider;
+type themeImport_ThemeProviderProps = ThemeProviderProps;
+type themeImport_ThemeSwitcherOptions = ThemeSwitcherOptions;
+declare const themeImport_ThemeToggle: typeof ThemeToggle;
+type themeImport_ThemeToggleProps = ThemeToggleProps;
+type themeImport_ThemeValidationResult = ThemeValidationResult;
+type themeImport_ThemeValidator = ThemeValidator;
+declare const themeImport_ThemeValidator: typeof ThemeValidator;
+type themeImport_UseHistoryOptions = UseHistoryOptions;
+type themeImport_UseHistoryReturn<T> = UseHistoryReturn<T>;
+type themeImport_UseThemeReturn = UseThemeReturn;
+type themeImport_UseThemeSwitcherOptions = UseThemeSwitcherOptions;
+type themeImport_UseThemeSwitcherReturn = UseThemeSwitcherReturn;
+declare const themeImport_alpha: typeof alpha;
+declare const themeImport_applyCSSVariables: typeof applyCSSVariables;
+declare const themeImport_applyComponentTheme: typeof applyComponentTheme;
+declare const themeImport_applyTheme: typeof applyTheme;
+declare const themeImport_camelToKebab: typeof camelToKebab;
+declare const themeImport_clearThemePreference: typeof clearThemePreference;
+declare const themeImport_clearThemes: typeof clearThemes;
+declare const themeImport_configToTokens: typeof configToTokens;
+declare const themeImport_createPerformanceMonitor: typeof createPerformanceMonitor;
+declare const themeImport_createRTLManager: typeof createRTLManager;
+declare const themeImport_createResponsiveUtil: typeof createResponsiveUtil;
+declare const themeImport_createSpacing: typeof createSpacing;
+declare const themeImport_createTheme: typeof createTheme;
+declare const themeImport_createThemeRegistry: typeof createThemeRegistry;
+declare const themeImport_createTokens: typeof createTokens;
+declare const themeImport_cssVarsToStyle: typeof cssVarsToStyle;
+declare const themeImport_darken: typeof darken;
+declare const themeImport_deepMerge: typeof deepMerge;
+declare const themeImport_defaultTokens: typeof defaultTokens;
+declare const themeImport_designTokensToCSSVars: typeof designTokensToCSSVars;
+declare const themeImport_emphasize: typeof emphasize;
+declare const themeImport_extendTheme: typeof extendTheme;
+declare const themeImport_extractComponentName: typeof extractComponentName;
+declare const themeImport_generateCSSVariableName: typeof generateCSSVariableName;
+declare const themeImport_generateCSSVariables: typeof generateCSSVariables;
+declare const themeImport_generateCSSVariablesForSelector: typeof generateCSSVariablesForSelector;
+declare const themeImport_generateClassName: typeof generateClassName;
+declare const themeImport_generateComponentCSSVars: typeof generateComponentCSSVars;
+declare const themeImport_getAllThemes: typeof getAllThemes;
+declare const themeImport_getCSSVariable: typeof getCSSVariable;
+declare const themeImport_getComponentThemeValue: typeof getComponentThemeValue;
+declare const themeImport_getContrastRatio: typeof getContrastRatio;
+declare const themeImport_getContrastText: typeof getContrastText;
+declare const themeImport_getCurrentTheme: typeof getCurrentTheme;
+declare const themeImport_getDirectionFromLocale: typeof getDirectionFromLocale;
+declare const themeImport_getLuminance: typeof getLuminance;
+declare const themeImport_getSystemTheme: typeof getSystemTheme;
+declare const themeImport_getTheme: typeof getTheme;
+declare const themeImport_getThemeApplicator: typeof getThemeApplicator;
+declare const themeImport_getThemeCount: typeof getThemeCount;
+declare const themeImport_getThemeIds: typeof getThemeIds;
+declare const themeImport_hasTheme: typeof hasTheme;
+declare const themeImport_hexToRgb: typeof hexToRgb;
+declare const themeImport_initializeTheme: typeof initializeTheme;
+declare const themeImport_injectCSS: typeof injectCSS;
+declare const themeImport_injectTheme: typeof injectTheme;
+declare const themeImport_isAccessible: typeof isAccessible;
+declare const themeImport_isCSSInjected: typeof isCSSInjected;
+declare const themeImport_isDesignTokens: typeof isDesignTokens;
+declare const themeImport_isRTLLocale: typeof isRTLLocale;
+declare const themeImport_isValidCSSVariableName: typeof isValidCSSVariableName;
+declare const themeImport_lighten: typeof lighten;
+declare const themeImport_listenToSystemTheme: typeof listenToSystemTheme;
+declare const themeImport_mapSCSSTokensToCSSVars: typeof mapSCSSTokensToCSSVars;
+declare const themeImport_mergeCSSVars: typeof mergeCSSVars;
+declare const themeImport_mergeTheme: typeof mergeTheme;
+declare const themeImport_mergeTokens: typeof mergeTokens;
+declare const themeImport_normalizeThemeTokens: typeof normalizeThemeTokens;
+declare const themeImport_omitTokens: typeof omitTokens;
+declare const themeImport_overrideTokens: typeof overrideTokens;
+declare const themeImport_persistTheme: typeof persistTheme;
+declare const themeImport_pickTokens: typeof pickTokens;
+declare const themeImport_registerTheme: typeof registerTheme;
+declare const themeImport_removeCSS: typeof removeCSS;
+declare const themeImport_removeCSSVariables: typeof removeCSSVariables;
+declare const themeImport_removeTheme: typeof removeTheme;
+declare const themeImport_rgbToHex: typeof rgbToHex;
+declare const themeImport_rtlCSS: typeof rtlCSS;
+declare const themeImport_switchTheme: typeof switchTheme;
+declare const themeImport_themePropertyToCSSVar: typeof themePropertyToCSSVar;
+declare const themeImport_toggleTheme: typeof toggleTheme;
+declare const themeImport_unregisterTheme: typeof unregisterTheme;
+declare const themeImport_useComponentTheme: typeof useComponentTheme;
+declare const themeImport_useHistory: typeof useHistory;
+declare const themeImport_usePerformanceMonitor: typeof usePerformanceMonitor;
+declare const themeImport_useResponsive: typeof useResponsive;
+declare const themeImport_useTheme: typeof useTheme;
+declare const themeImport_useThemeSwitcher: typeof useThemeSwitcher;
+declare const themeImport_useThemeTokens: typeof useThemeTokens;
+declare namespace themeImport {
+  export { themeImport_DesignTokensCustomizer as DesignTokensCustomizer, themeImport_RTLManager as RTLManager, themeImport_ThemeApplicator as ThemeApplicator, themeImport_ThemeComparator as ThemeComparator, themeImport_ThemeContext as ThemeContext, themeImport_ThemeErrorBoundary as ThemeErrorBoundary, themeImport_ThemeInspector as ThemeInspector, themeImport_ThemeLiveEditor as ThemeLiveEditor, themeImport_ThemePreview as ThemePreview, themeImport_ThemeProvider as ThemeProvider, themeImport_ThemeToggle as ThemeToggle, themeImport_ThemeValidator as ThemeValidator, themeImport_alpha as alpha, themeImport_applyCSSVariables as applyCSSVariables, themeImport_applyComponentTheme as applyComponentTheme, themeImport_applyTheme as applyTheme, themeImport_camelToKebab as camelToKebab, themeImport_clearThemePreference as clearThemePreference, themeImport_clearThemes as clearThemes, themeImport_configToTokens as configToTokens, themeImport_createPerformanceMonitor as createPerformanceMonitor, themeImport_createRTLManager as createRTLManager, themeImport_createResponsiveUtil as createResponsiveUtil, themeImport_createSpacing as createSpacing, themeImport_createTheme as createTheme, themeImport_createThemeRegistry as createThemeRegistry, themeImport_createTokens as createTokens, themeImport_cssVarsToStyle as cssVarsToStyle, themeImport_darken as darken, themeImport_deepMerge as deepMerge, _default as default, themeImport_defaultTokens as defaultTokens, themeImport_designTokensToCSSVars as designTokensToCSSVars, themeImport_emphasize as emphasize, themeImport_extendTheme as extendTheme, themeImport_extractComponentName as extractComponentName, themeImport_generateCSSVariableName as generateCSSVariableName, themeImport_generateCSSVariables as generateCSSVariables, themeImport_generateCSSVariablesForSelector as generateCSSVariablesForSelector, themeImport_generateClassName as generateClassName, themeImport_generateComponentCSSVars as generateComponentCSSVars, themeImport_getAllThemes as getAllThemes, themeImport_getCSSVariable as getCSSVariable, themeImport_getComponentThemeValue as getComponentThemeValue, themeImport_getContrastRatio as getContrastRatio, themeImport_getContrastText as getContrastText, themeImport_getCurrentTheme as getCurrentTheme, themeImport_getDirectionFromLocale as getDirectionFromLocale, themeImport_getLuminance as getLuminance, themeImport_getSystemTheme as getSystemTheme, themeImport_getTheme as getTheme, themeImport_getThemeApplicator as getThemeApplicator, themeImport_getThemeCount as getThemeCount, themeImport_getThemeIds as getThemeIds, themeImport_hasTheme as hasTheme, themeImport_hexToRgb as hexToRgb, themeImport_initializeTheme as initializeTheme, themeImport_injectCSS as injectCSS, themeImport_injectTheme as injectTheme, themeImport_isAccessible as isAccessible, themeImport_isCSSInjected as isCSSInjected, themeImport_isDesignTokens as isDesignTokens, themeImport_isRTLLocale as isRTLLocale, themeImport_isValidCSSVariableName as isValidCSSVariableName, themeImport_lighten as lighten, themeImport_listenToSystemTheme as listenToSystemTheme, themeImport_mapSCSSTokensToCSSVars as mapSCSSTokensToCSSVars, themeImport_mergeCSSVars as mergeCSSVars, themeImport_mergeTheme as mergeTheme, themeImport_mergeTokens as mergeTokens, themeImport_normalizeThemeTokens as normalizeThemeTokens, themeImport_omitTokens as omitTokens, themeImport_overrideTokens as overrideTokens, themeImport_persistTheme as persistTheme, themeImport_pickTokens as pickTokens, themeImport_registerTheme as registerTheme, themeImport_removeCSS as removeCSS, themeImport_removeCSSVariables as removeCSSVariables, themeImport_removeTheme as removeTheme, themeImport_rgbToHex as rgbToHex, themeImport_rtlCSS as rtlCSS, themeImport_switchTheme as switchTheme, themeImport_themePropertyToCSSVar as themePropertyToCSSVar, themeImport_toggleTheme as toggleTheme, themeImport_unregisterTheme as unregisterTheme, themeImport_useComponentTheme as useComponentTheme, themeImport_useHistory as useHistory, themeImport_usePerformanceMonitor as usePerformanceMonitor, themeImport_useResponsive as useResponsive, themeImport_useTheme as useTheme, themeImport_useThemeSwitcher as useThemeSwitcher, themeImport_useThemeTokens as useThemeTokens };
+  export type { themeImport_A11yIssue as A11yIssue, themeImport_CSSVariableConfig as CSSVariableConfig, themeImport_CSSVariableNamingOptions as CSSVariableNamingOptions, themeImport_ComponentThemeOptions as ComponentThemeOptions, themeImport_ComponentThemeOverride as ComponentThemeOverride, themeImport_DesignTokens as DesignTokens, themeImport_DesignTokensCustomizerProps as DesignTokensCustomizerProps, themeImport_GenerateCSSVariablesOptions as GenerateCSSVariablesOptions, themeImport_NamingOptions as NamingOptions, themeImport_PerformanceMetrics as PerformanceMetrics, themeImport_RTLConfig as RTLConfig, themeImport_Theme as Theme, themeImport_ThemeChangeEvent as ThemeChangeEvent, themeImport_ThemeComparatorProps as ThemeComparatorProps, themeImport_ThemeComponentOverrides as ThemeComponentOverrides, themeImport_ThemeContextValue as ThemeContextValue, themeImport_ThemeErrorBoundaryProps as ThemeErrorBoundaryProps, themeImport_ThemeInspectorProps as ThemeInspectorProps, themeImport_ThemeLiveEditorProps as ThemeLiveEditorProps, themeImport_ThemeLoadOptions as ThemeLoadOptions, themeImport_ThemeMode as ThemeMode, themeImport_ThemePersistenceOptions as ThemePersistenceOptions, themeImport_ThemePreviewProps as ThemePreviewProps, themeImport_ThemeProviderProps as ThemeProviderProps, themeImport_ThemeSwitcherOptions as ThemeSwitcherOptions, themeImport_ThemeToggleProps as ThemeToggleProps, themeImport_ThemeValidationResult as ThemeValidationResult, themeImport_UseHistoryOptions as UseHistoryOptions, themeImport_UseHistoryReturn as UseHistoryReturn, themeImport_UseThemeReturn as UseThemeReturn, themeImport_UseThemeSwitcherOptions as UseThemeSwitcherOptions, themeImport_UseThemeSwitcherReturn as UseThemeSwitcherReturn, ValidationResult$1 as ValidationResult };
+}
+
+/**
+ * Component Customization Hook
+ *
+ * Merges theme-level component overrides with component-level props
+ * for comprehensive customization support.
+ */
+
+/**
+ * Component names that support customization
+ */
+type ComponentName = keyof ComponentPartsMap;
+/**
+ * Props for a customizable component
+ */
+interface CustomizableComponentProps<T extends ComponentName> {
+    /** CSS variable overrides */
+    cssVars?: T extends keyof ComponentCSSVariables ? Partial<Record<ComponentCSSVariables[T], string | number>> : Record<string, string | number>;
+    /** Part-based styling */
+    parts?: ComponentPartsMap[T];
+    /** Additional className */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+}
+/**
+ * Result of component customization
+ */
+interface ComponentCustomization<T extends ComponentName> {
+    /** Merged CSS variables */
+    cssVars: Record<string, string | number>;
+    /** Merged part styles */
+    parts: ComponentPartsMap[T];
+    /** Merged className */
+    className: string;
+    /** Merged inline styles */
+    style: React.CSSProperties;
+    /** CSS variable style object for inline application */
+    cssVarStyle: React.CSSProperties;
+}
+/**
+ * Hook to merge theme overrides with component props
+ *
+ * @example
+ * function Button(props: ButtonProps) {
+ *   const customization = useComponentCustomization('Button', props);
+ *
+ *   return (
+ *     <button
+ *       className={customization.className}
+ *       style={customization.style}
+ *     >
+ *       {props.children}
+ *     </button>
+ *   );
+ * }
+ */
+declare function useComponentCustomization<T extends ComponentName>(component: T, props: CustomizableComponentProps<T>): ComponentCustomization<T>;
+/**
+ * Hook to get default props from theme
+ */
+declare function useComponentDefaultProps<T extends ComponentName>(component: T): Record<string, any>;
+/**
+ * Hook to merge default props with provided props
+ */
+declare function useMergedProps<T extends Record<string, any>>(defaultProps: T, props: Partial<T>): T;
+/**
+ * Utility to apply CSS variables to style object
+ */
+declare function applyCSSVarsToStyle(cssVars: Record<string, string | number>, baseStyle?: React.CSSProperties): React.CSSProperties;
 
 declare const composables: typeof __lib_composables;
 declare const utils: typeof __lib_utils;
@@ -15222,7 +16280,7 @@ declare function themeToCSS(theme: Theme, selector?: string): string;
 /**
  * Get theme metadata
  */
-declare function getThemeMetadata(theme: Theme): ThemeMetadata;
+declare function getThemeMetadata(theme: Theme): ThemeMetadata$1;
 /**
  * Check if theme supports dark mode
  */
@@ -15660,5 +16718,5 @@ declare const atomix: {
     VideoPlayer: React$1.ForwardRefExoticComponent<VideoPlayerProps & React$1.RefAttributes<HTMLVideoElement>>;
 };
 
-export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, _default as Accordion, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BALANCED_PRESET, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DEFAULT_BREAKPOINTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DeviceDetector, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MOBILE_OPTIMIZED_BREAKPOINTS, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PERFORMANCE_PRESET, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PerformanceOverlay, PhotoViewer, PieChart, Popover, ProductReview, Progress, QUALITY_PRESET, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, TYPEDBUTTON, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemes, composables, constants, createBreakpoints, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createSlotComponent, createSlotProps, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getDefaultBreakpoints, getDevicePreset, getMobileOptimizedParams, getPartStyles, getQualityMultipliers, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, importTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isSlot, isValidCSSVariableName, isYouTubeUrl, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, normalizeThemeTokens, preloadFonts, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, sliderConstants, supportsDarkMode, theme, themePropertyToCSSVar, themeToCSS, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useEdgePanel, useForm, useFormGroup, useHero, useHistory, useInput, useLineChart, useMergedProps, useNav, useNavDropdown, useNavItem, useNavbar, usePerformanceMonitor, usePieChart, useRadio, useResponsiveGlass, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlot, useSpinner, useTextarea, useTheme, useThemeTokens, useTodo, utils, validateTheme };
-export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOptions, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokens, DesignTokensCustomizerProps, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger$1 as DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, ExportFormat, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GeneratorConfig, GlassContainerProps, GlassMode, GlassParams, GlassSize, GlassThemeTokens, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroParts, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NamingOptions, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PerformanceMetrics, PerformanceMonitorConfig, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PluginConfig, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, ResponsiveBreakpoint, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption$1 as SelectOption, SelectParts, SelectProps, SelectionMode, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeName, ThemePreviewProps, ThemeProviderProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TokenEngineConfig, TokenProviderConfig, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseHistoryOptions, UseHistoryReturn, UsePerformanceMonitorReturn, UseThemeReturn, ValidationResult, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, WaterfallChartProps, WaterfallDataPoint, listvariant };
+export { ACCORDION, ATOMIX_GLASS, AVATAR, AVATAR_GROUP, _default$1 as Accordion, AreaChart, AtomixGlass, AtomixLogo, Avatar, AvatarGroup, BADGE, BADGE_CSS_VARS, BALANCED_PRESET, BLOCK, BREADCRUMB, BUTTON, BUTTON_CSS_VARS, BUTTON_GROUP, Badge, BarChart, Block, Breadcrumb, BubbleChart, Button, ButtonGroup, CALLOUT, CARD, CARD_CSS_VARS, CHART, CHECKBOX_CSS_VARS, CLASS_PREFIX, CODE_SNIPPET, COMPONENT_CSS_VARS, COUNTDOWN, Callout, CandlestickChart, Card, Chart, ChartRenderer, Checkbox, ColorModeToggle, Container, Countdown, DATA_TABLE_CLASSES, DATA_TABLE_SELECTORS, DATEPICKER, DEFAULT_ATOMIX_FONTS, DEFAULT_BREAKPOINTS, DROPDOWN, DROPDOWN_CSS_VARS, DataTable, DatePicker, DesignTokensCustomizer, DeviceDetector, DonutChart, Dropdown, EDGE_PANEL, EdgePanel, ElevationCard, FOOTER, FORM, FORM_GROUP, Footer, FooterLink, FooterSection, FooterSocialLink, Form, FormGroup, FunnelChart, GaugeChart, Grid, GridCol, HERO, HeatmapChart, Hero, INPUT, INPUT_CSS_VARS, Icon, Input, LIST, LIST_GROUP, LineChart, List, ListGroup, MESSAGES, MOBILE_OPTIMIZED_BREAKPOINTS, MODAL, MODAL_CSS_VARS, MasonryGrid, MasonryGridItem, MegaMenu, MegaMenuColumn, MegaMenuLink, Menu, MenuDivider, MenuItem, Messages, Modal, MultiAxisChart, NAV, NAVBAR, Nav, NavDropdown, NavItem, Navbar, PAGINATION_DEFAULTS, PERFORMANCE_PRESET, PHOTOVIEWER, POPOVER, PROGRESS, PROGRESS_CSS_VARS, Pagination, PerformanceOverlay, PhotoViewer, PieChart, Popover, ProductReview, Progress, QUALITY_PRESET, RADIO, RADIO_CSS_VARS, RATING, RIVER, RTLManager, RadarChart, Radio, Rating, River, Row, SECTION_INTRO, SELECT, SIDE_MENU, SIZES, SLIDER, SPINNER, STEPS, ScatterChart, SectionIntro, Select, SideMenu, SideMenuItem, SideMenuList, Slider, Spinner, Steps, TAB, TABS_CSS_VARS, TESTIMONIAL, TEXTAREA, THEME_COLORS, THEME_NAMING, TODO, TOGGLE, TOOLTIP, TOOLTIP_CSS_VARS, TYPEDBUTTON, Tabs, Testimonial, Textarea, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeToggle, ThemeValidator, Todo, Toggle, Tooltip, TreemapChart, UPLOAD, Upload, VIDEO_PLAYER, VideoPlayer, WaterfallChart, alpha, applyCSSVariables, applyCSSVarsToStyle, applyComponentTheme, applyPartStyles, applyTheme, camelToKebab, clearThemePreference, clearThemes, composables, configToTokens, constants, createBreakpoints, createCSSVarStyle, createDarkVariant, createDebugAttrs, createFontPreloadLink, createPartProps, createPerformanceMonitor, createRTLManager, createResponsiveUtil, createSlotComponent, createSlotProps, createSpacing, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, darken, deepMerge, atomix as default, defaultTokens, defineConfig, designTokensToCSSVars, emphasize, exportTheme, extendTheme, extractComponentName, extractYouTubeId, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, generateFontPreloadTags, generateUUID, getAllThemes, getCSSVariable, getComponentCSSVars, getComponentThemeValue, getContrastRatio, getContrastText, getCurrentTheme, getDefaultBreakpoints, getDevicePreset, getDirectionFromLocale, getLuminance, getMobileOptimizedParams, getPartStyles, getQualityMultipliers, getSystemTheme, getTheme, getThemeApplicator, getThemeCount, getThemeIds, getThemeMetadata, hasCustomization, hasTheme, hexToRgb, importTheme, initializeTheme, injectCSS, injectTheme, isAccessible, isCSSInjected, isDesignTokens, isRTLLocale, isSlot, isValidCSSVariableName, isYouTubeUrl, lighten, listenToSystemTheme, loadAtomixConfig, loadConfig, mapSCSSTokensToCSSVars, mergeCSSVars, mergeClassNames, mergeComponentProps, mergePartStyles, mergeSlots, mergeTheme, mergeTokens, normalizeThemeTokens, omitTokens, overrideTokens, persistTheme, pickTokens, preloadFonts, printConfigReport, quickTheme, registerTheme, removeCSS, removeCSSVariables, removeTheme, renderSlot, resolveConfigPath, rgbToHex, rtlCSS, sliderConstants, supportsDarkMode, switchTheme, theme, themePropertyToCSSVar, themeToCSS, toggleTheme, types, unregisterTheme, useAccordion, useAtomixGlass, useBadge, useBarChart, useBlock, useChartData, useChartInteraction, useChartScale, useComponentCustomization, useComponentDefaultProps, useComponentTheme, useEdgePanel, useForm, useFormGroup, useHero, useHistory, useInput, useLineChart, useMergedProps, useNav, useNavDropdown, useNavItem, useNavbar, usePieChart, useRadio, useResponsive, useResponsiveGlass, useRiver, useSelect, useSideMenu, useSideMenuItem, useSlot, useSpinner, useTextarea, useTheme, useThemeSwitcher, useThemeTokens, useTodo, utils, validateConfig, validateConfiguration, validateTheme };
+export type { A11yIssue, AccordionParts, AccordionProps$1 as AccordionProps, AccordionState, AreaChartProps, AtomixConfig, AtomixGlassProps, AtomixLogoProps, AvatarGroupProps, AvatarParts, AvatarProps, AvatarSize, BadgeCSSVariable, BadgeParts, BadgeProps, BarChartOptions, BarChartProps, BarDimensions, BaseComponentProps, BlockProps, BreadcrumbInstance, BreadcrumbItem$1 as BreadcrumbItem, BreadcrumbOptions, BreadcrumbProps, BubbleChartProps, BubbleDataPoint, BuildConfig, ButtonCSSVariable, ButtonGroupProps, ButtonIconSlotProps, ButtonLabelSlotProps, ButtonParts, ButtonProps, ButtonRootSlotProps, ButtonSpinnerSlotProps, CSSThemeDefinition, CSSVariableConfig, CSSVariableNamingOptions, CalloutProps, CandlestickChartProps, CandlestickDataPoint, CardBodySlotProps, CardCSSVariable, CardFooterSlotProps, CardHeaderSlotProps, CardParts, CardProps, CardRootSlotProps, ChartAxis$1 as ChartAxis, ChartConfig$1 as ChartConfig, ChartDataPoint$1 as ChartDataPoint, ChartDataset$1 as ChartDataset, ChartProps$1 as ChartProps, ChartSize$1 as ChartSize, ChartType$1 as ChartType, CheckboxCSSVariable, CheckboxParts, CheckboxProps, CodeBlockProps, ColorModeToggleProps, ColorScale, ComponentCSSVariables, ComponentCustomization, ComponentName, ComponentParts, ComponentPartsMap, ComponentThemeOptions, ComponentThemeOverride, ContainerProps, CountdownProps, CustomizableComponentProps, DataTableColumn, DataTableParts, DataTableProps, DatePickerProps, DesignTokenCategory, DesignTokenValue, DesignTokens, DesignTokensCustomizerProps, DisplacementMode, DonutChartProps, DropdownCSSVariable, DropdownDividerProps, DropdownHeaderProps, DropdownItemProps, DropdownMenuSlotProps, DropdownParts, DropdownPlacement, DropdownProps, DropdownRootSlotProps, DropdownToggleSlotProps, DropdownTrigger$1 as DropdownTrigger, EdgePanelMode, EdgePanelPosition, EdgePanelProps, ElementRefs, ElevationCardProps, ExportFormat, FontPreloadConfig, FooterLayout, FooterLinkProps, FooterProps, FooterSectionProps, FooterSocialLinkProps, FormGroupParts, FormGroupProps, FormProps, FunnelChartProps, FunnelDataPoint, GaugeChartProps, GenerateCSSVariablesOptions, GeneratorConfig, GlassContainerProps, GlassMode, GlassParams, GlassSize, GlassThemeTokens, GridColProps, GridProps, HeatmapChartProps, HeatmapDataPoint, HeroAlignment, HeroBackgroundSlide, HeroBackgroundSliderConfig, HeroParts, HeroProps, IconPosition, IconProps, IconSize$1 as IconSize, IconWeight$1 as IconWeight, ImageType, InputCSSVariable, InputElementSlotProps, InputParts, InputProps, InputRootSlotProps, IntegrationConfig, InteractiveEffectsConfig, JSThemeDefinition, LineChartOptions, LineChartProps, ListGroupProps$1 as ListGroupProps, ListParts, ListProps, MasonryGridItemProps, MasonryGridProps, MegaMenuColumnProps, MegaMenuLinkProps, MegaMenuProps, MenuDividerProps, MenuItemProps, MenuProps, MergePropsOptions, MessageItem, MessagesProps, ModalBackdropSlotProps, ModalCSSVariable, ModalContentSlotProps, ModalDialogSlotProps, ModalParts, ModalProps, ModalRootSlotProps, MousePosition, MultiAxisChartProps, NamingOptions, NavAlignment, NavDropdownProps, NavItemProps, NavProps, NavVariant, NavbarParts, NavbarPosition, NavbarProps, OptimizationConfig, OverLightConfig, OverLightObjectConfig, PaginationProps, PaletteColorOptions, PartStyleProps, PerformanceMonitorConfig$1 as PerformanceMonitorConfig, PhosphorIconsType$1 as PhosphorIconsType, PhotoViewerProps, PieChartOptions, PieChartProps, PieSlice, PluginConfig, PopoverProps, PopoverTriggerProps, ProductReviewProps, ProgressCSSVariable, ProgressParts, ProgressProps, RTLConfig, RadarChartProps, RadioCSSVariable, RadioParts, RadioProps, RatingProps, ResponsiveBreakpoint, RiverContentColumn, RiverProps, RowProps, RuntimeConfig, ScatterChartProps, ScatterDataPoint, SectionIntroProps, SelectOption$1 as SelectOption, SelectParts, SelectProps, SelectionMode, SideMenuItemProps, SideMenuListProps, SideMenuProps, Size, SliderAutoplay, SliderBreakpoint, SliderEffect, SliderLazy, SliderNavigation, SliderPagination, SliderProps, SliderRefs, SliderScrollbar, SliderSlide, SliderState, SliderThumbs, SliderVirtual, SliderZoom, SlotProps, SocialLink, SocialPlatform, SortConfig, SpinnerProps, StateModifier, StepsProps, TabsCSSVariable, TabsParts, TabsProps, TestimonialProps, TextareaParts, TextareaProps, Theme, ThemeChangeEvent, ThemeColor, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeDefinition, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeMode, ThemeName, ThemePersistenceOptions, ThemePreviewProps, ThemeProviderProps, ThemeSwitcherOptions, ThemeToggleProps, ThemeTokens, ThemeValidationResult, TodoItem, TodoProps, ToggleProps, TokenEngineConfig, TokenProviderConfig, TooltipCSSVariable, TooltipParts, TooltipProps, TreemapChartProps, TreemapDataPoint, TreemapNode, UploadProps, UseBlockOptions, UseBlockReturn, UseCardOptions, UseCardReturn, UseHistoryOptions, UseHistoryReturn, UsePerformanceMonitorReturn, UseThemeReturn, UseThemeSwitcherOptions, UseThemeSwitcherReturn, Variant, VideoChapter, VideoPlayerProps, VideoQuality, VideoSubtitle, VisualPolishConfig, WaterfallChartProps, WaterfallDataPoint, listvariant };