@aesthetic/core/dts/Aesthetic.d.ts

Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components.

import { Theme, ThemeRegistry } from '@aesthetic/system';
import { ClassName, Direction, Engine, FontFace, Import, Keyframes, RenderOptions, Rule, ThemeName } from '@aesthetic/types';
import { AestheticOptions, ComponentSheet, ComponentSheetFactory, ElementSheetFactory, EventListener, EventType, InferKeys, InferKeysFromSheets, OnChangeDirection, OnChangeTheme, ResultGenerator, SheetParams, SheetRenderResult, ThemeSheet, ThemeSheetFactory } from './types';
export declare class Aesthetic<Input extends object = Rule, Output = ClassName> {
    protected activeDirection?: Direction;
    protected activeTheme?: ThemeName;
    protected globalSheetRegistry: Map<string, ThemeSheet<string, Input, Output>>;
    protected listeners: Map<EventType, Set<EventListener>>;
    protected options: AestheticOptions;
    protected styleEngine?: Engine<Input, Output>;
    protected themeRegistry: ThemeRegistry<Input>;
    constructor(options?: AestheticOptions);
    /**
     * Change the active direction.
     */
    changeDirection: (direction: Direction, propagate?: boolean) => void;
    /**
     * Change the active theme.
     */
    changeTheme: (name: ThemeName, propagate?: boolean) => void;
    /**
     * Configure options unique to this instance.
     */
    configure: (options: AestheticOptions) => void;
    /**
     * Configuring which styling engine to use.
     */
    configureEngine: (engine: Engine<Input, Output>) => void;
    /**
     * Create a style sheet that supports multiple elements,
     * for use within components.
     */
    createStyleSheet: <T = unknown>(factory: ComponentSheetFactory<T, Input>) => ComponentSheet<InferKeys<keyof T>, Input, Output>;
    /**
     * Create a style sheet scoped for a single element.
     */
    createScopedStyleSheet: <K extends string = "element">(factory: ElementSheetFactory<Input> | Input, selector?: K | undefined) => ComponentSheet<InferKeys<K>, Input, Output>;
    /**
     * Create a global style sheet for root theme styles.
     */
    createThemeSheet: <T = unknown>(factory: ThemeSheetFactory<T, Input>) => ThemeSheet<InferKeys<keyof T>, Input, Output>;
    /**
     * Emit all listeners by type, with the defined arguments.
     */
    emit(type: 'change:direction', args: Parameters<OnChangeDirection>): void;
    emit(type: 'change:theme', args: Parameters<OnChangeTheme>): void;
    /**
     * Generate a list of results using the selectors of a style sheet.
     * If a set is provided, it will be used to check for variants.
     */
    generateResults: ResultGenerator<string, Output>;
    /**
     * Return the active direction for the entire application. If an active direction is undefined,
     * it will be detected from the browser's `dir` attribute.
     */
    getActiveDirection: () => Direction;
    /**
     * Return the currently active theme instance. If an active instance has not been defined,
     * one will be detected from the client's browser preferences.
     */
    getActiveTheme: () => Theme<Input>;
    /**
     * Return the current style engine.
     */
    getEngine: () => Engine<Input, Output>;
    /**
     * Return a set of listeners, or create it if it does not exist.
     */
    getListeners: <T extends Function>(type: EventType) => Set<T>;
    /**
     * Return a theme instance by name.
     */
    getTheme: (name: ThemeName) => Theme<Input>;
    /**
     * Merge multiple sheets into a single sheet and inherit all overrides.
     */
    mergeStyleSheets: <T extends ComponentSheet<string, Input, Output>[]>(...sheets: T) => ComponentSheet<InferKeysFromSheets<T>, Input, Output>;
    /**
     * Register a theme, with optional global theme styles.
     */
    registerTheme: (name: ThemeName, theme: Theme<Input>, sheet?: ThemeSheet<string, Input, Output> | null, isDefault?: boolean) => void;
    /**
     * Register a default light or dark theme, with optional global theme styles.
     */
    registerDefaultTheme: (name: ThemeName, theme: Theme<Input>, sheet?: ThemeSheet<string, Input, Output> | null) => void;
    /**
     * Render a `@font-face` to the global style sheet and return the font family name.
     */
    renderFontFace: (fontFace: FontFace, fontFamily?: string | undefined, params?: RenderOptions | undefined) => string;
    /**
     * Render an `@import` to the global style sheet and return the import path.
     */
    renderImport: (path: Import | string, params?: RenderOptions | undefined) => string;
    /**
     * Render a `@keyframes` to the global style sheet and return the animation name.
     */
    renderKeyframes: (keyframes: Keyframes, animationName?: string | undefined, params?: RenderOptions | undefined) => string;
    /**
     * Render a style rule outside of the context of a style sheet.
     */
    renderStyles: (rule: Input) => import("@aesthetic/types").RenderResult<Output>;
    /**
     * Render a component style sheet to the document with the defined style query parameters.
     */
    renderStyleSheet: <T = unknown>(sheet: ComponentSheet<T, Input, Output>, params?: SheetParams) => SheetRenderResult<Output, InferKeys<T>>;
    /**
     * Render a theme style sheet and return a result, if one was generated.
     */
    renderThemeSheet: (theme: Theme<Input>, params?: SheetParams) => Output[];
    /**
     * Subscribe and listen to an event by name.
     */
    subscribe(type: 'change:direction', listener: OnChangeDirection): () => void;
    subscribe(type: 'change:theme', listener: OnChangeTheme): () => void;
    /**
     * Unsubscribe from an event by name.
     */
    unsubscribe(type: 'change:direction', listener: OnChangeDirection): void;
    unsubscribe(type: 'change:theme', listener: OnChangeTheme): void;
    protected getRenderOptions(options?: RenderOptions): {
        className?: string | undefined;
        debugName?: string | undefined;
        deterministic: boolean;
        direction: Direction;
        media?: string | undefined;
        rankings?: import("@aesthetic/types").RankCache | undefined;
        selector?: string | undefined;
        supports?: string | undefined;
        type?: import("@aesthetic/types").SheetType | undefined;
        unit?: import("@aesthetic/types").Unit | undefined;
        vendor: boolean;
    };
    protected renderSheet<Keys>(sheet: ComponentSheet<string, Input, Output> | ThemeSheet<string, Input, Output>, theme: Theme<Input>, params: SheetParams): SheetRenderResult<Output, Keys>;
}
//# sourceMappingURL=Aesthetic.d.ts.map