@shohojdhara/atomix 0.3.6 → 0.3.7

package/dist/theme.js

@@ -849,13 +849,6 @@ const _includesInstanceProperty =  getDefaultExportFromCjs((function(it) {
  * @param coefficient - Amount to emphasize (0-1), default 0.15
  * @returns Emphasized hex color
  */
-/**
- * Check if a theme is a JS theme (created with createTheme)
- */
-function isJSTheme(theme) {
-    return theme && "object" == typeof theme && !0 === theme.__isJSTheme;
-}
-
 /**
  * Theme Adapter
  *
@@ -875,7 +868,8 @@ function isJSTheme(theme) {
  * const tokens = themeToDesignTokens(theme);
  * // Returns: { 'primary': '#7c3aed', ... }
  * ```
- */ function themeToDesignTokens(theme) {
+ */
+function themeToDesignTokens(theme) {
     const tokens = {};
     // Convert palette colors
         if (theme.palette) {
@@ -1015,158 +1009,10 @@ function isJSTheme(theme) {
     };
 }
 
-/**
- * Config Loader
- *
- * Load design tokens from atomix.config.ts and convert to flat token format.
- */
-/**
- * Convert nested config tokens to flat DesignTokens format
- *
- * Handles conversion from atomix.config.ts structure to flat tokens.
- * Maps config structure to actual DesignTokens key names.
- */ function flattenConfigTokens(tokens, prefix = "atomix") {
-    const flat = {};
-    // Colors
-        return tokens.colors && Object.entries(tokens.colors).forEach((([key, value]) => {
-        var _context;
-        // Simple color: 'primary': '#7AFFD7'
-        // Map directly to DesignTokens keys (e.g., 'primary', 'secondary', 'error')
-        // Only map if it's a valid semantic color key
-                if ("string" == typeof value) _includesInstanceProperty(_context = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context, key) && (flat[key] = value); else if (value && "object" == typeof value) 
-        // Color scale or palette
-        if ("main" in value) {
-            var _context2;
-            // PaletteColorOptions: { main: '#7AFFD7', light?: '#...', dark?: '#...' }
-                        const palette = value, baseKey = key;
-            // Map main to base color (e.g., primary, secondary, error)
-            _includesInstanceProperty(_context2 = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context2, key) && (flat[baseKey] = palette.main, 
-            // Map light/dark to appropriate scale values
-            // light typically maps to step 3, dark to step 9
-            palette.light && (flat[`${key}-3`] = palette.light), palette.dark && (flat[`${key}-9`] = palette.dark));
-        } else 
-        // Color scale: { 1: '#fff', 2: '#eee', ..., 6: '#main', ... }
-        // Or full scale: { 1: '#...', 2: '#...', ..., 10: '#...' }
-        Object.entries(value).forEach((([scaleKey, scaleValue]) => {
-            if ("string" == typeof scaleValue) 
-            // Map scale keys to DesignTokens format
-            if ("main" === scaleKey || "6" === scaleKey) {
-                var _context3, _context4;
-                // Main color maps to base key (e.g., 'primary')
-                                _includesInstanceProperty(_context3 = [ "primary", "secondary", "success", "info", "warning", "error", "light", "dark" ]).call(_context3, key) && (flat[key] = scaleValue), 
-                // Also map to step 6 if it's a scale color
-                _includesInstanceProperty(_context4 = [ "primary", "red", "green", "blue", "yellow", "gray" ]).call(_context4, key) && (flat[`${key}-6`] = scaleValue);
-            } else {
-                // Map scale numbers (1-10) to DesignTokens format
-                const scaleNum = parseInt(scaleKey, 10);
-                !isNaN(scaleNum) && scaleNum >= 1 && scaleNum <= 10 && (flat[`${key}-${scaleKey}`] = scaleValue);
-            }
-        }));
-    })), 
-    // Spacing
-    tokens.spacing && Object.entries(tokens.spacing).forEach((([key, value]) => {
-        flat[`spacing-${key}`] = String(value);
-    })), 
-    // Border Radius
-    tokens.borderRadius && Object.entries(tokens.borderRadius).forEach((([key, value]) => {
-        // Map to DesignTokens format
-        "sm" === key || "base" === key || "" === key ? flat["border-radius-sm"] = String(value) : "md" === key || "default" === key ? flat["border-radius"] = String(value) : "lg" === key ? flat["border-radius-lg"] = String(value) : flat[`border-radius-${key}`] = String(value);
-    })), 
-    // Typography
-    tokens.typography && (
-    // Font Families
-    tokens.typography.fontFamilies && Object.entries(tokens.typography.fontFamilies).forEach((([key, value]) => {
-        // Map to DesignTokens format
-        "sans" === key || "base" === key ? (flat["font-sans-serif"] = String(value), flat["body-font-family"] = String(value)) : "mono" === key ? flat["font-monospace"] = String(value) : flat[`font-family-${key}`] = String(value);
-    })), 
-    // Font Sizes
-    tokens.typography.fontSizes && Object.entries(tokens.typography.fontSizes).forEach((([key, value]) => {
-        flat[`font-size-${key}`] = String(value);
-    })), 
-    // Font Weights
-    tokens.typography.fontWeights && Object.entries(tokens.typography.fontWeights).forEach((([key, value]) => {
-        flat[`font-weight-${key}`] = String(value);
-    })), 
-    // Line Heights
-    tokens.typography.lineHeights && Object.entries(tokens.typography.lineHeights).forEach((([key, value]) => {
-        "base" === key || "default" === key ? flat["line-height-base"] = String(value) : flat[`line-height-${key}`] = String(value);
-    }))), 
-    // Shadows
-    tokens.shadows && Object.entries(tokens.shadows).forEach((([key, value]) => {
-        flat[`shadow-${key}`] = String(value);
-    })), 
-    // Z-Index
-    tokens.zIndex && Object.entries(tokens.zIndex).forEach((([key, value]) => {
-        flat[`z-index-${key}`] = String(value);
-    })), 
-    // Transitions
-    tokens.transitions && tokens.transitions.durations && Object.entries(tokens.transitions.durations).forEach((([key, value]) => {
-        flat[`transition-${key}`] = String(value);
-    })), flat;
-}
-
-/**
- * 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);
- * ```
- */ async function loadThemeFromConfig(configPath = "atomix.config.ts") {
-    // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // Load config using the existing loader (required)
-        const {loadAtomixConfig: loadAtomixConfig} = await Promise.resolve().then((() => loader)), config = loadAtomixConfig({
-        configPath: configPath,
-        required: !0
-    });
-    if (!config || !config.theme) throw new Error(`Config file ${configPath} does not contain theme configuration.`);
-    // Extract tokens from config
-        const tokens = config.theme.tokens || config.theme.extend || {};
-    if (0 === Object.keys(tokens).length) throw new Error(`Config file ${configPath} has empty theme configuration.`);
-    // Convert nested structure to flat tokens
-        return flattenConfigTokens(tokens, config.prefix || "atomix");
-}
-
-/**
- * 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
- */ function loadThemeFromConfigSync(configPath = "atomix.config.ts") {
-    // In browser environments, config loading is not supported
-    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const {loadAtomixConfig: loadAtomixConfig} = require("../../config/loader"), config = loadAtomixConfig({
-        configPath: configPath,
-        required: !0
-    });
-    if (!config || !config.theme) throw new Error(`Config file ${configPath} does not contain theme configuration.`);
-    // Extract tokens from config
-        const tokens = config.theme.tokens || config.theme.extend || {};
-    if (0 === Object.keys(tokens).length) throw new Error(`Config file ${configPath} has empty theme configuration.`);
-    // Convert nested structure to flat tokens
-        return flattenConfigTokens(tokens, config.prefix || "atomix");
-}
-
 /**
  * Core Theme Functions
  *
- * Unified theme system that handles both DesignTokens and Theme objects.
+ * Simplified 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.
  */
@@ -1200,29 +1046,53 @@ function isJSTheme(theme) {
  * const css = createTheme(undefined, { prefix: 'myapp', selector: ':root' });
  * ```
  */ function createTheme(input, options) {
-    let tokens, configPrefix;
-    // If no input provided, load from config (required)
+    // Determine tokens based on input
+    let tokens;
     if (input) 
-    // Convert Theme to DesignTokens
-    tokens = !0 === input.__isJSTheme || input.palette && input.typography ? themeToDesignTokens(input) : input; else {
-        const configTokens = loadThemeFromConfigSync();
-        // Get prefix from config
-                try {
-            // eslint-disable-next-line @typescript-eslint/no-require-imports
-            const {loadAtomixConfig: loadAtomixConfig} = require("../../config/loader"), config = loadAtomixConfig({
-                configPath: "atomix.config.ts",
-                required: !0
-            });
-            configPrefix = config?.prefix;
+    // Use DesignTokens directly
+    tokens = 
+    // Helper functions to simplify main function
+    function(input) {
+        return !0 === input?.__isJSTheme || input?.palette && input?.typography;
+    }(input) ? themeToDesignTokens(input) : input;
+    // Merge with defaults and generate CSS
+     else {
+        // Check if we're in a browser environment
+        if ("undefined" != typeof window) throw new Error("createTheme: No input provided and config loading is not available in browser environment. Please provide tokens explicitly or use Node.js/SSR environment.");
+        // Load from config when no input provided
+        // Using dynamic import in a way that's more compatible with bundlers
+                let loadThemeFromConfigSync, loadAtomixConfig;
+        try {
+            // Use dynamic require but only in Node.js environments
+            // This approach allows bundlers to properly handle external dependencies
+            const configLoaderModule = require("../config/configLoader"), loaderModule = require("../../config/loader");
+            // Get prefix from config if needed
+            if (loadThemeFromConfigSync = configLoaderModule.loadThemeFromConfigSync, loadAtomixConfig = loaderModule.loadAtomixConfig, 
+            tokens = loadThemeFromConfigSync(), !options?.prefix) try {
+                const config = loadAtomixConfig({
+                    configPath: "atomix.config.ts",
+                    required: !1
+                });
+                options = {
+                    ...options,
+                    prefix: config?.prefix || "atomix"
+                };
+            } catch (error) {
+                // If config loading fails, use default prefix
+                options = {
+                    ...options,
+                    prefix: "atomix"
+                };
+            }
         } catch (error) {
-            // Prefix loading failed, but tokens were loaded, so continue
+            throw new Error("createTheme: No input provided and config loading is not available in this environment. Please provide tokens explicitly.");
         }
-        tokens = configTokens;
     }
-    // Merge with defaults and generate CSS
-        return generateCSSVariables$1(createTokens(tokens), {
+    const allTokens = createTokens(tokens), prefix = options?.prefix ?? "atomix";
+    // Get prefix from options or use default
+        return generateCSSVariables$1(allTokens, {
         ...options,
-        prefix: options?.prefix ?? configPrefix ?? "atomix"
+        prefix: prefix
     });
 }
 
@@ -1283,7 +1153,7 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
 /**
  * Theme Composition Utilities
  *
- * Utilities for composing, merging, and extending themes.
+ * Simplified utilities for composing, merging, and extending themes.
  */
 // ============================================================================
 // Deep Merge Utility
@@ -1349,60 +1219,14 @@ const _reduceInstanceProperty =  getDefaultExportFromCjs((function(it) {
  * });
  * ```
  */ function extendTheme(baseTheme, extension) {
-    /**
- * Extract theme options from a complete Theme object
- */
-    var theme;
-    // ============================================================================
-    // Default Theme Values
-    // ============================================================================
-        return createThemeObject(mergeTheme(baseTheme.__isJSTheme ? {
-        name: (theme = baseTheme).name,
-        class: theme.class,
-        description: theme.description,
-        author: theme.author,
-        version: theme.version,
-        tags: theme.tags,
-        supportsDarkMode: theme.supportsDarkMode,
-        status: theme.status,
-        a11y: theme.a11y,
-        color: theme.color,
-        features: theme.features,
-        dependencies: theme.dependencies,
-        palette: {
-            primary: theme.palette.primary,
-            secondary: theme.palette.secondary,
-            error: theme.palette.error,
-            warning: theme.palette.warning,
-            info: theme.palette.info,
-            success: theme.palette.success,
-            background: theme.palette.background,
-            text: theme.palette.text
-        },
-        typography: {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize,
-            fontWeightLight: theme.typography.fontWeightLight,
-            fontWeightRegular: theme.typography.fontWeightRegular,
-            fontWeightMedium: theme.typography.fontWeightMedium,
-            fontWeightSemiBold: theme.typography.fontWeightSemiBold,
-            fontWeightBold: theme.typography.fontWeightBold,
-            h1: theme.typography.h1,
-            h2: theme.typography.h2,
-            h3: theme.typography.h3,
-            h4: theme.typography.h4,
-            h5: theme.typography.h5,
-            h6: theme.typography.h6,
-            body1: theme.typography.body1,
-            body2: theme.typography.body2
-        },
-        shadows: theme.shadows,
-        transitions: theme.transitions,
-        zIndex: theme.zIndex,
-        custom: theme.custom
+    return createThemeObject(mergeTheme(baseTheme.__isJSTheme ? {
+        ...baseTheme
     } : baseTheme, extension));
 }
 
+// ============================================================================
+// Default Theme Values
+// ============================================================================
 const DEFAULT_PALETTE = {
     primary: {
         main: "#7c3aed",
@@ -1664,7 +1488,10 @@ function createThemeObject(...options) {
         "number" == typeof spacingInput ? (...values) => 0 === values.length ? "0px" : values.map((value => value * spacingInput + "px")).join(" ") : 
         // If it's an array, use it as a scale
         Array.isArray(spacingInput) ? (...values) => 0 === values.length ? "0px" : values.map((value => `${spacingInput[value] || value}px`)).join(" ") : (...values) => 0 === values.length ? "0px" : values.map((value => 4 * value + "px")).join(" ");
-    }(mergedOptions.spacing), breakpoints = function(breakpointsInput) {
+    }
+    /**
+ * Check if a theme is a JS theme (created with createTheme)
+ */ (mergedOptions.spacing), breakpoints = function(breakpointsInput) {
         const values = {
             xs: 0,
             sm: 576,
@@ -1724,736 +1551,113 @@ function createThemeObject(...options) {
 }
 
 /**
- * Theme Configuration Validator
- *
- * Validates theme configuration structure and values
- */
-/**
- * Validate theme configuration
- *
- * @param config - Configuration to validate
- * @returns Validation result with errors and warnings
- */
-/**
- * Validate CSS theme
- */
-function validateCSSTheme(themeId, theme) {
-    const errors = [];
-    // CSS themes don't require createTheme function
-    // But can have optional cssPath
-    return {
-        valid: 0 === errors.length,
-        errors: errors,
-        warnings: []
-    };
+ * Create a new theme registry
+ */ function createThemeRegistry() {
+    return {};
 }
 
 /**
- * Validate JS theme
- */ function validateJSTheme(themeId, theme) {
-    const errors = [];
-    // JS themes must have createTheme function
-    return theme.createTheme && "function" == typeof theme.createTheme || errors.push(`JS theme "${themeId}" must have a "createTheme" function`), 
-    {
-        valid: 0 === errors.length,
-        errors: errors,
-        warnings: []
-    };
+ * Register a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ * @param metadata - Theme metadata
+ */ function registerTheme(registry, id, metadata) {
+    registry[id] = metadata;
 }
 
 /**
- * Validate build configuration
- */
-/**
- * Theme System Error Handling
- *
- * Centralized error handling for the Atomix theme system.
- * Provides custom error classes and logging utilities.
- */
-/**
- * Theme error codes
- */
-var ThemeErrorCode, LogLevel;
-
-!function(ThemeErrorCode) {
-    /** Theme not found in registry */
-    ThemeErrorCode.THEME_NOT_FOUND = "THEME_NOT_FOUND", 
-    /** Theme failed to load */
-    ThemeErrorCode.THEME_LOAD_FAILED = "THEME_LOAD_FAILED", 
-    /** Theme validation failed */
-    ThemeErrorCode.THEME_VALIDATION_FAILED = "THEME_VALIDATION_FAILED", 
-    /** Configuration loading failed */
-    ThemeErrorCode.CONFIG_LOAD_FAILED = "CONFIG_LOAD_FAILED", 
-    /** Configuration validation failed */
-    ThemeErrorCode.CONFIG_VALIDATION_FAILED = "CONFIG_VALIDATION_FAILED", 
-    /** Circular dependency detected */
-    ThemeErrorCode.CIRCULAR_DEPENDENCY = "CIRCULAR_DEPENDENCY", 
-    /** Missing dependency */
-    ThemeErrorCode.MISSING_DEPENDENCY = "MISSING_DEPENDENCY", 
-    /** Storage operation failed */
-    ThemeErrorCode.STORAGE_ERROR = "STORAGE_ERROR", 
-    /** Invalid theme name */
-    ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
-    /** CSS injection failed */
-    ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
-    /** Unknown error */
-    ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
-}(ThemeErrorCode || (ThemeErrorCode = {}));
-
-/**
- * Custom error class for theme-related errors
- */
-class ThemeError extends Error {
-    constructor(message, code = ThemeErrorCode.UNKNOWN_ERROR, context) {
-        super(message), this.name = "ThemeError", this.code = code, this.context = context, 
-        this.timestamp = Date.now(), 
-        // Maintains proper stack trace for where our error was thrown (only available on V8)
-        Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
-    }
-    /**
-   * Convert error to JSON for logging
-   */    toJSON() {
-        return {
-            name: this.name,
-            message: this.message,
-            code: this.code,
-            context: this.context,
-            timestamp: this.timestamp,
-            stack: this.stack
-        };
-    }
+ * Unregister a theme
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function unregisterTheme(registry, id) {
+    const exists = id in registry;
+    return delete registry[id], exists;
 }
 
 /**
- * Log level
- */ !function(LogLevel) {
-    LogLevel[LogLevel.ERROR = 0] = "ERROR", LogLevel[LogLevel.WARN = 1] = "WARN", LogLevel[LogLevel.INFO = 2] = "INFO", 
-    LogLevel[LogLevel.DEBUG = 3] = "DEBUG";
-}(LogLevel || (LogLevel = {}));
-
-/**
- * Theme Logger
- *
- * Centralized logging for the theme system.
- * Replaces console statements with structured logging.
- */
-class ThemeLogger {
-    constructor(config = {}) {
-        this.config = {
-            level: config.level ?? ("production" === process.env.NODE_ENV ? LogLevel.WARN : LogLevel.INFO),
-            enableConsole: config.enableConsole ?? !0,
-            onError: config.onError,
-            onWarn: config.onWarn,
-            onInfo: config.onInfo,
-            onDebug: config.onDebug
-        };
-    }
-    /**
-   * Log an error
-   */    error(message, error, context) {
-        if (this.config.level < LogLevel.ERROR) return;
-        const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
-        this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
-            error: errorObj,
-            context: {
-                ...context,
-                ...themeError.context
-            },
-            code: themeError.code
-        }), this.config.onError?.(themeError, context);
-    }
-    /**
-   * Log a warning
-   */    warn(message, context) {
-        this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
-        this.config.onWarn?.(message, context));
-    }
-    /**
-   * Log an info message
-   */    info(message, context) {
-        this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
-        this.config.onInfo?.(message, context));
-    }
-    /**
-   * Log a debug message
-   */    debug(message, context) {
-        this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
-    }
+ * Check if a theme is registered
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function hasTheme(registry, id) {
+    return id in registry;
 }
 
 /**
- * Default logger instance
- */ let defaultLogger = null;
+ * Get theme metadata
+ * @param registry - Theme registry object
+ * @param id - Theme identifier
+ */ function getTheme(registry, id) {
+    return registry[id];
+}
 
 /**
- * Get or create default logger
- */ function getLogger() {
-    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
+ * Get all registered theme metadata
+ * @param registry - Theme registry object
+ */ function getAllThemes(registry) {
+    return Object.values(registry);
 }
 
 /**
- * Theme System Constants
- *
- * Centralized constants for the theme system to avoid magic numbers and strings.
- */
-/**
- * Default storage key for theme persistence
- */ const DEFAULT_ATOMIX_CONFIG_PATH = "atomix.config.ts";
+ * Get all registered theme IDs
+ * @param registry - Theme registry object
+ */ function getThemeIds(registry) {
+    return Object.keys(registry);
+}
 
 /**
- * Default data attribute name for theme
- */ process.env.NODE_ENV;
+ * Clear all registered themes
+ * @param registry - Theme registry object
+ */ function clearThemes(registry) {
+    Object.keys(registry).forEach((key => delete registry[key]));
+}
 
 /**
- * Integration default class names
- */
-const DEFAULT_INTEGRATION_CLASS_NAMES = {
-    theme: "data-theme",
-    colorMode: "data-atomix-color-mode"
-}, DEFAULT_INTEGRATION_CSS_VARIABLES = {
-    colorMode: "--storybook-color-mode"
-}, DEFAULT_SASS_CONFIG = {
-    style: "expanded",
-    sourceMap: !0,
-    loadPaths: [ "src" ]
-};
+ * Get the number of registered themes
+ * @param registry - Theme registry object
+ */ function getThemeCount(registry) {
+    return Object.keys(registry).length;
+}
 
 /**
- * Integration default CSS variables
- */
-/**
- * Theme Configuration Loader
+ * CSS Injection Utilities
  *
- * Loads and validates the theme configuration from atomix.config.ts
- */
-/**
- * Cache for loaded configuration
+ * Inject CSS into HTML head via <style> element.
  */
-let cachedConfig = null;
-
 /**
- * Logger instance
- */ const logger = getLogger();
+ * Check if running in browser environment
+ */ function isBrowser$1() {
+    return "undefined" != typeof document;
+}
 
 /**
- * Load theme configuration from atomix.config.ts
+ * Inject CSS into HTML head via <style> element
  *
- * @param options - Loader options
- * @returns Loaded and validated theme configuration
+ * Creates or updates a style element in the document head.
+ * If an element with the same ID exists, it will be updated.
+ *
+ * @param css - CSS string to inject
+ * @param id - Style element ID (default: 'atomix-theme')
  *
  * @example
  * ```typescript
- * import { loadThemeConfig } from '@shohojdhara/atomix/theme/config';
- * const config = loadThemeConfig();
+ * const css = ':root { --atomix-color-primary: #7AFFD7; }';
+ * injectCSS(css);
+ *
+ * // With custom ID
+ * injectCSS(css, 'my-custom-theme');
  * ```
- */
+ */ function injectCSS$1(css, id = "atomix-theme") {
+    if (!isBrowser$1()) return void console.warn("injectCSS: Not in browser environment, CSS not injected");
+    let styleElement = document.getElementById(id);
+    styleElement || (styleElement = document.createElement("style"), styleElement.id = id, 
+    styleElement.setAttribute("data-atomix-theme", "true"), document.head.appendChild(styleElement)), 
+    styleElement.textContent = css;
+}
+
 /**
- * Theme Registry
+ * Remove injected CSS from DOM
  *
- * Manages theme registration, discovery, and dependency resolution
- */
-class ThemeRegistry {
-    constructor() {
-        this.entries = new Map, this.config = null, this.initialized = !1;
-    }
-    /**
-   * Initialize registry from config
-   */    async initialize(config) {
-        if (!this.initialized) {
-            // Load config if not provided
-            if (config) this.config = config; else try {
-                this.config = function(options = {}) {
-                    const {configPath: configPath = DEFAULT_ATOMIX_CONFIG_PATH, validate: validate = !0, env: env = ("undefined" != typeof process && process.env && "production" === process.env.NODE_ENV ? "production" : "development")} = options;
-                    // Return cached config if available
-                                        if (cachedConfig) return cachedConfig;
-                    // Try to load config dynamically
-                                        let config;
-                    try {
-                        // In browser/Vite environment, we can't load config dynamically
-                        if ("undefined" != typeof window) throw new Error("Theme config loading not supported in browser environment");
-                        // In ESM environments, require might be undefined.
-                                                let nodeRequire, configModule;
-                        try {
-                            nodeRequire = require;
-                        } catch {
-                            // require is not defined
-                        }
-                        if (!nodeRequire) throw new Error("Theme config loading not supported in this environment (require is undefined)");
-                        // Try require (Node.js/CommonJS)
-                        try {
-                            // Try relative path first
-                            try {
-                                configModule = nodeRequire("../../../../atomix.config");
-                            } catch {
-                                // If relative path fails, try to resolve from process.cwd()
-                                const path = nodeRequire("path"), fs = nodeRequire("fs");
-                                let configFilePath = path.resolve(process.cwd(), configPath);
-                                // If atomix.config.ts not found at the root, use the default path
-                                                                if (fs.existsSync(configFilePath) || configPath !== DEFAULT_ATOMIX_CONFIG_PATH || (configFilePath = path.resolve(process.cwd(), DEFAULT_ATOMIX_CONFIG_PATH)), 
-                                !fs.existsSync(configFilePath)) throw new Error(`Config file not found: ${configFilePath}`);
-                                {
-                                    const resolvedPath = nodeRequire.resolve(configFilePath);
-                                    nodeRequire.cache && nodeRequire.cache[resolvedPath] && delete nodeRequire.cache[resolvedPath], 
-                                    configModule = nodeRequire(configFilePath);
-                                }
-                            }
-                        } catch (requireError) {
-                            const errorMessage = requireError instanceof Error ? requireError.message : String(requireError);
-                            throw new ThemeError(`Cannot load config: ${errorMessage}`, ThemeErrorCode.CONFIG_LOAD_FAILED, {
-                                configPath: configPath,
-                                error: errorMessage
-                            });
-                        }
-                        const rawConfig = configModule.default || configModule, finalConfig = 
-                        /**
- * Apply environment-specific overrides to configuration
- *
- * @param config - Base configuration
- * @param env - Environment name
- * @returns Configuration with environment overrides applied
- */
-                        function(config, env) {
-                            const overridden = {
-                                ...config
-                            };
-                            // Production overrides
-                                                        return "production" === env && overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                useMinified: !0,
-                                lazy: !0
-                            }), 
-                            // Development overrides
-                            "development" === env && (overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                useMinified: !1,
-                                lazy: !1
-                            }), overridden.build && (overridden.build = {
-                                ...overridden.build,
-                                sass: {
-                                    ...overridden.build.sass,
-                                    sourceMap: !0
-                                }
-                            })), 
-                            // Test overrides
-                            "test" === env && overridden.runtime && (overridden.runtime = {
-                                ...overridden.runtime,
-                                enablePersistence: !1,
-                                preload: []
-                            }), overridden;
-                        }({
-                            themes: rawConfig.theme?.themes || {},
-                            build: rawConfig.build || {},
-                            runtime: rawConfig.runtime || {},
-                            integration: rawConfig.integration || {},
-                            dependencies: rawConfig.dependencies || {},
-                            validated: !1,
-                            // Will be set after validation
-                            // Store tokens for generator
-                            __tokens: rawConfig.theme?.tokens,
-                            __extend: rawConfig.theme?.extend
-                        }, env);
-                        // Process the AtomixConfig structure
-                                                // Validate if requested
-                        let validationResult = null;
-                        validate && (validationResult = function(config) {
-                            const errors = [], warnings = [];
-                            // Validate top-level structure
-                            if (!config || "object" != typeof config) return errors.push("Configuration must be an object"), 
-                            {
-                                valid: !1,
-                                errors: errors,
-                                warnings: warnings
-                            };
-                            // Validate themes
-                                                        if (config.themes && "object" == typeof config.themes) {
-                                const themeErrors = 
-                                /**
- * Validate themes object
- */
-                                function(themes) {
-                                    const errors = [], warnings = [];
-                                    0 === Object.keys(themes).length && warnings.push("No themes defined in configuration");
-                                    for (const [themeId, theme] of Object.entries(themes)) 
-                                    // Validate theme ID
-                                    if (themeId && "string" == typeof themeId) 
-                                    // Validate theme object
-                                    if (theme && "object" == typeof theme) 
-                                    // Validate theme type
-                                    if (!theme.type || "css" !== theme.type && "js" !== theme.type) errors.push(`Theme "${themeId}" must have type "css" or "js"`); else {
-                                        // Validate CSS theme
-                                        if (
-                                        // Validate required fields
-                                        theme.name && "string" == typeof theme.name || errors.push(`Theme "${themeId}" must have a "name" string`), 
-                                        "css" === theme.type) {
-                                            const cssErrors = validateCSSTheme();
-                                            errors.push(...cssErrors.errors), warnings.push(...cssErrors.warnings);
-                                        }
-                                        // Validate JS theme
-                                                                                if ("js" === theme.type) {
-                                            const jsErrors = validateJSTheme(themeId, theme);
-                                            errors.push(...jsErrors.errors), warnings.push(...jsErrors.warnings);
-                                        }
-                                        // Validate accessibility (only critical checks)
-                                                                                theme.a11y?.contrastTarget && ("number" != typeof theme.a11y.contrastTarget || theme.a11y.contrastTarget < 1 || theme.a11y.contrastTarget > 21) && warnings.push(`Theme "${themeId}" has invalid contrast target: ${theme.a11y.contrastTarget}`);
-                                    } else errors.push(`Theme "${themeId}" must be an object`); else errors.push(`Invalid theme ID: ${themeId}`);
-                                    return {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: warnings
-                                    };
-                                }(config.themes);
-                                errors.push(...themeErrors.errors), warnings.push(...themeErrors.warnings);
-                            }
-                            // Validate build config (only if provided)
-                             else errors.push('Configuration must have a "themes" object');
-                            if (config.build) {
-                                const buildErrors = function(build) {
-                                    const errors = [];
-                                    // Only validate structure if provided
-                                    return build.output && "object" != typeof build.output && errors.push("Build output must be an object"), 
-                                    build.sass && "object" != typeof build.sass && errors.push("Build sass config must be an object"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate runtime configuration
- */ (config.build);
-                                errors.push(...buildErrors.errors), warnings.push(...buildErrors.warnings);
-                            }
-                            // Validate runtime config (only if provided)
-                                                        if (config.runtime) {
-                                const runtimeErrors = function(runtime) {
-                                    const errors = [];
-                                    return runtime.basePath && "string" != typeof runtime.basePath && errors.push("Runtime basePath must be a string"), 
-                                    runtime.defaultTheme && "string" != typeof runtime.defaultTheme && errors.push("Runtime defaultTheme must be a string"), 
-                                    runtime.preload && !Array.isArray(runtime.preload) && errors.push("Runtime preload must be an array"), 
-                                    runtime.storageKey && "string" != typeof runtime.storageKey && errors.push("Runtime storageKey must be a string"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate integration configuration
- */ (config.runtime);
-                                errors.push(...runtimeErrors.errors), warnings.push(...runtimeErrors.warnings);
-                            }
-                            // Validate integration config (only if provided)
-                                                        if (config.integration) {
-                                const integrationErrors = function(integration) {
-                                    const errors = [];
-                                    // Only validate structure if provided
-                                    return integration.classNames && "object" != typeof integration.classNames && errors.push("Integration classNames must be an object"), 
-                                    {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: []
-                                    };
-                                }
-                                /**
- * Validate dependencies
- */ (config.integration);
-                                errors.push(...integrationErrors.errors), warnings.push(...integrationErrors.warnings);
-                            }
-                            // Validate dependencies
-                                                        if (config.dependencies) {
-                                const depErrors = function(dependencies, themes) {
-                                    const errors = [], warnings = [];
-                                    for (const [themeId, deps] of Object.entries(dependencies)) 
-                                    // Check if theme exists
-                                    if (themes[themeId]) 
-                                    // Validate dependencies array
-                                    if (Array.isArray(deps)) 
-                                    // Check if all dependencies exist
-                                    for (const dep of deps) themes[dep] || errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`); else errors.push(`Dependencies for "${themeId}" must be an array`); else warnings.push(`Dependencies defined for non-existent theme: ${themeId}`);
-                                    return {
-                                        valid: 0 === errors.length,
-                                        errors: errors,
-                                        warnings: warnings
-                                    };
-                                }(config.dependencies, config.themes || {});
-                                errors.push(...depErrors.errors), warnings.push(...depErrors.warnings);
-                            }
-                            return {
-                                valid: 0 === errors.length,
-                                errors: errors,
-                                warnings: warnings
-                            };
-                        }(finalConfig)), config = {
-                            ...finalConfig,
-                            validated: validate,
-                            errors: validationResult?.errors,
-                            warnings: validationResult?.warnings
-                        };
-                    } catch (error) {
-                        // Fallback: return default config structure
-                        const errorMessage = error instanceof Error ? error.message : String(error);
-                        logger.warn(`Failed to load theme config from ${configPath}`, {
-                            configPath: configPath,
-                            error: errorMessage
-                        }), config = {
-                            themes: {},
-                            build: {
-                                output: {
-                                    directory: "themes",
-                                    formats: {
-                                        expanded: ".css",
-                                        compressed: ".min.css"
-                                    }
-                                },
-                                sass: {
-                                    ...DEFAULT_SASS_CONFIG,
-                                    loadPaths: [ ...DEFAULT_SASS_CONFIG.loadPaths ]
-                                }
-                            },
-                            runtime: {
-                                basePath: "/themes",
-                                cdnPath: null,
-                                preload: [],
-                                lazy: !0,
-                                defaultTheme: "",
-                                // No default - use built-in styles (empty string instead of undefined)
-                                storageKey: "atomix-theme",
-                                dataAttribute: "data-theme",
-                                enablePersistence: !0,
-                                useMinified: "production" === env
-                            },
-                            integration: {
-                                cssVariables: DEFAULT_INTEGRATION_CSS_VARIABLES,
-                                classNames: DEFAULT_INTEGRATION_CLASS_NAMES
-                            },
-                            dependencies: {},
-                            validated: !1,
-                            errors: [ `Failed to load config: ${error instanceof Error ? error.message : String(error)}` ],
-                            warnings: [],
-                            __tokens: {},
-                            __extend: {}
-                        };
-                    }
-                    // Cache the loaded config
-                                        return cachedConfig = config, config;
-                }();
-            } catch (error) {
-                // In browser environments, config loading will fail
-                // Use empty config as fallback
-                this.config = {
-                    themes: {},
-                    build: {
-                        output: {
-                            directory: "themes",
-                            formats: {
-                                expanded: ".css",
-                                compressed: ".min.css"
-                            }
-                        },
-                        sass: {
-                            style: "expanded",
-                            sourceMap: !0,
-                            loadPaths: [ "src" ]
-                        }
-                    },
-                    runtime: {
-                        basePath: "",
-                        defaultTheme: void 0
-                    },
-                    integration: {
-                        cssVariables: {
-                            colorMode: "--color-mode"
-                        },
-                        classNames: {
-                            theme: "data-theme",
-                            colorMode: "data-color-mode"
-                        }
-                    },
-                    dependencies: {},
-                    validated: !1,
-                    errors: [],
-                    warnings: [],
-                    __tokens: {},
-                    __extend: {}
-                };
-            }
-            // Register all themes from config
-                        for (const [themeId, definition] of Object.entries(this.config.themes)) this.register(themeId, definition);
-            // Resolve dependencies
-                        this.resolveDependencies(), this.initialized = !0;
-        }
-    }
-    /**
-   * Register a theme
-   */    register(themeId, definition) {
-        // Get dependencies from config or definition
-        const entry = {
-            id: themeId,
-            definition: definition,
-            loaded: !1,
-            dependencies: [ ...this.config?.dependencies?.[themeId] || definition.dependencies || [] ],
-            dependents: []
-        };
-        this.entries.set(themeId, entry);
-    }
-    /**
-   * Get theme entry
-   */    get(themeId) {
-        return this.entries.get(themeId);
-    }
-    /**
-   * Check if theme exists
-   */    has(themeId) {
-        return this.entries.has(themeId);
-    }
-    /**
-   * Get all theme IDs
-   */    getAllIds() {
-        return Array.from(this.entries.keys());
-    }
-    /**
-   * Get all theme metadata
-   */    getAllMetadata() {
-        return Array.from(this.entries.values()).map((entry => ({
-            id: entry.id,
-            name: entry.definition.name,
-            type: entry.definition.type,
-            class: entry.definition.class,
-            description: entry.definition.description,
-            author: entry.definition.author,
-            version: entry.definition.version,
-            tags: entry.definition.tags,
-            supportsDarkMode: entry.definition.supportsDarkMode,
-            status: entry.definition.status,
-            a11y: entry.definition.a11y,
-            color: entry.definition.color,
-            features: entry.definition.features,
-            dependencies: entry.dependencies
-        })));
-    }
-    /**
-   * Get theme definition
-   */    getDefinition(themeId) {
-        return this.entries.get(themeId)?.definition;
-    }
-    /**
-   * Check if a theme is loaded
-   */    isThemeLoaded(themeId) {
-        const entry = this.entries.get(themeId);
-        return !!entry && entry.loaded;
-    }
-    /**
-   * Mark a theme as loaded
-   */    markLoaded(themeId, theme) {
-        const entry = this.entries.get(themeId);
-        entry && (entry.loaded = !0, theme && (entry.theme = theme));
-    }
-    /**
-   * Get theme object (for JS themes)
-   */    getTheme(themeId) {
-        const entry = this.entries.get(themeId);
-        return entry?.loaded ? entry.theme : void 0;
-    }
-    /**
-   * Get dependencies for a theme
-   */    getDependencies(themeId) {
-        return this.entries.get(themeId)?.dependencies || [];
-    }
-    /**
-   * Get dependents for a theme (themes that depend on this one)
-   */    getDependents(themeId) {
-        return this.entries.get(themeId)?.dependents || [];
-    }
-    /**
-   * Resolve all dependencies in correct order
-   */    resolveDependencyOrder(themeId) {
-        const resolved = [], visited = new Set, visiting = new Set, visit = id => {
-            if (visiting.has(id)) throw new Error(`Circular dependency detected involving theme: ${id}`);
-            if (visited.has(id)) return;
-            visiting.add(id);
-            const entry = this.entries.get(id);
-            if (entry) for (const dep of entry.dependencies) {
-                if (!this.has(dep)) throw new Error(`Theme "${id}" depends on non-existent theme: ${dep}`);
-                visit(dep);
-            }
-            visiting.delete(id), visited.add(id), resolved.push(id);
-        };
-        return visit(themeId), resolved;
-    }
-    /**
-   * Resolve dependencies and build dependency graph
-   */    resolveDependencies() {
-        // Build dependents map
-        for (const entry of this.entries.values()) for (const dep of entry.dependencies) {
-            const depEntry = this.entries.get(dep);
-            var _context;
-            depEntry && (_includesInstanceProperty(_context = depEntry.dependents).call(_context, entry.id) || depEntry.dependents.push(entry.id));
-        }
-    }
-    /**
-   * Validate all themes
-   */    validate() {
-        const errors = [];
-        // Check for circular dependencies
-                for (const themeId of this.entries.keys()) try {
-            this.resolveDependencyOrder(themeId);
-        } catch (error) {
-            errors.push(error instanceof Error ? error.message : String(error));
-        }
-        // Check for missing dependencies
-                for (const [themeId, entry] of this.entries.entries()) for (const dep of entry.dependencies) this.has(dep) || errors.push(`Theme "${themeId}" depends on non-existent theme: ${dep}`);
-        return {
-            valid: 0 === errors.length,
-            errors: errors
-        };
-    }
-    /**
-   * Clear registry
-   */    clear() {
-        this.entries.clear(), this.config = null, this.initialized = !1;
-    }
-}
-
-/**
- * CSS Injection Utilities
- *
- * Inject CSS into HTML head via <style> element.
- */
-/**
- * Check if running in browser environment
- */ function isBrowser$1() {
-    return "undefined" != typeof document;
-}
-
-/**
- * Inject CSS into HTML head via <style> element
- *
- * Creates or updates a style element in the document head.
- * If an element with the same ID exists, it will be updated.
- *
- * @param css - CSS string to inject
- * @param id - Style element ID (default: 'atomix-theme')
- *
- * @example
- * ```typescript
- * const css = ':root { --atomix-color-primary: #7AFFD7; }';
- * injectCSS(css);
- *
- * // With custom ID
- * injectCSS(css, 'my-custom-theme');
- * ```
- */ function injectCSS$1(css, id = "atomix-theme") {
-    if (!isBrowser$1()) return void console.warn("injectCSS: Not in browser environment, CSS not injected");
-    let styleElement = document.getElementById(id);
-    styleElement || (styleElement = document.createElement("style"), styleElement.id = id, 
-    styleElement.setAttribute("data-atomix-theme", "true"), document.head.appendChild(styleElement)), 
-    styleElement.textContent = css;
-}
-
-/**
- * Remove injected CSS from DOM
- *
- * Removes the style element with the given ID from the document head.
+ * Removes the style element with the given ID from the document head.
  *
  * @param id - Style element ID to remove (default: 'atomix-theme')
  *
@@ -2496,71 +1700,18 @@ class ThemeRegistry {
  * const css = ':root { --atomix-color-primary: #7AFFD7; }';
  * await saveCSSFile(css, './themes/custom.css');
  * ```
- */ async function saveCSSFile(css, filePath) {
-    // Check if in browser environment
-    if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
-    // Dynamic import to avoid bundling Node.js modules in browser builds
-        const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
-    await fs.mkdir(dir, {
-        recursive: !0
-    }), 
-    // Write file
-    await fs.writeFile(filePath, css, "utf8");
-}
-
-/**
- * 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
- */ function saveCSSFileSync(css, filePath) {
-    // Check if in browser environment
-    if ("undefined" != typeof window) throw new Error("saveCSSFileSync can only be used in Node.js environment. Use injectCSS() for browser environments.");
-    // Use require for synchronous file operations
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const fs = require("fs"), dir = require("path").dirname(filePath);
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-        fs.existsSync(dir) || fs.mkdirSync(dir, {
-        recursive: !0
-    }), 
-    // Write file
-    fs.writeFileSync(filePath, css, "utf8");
-}
+ */ "undefined" != typeof process && process.env;
 
 /**
  * Check if code is running in a browser environment
- */ const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), getThemeLinkId = themeName => `atomix-theme-${themeName}`, buildThemePath = (themeName, basePath = "/themes", useMinified = !1, cdnPath = null) => {
+ */
+const isBrowser = () => "undefined" != typeof window && "undefined" != typeof document, isServer = () => !isBrowser(), buildThemePath = (themeName, basePath = "/themes", useMinified = !1, cdnPath = null) => {
     // Validate theme name to prevent path injection
     if (!isValidThemeName(themeName)) throw new Error(`Invalid theme name: "${themeName}". Theme names must be lowercase alphanumeric with hyphens.`);
     const fileName = `${themeName}${useMinified ? ".min.css" : ".css"}`;
     return cdnPath ? `${cdnPath.replace(/[<>"']/g, "")}/${fileName}` : `${basePath.replace(/\/$/, "").replace(/[<>"']/g, "")}/${fileName.replace(/^\//, "")}`;
     // Ensure basePath doesn't end with slash and fileName doesn't start with slash
     // Also sanitize basePath to prevent path injection
-}, loadThemeCSS = (fullPath, linkId) => isServer() ? Promise.resolve() : new Promise(((resolve, reject) => {
-    if (document.getElementById(linkId)) return void resolve();
-    // Create link element
-        const link = document.createElement("link");
-    link.id = linkId, link.rel = "stylesheet", link.type = "text/css", link.href = fullPath, 
-    // Add data attribute for tracking
-    link.setAttribute("data-atomix-theme", "true"), 
-    // Handle load success
-    link.onload = () => {
-        resolve();
-    }, 
-    // Handle load error
-    link.onerror = () => {
-        // Remove failed link element
-        link.remove(), reject(new Error(`Failed to load theme CSS: ${fullPath}`));
-    }, 
-    // Append to head
-    document.head.appendChild(link);
-})), isThemeLoaded = themeName => {
-    if (isServer()) return !1;
-    const linkId = getThemeLinkId(themeName);
-    return null !== document.getElementById(linkId);
 }, isValidThemeName = themeName => !(!themeName || "string" != typeof themeName) && /^[a-z0-9]+(-[a-z0-9]+)*$/.test(themeName);
 
 /**
@@ -3033,211 +2184,198 @@ function generateCSSVariables(theme, options = {}) {
         styleElement.textContent = css;
     }
     /**
- * Theme Context
+ * Naming Utilities
  *
- * React context for theme management
+ * Provides consistent naming conventions across the theme system
  */
     /**
- * Theme context with default values
+ * Generate consistent CSS class names following BEM methodology
  */ (css, styleId), css;
 }
 
-const ThemeContext =  createContext(null);
+function generateClassName(block, element, modifiers) {
+    let className = block;
+    return element && (className += `__${element}`), modifiers && Object.entries(modifiers).forEach((([key, value]) => {
+        value && (className += `--${key}`, "string" == typeof value && value !== key && (className += `-${value}`));
+    })), className;
+}
 
-ThemeContext.displayName = "ThemeContext";
+/**
+ * Generate consistent CSS variable names
+ */ function generateCSSVariableName(property, options = {}) {
+    const {prefix: prefix = "atomix", component: component, variant: variant, state: state} = options, parts = [ prefix ];
+    return component && parts.push(component), variant && parts.push(variant), state && parts.push(state), 
+    parts.push(property), `--${parts.join("-")}`;
+}
 
 /**
- * Theme Applicator
- *
- * Applies theme configurations to the DOM, including CSS variables,
- * component overrides, typography, spacing, and color palettes.
- *
- * Uses the unified theme system for CSS generation and injection.
- */
+ * Normalize theme tokens to consistent naming convention
+ */ function normalizeThemeTokens(tokens) {
+    const normalized = {};
+    for (const [key, value] of Object.entries(tokens)) 
+    // Recursively normalize nested objects
+    normalized[key] = "object" == typeof value && null !== value ? normalizeThemeTokens(value) : value;
+    return normalized;
+}
+
 /**
- * Theme applicator class for runtime theme application
+ * Convert camelCase to kebab-case for CSS custom properties
+ */ function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, (match => `-${match.toLowerCase()}`));
+}
+
+/**
+ * Convert theme property to CSS variable name
+ */ function themePropertyToCSSVar(propertyPath, prefix = "atomix") {
+    return `--${prefix}-${propertyPath.split(".").map((part => camelToKebab(part))).join("-")}`;
+}
+
+/**
+ * Component Theming Utilities
  *
- * Uses the unified theme system for efficient CSS variable generation and injection.
+ * Provides consistent patterns for applying theme values to components
  */
-class ThemeApplicator {
-    constructor(root = document.documentElement) {
-        this.styleId = "atomix-theme-applicator", this.root = root;
-    }
-    /**
-   * Apply a complete theme configuration
-   *
-   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
-   * Automatically respects atomix.config.ts when using DesignTokens.
-   */    applyTheme(theme) {
-        // Clear previously applied variables
-        this.clearAppliedVars(), 
-        // Check if it's DesignTokens
-        this.isDesignTokens(theme) ? 
-        // Direct DesignTokens - use unified theme system (with config support)
-        this.applyDesignTokens(theme) : injectCSS$1(createTheme(theme, {
-            selector: ":root",
-            prefix: "atomix"
-        }), this.styleId), 
-        // Apply component overrides (only for Theme objects)
-        !this.isDesignTokens(theme) && theme.components && this.applyComponentOverrides(theme.components);
-    }
-    /**
-   * 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.
-   */    applyDesignTokens(tokens) {
-        // Inject CSS into DOM
-        injectCSS$1(createTheme(tokens, {
-            selector: ":root",
-            prefix: "atomix"
-        }), this.styleId);
-    }
-    /**
-   * Check if object is DesignTokens
-   */    isDesignTokens(obj) {
-        // DesignTokens is a flat object with string keys, no nested structures
-        return null !== obj && "object" == typeof obj && !("palette" in obj) && !("typography" in obj) && !("__isJSTheme" in obj);
-    }
-    /**
-   * Apply global CSS variables (for component overrides)
-   */    applyGlobalCSSVars(vars) {
-        Object.entries(vars).forEach((([key, value]) => {
-            this.root.style.setProperty(key, String(value));
-        }));
-    }
-    /**
-   * Apply component-level overrides
-   */    applyComponentOverrides(overrides) {
-        Object.entries(overrides).forEach((([componentName, override]) => {
-            override && this.applyComponentOverride(componentName, override);
-        }));
-    }
-    /**
-   * Apply override for a specific component
-   */    applyComponentOverride(componentName, override) {
-        const vars = {}, componentKey = componentName.toLowerCase();
-        // Apply component-level CSS variables
-        override.cssVars && Object.entries(override.cssVars).forEach((([key, value]) => {
-            // If key doesn't start with --, add component prefix
-            const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${key}`;
-            vars[varKey] = value;
-        })), 
-        // Apply part-specific CSS variables
-        override.parts && Object.entries(override.parts).forEach((([partName, partOverride]) => {
-            partOverride.cssVars && Object.entries(partOverride.cssVars).forEach((([key, value]) => {
-                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${partName}-${key}`;
-                vars[varKey] = value;
-            }));
-        })), 
-        // Apply variant-specific CSS variables
-        override.variants && Object.entries(override.variants).forEach((([variantName, variantOverride]) => {
-            variantOverride.cssVars && Object.entries(variantOverride.cssVars).forEach((([key, value]) => {
-                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${variantName}-${key}`;
-                vars[varKey] = value;
-            }));
-        })), this.applyGlobalCSSVars(vars);
-    }
-    /**
-   * Clear all applied CSS variables
-   */    clearAppliedVars() {
-        removeCSS(this.styleId);
-    }
-    /**
-   * Remove theme application
-   */    removeTheme() {
-        this.clearAppliedVars(), removeCSS(this.styleId);
-    }
-    /**
-   * Update specific CSS variables without clearing all
-   */    updateCSSVars(vars) {
-        this.applyGlobalCSSVars(vars);
-    }
+/**
+ * Get a theme value for a specific component using CSS variables
+ * This ensures all components access theme values consistently
+ */ function getComponentThemeValue(component, property, variant, size) {
+    // Build CSS variable name following consistent pattern
+    const parts = [ "atomix", component ];
+    // Return CSS variable reference with fallback
+    return variant && parts.push(variant), size && parts.push(size), parts.push(property), 
+    `var(--${parts.join("-")}, var(--atomix-${property}, initial))`;
 }
 
 /**
- * Global theme applicator instance
- */ let globalApplicator = null;
+ * Generate component-specific CSS variables from theme
+ */ function generateComponentCSSVars(component, theme, variant, size) {
+    const vars = {}, prefixParts = [ "atomix", component ];
+    // This is a simplified implementation - in a real system you'd have more
+    // sophisticated logic to extract component-specific values from the theme
+        variant && prefixParts.push(variant), size && prefixParts.push(size);
+    const prefix = prefixParts.join("-");
+    // Add common component properties
+        if (theme.palette && (vars[`--${prefix}-color`] = theme.palette.primary?.main || "#7c3aed", 
+    vars[`--${prefix}-color-hover`] = theme.palette.primary?.dark || "#5b21b6", vars[`--${prefix}-color-active`] = theme.palette.primary?.main || "#7c3aed", 
+    vars[`--${prefix}-color-disabled`] = theme.palette.text?.disabled || "#9ca3af"), 
+    theme.typography && (vars[`--${prefix}-font-family`] = theme.typography.fontFamily || "Inter, sans-serif", 
+    vars[`--${prefix}-font-size`] = theme.typography.fontSize ? `${theme.typography.fontSize}px` : "16px"), 
+    theme.spacing) {
+        const spacing = "function" == typeof theme.spacing ? theme.spacing : val => 8 * val;
+        vars[`--${prefix}-spacing-unit`] = `${spacing(1)}px`, vars[`--${prefix}-spacing-sm`] = `${spacing(.5)}px`, 
+        vars[`--${prefix}-spacing-md`] = `${spacing(1)}px`, vars[`--${prefix}-spacing-lg`] = `${spacing(2)}px`;
+    }
+    return vars;
+}
 
 /**
- * Get or create global theme applicator
- */ function getThemeApplicator() {
-    return globalApplicator || (globalApplicator = new ThemeApplicator), globalApplicator;
+ * Apply consistent theme to component style object
+ */ function applyComponentTheme(component, style = {}, variant, size, theme) {
+    // If no theme provided, return original style
+    return theme ? {
+        ...generateComponentCSSVars(component, theme, variant, size),
+        ...style
+    } : style;
+    // Generate component-specific CSS variables
 }
 
 /**
- * Apply theme using global applicator
- */ function applyTheme(theme) {
-    getThemeApplicator().applyTheme(theme);
+ * Create a hook for consistent component theming
+ */ function useComponentTheme(component, variant, size, theme) {
+    return property => getComponentThemeValue(component, property, variant, size);
 }
 
 /**
- * ThemeProvider component
- *
- * Provides theme context to child components and manages theme state.
+ * Theme Configuration Loader
  *
- * **Config-First Approach**: If `defaultTheme` is not provided, loads from `atomix.config.ts`.
- * Config file is required when `defaultTheme` is not provided.
+ * Provides functions to load theme configurations from atomix.config.ts
+ * Includes both sync and async versions, with automatic fallbacks
+ */
+/**
+ * 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
+ */ function loadThemeFromConfigSync(options) {
+    // Check if we're in a browser environment
+    if ("undefined" != typeof window) throw new Error("loadThemeFromConfigSync: Not available in browser environment. Config loading requires Node.js/SSR environment.");
+    // Use dynamic import to load the config loader
+    // This allows bundlers to handle external dependencies properly
+        let loadAtomixConfig;
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const {loadAtomixConfig: loader} = require("../../config/loader");
+        loadAtomixConfig = loader;
+    } catch (error) {
+        if (!1 !== options?.required) throw new Error("Config loader module not available");
+        // Return empty tokens if config is not required
+                return createTokens({});
+    }
+    const config = loadAtomixConfig({
+        configPath: options?.configPath || "atomix.config.ts",
+        required: !1 !== options?.required
+    });
+    return config?.theme ? isThemeObject$1(config.theme) ? createDesignTokensFromTheme(config.theme) : createTokens(config.theme) : createTokens({});
+}
+
+/**
+ * Load theme from config file (asynchronous)
+ * @param configPath - Path to config file (default: atomix.config.ts)
+ * @returns Promise resolving to DesignTokens from theme configuration
+ */ async function loadThemeFromConfig(options) {
+    // Check if we're in a browser environment
+    if ("undefined" != typeof window) throw new Error("loadThemeFromConfig: Not available in browser environment. Config loading requires Node.js/SSR environment.");
+    // Dynamic import for config loader
+        const {loadAtomixConfig: loadAtomixConfig} = await import("../lib/config/loader"), config = await loadAtomixConfig({
+        configPath: options?.configPath || "atomix.config.ts",
+        required: !1 !== options?.required
+    });
+    return config?.theme ? isThemeObject$1(config.theme) ? createDesignTokensFromTheme(config.theme) : createTokens(config.theme) : createTokens({});
+}
+
+/**
+ * Check if the provided object is a Theme object
+ * @param theme - Object to check
+ * @returns True if the object is a Theme object, false otherwise
+ */ function isThemeObject$1(theme) {
+    return "object" == typeof theme && null !== theme;
+}
+
+/**
+ * Theme Context
  *
- * @example
- * ```tsx
- * import { ThemeProvider } from '@shohojdhara/atomix/theme';
+ * React context for theme management
+ */
+/**
+ * Theme context with default values
+ */ const ThemeContext =  createContext(null);
+
+ThemeContext.displayName = "ThemeContext";
+
+/**
+ * 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)
+ * - JS Theme objects
+ * - Persistence via localStorage
  *
- * // Provide explicit theme (bypasses config)
- * function App() {
- *   return (
- *     <ThemeProvider defaultTheme="dark">
- *       <YourApp />
- *     </ThemeProvider>
- *   );
- * }
- * ```
- */ const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, preload: preload = [], lazy: lazy = !0, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, useMinified: useMinified = !1, onThemeChange: onThemeChange, onError: onError}) => {
+ * Falls back to 'default' theme if no configuration is found.
+ */
+const ThemeProvider = ({children: children, defaultTheme: defaultTheme, themes: themes = {}, basePath: basePath = "/themes", cdnPath: cdnPath = null, useMinified: useMinified = !1, storageKey: storageKey = "atomix-theme", dataAttribute: dataAttribute = "data-theme", enablePersistence: enablePersistence = !0, onThemeChange: onThemeChange, onError: onError}) => {
     // Store callbacks in refs to avoid recreating when they change
     const onThemeChangeRef = useRef(onThemeChange), onErrorRef = useRef(onError);
-    // Update refs when callbacks change
+    // Update ref when callback changes
     useEffect((() => {
         onThemeChangeRef.current = onThemeChange, onErrorRef.current = onError;
     }), [ onThemeChange, onError ]);
-    // Create stable wrapper functions that read from refs
+    // Create stable wrapper functions that read from ref
     const handleThemeChange = useCallback((theme => {
         onThemeChangeRef.current?.(theme);
     }), []), handleError = useCallback(((error, themeName) => {
         onErrorRef.current?.(error, themeName);
-    }), []), themesRef = useRef(themes), themesStable = useMemo((() => {
-        // Only update if themes object actually changed (shallow comparison)
-        const currentKeys = Object.keys(themes), prevKeys = Object.keys(themesRef.current);
-        return currentKeys.length !== prevKeys.length || currentKeys.some((key => themes[key] !== themesRef.current[key])) ? (themesRef.current = themes, 
-        themes) : themesRef.current;
-    }), [ themes ]), logger = useMemo((() => getLogger()), []), registry = useMemo((() => {
-        const reg = new ThemeRegistry;
-        // Register themes from props
-                if (themesStable && Object.keys(themesStable).length > 0) for (const [themeId, metadata] of Object.entries(themesStable)) reg.has(themeId) || reg.register(themeId, {
-            type: "css",
-            name: metadata.name,
-            class: metadata.class || themeId,
-            description: metadata.description,
-            author: metadata.author,
-            version: metadata.version,
-            tags: metadata.tags,
-            supportsDarkMode: metadata.supportsDarkMode,
-            status: metadata.status,
-            a11y: metadata.a11y,
-            color: metadata.color,
-            features: metadata.features,
-            dependencies: metadata.dependencies
-        });
-        return reg;
-    }), [ themesStable ]), storageAdapter = useMemo((() => ({
+    }), []), storageAdapter = useMemo((() => ({
         getItem: key => {
             if (isServer()) return null;
             try {
@@ -3269,7 +2407,7 @@ class ThemeApplicator {
                 return !1;
             }
         }
-    })), []), themeApplicator = useMemo((() => isServer() ? null : new ThemeApplicator), []), initialDefaultTheme = useMemo((() => {
+    })), []), initialDefaultTheme = useMemo((() => {
         // Check storage first
         if (enablePersistence && storageAdapter.isAvailable()) {
             const stored = storageAdapter.getItem(storageKey);
@@ -3277,236 +2415,368 @@ class ThemeApplicator {
         }
         // If defaultTheme is provided, use it
                 if (null != defaultTheme) return defaultTheme;
-        // Load from atomix.config.ts (required)
-                const configTokens = loadThemeFromConfigSync();
-        return configTokens && Object.keys(configTokens).length > 0 ? configTokens : null;
-        // Config is required - this will be caught in useEffect
-        }), [ enablePersistence, storageAdapter, storageKey, defaultTheme ]), [currentTheme, setCurrentTheme] = useState((() => "string" == typeof initialDefaultTheme ? initialDefaultTheme : isJSTheme(initialDefaultTheme) ? initialDefaultTheme.name || "js-theme" : initialDefaultTheme && "object" == typeof initialDefaultTheme && !isJSTheme(initialDefaultTheme) ? "config-theme" : "" // No default theme - use built-in styles
-    )), [activeTheme, setActiveTheme] = useState((() => isJSTheme(initialDefaultTheme) ? initialDefaultTheme : null)), [availableThemes, setAvailableThemes] = useState((() => registry.getAllMetadata().map((meta => ({
-        name: meta.name || "",
-        class: meta.class,
-        description: meta.description,
-        author: meta.author,
-        version: meta.version,
-        tags: meta.tags,
-        supportsDarkMode: meta.supportsDarkMode,
-        status: meta.status,
-        a11y: meta.a11y,
-        color: meta.color,
-        features: meta.features,
-        dependencies: meta.dependencies
-    }))))), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), previousThemeRef = useRef(null);
-    // Get default theme (with automatic config loading)
-    useCallback((() => {
-        // Check storage first
-        if (enablePersistence && storageAdapter.isAvailable()) {
-            const stored = storageAdapter.getItem(storageKey);
-            if (stored) return stored;
+        // Try to load from atomix.config.ts as fallback, but only in Node.js/SSR environments
+                if ("undefined" == typeof window) try {
+            // Dynamically import the config loader to avoid bundling issues in browser
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const {loadThemeFromConfigSync: loadThemeFromConfigSync} = require("../config/configLoader"), configTokens = loadThemeFromConfigSync();
+            if (configTokens && Object.keys(configTokens).length > 0) 
+            // For simplicity, we'll treat config tokens as a special theme name
+            return "config-theme";
+        } catch (error) {
+            console.warn("Failed to load theme from config, using default");
         }
-        // If defaultTheme is provided, use it
-                if (null != defaultTheme) return defaultTheme;
-        // Load from atomix.config.ts (required)
-        // Config file must exist - throws error if not found
-                const configTokens = loadThemeFromConfigSync();
-        if (configTokens && Object.keys(configTokens).length > 0) 
-        // Return config tokens as Partial<DesignTokens>
-        return configTokens;
-        throw new Error("ThemeProvider: atomix.config.ts is required when defaultTheme is not provided.");
-    }), [ enablePersistence, storageAdapter, storageKey, defaultTheme ]);
-    // Apply JS theme (supports both Theme and DesignTokens)
-    const applyJSTheme = useCallback((async (theme, removePrevious = !0) => {
-        !isServer() && themeApplicator && (removePrevious && (
-        // Remove previous theme
-        removeCSS("atomix-theme"), 
-        // Also remove any existing CSS variables
-        activeTheme && activeTheme.cssVars && Object.keys(activeTheme.cssVars).forEach((key => {
-            document.documentElement.style.removeProperty(key);
-        }))), null === theme || "object" != typeof theme || "palette" in theme || "typography" in theme || "__isJSTheme" in theme ? 
-        // Use ThemeApplicator for Theme objects
-        themeApplicator?.applyTheme(theme) : injectCSS$1(createTheme(theme), "atomix-theme"));
-    }), [ activeTheme, themeApplicator ]), setTheme = useCallback((async (theme, options) => {
-        const {removePrevious: removePrevious = !0, fallbackOnError: fallbackOnError = !0, customPath: customPath} = options || {};
+        // Default fallback
+                return "default";
+    }), [ defaultTheme, enablePersistence, storageKey ]), [currentTheme, setCurrentTheme] = useState((() => initialDefaultTheme)), [activeTheme, setActiveTheme] = useState(null), [isLoading, setIsLoading] = useState(!1), [error, setError] = useState(null), loadedThemesRef = useRef(new Set), themePromisesRef = useRef({});
+    // Apply initial theme attributes to document element
+    useEffect((() => {
+        isServer() || ((dataAttribute, themeName) => {
+            isServer() || (
+            // Set data attribute on body
+            document.body.setAttribute(dataAttribute, themeName), 
+            // Also set on documentElement for broader compatibility
+            document.documentElement.setAttribute(dataAttribute, themeName));
+        })(String(currentTheme), dataAttribute);
+    }), [ currentTheme, dataAttribute ]), 
+    // Handle theme persistence
+    useEffect((() => {
+        enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, String(currentTheme));
+    }), [ currentTheme, storageKey, enablePersistence ]);
+    // Function to set theme with proper type handling
+    const setTheme = useCallback((async (theme, options) => {
         setIsLoading(!0), setError(null);
         try {
-            // Handle Theme or DesignTokens object directly
-            if ("string" != typeof theme) {
-                if (null !== theme && "object" == typeof theme && !("palette" in theme) && !("typography" in theme) && !("__isJSTheme" in theme)) {
-                    // Handle DesignTokens using unified theme system
-                    await applyJSTheme(theme, removePrevious);
-                    const themeName = "design-tokens-theme";
-                    return previousThemeRef.current = currentTheme, setCurrentTheme(themeName), setActiveTheme(null), 
-                    previousThemeRef.current, Date.now(), handleThemeChange(themeName), 
-                    // Persist to storage
-                    enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, themeName), 
-                    void setIsLoading(!1);
-                }
-                if (isJSTheme(theme)) {
-                    // Handle Theme object
-                    await applyJSTheme(theme, removePrevious);
-                    const themeName = theme.name || "js-theme";
-                    return previousThemeRef.current = currentTheme, setCurrentTheme(themeName), setActiveTheme(theme), 
-                    previousThemeRef.current, Date.now(), handleThemeChange(theme), 
-                    // Persist to storage
-                    enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, themeName), 
-                    void setIsLoading(!1);
-                }
-                {
-                    const error = new Error("Invalid theme object provided");
-                    throw handleError(error, "js-theme"), setError(error), setIsLoading(!1), error;
-                }
-            }
-            // Check if theme exists
-                        if (!registry.has(theme)) {
-                const error = new Error(`Theme "${theme}" not found in registry`);
-                if (handleError(error, theme), setError(error), fallbackOnError && currentTheme) return void setIsLoading(!1);
-                throw setIsLoading(!1), error;
-            }
-            // Load theme CSS if needed
-                        const themePath = customPath || buildThemePath(theme, basePath, useMinified, cdnPath || void 0), linkId = getThemeLinkId(theme);
-            // Remove previous theme if requested
-            removePrevious && previousThemeRef.current && previousThemeRef.current !== theme && (themeNameOrLinkId => {
-                if (isServer()) return;
-                // Try as link ID first, then as theme name
-                                let link = document.getElementById(themeNameOrLinkId);
-                if (!link) {
-                    const linkId = getThemeLinkId(themeNameOrLinkId);
-                    link = document.getElementById(linkId);
-                }
-                link && link.remove();
-            })(previousThemeRef.current), 
-            // Load CSS if not already loaded
-            isThemeLoaded(theme) || (await loadThemeCSS(themePath, linkId), loadedThemesRef.current.add(theme)), 
-            // Apply theme attributes
-            ((dataAttribute, themeName) => {
-                isServer() || (
-                // Set data attribute on body
-                document.body.setAttribute(dataAttribute, themeName), 
-                // Also set on documentElement for broader compatibility
-                document.documentElement.setAttribute(dataAttribute, themeName));
-            })(dataAttribute, theme), 
-            // Update state
-            previousThemeRef.current = currentTheme, setCurrentTheme(theme), setActiveTheme(null), 
-            previousThemeRef.current, Date.now(), handleThemeChange(theme), 
-            // Persist to storage
-            enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, theme), 
-            setIsLoading(!1);
+            let themeName, themeObj = null;
+            // If it's a string theme name, load the associated CSS
+            if ("string" == typeof theme ? themeName = theme : 
+            // If it's a Theme object or DesignTokens, we need to process it
+            function(theme) {
+                return "object" == typeof theme && null !== theme && "__isJSTheme" in theme && !0 === theme.__isJSTheme;
+            }(theme) ? (themeObj = theme, 
+            // For JS themes, we use a generic name
+            themeName = "js-theme", setActiveTheme(themeObj)) : 
+            // For DesignTokens, we might create a theme from tokens
+            themeName = "tokens-theme", "string" == typeof theme && themes[theme]) {
+                // Check if theme is already loading
+                if (themePromisesRef.current[theme]) return await themePromisesRef.current[theme], 
+                setCurrentTheme(theme), setActiveTheme(null), void handleThemeChange(theme);
+                // Load CSS theme
+                                const themeLoadPromise = new Promise((async (resolve, reject) => {
+                    try {
+                        if (!themes[theme]) throw new Error(`Theme metadata not found for theme: ${theme}`);
+                        {
+                            // Build CSS path using utility function
+                            const cssPath = buildThemePath(theme, basePath, useMinified, cdnPath);
+                            // Remove any previously loaded theme CSS
+                                                        removeCSS(`theme-${String(currentTheme)}`), 
+                            // Inject new theme CSS
+                            await injectCSS$1(cssPath, `theme-${theme}`), loadedThemesRef.current.add(theme), 
+                            setCurrentTheme(theme), setActiveTheme(null), handleThemeChange(theme), resolve();
+                        }
+                    } catch (err) {
+                        const error = err instanceof Error ? err : new Error(String(err));
+                        setError(error), handleError(error, String(theme)), reject(error);
+                    }
+                }));
+                themePromisesRef.current[theme] = themeLoadPromise, await themeLoadPromise;
+            } else themeObj ? (
+            // For JS themes, set them directly
+            setCurrentTheme(themeName), setActiveTheme(themeObj), handleThemeChange(themeObj)) : (
+            // For string theme that isn't in our themes record, just set the name
+            setCurrentTheme(themeName), setActiveTheme(null), handleThemeChange(themeName));
         } catch (err) {
             const error = err instanceof Error ? err : new Error(String(err));
-            throw handleError(error, "string" == typeof theme ? theme : "js-theme"), setError(error), 
-            setIsLoading(!1), err;
+            setError(error), handleError(error, String(theme));
+        } finally {
+            setIsLoading(!1);
         }
-    }), [ registry, basePath, cdnPath, useMinified, dataAttribute, enablePersistence, storageAdapter, storageKey, currentTheme, activeTheme, applyJSTheme, handleThemeChange, handleError ]), preloadTheme = useCallback((async themeName => {
-        if (!isServer() && !isThemeLoaded(themeName)) {
+    }), [ themes, currentTheme, handleThemeChange, handleError, basePath, useMinified, cdnPath ]), isThemeLoaded = useCallback((themeName => loadedThemesRef.current.has(themeName)), []), preloadTheme = useCallback((async themeName => {
+        if (themes[themeName] && !isThemeLoaded(themeName)) {
             setIsLoading(!0);
             try {
-                if (!registry.has(themeName)) throw new Error(`Theme "${themeName}" not found in registry`);
-                const themePath = buildThemePath(themeName, basePath, useMinified, cdnPath || void 0), linkId = getThemeLinkId(themeName);
-                await loadThemeCSS(themePath, linkId), loadedThemesRef.current.add(themeName);
+                // Build CSS path using utility function
+                const cssPath = buildThemePath(themeName, basePath, useMinified, cdnPath);
+                // Preload CSS by fetching it
+                                await fetch(cssPath), loadedThemesRef.current.add(themeName);
             } catch (err) {
                 const error = err instanceof Error ? err : new Error(String(err));
-                handleError(error, themeName), setError(error);
+                setError(error), handleError(error, themeName);
             } finally {
                 setIsLoading(!1);
             }
         }
-    }), [ registry, basePath, cdnPath, useMinified, handleError ]), isThemeLoaded$1 = useCallback((themeName => isThemeLoaded(themeName)), []);
-    // Set theme function (supports string, Theme, or DesignTokens)
-        // Initialize default theme on mount
-    useEffect((() => {
-        isServer() || (async () => {
-            // Use the initial default theme we computed
-            const defaultThemeValue = initialDefaultTheme;
-            if (defaultThemeValue) try {
-                null === defaultThemeValue || "object" != typeof defaultThemeValue || "palette" in defaultThemeValue || "typography" in defaultThemeValue || "__isJSTheme" in defaultThemeValue || "string" == typeof defaultThemeValue ? 
-                // Handle string or Theme object
-                await setTheme(defaultThemeValue, {
-                    removePrevious: !1,
-                    fallbackOnError: !0
-                }) : (
-                // Apply config tokens directly
-                await applyJSTheme(defaultThemeValue, !1), 
-                // Update state and emit events
-                setCurrentTheme("config-theme"), setActiveTheme(null), Date.now(), handleThemeChange("config-theme"), 
-                // Persist to storage
-                enablePersistence && storageAdapter.isAvailable() && storageAdapter.setItem(storageKey, "config-theme"));
-            } catch (err) {
-                const error = err instanceof Error ? err : new Error(String(err));
-                throw logger.error("Failed to load theme from config", error, {
-                    theme: defaultThemeValue
-                }), handleError(error, "config-theme"), setError(error), error;
+    }), [ themes, isThemeLoaded, handleError, basePath, useMinified, cdnPath ]), themeManager = useMemo((() => ({})), []), contextValue = useMemo((() => ({
+        theme: "string" == typeof currentTheme ? currentTheme : "js-theme",
+        activeTheme: activeTheme,
+        setTheme: setTheme,
+        availableThemes: Object.entries(themes).map((([name, metadata]) => ({
+            ...metadata
+        }))),
+        isLoading: isLoading,
+        error: error,
+        isThemeLoaded: isThemeLoaded,
+        preloadTheme: preloadTheme,
+        themeManager: themeManager
+    })), [ currentTheme, activeTheme, setTheme, themes, isLoading, error, isThemeLoaded, preloadTheme, themeManager ]);
+    // Check if theme is loaded
+        return jsx(ThemeContext.Provider, {
+        value: contextValue,
+        children: children
+    });
+};
+
+/**
+ * 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>
+ *   );
+ * }
+ * ```
+ */ function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) throw new Error("useTheme must be used within a ThemeProvider");
+    return {
+        theme: context.theme,
+        activeTheme: context.activeTheme,
+        setTheme: context.setTheme,
+        availableThemes: context.availableThemes,
+        isLoading: context.isLoading,
+        error: context.error,
+        isThemeLoaded: context.isThemeLoaded,
+        preloadTheme: context.preloadTheme
+    };
+}
+
+function useThemeTokens() {
+    const {theme: theme, activeTheme: activeTheme} = useTheme(), getToken = useCallback(((tokenName, fallback) => {
+        if ("undefined" == typeof window) return fallback || "";
+        const cssVarName = `--atomix-${tokenName}`;
+        return getComputedStyle(document.documentElement).getPropertyValue(cssVarName).trim() || fallback || "";
+    }), []), getThemeValue = useCallback(((path, fallback) => {
+        var _context;
+        return activeTheme && _reduceInstanceProperty(_context = path.split(".")).call(_context, ((obj, key) => obj?.[key]), activeTheme) || fallback;
+        // Navigate through nested theme object using dot notation
+        }), [ activeTheme ]);
+    // Helper function to get CSS variable value
+        // Return unified API for accessing theme values
+    return {
+        theme: theme,
+        activeTheme: activeTheme,
+        getToken: getToken,
+        getThemeValue: getThemeValue,
+        // Commonly used tokens with fallbacks
+        colors: {
+            primary: getToken("primary", "#3b82f6"),
+            secondary: getToken("secondary", "#10b981"),
+            error: getToken("error", "#ef4444"),
+            success: getToken("success", "#22c55e"),
+            warning: getToken("warning", "#eab308"),
+            info: getToken("info", "#3b82f6"),
+            light: getToken("light", "#f9fafb"),
+            dark: getToken("dark", "#111827")
+        },
+        spacing: {
+            1: getToken("spacing-1", "0.25rem"),
+            2: getToken("spacing-2", "0.5rem"),
+            3: getToken("spacing-3", "0.75rem"),
+            4: getToken("spacing-4", "1rem"),
+            5: getToken("spacing-5", "1.25rem"),
+            6: getToken("spacing-6", "1.5rem"),
+            8: getToken("spacing-8", "2rem"),
+            10: getToken("spacing-10", "2.5rem"),
+            12: getToken("spacing-12", "3rem"),
+            16: getToken("spacing-16", "4rem"),
+            20: getToken("spacing-20", "5rem")
+        },
+        borderRadius: {
+            sm: getToken("border-radius-sm", "0.25rem"),
+            md: getToken("border-radius-md", "0.5rem"),
+            lg: getToken("border-radius-lg", "0.75rem"),
+            xl: getToken("border-radius-xl", "1rem"),
+            full: getToken("border-radius-full", "9999px")
+        },
+        typography: {
+            fontFamily: {
+                sans: getToken("font-sans-serif", "Inter, system-ui, sans-serif"),
+                serif: getToken("font-serif", "Georgia, serif"),
+                mono: getToken("font-monospace", "Fira Code, monospace")
+            },
+            fontSize: {
+                xs: getToken("font-size-xs", "0.75rem"),
+                sm: getToken("font-size-sm", "0.875rem"),
+                md: getToken("font-size-md", "1rem"),
+                lg: getToken("font-size-lg", "1.125rem"),
+                xl: getToken("font-size-xl", "1.25rem"),
+                "2xl": getToken("font-size-2xl", "1.5rem"),
+                "3xl": getToken("font-size-3xl", "1.875rem"),
+                "4xl": getToken("font-size-4xl", "2.25rem")
+            },
+            fontWeight: {
+                light: getToken("font-weight-light", "300"),
+                normal: getToken("font-weight-normal", "400"),
+                medium: getToken("font-weight-medium", "500"),
+                semibold: getToken("font-weight-semibold", "600"),
+                bold: getToken("font-weight-bold", "700")
             }
-        })();
+        },
+        shadows: {
+            sm: getToken("box-shadow-sm", "0 1px 2px 0 rgba(0, 0, 0, 0.05)"),
+            md: getToken("box-shadow-md", "0 4px 6px -1px rgba(0, 0, 0, 0.1)"),
+            lg: getToken("box-shadow-lg", "0 10px 15px -3px rgba(0, 0, 0, 0.1)"),
+            xl: getToken("box-shadow-xl", "0 20px 25px -5px rgba(0, 0, 0, 0.1)"),
+            inset: getToken("box-shadow-inset", "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)")
+        },
+        transitions: {
+            fast: getToken("transition-fast", "150ms"),
+            base: getToken("transition-base", "200ms"),
+            slow: getToken("transition-slow", "300ms")
+        }
+    };
+}
+
+/**
+ * Theme System Error Handling
+ *
+ * Centralized error handling for the Atomix theme system.
+ * Provides custom error classes and logging utilities.
+ */
+/**
+ * Theme error codes
+ */ var ThemeErrorCode, LogLevel;
+
+!function(ThemeErrorCode) {
+    /** Theme not found in registry */
+    ThemeErrorCode.THEME_NOT_FOUND = "THEME_NOT_FOUND", 
+    /** Theme failed to load */
+    ThemeErrorCode.THEME_LOAD_FAILED = "THEME_LOAD_FAILED", 
+    /** Theme validation failed */
+    ThemeErrorCode.THEME_VALIDATION_FAILED = "THEME_VALIDATION_FAILED", 
+    /** Configuration loading failed */
+    ThemeErrorCode.CONFIG_LOAD_FAILED = "CONFIG_LOAD_FAILED", 
+    /** Configuration validation failed */
+    ThemeErrorCode.CONFIG_VALIDATION_FAILED = "CONFIG_VALIDATION_FAILED", 
+    /** Circular dependency detected */
+    ThemeErrorCode.CIRCULAR_DEPENDENCY = "CIRCULAR_DEPENDENCY", 
+    /** Missing dependency */
+    ThemeErrorCode.MISSING_DEPENDENCY = "MISSING_DEPENDENCY", 
+    /** Storage operation failed */
+    ThemeErrorCode.STORAGE_ERROR = "STORAGE_ERROR", 
+    /** Invalid theme name */
+    ThemeErrorCode.INVALID_THEME_NAME = "INVALID_THEME_NAME", 
+    /** CSS injection failed */
+    ThemeErrorCode.CSS_INJECTION_FAILED = "CSS_INJECTION_FAILED", 
+    /** Unknown error */
+    ThemeErrorCode.UNKNOWN_ERROR = "UNKNOWN_ERROR";
+}(ThemeErrorCode || (ThemeErrorCode = {}));
+
+/**
+ * Custom error class for theme-related errors
+ */
+class ThemeError extends Error {
+    constructor(message, code = ThemeErrorCode.UNKNOWN_ERROR, context) {
+        super(message), this.name = "ThemeError", this.code = code, this.context = context, 
+        this.timestamp = Date.now(), 
+        // Maintains proper stack trace for where our error was thrown (only available on V8)
+        Error.captureStackTrace && Error.captureStackTrace(this, ThemeError);
+    }
+    /**
+   * Convert error to JSON for logging
+   */    toJSON() {
+        return {
+            name: this.name,
+            message: this.message,
+            code: this.code,
+            context: this.context,
+            timestamp: this.timestamp,
+            stack: this.stack
+        };
+    }
+}
+
+/**
+ * Log level
+ */ !function(LogLevel) {
+    LogLevel[LogLevel.ERROR = 0] = "ERROR", LogLevel[LogLevel.WARN = 1] = "WARN", LogLevel[LogLevel.INFO = 2] = "INFO", 
+    LogLevel[LogLevel.DEBUG = 3] = "DEBUG";
+}(LogLevel || (LogLevel = {}));
+
+/**
+ * Theme Logger
+ *
+ * Centralized logging for the theme system.
+ * Replaces console statements with structured logging.
+ */
+class ThemeLogger {
+    constructor(config = {}) {
+        this.config = {
+            level: config.level ?? ("undefined" != typeof process && "production" === process.env?.NODE_ENV ? LogLevel.WARN : LogLevel.INFO),
+            enableConsole: config.enableConsole ?? !0,
+            onError: config.onError,
+            onWarn: config.onWarn,
+            onInfo: config.onInfo,
+            onDebug: config.onDebug
+        };
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    ), []), // Only run once on mount - initialDefaultTheme is stable
-    // Preload themes
-    useEffect((() => {
-        !isServer() && preload && 0 !== preload.length && (async () => {
-            for (const themeName of preload) if (!isThemeLoaded(themeName)) try {
-                await preloadTheme(themeName);
-            } catch (err) {
-                // Silently fail for preload
-                logger.warn(`Failed to preload theme "${themeName}"`, {
-                    error: err instanceof Error ? err.message : String(err)
-                });
-            }
-        })();
-    }), [ preload, preloadTheme, logger ]);
-    // Context value
-    const contextValue = useMemo((() => ({
-        theme: currentTheme,
-        activeTheme: activeTheme,
-        setTheme: setTheme,
-        availableThemes: availableThemes,
-        isLoading: isLoading,
-        error: error,
-        isThemeLoaded: isThemeLoaded$1,
-        preloadTheme: preloadTheme
-    })), [ currentTheme, activeTheme, setTheme, availableThemes, isLoading, error, isThemeLoaded$1, preloadTheme ]);
-    return jsx(ThemeContext.Provider, {
-        value: contextValue,
-        children: children
-    });
-};
+    /**
+   * Log an error
+   */    error(message, error, context) {
+        if (this.config.level < LogLevel.ERROR) return;
+        const errorObj = error instanceof Error ? error : new Error(message), themeError = error instanceof ThemeError ? error : new ThemeError(message, ThemeErrorCode.UNKNOWN_ERROR, context);
+        this.config.enableConsole && console.error(`[ThemeError] ${message}`, {
+            error: errorObj,
+            context: {
+                ...context,
+                ...themeError.context
+            },
+            code: themeError.code
+        }), this.config.onError?.(themeError, context);
+    }
+    /**
+   * Log a warning
+   */    warn(message, context) {
+        this.config.level < LogLevel.WARN || (this.config.enableConsole && console.warn(`[ThemeWarning] ${message}`, context || {}), 
+        this.config.onWarn?.(message, context));
+    }
+    /**
+   * Log an info message
+   */    info(message, context) {
+        this.config.level < LogLevel.INFO || (this.config.enableConsole && console.info(`[ThemeInfo] ${message}`, context || {}), 
+        this.config.onInfo?.(message, context));
+    }
+    /**
+   * Log a debug message
+   */    debug(message, context) {
+        this.config.level < LogLevel.DEBUG || (this.config.enableConsole, this.config.onDebug?.(message, context));
+    }
+}
 
 /**
- * useTheme Hook
- *
- * React hook for accessing theme context
- */
+ * Default logger instance
+ */ let defaultLogger = null;
+
 /**
- * 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>
- *   );
- * }
- * ```
- */ function useTheme() {
-    const context = useContext(ThemeContext);
-    if (!context) throw new Error("useTheme must be used within a ThemeProvider");
-    return {
-        theme: context.theme,
-        activeTheme: context.activeTheme,
-        setTheme: context.setTheme,
-        availableThemes: context.availableThemes,
-        isLoading: context.isLoading,
-        error: context.error,
-        isThemeLoaded: context.isThemeLoaded,
-        preloadTheme: context.preloadTheme
-    };
+ * Get or create default logger
+ */ function getLogger() {
+    return defaultLogger || (defaultLogger = new ThemeLogger), defaultLogger;
 }
 
 /**
@@ -3557,7 +2827,7 @@ class ThemeApplicator {
                 },
                 children: JSON.stringify(context, null, 2)
             }) ]
-        }), "development" === process.env.NODE_ENV && errorInfo && jsxs("details", {
+        }), ("undefined" == typeof process || "development" === process.env?.NODE_ENV) && errorInfo && jsxs("details", {
             style: {
                 marginTop: "1rem"
             },
@@ -3653,6 +2923,130 @@ class ThemeApplicator {
     }
 }
 
+/**
+ * Theme Applicator
+ *
+ * Applies theme configurations to the DOM, including CSS variables,
+ * component overrides, typography, spacing, and color palettes.
+ *
+ * Uses the unified theme system for CSS generation and injection.
+ */
+/**
+ * Theme applicator class for runtime theme application
+ *
+ * Uses the unified theme system for efficient CSS variable generation and injection.
+ */ class ThemeApplicator {
+    constructor(root = document.documentElement) {
+        this.styleId = "atomix-theme-applicator", this.root = root;
+    }
+    /**
+   * Apply a complete theme configuration
+   *
+   * Uses the unified theme system to convert Theme to DesignTokens and inject CSS.
+   * Automatically respects atomix.config.ts when using DesignTokens.
+   */    applyTheme(theme) {
+        // Clear previously applied variables
+        this.clearAppliedVars(), 
+        // Check if it's DesignTokens
+        this.isDesignTokens(theme) ? 
+        // Direct DesignTokens - use unified theme system (with config support)
+        this.applyDesignTokens(theme) : injectCSS$1(createTheme(theme, {
+            selector: ":root",
+            prefix: "atomix"
+        }), this.styleId), 
+        // Apply component overrides (only for Theme objects)
+        !this.isDesignTokens(theme) && theme.components && this.applyComponentOverrides(theme.components);
+    }
+    /**
+   * 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.
+   */    applyDesignTokens(tokens) {
+        // Inject CSS into DOM
+        injectCSS$1(createTheme(tokens, {
+            selector: ":root",
+            prefix: "atomix"
+        }), this.styleId);
+    }
+    /**
+   * Check if object is DesignTokens
+   */    isDesignTokens(obj) {
+        // DesignTokens is a flat object with string keys, no nested structures
+        return null !== obj && "object" == typeof obj && !("palette" in obj) && !("typography" in obj) && !("__isJSTheme" in obj);
+    }
+    /**
+   * Apply global CSS variables (for component overrides)
+   */    applyGlobalCSSVars(vars) {
+        Object.entries(vars).forEach((([key, value]) => {
+            this.root.style.setProperty(key, String(value));
+        }));
+    }
+    /**
+   * Apply component-level overrides
+   */    applyComponentOverrides(overrides) {
+        Object.entries(overrides).forEach((([componentName, override]) => {
+            override && this.applyComponentOverride(componentName, override);
+        }));
+    }
+    /**
+   * Apply override for a specific component
+   */    applyComponentOverride(componentName, override) {
+        const vars = {}, componentKey = componentName.toLowerCase();
+        // Apply component-level CSS variables
+        override.cssVars && Object.entries(override.cssVars).forEach((([key, value]) => {
+            // If key doesn't start with --, add component prefix
+            const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${key}`;
+            vars[varKey] = value;
+        })), 
+        // Apply part-specific CSS variables
+        override.parts && Object.entries(override.parts).forEach((([partName, partOverride]) => {
+            partOverride.cssVars && Object.entries(partOverride.cssVars).forEach((([key, value]) => {
+                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${partName}-${key}`;
+                vars[varKey] = value;
+            }));
+        })), 
+        // Apply variant-specific CSS variables
+        override.variants && Object.entries(override.variants).forEach((([variantName, variantOverride]) => {
+            variantOverride.cssVars && Object.entries(variantOverride.cssVars).forEach((([key, value]) => {
+                const varKey = key.startsWith("--") ? key : `--atomix-${componentKey}-${variantName}-${key}`;
+                vars[varKey] = value;
+            }));
+        })), this.applyGlobalCSSVars(vars);
+    }
+    /**
+   * Clear all applied CSS variables
+   */    clearAppliedVars() {
+        removeCSS(this.styleId);
+    }
+    /**
+   * Remove theme application
+   */    removeTheme() {
+        this.clearAppliedVars(), removeCSS(this.styleId);
+    }
+    /**
+   * Update specific CSS variables without clearing all
+   */    updateCSSVars(vars) {
+        this.applyGlobalCSSVars(vars);
+    }
+}
+
+/**
+ * Global theme applicator instance
+ */ let globalApplicator = null;
+
+/**
+ * Get or create global theme applicator
+ */ function getThemeApplicator() {
+    return globalApplicator || (globalApplicator = new ThemeApplicator), globalApplicator;
+}
+
+/**
+ * Apply theme using global applicator
+ */ function applyTheme(theme) {
+    getThemeApplicator().applyTheme(theme);
+}
+
 const VIEWPORT_PRESETS = {
     mobile: {
         width: 375,
@@ -5601,62 +4995,6 @@ const ThemeLiveEditor = ({initialTheme: initialTheme, onChange: onChange, classN
     });
 };
 
-/**
- * CSS Variable Mapper
- *
- * Utilities for generating and managing CSS custom properties from SCSS tokens
- * and component configurations.
- */
-/**
- * Generate CSS variable name from parts
- *
- * @example
- * generateCSSVariableName('button', 'bg', { prefix: 'atomix' })
- * // Returns: '--atomix-button-bg'
- */ function generateCSSVariableName(component, property, options = {}) {
-    const {prefix: prefix = "atomix", separator: separator = "-", includeComponent: includeComponent = !0} = options, parts = [ prefix ];
-    return includeComponent && parts.push(component), parts.push(property), `--${parts.join(separator)}`;
-}
-
-/**
- * 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' }
- */ function generateComponentCSSVars(config, options = {}) {
-    const vars = {}, {component: component, properties: properties, parts: parts, states: states, variants: variants} = config;
-    // Base properties
-    return Object.entries(properties).forEach((([key, value]) => {
-        const varName = generateCSSVariableName(component, key, options);
-        vars[varName] = String(value);
-    })), 
-    // Part properties
-    parts && Object.entries(parts).forEach((([partName, partProps]) => {
-        Object.entries(partProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${partName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), 
-    // State properties
-    states && Object.entries(states).forEach((([stateName, stateProps]) => {
-        Object.entries(stateProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${stateName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), 
-    // Variant properties
-    variants && Object.entries(variants).forEach((([variantName, variantProps]) => {
-        Object.entries(variantProps).forEach((([key, value]) => {
-            const varName = generateCSSVariableName(component, `${variantName}-${key}`, options);
-            vars[varName] = String(value);
-        }));
-    })), vars;
-}
-
 /**
  * Map SCSS tokens to CSS custom properties
  *
@@ -6022,63 +5360,26 @@ class RTLManager {
 /**
  * Save theme to CSS file
  */ async function saveTheme(css, filePath) {
-    await saveCSSFile(css, filePath);
-}
-
-/**
- * Atomix Config Loader
+    await async function(css, filePath) {
+        // Check if in browser environment
+        if ("undefined" != typeof window) throw new Error("saveCSSFile can only be used in Node.js environment. Use injectCSS() for browser environments.");
+        // Dynamic import to avoid bundling Node.js modules in browser builds
+                const fs = await import("fs/promises"), dir = (await import("path")).dirname(filePath);
+        await fs.mkdir(dir, {
+            recursive: !0
+        }), 
+        // Write file
+        await fs.writeFile(filePath, css, "utf8");
+    }
+    /**
+ * Theme System Constants
  *
- * Helper functions to load atomix.config.ts from external projects.
- * Similar to how Tailwind loads tailwind.config.js
+ * Centralized constants for the theme system to avoid magic numbers and strings.
  */
-/**
- * Load Atomix configuration from project root
- *
- * Attempts to load atomix.config.ts from the current working directory.
- * Falls back to default config if file doesn't exist.
- *
- * @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 || {});
- * ```
- */ const loader =  Object.freeze( Object.defineProperty({
-    __proto__: null,
-    loadAtomixConfig: function(options = {}) {
-        const {configPath: configPath = "atomix.config.ts", required: required = !1} = options, defaultConfig = {
-            prefix: "atomix",
-            theme: {
-                extend: {}
-            }
-        };
-        // Default config
-                // In browser environments, config loading is not supported
-        if ("undefined" != typeof window) {
-            if (required) throw new Error("Config loading not supported in browser environment");
-            return defaultConfig;
-        }
-        // Try to load config file
-                try {
-            // Use dynamic import for ESM compatibility
-            const configModule = require(configPath), config = configModule.default || configModule;
-            // Validate it's an AtomixConfig
-            if (config && "object" == typeof config) return config;
-            throw new Error("Invalid config format");
-        } catch (error) {
-            if (required) throw new Error(`Failed to load config from ${configPath}: ${error.message}`);
-            // Return default config if not required
-                        return defaultConfig;
-        }
-    }
-}, Symbol.toStringTag, {
-    value: "Module"
-}));
+    /**
+ * Default storage key for theme persistence
+ */ (css, filePath);
+}
 
-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$1 as generateCSSVariables, generateCSSVariablesForSelector, generateComponentCSSVars, getCSSVariable, getDesignTokensFromTheme, getThemeApplicator, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, removeCSS, removeCSSVariables, removeTheme, saveCSSFile, saveCSSFileSync, saveTheme, themeToDesignTokens, useHistory, useTheme };
+export { RTLManager, ThemeApplicator, ThemeComparator, ThemeContext, ThemeErrorBoundary, ThemeInspector, ThemeLiveEditor, ThemePreview, ThemeProvider, ThemeValidator, applyCSSVariables, applyComponentTheme, applyTheme, camelToKebab, clearThemes, createDesignTokensFromTheme, createTheme, createThemeObject, createThemeRegistry, createTokens, cssVarsToStyle, deepMerge, defaultTokens, designTokensToCSSVars, designTokensToTheme, extendTheme, extractComponentName, generateCSSVariableName, generateCSSVariables$1 as generateCSSVariables, generateCSSVariablesForSelector, generateClassName, generateComponentCSSVars, getAllThemes, getCSSVariable, getComponentThemeValue, getDesignTokensFromTheme, getTheme, getThemeApplicator, getThemeCount, getThemeIds, hasTheme, injectCSS$1 as injectCSS, injectTheme, isCSSInjected, isDesignTokens, isThemeObject, isValidCSSVariableName, loadThemeFromConfig, loadThemeFromConfigSync, mapSCSSTokensToCSSVars, mergeCSSVars, mergeTheme, normalizeThemeTokens, registerTheme, removeCSS, removeCSSVariables, removeTheme, saveTheme, themePropertyToCSSVar, themeToDesignTokens, unregisterTheme, useComponentTheme, useHistory, useTheme, useThemeTokens };
 //# sourceMappingURL=theme.js.map