/**
 * @file Button.tsx
 * @input Uses React, ButtonHTMLAttributes, ReactNode, i18n (useTranslator)
 * @output Exports Button component, ButtonProps, ButtonVariant types
 * @position Core implementation; consumed by index.ts, tested by Button.test.tsx
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Button/Button.doc.mjs (props table, features, implementation notes)
 * - /packages/core/src/Button/Button.test.tsx (tests for new/changed behavior)
 * - /packages/core/src/Button/index.ts (exports if types change)
 * - /apps/storybook/stories/Button.stories.tsx (storybook stories)
 * - /packages/cli/assets/templates/blocks/components/Button/ (showcase blocks)
 *
 * Last synced props: label, variant, size, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, children, tooltip, endContent, href, as, target, rel
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { Elevation, SizeValue } from '../utils/types';
import * as stylex from '@stylexjs/stylex';
import type { LinkComponentType } from '../Link/types';
import type { ButtonVariantMap } from './index';
declare const sizeStyles: Readonly<{
    readonly sm: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "28px">;
    }>;
    readonly md: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
    }>;
    readonly lg: Readonly<{
        readonly height: stylex.StyleXClassNameFor<"height", "36px">;
    }>;
}>;
/**
 * Button variant type derived from ButtonVariantMap.
 * Extensible via module augmentation of ButtonVariantMap.
 */
export type ButtonVariant = keyof ButtonVariantMap;
/**
 * Button size type derived from the sizeStyles StyleX object
 */
export type ButtonSize = keyof typeof sizeStyles;
export interface ButtonProps extends BaseProps<HTMLButtonElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLButtonElement>;
    /** HTML button type attribute. @default 'button' */
    type?: 'button' | 'submit' | 'reset';
    /** HTML name attribute for form submission. */
    name?: string;
    /** HTML value attribute for form submission. */
    value?: string | number | ReadonlyArray<string>;
    /** Associates the button with a form element by ID. */
    form?: string;
    /**
     * Accessible label for the button (required for accessibility).
     * Rendered as visible text by default. When `isIconOnly` is true,
     * used as aria-label instead.
     */
    label: string;
    /**
     * The visual style variant of the button.
     * @default 'secondary'
     */
    variant?: ButtonVariant;
    /**
     * The size of the button.
     * @default 'md'
     */
    size?: ButtonSize;
    /**
     * Resting elevation — the shadow depth the button sits at. Use for floating
     * buttons (FABs) that hover above content. `none` is the default flat button.
     * @default 'none'
     */
    elevation?: Elevation;
    /**
     * Whether the button is disabled.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * Whether the button is in a loading state.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Keep the button interactive while a `clickAction` is pending. The loading
     * state still renders the spinner and `aria-busy`, but the button is not
     * disabled and the in-flight action is not deduped — so a re-click lands and
     * interrupts the previous action with a fresh one. Use for interruptible
     * actions (e.g. a toggle whose action can be re-triggered before the previous
     * one settles), not fire-once actions (submit/save/pay).
     * @default false
     */
    isInterruptible?: boolean;
    /**
     * Click handler. For async actions that should show a loading state,
     * use `clickAction` instead.
     */
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    /**
     * Async click action. Shows loading state while pending.
     */
    clickAction?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
    /**
     * Icon element rendered before the label text.
     */
    icon?: ReactNode;
    /**
     * When true, renders as a square icon-only button with `label` as aria-label.
     * Requires `icon` to be provided.
     * @default false
     */
    isIconOnly?: boolean;
    /**
     * Width of the button. Numbers are treated as pixels, strings are used as-is
     * (e.g. `'100%'` for a full-width button). By default the button sizes to
     * its content.
     */
    width?: SizeValue;
    /**
     * Optional visible content. When provided, rendered instead of `label` as the
     * visible text (label still serves as the accessible name via aria-label).
     */
    children?: ReactNode;
    /**
     * Content rendered after the label text (badge, icon, chevron, etc.).
     * Ignored when `isIconOnly` is true to preserve square aspect ratio.
     *
     * Wrapped in a container that inherits the button's text color,
     * so child elements match the button variant's color automatically.
     */
    endContent?: ReactNode;
    /**
     * Tooltip text shown on hover.
     */
    tooltip?: string;
    /**
     * When provided, renders the button as a link (`<a>` or custom component).
     * When the button is disabled, still renders as `<button>` regardless of href
     * (disabled links are an accessibility anti-pattern).
     */
    href?: string;
    /**
     * Custom link component to use when `href` is provided.
     * Overrides the provider-level default set by LinkProvider.
     * Useful for Next.js `<Link>` or other router-aware components.
     */
    as?: LinkComponentType;
    /**
     * HTML target attribute for the link. Only applies when `href` is provided.
     */
    target?: string;
    /**
     * HTML rel attribute for the link. Only applies when `href` is provided.
     */
    rel?: string;
}
/**
 * A versatile button component with multiple variants.
 *
 * Styles use Astryx theme tokens via StyleX.
 * Wrap your app in <Theme> to apply a theme.
 * Themes can provide component-level variant overrides via theme.components.button.variants
 *
 * When `href` is provided (and the button is not disabled), renders as an `<a>`
 * element (or custom link component) with full button styling, enabling native
 * browser behaviors like right-click → open in new tab and Cmd+Click.
 *
 * @example
 * ```
 * <Button label="Click me" />
 * <Button label="Primary action" variant="primary" />
 * <Button label="Delete" variant="destructive" />
 * <Button label="Settings" icon={<GearIcon />} variant="ghost" isIconOnly />
 * <Button label="Pick emoji" icon={<span>🚀</span>} variant="ghost" size="sm" isIconOnly />
 * <Button label="Edit" icon={<PencilIcon />} />
 * <Button label="Messages" endContent={<Badge label={3} />} />
 * <Button label="Edit" icon={<PencilIcon />} endContent={<Badge label="New" />} />
 * <Button label="Sign in" variant="primary" width="100%" />
 * <Button label="Visit site" href="https://example.com" variant="primary" />
 * <Button label="Open in new tab" href="https://example.com" target="_blank" rel="noopener noreferrer" />
 * ```
 */
export declare function Button({ label, variant, size: sizeProp, type, isDisabled, isLoading, isInterruptible, clickAction, icon, isIconOnly, width, elevation, children, endContent, tooltip, href, as, target, rel, xstyle, className, style, ref, ...props }: ButtonProps): ReactNode;
export declare namespace Button {
    var displayName: string;
}
export {};
//# sourceMappingURL=Button.d.ts.map