import { type ReactionOption } from './ReactionPicker';
/**
 * The one reaction row every app draws under a comment or a chat line, from
 * the approved prototype (`concept/comments-everywhere`, Miky 17 October):
 * `Reaction` pills in the order they were first chosen, each saying who
 * reacted on hover, then the add button with `ReactionPicker`. Nobody reacted:
 * no row; the add button sits with the other actions (`AddReactionButton`).
 *
 * What a reaction writes and how reactions are counted stay in
 * `@estiva-app/conversation` (SPEC §6.6): its `groupReactions` answers the
 * `reactions` this takes, and its `REACTION_EMOJI` the five `options`.
 *
 * why: https://github.com/estiva-app/estiva-docs/blob/main/decisions/every-app-writes-and-reacts-with-one-shared-box.md
 */
/** One emoji on one target, and who put it there, in the order they reacted. */
export interface ReactionCount {
    emoji: string;
    by: readonly string[];
}
/** "Person one, Person two and you reacted with Makes sense". */
export declare function whoReacted(reaction: ReactionCount, nameOf: (id: string) => string, options: readonly ReactionOption[], viewer?: string): string;
export interface AddReactionButtonProps {
    /** The emoji offered, each named. */
    options: readonly ReactionOption[];
    onPick: (emoji: string) => void;
    className?: string;
}
/** The add button: `ReactionPicker` opens over it. */
export declare function AddReactionButton({ options, onPick, className }: AddReactionButtonProps): import("react").JSX.Element;
export interface ReactionRowProps {
    /** Each emoji and who chose it, in the order first chosen. An emoji nobody holds is not drawn. */
    reactions: readonly ReactionCount[];
    /** The emoji offered, each named; also what a pill's name is read from. */
    options: readonly ReactionOption[];
    /** A reactor's name, as "who reacted" says it. */
    nameOf: (id: string) => string;
    /** Who is looking: their pills are lit, and "who reacted" says "you". */
    viewer?: string;
    /** Your reaction on or off. Absent, the row only shows (read-only, signed out). */
    onToggle?: (emoji: string) => void;
    className?: string;
}
export declare function ReactionRow({ reactions, options, nameOf, viewer, onToggle, className }: ReactionRowProps): import("react").JSX.Element | null;
//# sourceMappingURL=ReactionRow.d.ts.map