import { ReactNode, ReactElement, ForwardedRef } from 'react';
import { RadioGroup as BaseRadioGroupNamespace } from '@base-ui/react/radio-group';
/**
 * Event details passed as the second argument to `onValueChange`. Carries the
 * native event and interaction metadata. Re-exported from Base UI.
 */
export type RadioGroupChangeEventDetails = BaseRadioGroupNamespace.ChangeEventDetails;
/** Radio variant definitions mapping variant names to their Tailwind classes. */
export declare const KUMO_RADIO_VARIANTS: {
    readonly variant: {
        readonly default: {
            readonly classes: "ring-kumo-hairline";
            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-hairline 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>
 * ```
 *
 * @example
 * // Typed values — pass a type parameter to constrain `value`
 * ```tsx
 * <Radio.Group<number> legend="Items per page" defaultValue={10}>
 *   <Radio.Item<number> label="10" value={10} />
 *   <Radio.Item<number> label="25" value={25} />
 * </Radio.Group>
 * ```
 */
/**
 * Props for Radio.Legend — a composable sub-component for labeling a Radio.Group.
 *
 * Place as a direct child of `<Radio.Group>` to provide a styled, accessible legend.
 * Accepts `className` for full styling control (e.g. `className="sr-only"` to visually hide).
 *
 * @example
 * ```tsx
 * <Radio.Group>
 *   <Radio.Legend className="sr-only">Paths</Radio.Legend>
 *   <Radio.Item label="Allow all paths" value="all" />
 * </Radio.Group>
 * ```
 */
export interface RadioLegendProps {
    /** Legend content */
    children: ReactNode;
    /** Additional CSS classes (e.g. "sr-only" to visually hide the legend) */
    className?: string;
}
/**
 * Radio.Group component props.
 *
 * Parameterised by the radio value type `Value` (defaults to `string`). Pass a
 * type argument — e.g. `<Radio.Group<number>>` — to type `value`,
 * `defaultValue`, and the value passed to `onValueChange`.
 *
 * Note: the generic only types the group-level value props. It does **not**
 * guarantee that the `value` of each `Radio.Item` child conforms to `Value`,
 * since children are passed as `ReactNode` and are not cross-checked at compile
 * time. Annotate items (`<Radio.Item<number>>`) for matching inference.
 */
export interface RadioGroupProps<Value = string> {
    /**
     * Legend text for the group (required for accessibility).
     * For more control over legend styling, omit this prop and use `<Radio.Legend>` as a child instead.
     */
    legend?: string;
    /** Child Radio.Item components (and optionally a Radio.Legend) */
    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?: Value;
    /** Value of the radio that should be selected (controlled) */
    value?: Value;
    /**
     * Event handler called when the radio value changes. The second argument
     * carries native event details about the interaction.
     */
    onValueChange?: (value: Value, eventDetails: RadioGroupChangeEventDetails) => void;
    /** Whether all radios in the group are disabled */
    disabled?: boolean;
    /** Position of radio control relative to label: "start" puts radio before label, "end" puts label before radio. Defaults to "start" for default appearance and "end" for card appearance. */
    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 />
 * ```
 */
/**
 * Radio.Item component props.
 *
 * Parameterised by the radio value type `Value` (defaults to `string`). Pass a
 * type argument — e.g. `<Radio.Item<number>>` — to type `value` to match the
 * enclosing `Radio.Group`'s value type.
 */
export type RadioItemProps<Value = string> = {
    /** 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 content displayed next to radio (required). Accepts strings or React nodes for rich content. */
    label: ReactNode;
    /** Description text displayed below the label (only visible in card appearance) */
    description?: ReactNode;
    /** Value of the radio (required) */
    value: Value;
    /** Additional CSS classes for the label wrapper */
    className?: string;
    /** Whether the radio is disabled */
    disabled?: boolean;
};
declare function RadioLegend({ children, className }: RadioLegendProps): import("react/jsx-runtime").JSX.Element;
declare namespace RadioLegend {
    var displayName: string;
}
declare function RadioGroup<Value = string>({ legend, children, orientation, appearance, error, description, defaultValue, value, onValueChange, disabled, controlPosition, name, className, }: RadioGroupProps<Value>): 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), `Radio.Item`, and `Radio.Legend`.
 * Built on `@base-ui/react/radio-group` + `@base-ui/react/radio`.
 *
 * @example
 * ```tsx
 * // Simple: legend as a string prop
 * <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>
 *
 * // Composable: Radio.Legend for full styling control (e.g. visually hidden)
 * <Radio.Group defaultValue="email">
 *   <Radio.Legend className="sr-only">Notification preference</Radio.Legend>
 *   <Radio.Item label="Email" value="email" />
 *   <Radio.Item label="SMS" value="sms" />
 * </Radio.Group>
 * ```
 */
export declare const Radio: typeof RadioGroup & {
    Item: <T = string>(props: RadioItemProps<T> & {
        ref?: ForwardedRef<HTMLButtonElement>;
    }) => ReactElement;
    Group: typeof RadioGroup;
    Legend: typeof RadioLegend;
};
//# sourceMappingURL=radio.d.ts.map