import * as React from 'react';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
/**
 * RadioGroup component - Container for radio button options
 */
declare function RadioGroup({ ref, className, ...props }: React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> & {
    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Root>>;
}): import("react/jsx-runtime").JSX.Element;
declare namespace RadioGroup {
    var displayName: string | undefined;
}
/**
 * RadioGroupItem component props
 */
export type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
/**
 * RadioGroupItem component - Individual radio button
 *
 * A styled radio button component with proper accessibility features.
 * Uses Radix UI RadioGroup primitive for robust functionality.
 *
 * @example Basic usage
 * ```tsx
 * <RadioGroup defaultValue="option1">
 *   <div className="flex items-center space-x-2">
 *     <RadioGroupItem value="option1" id="option1" />
 *     <label htmlFor="option1">Option 1</label>
 *   </div>
 *   <div className="flex items-center space-x-2">
 *     <RadioGroupItem value="option2" id="option2" />
 *     <label htmlFor="option2">Option 2</label>
 *   </div>
 * </RadioGroup>
 * ```
 *
 * @example With React Hook Form
 * ```tsx
 * <FormField
 *   control={form.control}
 *   name="type"
 *   render={({ field }) => (
 *     <FormItem className="space-y-3">
 *       <FormLabel>Notification Type</FormLabel>
 *       <FormControl>
 *         <RadioGroup
 *           onValueChange={field.onChange}
 *           defaultValue={field.value}
 *           className="flex flex-col space-y-1"
 *         >
 *           <FormItem className="flex items-center space-x-3 space-y-0">
 *             <FormControl>
 *               <RadioGroupItem value="all" />
 *             </FormControl>
 *             <FormLabel className="font-normal">
 *               All new messages
 *             </FormLabel>
 *           </FormItem>
 *           <FormItem className="flex items-center space-x-3 space-y-0">
 *             <FormControl>
 *               <RadioGroupItem value="mentions" />
 *             </FormControl>
 *             <FormLabel className="font-normal">
 *               Direct messages and mentions
 *             </FormLabel>
 *           </FormItem>
 *           <FormItem className="flex items-center space-x-3 space-y-0">
 *             <FormControl>
 *               <RadioGroupItem value="none" />
 *             </FormControl>
 *             <FormLabel className="font-normal">
 *               Nothing
 *             </FormLabel>
 *           </FormItem>
 *         </RadioGroup>
 *       </FormControl>
 *       <FormMessage />
 *     </FormItem>
 *   )}
 * />
 * ```
 *
 * @example Controlled radio group
 * ```tsx
 * const [value, setValue] = useState('option1');
 *
 * <RadioGroup value={value} onValueChange={setValue}>
 *   <div className="flex items-center space-x-2">
 *     <RadioGroupItem value="option1" id="r1" />
 *     <label htmlFor="r1">Default</label>
 *   </div>
 *   <div className="flex items-center space-x-2">
 *     <RadioGroupItem value="option2" id="r2" />
 *     <label htmlFor="r2">Comfortable</label>
 *   </div>
 *   <div className="flex items-center space-x-2">
 *     <RadioGroupItem value="option3" id="r3" />
 *     <label htmlFor="r3">Compact</label>
 *   </div>
 * </RadioGroup>
 * ```
 */
declare function RadioGroupItem({ ref, className, ...props }: RadioGroupItemProps & {
    ref?: React.Ref<React.ElementRef<typeof RadioGroupPrimitive.Item>>;
}): import("react/jsx-runtime").JSX.Element;
declare namespace RadioGroupItem {
    var displayName: string | undefined;
}
export { RadioGroup, RadioGroupItem };
//# sourceMappingURL=Radio.d.ts.map