import type { ControlSize } from "@charcuterie/tokens";
import type { Placement } from "@floating-ui/react";
import type { ReactElement, ReactNode } from "react";
export type ListboxItem = {
    isDisabled?: boolean;
    label: ReactNode;
    /**
     * Required when `label` is rich (an icon, two lines, a badge): it is
     * the type-ahead target and the accessible name a screen reader
     * reads. When `label` is a plain string it is used as the fallback.
     */
    textValue?: string;
    value: string;
};
export type ListboxProps = {
    className?: string;
    isVisible: boolean;
    /**
     * How tall each option is, from the same density-aware tokens a
     * `Button` reads — so a `md` option is exactly as tall as the `md`
     * trigger that opened it. `lg` is the fat one: 2.75rem at
     * `comfortable` density, and a bigger target to aim at.
     *
     * A short window steps it back down on its own
     * (`usePanelItemSize`), so a `lg` list is never the reason the last
     * option is off-screen.
     */
    itemSize?: ControlSize;
    /** Outside press and Escape both land here. */
    onDismiss: () => void;
    onSelect: (value: string) => void;
    options: readonly ListboxItem[];
    placement?: Placement;
    /** The initial seed. The live selection is the listbox's after that. */
    selectedValue?: string;
    /** The control the listbox hangs off. **Cloned, not wrapped.** */
    trigger: ReactElement;
};
/**
 * The single-select fancy dropdown — the rich-option sibling of the
 * native `Select`. `Select` keeps type-ahead, the mobile wheel, form
 * submission and autofill; `Listbox` is for the cases `<option>`
 * cannot render: an icon, two lines, a trailing badge.
 *
 * A listbox is **not** a menu, and that distinction is the whole
 * reason it is a separate component from `Menu`. An `option` *is*
 * something you are choosing — so it carries `aria-selected`, it
 * type-aheads (which the APG requires of a listbox and `Menu`
 * deliberately omits), and a screen reader announces "listbox,
 * selected, 2 of 4". A `menuitem` only ever *does* something.
 *
 * ### Two kinds of state, composed
 *
 * `useRovingFocus` owns which option is tabbable (exactly one, so Tab
 * enters and leaves the group once and the arrow keys move within it),
 * and `useSinglePicker` owns which option is chosen. They are the same
 * two kinds `Tabs` composes, and they never disturb each other:
 * arrowing moves focus without selecting, Enter selects the focused
 * option.
 *
 * ### Portalled, and named by its trigger
 *
 * Like `Menu`, the panel portals to `document.body` and `useRole` names
 * it by pointing `aria-labelledby` at the trigger — so there is no
 * `heading` prop; the button that opens it is its label.
 */
export declare const Listbox: ({ className, isVisible, itemSize: requestedItemSize, onDismiss, onSelect, options, placement, selectedValue, trigger, }: ListboxProps) => ReactNode;
//# sourceMappingURL=Listbox.d.ts.map