@shohojdhara/atomix 0.6.2 → 0.6.4

package/src/lib/theme/config/configLoader.ts

@@ -219,7 +219,7 @@ export async function loadThemeFromConfig(options?: { configPath?: string; requi
     const req = typeof require !== 'undefined' ? require : undefined;
     if (!req) throw new Error('require is not available');
     const { loadAtomixConfig: loader } = req('../../config/loader');
-    loadAtomixConfig = loader;
+    const loadAtomixConfig: any = loader;
     config = loadAtomixConfig({ configPath: options?.configPath, required: options?.required !== false });
   } catch (error) {
     // If loadAtomixConfig is not available (e.g., in browser bundle), provide helpful error

package/src/lib/theme/test/testTheme.ts

@@ -9,7 +9,7 @@ import type { DesignTokens } from '../tokens/tokens';
 import type { Theme, ThemeOptions } from '../types';
 import { createTheme } from '../core/createTheme';
 import { createThemeObject } from '../core/createThemeObject';
-import { themeToDesignTokens, createDesignTokensFromTheme } from '../adapters/themeAdapter';
+import { themeToDesignTokens } from '../adapters/themeAdapter';
 
 // ============================================================================
 // Test Theme 1: Using DesignTokens (Recommended - Flat Structure)
@@ -311,7 +311,7 @@ export function testThemeAdapter(): {
 } {
   const theme = createTestThemeObject();
   const tokens = themeToDesignTokens(theme);
-  const fullTokens = createDesignTokensFromTheme(theme);
+  const fullTokens = themeToDesignTokens(theme);
 
   return {
     theme,

package/src/lib/theme/utils/themeUtils.ts

@@ -1,6 +1,6 @@
 /**
  * Theme Utilities
- * 
+ *
  * Helper functions for common theme operations including:
  * - Theme switching (dark/light mode)
  * - Theme persistence (localStorage)
@@ -13,6 +13,8 @@ import type { DesignTokens } from '../tokens';
 import type { SpacingFunction, SpacingOptions } from '../types';
 import { injectCSS, removeCSS } from '../utils/injectCSS';
 import { deepMerge } from '../core/composeTheme';
+import { getSystemTheme } from './domUtils';
+export { getSystemTheme };
 
 // ============================================================================
 // Type Definitions
@@ -44,28 +46,25 @@ export interface ThemePersistenceOptions {
 
 /**
  * Switch between light and dark themes
- * 
+ *
  * Automatically toggles a class on the root element and persists the choice.
- * 
+ *
  * @param mode - Theme mode ('light', 'dark', or 'system')
  * @param options - Configuration options
- * 
+ *
  * @example
  * ```typescript
  * import { switchTheme } from '@shohojdhara/atomix/theme/utils';
- * 
+ *
  * // Switch to dark mode
  * switchTheme('dark');
- * 
+ *
  * // Toggle between light/dark
  * const current = getCurrentTheme();
  * switchTheme(current === 'dark' ? 'light' : 'dark');
  * ```
  */
-export function switchTheme(
-  mode: ThemeMode,
-  options: ThemeSwitcherOptions = {}
-): void {
+export function switchTheme(mode: ThemeMode, options: ThemeSwitcherOptions = {}): void {
   const {
     selector = ':root',
     storageKey = 'atomix-theme',
@@ -84,7 +83,7 @@ export function switchTheme(
   if (enableTransition) {
     const htmlRoot = root as HTMLElement;
     htmlRoot.style.transition = `all ${transitionDuration}ms ease-in-out`;
-    
+
     // Remove transition after it completes
     setTimeout(() => {
       htmlRoot.style.transition = '';
@@ -102,17 +101,19 @@ export function switchTheme(
   persistTheme(resolvedMode, { storageKey });
 
   // Dispatch custom event for listeners
-  window.dispatchEvent(new CustomEvent('atomix-theme-change', { 
-    detail: { mode: resolvedMode } 
-  }));
+  window.dispatchEvent(
+    new CustomEvent('atomix-theme-change', {
+      detail: { mode: resolvedMode },
+    })
+  );
 }
 
 /**
  * Toggle between light and dark themes
- * 
+ *
  * @param options - Configuration options
  * @returns The new theme mode
- * 
+ *
  * @example
  * ```typescript
  * const newMode = toggleTheme();
@@ -128,56 +129,44 @@ export function toggleTheme(options: ThemeSwitcherOptions = {}): ThemeMode {
 
 /**
  * Get current theme mode
- * 
+ *
  * @param storageKey - Storage key (default: 'atomix-theme')
  * @returns Current theme mode or 'light' if not set
  */
 export function getCurrentTheme(storageKey: string = 'atomix-theme'): ThemeMode {
   if (typeof window === 'undefined') return 'light';
-  
+
   const stored = localStorage.getItem(storageKey);
   return (stored as ThemeMode) || 'light';
 }
 
-/**
- * Get system theme preference
- * 
- * @returns 'dark' if system prefers dark mode, 'light' otherwise
- */
-export function getSystemTheme(): ThemeMode {
-  if (typeof window === 'undefined') return 'light';
-  
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  return prefersDark ? 'dark' : 'light';
-}
-
 /**
  * Initialize theme based on saved preference or system preference
- * 
+ *
  * Call this once at app startup.
- * 
+ *
  * @param options - Configuration options
  * @returns The initialized theme mode
- * 
+ *
  * @example
  * ```typescript
  * // In your app entry point
  * import { initializeTheme } from '@shohojdhara/atomix/theme/utils';
- * 
+ *
  * const theme = initializeTheme();
  * console.log('Theme initialized:', theme);
  * ```
  */
 export function initializeTheme(options: ThemeSwitcherOptions = {}): ThemeMode {
   const saved = getCurrentTheme(options.storageKey);
-  
+
   // If no saved preference, use system preference
   if (!saved || saved === 'system') {
     const system = getSystemTheme();
     switchTheme(system, options);
     return system;
   }
-  
+
   // Use saved preference
   switchTheme(saved, options);
   return saved;
@@ -185,36 +174,36 @@ export function initializeTheme(options: ThemeSwitcherOptions = {}): ThemeMode {
 
 /**
  * Listen for system theme changes
- * 
+ *
  * @param callback - Function to call when system theme changes
  * @returns Cleanup function to stop listening
- * 
+ *
  * @example
  * ```typescript
  * const cleanup = listenToSystemTheme((mode) => {
  *   console.log('System theme changed to:', mode);
  *   switchTheme(mode);
  * });
- * 
+ *
  * // Later, when component unmounts
  * cleanup();
  * ```
  */
 export function listenToSystemTheme(callback: (mode: ThemeMode) => void): () => void {
   if (typeof window === 'undefined') return () => {};
-  
+
   const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  
+
   const handler = (e: MediaQueryListEvent) => {
     callback(e.matches ? 'dark' : 'light');
   };
-  
+
   // Modern browsers
   if (mediaQuery.addEventListener) {
     mediaQuery.addEventListener('change', handler);
     return () => mediaQuery.removeEventListener('change', handler);
   }
-  
+
   // Fallback for older browsers
   mediaQuery.addListener(handler);
   return () => mediaQuery.removeListener(handler);
@@ -226,38 +215,29 @@ export function listenToSystemTheme(callback: (mode: ThemeMode) => void): () =>
 
 /**
  * Save theme preference to storage
- * 
+ *
  * @param mode - Theme mode to save
  * @param options - Persistence options
  */
-export function persistTheme(
-  mode: ThemeMode,
-  options: ThemePersistenceOptions = {}
-): void {
+export function persistTheme(mode: ThemeMode, options: ThemePersistenceOptions = {}): void {
   if (typeof window === 'undefined') return;
-  
-  const {
-    storageKey = 'atomix-theme',
-    storageType = 'localStorage',
-  } = options;
-  
+
+  const { storageKey = 'atomix-theme', storageType = 'localStorage' } = options;
+
   const storage = storageType === 'localStorage' ? localStorage : sessionStorage;
   storage.setItem(storageKey, mode);
 }
 
 /**
  * Clear saved theme preference
- * 
+ *
  * @param options - Persistence options
  */
 export function clearThemePreference(options: ThemePersistenceOptions = {}): void {
   if (typeof window === 'undefined') return;
-  
-  const {
-    storageKey = 'atomix-theme',
-    storageType = 'localStorage',
-  } = options;
-  
+
+  const { storageKey = 'atomix-theme', storageType = 'localStorage' } = options;
+
   const storage = storageType === 'localStorage' ? localStorage : sessionStorage;
   storage.removeItem(storageKey);
 }
@@ -268,12 +248,12 @@ export function clearThemePreference(options: ThemePersistenceOptions = {}): voi
 
 /**
  * Merge multiple token sets
- * 
+ *
  * Deep merges token objects, with later tokens overriding earlier ones.
- * 
+ *
  * @param tokens - Token objects to merge
  * @returns Merged tokens
- * 
+ *
  * @example
  * ```typescript
  * const merged = mergeTokens(
@@ -290,13 +270,13 @@ export function mergeTokens(...tokens: Array<Partial<DesignTokens>>): Partial<De
 
 /**
  * Override specific tokens
- * 
+ *
  * Creates a new token object with specific overrides.
- * 
+ *
  * @param base - Base tokens
  * @param overrides - Tokens to override
  * @returns New tokens with overrides applied
- * 
+ *
  * @example
  * ```typescript
  * const customized = overrideTokens(defaultTokens, {
@@ -315,13 +295,13 @@ export function overrideTokens(
 
 /**
  * Pick specific token categories
- * 
+ *
  * Extracts only the specified categories from tokens.
- * 
+ *
  * @param tokens - Source tokens
  * @param categories - Categories to pick
  * @returns Tokens with only selected categories
- * 
+ *
  * @example
  * ```typescript
  * const colorTokens = pickTokens(allTokens, ['colors']);
@@ -332,25 +312,25 @@ export function pickTokens(
   categories: Array<keyof DesignTokens>
 ): Partial<DesignTokens> {
   const result: Partial<DesignTokens> = {};
-  
+
   categories.forEach(category => {
     if (tokens[category]) {
       result[category] = tokens[category];
     }
   });
-  
+
   return result;
 }
 
 /**
  * Omit specific token categories
- * 
+ *
  * Removes specified categories from tokens.
- * 
+ *
  * @param tokens - Source tokens
  * @param categories - Categories to omit
  * @returns Tokens without omitted categories
- * 
+ *
  * @example
  * ```typescript
  * const withoutColors = omitTokens(allTokens, ['colors']);
@@ -361,11 +341,11 @@ export function omitTokens(
   categories: Array<keyof DesignTokens>
 ): Partial<DesignTokens> {
   const result = { ...tokens };
-  
+
   categories.forEach(category => {
     delete result[category];
   });
-  
+
   return result;
 }
 
@@ -375,22 +355,25 @@ export function omitTokens(
 
 /**
  * Convert hex color to RGB
- * 
+ *
  * @param hex - Hex color (with or without #)
  * @returns RGB object { r, g, b }
  */
 export function hexToRgb(hex: string): { r: number; g: number; b: number } | null {
   // Remove # if present
   hex = hex.replace(/^#/, '');
-  
+
   // Handle shorthand hex
   if (hex.length === 3) {
-    hex = hex.split('').map(c => c + c).join('');
+    hex = hex
+      .split('')
+      .map(c => c + c)
+      .join('');
   }
-  
+
   // Validate
   if (hex.length !== 6) return null;
-  
+
   const num = parseInt(hex, 16);
   return {
     r: (num >> 16) & 255,
@@ -401,42 +384,47 @@ export function hexToRgb(hex: string): { r: number; g: number; b: number } | nul
 
 /**
  * Convert RGB to hex
- * 
+ *
  * @param r - Red (0-255)
  * @param g - Green (0-255)
  * @param b - Blue (0-255)
  * @returns Hex color with #
  */
 export function rgbToHex(r: number, g: number, b: number): string {
-  return '#' + [r, g, b].map(x => {
-    const hex = x.toString(16);
-    return hex.length === 1 ? '0' + hex : hex;
-  }).join('');
+  return (
+    '#' +
+    [r, g, b]
+      .map(x => {
+        const hex = x.toString(16);
+        return hex.length === 1 ? '0' + hex : hex;
+      })
+      .join('')
+  );
 }
 
 /**
  * Calculate luminance of a color
- * 
+ *
  * Used for determining contrast ratios.
- * 
+ *
  * @param hex - Hex color
  * @returns Luminance value (0-1)
  */
 export function getLuminance(hex: string): number {
   const rgb = hexToRgb(hex);
   if (!rgb) return 0;
-  
+
   const [r, g, b] = [rgb.r, rgb.g, rgb.b].map(v => {
     v /= 255;
     return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
   });
-  
+
   return 0.2126 * (r ?? 0) + 0.7152 * (g ?? 0) + 0.0722 * (b ?? 0);
 }
 
 /**
  * Calculate contrast ratio between two colors
- * 
+ *
  * @param hex1 - First hex color
  * @param hex2 - Second hex color
  * @returns Contrast ratio (1-21)
@@ -444,16 +432,16 @@ export function getLuminance(hex: string): number {
 export function getContrastRatio(hex1: string, hex2: string): number {
   const lum1 = getLuminance(hex1);
   const lum2 = getLuminance(hex2);
-  
+
   const brightest = Math.max(lum1, lum2);
   const darkest = Math.min(lum1, lum2);
-  
+
   return (brightest + 0.05) / (darkest + 0.05);
 }
 
 /**
  * Check if text color passes WCAG AA standard
- * 
+ *
  * @param textColor - Text color hex
  * @param backgroundColor - Background color hex
  * @param size - Font size ('small' or 'large')
@@ -465,16 +453,16 @@ export function isAccessible(
   size: 'small' | 'large' = 'small'
 ): boolean {
   const ratio = getContrastRatio(textColor, backgroundColor);
-  
+
   // WCAG AA requires 4.5:1 for normal text, 3:1 for large text
   const minimumRatio = size === 'large' ? 3 : 4.5;
-  
+
   return ratio >= minimumRatio;
 }
 
 /**
  * Get appropriate text color (black or white) for a background
- * 
+ *
  * @param backgroundColor - Background hex color
  * @param threshold - Contrast threshold (default: 3)
  * @returns '#000000' or '#FFFFFF'
@@ -489,7 +477,7 @@ export function getContrastText(backgroundColor: string, threshold: number = 3):
 
 /**
  * Lighten a color
- * 
+ *
  * @param hex - Base hex color
  * @param amount - Amount to lighten (0-1)
  * @returns Lightened hex color
@@ -497,20 +485,20 @@ export function getContrastText(backgroundColor: string, threshold: number = 3):
 export function lighten(hex: string, amount: number = 0): string {
   const rgb = hexToRgb(hex);
   if (!rgb) return hex;
-  
+
   // Use amount directly as factor (0-1)
   const factor = Math.max(0, Math.min(1, amount));
-  
+
   const r = Math.round(rgb.r + (255 - rgb.r) * factor);
   const g = Math.round(rgb.g + (255 - rgb.g) * factor);
   const b = Math.round(rgb.b + (255 - rgb.b) * factor);
-  
+
   return rgbToHex(Math.min(255, r), Math.min(255, g), Math.min(255, b));
 }
 
 /**
  * Darken a color
- * 
+ *
  * @param hex - Base hex color
  * @param amount - Amount to darken (0-1)
  * @returns Darkened hex color
@@ -518,20 +506,20 @@ export function lighten(hex: string, amount: number = 0): string {
 export function darken(hex: string, amount: number = 0): string {
   const rgb = hexToRgb(hex);
   if (!rgb) return hex;
-  
+
   // Use amount directly as factor (0-1)
   const factor = Math.max(0, Math.min(1, amount));
-  
+
   const r = Math.round(rgb.r * (1 - factor));
   const g = Math.round(rgb.g * (1 - factor));
   const b = Math.round(rgb.b * (1 - factor));
-  
+
   return rgbToHex(Math.max(0, r), Math.max(0, g), Math.max(0, b));
 }
 
 /**
  * Add alpha to a color
- * 
+ *
  * @param hex - Hex color
  * @param opacity - Opacity value (0-1)
  * @returns RGBA color string
@@ -539,14 +527,14 @@ export function darken(hex: string, amount: number = 0): string {
 export function alpha(hex: string, opacity: number): string {
   const rgb = hexToRgb(hex);
   if (!rgb) return hex;
-  
+
   const validOpacity = Math.max(0, Math.min(1, opacity));
   return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${validOpacity})`;
 }
 
 /**
  * Emphasize a color (lighten if dark, darken if light)
- * 
+ *
  * @param hex - Hex color
  * @param amount - Amount to emphasize (0-1)
  * @returns Emphasized hex color
@@ -558,7 +546,7 @@ export function emphasize(hex: string, amount: number = 0.15): string {
 
 /**
  * Create a spacing utility
- * 
+ *
  * @param spacingInput - Spacing configuration
  * @returns Spacing function
  */