import { TNode, Value } from '@tempots/dom';
import { ControlSize, ButtonVariant } from '../theme';
import { ThemeColorName } from '../../tokens';
import { ExtendedColor } from '../theme/style-utils';
import { RadiusName } from '../../tokens/radius';
/** Configuration options for the {@link Button} component. */
export interface ButtonOptions {
    /** The HTML button type attribute. @default 'button' */
    type?: Value<'submit' | 'reset' | 'button'>;
    /** Whether the button is disabled and non-interactive. @default false */
    disabled?: Value<boolean>;
    /** Whether to show a loading spinner and disable interaction. @default false */
    loading?: Value<boolean>;
    /** Visual style variant controlling background, text, and border colors. @default 'filled' */
    variant?: Value<ButtonVariant>;
    /** Size affecting padding, font size, and icon dimensions. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color for the button's color scheme. @default 'base' */
    color?: Value<ThemeColorName>;
    /** Border radius preset. @default 'sm' */
    roundedness?: Value<RadiusName>;
    /** Callback invoked when the button is clicked. */
    onClick?: () => void;
    /** Whether the button takes the full width of its container. @default false */
    fullWidth?: Value<boolean>;
    /**
     * Whether to stop event propagation on click.
     * When true (default), prevents the click event from bubbling up.
     * Set to false if you need parent elements to receive click events (e.g., for Flyout triggers).
     * @default true
     */
    stopPropagation?: boolean;
}
/**
 * Generates CSS class names for a button based on size, roundedness, loading state, and width.
 *
 * @param size - Control size for padding and text
 * @param roundedness - Border radius preset name
 * @param loading - Whether loading spinner is shown
 * @param fullWidth - Whether button is full-width
 * @returns Space-separated CSS class string
 */
export declare function generateButtonClasses(size: ControlSize, roundedness: RadiusName, loading: boolean, fullWidth: boolean): string;
/**
 * Generates inline CSS custom properties for button theming based on variant, color, and disabled state.
 * Sets background, text, border, hover, and text-shadow values for both light and dark modes.
 *
 * @param variant - The visual style variant
 * @param color - The theme color
 * @param disabled - Whether the button is disabled (suppresses hover styles)
 * @returns Semicolon-separated CSS custom property declarations
 */
export declare function generateButtonStyles(variant: ButtonVariant, color: ExtendedColor, disabled: boolean): string;
/**
 * An interactive button component with theme-aware styling, loading state, and accessibility support.
 *
 * When `loading` is true, the button content is replaced with a spinning icon and the button is
 * disabled. The button preserves its dimensions during loading to prevent layout shift.
 * Screen readers are notified of the loading state via `aria-busy` and `aria-label`.
 *
 * For submit buttons (`type: 'submit'`), the default browser form submission behavior is preserved.
 * For other button types, `preventDefault()` is called automatically.
 *
 * @param options - Configuration for appearance, behavior, and state
 * @param children - Content to display inside the button (text, icons, etc.)
 * @returns A styled button element
 *
 * @example
 * ```typescript
 * Button(
 *   { variant: 'filled', color: 'primary', onClick: () => console.log('clicked') },
 *   'Save Changes'
 * )
 * ```
 *
 * @example
 * ```typescript
 * // Button with loading state
 * const saving = prop(false)
 * Button(
 *   { variant: 'filled', color: 'success', loading: saving, onClick: handleSave },
 *   'Submit'
 * )
 * ```
 */
export declare function Button({ type, disabled, loading, variant, size, color, roundedness, onClick, fullWidth, stopPropagation, }: ButtonOptions, ...children: TNode[]): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;