import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
import { backgroundColors } from '../../base/colors';
import { MarginMixin, PaddingMixin } from '../../base/spacing';
export declare const buttonVariants: {
    normal: string;
    outline: string;
    ghost: string;
};
export declare const buttonSizes: {
    md: string;
    lg: string;
    sm: string;
    xs: string;
};
/** Button Props */
export declare type ButtonProps = PaddingMixin & MarginMixin & {
    /** A Dracula UI theme color for the Button. */
    color?: keyof typeof backgroundColors;
    /**
     * Controls the size of the button based on pre-configured Dracula UI sizes.
     */
    size?: keyof typeof buttonSizes;
    /**
     * Controls the Button style:
     * `normal` -> Default solid Button with background color.
     * `outline` -> A subtle variation of the Button component with a softer background color that highlights the action text.
     * `ghost` -> A less prominent variation of the Button component that highlights hover interactions.
     */
    variant?: keyof typeof buttonVariants;
    /**
     * Controls the Button state. Mirrors the HTMLButtonElement `disabled` property.
     */
    disabled?: boolean;
} & (({
    as: 'input';
} & InputHTMLAttributes<HTMLInputElement>) | ({
    as: 'a';
} & AnchorHTMLAttributes<HTMLAnchorElement>) | ({
    as?: 'button' | undefined;
} & ButtonHTMLAttributes<HTMLButtonElement>));
/**
 * The Button component triggers actions, behaviors, or events based
 * on user input.
 */
export declare const Button: React.ForwardRefExoticComponent<(PaddingMixin & MarginMixin & {
    /** A Dracula UI theme color for the Button. */
    color?: "animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight" | "grey" | "greySecondary" | "greyLight" | undefined;
    /**
     * Controls the size of the button based on pre-configured Dracula UI sizes.
     */
    size?: "md" | "lg" | "sm" | "xs" | undefined;
    /**
     * Controls the Button style:
     * `normal` -> Default solid Button with background color.
     * `outline` -> A subtle variation of the Button component with a softer background color that highlights the action text.
     * `ghost` -> A less prominent variation of the Button component that highlights hover interactions.
     */
    variant?: "normal" | "outline" | "ghost" | undefined;
    /**
     * Controls the Button state. Mirrors the HTMLButtonElement `disabled` property.
     */
    disabled?: boolean | undefined;
} & {
    as: 'input';
} & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>) | (PaddingMixin & MarginMixin & {
    /** A Dracula UI theme color for the Button. */
    color?: "animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight" | "grey" | "greySecondary" | "greyLight" | undefined;
    /**
     * Controls the size of the button based on pre-configured Dracula UI sizes.
     */
    size?: "md" | "lg" | "sm" | "xs" | undefined;
    /**
     * Controls the Button style:
     * `normal` -> Default solid Button with background color.
     * `outline` -> A subtle variation of the Button component with a softer background color that highlights the action text.
     * `ghost` -> A less prominent variation of the Button component that highlights hover interactions.
     */
    variant?: "normal" | "outline" | "ghost" | undefined;
    /**
     * Controls the Button state. Mirrors the HTMLButtonElement `disabled` property.
     */
    disabled?: boolean | undefined;
} & {
    as: 'a';
} & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>) | (PaddingMixin & MarginMixin & {
    /** A Dracula UI theme color for the Button. */
    color?: "animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight" | "grey" | "greySecondary" | "greyLight" | undefined;
    /**
     * Controls the size of the button based on pre-configured Dracula UI sizes.
     */
    size?: "md" | "lg" | "sm" | "xs" | undefined;
    /**
     * Controls the Button style:
     * `normal` -> Default solid Button with background color.
     * `outline` -> A subtle variation of the Button component with a softer background color that highlights the action text.
     * `ghost` -> A less prominent variation of the Button component that highlights hover interactions.
     */
    variant?: "normal" | "outline" | "ghost" | undefined;
    /**
     * Controls the Button state. Mirrors the HTMLButtonElement `disabled` property.
     */
    disabled?: boolean | undefined;
} & {
    as?: 'button' | undefined;
} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLInputElement | HTMLAnchorElement | HTMLButtonElement>)>;