import * as CSS from 'csstype';
import { type ElementType, type MouseEventHandler, type ReactElement, type ReactNode } from 'react';
import { type AriaDisabledProps, type AriaLabelingProps } from '../../core/types/a11y-props.js';
import { type BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
import { type DataTestId } from '../../core/types/data-props.js';
import { type MaskingProps } from '../../core/types/masking-props.js';
import { type PolymorphicComponentProps } from '../../core/types/polymorph.js';
import { type StylingProps } from '../../core/types/styling-props.js';
import { type WithChildren } from '../../core/types/with-children.js';
/**
 * Accepted properties for the Button.
 * @public
 */
export interface ButtonOwnProps extends AriaLabelingProps, AriaDisabledProps, WithChildren, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps {
    /**
     * If a button is disabled e.g. it cannot be interacted with.
     * @defaultValue false
     */
    disabled?: boolean;
    /**
     * Different variants have different styles.
     * @defaultValue 'default'
     */
    variant?: 'default' | 'emphasized' | 'accent';
    /**
     * The HTML button type.
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type}
     * @defaultValue 'button'
     */
    type?: 'button' | 'reset' | 'submit';
    /** Called when the button is interacted with. */
    onClick?: MouseEventHandler;
    /**
     * The width of the button.
     * @defaultValue 'content'
     */
    width?: 'content' | 'full' | CSS.Property.Width<string & {}>;
    /**
     * The color of the button. This should be chosen based on the context
     * the button is used in.
     * @defaultValue 'neutral'
     */
    color?: 'primary' | 'neutral' | 'success' | 'critical' | 'warning';
    /**
     * Controls the text alignment inside the button. Only affects the button
     * if the width is not set to 'content'.
     * @defaultValue 'center'
     */
    textAlign?: 'center' | 'start';
    /**
     * The size of the button.
     * @defaultValue 'default'
     */
    size?: 'default' | 'condensed';
    /**
     * The current loading state of the button. If true, a loading icon is shown and the button is disabled.
     * @defaultValue false
     */
    loading?: boolean;
}
/**
 * Merge own props with others inherited from the underlying element type.
 * @public
 */
export type ButtonProps<E extends ElementType> = PolymorphicComponentProps<E, ButtonOwnProps>;
type ButtonSlots = {
    label?: ReactNode;
    prefix?: ReactNode;
    suffix?: ReactNode;
    freeform?: ReactNode[];
};
/**
 * Iterates over child nodes to extract specific component slots.
 * @public
 */
export default function getButtonSlots(children: ReactNode): ButtonSlots;
/**
 * Buttons let users trigger actions or events
 * with a single click, or by pressing
 * `Enter` or `Space` while the button has focus.
 * @public
 */
export declare const Button: (<E extends ElementType = "button">(props: ButtonProps<E>) => ReactElement | null) & {
    Suffix: (props: import("./Suffix.js").ButtonSuffixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
    Prefix: (props: import("./Prefix.js").ButtonPrefixProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
    Label: (props: import("./Label.js").ButtonLabelProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
};
export {};