analytica-frontend-lib/dist/Alternative/index.d.ts

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

import * as react from 'react';
import { HTMLAttributes } from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

/**
 * Interface para definir uma alternativa
 */
interface Alternative {
    value: string;
    label: string;
    status?: 'correct' | 'incorrect' | 'neutral';
    disabled?: boolean;
    description?: string;
}
/**
 * Props do componente AlternativesList
 */
interface AlternativesListProps {
    /** Lista de alternativas */
    alternatives: Alternative[];
    /** Nome do grupo de radio */
    name?: string;
    /** Valor selecionado por padrão */
    defaultValue?: string;
    /** Valor controlado */
    value?: string;
    /** Callback quando uma alternativa é selecionada */
    onValueChange?: (value: string) => void;
    /** Se o componente está desabilitado */
    disabled?: boolean;
    /** Layout das alternativas */
    layout?: 'default' | 'compact' | 'detailed';
    /** Classes CSS adicionais */
    className?: string;
    /** Modo de exibição: interativo (com radios funcionais) ou readonly (apenas visual) */
    mode?: 'interactive' | 'readonly';
    /** Valor selecionado pelo usuário (apenas para modo readonly) */
    selectedValue?: string;
}
/**
 * Componente reutilizável para exibir lista de alternativas com RadioGroup
 *
 * Suporta dois modos:
 * - `interactive`: Permite interação com radios (padrão)
 * - `readonly`: Apenas exibição visual dos estados
 *
 * @example
 * ```tsx
 * // Modo interativo (padrão)
 * <AlternativesList
 *   mode="interactive"
 *   alternatives={[
 *     { value: "a", label: "Alternativa A", status: "correct" },
 *     { value: "b", label: "Alternativa B", status: "incorrect" },
 *     { value: "c", label: "Alternativa C" }
 *   ]}
 *   defaultValue="a"
 *   onValueChange={(value) => console.log(value)}
 * />
 *
 * // Modo readonly - mostra seleção do usuário
 * <AlternativesList
 *   mode="readonly"
 *   selectedValue="b"  // O que o usuário selecionou
 *   alternatives={[
 *     { value: "a", label: "Resposta A", status: "correct" },  // Mostra como correta
 *     { value: "b", label: "Resposta B" },  // Mostra radio selecionado + badge incorreto
 *     { value: "c", label: "Resposta C" }
 *   ]}
 * />
 * ```
 */
declare const AlternativesList: ({ alternatives, name, defaultValue, value, onValueChange, disabled, layout, className, mode, selectedValue, }: AlternativesListProps) => react_jsx_runtime.JSX.Element;
interface HeaderAlternativeProps extends HTMLAttributes<HTMLDivElement> {
    title: string;
    subTitle: string;
    content: string;
}
declare const HeaderAlternative: react.ForwardRefExoticComponent<HeaderAlternativeProps & react.RefAttributes<HTMLDivElement>>;

export { type Alternative, AlternativesList, type AlternativesListProps, HeaderAlternative };