import type { Readable } from '@vielzeug/ripple';
import { type ChoiceChangeDetail } from '../../core';
import type { ComponentSize, ThemeColor } from '../../types';
/** Radio group component properties */
export type OreRadioGroupProps = {
    /** Theme color tint */
    color?: ThemeColor;
    /** Disabled state */
    disabled?: boolean;
    /** Error message text */
    error?: string;
    /** Helper text displayed below the items */
    helper?: string;
    /** Group label text */
    label?: string;
    /** Form field name */
    name?: string;
    /** Layout orientation */
    orientation?: 'horizontal' | 'vertical';
    /** Required field */
    required?: boolean;
    /** Items size preset */
    size?: ComponentSize;
    /** Initial selected value */
    value?: string;
};
export type RadioGroupContext = {
    color: Readable<ThemeColor | undefined>;
    disabled: Readable<boolean>;
    name: Readable<string | undefined>;
    select: (value: string, originalEvent?: Event) => void;
    size: Readable<ComponentSize | undefined>;
    value: Readable<string | undefined>;
};
export declare const RADIO_GROUP_CTX: import("@vielzeug/ore").InjectionKey<RadioGroupContext | undefined>;
/** Events emitted by the radio-group component */
export type OreRadioGroupEvents = {
    /** Emitted when the selection changes */
    change: ChoiceChangeDetail;
};
/**
 * A group of radio buttons that allows users to select a single option from a set.
 * Supports keyboard navigation (arrows) and automatic value management.
 *
 * @element ore-radio-group
 *
 * @attr {string} value - Selected value
 * @attr {string} name - Form field name
 * @attr {string} label - Group label
 * @attr {string} orientation - Layout: 'vertical' | 'horizontal'
 * @attr {boolean} required - Required field
 *
 * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }
 *
 * @slot - Place `ore-radio` elements here
 *
 * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')
 * @cssprop --radio-group-gap - Gap between radio items
 * @part items - Items container.
 * @example
 * ```html
 * <ore-radio-group name="plan" label="Choose a plan" value="free" required>
 *   <ore-radio value="free">Free</ore-radio>
 *   <ore-radio value="pro">Pro</ore-radio>
 *   <ore-radio value="enterprise">Enterprise</ore-radio>
 * </ore-radio-group>
 * <ore-radio-group name="direction" orientation="horizontal" color="primary">
 *   <ore-radio value="left">Left</ore-radio>
 *   <ore-radio value="right">Right</ore-radio>
 * </ore-radio-group>
 * ```
 */
export declare const RADIO_GROUP_TAG: "ore-radio-group";
//# sourceMappingURL=radio-group.d.ts.map