import * as React from "react";
import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
export interface EnhancedRadioGroupProps extends React.ComponentProps<typeof RadioGroupPrimitive.Root> {
    /**
     * Visual variant of the radio group.
     * - `animated`: Default variant with circular radio buttons and pulse animation on selection
     * - `sliding`: Tab-like sliding indicator that moves to the selected item
     *
     * @default "animated"
     */
    variant?: "animated" | "sliding";
    /**
     * Disables all radio items in the group.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Gap between radio items. Can be a number (gap in pixels) or a Tailwind gap class.
     * - `0` or `"gap-0"`: No gap
     * - `1` or `"gap-1"` (4px)
     * - `2` or `"gap-2"` (8px) - compact
     * - `3` or `"gap-3"` (12px) - default
     * - `4` or `"gap-4"` (16px)
     *
     * @default 3
     */
    gap?: number | string;
}
/**
 * Enhanced RadioGroup component with variant support
 *
 * Wraps Radix UI RadioGroup primitives with enhanced styling and variants.
 * Maintains all Radix UI accessibility and state management.
 *
 * **Usage Tips:**
 * - Pass content directly as children to RadioGroupItem (don't wrap in Label)
 * - Use the `spacing` prop on RadioGroupItem to control gap between radio and content
 * - The "animated" variant is best for most use cases
 *
 * @example
 * ```tsx
 * // Basic usage
 * <RadioGroup variant="animated" value={value} onValueChange={setValue}>
 *   <RadioGroupItem value="option1">Option 1</RadioGroupItem>
 *   <RadioGroupItem value="option2">Option 2</RadioGroupItem>
 * </RadioGroup>
 *
 * // With custom content and spacing
 * <RadioGroup value={value} onValueChange={setValue}>
 *   <RadioGroupItem value="option1" spacing="compact">
 *     <div>
 *       <div className="font-medium">Option 1</div>
 *       <div className="text-sm text-muted-foreground">Description</div>
 *     </div>
 *   </RadioGroupItem>
 * </RadioGroup>
 * ```
 */
declare const EnhancedRadioGroup: React.ForwardRefExoticComponent<Omit<EnhancedRadioGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
export interface EnhancedRadioGroupItemProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {
    /**
     * The content to display next to the radio button.
     *
     * **Important:** Pass children directly to RadioGroupItem. Do NOT wrap RadioGroupItem
     * in a separate Label component, as RadioGroupItem already provides the label wrapper.
     *
     * @example
     * ```tsx
     * // ✅ Correct usage
     * <RadioGroupItem value="option1">
     *   <div>
     *     <div className="font-medium">Option 1</div>
     *     <div className="text-sm text-muted-foreground">Description</div>
     *   </div>
     * </RadioGroupItem>
     *
     * // ❌ Incorrect usage - don't wrap in Label
     * <Label>
     *   <RadioGroupItem value="option1" />
     *   <span>Option 1</span>
     * </Label>
     * ```
     */
    children?: React.ReactNode;
    /**
     * Controls the spacing between the radio button and its content.
     * - `compact`: 8px gap (gap-2)
     * - `default`: 12px gap (gap-3) - default
     * - `comfortable`: 16px gap (gap-4)
     *
     * Only applies to the "animated" variant.
     *
     * @default "default"
     */
    spacing?: "compact" | "default" | "comfortable";
}
/**
 * Enhanced RadioGroupItem component with variant-specific rendering.
 *
 * This component automatically wraps the radio button in a label and handles
 * accessibility. Pass your content directly as children - do not wrap this
 * component in additional Label components.
 *
 * @example
 * ```tsx
 * <RadioGroup value={value} onValueChange={setValue}>
 *   <RadioGroupItem value="option1" spacing="compact">
 *     <div>
 *       <div className="font-medium">Option 1</div>
 *       <div className="text-sm text-muted-foreground">Description</div>
 *     </div>
 *   </RadioGroupItem>
 * </RadioGroup>
 * ```
 */
declare const EnhancedRadioGroupItem: React.ForwardRefExoticComponent<Omit<EnhancedRadioGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
export { EnhancedRadioGroup, EnhancedRadioGroup as RadioGroup, EnhancedRadioGroupItem, EnhancedRadioGroupItem as RadioGroupItem };
export type { EnhancedRadioGroupProps as RadioGroupProps, EnhancedRadioGroupItemProps as RadioGroupItemProps };
//# sourceMappingURL=enhanced-radio-group.d.ts.map