@qwickapps/react-framework 1.4.9 → 1.5.0

package/src/components/shared/createSerializableView.tsx

@@ -57,12 +57,11 @@ interface CreateSerializableViewConfig<P extends ViewProps> {
 /**
  * Serializable component interface with all required static properties
  */
-export interface SerializableComponent<P extends ViewProps> {
-  (props: P): ReactElement;
+export interface SerializableComponent<P extends ViewProps> extends React.FC<P> {
   tagName: string;
   version: string;
-  fromJson: (data: any) => ReactElement;
-  toJson: (props: P) => any;
+  fromJson: (data: unknown) => ReactElement;
+  toJson: (props: P) => unknown;
   displayName?: string;
   [QWICKAPP_COMPONENT]: symbol;
 }
@@ -80,7 +79,7 @@ export function createSerializableView<P extends ViewProps>(
 
   // Create the main component function
   function SerializableViewComponent(props: P): ReactElement {
-    const { dataSource, bindingOptions, children, ...schemaProps } = props as any;
+    const { dataSource, bindingOptions, children, ...schemaProps } = props as P & { dataSource?: string; bindingOptions?: Record<string, unknown>; children?: ReactNode };
 
     // Step 1: Handle content-prop strategy (map JSX children → content)
     let propsForProcessing = schemaProps;
@@ -162,14 +161,15 @@ export function createSerializableView<P extends ViewProps>(
   component[QWICKAPP_COMPONENT] = QWICKAPP_COMPONENT;
 
   // Serialization methods
-  component.fromJson = function fromJson(data: any): ReactElement {
-    const { tagName: dataTagName, version: dataVersion, data: componentData } = data;
-    
+  component.fromJson = function fromJson(data: unknown): ReactElement {
+    const typedData = data as { tagName?: string; version?: string; data?: unknown };
+    const { tagName: dataTagName, version: dataVersion, data: componentData } = typedData;
+
     // Validate deserialization data
     if (dataTagName !== tagName) {
       throw new Error(`Tag name mismatch: expected ${tagName}, got ${dataTagName}`);
     }
-    
+
     if (dataVersion !== version) {
       console.warn(`Version mismatch for ${tagName}: expected ${version}, got ${dataVersion}`);
     }
@@ -177,30 +177,31 @@ export function createSerializableView<P extends ViewProps>(
     // Handle deserialization based on children strategy
     if (childrenStrategy.mode === 'content-prop') {
       const propName = childrenStrategy.propName || 'content';
-      const { children: _ignored, ...rest } = componentData || {};
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { children, ...rest } = componentData || {};
       const contentData = { ...rest, [propName]: componentData?.[propName] || '' };
       return React.createElement(component as ComponentType<P>, contentData as P);
     } else {
       // For react-children strategy, recursively deserialize children
-      const deserializedData = { ...componentData };
-      if (componentData.children !== undefined) {
-        // Import ComponentTransformer here to avoid circular dependency
-        const { ComponentTransformer } = require('../../schemas/transformers/ComponentTransformer');
-        deserializedData.children = ComponentTransformer.deserialize(componentData.children);
+      const deserializedData = { ...(componentData as Record<string, unknown>) };
+      if ((componentData as Record<string, unknown>).children !== undefined) {
+        // Recursively deserialize children using ComponentTransformer
+        deserializedData.children = ComponentTransformer.deserialize((componentData as Record<string, unknown>).children);
       }
       return React.createElement(component as ComponentType<P>, deserializedData as P);
     }
   };
 
-  component.toJson = function toJson(props: P): any {
+  component.toJson = function toJson(props: P): unknown {
     // Handle serialization based on children strategy
     if (childrenStrategy.mode === 'content-prop') {
       const propName = childrenStrategy.propName || 'content';
-      const { children: _ignored, ...rest } = props || {};
-      const contentValue = (props as any)?.[propName] ?? toText((props as any)?.children);
-      
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { children, ...rest } = props || {};
+      const contentValue = (props as Record<string, unknown>)?.[propName] ?? toText((props as Record<string, unknown>)?.children as ReactNode);
+
       // Clean props for content-prop serialization
-      const cleanProps: any = {};
+      const cleanProps: Record<string, unknown> = {};
       for (const [key, value] of Object.entries(rest)) {
         if (typeof value === 'function' && key.startsWith('on')) {
           cleanProps[key] = value.toString();
@@ -216,7 +217,7 @@ export function createSerializableView<P extends ViewProps>(
       };
     } else {
       // Handle react-children strategy (existing logic)
-      const cleanProps: any = {};
+      const cleanProps: unknown = {};
       
       for (const [key, value] of Object.entries(props)) {
         if (typeof value === 'function' && key.startsWith('on')) {
@@ -257,7 +258,7 @@ export type SerializableViewComponent<P extends ViewProps> = SerializableCompone
 /**
  * Type guard to check if a component is serializable
  */
-export function isSerializableComponent(component: any): component is SerializableComponent<any> {
+export function isSerializableComponent(component: unknown): component is SerializableComponent<unknown> {
   return component && 
     typeof component === 'function' &&
     typeof component.tagName === 'string' &&
@@ -270,7 +271,7 @@ export function isSerializableComponent(component: any): component is Serializab
 /**
  * Extract component metadata for registration
  */
-export function getComponentMetadata(component: SerializableComponent<any>) {
+export function getComponentMetadata(component: SerializableComponent<unknown>) {
   return {
     tagName: component.tagName,
     version: component.version,

package/src/components/shared/viewProps.ts

@@ -29,17 +29,17 @@ export interface ViewProps extends SchemaProps<ViewSchema>, WithDataBinding {
 /**
  * Type for string event handlers in schema
  */
-type EventHandlerValue = string | React.MouseEventHandler<any> | React.FocusEventHandler<any> | undefined;
+type EventHandlerValue = string | React.MouseEventHandler<unknown> | React.FocusEventHandler<unknown> | undefined;
 
 /**
  * Runtime event handler conversion map
  */
 interface EventHandlers {
-  onClick?: React.MouseEventHandler<any>;
-  onMouseEnter?: React.MouseEventHandler<any>;
-  onMouseLeave?: React.MouseEventHandler<any>;
-  onFocus?: React.FocusEventHandler<any>;
-  onBlur?: React.FocusEventHandler<any>;
+  onClick?: React.MouseEventHandler<unknown>;
+  onMouseEnter?: React.MouseEventHandler<unknown>;
+  onMouseLeave?: React.MouseEventHandler<unknown>;
+  onFocus?: React.FocusEventHandler<unknown>;
+  onBlur?: React.FocusEventHandler<unknown>;
 }
 
 /**
@@ -49,21 +49,21 @@ interface EventHandlers {
  */
 function parseEventHandlers(eventHandlers: Record<string, EventHandlerValue>): EventHandlers {
   const result: EventHandlers = {};
-  
+
   for (const [key, value] of Object.entries(eventHandlers)) {
     if (typeof value === 'string' && value.trim()) {
       try {
         // Convert string to function - safe eval for event handlers
         // This creates a function that executes the string as code
         const func = new Function('event', value);
-        result[key as keyof EventHandlers] = func as any;
+        result[key as keyof EventHandlers] = func as React.MouseEventHandler<unknown> | React.FocusEventHandler<unknown>;
       } catch (error) {
         console.warn(`Invalid event handler string for ${key}:`, value, error);
         // Keep as undefined for invalid handlers
       }
     } else if (typeof value === 'function') {
       // Already a function, use as-is
-      result[key as keyof EventHandlers] = value as any;
+      result[key as keyof EventHandlers] = value as React.MouseEventHandler<unknown> | React.FocusEventHandler<unknown>;
     }
   }
   
@@ -187,7 +187,7 @@ export function normalizeViewProps<T extends ViewProps>(props: T): T & BaseCompo
   };
 
   // Canonicalize background prop (backgroundColor → background)
-  const canonicalBackground = (restProps as any).background ?? backgroundColor;
+  const canonicalBackground = (restProps as { background?: string }).background ?? backgroundColor;
 
   // Return normalized props with proper typing
   const normalized = {
@@ -201,7 +201,7 @@ export function normalizeViewProps<T extends ViewProps>(props: T): T & BaseCompo
   } as T & BaseComponentProps;
 
   // Remove backgroundColor to avoid duplication
-  delete (normalized as any).backgroundColor;
+  delete (normalized as T & BaseComponentProps & { backgroundColor?: string }).backgroundColor;
   
   return normalized;
 }

package/src/config/AppConfig.ts

@@ -73,7 +73,7 @@ export class AppConfig implements IAppConfig {
   /**
    * Generate PWA manifest
    */
-  get pwaManifest(): Record<string, any> {
+  get pwaManifest(): Record<string, unknown> {
     return {
       name: this.app.name,
       short_name: this.app.shortName,
@@ -102,7 +102,7 @@ export class AppConfig implements IAppConfig {
   /**
    * Convert to plain object (for serialization)
    */
-  toJSON(): Record<string, any> {
+  toJSON(): Record<string, unknown> {
     return {
       app: this.app,
       build: this.build,

package/src/config/__tests__/AppConfig.test.ts

@@ -79,11 +79,11 @@ describe('AppConfig', () => {
 
       // Attempt to modify should fail
       expect(() => {
-        (config.app as any).name = 'Modified Name';
+        (config.app as { name: string }).name = 'Modified Name';
       }).toThrow();
 
       expect(() => {
-        (config.build as any).port = 4000;
+        (config.build as { port: number }).port = 4000;
       }).toThrow();
     });
   });
@@ -319,7 +319,7 @@ describe('AppConfig', () => {
       });
 
       expect(() => {
-        (newConfig.app as any).name = 'Another Name';
+        (newConfig.app as { name: string }).name = 'Another Name';
       }).toThrow();
     });
   });

package/src/config/__tests__/AppConfigBuilder.test.ts

@@ -7,7 +7,6 @@
  */
 
 import * as fs from 'fs';
-import * as path from 'path';
 import { AppConfigBuilder } from '../AppConfigBuilder';
 import { AppConfig } from '../AppConfig';
 
@@ -164,7 +163,7 @@ describe('AppConfigBuilder', () => {
         AppConfigBuilder.create()
           .withName('Test App')
           .withId('test-app')
-          .withPort(3000.5 as any)
+          .withPort(3000.5 as unknown as number)
           .build();
       }).toThrow('Port must be a valid integer between 1 and 65535');
     });
@@ -206,9 +205,9 @@ describe('AppConfigBuilder', () => {
     });
 
     it('should skip validation when skipValidation option is true', () => {
-      const consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+      jest.spyOn(console, 'warn').mockImplementation();
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withOptions({ skipValidation: true })
         .withName('Test App')
         .withId('test-app')
@@ -241,9 +240,9 @@ describe('AppConfigBuilder', () => {
     });
 
     it('should accept named colors', () => {
-      const consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
+      jest.spyOn(console, 'warn').mockImplementation();
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withName('Test App')
         .withId('test-app')
         .withThemeColor('red')
@@ -258,7 +257,7 @@ describe('AppConfigBuilder', () => {
     it('should warn for potentially invalid colors', () => {
       const consoleWarn = jest.spyOn(console, 'warn').mockImplementation();
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withName('Test App')
         .withId('test-app')
         .withThemeColor('invalid-color')
@@ -330,7 +329,7 @@ describe('AppConfigBuilder', () => {
         throw new Error('File not found');
       });
 
-      const config = AppConfigBuilder.create()
+      AppConfigBuilder.create()
         .withConfig('./missing.json')
         .withName('Test App')
         .withId('test-app')
@@ -403,7 +402,7 @@ describe('AppConfigBuilder', () => {
         AppConfigBuilder.create()
           .withPort(0)
           .build();
-      } catch (error: any) {
+      } catch (error: unknown) {
         const message = error.message;
         expect(message).toContain('App name is required');
         expect(message).toContain('App ID is required');
@@ -421,11 +420,11 @@ describe('AppConfigBuilder', () => {
 
       // Attempt to modify the configuration should not work
       expect(() => {
-        (config.app as any).name = 'Modified Name';
+        (config.app as { name: string }).name = 'Modified Name';
       }).toThrow();
 
       expect(() => {
-        (config as any).app = { name: 'New App' };
+        (config as { app: unknown }).app = { name: 'New App' };
       }).toThrow();
     });
   });

package/src/config/types.ts

@@ -32,7 +32,7 @@ export interface AppConfig {
   readonly viteConfig: ViteUserConfig;
   
   /** Computed PWA manifest */
-  readonly pwaManifest: Record<string, any>;
+  readonly pwaManifest: Record<string, unknown>;
 }
 
 /**

package/src/contexts/DataContext.tsx

@@ -8,7 +8,7 @@
  * Copyright (c) 2025 QwickApps.com. All rights reserved.
  */
 
-import React, { createContext, useContext, useEffect, useState, ReactNode } from 'react';
+import React, { createContext, useContext, useEffect, useState, useCallback, ReactNode } from 'react';
 import { ITemplateResolver, TemplateResolverConfig } from '../types';
 import { TemplateResolver } from '../templates';
 import { Model } from '@qwickapps/schema';
@@ -19,7 +19,7 @@ import { Model } from '@qwickapps/schema';
 interface DataContextValue {
   provider: ITemplateResolver | null;
   get<T extends Model>(slug: string): Promise<T | undefined>;
-  select<T extends Model>(schema: string, options?: any): Promise<T[]>;
+  select<T extends Model>(schema: string, options?: unknown): Promise<T[]>;
   resolveTemplate(template: string): Promise<string>;
 }
 
@@ -67,7 +67,7 @@ export function DataProvider({ dataSource, children }: DataProviderProps) {
       const result = await dataProvider.get(slug);
       return result && result.data ? (result.data as T) : undefined;
     },
-    select: async <T extends Model>(schema: string, options?: any): Promise<T[]> => {
+    select: async <T extends Model>(schema: string, options?: unknown): Promise<T[]> => {
       const result = await dataProvider.select(schema, options);
       return result && Array.isArray(result.data) ? (result.data as T[]) : [];
     },
@@ -106,35 +106,45 @@ export function useDataSafe<T extends Model>(slug: string): {
   error: Error | null;
 } {
   const context = useContext(DataContext);
-  if (!context) {
-    return { data: undefined, loading: false, error: null };
-  }
 
+  // Always call hooks before any returns
   const [data, setData] = useState<T | undefined>(undefined);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const fetchData = async () => {
-    if (!slug) {
+  // Always call useEffect unconditionally
+  useEffect(() => {
+    // Only fetch if context exists
+    if (!context) {
       setLoading(false);
       return;
     }
 
-    try {
-      setLoading(true);
-      setError(null);
-      const result = await context.get<T>(slug);
-      setData(result);
-      setLoading(false);
-    } catch (err) {
-      setError(err instanceof Error ? err : new Error(String(err)));
-      setLoading(false);
-    }
-  };
+    const fetchData = async () => {
+      if (!slug) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+        const result = await context.get<T>(slug);
+        setData(result);
+        setLoading(false);
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setLoading(false);
+      }
+    };
 
-  useEffect(() => {
     fetchData();
-  }, [slug]);
+  }, [context, slug]);
+
+  // Return early if no context
+  if (!context) {
+    return { data: undefined, loading: false, error: null };
+  }
 
   return { data, loading, error };
 }
@@ -156,7 +166,7 @@ export function useData<T extends Model>(fieldGroupId: string): {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
 
-  const fetchData = async () => {
+  const fetchData = useCallback(async () => {
     if (!fieldGroupId) {
       setLoading(false);
       return;
@@ -172,16 +182,16 @@ export function useData<T extends Model>(fieldGroupId: string): {
       setError(err instanceof Error ? err : new Error(String(err)));
       setLoading(false);
     }
-  };
+  }, [fieldGroupId, get]);
 
   useEffect(() => {
     fetchData();
-  }, [fieldGroupId, get]);
+  }, [fetchData]);
 
-  return { 
-    data, 
-    loading, 
-    error, 
+  return {
+    data,
+    loading,
+    error,
     refetch: fetchData
   };
 }
@@ -258,33 +268,29 @@ export function useDataProvider(): ITemplateResolver {
  * <T template="Hello {{user.name}}" fallback="Guest" />
  * ```
  */
-export const T: React.FC<{ template: string; fallback?: ReactNode; wrapper?: React.ComponentType<{ children: ReactNode }> }> = ({ 
-  template, 
+export const T: React.FC<{ template: string; fallback?: ReactNode; wrapper?: React.ComponentType<{ children: ReactNode }> }> = ({
+  template,
   fallback,
-  wrapper: Wrapper 
+  wrapper: Wrapper
 }) => {
-  try {
-    const context = useContext(DataContext);
-    if (!context) {
-      throw new Error('T component must be used within a DataProvider. Did you wrap your component with <DataProvider>?');
-    }
+  const context = useContext(DataContext);
+  if (!context) {
+    throw new Error('T component must be used within a DataProvider. Did you wrap your component with <DataProvider>?');
+  }
 
-    const { resolved, loading, error } = useResolveTemplate(template);
-    
-    if (loading) {
-      return fallback ? <>{fallback}</> : null;
-    } else if (error) {
-      if (process.env.NODE_ENV === 'development') {
-        return <>[Template Error: {error.message}]</>;
-      } else {
-        return fallback ? <>{fallback}</> : null;
-      }
+  const { resolved, loading, error } = useResolveTemplate(template);
+
+  if (loading) {
+    return fallback ? <>{fallback}</> : null;
+  } else if (error) {
+    if (process.env.NODE_ENV === 'development') {
+      return <>[Template Error: {error.message}]</>;
     } else {
-      const content = <>{resolved}</>;
-      return Wrapper ? <Wrapper>{content}</Wrapper> : content;
+      return fallback ? <>{fallback}</> : null;
     }
-  } catch (error) {
-    throw error;
+  } else {
+    const content = <>{resolved}</>;
+    return Wrapper ? <Wrapper>{content}</Wrapper> : content;
   }
 };
 
@@ -321,7 +327,7 @@ export function useTemplate(template: string): string | null {
  * {t.wrap(CustomComponent)`{{company.slogan}}`}
  * ```
  */
-export function t(strings: TemplateStringsArray, ...values: any[]): ReactNode {
+export function t(strings: TemplateStringsArray, ...values: unknown[]): ReactNode {
   // First do regular template literal interpolation
   const template = String.raw(strings, ...values);
   
@@ -343,7 +349,7 @@ export function t(strings: TemplateStringsArray, ...values: any[]): ReactNode {
  * ```
  */
 t.wrap = (WrapperComponent: React.ComponentType<{ children: ReactNode }>) => 
-  (strings: TemplateStringsArray, ...values: any[]): ReactNode => {
+  (strings: TemplateStringsArray, ...values: unknown[]): ReactNode => {
     const template = String.raw(strings, ...values);
     
     const WrappedTemplate = () => {

package/src/contexts/PaletteContext.tsx

@@ -6,11 +6,12 @@
 
 import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
 import { AllPalettes } from '../palettes';
-import { 
-  loadUserPalettePreference, 
-  saveUserPalettePreference, 
-  clearUserPalettePreference 
+import {
+  loadUserPalettePreference,
+  saveUserPalettePreference,
+  clearUserPalettePreference
 } from '../utils/persistenceUtils';
+import { loadPalette } from '../utils/paletteLoader';
 
 // Type definitions
 export interface PaletteConfig {
@@ -136,15 +137,27 @@ export const PaletteProvider: React.FC<PaletteProviderProps> = ({
   // Apply palette to document root immediately and on changes
   useEffect(() => {
     if (typeof document !== 'undefined') {
-      document.documentElement.setAttribute('data-palette', currentPalette);
-      
-      // Dispatch custom event to notify theme system (with small delay to ensure CSS is applied)
-      setTimeout(() => {
+      // Dynamically load the palette CSS if not already loaded
+      loadPalette(currentPalette).then(() => {
+        // Set the data-palette attribute after CSS is loaded
+        document.documentElement.setAttribute('data-palette', currentPalette);
+
+        // Dispatch custom event to notify theme system (with small delay to ensure CSS is applied)
+        setTimeout(() => {
+          const event = new CustomEvent('palette-changed', {
+            detail: { palette: currentPalette }
+          });
+          window.dispatchEvent(event);
+        }, 50);
+      }).catch((error) => {
+        console.error(`[PaletteContext] Failed to load palette "${currentPalette}":`, error);
+        // Still set the attribute and dispatch event even if loading fails
+        document.documentElement.setAttribute('data-palette', currentPalette);
         const event = new CustomEvent('palette-changed', {
           detail: { palette: currentPalette }
         });
         window.dispatchEvent(event);
-      }, 50);
+      });
     }
   }, [currentPalette]);
 

package/src/contexts/PrintModeContext.tsx

@@ -191,7 +191,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
       
       if (state.printConfig.theme) {
         dispatch({ type: 'SET_ORIGINAL_THEME', theme: getCurrentTheme() });
-        setCurrentTheme(state.printConfig.theme as any);
+        setCurrentTheme(state.printConfig.theme as 'light' | 'dark');
       }
       
       if (state.printConfig.palette) {
@@ -261,7 +261,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
       
       // Restore original theme and palette
       if (state.originalTheme) {
-        setCurrentTheme(state.originalTheme as any);
+        setCurrentTheme(state.originalTheme as 'light' | 'dark');
       }
       
       if (state.originalPalette) {
@@ -293,7 +293,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
     }
   }, [state.printModeState]);
 
-  // Effect to handle browser print events (stable handlers using refs)
+  // Effect to handle browser print events
   useEffect(() => {
     const handleBeforePrint = () => {
       triggerPrint();
@@ -312,7 +312,7 @@ export const PrintModeProvider: React.FC<PrintModeProviderProps> = ({ children }
         window.removeEventListener('afterprint', handleAfterPrint);
       };
     }
-  }, []); // Empty dependency array for stable event handlers
+  }, [exitPrintMode, triggerPrint]);
 
   const contextValue: PrintModeContextValue = {
     printModeState: state.printModeState,

package/src/contexts/ThemeContext.tsx

@@ -303,7 +303,8 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
         },
       },
   });
-  }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild // Re-create theme when palette changes
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [actualThemeMode, paletteChangeCounter]); // paletteChangeCounter is needed to force theme rebuild
 
   // Theme preference management methods
   const setPreferredTheme = (theme: ThemeMode): void => {

package/src/hooks/useBaseProps.ts

@@ -70,11 +70,11 @@ export interface BaseComponentProps {
   'data-testid'?: string;
   
   // Common event handlers (generic for compatibility)
-  onClick?: React.MouseEventHandler<any>;
-  onMouseEnter?: React.MouseEventHandler<any>;
-  onMouseLeave?: React.MouseEventHandler<any>;
-  onFocus?: React.FocusEventHandler<any>;
-  onBlur?: React.FocusEventHandler<any>;
+  onClick?: React.MouseEventHandler<unknown>;
+  onMouseEnter?: React.MouseEventHandler<unknown>;
+  onMouseLeave?: React.MouseEventHandler<unknown>;
+  onFocus?: React.FocusEventHandler<unknown>;
+  onBlur?: React.FocusEventHandler<unknown>;
 }
 
 /**
@@ -203,8 +203,8 @@ export function useBaseProps<T extends BaseComponentProps>(props: T) {
 
   // Memoize background and text styles
   const backgroundAndTextStyles = useMemo(() => {
-    const styles: any = {};
-    
+    const styles: Record<string, unknown> = {};
+
     if (backgroundGradient) {
       styles.background = backgroundGradient;
     } else if (backgroundImage) {
@@ -216,11 +216,11 @@ export function useBaseProps<T extends BaseComponentProps>(props: T) {
       // Could be a color or theme path
       styles.background = background;
     }
-    
+
     if (textAlign) {
       styles.textAlign = textAlign;
     }
-    
+
     return styles;
   }, [background, backgroundImage, backgroundGradient, textAlign]);
 
@@ -264,4 +264,4 @@ export function useBaseProps<T extends BaseComponentProps>(props: T) {
 /**
  * Type helper for components using base props
  */
-export type WithBaseProps<P = {}> = P & BaseComponentProps;
+export type WithBaseProps<P = Record<string, never>> = P & BaseComponentProps;