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

package/dist/themes/useSystemTheme.esm.js

@@ -4,7 +4,7 @@ import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemTh
 /**
  * React hook for using system theme detection
  */
-export const useSystemTheme = (options= {}) => {
+export const useSystemTheme = (options: SystemThemeOptions = {}) => {
   const [systemTheme, setSystemTheme] = useState<SystemTheme>('light');
   const detectorRef = useRef<SystemThemeDetector | null>(null);
 
@@ -26,14 +26,14 @@ export const useSystemTheme = (options= {}) => {
     };
   }, [options.storageKey, options.enablePersistence]);
 
-  const setSystemThemePreference = useCallback((theme) => {
+  const setSystemThemePreference = useCallback((theme: SystemTheme) => {
     if (detectorRef.current) {
       detectorRef.current.setStoredPreference(theme);
       setSystemTheme(theme);
     }
   }, []);
 
-  const applySystemThemeCSS = useCallback((theme) => {
+  const applySystemThemeCSS = useCallback((theme: SystemTheme) => {
     if (detectorRef.current) {
       detectorRef.current.applySystemThemeCSS(theme);
     }
@@ -43,6 +43,6 @@ export const useSystemTheme = (options= {}) => {
     systemTheme,
     setSystemThemePreference,
     applySystemThemeCSS,
-    isSupported) ?? false,
+    isSupported: detectorRef.current?.isSupported() ?? false,
   };
 };

package/dist/themes/useSystemTheme.js

@@ -4,7 +4,7 @@ import { SystemThemeDetector, SystemTheme, SystemThemeOptions } from './systemTh
 /**
  * React hook for using system theme detection
  */
-export const useSystemTheme = (options= {}) => {
+export const useSystemTheme = (options: SystemThemeOptions = {}) => {
   const [systemTheme, setSystemTheme] = useState<SystemTheme>('light');
   const detectorRef = useRef<SystemThemeDetector | null>(null);
 
@@ -26,14 +26,14 @@ export const useSystemTheme = (options= {}) => {
     };
   }, [options.storageKey, options.enablePersistence]);
 
-  const setSystemThemePreference = useCallback((theme) => {
+  const setSystemThemePreference = useCallback((theme: SystemTheme) => {
     if (detectorRef.current) {
       detectorRef.current.setStoredPreference(theme);
       setSystemTheme(theme);
     }
   }, []);
 
-  const applySystemThemeCSS = useCallback((theme) => {
+  const applySystemThemeCSS = useCallback((theme: SystemTheme) => {
     if (detectorRef.current) {
       detectorRef.current.applySystemThemeCSS(theme);
     }
@@ -43,6 +43,6 @@ export const useSystemTheme = (options= {}) => {
     systemTheme,
     setSystemThemePreference,
     applySystemThemeCSS,
-    isSupported) ?? false,
+    isSupported: detectorRef.current?.isSupported() ?? false,
   };
 };

package/dist/themes/useTheme.esm.js

@@ -21,7 +21,7 @@ import { ThemeContext, ThemeContextType } from './ThemeContext';
  * }
  * ```
  */
-export const useTheme = ()=> {
+export const useTheme = (): ThemeContextType => {
   const context = useContext(ThemeContext);
   
   if (!context) {
@@ -46,14 +46,14 @@ export const useTheme = ()=> {
  *   if (!harveyTheme) return <div>Theme not found</div>;
  *   
  *   return (
- *     <div style={{ color] }}>
+ *     <div style={{ color: harveyTheme.colors.primary[500] }}>
  *       Harvey Theme Preview
  *     </div>
  *   );
  * }
  * ```
  */
-export const useThemeByName = (themeName) => {
+export const useThemeByName = (themeName: string) => {
   const { getTheme } = useTheme();
   return getTheme(themeName);
 };
@@ -81,7 +81,7 @@ export const useThemeByName = (themeName) => {
  * }
  * ```
  */
-export const useThemeAvailable = (themeName)=> {
+export const useThemeAvailable = (themeName: string): boolean => {
   const { availableThemes } = useTheme();
   return availableThemes.includes(themeName);
 };

package/dist/themes/useTheme.js

@@ -21,7 +21,7 @@ import { ThemeContext, ThemeContextType } from './ThemeContext';
  * }
  * ```
  */
-export const useTheme = ()=> {
+export const useTheme = (): ThemeContextType => {
   const context = useContext(ThemeContext);
   
   if (!context) {
@@ -46,14 +46,14 @@ export const useTheme = ()=> {
  *   if (!harveyTheme) return <div>Theme not found</div>;
  *   
  *   return (
- *     <div style={{ color] }}>
+ *     <div style={{ color: harveyTheme.colors.primary[500] }}>
  *       Harvey Theme Preview
  *     </div>
  *   );
  * }
  * ```
  */
-export const useThemeByName = (themeName) => {
+export const useThemeByName = (themeName: string) => {
   const { getTheme } = useTheme();
   return getTheme(themeName);
 };
@@ -81,7 +81,7 @@ export const useThemeByName = (themeName) => {
  * }
  * ```
  */
-export const useThemeAvailable = (themeName)=> {
+export const useThemeAvailable = (themeName: string): boolean => {
   const { availableThemes } = useTheme();
   return availableThemes.includes(themeName);
 };

package/dist/themes/validation.esm.js

@@ -30,11 +30,11 @@ export class ThemeValidator {
   ];
 
   private static readonly COLOR_FORMATS = {
-    hex]{6}|[A-Fa-f0-9]{3})$/,
-    rgb,\s*\d+\s*,\s*\d+\s*\)$/,
-    rgba,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/,
-    hsl,\s*\d+%\s*,\s*\d+%\s*\)$/,
-    hsla,\s*\d+%\s*,\s*\d+%\s*,\s*[\d.]+\s*\)$/
+    hex: /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
+    rgb: /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/,
+    rgba: /^rgba\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*,\s*[\d.]+\s*\)$/,
+    hsl: /^hsl\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*\)$/,
+    hsla: /^hsla\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*,\s*[\d.]+\s*\)$/
   };
 
   private static readonly FONT_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900];
@@ -42,8 +42,9 @@ export class ThemeValidator {
   /**
    * Validate a complete theme configuration
    */
-  static validateTheme(theme)] = [];
-    const warnings] = [];
+  static validateTheme(theme: MultiThemeConfig): ThemeValidationResult {
+    const errors: ThemeValidationError[] = [];
+    const warnings: ThemeValidationWarning[] = [];
 
     // Validate required fields
     this.validateRequiredFields(theme, errors);
@@ -70,7 +71,7 @@ export class ThemeValidator {
     this.validateSemanticConsistency(theme, warnings);
 
     return {
-      isValid=== 0,
+      isValid: errors.length === 0,
       errors,
       warnings
     };
@@ -79,13 +80,15 @@ export class ThemeValidator {
   /**
    * Validate that all required fields are present
    */
-  private static validateRequiredFields(theme, errors])) {
+  private static validateRequiredFields(theme: MultiThemeConfig, errors: ThemeValidationError[]): void {
+    for (const fieldPath of this.REQUIRED_FIELDS) {
       const value = this.getNestedValue(theme, fieldPath);
       if (value === undefined || value === null || value === '') {
         errors.push({
-          path,
-          message}' is missing or empty`,
-          severity});
+          path: fieldPath,
+          message: `Required field '${fieldPath}' is missing or empty`,
+          severity: 'error'
+        });
       }
     }
   }
