@shohojdhara/atomix 0.5.2 → 0.5.4

package/src/lib/theme/index.ts

@@ -22,14 +22,27 @@
 // Core Theme Functions
 // ============================================================================
 
-// Create theme CSS from DesignTokens
-export { createTheme } from './core';
-
-// Theme composition
-export { deepMerge, mergeTheme, extendTheme } from './core';
+import {
+  createTheme,
+  deepMerge,
+  mergeTheme,
+  extendTheme,
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+} from './core';
 
-// Simplified Theme Registry
 export {
+  createTheme,
+  deepMerge,
+  mergeTheme,
+  extendTheme,
   createThemeRegistry,
   registerTheme,
   unregisterTheme,
@@ -39,14 +52,14 @@ export {
   getThemeIds,
   clearThemes,
   getThemeCount,
-} from './core';
+};
 
 // ============================================================================
 // Theme Injection and Management
 // ============================================================================
 
 import { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
-// File saving utilities removed to prevent bundling Node.js modules in browser
+export { injectCSS, removeCSS, isCSSInjected };
 
 /**
  * Inject theme CSS into DOM
@@ -66,23 +79,30 @@ export function removeTheme(id: string = 'atomix-theme'): void {
 // Token Utilities
 // ============================================================================
 
-export { createTokens, defaultTokens, type DesignTokens } from './tokens';
+import { createTokens, defaultTokens, type DesignTokens } from './tokens';
+export { createTokens, defaultTokens, type DesignTokens };
 
 // ============================================================================
 // CSS Generation
 // ============================================================================
 
-export {
+import {
   generateCSSVariables,
   generateCSSVariablesForSelector,
   type GenerateCSSVariablesOptions,
 } from './generators';
 
+export {
+  generateCSSVariables,
+  generateCSSVariablesForSelector,
+  type GenerateCSSVariablesOptions,
+};
+
 // ============================================================================
 // Naming and Component Theming Utilities
 // ============================================================================
 
-export {
+import {
   generateClassName,
   generateCSSVariableName,
   normalizeThemeTokens,
@@ -92,6 +112,15 @@ export {
 } from './utils/naming';
 
 export {
+  generateClassName,
+  generateCSSVariableName,
+  normalizeThemeTokens,
+  camelToKebab,
+  themePropertyToCSSVar,
+  type NamingOptions,
+};
+
+import {
   getComponentThemeValue,
   generateComponentCSSVars,
   applyComponentTheme,
@@ -99,39 +128,159 @@ export {
   type ComponentThemeOptions,
 } from './utils/componentTheming';
 
+export {
+  getComponentThemeValue,
+  generateComponentCSSVars,
+  applyComponentTheme,
+  useComponentTheme,
+  type ComponentThemeOptions,
+};
+
 // ============================================================================
-// Injection Utilities
+// Theme Utilities (Switching, Persistence, Colors)
 // ============================================================================
 
-export { injectCSS, removeCSS, isCSSInjected } from './utils/injectCSS';
+import {
+  // Theme Mode Switching
+  switchTheme,
+  toggleTheme,
+  getCurrentTheme,
+  getSystemTheme,
+  initializeTheme,
+  listenToSystemTheme,
+  
+  // Theme Persistence
+  persistTheme,
+  clearThemePreference,
+  
+  // Token Manipulation
+  mergeTokens,
+  overrideTokens,
+  pickTokens,
+  omitTokens,
+  
+  // Color Utilities
+  hexToRgb,
+  rgbToHex,
+  getLuminance,
+  getContrastRatio,
+  isAccessible,
+  getContrastText,
+  lighten,
+  darken,
+  alpha,
+  emphasize,
+  createSpacing,
+  
+  // Types
+  type ThemeMode,
+  type ThemeSwitcherOptions,
+  type ThemePersistenceOptions,
+} from './utils/themeUtils';
 
-// Config loader removed to prevent bundling Node.js modules in browser
+export {
+  switchTheme,
+  toggleTheme,
+  getCurrentTheme,
+  getSystemTheme,
+  initializeTheme,
+  listenToSystemTheme,
+  persistTheme,
+  clearThemePreference,
+  mergeTokens,
+  overrideTokens,
+  pickTokens,
+  omitTokens,
+  hexToRgb,
+  rgbToHex,
+  getLuminance,
+  getContrastRatio,
+  isAccessible,
+  getContrastText,
+  lighten,
+  darken,
+  alpha,
+  emphasize,
+  createSpacing,
+  type ThemeMode,
+  type ThemeSwitcherOptions,
+  type ThemePersistenceOptions,
+};
 
 // ============================================================================
 // React Integration
 // ============================================================================
 
-// Core React components and hooks
-export { ThemeProvider } from './runtime/ThemeProvider';
-export { useTheme } from './runtime/useTheme';
-export { useThemeTokens } from './runtime/useThemeTokens';
-export { ThemeContext } from './runtime/ThemeContext';
-export { ThemeErrorBoundary } from './runtime/ThemeErrorBoundary';
+import { ThemeProvider } from './runtime/ThemeProvider';
+import { useTheme } from './runtime/useTheme';
+import { useThemeTokens } from './runtime/useThemeTokens';
+import { ThemeContext } from './runtime/ThemeContext';
+import { ThemeErrorBoundary, type ThemeErrorBoundaryProps } from './runtime/ThemeErrorBoundary';
 
-// Theme application
-export { ThemeApplicator, getThemeApplicator, applyTheme } from './runtime/ThemeApplicator';
+export {
+  ThemeProvider,
+  useTheme,
+  useThemeTokens,
+  ThemeContext,
+  ThemeErrorBoundary,
+  type ThemeErrorBoundaryProps,
+};
+
+import {
+  useThemeSwitcher,
+  type UseThemeSwitcherOptions,
+  type UseThemeSwitcherReturn,
+} from './hooks/useThemeSwitcher';
+
+export {
+  useThemeSwitcher,
+  type UseThemeSwitcherOptions,
+  type UseThemeSwitcherReturn,
+};
+
+import { ThemeToggle, type ThemeToggleProps } from './components/ThemeToggle';
+export { ThemeToggle, type ThemeToggleProps };
+
+import { ThemeApplicator, getThemeApplicator, applyTheme } from './runtime/ThemeApplicator';
+export { ThemeApplicator, getThemeApplicator, applyTheme };
 
 // DevTools (for development and debugging)
 export * from './devtools';
 
-// CSS variable utilities
-export { designTokensToCSSVars } from './adapters';
+// Theme adapters
+import { designTokensToCSSVars, configToTokens } from './adapters';
+export { designTokensToCSSVars, configToTokens };
 
-// Theme helpers (utilities for working with DesignTokens)
-export { isDesignTokens } from './utils/themeHelpers';
+// Theme helpers
+import { isDesignTokens } from './utils/themeHelpers';
+export { isDesignTokens };
+
+// Performance utilities
+import {
+  createPerformanceMonitor,
+  usePerformanceMonitor,
+  type PerformanceMetrics,
+} from './utils/performanceMonitor';
+
+export {
+  createPerformanceMonitor,
+  usePerformanceMonitor,
+  type PerformanceMetrics,
+};
+
+// Responsive utilities
+import {
+  createResponsiveUtil,
+  useResponsive,
+} from './utils/responsive';
 
-// CSS variable utilities
 export {
+  createResponsiveUtil,
+  useResponsive,
+};
+
+// CSS variable utilities
+import {
   mapSCSSTokensToCSSVars,
   applyCSSVariables,
   removeCSSVariables,
@@ -140,10 +289,25 @@ export {
   mergeCSSVars,
   isValidCSSVariableName,
   extractComponentName,
+  type CSSVariableConfig,
+  type CSSVariableNamingOptions,
 } from './adapters/cssVariableMapper';
 
-// RTL Support
-export { RTLManager } from './i18n/rtl';
+export {
+  mapSCSSTokensToCSSVars,
+  applyCSSVariables,
+  removeCSSVariables,
+  getCSSVariable,
+  cssVarsToStyle,
+  mergeCSSVars,
+  isValidCSSVariableName,
+  extractComponentName,
+  type CSSVariableConfig,
+  type CSSVariableNamingOptions,
+};
+
+import { RTLManager, createRTLManager, isRTLLocale, getDirectionFromLocale, rtlCSS, type RTLConfig } from './i18n/rtl';
+export { RTLManager, createRTLManager, isRTLLocale, getDirectionFromLocale, rtlCSS, type RTLConfig };
 
 // Types
 export type {
@@ -155,14 +319,134 @@ export type {
   UseThemeReturn,
   ComponentThemeOverride,
   ThemeComponentOverrides,
+  Theme,
 } from './types';
 
-// Note: Theme type is deprecated - use DesignTokens instead
-// Keeping for backward compatibility with devtools and internal use only
-export type { Theme } from './types';
-
-export type { ThemeErrorBoundaryProps } from './runtime/ThemeErrorBoundary';
-
-export type { CSSVariableConfig, CSSVariableNamingOptions } from './adapters/cssVariableMapper';
-
-export type { RTLConfig } from './i18n/rtl';
+/**
+ * Main theme module interface
+ */
+export default {
+  // Core
+  createTheme,
+  injectTheme,
+  removeTheme,
+  
+  // Context and Provider
+  ThemeProvider,
+  useTheme,
+  useThemeTokens,
+  ThemeContext,
+  ThemeErrorBoundary,
+  
+  // Adapters
+  configToTokens,
+  designTokensToCSSVars,
+  
+  // Theme Utils
+  switchTheme,
+  toggleTheme,
+  getCurrentTheme,
+  getSystemTheme,
+  initializeTheme,
+  listenToSystemTheme,
+  persistTheme,
+  clearThemePreference,
+  
+  // Token Manipulation
+  mergeTokens,
+  overrideTokens,
+  pickTokens,
+  omitTokens,
+  
+  // Color Utilities
+  hexToRgb,
+  rgbToHex,
+  getLuminance,
+  getContrastRatio,
+  isAccessible,
+  getContrastText,
+  lighten,
+  darken,
+  alpha,
+  emphasize,
+  createSpacing,
+  
+  // Performance utilities
+  createPerformanceMonitor,
+  usePerformanceMonitor,
+  
+  // Responsive utilities
+  createResponsiveUtil,
+  useResponsive,
+  
+  // Components
+  ThemeToggle,
+  ThemeApplicator,
+  applyTheme,
+  getThemeApplicator,
+  
+  // Registry
+  createThemeRegistry,
+  registerTheme,
+  unregisterTheme,
+  hasTheme,
+  getTheme,
+  getAllThemes,
+  getThemeIds,
+  clearThemes,
+  getThemeCount,
+  
+  // Composition
+  deepMerge,
+  mergeTheme,
+  extendTheme,
+  
+  // Tokens
+  createTokens,
+  defaultTokens,
+  
+  // Generators
+  generateCSSVariables,
+  generateCSSVariablesForSelector,
+  
+  // Naming
+  generateClassName,
+  generateCSSVariableName,
+  normalizeThemeTokens,
+  camelToKebab,
+  themePropertyToCSSVar,
+  
+  // Component Theming
+  getComponentThemeValue,
+  generateComponentCSSVars,
+  applyComponentTheme,
+  useComponentTheme,
+  
+  // Hooks
+  useThemeSwitcher,
+  
+  // Helpers
+  isDesignTokens,
+  
+  // CSS Variable Mapper
+  mapSCSSTokensToCSSVars,
+  applyCSSVariables,
+  removeCSSVariables,
+  getCSSVariable,
+  cssVarsToStyle,
+  mergeCSSVars,
+  isValidCSSVariableName,
+  extractComponentName,
+  
+  // Injection Utils
+  injectCSS,
+  removeCSS,
+  isCSSInjected,
+  
+  // I18n
+  RTLManager,
+  createRTLManager,
+  isRTLLocale,
+  getDirectionFromLocale,
+  rtlCSS,
+};

package/src/lib/theme/runtime/ThemeProvider.tsx

@@ -80,6 +80,15 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     if (enablePersistence && storageAdapter.isAvailable()) {
       const stored = storageAdapter.getItem(storageKey);
       if (stored) {
+        // If it looks like a JSON object, parse it
+        if (stored.trim().startsWith('{')) {
+          try {
+            return JSON.parse(stored);
+          } catch (e) {
+            logger.error('Failed to parse stored theme tokens', e as Error);
+            return stored;
+          }
+        }
         return stored;
       }
     }
@@ -103,17 +112,19 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   });
 
   const [activeTokens, setActiveTokens] = useState<DesignTokens | null>(() => {
-    // If defaultTheme is DesignTokens, validate and store them
+    // 1. Check if initialDefaultTheme (from storage) is an object
+    if (initialDefaultTheme && typeof initialDefaultTheme !== 'string') {
+      const { tokens, validation } = validateAndMergeTokens(initialDefaultTheme);
+      if (validation.valid) {
+        return tokens;
+      }
+    }
+
+    // 2. Check if defaultTheme prop is an object
     if (defaultTheme && typeof defaultTheme !== 'string') {
       const { tokens, validation } = validateAndMergeTokens(defaultTheme);
       if (validation.valid) {
         return tokens;
-      } else {
-        logger.warn('Invalid default theme tokens, using defaults', {
-          errors: validation.errors,
-          warnings: validation.warnings,
-        });
-        return createTokens({}); // Use defaults if validation fails
       }
     }
     return null;
@@ -143,12 +154,20 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     }
   }, [currentTheme, dataAttribute]);
 
