import type React from 'react'; import type { FocusDetail, KeyboardDetail, RadioOption, SelectDetail } from './types.js'; export interface RadioGroupRef extends HTMLElement { /** Returns the selected radio value. */ getValue(): string; /** Sets the selected radio value. */ setValue(value: string): void; } /** * Options come from the `options` prop (RadioOption[]), not as children. * Each option has `value`, `label`, and optional `disabled`. * The `onChange` detail contains `{ value }`. * * In React, reach the imperative methods through a ref: * `const api = useRef(null)`, pass `ref={api}`, then `api.current?.getValue()`. * Available: getValue(), setValue(). * * @csspart base */ export interface RadioGroupOwnProps { /** * Form field name for submission. * @example 'fieldName' */ name?: string; /** * Fieldset legend text for the radio group. * @example 'Choose an option' */ legend: string; /** * Corner radius style. Allowed values: `round`, `rounded`. * @example 'round' */ shape?: 'round' | 'rounded'; /** * Layout orientation (horizontal or vertical). Allowed values: `vertical`, `horizontal`. * @example 'vertical' */ orientation?: 'vertical' | 'horizontal'; /** * Component size. Allowed values: `xs`, `sm`, `md`, `lg`, `xl`. * @example 'xs' */ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** * Currently selected item ID(s). * @example 'example' */ selected?: string; /** * Disables the component, preventing interaction. * @defaultValue false * @example true */ disabled?: boolean; /** * Marks the field as required for form validation. * @defaultValue false * @example true */ required?: boolean; /** * Helper text displayed below the input. * @example 'example' */ helperText?: string; /** * Error message text. When set, shows validation error styling. * @example 'This field is invalid' */ error?: string; /** * Typed array of selectable options. Bind as a property; do not stringify it or use children for options. * @example [{ value: 'a', label: 'Option A' }] */ options?: RadioOption[]; /** * Fires on each user edit before the value is committed. Detail: `SelectDetail`. * @example (event) => console.log(event.detail.value) */ onInput?: (event: CustomEvent) => void; /** * Fires when the committed component value or state changes. Detail: `SelectDetail`. * @example (event) => console.log(event.detail.value) */ onChange?: (event: CustomEvent) => void; /** * Fires when focus enters the component. Detail: `FocusDetail`. * @example (event) => console.log(event.detail.relatedTarget) */ onFocus?: (event: CustomEvent) => void; /** * Fires when focus leaves the component. Detail: `FocusDetail`. * @example (event) => console.log(event.detail.relatedTarget) */ onBlur?: (event: CustomEvent) => void; /** * Fires when a key is pressed inside the component. Detail: `KeyboardDetail`. * @example (event) => console.log(event.detail.key) */ onKeydown?: (event: CustomEvent) => void; /** * Fires when a key is released inside the component. Detail: `KeyboardDetail`. * @example (event) => console.log(event.detail.key) */ onKeyup?: (event: CustomEvent) => void; /** CSS class applied to the Custom Element host. * @example 'my-component' */ className?: string; /** Inline styles applied to the Custom Element host. * @example { marginTop: 8 } */ style?: React.CSSProperties; } /** * Props for ``: the component's own API plus every standard DOM * attribute and native React event handler, forwarded verbatim to the * `` host — `id`, `data-*`, `aria-*`, `title`, `tabIndex`, * `slot`, `onMouseEnter`, and the rest. Own props always win over a * same-named DOM attribute. */ export type RadioGroupProps = RadioGroupOwnProps & Omit, keyof RadioGroupOwnProps | 'children' | 'dangerouslySetInnerHTML'>; export declare const RadioGroup: React.ForwardRefExoticComponent, "children" | "dangerouslySetInnerHTML" | keyof RadioGroupOwnProps> & React.RefAttributes>;