@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.10 → 0.2.16

package/dist/themes/systemThemeDetector.d.ts

@@ -1,148 +0,0 @@
-
-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/themeCSSUpdater.d.ts

@@ -1,229 +0,0 @@
-
-export class ThemeCSSUpdater {
-  private root: HTMLElement;
-
-  constructor() {
-    this.root = document.documentElement;
-  }
-
-  applyTheme(theme: CompleteThemeConfig): void {
-    this.applyColors(theme.colors);
-    this.applyFonts(theme.fonts);
-    this.applySpacing(theme.spacing);
-    this.applyShadows(theme.shadows);
-    this.applyTransitions(theme.transitions);
-    this.applyBorderRadius(theme.borderRadius);
-  }
-
-  private applyColors(colors: CompleteThemeConfig['colors']): void {
-    // Primary colors - set both flat and nested versions for compatibility
-    Object.entries(colors.primary).forEach(([shade, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-primary-${shade}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-colors-primary-${shade}`, value);
-    });
-
-    // Secondary colors - set both flat and nested versions
-    Object.entries(colors.secondary).forEach(([shade, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-secondary-${shade}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-colors-secondary-${shade}`, value);
-    });
-
-    // Semantic colors - set both flat and nested versions
-    this.root.style.setProperty('--cs-success', colors.semantic.success);
-    this.root.style.setProperty('--cs-colors-semantic-success', colors.semantic.success);
-    this.root.style.setProperty('--cs-warning', colors.semantic.warning);
-    this.root.style.setProperty('--cs-colors-semantic-warning', colors.semantic.warning);
-    this.root.style.setProperty('--cs-error', colors.semantic.error);
-    this.root.style.setProperty('--cs-colors-semantic-error', colors.semantic.error);
-    this.root.style.setProperty('--cs-info', colors.semantic.info);
-    this.root.style.setProperty('--cs-colors-semantic-info', colors.semantic.info);
-
-    // Neutral colors - set both flat and nested versions
-    Object.entries(colors.neutral).forEach(([shade, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-neutral-${shade}`, value);
-      // Set nested version (for components that expect it)
-      this.root.style.setProperty(`--cs-colors-neutral-${shade}`, value);
-    });
-
-    // Surface colors - set both flat and nested versions
-    this.root.style.setProperty('--cs-page-bg', colors.surface.background);
-    this.root.style.setProperty('--cs-colors-surface-background', colors.surface.background);
-    this.root.style.setProperty('--cs-surface-bg', colors.surface.surface);
-    this.root.style.setProperty('--cs-colors-surface-surface', colors.surface.surface);
-    this.root.style.setProperty('--cs-border', colors.surface.border);
-    this.root.style.setProperty('--cs-colors-border', colors.surface.border);
-    this.root.style.setProperty('--cs-divider', colors.surface.divider);
-    this.root.style.setProperty('--cs-colors-divider', colors.surface.divider);
-
-    // Text colors - set both flat and nested versions
-    this.root.style.setProperty('--cs-text-primary', colors.text.primary);
-    this.root.style.setProperty('--cs-colors-text-primary', colors.text.primary);
-    this.root.style.setProperty('--cs-text-secondary', colors.text.secondary);
-    this.root.style.setProperty('--cs-colors-text-secondary', colors.text.secondary);
-    this.root.style.setProperty('--cs-text-muted', colors.text.muted);
-    this.root.style.setProperty('--cs-colors-text-muted', colors.text.muted);
-    this.root.style.setProperty('--cs-text-inverse', colors.text.inverse);
-    this.root.style.setProperty('--cs-colors-text-inverse', colors.text.inverse);
-    this.root.style.setProperty('--cs-text-on-primary', colors.text.onPrimary);
-    this.root.style.setProperty('--cs-colors-text-on-primary', colors.text.onPrimary);
-    this.root.style.setProperty('--cs-text-on-secondary', colors.text.onSecondary);
-    this.root.style.setProperty('--cs-colors-text-on-secondary', colors.text.onSecondary);
-    this.root.style.setProperty('--cs-text-on-surface', colors.text.onSurface);
-    this.root.style.setProperty('--cs-colors-text-on-surface', colors.text.onSurface);
-
-    // Interactive colors - set both flat and nested versions
-    this.root.style.setProperty('--cs-hover-bg', colors.interactive.hover);
-    this.root.style.setProperty('--cs-colors-interactive-hover', colors.interactive.hover);
-    this.root.style.setProperty('--cs-active-bg', colors.interactive.active);
-    this.root.style.setProperty('--cs-colors-interactive-active', colors.interactive.active);
-    this.root.style.setProperty('--cs-focus', colors.interactive.focus);
-    this.root.style.setProperty('--cs-colors-interactive-focus', colors.interactive.focus);
-    this.root.style.setProperty('--cs-disabled', colors.interactive.disabled);
-    this.root.style.setProperty('--cs-colors-interactive-disabled', colors.interactive.disabled);
-  }
-
-  private applyFonts(fonts: CompleteThemeConfig['fonts']): void {
-    // Helper function to build font family string with fallbacks
-    const buildFontFamily = (config: any) => {
-      if (config.fallbacks && config.fallbacks.length > 0) {
-        return `${config.family}, ${config.fallbacks.join(', ')}`;
-      }
-      return config.family;
-    };
-
-    // Primary font
-    this.root.style.setProperty('--cs-fonts-primary-family', buildFontFamily(fonts.primary));
-    this.root.style.setProperty('--cs-fonts-primary-weights', fonts.primary.weights.join(', '));
-
-    // Font sizes
-    Object.entries(fonts.primary.sizes).forEach(([size, value]) => {
-      this.root.style.setProperty(`--cs-fonts-primary-sizes-${size}`, value);
-    });
-
-    // Line heights
-    Object.entries(fonts.primary.lineHeights).forEach(([height, value]) => {
-      this.root.style.setProperty(`--cs-fonts-primary-line-heights-${height}`, value);
-    });
-
-    // Letter spacing
-    Object.entries(fonts.primary.letterSpacing).forEach(([spacing, value]) => {
-      this.root.style.setProperty(`--cs-fonts-primary-letter-spacing-${spacing}`, value);
-    });
-
-    // Secondary font
-    this.root.style.setProperty('--cs-fonts-secondary-family', buildFontFamily(fonts.secondary));
-
-    // Display font
-    this.root.style.setProperty('--cs-fonts-display-family', buildFontFamily(fonts.display));
-
-    // Body font
-    this.root.style.setProperty('--cs-fonts-body-family', buildFontFamily(fonts.body));
-
-    // Mono font
-    this.root.style.setProperty('--cs-fonts-mono-family', buildFontFamily(fonts.mono));
-  }
-
-  private applySpacing(spacing: CompleteThemeConfig['spacing']): void {
-    // Scale spacing - set both flat and nested versions
-    Object.entries(spacing.scale).forEach(([size, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-spacing-${size}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-spacing-scale-${size}`, value);
-    });
-
-    // Component spacing
-    this.root.style.setProperty('--cs-button-padding', spacing.component.button.padding);
-    this.root.style.setProperty('--cs-button-margin', spacing.component.button.margin);
-    this.root.style.setProperty('--cs-button-gap', spacing.component.button.gap);
-
-    this.root.style.setProperty('--cs-input-padding', spacing.component.input.padding);
-    this.root.style.setProperty('--cs-input-margin', spacing.component.input.margin);
-    this.root.style.setProperty('--cs-input-gap', spacing.component.input.gap);
-
-    this.root.style.setProperty('--cs-card-padding', spacing.component.card.padding);
-    this.root.style.setProperty('--cs-card-margin', spacing.component.card.margin);
-    this.root.style.setProperty('--cs-card-gap', spacing.component.card.gap);
-
-    // Layout spacing
-    this.root.style.setProperty('--cs-page-spacing', spacing.layout.page);
-    this.root.style.setProperty('--cs-section-spacing', spacing.layout.section);
-    this.root.style.setProperty('--cs-container-spacing', spacing.layout.container);
-    this.root.style.setProperty('--cs-grid-spacing', spacing.layout.grid);
-  }
-
-  private applyShadows(shadows: CompleteThemeConfig['shadows']): void {
-    Object.entries(shadows).forEach(([shadow, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-shadow-${shadow}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-shadows-${shadow}`, value);
-    });
-  }
-
-  private applyTransitions(transitions: CompleteThemeConfig['transitions']): void {
-    // Duration - set both flat and nested versions
-    Object.entries(transitions.duration).forEach(([duration, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-transition-duration-${duration}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-transitions-duration-${duration}`, value);
-    });
-
-    // Easing - set both flat and nested versions
-    Object.entries(transitions.easing).forEach(([ease, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-transition-easing-${ease}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-transitions-easing-${ease}`, value);
-    });
-
-    // Properties - set both flat and nested versions
-    Object.entries(transitions.properties).forEach(([property, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-transition-${property}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-transitions-properties-${property}`, value);
-    });
-  }
-
-  private applyBorderRadius(borderRadius: CompleteThemeConfig['borderRadius']): void {
-    Object.entries(borderRadius).forEach(([size, value]) => {
-      // Set flat version (for backward compatibility)
-      this.root.style.setProperty(`--cs-border-radius-${size}`, value);
-      // Set nested version (for badge CSS and other components)
-      this.root.style.setProperty(`--cs-border-radius-${size}`, value);
-    });
-  }
-
-  clearTheme(): void {
-    const cssVars = [
-      '--cs-primary-50', '--cs-primary-100', '--cs-primary-200', '--cs-primary-300',
-      '--cs-primary-400', '--cs-primary-500', '--cs-primary-600', '--cs-primary-700',
-      '--cs-primary-800', '--cs-primary-900',
-      '--cs-secondary-50', '--cs-secondary-100', '--cs-secondary-200', '--cs-secondary-300',
-      '--cs-secondary-400', '--cs-secondary-500', '--cs-secondary-600', '--cs-secondary-700',
-      '--cs-secondary-800', '--cs-secondary-900',
-      '--cs-success', '--cs-warning', '--cs-error', '--cs-info',
-      '--cs-neutral-50', '--cs-neutral-100', '--cs-neutral-200', '--cs-neutral-300',
-      '--cs-neutral-400', '--cs-neutral-500', '--cs-neutral-600', '--cs-neutral-700',
-      '--cs-neutral-800', '--cs-neutral-900',
-      '--cs-page-bg', '--cs-surface-bg', '--cs-border', '--cs-divider',
-      '--cs-text-primary', '--cs-text-secondary', '--cs-text-muted', '--cs-text-inverse',
-      '--cs-text-on-primary', '--cs-text-on-secondary', '--cs-text-on-surface',
-      '--cs-hover-bg', '--cs-active-bg', '--cs-focus', '--cs-disabled',
-      '--cs-font-primary', '--cs-font-secondary', '--cs-font-display', '--cs-font-body', '--cs-font-mono'
-    ];
-
-    cssVars.forEach(varName => {
-      this.root.style.removeProperty(varName);
-    });
-  }
-}
-
-export declare const themeCSSUpdater: new ThemeCSSUpdater();

