/**
 * ComparisonTable — a domain-neutral, typed-generic component for comparing a
 * bounded set of candidate options across labeled attributes. Options are the
 * columns; attributes are the rows. It knows nothing about the option type `T`,
 * fetches nothing, and owns no routes — data comes in via `columns`/`rows` and
 * selection goes out via `onSelectColumn` (router-neutral).
 *
 * Each column can carry `states` (recommended / lowest / highest / selected /
 * unavailable). State is never color-only: every state renders a Badge with a
 * text label and an icon, and selection carries `aria-pressed`. Recommended and
 * selected columns are additionally emphasized with a tint + accent border.
 *
 * Accessibility:
 *   - semantic `<table>` with `scope="col"` option headers and `scope="row"`
 *     attribute headers
 *   - selection is a real `<button>` per column (keyboard-operable, `aria-pressed`)
 *   - `unavailable` options disable their select button
 *
 * Responsive: the root is a `@container` scope. From `@xl` up the table shows;
 * below it, the table hides and one stacked card per option is shown instead
 * (label/value description lists), so no component assumes it owns the viewport.
 *
 * Motion: tint/border transitions run on the token duration and collapse to
 * instant under `prefers-reduced-motion`. No JS-driven animation.
 */
import type { ReactNode } from "react";
import { type ComparisonState } from "./variants.js";
export * from "./variants.js";
export type ComparisonColumn<T> = {
    id: string;
    option: T;
    title: ReactNode;
    subtitle?: ReactNode;
    /** Markers for this option; drives badges and column emphasis. */
    states?: readonly ComparisonState[];
};
export type ComparisonRow<T> = {
    id: string;
    label: ReactNode;
    description?: ReactNode;
    /** Renders this attribute's value for a given option. */
    render: (option: T) => ReactNode;
};
export type ComparisonTableProps<T> = {
    columns: readonly ComparisonColumn<T>[];
    rows: readonly ComparisonRow<T>[];
    /** The chosen option; adds the `selected` state + `aria-pressed` semantics. */
    selectedColumnId?: string;
    /** When provided, each column header renders a keyboard-operable select button. */
    onSelectColumn?: (id: string) => void;
    /** Accessible name for the comparison. */
    ariaLabel?: string;
    /** English by default; override to localize the state badge labels. */
    stateLabels?: Partial<Record<ComparisonState, string>>;
    /** Select-button label for an unselected option. Defaults to "Select". */
    selectLabel?: string;
    /** Select-button label for the selected option. Defaults to "Selected". */
    selectedLabel?: string;
};
export declare function ComparisonTable<T>({ columns, rows, selectedColumnId, onSelectColumn, ariaLabel, stateLabels, selectLabel, selectedLabel, }: ComparisonTableProps<T>): import("react").JSX.Element;
//# sourceMappingURL=index.d.ts.map