import { HtmlHTMLAttributes } from 'react';
export interface ConnectDotsOption {
    id: string;
    option: string;
    correctValue: string;
}
export interface ConnectDotsProps extends HtmlHTMLAttributes<HTMLDivElement> {
    /** Available options with their correct values */
    options: ConnectDotsOption[];
    /** Current answers as a map of optionId -> selectedValue */
    answers?: Record<string, string>;
    /** Callback when an answer changes (only for interactive mode) */
    onAnswerChange?: (optionId: string, selectedValue: string) => void;
    /** Display mode */
    mode?: 'interactive' | 'readonly' | 'result';
    /** Whether component is disabled (only for interactive mode) */
    disabled?: boolean;
}
/**
 * ConnectDots component for displaying matching/connect-the-dots questions
 *
 * @example
 * // Readonly mode - shows correct matches with arrows
 * <ConnectDots
 *   options={[
 *     { id: 'opt-1', option: 'I. Event A', correctValue: '2001' },
 *     { id: 'opt-2', option: 'II. Event B', correctValue: '1989' },
 *   ]}
 *   mode="readonly"
 * />
 *
 * @example
 * // Interactive mode - shows select dropdowns
 * <ConnectDots
 *   options={[...]}
 *   mode="interactive"
 *   answers={answers}
 *   onAnswerChange={(optionId, value) => setAnswers({...answers, [optionId]: value})}
 * />
 *
 * @example
 * // Result mode - shows badges with correct/incorrect indicators
 * <ConnectDots
 *   options={[...]}
 *   mode="result"
 *   answers={userAnswers}
 * />
 */
declare const ConnectDots: ({ options, answers, onAnswerChange, mode, disabled, className, ...props }: ConnectDotsProps) => import("react/jsx-runtime").JSX.Element;
export { ConnectDots };
//# sourceMappingURL=ConnectDots.d.ts.map