@mindmakr/gs-websdk/dist/utils/theme-helpers.d.ts

Web SDK for Guru SaaS System - Complete JavaScript/TypeScript SDK for building applications with dynamic schema management

/**
 * Theme and Layout Helper Utilities
 * Provides declarative theme management and layout generation from backend schemas
 */
import { SchemaTemplate } from '../types';
/**
 * Theme configuration interface
 */
export interface ThemeConfig {
    name: string;
    colors: {
        primary: string;
        secondary: string;
        accent: string;
        background: string;
        surface: string;
        text: string;
        textSecondary: string;
        border: string;
        error: string;
        warning: string;
        success: string;
        info: string;
    };
    typography: {
        fontFamily: string;
        fontSize: {
            xs: string;
            sm: string;
            base: string;
            lg: string;
            xl: string;
            '2xl': string;
            '3xl': string;
        };
        fontWeight: {
            light: number;
            normal: number;
            medium: number;
            semibold: number;
            bold: number;
        };
    };
    spacing: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        '2xl': string;
    };
    borderRadius: {
        none: string;
        sm: string;
        md: string;
        lg: string;
        full: string;
    };
    shadows: {
        sm: string;
        md: string;
        lg: string;
    };
}
/**
 * Layout configuration generated from schema
 */
export interface LayoutConfig {
    sections: Array<{
        id: string;
        title?: string;
        description?: string;
        fields: Array<{
            id: string;
            component: string;
            props: Record<string, any>;
            layout: {
                width: string;
                height?: string;
                order: number;
                conditional?: {
                    field: string;
                    operator: string;
                    value: any;
                };
            };
        }>;
        layout: {
            columns: number;
            gap: string;
            collapsible?: boolean;
            expanded?: boolean;
        };
    }>;
    metadata: {
        title: string;
        description?: string;
        version: string;
        responsive: boolean;
    };
}
/**
 * Component mapping for different field types
 */
export declare const COMPONENT_MAPPING: Record<string, string>;
/**
 * Default theme configurations
 */
export declare const DEFAULT_THEMES: Record<string, ThemeConfig>;
/**
 * Generate layout configuration from schema template
 */
export declare function generateLayoutFromSchema(template: SchemaTemplate, theme?: ThemeConfig): LayoutConfig;
/**
 * Generate CSS variables from theme
 */
export declare function generateThemeCSS(theme: ThemeConfig): string;
/**
 * Generate responsive CSS grid layout
 */
export declare function generateResponsiveLayout(sections: LayoutConfig['sections']): string;
/**
 * Theme manager class for runtime theme switching
 */
export declare class ThemeManager {
    private currentTheme;
    private themes;
    private callbacks;
    /**
     * Register a custom theme
     */
    registerTheme(name: string, theme: ThemeConfig): void;
    /**
     * Get available themes
     */
    getAvailableThemes(): string[];
    /**
     * Get current theme
     */
    getCurrentTheme(): ThemeConfig;
    /**
     * Set active theme
     */
    setTheme(themeName: string): void;
    /**
     * Subscribe to theme changes
     */
    onThemeChange(callback: (theme: ThemeConfig) => void): () => void;
    /**
     * Apply CSS variables to document
     */
    private applyCSSVariables;
}
/**
 * Create a default theme manager instance
 */
export declare const themeManager: ThemeManager;