package/dist/themes/themePersistence.d.ts

@@ -1,192 +0,0 @@
-
-export interface ThemePersistenceOptions {
-  storageKey?: string;
-  defaultTheme?: string;
-  enableSystemPreference?: boolean;
-  enableSystemThemeDetection?: boolean;
-  systemThemeStorageKey?: string;
-}
-
-export class ThemePersistence {
-  private storageKey: string;
-  private defaultTheme: string;
-  private enableSystemPreference: boolean;
-  private enableSystemThemeDetection: boolean;
-  private systemThemeStorageKey: string;
-
-  constructor(options: ThemePersistenceOptions = {}) {
-    this.storageKey = options.storageKey || 'stan-design-theme';
-    this.defaultTheme = options.defaultTheme || 'stan-design';
-    this.enableSystemPreference = options.enableSystemPreference ?? true;
-    this.enableSystemThemeDetection = options.enableSystemThemeDetection ?? true;
-    this.systemThemeStorageKey = options.systemThemeStorageKey || 'stan-design-system-theme';
-  }
-
-  getStoredTheme(): string {
-    try {
-      // Check localStorage first
-      const stored = localStorage.getItem(this.storageKey);
-      if (stored) {
-        return stored;
-      }
-
-      // Fall back to system preference if enabled
-      if (this.enableSystemPreference) {
-        const systemPreference = this.getSystemPreference();
-        if (systemPreference) {
-          return systemPreference;
-        }
-      }
-
-      // Finally fall back to default
-      return this.defaultTheme;
-    } catch (error) {
-      console.warn('Failed to read theme from storage:', error);
-      return this.defaultTheme;
-    }
-  }
-
-  setStoredTheme(themeName: string): void {
-    try {
-      localStorage.setItem(this.storageKey, themeName);
-    } catch (error) {
-      console.warn('Failed to store theme preference:', error);
-    }
-  }
-
-  clearStoredTheme(): void {
-    try {
-      localStorage.removeItem(this.storageKey);
-    } catch (error) {
-      console.warn('Failed to clear theme preference:', error);
-    }
-  }
-
-  private getSystemPreference(): string | null {
-    try {
-      if (typeof window !== 'undefined' && window.matchMedia) {
-        const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        return darkModeQuery.matches ? 'dark' : 'light';
-      }
-    } catch (error) {
-      console.warn('Failed to detect system preference:', error);
-    }
-    return null;
-  }
-
-  onSystemPreferenceChange(callback: (preference: string) => void): (() => void) | null {
-    try {
-      if (typeof window !== 'undefined' && window.matchMedia) {
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-        const handleChange = (event: MediaQueryListEvent) => {
-          const preference = event.matches ? 'dark' : 'light';
-          callback(preference);
-        };
-
-        // Modern browsers
-        if (mediaQuery.addEventListener) {
-          mediaQuery.addEventListener('change', handleChange);
-          return () => mediaQuery.removeEventListener('change', handleChange);
-        }
-        // Legacy browsers
-        else if (mediaQuery.addListener) {
-          mediaQuery.addListener(handleChange);
-          return () => mediaQuery.removeListener(handleChange);
-        }
-      }
-    } catch (error) {
-      console.warn('Failed to set up system preference listener:', error);
-    }
-    return null;
-  }
-
-  isStorageAvailable(): boolean {
-    try {
-      const test = '__test__';
-      localStorage.setItem(test, test);
-      localStorage.removeItem(test);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  getThemeKeys(): string[] {
-    try {
-      const keys: string[] = [];
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i);
-        if (key && key.includes('theme')) {
-          keys.push(key);
-        }
-      }
-      return keys;
-    } catch (error) {
-      console.warn('Failed to get theme keys:', error);
-      return [];
-    }
-  }
-
-  getStoredSystemTheme(): 'light' | 'dark' | null {
-    try {
-      const stored = localStorage.getItem(this.systemThemeStorageKey);
-      if (stored === 'light' || stored === 'dark') {
-        return stored;
-      }
-    } catch (error) {
-      console.warn('Failed to read system theme from storage:', error);
-    }
-    return null;
-  }
-
-  setStoredSystemTheme(theme: 'light' | 'dark'): void {
-    try {
-      localStorage.setItem(this.systemThemeStorageKey, theme);
-    } catch (error) {
-      console.warn('Failed to store system theme preference:', error);
-    }
-  }
-
-  clearStoredSystemTheme(): void {
-    try {
-      localStorage.removeItem(this.systemThemeStorageKey);
-    } catch (error) {
-      console.warn('Failed to clear system theme preference:', error);
-    }
-  }
-
-  getThemeState(): {
-    theme: string;
-    systemTheme: 'light' | 'dark' | null;
-    isSystemThemeEnabled: boolean;
-  } {
-    return {
-      theme: this.getStoredTheme(),
-      systemTheme: this.getStoredSystemTheme(),
-      isSystemThemeEnabled: this.enableSystemThemeDetection
-    };
-  }
-
-  setThemeState(state: {
-    theme?: string;
-    systemTheme?: 'light' | 'dark';
-    enableSystemTheme?: boolean;
-  }): void {
-    if (state.theme !== undefined) {
-      this.setStoredTheme(state.theme);
-    }
-    if (state.systemTheme !== undefined) {
-      this.setStoredSystemTheme(state.systemTheme);
-    }
-    if (state.enableSystemTheme !== undefined) {
-      this.enableSystemThemeDetection = state.enableSystemTheme;
-    }
-  }
-}
-
-export declare const defaultThemePersistence: new ThemePersistence();
-
-export declare const createThemePersistence: (options: ThemePersistenceOptions) => {
-  return new ThemePersistence(options);
-};