-  // Handle theme persistence
+  // Handle persistence
   useEffect(() => {
     if (enablePersistence && storageAdapter.isAvailable()) {
-      storageAdapter.setItem(storageKey, String(currentTheme));
+      if (currentTheme === 'tokens-theme') {
+        // Only persist if we have actual tokens to store
+        if (activeTokens) {
+          storageAdapter.setItem(storageKey, JSON.stringify(activeTokens));
+        }
+      } else {
+        // Persist named theme string
+        storageAdapter.setItem(storageKey, String(currentTheme));
+      }
     }
-  }, [currentTheme, storageKey, enablePersistence, storageAdapter]);
+  }, [currentTheme, activeTokens, enablePersistence, storageKey, storageAdapter]);
 
   // Cleanup: Remove completed promises and abort controllers on unmount
   useEffect(() => {
@@ -430,6 +449,19 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     [themes, isThemeLoaded, handleError, basePath, useMinified, cdnPath]
   );
 
+  // Update theme section function
+  const updateTheme = useCallback(
+    async (sectionOrTokens: any, values?: any) => {
+      if (typeof sectionOrTokens === 'string' && values) {
+        // Legacy support: updateTheme('colors', { primary: '...' })
+        return setTheme(values);
+      }
+      // Direct partial update: updateTheme({ primary: '...' })
+      return setTheme(sectionOrTokens);
+    },
+    [setTheme]
+  );
+
   // Create a mock theme manager instance for the context
   const themeManager = useMemo(() => {
     // This would normally be a real ThemeManager instance
@@ -455,6 +487,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       theme: currentTheme,
       activeTokens,
       setTheme,
+      updateTheme,
       availableThemes,
       isLoading,
       error,
@@ -466,6 +499,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
       currentTheme,
       activeTokens,
       setTheme,
+      updateTheme,
       availableThemes, // Use memoized value
       isLoading,
       error,