import { ReactNode } from 'react';
/** Radio variant definitions mapping variant names to their Tailwind classes. */
export declare const KUMO_RADIO_VARIANTS: {
    readonly variant: {
        readonly default: {
            readonly classes: "ring-kumo-line";
            readonly description: "Default radio appearance";
        };
        readonly error: {
            readonly classes: "ring-kumo-danger";
            readonly description: "Error state for validation failures";
        };
    };
    readonly appearance: {
        readonly default: {
            readonly classes: "";
            readonly description: "Standard inline radio item";
        };
        readonly card: {
            readonly classes: "rounded-lg border border-kumo-ring bg-kumo-base p-3 transition-colors hover:bg-kumo-tint has-[[data-checked]]:border-kumo-interact has-[[data-checked]]:bg-kumo-tint";
            readonly description: "Choice card appearance with border, padding, and highlighted selection state";
        };
    };
};
export declare const KUMO_RADIO_DEFAULT_VARIANTS: {
    readonly variant: "default";
    readonly appearance: "default";
};
export type KumoRadioVariant = keyof typeof KUMO_RADIO_VARIANTS.variant;
export type KumoRadioAppearance = keyof typeof KUMO_RADIO_VARIANTS.appearance;
export interface KumoRadioVariantsProps {
    /**
     * Visual variant.
     * - `"default"` — Standard radio appearance
     * - `"error"` — Error state for validation failures
     * @default "default"
     */
    variant?: KumoRadioVariant;
    /**
     * Visual appearance.
     * - `"default"` — Standard inline radio item
     * - `"card"` — Choice card with border, padding, and highlighted selection state
     * @default "default"
     */
    appearance?: KumoRadioAppearance;
}
export declare function radioVariants({ variant, appearance, }?: KumoRadioVariantsProps): string;
export type RadioVariant = KumoRadioVariant;
/** Position of the radio control relative to its label */
export type RadioControlPosition = "start" | "end";
/**
 * Radio group component props (with built-in Fieldset and RadioGroup)
 *
 * @example
 * // Basic usage
 * ```tsx
 * <Radio.Group legend="Notification preference" defaultValue="email">
 *   <Radio.Item label="Email" value="email" />
 *   <Radio.Item label="SMS" value="sms" />
 *   <Radio.Item label="Push" value="push" />
 * </Radio.Group>
 * ```
 *
 * @example
 * // Horizontal layout
 * ```tsx
 * <Radio.Group legend="Size" orientation="horizontal" defaultValue="md">
 *   <Radio.Item label="Small" value="sm" />
 *   <Radio.Item label="Medium" value="md" />
 *   <Radio.Item label="Large" value="lg" />
 * </Radio.Group>
 * ```
 *
 * @example
 * // With error and description
 * ```tsx
 * <Radio.Group
 *   legend="Payment method"
 *   error="Please select a payment method"
 *   description="Choose how you'd like to pay"
 * >
 *   <Radio.Item label="Credit Card" value="card" />
 *   <Radio.Item label="PayPal" value="paypal" />
 * </Radio.Group>
 * ```
 *
 * @example
 * // Controlled
 * ```tsx
 * const [value, setValue] = useState("email");
 * <Radio.Group legend="Contact" value={value} onValueChange={setValue}>
 *   <Radio.Item label="Email" value="email" />
 *   <Radio.Item label="Phone" value="phone" />
 * </Radio.Group>
 * ```
 *
 * @example
 * // Label before radio (controlPosition="end")
 * ```tsx
 * <Radio.Group legend="Options" controlPosition="end" defaultValue="a">
 *   <Radio.Item label="Option A" value="a" />
 *   <Radio.Item label="Option B" value="b" />
 * </Radio.Group>
 * ```
 */
export interface RadioGroupProps {
    /** Legend text for the group (required for accessibility) */
    legend: string;
    /** Child Radio.Item components */
    children: ReactNode;
    /** Layout direction of the radio items */
    orientation?: "vertical" | "horizontal";
    /**
     * Visual appearance applied to all Radio.Item children.
     * - `"default"` — Standard inline radio items
     * - `"card"` — Choice card with border, padding, and highlighted selection state
     *
     * Individual items can override this with their own `appearance` prop.
     * @default "default"
     */
    appearance?: KumoRadioAppearance;
    /** Error message for the group */
    error?: string;
    /** Helper text for the group */
    description?: ReactNode;
    /** Value of the radio that should be initially selected (uncontrolled) */
    defaultValue?: string;
    /** Value of the radio that should be selected (controlled) */
    value?: string;
    /** Event handler called when radio value changes */
    onValueChange?: (value: string) => void;
    /** Whether all radios in the group are disabled */
    disabled?: boolean;
    /** Position of radio control relative to label: "start" (default) puts radio before label, "end" puts label before radio. Note: In card appearance, the control is always positioned at the end. */
    controlPosition?: RadioControlPosition;
    /** Form submission name for the radio group */
    name?: string;
    /** Additional CSS classes */
    className?: string;
}
/**
 * Individual radio item within a group
 *
 * @example
 * ```tsx
 * <Radio.Item label="Option A" value="a" />
 * ```
 *
 * @example
 * // Disabled item
 * ```tsx
 * <Radio.Item label="Unavailable" value="unavailable" disabled />
 * ```
 */
export type RadioItemProps = {
    /** Visual variant: "default" or "error" for validation failures */
    variant?: RadioVariant;
    /**
     * Visual appearance of the radio item.
     * - `"default"` — Standard inline radio item
     * - `"card"` — Choice card with border, padding, and highlighted selection state
     *
     * When set on an individual item, overrides the group-level `appearance`.
     * @default "default"
     */
    appearance?: KumoRadioAppearance;
    /** Label text displayed next to radio (required) */
    label: string;
    /** Description text displayed below the label (only visible in card appearance) */
    description?: ReactNode;
    /** Value of the radio (required) */
    value: string;
    /** Additional CSS classes for the label wrapper */
    className?: string;
    /** Whether the radio is disabled */
    disabled?: boolean;
};
declare function RadioGroup({ legend, children, orientation, appearance, error, description, defaultValue, value, onValueChange, disabled, controlPosition, name, className, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
declare namespace RadioGroup {
    var displayName: string;
}
export { RadioGroup };
/**
 * Radio — radio button group for single-select choices.
 *
 * Compound component: `Radio.Group` (with built-in Fieldset) and `Radio.Item`.
 * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.
 *
 * @example
 * ```tsx
 * <Radio.Group legend="Notification preference" defaultValue="email">
 *   <Radio.Item label="Email" value="email" />
 *   <Radio.Item label="SMS" value="sms" />
 *   <Radio.Item label="Push" value="push" />
 * </Radio.Group>
 * ```
 */
export declare const Radio: typeof RadioGroup & {
    Item: import('react').ForwardRefExoticComponent<RadioItemProps & import('react').RefAttributes<HTMLButtonElement>>;
    Group: typeof RadioGroup;
};
//# sourceMappingURL=radio.d.ts.map