@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.7 → 0.2.8

package/dist/themes/systemThemeDetector.d.ts

@@ -0,0 +1,148 @@
+
+export type SystemTheme = 'light' | 'dark';
+
+export interface SystemThemeOptions {
+  defaultTheme?: SystemTheme;
+  storageKey?: string;
+  enablePersistence?: boolean;
+}
+
+export class SystemThemeDetector {
+  private mediaQuery: MediaQueryList | null = null;
+  private storageKey: string;
+  private enablePersistence: boolean;
+  private listeners: Set<(theme: SystemTheme) => void> = new Set();
+
+  constructor(options: SystemThemeOptions = {}) {
+    this.storageKey = options.storageKey || 'system-theme-preference';
+    this.enablePersistence = options.enablePersistence ?? true;
+
+    // Initialize media query if available
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
+    }
+  }
+
+  getSystemTheme(): SystemTheme {
+    if (this.mediaQuery) {
+      return this.mediaQuery.matches ? 'dark' : 'light';
+    }
+
+    // Fallback to stored preference or default
+    if (this.enablePersistence) {
+      const stored = this.getStoredPreference();
+      if (stored) return stored;
+    }
+
+    return 'light';
+  }
+
+  getStoredPreference(): SystemTheme | null {
+    if (!this.enablePersistence || typeof window === 'undefined') {
+      return null;
+    }
+
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      if (stored === 'light' || stored === 'dark') {
+        return stored;
+      }
+    } catch (error) {
+      console.warn('Failed to read system theme preference from storage:', error);
+    }
+
+    return null;
+  }
+
+  setStoredPreference(theme: SystemTheme): void {
+    if (!this.enablePersistence || typeof window === 'undefined') {
+      return;
+    }
+
+    try {
+      localStorage.setItem(this.storageKey, theme);
+    } catch (error) {
+      console.warn('Failed to store system theme preference:', error);
+    }
+  }
+
+  isSupported(): boolean {
+    return typeof window !== 'undefined' && 
+           'matchMedia' in window && 
+           'addEventListener' in MediaQueryList.prototype;
+  }
+
+  subscribe(callback: (theme: SystemTheme) => void): () => void {
+    this.listeners.add(callback);
+
+    // Return unsubscribe function
+    return () => {
+      this.listeners.delete(callback);
+    };
+  }
+
+  private notifyListeners(theme: SystemTheme): void {
+    this.listeners.forEach(callback => {
+      try {
+        callback(theme);
+      } catch (error) {
+        console.error('Error in system theme change callback:', error);
+      }
+    });
+  }
+
+  private handleMediaQueryChange = (event: MediaQueryListEvent): void => {
+    const newTheme: SystemTheme = event.matches ? 'dark' : 'light';
+
+    if (this.enablePersistence) {
+      this.setStoredPreference(newTheme);
+    }
+
+    this.notifyListeners(newTheme);
+  };
+
+  getThemeCSSVariables(theme: SystemTheme): Record<string, string> {
+    const baseVars = {
+      '--system-theme': theme,
+      '--system-theme-opposite': theme === 'light' ? 'dark' : 'light',
+    };
+
+    // Add system-specific color adjustments
+    if (theme === 'dark') {
+      return {
+        ...baseVars,
+        '--system-bg': '#000000',
+        '--system-text': '#ffffff',
+        '--system-border': '#333333',
+      };
+    } else {
+      return {
+        ...baseVars,
+        '--system-bg': '#ffffff',
+        '--system-text': '#000000',
+        '--system-border': '#e5e7eb',
+      };
+    }
+  }
+
+  applySystemThemeCSS(theme: SystemTheme): void {
+    if (typeof document === 'undefined') return;
+
+    const cssVars = this.getThemeCSSVariables(theme);
+
+    Object.entries(cssVars).forEach(([property, value]) => {
+      document.documentElement.style.setProperty(property, value);
+    });
+  }
+
+  destroy(): void {
+    if (this.mediaQuery) {
+      this.mediaQuery.removeEventListener('change', this.handleMediaQueryChange);
+    }
+    this.listeners.clear();
+  }
+}
+
+// Note: React hook is exported separately in a React-specific file
+// This file contains only the core SystemThemeDetector class

