import { CourierComponentThemeMode, SystemThemeMode } from '../utils/system-theme-mode';
import { CourierSystemThemeElement } from './courier-system-theme-element';
/**
 * A button's look, in the order an action asks for attention: `primary` is the default an action
 * with no style renders as, `secondary` and `tertiary` are the two louder ones, and `link` stops
 * being a button at all.
 *
 * The two vocabularies used to cross over — `style: 'button'` resolved to `variant: 'secondary'`,
 * `style: 'tertiary'` to `variant: 'primary'` — so every reader had to carry the mapping. Now
 * `button` is `primary` and the other three share a name with the style that asks for them.
 */
export type CourierButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'link';
export type CourierButtonProps = {
    mode: CourierComponentThemeMode;
    text?: string;
    shadow?: string;
    border?: string;
    borderRadius?: string;
    backgroundColor?: string;
    hoverBackgroundColor?: string;
    activeBackgroundColor?: string;
    fontFamily?: string;
    fontSize?: string;
    fontWeight?: string;
    textColor?: string;
    hoverTextColor?: string;
    padding?: string;
    textDecoration?: string;
    variant?: CourierButtonVariant;
    onClick?: () => void;
};
/**
 * A button with no visible outline still reserves the same border box as one that has an
 * outline, so a filled and an outlined button sitting in the same row line up.
 */
export declare const TRANSPARENT_BORDER = "1px solid transparent";
export declare const CourierButtonVariants: {
    /**
     * The plain button, and what an action with no style renders as: the row showing through,
     * edged with the divider hairline. What an Inbox action has always looked like.
     */
    readonly primary: (mode: SystemThemeMode) => {
        backgroundColor: string;
        textColor: string;
        fontWeight: string;
        hoverBackgroundColor: string;
        activeBackgroundColor: string;
        border: string;
        shadow: string;
        borderRadius: "4px";
        fontSize: "14px";
        padding: "6px 10px";
        textDecoration: "none";
    };
    /**
     * The outlined button. The same face as the plain one, told apart by an edge you can see and
     * by sitting flat where the plain button floats.
     */
    readonly secondary: (mode: SystemThemeMode) => {
        backgroundColor: string;
        textColor: string;
        fontWeight: string;
        hoverBackgroundColor: string;
        activeBackgroundColor: string;
        border: string;
        shadow: string;
        borderRadius: "4px";
        fontSize: "14px";
        padding: "6px 10px";
        textDecoration: "none";
    };
    /**
     * The solid button, the loudest of the three: a fill in the mode's ink, for the action that
     * is the thing to do on the message.
     */
    readonly tertiary: (mode: SystemThemeMode) => {
        backgroundColor: string;
        textColor: string;
        fontWeight: string;
        hoverBackgroundColor: string;
        activeBackgroundColor: string;
        border: string;
        shadow: string;
        borderRadius: "4px";
        fontSize: "14px";
        padding: "6px 10px";
        textDecoration: "none";
    };
    /** Reads as an inline hyperlink rather than a button — no fill, no border, no padding. */
    readonly link: (mode: SystemThemeMode) => {
        backgroundColor: string;
        textColor: string;
        fontWeight: string;
        border: string;
        shadow: string;
        padding: string;
        textDecoration: string;
        hoverBackgroundColor: string;
        hoverTextColor: string;
        borderRadius: "4px";
        fontSize: "14px";
    };
};
export declare class CourierButton extends CourierSystemThemeElement {
    static get id(): string;
    private _button;
    private _style;
    /**
     * Kept so the button can restyle itself when the system theme flips.
     *
     * `mode: 'system'` is resolved against `currentSystemTheme` when the styles are built, which
     * is only correct at the moment it is built. Everything else in the inbox re-reads its theme
     * through the theme manager's subscription; a button had no equivalent, so an OS flip left
     * the actions — and only the actions — wearing the colors of the mode that had just ended.
     */
    private _props;
    constructor(props: CourierButtonProps);
    private getStyles;
    updateButton(props: CourierButtonProps): void;
    protected onSystemThemeChange(_: SystemThemeMode): void;
}