import { ReactNode } from 'react';
export type PlanOption = {
    id: string;
    name: string;
    /** Pre-formatted price, rendered as-is (e.g. "$135/mo"). */
    price: ReactNode;
    /** Black pill badge (e.g. "Save $90"). */
    saveBadge?: string;
    disabled?: boolean;
};
export type PlanSelectorGroupProps = {
    /** Decorative section label, e.g. "Switch & Save". */
    label?: string;
    plans: PlanOption[];
    /** Selected plan id (controlled). */
    value?: string;
    onChange?: (id: string) => void;
    /**
     * Multi-option layout. 'horizontal' (default) lays options side-by-side, stacking only on a
     * narrow viewport. 'vertical' always stacks full-width rows — use in narrow containers (e.g. a
     * checkout drawer) or with many cadence options. No effect on a single locked-in plan.
     */
    orientation?: 'horizontal' | 'vertical';
};
export declare const PlanSelectorGroup: ({ label, plans, value, onChange, orientation, }: PlanSelectorGroupProps) => import("react").JSX.Element | null;