@shohojdhara/atomix 0.3.6 → 0.3.8

package/dist/theme.d.ts

@@ -294,6 +294,203 @@ 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
  *
@@ -341,8 +538,8 @@ interface ThemeChangeEvent {
     previousTheme: string | null;
     /** New theme name */
     currentTheme: string;
-    /** Theme object (for JS themes) */
-    themeObject?: Theme | null;
+    /** DesignTokens if using tokens-based theme */
+    tokens?: DesignTokens | null;
     /** Timestamp of the change */
     timestamp: number;
     /** Whether the change was from user action or system */
@@ -380,10 +577,10 @@ interface ThemeValidationResult {
 interface UseThemeReturn {
     /** Current theme name */
     theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Function to change theme (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: DesignTokens | null;
+    /** Function to change theme (supports string or DesignTokens) */
+    setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Whether a theme is currently loading */
@@ -451,8 +648,8 @@ interface ThemeComponentOverrides {
 interface ThemeProviderProps {
     /** Child components */
     children: React.ReactNode;
-    /** Default theme */
-    defaultTheme?: string | Theme;
+    /** Default theme (string name or DesignTokens) */
+    defaultTheme?: string | DesignTokens | Partial<DesignTokens>;
     /** Available themes */
     themes?: Record<string, ThemeMetadata>;
     /** Base path for theme CSS */
@@ -472,7 +669,7 @@ interface ThemeProviderProps {
     /** Use minified CSS */
     useMinified?: boolean;
     /** Callback when theme changes */
-    onThemeChange?: (theme: string | Theme | DesignTokens) => void;
+    onThemeChange?: (theme: string | DesignTokens) => void;
     /** Callback on error */
     onError?: (error: Error, themeName: string) => void;
 }
@@ -482,10 +679,10 @@ interface ThemeProviderProps {
 interface ThemeContextValue {
     /** Current theme name */
     theme: string;
-    /** Current active theme object (for JS themes) */
-    activeTheme: Theme | null;
-    /** Set theme function (supports string, Theme, or DesignTokens) */
-    setTheme: (theme: string | Theme | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
+    /** Current active DesignTokens (if using tokens-based theme) */
+    activeTokens: DesignTokens | null;
+    /** Set theme function (supports string or DesignTokens) */
+    setTheme: (theme: string | DesignTokens | Partial<DesignTokens>, options?: ThemeLoadOptions) => Promise<void>;
     /** Available themes */
     availableThemes: ThemeMetadata[];
     /** Loading state */
@@ -510,36 +707,6 @@ interface PaletteColor {
     /** Contrast text color (auto-generated if not provided) */
     contrastText?: string;
 }
-/**
- * Palette configuration options for createTheme
- */
-interface PaletteOptions {
-    /** Primary color configuration */
-    primary?: Partial<PaletteColor> | string;
-    /** Secondary color configuration */
-    secondary?: Partial<PaletteColor> | string;
-    /** Error color configuration */
-    error?: Partial<PaletteColor> | string;
-    /** Warning color configuration */
-    warning?: Partial<PaletteColor> | string;
-    /** Info color configuration */
-    info?: Partial<PaletteColor> | string;
-    /** Success color configuration */
-    success?: Partial<PaletteColor> | string;
-    /** Background colors */
-    background?: {
-        default?: string;
-        subtle?: string;
-    };
-    /** Text colors */
-    text?: {
-        primary?: string;
-        secondary?: string;
-        disabled?: string;
-    };
-    /** Additional custom colors */
-    [key: string]: any;
-}
 /**
  * Typography configuration options for createTheme
  */
@@ -609,10 +776,6 @@ interface TypographyOptions {
  * Spacing function type
  */
 type SpacingFunction = (...values: number[]) => string;
-/**
- * Spacing configuration options for createTheme
- */
-type SpacingOptions = number | number[] | SpacingFunction;
 /**
  * Breakpoint values configuration
  */
@@ -624,15 +787,6 @@ interface BreakpointValues {
     xl?: number;
     [key: string]: number | undefined;
 }
-/**
- * Breakpoints configuration options for createTheme
- */
-interface BreakpointsOptions {
-    /** Breakpoint values in pixels */
-    values?: BreakpointValues;
-    /** Unit for breakpoints (default: 'px') */
-    unit?: string;
-}
 /**
  * Shadow configuration
  */
@@ -710,30 +864,6 @@ interface BorderRadiusOptions {
 interface ThemeCustomProperties {
     [key: string]: any;
 }
-/**
- * Theme configuration options for createTheme
- * Extends ThemeMetadata to support both CSS and JS theme properties
- */
-interface ThemeOptions extends Partial<ThemeMetadata> {
-    /** Color palette configuration */
-    palette?: PaletteOptions;
-    /** Typography configuration */
-    typography?: TypographyOptions;
-    /** Spacing configuration */
-    spacing?: SpacingOptions;
-    /** Breakpoints configuration */
-    breakpoints?: BreakpointsOptions;
-    /** Shadow configuration */
-    shadows?: ShadowOptions;
-    /** Transition configuration */
-    transitions?: TransitionOptions;
-    /** Z-index configuration */
-    zIndex?: ZIndexOptions;
-    /** Border radius configuration */
-    borderRadius?: BorderRadiusOptions;
-    /** Custom properties */
-    custom?: ThemeCustomProperties;
-}
 /**
  * Complete theme object with computed values
  * Generated by createTheme function
@@ -805,457 +935,67 @@ interface Theme extends ThemeMetadata {
 }
 
 /**
- * CSS Variable Generator
+ * Naming Utilities
  *
- * Generates CSS custom properties from design tokens.
+ * Provides consistent naming conventions across the theme system
  */
-
-/**
- * Options for CSS variable generation
- */
-interface GenerateCSSVariablesOptions {
-    /** CSS selector for the variables (default: ':root') */
-    selector?: string;
-    /** Prefix for CSS variables (default: 'atomix') */
+interface NamingOptions {
     prefix?: string;
+    component?: string;
+    variant?: string;
+    state?: 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}"
- * ```
+ * Generate consistent CSS class names following BEM methodology
  */
-declare function generateCSSVariables(tokens: DesignTokens, options?: GenerateCSSVariablesOptions): string;
+declare function generateClassName(block: string, element?: string, modifiers?: Record<string, boolean | string>): 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'
- * );
- * ```
+ * Generate consistent CSS variable names
  */
-declare function generateCSSVariablesForSelector(tokens: DesignTokens, selector: string, prefix?: string): string;
-
+declare function generateCSSVariableName(property: string, options?: NamingOptions): string;
 /**
- * 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 file is required for automatic loading.
+ * Normalize theme tokens to consistent naming convention
  */
-
+declare function normalizeThemeTokens(tokens: Record<string, any>): Record<string, any>;
 /**
- * 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' });
- * ```
+ * Convert camelCase to kebab-case for CSS custom properties
  */
-declare function createTheme(input?: Partial<DesignTokens> | Theme, options?: GenerateCSSVariablesOptions): string;
-
+declare function camelToKebab(str: string): string;
 /**
- * createThemeObject - Create a theme object with computed values
- *
- * Similar to Material-UI's createTheme, this function accepts theme configuration
- * options and returns a complete theme object with computed values.
- *
- * NOTE: For most use cases, use the simple theme system's `createTheme` instead,
- * which generates CSS from DesignTokens. This function is for advanced use cases
- * that need the full Theme object structure.
- *
- * @example
- * ```typescript
- * const theme = createThemeObject({
- *   palette: {
- *     primary: { main: '#7AFFD7' },
- *     secondary: { main: '#FF5733' },
- *   },
- *   typography: {
- *     fontFamily: 'Inter, sans-serif',
- *   },
- * });
- * ```
+ * Convert theme property to CSS variable name
  */
+declare function themePropertyToCSSVar(propertyPath: string, prefix?: string): string;
 
 /**
- * Create a theme object with computed values
+ * Component Theming Utilities
  *
- * @param options - Theme configuration options
- * @returns Complete theme object
+ * Provides consistent patterns for applying theme values to components
+ * using DesignTokens and CSS variables
  */
-declare function createThemeObject(...options: ThemeOptions[]): Theme;
 
-/**
- * Theme Composition Utilities
- *
- * Utilities for composing, merging, and extending themes.
- */
-
-/**
- * Deep merge multiple objects
- * Later objects override earlier ones
- */
-declare function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[]): T;
-/**
- * Merge multiple theme options into a single theme options object
- *
- * @param themes - Theme options to merge
- * @returns Merged theme options
- *
- * @example
- * ```typescript
- * const baseTheme = { palette: { primary: { main: '#000' } } };
- * const customTheme = { palette: { secondary: { main: '#fff' } } };
- * const merged = mergeTheme(baseTheme, customTheme);
- * ```
- */
-declare function mergeTheme(...themes: ThemeOptions[]): ThemeOptions;
-/**
- * Extend an existing theme with new options
- *
- * @param baseTheme - Base theme to extend (can be Theme or ThemeOptions)
- * @param extension - Theme options to extend with
- * @returns New theme with extended options
- *
- * @example
- * ```typescript
- * const base = createTheme({ palette: { primary: { main: '#000' } } });
- * const extended = extendTheme(base, {
- *   palette: { secondary: { main: '#fff' } }
- * });
- * ```
- */
-declare function extendTheme(baseTheme: Theme | ThemeOptions, extension: ThemeOptions): Theme;
-
-/**
- * Atomix Configuration System
- *
- * Tailwind-like configuration for customizing the Atomix Design System.
- *
- * External developers can create `atomix.config.ts` in their project root
- * to customize design tokens, similar to Tailwind's tailwind.config.js
- *
- * @example
- * ```typescript
- * // atomix.config.ts (in your project)
- * import { defineConfig } from '@shohojdhara/atomix/config';
- *
- * export default defineConfig({
- *   theme: {
- *     extend: {
- *       colors: {
- *         primary: { main: '#7AFFD7' },
- *       },
- *     },
- *   },
- * });
- * ```
- */
-
-/**
- * CSS Theme Definition
- */
-interface CSSThemeDefinition {
-    type: 'css';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    cssPath?: string;
-}
-/**
- * JavaScript Theme Definition
- */
-interface JSThemeDefinition {
-    type: 'js';
-    name: string;
-    class?: string;
-    description?: string;
-    author?: string;
-    version?: string;
-    tags?: string[];
-    supportsDarkMode?: boolean;
-    status?: 'stable' | 'beta' | 'experimental' | 'deprecated';
-    a11y?: {
-        contrastTarget?: number;
-        modes?: string[];
-    };
-    color?: string;
-    features?: string[];
-    dependencies?: string[];
-    createTheme: () => Theme;
-}
-/**
- * Theme Definition (CSS or JS)
- */
-type ThemeDefinition = CSSThemeDefinition | JSThemeDefinition;
-/**
- * Build configuration (migrated from theme.config.ts)
- */
-interface BuildConfig {
-    output?: {
-        directory?: string;
-        formats?: {
-            expanded?: string;
-            compressed?: string;
-        };
-    };
-    sass?: {
-        style?: 'expanded' | 'compressed';
-        sourceMap?: boolean;
-        loadPaths?: string[];
-    };
+interface ComponentThemeOptions {
+    component: string;
+    variant?: string;
+    size?: string;
+    tokens?: Partial<DesignTokens>;
 }
 /**
- * Runtime configuration (migrated from theme.config.ts)
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
  */
-interface RuntimeConfig {
-    basePath?: string;
-    cdnPath?: string | null;
-    preload?: string[];
-    lazy?: boolean;
-    defaultTheme?: string;
-    storageKey?: string;
-    dataAttribute?: string;
-    enablePersistence?: boolean;
-    useMinified?: boolean;
-}
+declare function getComponentThemeValue(component: string, property: string, variant?: string, size?: string): string;
 /**
- * Integration settings (migrated from theme.config.ts)
+ * Generate component-specific CSS variables from DesignTokens
  */
-interface IntegrationConfig {
-    cssVariables?: Record<string, string>;
-    classNames?: {
-        theme?: string;
-        colorMode?: string;
-    };
-}
-
+declare function generateComponentCSSVars(component: string, tokens?: Partial<DesignTokens>, variant?: string, size?: string): Record<string, string>;
 /**
- * Theme Configuration Types
- *
- * Type definitions for the theme configuration system
+ * Apply consistent theme to component style object using DesignTokens
  */
-
-/**
- * Loaded and validated theme configuration
- */
-interface LoadedThemeConfig {
-    /** Registered themes */
-    themes: Record<string, ThemeDefinition>;
-    /** Build configuration */
-    build: BuildConfig;
-    /** Runtime configuration */
-    runtime: RuntimeConfig;
-    /** Integration settings */
-    integration: IntegrationConfig;
-    /** Theme dependencies mapping */
-    dependencies: Record<string, string[]>;
-    /** Whether config was validated */
-    validated: boolean;
-    /** Validation errors (if any) */
-    errors?: string[];
-    /** Validation warnings (if any) */
-    warnings?: string[];
-    /** Internal tokens (for generator) */
-    __tokens?: any;
-    /** Internal extensions (for generator) */
-    __extend?: any;
-}
-
+declare function applyComponentTheme(component: string, style?: React.CSSProperties, variant?: string, size?: string, tokens?: Partial<DesignTokens>): React.CSSProperties;
 /**
- * Theme Registry
- *
- * Central registry for all themes with discovery and dependency management
+ * Create a hook for consistent component theming
  */
-
-/**
- * Registry entry
- */
-interface RegistryEntry {
-    /** Theme ID */
-    id: string;
-    /** Theme definition from config */
-    definition: ThemeDefinition;
-    /** Resolved theme object (for JS themes) */
-    theme?: Theme;
-    /** Whether theme is loaded */
-    loaded: boolean;
-    /** Loading promise (if currently loading) */
-    loading?: Promise<Theme | void>;
-    /** Dependencies */
-    dependencies: string[];
-    /** Dependent themes (themes that depend on this one) */
-    dependents: string[];
-}
-/**
- * Theme Registry
- *
- * Manages theme registration, discovery, and dependency resolution
- */
-declare class ThemeRegistry {
-    private entries;
-    private config;
-    private initialized;
-    /**
-     * Initialize registry from config
-     */
-    initialize(config?: LoadedThemeConfig): Promise<void>;
-    /**
-     * Register a theme
-     */
-    register(themeId: string, definition: ThemeDefinition): void;
-    /**
-     * Get theme entry
-     */
-    get(themeId: string): RegistryEntry | undefined;
-    /**
-     * Check if theme exists
-     */
-    has(themeId: string): boolean;
-    /**
-     * Get all theme IDs
-     */
-    getAllIds(): string[];
-    /**
-     * Get all theme metadata
-     */
-    getAllMetadata(): ThemeMetadata[];
-    /**
-     * Get theme definition
-     */
-    getDefinition(themeId: string): ThemeDefinition | undefined;
-    /**
-     * Check if a theme is loaded
-     */
-    isThemeLoaded(themeId: string): boolean;
-    /**
-     * Mark a theme as loaded
-     */
-    markLoaded(themeId: string, theme?: Theme): void;
-    /**
-     * Get theme object (for JS themes)
-     */
-    getTheme(themeId: string): Theme | undefined;
-    /**
-     * Get dependencies for a theme
-     */
-    getDependencies(themeId: string): string[];
-    /**
-     * Get dependents for a theme (themes that depend on this one)
-     */
-    getDependents(themeId: string): string[];
-    /**
-     * Resolve all dependencies in correct order
-     */
-    resolveDependencyOrder(themeId: string): string[];
-    /**
-     * Resolve dependencies and build dependency graph
-     */
-    private resolveDependencies;
-    /**
-     * Validate all themes
-     */
-    validate(): {
-        valid: boolean;
-        errors: string[];
-    };
-    /**
-     * Clear registry
-     */
-    clear(): void;
-}
-
-/**
- * CSS File Utilities
- *
- * Save CSS to file system (Node.js only).
- */
-/**
- * Save CSS to file
- *
- * Writes CSS string to a file. Only works in Node.js environment.
- *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
- *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * await saveCSSFile(css, './themes/custom.css');
- * ```
- */
-declare function saveCSSFile(css: string, filePath: string): Promise<void>;
-/**
- * Save CSS to file (synchronous version)
- *
- * Synchronous version of saveCSSFile. Only works in Node.js environment.
- *
- * @param css - CSS string to save
- * @param filePath - Output file path
- * @throws Error if called in browser environment
- */
-declare function saveCSSFileSync(css: string, filePath: string): void;
+declare function useComponentTheme(component: string, variant?: string, size?: string, tokens?: Partial<DesignTokens>): (property: string) => string;
 
 /**
  * CSS Injection Utilities
@@ -1304,78 +1044,49 @@ declare function removeCSS(id?: string): void;
 declare function isCSSInjected(id?: string): boolean;
 
 /**
- * Config Loader
+ * Theme Configuration Loader
  *
- * Load design tokens from atomix.config.ts and convert to flat token format.
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
  */
 
 /**
- * Load theme tokens from atomix.config.ts
- *
- * Loads atomix.config.ts and extracts theme tokens.
- * Config file is required - throws error if not found.
- *
- * @param configPath - Optional custom config path (default: 'atomix.config.ts')
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
- *
- * @example
- * ```typescript
- * const tokens = await loadThemeFromConfig();
- * const css = createTheme(tokens);
- * injectTheme(css);
- * ```
+ * Load theme from config file (synchronous, Node.js only)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns DesignTokens from theme configuration
+ * @throws Error if config loading is not available in browser environment
  */
-declare function loadThemeFromConfig(configPath?: string): Promise<Partial<DesignTokens>>;
+declare function loadThemeFromConfigSync(options?: {
+    configPath?: string;
+    required?: boolean;
+}): DesignTokens;
 /**
- * Load theme tokens from atomix.config.ts (synchronous version)
- *
- * Synchronous version that uses require() instead of dynamic import.
- * Only works in Node.js environment.
- * Config file is required - throws error if not found.
- *
- * @param configPath - Optional custom config path
- * @returns Partial DesignTokens from config
- * @throws Error if config file is not found or cannot be loaded
+ * Load theme from config file (asynchronous)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns Promise resolving to DesignTokens from theme configuration
  */
-declare function loadThemeFromConfigSync(configPath?: string): Partial<DesignTokens>;
+declare function loadThemeFromConfig(options?: {
+    configPath?: string;
+    required?: boolean;
+}): Promise<DesignTokens>;
 
 /**
  * Theme Provider
  *
- * React context provider for theme management
+ * React context provider for theme management with separated concerns
+ * Updated to use the new simplified theme system
  */
 
 /**
- * ThemeProvider component
- *
- * Provides theme context to child components and manages theme state.
- *
- * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
- * Config file is required when `defaultTheme` is not provided.
- *
- * @example
- * ```tsx
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * Theme Provider
  *
- * // Loads from atomix.config.ts (config file required)
- * function App() {
- *   return (
- *     <ThemeProvider>
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
+ * 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
  *
- * // Provide explicit theme (bypasses config)
- * function App() {
- *   return (
- *     <ThemeProvider defaultTheme="dark">
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
- * ```
+ * Falls back to 'default' theme if no configuration is found.
  */
 declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
 
@@ -1408,6 +1119,38 @@ declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
  */
 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 = {
+    theme: string;
+    activeTokens: DesignTokens | null;
+    getToken: (tokenName: string, fallback?: string) => string;
+    colors: {
+        primary: string;
+        secondary: string;
+        error: string;
+        success: string;
+        warning: string;
+        info: string;
+        light: string;
+        dark: string;
+    };
+    spacing: Record<string, string>;
+    borderRadius: Record<string, string>;
+    typography: {
+        fontFamily: Record<string, string>;
+        fontSize: Record<string, string>;
+        fontWeight: Record<string, string>;
+    };
+    shadows: Record<string, string>;
+    transitions: Record<string, string>;
+};
+declare function useThemeTokens(): ThemeTokens;
+
 /**
  * Theme context with default values
  */
@@ -1480,35 +1223,16 @@ declare class ThemeApplicator {
     private styleId;
     constructor(root?: HTMLElement);
     /**
-     * Apply a complete theme configuration
+     * Apply a complete theme configuration using DesignTokens
      *
-     * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+     * Uses the unified theme system to generate and inject CSS.
      * Automatically respects atomix.config.ts when using DesignTokens.
      */
-    applyTheme(theme: Theme | DesignTokens): void;
-    /**
-     * Apply DesignTokens using unified theme system
-     *
-     * Uses createTheme() which automatically loads from atomix.config.ts
-     * if no tokens are provided, ensuring config is always respected.
-     */
-    private applyDesignTokens;
+    applyTheme(tokens: Partial<DesignTokens>): void;
     /**
-     * Check if object is DesignTokens
-     */
-    private isDesignTokens;
-    /**
-     * Apply global CSS variables (for component overrides)
+     * Apply global CSS variables
      */
     private applyGlobalCSSVars;
-    /**
-     * Apply component-level overrides
-     */
-    private applyComponentOverrides;
-    /**
-     * Apply override for a specific component
-     */
-    private applyComponentOverride;
     /**
      * Clear all applied CSS variables
      */
@@ -1529,7 +1253,7 @@ declare function getThemeApplicator(): ThemeApplicator;
 /**
  * Apply theme using global applicator
  */
-declare function applyTheme(theme: Theme): void;
+declare function applyTheme(tokens: Partial<DesignTokens>): void;
 
 /**
  * Theme Preview Component
@@ -1794,22 +1518,6 @@ declare function useHistory<T>(options?: UseHistoryOptions): UseHistoryReturn<T>
  * Converts between Theme objects and DesignTokens.
  */
 
-/**
- * Convert Theme object to DesignTokens
- *
- * Extracts values from a Theme object and converts them to flat DesignTokens format.
- *
- * @param theme - Theme object to convert
- * @returns Partial DesignTokens object
- *
- * @example
- * ```typescript
- * const theme = createTheme({ palette: { primary: { main: '#7c3aed' } } });
- * const tokens = themeToDesignTokens(theme);
- * // Returns: { 'primary': '#7c3aed', ... }
- * ```
- */
-declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
 /**
  * Convert DesignTokens to Theme-compatible CSS variables
  *
@@ -1817,22 +1525,6 @@ declare function themeToDesignTokens(theme: Theme): Partial<DesignTokens>;
  * @returns CSS variables object compatible with Theme.cssVars
  */
 declare function designTokensToCSSVars(tokens: Partial<DesignTokens>): Record<string, string>;
-/**
- * Create DesignTokens from Theme with defaults
- *
- * Converts a Theme to DesignTokens and merges with default tokens.
- *
- * @param theme - Theme object to convert
- * @returns Complete DesignTokens object
- */
-declare function createDesignTokensFromTheme(theme: Theme): DesignTokens;
-/**
- * Create a minimal Theme object from DesignTokens
- *
- * @param tokens - DesignTokens to convert
- * @returns Minimal Theme object with cssVars populated
- */
-declare function designTokensToTheme(tokens: Partial<DesignTokens>): Partial<Theme>;
 
 /**
  * CSS Variable Mapper
@@ -1866,25 +1558,6 @@ interface CSSVariableNamingOptions {
     /** Whether to include component name in variable (default: true) */
     includeComponent?: boolean;
 }
-/**
- * Generate CSS variable name from parts
- *
- * @example
- * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
- * // Returns: '--atomix-button-bg'
- */
-declare function generateCSSVariableName(component: string, property: string, options?: CSSVariableNamingOptions): string;
-/**
- * Generate CSS variables object from configuration
- *
- * @example
- * const vars = generateComponentCSSVars({
- *   component: 'button',
- *   properties: { bg: '#000', color: '#fff' }
- * })
- * // Returns: { '--atomix-button-bg': '#000', '--atomix-button-color': '#fff' }
- */
-declare function generateComponentCSSVars(config: CSSVariableConfig, options?: CSSVariableNamingOptions): Record<string, string>;
 /**
  * Map SCSS tokens to CSS custom properties
  *
@@ -1897,8 +1570,8 @@ declare function mapSCSSTokensToCSSVars(tokens: Record<string, any>, options?: C
 /**
  * Apply CSS variables to an element
  *
- * @param element - Target element (defaults to document.documentElement)
  * @param vars - CSS variables to apply
+ * @param element - Target element (defaults to document.documentElement)
  */
 declare function applyCSSVariables(vars: Record<string, string | number>, element?: HTMLElement): void;
 /**
@@ -1946,27 +1619,9 @@ declare function extractComponentName(varName: string, prefix?: string): string
 /**
  * Theme Helper Functions
  *
- * Utility functions for working with themes and DesignTokens
+ * Utility functions for working with DesignTokens
  */
 
-/**
- * Get DesignTokens from current theme
- *
- * Converts a Theme object to DesignTokens. Useful when you need to
- * work with DesignTokens but have a Theme object.
- *
- * @param theme - Theme object to convert
- * @returns DesignTokens object
- *
- * @example
- * ```typescript
- * // If you have a Theme object, convert it to DesignTokens
- * const tokens = getDesignTokensFromTheme(theme);
- * // Now you can use tokens with unified theme system
- * const css = createTheme(tokens);
- * ```
- */
-declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | null;
 /**
  * Check if a value is DesignTokens
  *
@@ -1976,15 +1631,6 @@ declare function getDesignTokensFromTheme(theme: Theme | null): DesignTokens | n
  * @returns True if value is DesignTokens
  */
 declare function isDesignTokens(value: unknown): value is DesignTokens;
-/**
- * Check if a value is a Theme object
- *
- * Type guard to check if an object is a Theme.
- *
- * @param value - Value to check
- * @returns True if value is Theme
- */
-declare function isThemeObject(value: unknown): value is Theme;
 
 /**
  * RTL (Right-to-Left) Support Utilities
@@ -2088,13 +1734,13 @@ declare class RTLManager {
 /**
  * Theme System Exports
  *
- * Unified theme system - handles both DesignTokens and Theme objects.
+ * Simplified theme system using DesignTokens only.
  *
  * @example
  * ```typescript
  * import { createTheme, injectTheme } from '@shohojdhara/atomix/theme';
  *
- * // Using DesignTokens (recommended - flat structure)
+ * // Using DesignTokens
  * const css = createTheme({ 'primary': '#7AFFD7', 'spacing-4': '1rem' });
  * injectTheme(css);
  *
@@ -2118,5 +1764,5 @@ declare function removeTheme(id?: string): void;
  */
 declare function saveTheme(css: string, filePath: string): Promise<void>;
 
-export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeRegistry, ThemeValidator, applyCSSVariables, applyTheme, createDesignTokensFromTheme, createTheme, createThemeObject, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, getCSSVariable, getDesignTokensFromTheme, getThemeApplicator, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, removeCSS, removeCSSVariables, removeTheme, saveCSSFile, saveCSSFileSync, saveTheme, themeToDesignTokens, useHistory, useTheme };
-export type { A11yIssue, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOverride, DesignTokens, GenerateCSSVariablesOptions, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemeMetadata, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseHistoryOptions, UseHistoryReturn, UseThemeReturn, ValidationResult };
+export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createTheme, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS, injectTheme, isCSSInjected, isDesignTokens, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
+export type { A11yIssue, CSSVariableConfig, CSSVariableNamingOptions, ComponentThemeOptions, ComponentThemeOverride, DesignTokens, GenerateCSSVariablesOptions, NamingOptions, RTLConfig, Theme, ThemeChangeEvent, ThemeComparatorProps, ThemeComponentOverrides, ThemeContextValue, ThemeErrorBoundaryProps, ThemeInspectorProps, ThemeLiveEditorProps, ThemeLoadOptions, ThemePreviewProps, ThemeProviderProps, ThemeValidationResult, UseHistoryOptions, UseHistoryReturn, UseThemeReturn, ValidationResult };