react-chrono/dist/types/components/fonts/google-fonts.d.ts

A Modern Timeline component for React

/**
 * Google Fonts integration utilities for React Chrono Timeline
 *
 * Provides a robust, modular system for loading and applying Google Fonts
 * with support for individual font styles (bold, italic) per text element
 */
export interface FontWeight {
    100: 'thin';
    200: 'extra-light';
    300: 'light';
    400: 'regular';
    500: 'medium';
    600: 'semi-bold';
    700: 'bold';
    800: 'extra-bold';
    900: 'black';
}
export interface FontStyle {
    normal: 'normal';
    italic: 'italic';
}
export type FontWeightValue = keyof FontWeight | 'thin' | 'extra-light' | 'light' | 'regular' | 'medium' | 'semi-bold' | 'bold' | 'extra-bold' | 'black';
export type FontStyleValue = keyof FontStyle | 'normal' | 'italic';
/**
 * Configuration for individual text elements
 */
export interface TextElementFont {
    /** Font weight (100-900 or named weights) */
    weight?: FontWeightValue;
    /** Font style (normal or italic) */
    style?: FontStyleValue;
    /** Custom font size override */
    size?: string;
}
/**
 * Complete Google Fonts configuration for all timeline text elements
 */
export interface GoogleFontsConfig {
    /** Primary font family name from Google Fonts */
    fontFamily: string;
    /** Font configurations for different text elements */
    elements?: {
        /** Timeline item titles */
        title?: TextElementFont;
        /** Timeline card titles */
        cardTitle?: TextElementFont;
        /** Timeline card subtitles */
        cardSubtitle?: TextElementFont;
        /** Timeline card main text content */
        cardText?: TextElementFont;
        /** Timeline controls and UI text */
        controls?: TextElementFont;
    };
    /** Additional font weights to load (e.g., [400, 700, 'italic']) */
    weights?: Array<FontWeightValue | FontStyleValue | string>;
    /** Font display strategy for loading */
    display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
    /** Preconnect to Google Fonts for faster loading */
    preconnect?: boolean;
}
/**
 * Load Google Fonts by injecting link tag into document head
 */
export declare function loadGoogleFonts(config: GoogleFontsConfig): Promise<void>;
/**
 * Generate CSS custom properties for font configuration
 */
export declare function generateFontCssVars(config: GoogleFontsConfig): Record<string, string>;
/**
 * Generate vanilla-extract compatible font styles
 */
export declare function generateVanillaExtractStyles(config: GoogleFontsConfig): {
    base: {
        fontFamily: string;
    };
    elements: Record<string, any>;
};
/**
 * Hook for using Google Fonts in React components
 */
export declare function useGoogleFonts(config: GoogleFontsConfig): {
    loaded: boolean;
    error: string | null;
    cssVars: Record<string, string>;
    styles: {
        base: {
            fontFamily: string;
        };
        elements: Record<string, any>;
    };
};
//# sourceMappingURL=google-fonts.d.ts.map