@shohojdhara/atomix 0.3.4 → 0.3.5

package/src/lib/hooks/usePerformanceMonitor.ts

@@ -0,0 +1,149 @@
+/**
+ * Performance Monitoring Hook
+ * 
+ * Tracks component render times and re-render counts
+ * for performance analysis and optimization
+ */
+
+import { useEffect, useRef } from 'react';
+
+export interface PerformanceMetrics {
+  /**
+   * Component name
+   */
+  componentName: string;
+  /**
+   * Number of renders
+   */
+  renderCount: number;
+  /**
+   * Average render time in milliseconds
+   */
+  averageRenderTime: number;
+  /**
+   * Total render time in milliseconds
+   */
+  totalRenderTime: number;
+  /**
+   * Maximum render time in milliseconds
+   */
+  maxRenderTime: number;
+  /**
+   * Minimum render time in milliseconds
+   */
+  minRenderTime: number;
+}
+
+/**
+ * Options for performance monitoring
+ */
+export interface UsePerformanceMonitorOptions {
+  /**
+   * Component name to track
+   */
+  componentName: string;
+  /**
+   * Whether to log metrics to console (development only)
+   */
+  logToConsole?: boolean;
+  /**
+   * Threshold in milliseconds to warn about slow renders
+   */
+  warnThreshold?: number;
+  /**
+   * Callback to report metrics (e.g., to analytics)
+   */
+  onMetrics?: (metrics: PerformanceMetrics) => void;
+}
+
+/**
+ * Hook to monitor component performance
+ * 
+ * @param options - Performance monitoring options
+ * @returns Performance metrics
+ * 
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   usePerformanceMonitor({
+ *     componentName: 'MyComponent',
+ *     warnThreshold: 16, // Warn if render takes > 16ms (1 frame)
+ *   });
+ *   
+ *   return <div>Content</div>;
+ * }
+ * ```
+ */
+export function usePerformanceMonitor(options: UsePerformanceMonitorOptions) {
+  const {
+    componentName,
+    logToConsole = process.env.NODE_ENV === 'development',
+    warnThreshold = 16,
+    onMetrics,
+  } = options;
+
+  const metricsRef = useRef<PerformanceMetrics>({
+    componentName,
+    renderCount: 0,
+    averageRenderTime: 0,
+    totalRenderTime: 0,
+    maxRenderTime: 0,
+    minRenderTime: Infinity,
+  });
+
+  const renderStartRef = useRef<number>(0);
+
+  useEffect(() => {
+    // Start timing the render
+    renderStartRef.current = performance.now();
+  });
+
+  useEffect(() => {
+    // Calculate render time
+    const renderTime = performance.now() - renderStartRef.current;
+    const metrics = metricsRef.current;
+
+    // Update metrics
+    metrics.renderCount += 1;
+    metrics.totalRenderTime += renderTime;
+    metrics.averageRenderTime = metrics.totalRenderTime / metrics.renderCount;
+    metrics.maxRenderTime = Math.max(metrics.maxRenderTime, renderTime);
+    metrics.minRenderTime = Math.min(metrics.minRenderTime, renderTime);
+
+    // Warn if render is slow
+    if (renderTime > warnThreshold && logToConsole) {
+      console.warn(
+        `[Performance] ${componentName} render took ${renderTime.toFixed(2)}ms ` +
+        `(threshold: ${warnThreshold}ms)`
+      );
+    }
+
+    // Log metrics in development
+    if (logToConsole && metrics.renderCount % 10 === 0) {
+      console.log(`[Performance] ${componentName} metrics:`, {
+        renderCount: metrics.renderCount,
+        averageRenderTime: metrics.averageRenderTime.toFixed(2) + 'ms',
+        maxRenderTime: metrics.maxRenderTime.toFixed(2) + 'ms',
+        minRenderTime: metrics.minRenderTime.toFixed(2) + 'ms',
+      });
+    }
+
+    // Report metrics via callback
+    if (onMetrics) {
+      onMetrics({ ...metrics });
+    }
+  });
+
+  return metricsRef.current;
+}
+
+/**
+ * Get all performance metrics for all monitored components
+ * (useful for debugging and analytics)
+ */
+export function getPerformanceMetrics(): PerformanceMetrics[] {
+  // This would need to be implemented with a global store
+  // For now, this is a placeholder
+  return [];
+}
+