@@ -93,7 +96,8 @@ export class ThemeValidator {
   /**
    * Validate color format consistency
    */
-  private static validateColorFormats(theme, errors], warnings])= this.getAllColorFields(theme);
+  private static validateColorFormats(theme: MultiThemeConfig, errors: ThemeValidationError[], warnings: ThemeValidationWarning[]): void {
+    const colorFields = this.getAllColorFields(theme);
     const formats = new Set<string>();
 
     for (const { path, value } of colorFields) {
@@ -102,8 +106,9 @@ export class ThemeValidator {
         if (!ColorManager.isValidColor(value)) {
           errors.push({
             path,
-            message}'. Expected hex, rgb, hsl, or named color format`,
-            severity});
+            message: `Invalid color format: '${value}'. Expected hex, rgb, hsl, or named color format`,
+            severity: 'error'
+          });
         } else {
           const format = this.detectColorFormat(value);
           if (format) {
@@ -116,16 +121,18 @@ export class ThemeValidator {
     // Warn if multiple color formats are used
     if (formats.size > 1) {
       warnings.push({
-        path,
-        message).join(', ')}. Consider using a consistent format for better maintainability`,
-        severity});
+        path: 'colors',
+        message: `Multiple color formats detected: ${Array.from(formats).join(', ')}. Consider using a consistent format for better maintainability`,
+        severity: 'warning'
+      });
     }
   }
 
   /**
    * Validate color contrast ratios
    */
-  private static validateColorContrast(theme, warnings])= [
+  private static validateColorContrast(theme: MultiThemeConfig, warnings: ThemeValidationWarning[]): void {
+    const textColors = [
       theme.colors?.text?.primary,
       theme.colors?.text?.secondary,
       theme.colors?.text?.muted
@@ -144,22 +151,25 @@ export class ThemeValidator {
           
           if (!accessibility.aa) {
             warnings.push({
-              path,
-              message)}}' and '${bgColor}' is below WCAG AA standard (4.5)`,
-              severity});
+              path: 'colors',
+              message: `Color contrast ratio ${accessibility.contrastRatio.toFixed(2)}:1 between '${textColor}' and '${bgColor}' is below WCAG AA standard (4.5:1)`,
+              severity: 'warning'
+            });
           } else if (!accessibility.aaa) {
             warnings.push({
-              path,
-              message)}}' and '${bgColor}' is below WCAG AAA standard (7)`,
-              severity});
+              path: 'colors',
+              message: `Color contrast ratio ${accessibility.contrastRatio.toFixed(2)}:1 between '${textColor}' and '${bgColor}' is below WCAG AAA standard (7:1)`,
+              severity: 'info'
+            });
           }
 
           // Add accessibility recommendations
           if (accessibility.recommended.length > 0) {
             warnings.push({
-              path,
-              message; ')}`,
-              severity});
+              path: 'colors',
+              message: `Accessibility recommendations: ${accessibility.recommended.join('; ')}`,
+              severity: 'info'
+            });
           }
         }
       }
