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

package/dist/themes/systemThemeDetector.esm.js

@@ -3,27 +3,27 @@
  * Detects and manages system theme preferences
  */
 
-
+export type SystemTheme = 'light' | 'dark';
 
 export interface SystemThemeOptions {
-  defaultTheme?;
-  storageKey?;
-  enablePersistence?;
+  defaultTheme?: SystemTheme;
+  storageKey?: string;
+  enablePersistence?: boolean;
 }
 
 export class SystemThemeDetector {
-  private mediaQuery= null;
-  private storageKey;
-  private enablePersistence;
-  private listeners) => void> = new Set();
+  private mediaQuery: MediaQueryList | null = null;
+  private storageKey: string;
+  private enablePersistence: boolean;
+  private listeners: Set<(theme: SystemTheme) => void> = new Set();
 
-  constructor(options= {}) {
+  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)');
+      this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
       this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
     }
   }
@@ -31,8 +31,9 @@ export class SystemThemeDetector {
   /**
    * Get the current system theme preference
    */
-  getSystemTheme()) {
-      return this.mediaQuery.matches ? 'dark' ;
+  getSystemTheme(): SystemTheme {
+    if (this.mediaQuery) {
+      return this.mediaQuery.matches ? 'dark' : 'light';
     }
     
     // Fallback to stored preference or default
@@ -47,7 +48,8 @@ export class SystemThemeDetector {
   /**
    * Get stored theme preference
    */
-  getStoredPreference()=== 'undefined') {
+  getStoredPreference(): SystemTheme | null {
+    if (!this.enablePersistence || typeof window === 'undefined') {
       return null;
     }
 
@@ -57,7 +59,7 @@ export class SystemThemeDetector {
         return stored;
       }
     } catch (error) {
-      console.warn('Failed to read system theme preference from storage, error);
+      console.warn('Failed to read system theme preference from storage:', error);
     }
     
     return null;
@@ -66,21 +68,23 @@ export class SystemThemeDetector {
   /**
    * Store theme preference
    */
-  setStoredPreference(theme)=== 'undefined') {
+  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);
+      console.warn('Failed to store system theme preference:', error);
     }
   }
 
   /**
    * Check if system theme detection is supported
    */
-  isSupported()== 'undefined' && 
+  isSupported(): boolean {
+    return typeof window !== 'undefined' && 
            'matchMedia' in window && 
            'addEventListener' in MediaQueryList.prototype;
   }
@@ -88,7 +92,7 @@ export class SystemThemeDetector {
   /**
    * Subscribe to system theme changes
    */
-  subscribe(callback) => void)) => void {
+  subscribe(callback: (theme: SystemTheme) => void): () => void {
     this.listeners.add(callback);
     
     // Return unsubscribe function
@@ -100,11 +104,12 @@ export class SystemThemeDetector {
   /**
    * Notify all listeners of theme change
    */
-  private notifyListeners(theme)=> {
+  private notifyListeners(theme: SystemTheme): void {
+    this.listeners.forEach(callback => {
       try {
         callback(theme);
       } catch (error) {
-        console.error('Error in system theme change callback, error);
+        console.error('Error in system theme change callback:', error);
       }
     });
   }
@@ -112,8 +117,8 @@ export class SystemThemeDetector {
   /**
    * Handle media query changes
    */
-  private handleMediaQueryChange = (event)=> {
-    const newTheme= event.matches ? 'dark' ;
+  private handleMediaQueryChange = (event: MediaQueryListEvent): void => {
+    const newTheme: SystemTheme = event.matches ? 'dark' : 'light';
     
     if (this.enablePersistence) {
       this.setStoredPreference(newTheme);
@@ -125,26 +130,26 @@ export class SystemThemeDetector {
   /**
    * Get theme-aware CSS variables
    */
-  getThemeCSSVariables(theme), string> {
+  getThemeCSSVariables(theme: SystemTheme): Record<string, string> {
     const baseVars = {
-      '--system-theme',
-      '--system-theme-opposite'=== 'light' ? 'dark' ,
+      '--system-theme': theme,
+      '--system-theme-opposite': theme === 'light' ? 'dark' : 'light',
     };
 
     // Add system-specific color adjustments
     if (theme === 'dark') {
       return {
         ...baseVars,
-        '--system-bg',
-        '--system-text',
-        '--system-border',
+        '--system-bg': '#000000',
+        '--system-text': '#ffffff',
+        '--system-border': '#333333',
       };
     } else {
       return {
         ...baseVars,
-        '--system-bg',
-        '--system-text',
-        '--system-border',
+        '--system-bg': '#ffffff',
+        '--system-text': '#000000',
+        '--system-border': '#e5e7eb',
       };
     }
   }
@@ -152,7 +157,8 @@ export class SystemThemeDetector {
   /**
    * Apply system theme CSS variables to document
    */
-  applySystemThemeCSS(theme)=== 'undefined') return;
+  applySystemThemeCSS(theme: SystemTheme): void {
+    if (typeof document === 'undefined') return;
 
     const cssVars = this.getThemeCSSVariables(theme);
     
@@ -164,11 +170,13 @@ export class SystemThemeDetector {
   /**
    * Clean up event listeners
    */
-  destroy()) {
+  destroy(): void {
+    if (this.mediaQuery) {
       this.mediaQuery.removeEventListener('change', this.handleMediaQueryChange);
     }
     this.listeners.clear();
   }
 }
 
-// Note
+// Note: React hook is exported separately in a React-specific file
+// This file contains only the core SystemThemeDetector class

package/dist/themes/systemThemeDetector.js

@@ -3,27 +3,27 @@
  * Detects and manages system theme preferences
  */
 
-
+export type SystemTheme = 'light' | 'dark';
 
 export interface SystemThemeOptions {
-  defaultTheme?;
-  storageKey?;
-  enablePersistence?;
+  defaultTheme?: SystemTheme;
+  storageKey?: string;
+  enablePersistence?: boolean;
 }
 
 export class SystemThemeDetector {
-  private mediaQuery= null;
-  private storageKey;
-  private enablePersistence;
-  private listeners) => void> = new Set();
+  private mediaQuery: MediaQueryList | null = null;
+  private storageKey: string;
+  private enablePersistence: boolean;
+  private listeners: Set<(theme: SystemTheme) => void> = new Set();
 
-  constructor(options= {}) {
+  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)');
+      this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
       this.mediaQuery.addEventListener('change', this.handleMediaQueryChange);
     }
   }
@@ -31,8 +31,9 @@ export class SystemThemeDetector {
   /**
    * Get the current system theme preference
    */
-  getSystemTheme()) {
-      return this.mediaQuery.matches ? 'dark' ;
+  getSystemTheme(): SystemTheme {
+    if (this.mediaQuery) {
+      return this.mediaQuery.matches ? 'dark' : 'light';
     }
     
     // Fallback to stored preference or default
@@ -47,7 +48,8 @@ export class SystemThemeDetector {
   /**
    * Get stored theme preference
    */
-  getStoredPreference()=== 'undefined') {
+  getStoredPreference(): SystemTheme | null {
+    if (!this.enablePersistence || typeof window === 'undefined') {
       return null;
     }
 
@@ -57,7 +59,7 @@ export class SystemThemeDetector {
         return stored;
       }
     } catch (error) {
-      console.warn('Failed to read system theme preference from storage, error);
+      console.warn('Failed to read system theme preference from storage:', error);
     }
     
     return null;
@@ -66,21 +68,23 @@ export class SystemThemeDetector {
   /**
    * Store theme preference
    */
-  setStoredPreference(theme)=== 'undefined') {
+  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);
+      console.warn('Failed to store system theme preference:', error);
     }
   }
 
   /**
    * Check if system theme detection is supported
    */
-  isSupported()== 'undefined' && 
+  isSupported(): boolean {
+    return typeof window !== 'undefined' && 
            'matchMedia' in window && 
            'addEventListener' in MediaQueryList.prototype;
   }
@@ -88,7 +92,7 @@ export class SystemThemeDetector {
   /**
    * Subscribe to system theme changes
    */
-  subscribe(callback) => void)) => void {
+  subscribe(callback: (theme: SystemTheme) => void): () => void {
     this.listeners.add(callback);
     
     // Return unsubscribe function
@@ -100,11 +104,12 @@ export class SystemThemeDetector {
   /**
    * Notify all listeners of theme change
    */
-  private notifyListeners(theme)=> {
+  private notifyListeners(theme: SystemTheme): void {
+    this.listeners.forEach(callback => {
       try {
         callback(theme);
       } catch (error) {
-        console.error('Error in system theme change callback, error);
+        console.error('Error in system theme change callback:', error);
       }
     });
   }
@@ -112,8 +117,8 @@ export class SystemThemeDetector {
   /**
    * Handle media query changes
    */
-  private handleMediaQueryChange = (event)=> {
-    const newTheme= event.matches ? 'dark' ;
+  private handleMediaQueryChange = (event: MediaQueryListEvent): void => {
+    const newTheme: SystemTheme = event.matches ? 'dark' : 'light';
     
     if (this.enablePersistence) {
       this.setStoredPreference(newTheme);
@@ -125,26 +130,26 @@ export class SystemThemeDetector {
   /**
    * Get theme-aware CSS variables
    */
-  getThemeCSSVariables(theme), string> {
+  getThemeCSSVariables(theme: SystemTheme): Record<string, string> {
     const baseVars = {
-      '--system-theme',
-      '--system-theme-opposite'=== 'light' ? 'dark' ,
+      '--system-theme': theme,
+      '--system-theme-opposite': theme === 'light' ? 'dark' : 'light',
     };
 
     // Add system-specific color adjustments
     if (theme === 'dark') {
       return {
         ...baseVars,
-        '--system-bg',
-        '--system-text',
-        '--system-border',
+        '--system-bg': '#000000',
+        '--system-text': '#ffffff',
+        '--system-border': '#333333',
       };
     } else {
       return {
         ...baseVars,
-        '--system-bg',
-        '--system-text',
-        '--system-border',
+        '--system-bg': '#ffffff',
+        '--system-text': '#000000',
+        '--system-border': '#e5e7eb',
       };
     }
   }
@@ -152,7 +157,8 @@ export class SystemThemeDetector {
   /**
    * Apply system theme CSS variables to document
    */
-  applySystemThemeCSS(theme)=== 'undefined') return;
+  applySystemThemeCSS(theme: SystemTheme): void {
+    if (typeof document === 'undefined') return;
 
     const cssVars = this.getThemeCSSVariables(theme);
     
@@ -164,11 +170,13 @@ export class SystemThemeDetector {
   /**
    * Clean up event listeners
    */
-  destroy()) {
+  destroy(): void {
+    if (this.mediaQuery) {
       this.mediaQuery.removeEventListener('change', this.handleMediaQueryChange);
     }
     this.listeners.clear();
   }
 }
 
-// Note
+// Note: React hook is exported separately in a React-specific file
+// This file contains only the core SystemThemeDetector class

package/dist/themes/themeCSSUpdater.esm.js

@@ -6,7 +6,7 @@
 import { CompleteThemeConfig } from './types';
 
 export class ThemeCSSUpdater {
-  private root;
+  private root: HTMLElement;
 
   constructor() {
     this.root = document.documentElement;
@@ -15,7 +15,8 @@ export class ThemeCSSUpdater {
   /**
    * Apply a complete theme configuration to CSS custom properties
    */
-  applyTheme(theme));
+  applyTheme(theme: CompleteThemeConfig): void {
+    this.applyColors(theme.colors);
     this.applyFonts(theme.fonts);
     this.applySpacing(theme.spacing);
     this.applyShadows(theme.shadows);
@@ -26,7 +27,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply color variables to CSS custom properties
    */
-  private applyColors(colors])).forEach(([shade, value]) => {
+  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)
@@ -99,7 +102,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply font variables to CSS custom properties
    */
-  private applyFonts(fonts])= (config) => {
+  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(', ')}`;
       }
@@ -141,7 +146,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply spacing variables to CSS custom properties
    */
-  private applySpacing(spacing])).forEach(([size, value]) => {
+  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)
@@ -171,7 +178,8 @@ export class ThemeCSSUpdater {
   /**
    * Apply shadow variables to CSS custom properties
    */
-  private applyShadows(shadows])).forEach(([shadow, value]) => {
+  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)
@@ -182,7 +190,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply transition variables to CSS custom properties
    */
-  private applyTransitions(transitions])).forEach(([duration, 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)
@@ -209,7 +219,8 @@ export class ThemeCSSUpdater {
   /**
    * Apply border radius variables to CSS custom properties
    */
-  private applyBorderRadius(borderRadius])).forEach(([size, 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)
@@ -220,7 +231,8 @@ export class ThemeCSSUpdater {
   /**
    * Clear all theme CSS variables
    */
-  clearTheme()= [
+  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',

package/dist/themes/themeCSSUpdater.js

@@ -6,7 +6,7 @@
 import { CompleteThemeConfig } from './types';
 
 export class ThemeCSSUpdater {
-  private root;
+  private root: HTMLElement;
 
   constructor() {
     this.root = document.documentElement;
@@ -15,7 +15,8 @@ export class ThemeCSSUpdater {
   /**
    * Apply a complete theme configuration to CSS custom properties
    */
-  applyTheme(theme));
+  applyTheme(theme: CompleteThemeConfig): void {
+    this.applyColors(theme.colors);
     this.applyFonts(theme.fonts);
     this.applySpacing(theme.spacing);
     this.applyShadows(theme.shadows);
@@ -26,7 +27,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply color variables to CSS custom properties
    */
-  private applyColors(colors])).forEach(([shade, value]) => {
+  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)
@@ -99,7 +102,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply font variables to CSS custom properties
    */
-  private applyFonts(fonts])= (config) => {
+  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(', ')}`;
       }
@@ -141,7 +146,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply spacing variables to CSS custom properties
    */
-  private applySpacing(spacing])).forEach(([size, value]) => {
+  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)
@@ -171,7 +178,8 @@ export class ThemeCSSUpdater {
   /**
    * Apply shadow variables to CSS custom properties
    */
-  private applyShadows(shadows])).forEach(([shadow, value]) => {
+  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)
@@ -182,7 +190,9 @@ export class ThemeCSSUpdater {
   /**
    * Apply transition variables to CSS custom properties
    */
-  private applyTransitions(transitions])).forEach(([duration, 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)
@@ -209,7 +219,8 @@ export class ThemeCSSUpdater {
   /**
    * Apply border radius variables to CSS custom properties
    */
-  private applyBorderRadius(borderRadius])).forEach(([size, 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)
@@ -220,7 +231,8 @@ export class ThemeCSSUpdater {
   /**
    * Clear all theme CSS variables
    */
-  clearTheme()= [
+  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',