import { type ReactNode } from "react";
import { type GestureResponderEvent } from "react-native";
import { View, type ColorTokens, type ViewStyle, type TextStyle, type LayoutStyle } from "../../style/index.js";
export interface RadioProps {
    /**
     * This option's value within a RadioGroup. When the radio sits inside a
     * `<RadioGroup>`, its checked state and selection are driven by the group
     * matching this value; ignored for a standalone radio.
     */
    value?: string | number;
    /** Whether this control is the selected option (controlled; standalone use). */
    checked?: boolean;
    /** Alias for `checked`, for callers that think in terms of "selected". */
    selected?: boolean;
    /** Fired on press with the next checked value (always true for a radio). Web keyboard activation supports Space on release and Enter; RadioGroup also handles arrows. */
    onChange?: (checked: boolean, event: GestureResponderEvent) => void;
    /** E2E hook forwarded to the pressable row. */
    testID?: string;
    /** Label text (the option's title) shown beside the control. */
    children?: ReactNode;
    /**
     * Optional muted secondary line rendered under the label, for the common
     * title-plus-description option (a plan picker, a settings choice). Supplying it
     * builds the stacked title/description layout inside the control, so the caller
     * never hand-composes a Row + Column + two Typography nodes per option.
     */
    description?: ReactNode;
    /**
     * Render the whole control as a selectable option CARD: the mark
     * <!-- only: web -->
     * (the ring, or the
     * trailing check on iOS)
     * <!-- /only -->
     * <!-- only: ios -->
     * (the trailing check)
     * <!-- /only -->
     * <!-- only: android -->
     * (the ring)
     * <!-- /only -->
     * plus the title and description sit inside Card chrome
     * (bordered, padded), and the ENTIRE card is the tap target. When this radio is the
     * chosen option, the card takes Card's own `selected` treatment (a primary border and
     * a soft primary tint), so the whole tile reads as chosen, not just the mark. Pairs
     * with `description` for a plan/tier picker, and is still group-wired through `value`
     * inside a `<RadioGroup>`.
     */
    card?: boolean;
    /**
     * A trailing detail on the title's line (a version, a price, a status pill): a string
     * is set in the small mono meta type in the subtle ink, a node (a `Badge`) as it is.
     * The title takes the row, so in a full-width option the detail sits at its end; in a
     * `row` group's hugging option it follows the title.
     */
    meta?: ReactNode;
    /**
     * A `card` tile's icon (a kit `Icon` with no tone of its own): the tile stacks the icon
     * and the mark on one line above the title and description. The icon takes the accent
     * text ink while the option is chosen and the subtle ink otherwise. Ignored without
     * `card`.
     */
    icon?: ReactNode;
    small?: boolean;
    large?: boolean;
    /** Dim the control and block presses. */
    disabled?: boolean;
    /** Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds. */
    style?: LayoutStyle;
}
export type Size = "small" | "default" | "large";
export declare function sizeOf(p: RadioProps): Size;
/** A radio button: a circular control that marks the chosen option in the accent. */
export interface RingMark {
    kind: "ring";
    /** The circular control. `checked` swaps the neutral border for primary. `nudge` aligns the ring to a label's first line. */
    ring: (tokens: ColorTokens, size: Size, checked: boolean, nudge: boolean) => ViewStyle;
    /** The centered fill dot, rendered only when checked; null where the chosen ring is hollow. */
    dot: ((tokens: ColorTokens, size: Size) => ViewStyle) | null;
    /** An unchosen ring's look under a hovering pointer (the web's soft accent ring); omit for none. */
    hover?: (tokens: ColorTokens) => ViewStyle;
}
/** A checkmark row (iOS, which has no radio button): the label leads and the chosen option carries a trailing check. */
export interface CheckMark {
    kind: "check";
    /** The trailing check glyph shown on the chosen option: its color, size, and the width of the column it ends. */
    glyph: (tokens: ColorTokens, size: Size) => {
        color: string;
        size: number;
        width: number;
    };
}
/** The inset-grouped list a RadioGroup's options form on a platform whose single choice is a checkmark list. */
export interface RadioListSkin {
    /** The section around the options (the list's fill, corner and clip). */
    section: (tokens: ColorTokens) => ViewStyle;
    /** The hairline drawn between two rows. */
    separator: (tokens: ColorTokens) => ViewStyle;
    /** A row's insets inside the section. */
    cell: ViewStyle;
    /** The row highlight while pressed. */
    cellPressed: (tokens: ColorTokens) => ViewStyle;
}
export interface RadioSkin {
    /** How the control marks the chosen option: a ring and dot, or a trailing check. */
    mark: RingMark | CheckMark;
    /** The label text beside the mark. */
    label: (tokens: ColorTokens, size: Size, disabled: boolean) => TextStyle;
    /** The muted secondary description line, rendered under the label when present. */
    description: (tokens: ColorTokens, size: Size, disabled: boolean) => TextStyle;
    /** A string `meta`'s type: the small mono meta line in the subtle ink. */
    meta: (tokens: ColorTokens) => TextStyle;
    /**
     * The `card` mode chrome: the whole control wrapped as a selectable Card surface
     * (bordered + padded, per-OS radius/curve), derived from the kit Card skin. When
     * `checked`, it applies Card's own `selected` treatment (primary border + soft tint).
     */
    card: (tokens: ColorTokens, checked: boolean) => ViewStyle;
    /** The space between the mark and the text. */
    rowGap: number;
    /** The space between a group's options: plain rows, and card tiles. */
    groupGap: {
        plain: number;
        card: number;
    };
    /**
     * The inset-grouped list a RadioGroup's plain options form (iOS's inline picker), or
     * null where a group stays a stack of controls (the web and Android).
     */
    list: RadioListSkin | null;
    /** Opacity applied to the row when disabled. */
    disabledOpacity: number;
    /** iOS/web dim the row on press; Android uses a ripple instead (null). */
    pressedOpacity: number | null;
    /** Android ripple over the ring; null on iOS/web. */
    ripple: ((tokens: ColorTokens) => {
        color: string;
        borderless: boolean;
        radius?: number;
    }) | null;
}
/** Build a Radio component from a platform skin.
 * @ref Ref to the interactive radio row, preserving group navigation. Typed as a React Native View. On web, React Native Web exposes its DOM host; focus() and blur() move browser focus. Native host behavior depends on the platform and React Native version. Calling focus() does not activate the control or call accessibility focus APIs.
 */
export declare function createRadio(skin: RadioSkin): import("react").ForwardRefExoticComponent<RadioProps & import("react").RefAttributes<View>>;
//# sourceMappingURL=radio.shared.d.ts.map