@@ -169,13 +179,16 @@ export class ThemeValidator {
   /**
    * Validate font configurations
    */
-  private static validateFontConfigurations(theme, warnings])) {
+  private static validateFontConfigurations(theme: MultiThemeConfig, warnings: ThemeValidationWarning[]): void {
+    // Validate font weights
+    if (theme.fonts?.primary?.weights) {
       for (const weight of theme.fonts.primary.weights) {
         if (!this.FONT_WEIGHTS.includes(weight)) {
           warnings.push({
-            path,
-            message} is not a standard CSS font weight. Consider using, ')}`,
-            severity});
+            path: 'fonts.primary.weights',
+            message: `Font weight ${weight} is not a standard CSS font weight. Consider using: ${this.FONT_WEIGHTS.join(', ')}`,
+            severity: 'warning'
+          });
         }
       }
     }
@@ -189,9 +202,10 @@ export class ThemeValidator {
         for (let i = 1; i < numericSizes.length; i++) {
           if (numericSizes[i] <= numericSizes[i - 1]) {
             warnings.push({
-              path,
-              message]} followed by ${numericSizes[i]}`,
-              severity});
+              path: 'fonts.primary.sizes',
+              message: `Font sizes should be in ascending order. Found: ${numericSizes[i - 1]} followed by ${numericSizes[i]}`,
+              severity: 'warning'
+            });
           }
         }
       }
@@ -202,9 +216,10 @@ export class ThemeValidator {
       const family = theme.fonts.primary.family;
       if (!family.includes(',') && !family.includes('"') && !family.includes("'")) {
         warnings.push({
-          path,
-          message}' should include fallback fonts for better cross-platform compatibility`,
-          severity});
+          path: 'fonts.primary.family',
+          message: `Font family '${family}' should include fallback fonts for better cross-platform compatibility`,
+          severity: 'warning'
+        });
       }
     }
   }