package/dist/themes/systemThemeDetector.esm.js

@@ -0,0 +1,174 @@
+/**
+ * System Theme Detection Utility
+ * Detects and manages system theme preferences
+ */
+
+
+
+export interface SystemThemeOptions {
+  defaultTheme?;
+  storageKey?;
+  enablePersistence?;
+}
+
+export class SystemThemeDetector {
+  private mediaQuery= null;
+  private storageKey;
+  private enablePersistence;
+  private listeners) => void> = new Set();
+
+  constructor(options= {}) {
+    this.storageKey = options.storageKey || 'system-theme-preference';
+    this.enablePersistence = options.enablePersistence ?? true;
+    
+    // Initialize media query if available
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      this.mediaQuery = window.matchMedia('(prefers-color-scheme)');
+      this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
+    }
+  }
+
+  /**
+   * Get the current system theme preference
+   */
+  getSystemTheme()) {
+      return this.mediaQuery.matches ? 'dark' ;
+    }
+    
+    // Fallback to stored preference or default
+    if (this.enablePersistence) {
+      const stored = this.getStoredPreference();
+      if (stored) return stored;
+    }
+    
+    return 'light';
+  }
+
+  /**
+   * Get stored theme preference
+   */
+  getStoredPreference()=== 'undefined') {
+      return null;
+    }
+
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      if (stored === 'light' || stored === 'dark') {
+        return stored;
+      }
+    } catch (error) {
+      console.warn('Failed to read system theme preference from storage, error);
+    }
+    
+    return null;
+  }
+
+  /**
+   * Store theme preference
+   */
+  setStoredPreference(theme)=== 'undefined') {
+      return;
+    }
+
+    try {
+      localStorage.setItem(this.storageKey, theme);
+    } catch (error) {
+      console.warn('Failed to store system theme preference, error);
+    }
+  }
+
+  /**
+   * Check if system theme detection is supported
+   */
+  isSupported()== 'undefined' && 
+           'matchMedia' in window && 
+           'addEventListener' in MediaQueryList.prototype;
+  }
+
+  /**
+   * Subscribe to system theme changes
+   */
+  subscribe(callback) => void)) => void {
+    this.listeners.add(callback);
+    
+    // Return unsubscribe function
+    return () => {
+      this.listeners.delete(callback);
+    };
+  }
+
+  /**
+   * Notify all listeners of theme change
+   */
+  private notifyListeners(theme)=> {
+      try {
+        callback(theme);
+      } catch (error) {
+        console.error('Error in system theme change callback, error);
+      }
+    });
+  }
+
+  /**
+   * Handle media query changes
+   */
+  private handleMediaQueryChange = (event)=> {
+    const newTheme= event.matches ? 'dark' ;
+    
+    if (this.enablePersistence) {
+      this.setStoredPreference(newTheme);
+    }
+    
+    this.notifyListeners(newTheme);
+  };
+
+  /**
+   * Get theme-aware CSS variables
+   */
+  getThemeCSSVariables(theme), string> {
+    const baseVars = {
+      '--system-theme',
+      '--system-theme-opposite'=== 'light' ? 'dark' ,
+    };
+
+    // Add system-specific color adjustments
+    if (theme === 'dark') {
+      return {
+        ...baseVars,
+        '--system-bg',
+        '--system-text',
+        '--system-border',
+      };
+    } else {
+      return {
+        ...baseVars,
+        '--system-bg',
+        '--system-text',
+        '--system-border',
+      };
+    }
+  }
+
+  /**
+   * Apply system theme CSS variables to document
+   */
+  applySystemThemeCSS(theme)=== 'undefined') return;
+
+    const cssVars = this.getThemeCSSVariables(theme);
+    
+    Object.entries(cssVars).forEach(([property, value]) => {
+      document.documentElement.style.setProperty(property, value);
+    });
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  destroy()) {
+      this.mediaQuery.removeEventListener('change', this.handleMediaQueryChange);
+    }
+    this.listeners.clear();
+  }
+}
+
+// Note

