import React from 'react';
/** One choice. The same shape as Combobox's and MultiSelect's options. */
export interface DualListboxOption {
    value: string;
    label: string;
    /** Second line in the row, read with the label. */
    description?: string;
    /** Cannot be picked or moved — it stays on whichever side it starts. */
    isDisabled?: boolean;
}
export interface DualListboxLabels {
    /** Names the list of what is not chosen. "Available". */
    available?: string;
    /** Names the list of what is chosen. "Selected". */
    selected?: string;
    /** The button that moves the picked options across. "Add to selected". */
    add?: string;
    /** The button that moves them back. "Remove from selected". */
    remove?: string;
    /** "Move up" — earlier in the chosen order. */
    moveUp?: string;
    /** "Move down". */
    moveDown?: string;
    /** Shown in a list with nothing in it. "None". */
    empty?: string;
    /**
     * Announced after a move across — "2 moved to Selected". Receives the
     * count, formatted for the locale, and the name of the list they went to.
     */
    moved?: (count: string, list: string) => string;
    /**
     * Announced after a reorder — "Kwame Mensah, 2 of 4". Receives the moved
     * options' labels, and where the first now is, formatted for the locale.
     */
    reordered?: (labels: string[], position: string, total: string) => string;
}
export interface DualListboxProps {
    /** Every choice, in the order the Available list shows them. */
    options: readonly DualListboxOption[];
    /** The chosen values (controlled), in their chosen order. */
    value?: readonly string[];
    /** The initially chosen values (uncontrolled). */
    defaultValue?: readonly string[];
    /** Receives the whole new list of chosen values, in order. */
    onChange?: (value: string[]) => void;
    /** Names the field. Required for a usable control — see `a11y.requires`. */
    label?: React.ReactNode;
    /** Names the field when there is no visible `label`. */
    'aria-label'?: string;
    /** Helper text below the lists. */
    description?: React.ReactNode;
    /** Replaces the helper text when `isInvalid` is set. */
    errorMessage?: React.ReactNode;
    isInvalid?: boolean;
    /** At least one value must be chosen. */
    isRequired?: boolean;
    isDisabled?: boolean;
    /**
     * The chosen order means something — who is asked first, which source is
     * searched first — and can be changed: Move up and Move down.
     */
    isReorderable?: boolean;
    /** Posts every chosen value under this name, in order, for a form. */
    name?: string;
    /** Every string it renders or announces, for translation. English by default. */
    labels?: DualListboxLabels;
    /** Class names for the `.ion-field` wrapper. */
    className?: string;
    id?: string;
}
/**
 * DualListbox — choose some of many, in two lists side by side: what is
 * available, and what is chosen, with buttons that move options between them.
 *
 * WHY NOT A MULTISELECT
 *
 * A MultiSelect hides what is left behind a popover and shows what is chosen
 * as tags that wrap. That is right for a handful. It is wrong when the chosen
 * set is long and must be reviewed whole, when both sides need to be seen at
 * once, and when the chosen ORDER means something — who is asked to approve
 * first — since tags cannot be reordered from the keyboard.
 *
 * HOW IT BEHAVES
 *
 *   - Two listboxes, each one tab stop, named by the field and by which list
 *     it is. Multiple selection with the listbox pattern's recommended model:
 *     ↑ ↓ move and select, Shift extends, Ctrl or ⌘ moves without selecting
 *     and Space then toggles, Ctrl+A takes all. A click picks one; Shift- and
 *     Ctrl-click extend.
 *   - Enter or a double click moves an option straight across.
 *   - The buttons act on what is picked. What moved stays picked in its new
 *     list, so Move up can follow Add at once. Focus stays on the button
 *     pressed; when that leaves it disabled — nothing left to add — focus
 *     goes to the first option that moved, where the next useful key is.
 *   - Each move is announced through a status region that is always there.
 *   - Below 30rem of its own width the lists stack, and the buttons point
 *     up and down between them.
 */
export declare function DualListbox({ options, value: valueProp, defaultValue, onChange, label, 'aria-label': ariaLabel, description, errorMessage, isInvalid, isRequired, isDisabled, isReorderable, name, labels, className, id, }: DualListboxProps): React.JSX.Element;
export declare namespace DualListbox {
    var displayName: string;
}
//# sourceMappingURL=DualListbox.d.ts.map