@@ -212,7 +227,8 @@ export class ThemeValidator {
   /**
    * Validate spacing scales
    */
-  private static validateSpacingScales(theme, warnings])) {
+  private static validateSpacingScales(theme: MultiThemeConfig, warnings: ThemeValidationWarning[]): void {
+    if (theme.spacing?.scale) {
       const scales = Object.values(theme.spacing.scale);
       const numericScales = scales.map(scale => parseFloat(scale)).filter(scale => !isNaN(scale));
       
@@ -228,9 +244,10 @@ export class ThemeValidator {
         
         if (variance > 0.1) { // High variance indicates inconsistent spacing
           warnings.push({
-            path,
-            message, 1.5x or 2x multiplier) for better visual harmony`,
-            severity});
+            path: 'spacing.scale',
+            message: `Spacing scale appears inconsistent. Consider using a mathematical scale (e.g., 1.5x or 2x multiplier) for better visual harmony`,
+            severity: 'warning'
+          });
         }
       }
     }
@@ -239,30 +256,34 @@ export class ThemeValidator {
   /**
    * Validate navigation configurations
    */
-  private static validateNavigationConfigurations(theme, _errors], warnings])) {
+  private static validateNavigationConfigurations(theme: MultiThemeConfig, _errors: ThemeValidationError[], warnings: ThemeValidationWarning[]): void {
+    if (theme.navigation) {
       // Validate layout and behavior combinations
       const { layout, behavior } = theme.navigation;
       
       if (layout === 'sidebar' && behavior === 'floating') {
         warnings.push({
-          path,
-          message,
-          severity});
+          path: 'navigation',
+          message: 'Sidebar layout with floating behavior may cause usability issues. Consider using static or sticky behavior',
+          severity: 'warning'
+        });
       }
 
       if (layout === 'tabs' && behavior === 'overlay') {
         warnings.push({
-          path,
-          message,
-          severity});
+          path: 'navigation',
+          message: 'Tab layout with overlay behavior is unusual. Consider using static or sticky behavior',
+          severity: 'warning'
+        });
       }
 
       // Validate responsive behavior
       if (theme.navigation.responsive === 'desktop-first' && layout === 'horizontal') {
         warnings.push({
-          path,
-          message,
-          severity});
+          path: 'navigation',
+          message: 'Desktop-first responsive approach with horizontal layout may cause mobile usability issues',
+          severity: 'warning'
+        });
       }
     }
   }
@@ -270,29 +291,33 @@ export class ThemeValidator {
   /**
    * Validate metadata
    */
-  private static validateMetadata(theme, errors], warnings])) {
+  private static validateMetadata(theme: MultiThemeConfig, errors: ThemeValidationError[], warnings: ThemeValidationWarning[]): void {
+    if (theme.meta) {
       // Validate version format
       if (theme.meta.version && !/^\d+\.\d+\.\d+/.test(theme.meta.version)) {
         warnings.push({
-          path,
-          message}' should follow semantic versioning (e.g., 1.0.0)`,
-          severity});
+          path: 'meta.version',
+          message: `Version '${theme.meta.version}' should follow semantic versioning (e.g., 1.0.0)`,
+          severity: 'warning'
+        });
       }
 
       // Validate category
       if (theme.meta.category && !['brand', 'enterprise', 'custom', 'accessibility'].includes(theme.meta.category)) {
         errors.push({
-          path,
-          message}'. Must be one of, enterprise, custom, accessibility`,
-          severity});
+          path: 'meta.category',
+          message: `Invalid category '${theme.meta.category}'. Must be one of: brand, enterprise, custom, accessibility`,
+          severity: 'error'
+        });
       }
 
       // Validate tags
       if (theme.meta.tags && theme.meta.tags.length > 10) {
         warnings.push({
-          path,
-          message} tags. Consider limiting to 10 tags for better organization`,
-          severity});
+          path: 'meta.tags',
+          message: `Theme has ${theme.meta.tags.length} tags. Consider limiting to 10 tags for better organization`,
+          severity: 'warning'
+        });
       }
     }
   }
@@ -300,7 +325,9 @@ export class ThemeValidator {
   /**
    * Validate semantic consistency
    */
-  private static validateSemanticConsistency(theme, warnings])) {
+  private static validateSemanticConsistency(theme: MultiThemeConfig, warnings: ThemeValidationWarning[]): void {
+    // Check if semantic colors are distinct from primary colors
+    if (theme.colors?.semantic && theme.colors?.primary) {
       const semanticColors = Object.values(theme.colors.semantic);
       const primaryColors = Object.values(theme.colors.primary);
       
@@ -308,9 +335,10 @@ export class ThemeValidator {
         for (const primaryColor of primaryColors) {
           if (this.colorsAreSimilar(semanticColor, primaryColor)) {
             warnings.push({
-              path,
-              message}' is too similar to primary color '${primaryColor}'. Consider using more distinct colors for better semantic clarity`,
-              severity});
+              path: 'colors.semantic',
+              message: `Semantic color '${semanticColor}' is too similar to primary color '${primaryColor}'. Consider using more distinct colors for better semantic clarity`,
+              severity: 'warning'
+            });
           }
         }
       }
