import * as React from 'react'; import { type FieldProps } from '../_shared/index.js'; import { type SelectionColor, type SelectionItem, type SelectionSize, type SelectionVariant } from '../../../ui/selection-group.js'; export type RadioGroupVariant = SelectionVariant | 'logo'; export type RadioGroupColor = SelectionColor; export type RadioGroupSize = SelectionSize; export interface RadioGroupItem extends SelectionItem { /** Item-specific validation message. */ error?: React.ReactNode; /** Visual shown after the item content and before its radio. */ trailingVisual?: React.ReactNode; /** Brand or payment mark used by the logo layout. */ logo?: React.ReactNode; /** Logo arrangement within the logo layout. */ logoLayout?: 'horizontal' | 'vertical'; /** Uses a muted selected surface instead of a selected border. */ selectedBackground?: boolean; } interface RadioGroupControlProps extends Omit, 'onChange'> { /** Array of radio options */ items: RadioGroupItem[]; /** Currently selected value (controlled) */ value?: string; /** Default selected value (uncontrolled) */ defaultValue?: string; /** Callback when selection changes */ onValueChange?: (value: string) => void; /** Visual variant */ variant?: RadioGroupVariant; /** Size of the radio buttons */ size?: RadioGroupSize; /** Layout orientation */ orientation?: 'horizontal' | 'vertical'; /** Gap between options */ gap?: 'sm' | 'md' | 'lg'; /** Color theme */ color?: RadioGroupColor; /** Renders card variant with filled/muted background instead of white */ filled?: boolean; /** Whether the entire group is disabled */ disabled?: boolean; /** Name attribute for form submission */ name?: string; /** Whether a selection is required */ required?: boolean; /** Accessible label for the radio group */ 'aria-label'?: string; /** ID of element that labels the radio group */ 'aria-labelledby'?: string; } export interface RadioGroupProps extends RadioGroupControlProps, Omit { } declare const RadioGroup: React.ForwardRefExoticComponent>; export { RadioGroup };