import { ReactElement } from 'react';

/**
 * MergeTagReference — WealthX Design System
 *
 * A popover that lists the personalisation tokens ("merge tags") available in
 * an email template, grouped by source (Contact / Company / Broker), each with
 * a human label and a description of what it resolves to. Answers the common
 * "where is the list of merge tags and what do they mean?" question, and lets
 * the author drop a token in via `onSelect`.
 *
 * Pure/presentational: the caller supplies the groups and decides what
 * `onSelect(token)` does (insert into the body, copy to clipboard, etc.).
 */
interface MergeTagReferenceItem {
    /** The literal token, e.g. "{{contact.first_name}}". */
    token: string;
    /** Human label, e.g. "First name". */
    label: string;
    /** What the token resolves to when the email is sent. */
    description: string;
}
interface MergeTagReferenceGroup {
    /** Group heading, e.g. "Contact". */
    group: string;
    tags: MergeTagReferenceItem[];
}
interface MergeTagReferenceProps {
    /** The merge tags to list, grouped by source. */
    groups: MergeTagReferenceGroup[];
    /** Called with the token when a tag is chosen (closes the popover). */
    onSelect?: (token: string) => void;
    /** Trigger button label. */
    triggerLabel?: string;
    /** Popover alignment against the trigger. */
    align?: "start" | "center" | "end";
    className?: string;
}
/** Popover reference of a template's available merge tags, grouped by source. */
declare function MergeTagReference({ groups, onSelect, triggerLabel, align, className, }: MergeTagReferenceProps): ReactElement;

export { MergeTagReference, type MergeTagReferenceGroup, type MergeTagReferenceItem, type MergeTagReferenceProps, MergeTagReference as default };