package/src/lib/patterns/index.ts

@@ -11,7 +11,7 @@ export {
   createSlotComponent,
   useSlot,
   createSlotProps,
-} from './slots.tsx';
+} from './slots';
 
 export type {
   SlotProps,
@@ -32,4 +32,4 @@ export type {
   DropdownRootSlotProps,
   DropdownToggleSlotProps,
   DropdownMenuSlotProps,
-} from './slots.tsx';
+} from './slots';

package/src/lib/patterns/slots.tsx

@@ -59,7 +59,7 @@ export function renderSlot<T>(
     // Priority 2: component
     if (slotObj.component) {
       const Component = slotObj.component;
-      return <Component {...props} />;
+      return <Component {...(props as any)} />;
     }
 
     // Priority 3: children
@@ -133,7 +133,7 @@ export function createSlotComponent<T>(
       return <Element {...(props as any)}>{children}</Element>;
     }
 
-    const Component = defaultElement;
+    const Component = defaultElement as React.ComponentType<any>;
     return <Component {...slotProps}>{children}</Component>;
   };
 }

package/src/lib/theme/composeTheme.ts

@@ -33,7 +33,7 @@ export function deepMerge<T extends Record<string, any>>(...objects: Partial<T>[
         if (!source) continue;
 
         for (const key in source) {
-            if (!source.hasOwnProperty(key)) continue;
+            if (!Object.prototype.hasOwnProperty.call(source, key)) continue;
 
             const targetValue = result[key];
             const sourceValue = source[key];

package/src/lib/theme/core/ThemeEngine.ts

@@ -538,9 +538,13 @@ export class ThemeEngine {
   /**
    * Add change listener
    */
+  // @ts-ignore - TypeScript overloads are valid, ESLint doesn't understand them
   on(event: 'change', listener: ThemeChangeListener): void;
+  // @ts-ignore
   on(event: 'load', listener: ThemeLoadListener): void;
+  // @ts-ignore
   on(event: 'error', listener: ThemeErrorListener): void;
+  // @ts-ignore
   on(event: 'revert', listener: ThemeRevertListener): void;
   on(
     event: 'change' | 'load' | 'error' | 'revert',
@@ -560,9 +564,13 @@ export class ThemeEngine {
   /**
    * Remove listener
    */
+  // @ts-ignore - TypeScript overloads are valid, ESLint doesn't understand them
   off(event: 'change', listener: ThemeChangeListener): void;
+  // @ts-ignore
   off(event: 'load', listener: ThemeLoadListener): void;
+  // @ts-ignore
   off(event: 'error', listener: ThemeErrorListener): void;
+  // @ts-ignore
   off(event: 'revert', listener: ThemeRevertListener): void;
   off(
     event: 'change' | 'load' | 'error' | 'revert',

package/src/lib/theme/core/ThemeValidator.ts

@@ -392,8 +392,11 @@ export class ThemeValidator {
 
     for (let i = 0; i < numericEntries.length; i++) {
       for (let j = i + 1; j < numericEntries.length; j++) {
-        const [keyA, valueA] = numericEntries[i];
-        const [keyB, valueB] = numericEntries[j];
+        const entryA = numericEntries[i];
+        const entryB = numericEntries[j];
+        if (!entryA || !entryB) continue;
+        const [keyA, valueA] = entryA;
+        const [keyB, valueB] = entryB;
         const diff = Math.abs(valueA - valueB);
         if (diff < 10 && diff > 0) {
           warnings.push(

package/src/lib/theme/devtools/Inspector.tsx

@@ -90,7 +90,7 @@ export const ThemeInspector: React.FC<ThemeInspectorProps> = ({
     }
 
     if (typeof value === 'string') {
-      return <span className="value-string">"{value}"</span>;
+      return <span className="value-string">&quot;{value}&quot;</span>;
     }
 
     if (typeof value === 'number') {

package/src/lib/theme/devtools/LiveEditor.tsx

@@ -59,19 +59,25 @@ export const ThemeLiveEditor: React.FC<ThemeLiveEditorProps> = ({
     }
   }, [onChange]);
 
-  const handleColorChange = useCallback((path: string, value: string) => {
+  const handleColorChange = useCallback((path: string, value: string | number) => {
     const newTheme = { ...theme };
     const keys = path.split('.');
     let current: any = newTheme;
     
     for (let i = 0; i < keys.length - 1; i++) {
-      if (!current[keys[i]]) {
-        current[keys[i]] = {};
+      const key = keys[i];
+      if (key && !current[key]) {
+        current[key] = {};
+      }
+      if (key) {
+        current = current[key];
       }
-      current = current[keys[i]];
     }
     
-    current[keys[keys.length - 1]] = value;
+    const lastKey = keys[keys.length - 1];
+    if (lastKey) {
+      current[lastKey] = value;
+    }
     updateTheme(createTheme(newTheme));
   }, [theme, updateTheme]);
 

package/src/lib/theme/generateCSSVariables.ts

@@ -47,7 +47,7 @@ function flattenObject(
     result: Record<string, string> = {}
 ): Record<string, string> {
     for (const key in obj) {
-        if (!obj.hasOwnProperty(key)) continue;
+        if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
 
         const value = obj[key];
         const newKey = prefix ? `${prefix}-${key}` : key;

package/src/lib/theme/i18n/rtl.ts

@@ -93,7 +93,8 @@ export class RTLManager {
 
     // Try navigator.language first
     const lang: string = navigator.language || (navigator.languages && navigator.languages[0]) || 'en';
-    return String(lang).split('-')[0].toLowerCase();
+    const langParts = String(lang).split('-');
+    return langParts[0] ? langParts[0].toLowerCase() : 'en';
   }
 
   /**

package/src/lib/theme/runtime/ThemeApplicator.ts

@@ -47,8 +47,8 @@ export class ThemeApplicator {
     }
 
     // Apply component overrides
-    if (theme.components) {
-      this.applyComponentOverrides(theme.components);
+    if ((theme as any).components) {
+      this.applyComponentOverrides((theme as any).components);
     }
   }
 
@@ -76,19 +76,25 @@ export class ThemeApplicator {
 
     if (typography.fontSize) {
       Object.entries(typography.fontSize).forEach(([key, value]) => {
-        vars[`--atomix-font-size-${key}`] = value;
+        if (typeof value === 'string' || typeof value === 'number') {
+          vars[`--atomix-font-size-${key}`] = value;
+        }
       });
     }
 
     if (typography.fontWeight) {
       Object.entries(typography.fontWeight).forEach(([key, value]) => {
-        vars[`--atomix-font-weight-${key}`] = value;
+        if (typeof value === 'string' || typeof value === 'number') {
+          vars[`--atomix-font-weight-${key}`] = value;
+        }
       });
     }
 
     if (typography.lineHeight) {
       Object.entries(typography.lineHeight).forEach(([key, value]) => {
-        vars[`--atomix-line-height-${key}`] = value;
+        if (typeof value === 'string' || typeof value === 'number') {
+          vars[`--atomix-line-height-${key}`] = value;
+        }
       });
     }
 
@@ -98,12 +104,23 @@ export class ThemeApplicator {
   /**
    * Apply spacing system
    */
-  private applySpacing(spacing: Record<string, string | number>): void {
+  private applySpacing(spacing: any): void {
     const vars: Record<string, string | number> = {};
 
-    Object.entries(spacing).forEach(([key, value]) => {
-      vars[`--atomix-space-${key}`] = value;
-    });
+    // Handle spacing function or object
+    if (typeof spacing === 'function') {
+      // If spacing is a function, we can't iterate it directly
+      // Just skip for now as it's a special case
+      return;
+    }
+
+    if (typeof spacing === 'object' && spacing !== null) {
+      Object.entries(spacing).forEach(([key, value]) => {
+        if (typeof value === 'string' || typeof value === 'number') {
+          vars[`--atomix-space-${key}`] = value;
+        }
+      });
+    }
 
     this.applyGlobalCSSVars(vars);
   }
@@ -117,9 +134,9 @@ export class ThemeApplicator {
     const vars: Record<string, string | number> = {};
 
     Object.entries(palette).forEach(([colorName, colorScale]) => {
-      if (colorScale) {
+      if (colorScale && typeof colorScale === 'object') {
         Object.entries(colorScale).forEach(([shade, value]) => {
-          if (value) {
+          if (value && (typeof value === 'string' || typeof value === 'number')) {
             vars[`--atomix-color-${colorName}-${shade}`] = value;
           }
         });

package/src/lib/theme/runtime/ThemeErrorBoundary.tsx

@@ -148,7 +148,7 @@ export class ThemeErrorBoundary extends Component<
     };
   }
 
-  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+  override componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     // Log error
     const themeError = error instanceof ThemeError
       ? error
@@ -187,7 +187,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
+  override componentDidUpdate(prevProps: ThemeErrorBoundaryProps): void {
     // Reset error if resetOnPropsChange is true and children changed
     if (
       this.props.resetOnPropsChange &&
@@ -202,7 +202,7 @@ export class ThemeErrorBoundary extends Component<
     }
   }
 
-  render(): ReactNode {
+  override render(): ReactNode {
     if (this.state.hasError && this.state.error && this.state.errorInfo) {
       // Use custom fallback if provided
       if (this.props.fallback) {

package/src/lib/theme/runtime/ThemeManager.ts

@@ -289,9 +289,11 @@ export class ThemeManager {
   /**
    * Add event listener
    */
+  /* eslint-disable no-dupe-class-members */
   on(event: 'themeChange', callback: ThemeChangeCallback): void;
   on(event: 'themeLoad', callback: ThemeLoadCallback): void;
   on(event: 'themeError', callback: ThemeErrorCallback): void;
+  /* eslint-enable no-dupe-class-members */
   on(event: ThemeManagerEvent, callback: ThemeChangeCallback | ThemeLoadCallback | ThemeErrorCallback): void {
     if (event === 'themeChange') {
       this.eventListeners.themeChange.push(callback as ThemeChangeCallback);
@@ -305,9 +307,11 @@ export class ThemeManager {
   /**
    * Remove event listener
    */
+  /* eslint-disable no-dupe-class-members */
   off(event: 'themeChange', callback: ThemeChangeCallback): void;
   off(event: 'themeLoad', callback: ThemeLoadCallback): void;
   off(event: 'themeError', callback: ThemeErrorCallback): void;
+  /* eslint-enable no-dupe-class-members */
   off(event: ThemeManagerEvent, callback: ThemeChangeCallback | ThemeLoadCallback | ThemeErrorCallback): void {
     if (event === 'themeChange') {
       this.eventListeners.themeChange = this.eventListeners.themeChange.filter(cb => cb !== callback);

package/src/lib/theme-tools.ts

@@ -32,7 +32,7 @@ export function createDarkVariant(lightTheme: Theme): Theme {
       mode: 'dark',
       background: {
         default: '#121212',
-        paper: '#1e1e1e',
+        subtle: '#1e1e1e',
       },
       text: {
         primary: '#ffffff',