import * as class_variance_authority_types from 'class-variance-authority/types';
import { Button as Button$1 } from '@base-ui/react/button';
import { VariantProps } from 'class-variance-authority';
import React__default from 'react';
import { Link } from './link.js';

declare const buttonCva: (props?: ({
    variant?: "link" | "solid" | "soft" | "surface" | "outline" | "ghost" | null | undefined;
    color?: "primary" | "secondary" | "white" | "accent" | "tertiary" | "success" | "warning" | "grey" | "danger" | null | undefined;
    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
    iconOnly?: boolean | null | undefined;
    onTint?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
/** The props `buttonVariants` takes: the cva's own. */
type ButtonVariantProps = NonNullable<Parameters<typeof buttonCva>[0]>;
/**
 * Button's class string. A thin wrapper over the cva so that two things hold
 * for every caller, not only for `Button` itself: `onTint` defaults to
 * whether the variant is one that paints its label on a tint, so a caller
 * styling its own element with `buttonVariants({ variant: 'soft', … })` gets
 * the stepped ink without knowing about it; and the string is merged before
 * it is returned. The cva's output carries both the colour's own `--btn-bg`
 * and, on the tint, the stepped one from `styles.tintInk`. `cn` keeps the
 * later, so one declaration reaches the DOM and the pair is settled at the
 * class-string level, never by stylesheet order — the two-build hazard in
 * AGENTS.md §4 needs two rules in the cascade, and this leaves it one.
 */
declare function buttonVariants({ onTint, ...props }?: ButtonVariantProps): string;
declare const buttonColorCva: (props?: ({
    color?: "primary" | "secondary" | "white" | "accent" | "tertiary" | "success" | "warning" | "grey" | "danger" | null | undefined;
    onTint?: boolean | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
/**
 * Button's colour tokens on their own — the `--btn-fill` / `--btn-bg` /
 * `--btn-border` / `--btn-text` pair for each token, with the dark-mode ink
 * flip and, on the tint, the stepped ink those tints need (`styles.tintInk`).
 * ButtonGroup applies this to itself so the frame, band and dividers it draws
 * take the same ink its segments do, and a group's `color` means exactly what
 * a Button's does. Takes the group's `variant` and derives `onTint` from it
 * as `buttonVariants` does, and merges the string for the same reason.
 */
declare function buttonColorVariants({ variant, onTint, ...props }?: NonNullable<Parameters<typeof buttonColorCva>[0]> & {
    variant?: ButtonVariantProps['variant'];
}): string;
/**
 * An icon slot. Takes either form:
 *
 * - the component itself — `leadingVisual={IconDownload}`
 * - a rendered element — `leadingVisual={<IconDownload />}`
 *
 * **From a React Server Component, use the element form.** `Button` and
 * `ButtonLink` are `'use client'` modules, while the icon modules carry no
 * directive — deliberately, so an icon stays server-renderable and ships no
 * JavaScript. That means in a server component `IconDownload` is an ordinary
 * function value, and functions cannot cross the RSC boundary into a client
 * component ("Functions cannot be passed directly to Client Components"). A
 * React element can, because it serialises. Client components can use either.
 */
type IconSlot = React__default.ElementType | React__default.ReactElement;
/** Visual/content props shared by `Button` and `ButtonLink`. */
type ButtonOwnProps = Omit<VariantProps<typeof buttonVariants>, 'size' | 'iconOnly' | 'color' | 'onTint'> & {
    /**
     * Colour token. Most are safe on any surface: the non-solid variants take
     * their ink from the token and it flips for dark mode, so `primary` reads
     * correctly on a light page and on a dark one.
     *
     * `white` and `secondary` are the exceptions — both are
     * **surface-conditional, for dark surfaces only**. Their inks (`white` and
     * `primary-200`) are already light, which is what makes them right on a
     * dark surface and unusable on a light one: a non-solid button in either
     * colour measures around 1.2:1 on white, against the 3:1 WCAG 1.4.11 asks
     * of a UI component. Reach for them the way `Hero` does — over a
     * `primary-800` panel — and use `primary` on a light or theme-flipping
     * surface. `solid` is unaffected either way, since it pairs `--btn-fill`
     * with `--btn-text` rather than painting the ink.
     *
     * On a tint — `soft`, `surface`, or any non-solid segment of a soft or
     * surface ButtonGroup — `tertiary`, `accent`, `success` and `warning` step
     * to their `-700` ink so the label clears 4.5:1; see `styles.tintInk`.
     */
    color?: 'white' | 'grey' | 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'success' | 'warning' | null;
    /**
     * Scale step. `sm` / `default` / `lg` render 52 / 60 / 68px tall below
     * `sm:` and 44 / 52 / 60px at or above it. The step changes padding only —
     * the label is 16px and an icon beside it 24px at every step.
     *
     * `icon` is not a fourth step on that ramp — it is a flat 40×40 chrome
     * square (header actions, dialog close buttons, footer social links) that
     * lines up with none of them. For an icon-only button that must sit level
     * with text buttons beside it, pair `iconOnly` with `sm`/`default`/`lg`.
     * Inside a ButtonGroup `icon` renders exactly that way, as `iconOnly` at
     * the group's own step: the group clips to its own box, so the square's
     * 44px touch expansion would be cut off.
     */
    size?: 'sm' | 'default' | 'lg' | 'icon' | null;
    /**
     * Render as a square containing only the icon, at the height of the current
     * `size` step — so `iconOnly` beside a `size='default'` button matches it
     * exactly. Supply an `aria-label`, since there is no visible text.
     *
     * With no label to match, the glyph scales with the square instead of
     * holding the 24px used beside text: 20px at `sm`, 24px at `default`, 28px
     * at `lg`, the same at every breakpoint. For a denser icon button that does
     * not line up with the text steps, use `size='icon'` (24px in a 40×40 box).
     */
    iconOnly?: boolean | null;
    className?: string;
    /** Button label. Optional for icon-only buttons (supply an `aria-label`). */
    children?: React__default.ReactNode;
    /** Stretch button to fill its container width. */
    block?: boolean;
    /** Show a spinner and disable interaction. */
    loading?: boolean;
    /** Horizontal alignment of button content. */
    alignContent?: 'center' | 'start';
    disabled?: boolean;
    /** Icon rendered before the label. Component or element — see `IconSlot`. */
    leadingVisual?: IconSlot;
    /** Icon rendered after the label. Component or element — see `IconSlot`. */
    trailingVisual?: IconSlot;
    /** Icon rendered as a trailing action (far end). Component or element. */
    trailingAction?: IconSlot;
    /** Allow the button label to wrap onto multiple lines. Defaults to true. */
    labelWrap?: boolean;
    /** Optional numeric badge rendered after the label. */
    count?: number;
    /**
     * Visually-hidden suffix announced after `count`, giving the bare number
     * context for screen readers (e.g. "unread messages" → "Inbox 3 unread
     * messages").
     */
    countLabel?: string;
};
type ButtonProps = ButtonOwnProps & Omit<Button$1.Props, 'className' | 'disabled'>;
type ButtonLinkProps = ButtonOwnProps & Omit<React__default.ComponentPropsWithoutRef<typeof Link>, 'className' | 'variant'> & {
    ref?: React__default.Ref<HTMLAnchorElement>;
};
/**
 * Action button on the Base UI button primitive. For button-styled
 * navigation, use `ButtonLink` — the `href` polymorphism that previously
 * lived on this component was removed in v2.
 *
 * Base UI's `render` prop is available for composition (e.g. rendering a
 * framework-specific element while keeping Button behaviour).
 */
declare function Button({ className, variant: variantProp, color: colorProp, size: sizeProp, iconOnly: iconOnlyProp, children, block, loading, alignContent, disabled, leadingVisual, trailingVisual, trailingAction, labelWrap, count, countLabel, ref, ...props }: ButtonProps): React__default.JSX.Element;
/**
 * Button-styled anchor. Renders through `Link`, so it picks up the
 * framework link component from `LinkProvider` (e.g. next/link) and accepts
 * all anchor props. Disabled/loading states are conveyed with
 * `aria-disabled` and a click guard, since anchors have no `disabled`
 * attribute.
 */
declare function ButtonLink({ className, variant: variantProp, color: colorProp, size: sizeProp, iconOnly: iconOnlyProp, children, block, loading, alignContent, disabled, leadingVisual, trailingVisual, trailingAction, labelWrap, count, countLabel, ref, ...props }: ButtonLinkProps): React__default.JSX.Element;
/**
 * Expand the hit area to at least 44×44px on touch devices
 */
declare function TouchTarget({ children }: {
    children: React__default.ReactNode;
}): React__default.JSX.Element;

export { Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type IconSlot, TouchTarget, buttonColorVariants, buttonVariants };