import React from 'react';
import type { MentionCandidate } from '../mentions.js';
export interface MentionPickerProps {
    id: string;
    /** Already filtered to the query, agents first. */
    candidates: readonly MentionCandidate[];
    /** Index into `candidates` of the row the keyboard is on. */
    highlighted: number;
    onHighlight: (index: number) => void;
    onSelect: (candidate: MentionCandidate) => void;
}
export declare function mentionOptionId(pickerId: string, candidate: MentionCandidate): string;
/**
 * The list that opens over the composer when a reader types `@`: agents, then the
 * site's members. The composer owns the keyboard, so this only draws the rows and says
 * which one is under the pointer or the arrow keys.
 */
export declare function MentionPicker(props: MentionPickerProps): React.ReactElement | null;