package/dist/themes/systemThemeDetector.js

@@ -0,0 +1,174 @@
+/**
+ * System Theme Detection Utility
+ * Detects and manages system theme preferences
+ */
+
+
+
+export interface SystemThemeOptions {
+  defaultTheme?;
+  storageKey?;
+  enablePersistence?;
+}
+
+export class SystemThemeDetector {
+  private mediaQuery= null;
+  private storageKey;
+  private enablePersistence;
+  private listeners) => void> = new Set();
+
+  constructor(options= {}) {
+    this.storageKey = options.storageKey || 'system-theme-preference';
+    this.enablePersistence = options.enablePersistence ?? true;
+    
+    // Initialize media query if available
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      this.mediaQuery = window.matchMedia('(prefers-color-scheme)');
+      this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
+    }
+  }
+
+  /**
+   * Get the current system theme preference
+   */
+  getSystemTheme()) {
+      return this.mediaQuery.matches ? 'dark' ;
+    }
+    
+    // Fallback to stored preference or default
+    if (this.enablePersistence) {
+      const stored = this.getStoredPreference();
+      if (stored) return stored;
+    }
+    
+    return 'light';
+  }
+
+  /**
+   * Get stored theme preference
+   */
+  getStoredPreference()=== 'undefined') {
+      return null;
+    }
+
+    try {
+      const stored = localStorage.getItem(this.storageKey);
+      if (stored === 'light' || stored === 'dark') {
+        return stored;
+      }
+    } catch (error) {
+      console.warn('Failed to read system theme preference from storage, error);
+    }
+    
+    return null;
+  }
+
+  /**
+   * Store theme preference
+   */
+  setStoredPreference(theme)=== 'undefined') {
+      return;
+    }
+
+    try {
+      localStorage.setItem(this.storageKey, theme);
+    } catch (error) {
+      console.warn('Failed to store system theme preference, error);
+    }
+  }
+
+  /**
+   * Check if system theme detection is supported
+   */
+  isSupported()== 'undefined' && 
+           'matchMedia' in window && 
+           'addEventListener' in MediaQueryList.prototype;
+  }
+
+  /**
+   * Subscribe to system theme changes
+   */
+  subscribe(callback) => void)) => void {
+    this.listeners.add(callback);
+    
+    // Return unsubscribe function
+    return () => {
+      this.listeners.delete(callback);
+    };
+  }
+
+  /**
+   * Notify all listeners of theme change
+   */
+  private notifyListeners(theme)=> {
+      try {
+        callback(theme);
+      } catch (error) {
+        console.error('Error in system theme change callback, error);
+      }
+    });
+  }
+
+  /**
+   * Handle media query changes
+   */
+  private handleMediaQueryChange = (event)=> {
+    const newTheme= event.matches ? 'dark' ;
+    
+    if (this.enablePersistence) {
+      this.setStoredPreference(newTheme);
+    }
+    
+    this.notifyListeners(newTheme);
+  };
+
+  /**
+   * Get theme-aware CSS variables
+   */
+  getThemeCSSVariables(theme), string> {
+    const baseVars = {
+      '--system-theme',
+      '--system-theme-opposite'=== 'light' ? 'dark' ,
+    };
+
+    // Add system-specific color adjustments
+    if (theme === 'dark') {
+      return {
+        ...baseVars,
+        '--system-bg',
+        '--system-text',
+        '--system-border',
+      };
+    } else {
+      return {
+        ...baseVars,
+        '--system-bg',
+        '--system-text',
+        '--system-border',
+      };
+    }
+  }
+
+  /**
+   * Apply system theme CSS variables to document
+   */
+  applySystemThemeCSS(theme)=== 'undefined') return;
+
+    const cssVars = this.getThemeCSSVariables(theme);
+    
+    Object.entries(cssVars).forEach(([property, value]) => {
+      document.documentElement.style.setProperty(property, value);
+    });
+  }
+
+  /**
+   * Clean up event listeners
+   */
+  destroy()) {
+      this.mediaQuery.removeEventListener('change', this.handleMediaQueryChange);
+    }
+    this.listeners.clear();
+  }
+}
+
+// Note