import type { ControlSize } from "@charcuterie/tokens";
import type { ReactNode } from "react";
import type { RadioItem, RadioItemShape } from "./RadioGroup.tsx";
export type RadioGroupOptionProps = {
    isChecked: boolean;
    isReadOnly: boolean;
    item: RadioItem;
    itemShape: RadioItemShape;
    onChoose: (value: string) => void;
    /** `RovingFocus.register` — membership of the arrow-key group. */
    registerFocus: (value: string) => () => void;
    /** `SinglePicker.register` — membership of the choice. */
    registerSelection: (value: string) => () => void;
    size: ControlSize;
    tabIndex: number;
    trackElement: (value: string, element: HTMLButtonElement | null) => void;
};
/**
 * Its own file for the same reason `SegmentedOption` is: **both
 * registrations are effects**, and an effect cannot run in a loop.
 *
 * The ring and the dot are two elements rather than a bordered box
 * with a background, so the checked dot can be centred by the grid
 * and sized independently of the ring — a filled `bg-intent-accent`
 * ring with no inner dot reads as a checkbox, not a radio.
 *
 * ### The tile shape is the same element with a border
 *
 * `itemShape="tile"` swaps `inline-flex` for `flex` — a grid item
 * stretches to its track, and an inline box would sit at
 * max-content inside it — adds the card's padding and border, and
 * moves the ring to the top of a two-line label. The radio dot is
 * still there and is still the thing a screen reader reads: a tile
 * with its border taken away is this row, which is why the two are
 * one component.
 */
export declare const RadioGroupOption: ({ isChecked, isReadOnly, item, itemShape, onChoose, registerFocus, registerSelection, size, tabIndex, trackElement, }: RadioGroupOptionProps) => ReactNode;
//# sourceMappingURL=RadioGroupOption.d.ts.map