import React from "react";
import { type SizeNames } from "../../system/Sizes.d.ts";
import { type Props as BoxProps } from "../Box/Box";
export type DropdownTriggerProps = Omit<React.ComponentPropsWithRef<"button">, "children" | "width"> & {
    /**
     * Makes the trigger take (a part of) the width of its container, like
     * `width` on `Box`. Without it, the trigger is as wide as its content.
     *
     * Only `width` is taken from `Box`, since its other props (e.g.
     * `backgroundColor`, `borderRadius` or padding) would override the trigger's
     * own design. Box's fixed sizes (`SIZES`, 0–32px) are left out, as they are
     * too small for a trigger.
     */
    width?: Exclude<BoxProps<"button">["width"], SizeNames>;
    /**
     * - `primary`: bordered, for use in forms.
     * - `secondary`: no border or background until it's hovered (background
     *   only), has a value, is pressed or is focused. For use where a bordered
     *   field would be too heavy, e.g. in a toolbar or a table cell.
     *
     * @default "primary"
     */
    variant?: "primary" | "secondary";
    /**
     * The current value, e.g. the label of the selected option. When empty, the
     * `placeholder` is shown instead.
     */
    children?: React.ReactNode;
    /**
     * Text shown while there is no value.
     */
    placeholder?: string;
    /**
     * Icon that will be rendered before the value. You need to pass in the
     * rendered icon component, not the key.
     *
     * @example
     * ```tsx
     * <DropdownTrigger leadingIcon={<EyeOpenIcon />} />
     * ```
     */
    leadingIcon?: React.ReactNode;
    /**
     * Icon that will be rendered right after the value. You need to pass in the
     * rendered icon component, not the key.
     *
     * @example
     * ```tsx
     * <DropdownTrigger trailingIcon={<SquareFilledIcon />} />
     * ```
     */
    trailingIcon?: React.ReactNode;
};
/**
 * A button that looks like a form field, showing the current value (or a
 * placeholder) and a chevron. Use it as the trigger of a `Popover` or
 * `FlyOutMenu` that lets the user pick a value.
 *
 * It renders a native `<button>` and forwards its ref and props, so it can be
 * used with `asChild` triggers. By default it's as wide as its content; set
 * `width` (like on `Box`) to e.g. `"full"` to fill its container.
 *
 * ## Accessibility
 *
 * A button's accessible name is its label, so a `<label htmlFor>` replaces the
 * value. To have both announced (e.g. "Priority, High"), point
 * `aria-labelledby` at the label and the trigger itself:
 *
 * ```tsx
 * <Text as="span" id="priority-label">Priority</Text>
 * <Popover.Trigger asChild>
 *   <DropdownTrigger id="priority" aria-labelledby="priority-label priority">
 *     High
 *   </DropdownTrigger>
 * </Popover.Trigger>
 * ```
 *
 * Decorative icons should be passed with `aria-hidden`.
 *
 * @example
 * ```tsx
 * <Popover.Root>
 *   <Popover.Trigger asChild>
 *     <DropdownTrigger placeholder="Select a priority">{priority}</DropdownTrigger>
 *   </Popover.Trigger>
 *   <Popover.Content aria-label="Priority">…</Popover.Content>
 * </Popover.Root>
 * ```
 */
export declare const DropdownTrigger: React.ForwardRefExoticComponent<Omit<DropdownTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;