@@ -318,19 +346,24 @@ export class ThemeValidator {
   }
 
   /**
-   * Helper, path)).reduce((current, key) => current?.[key], obj);
+   * Helper: Get nested value from object using dot notation
+   */
+  private static getNestedValue(obj: any, path: string): any {
+    return path.split('.').reduce((current, key) => current?.[key], obj);
   }
 
   /**
-   * Helper); value}> {
-    const fields; value}> = [];
+   * Helper: Get all color fields from theme
+   */
+  private static getAllColorFields(theme: MultiThemeConfig): Array<{ path: string; value: any }> {
+    const fields: Array<{ path: string; value: any }> = [];
     
-    const traverseColors = (obj, path) => {
+    const traverseColors = (obj: any, path: string) => {
       if (obj && typeof obj === 'object') {
         for (const [key, value] of Object.entries(obj)) {
-          const currentPath = path ? `${path}.${key}` ;
+          const currentPath = path ? `${path}.${key}` : key;
           if (typeof value === 'string' && this.isColorValue(value)) {
-            fields.push({ path, value });
+            fields.push({ path: currentPath, value });
           } else if (typeof value === 'object') {
             traverseColors(value, currentPath);
           }
@@ -343,7 +376,10 @@ export class ThemeValidator {
   }
 
   /**
-   * Helper), regex] of Object.entries(this.COLOR_FORMATS)) {
+   * Helper: Detect color format
+   */
+  private static detectColorFormat(color: string): string | null {
+    for (const [format, regex] of Object.entries(this.COLOR_FORMATS)) {
       if (regex.test(color)) {
         return format;
       }
@@ -352,7 +388,10 @@ export class ThemeValidator {
   }
 
   /**
-   * Helper), let detectColorFormat validate it
+   * Helper: Check if value looks like a color
+   */
+  private static isColorValue(value: string): boolean {
+    // Accept any string that might be a color, let detectColorFormat validate it
     return value.startsWith('#') || 
            value.startsWith('rgb') || 
            value.startsWith('hsl') || 
@@ -366,7 +405,11 @@ export class ThemeValidator {
   }
 
   /**
-   * Helper, color2)= this.getLuminance(color1);
+   * Helper: Calculate color contrast ratio
+   */
+  private static calculateColorContrast(color1: string, color2: string): number {
+    try {
+      const luminance1 = this.getLuminance(color1);
       const luminance2 = this.getLuminance(color2);
       
       const lighter = Math.max(luminance1, luminance2);
@@ -379,7 +422,11 @@ export class ThemeValidator {
   }
 
   /**
-   * Helper)) || color === 'transparent' || color === 'currentColor' || color === 'inherit') {
+   * Helper: Get luminance of a color
+   */
+  private static getLuminance(color: string): number {
+    // Handle CSS variables and other formats
+    if (color.startsWith('var(--') || color === 'transparent' || color === 'currentColor' || color === 'inherit') {
       return 0.5; // Default fallback
     }
 
@@ -402,7 +449,11 @@ export class ThemeValidator {
   }
 
   /**
-   * Helper, color2)= this.calculateColorContrast(color1, color2);
+   * Helper: Check if two colors are similar
+   */
+  private static colorsAreSimilar(color1: string, color2: string): boolean {
+    try {
+      const contrast = this.calculateColorContrast(color1, color2);
       return contrast < 2.0; // Very low contrast indicates similar colors
     } catch {
       return false;