import React from 'react';
export { WixMediaImage } from '@wix/headless-media/react';
import { AsChildChildren } from '@wix/headless-utils/react';
import { PlanServiceConfig } from '../services/index.js';
import { PlanData, NameData, DescriptionData, AdditionalFeesData, AdditionalFeeNameData, RecurrenceData, DurationData, PerksData, PerkItemData, FreeTrialDaysData } from './core/Plan.js';
import { WixMediaImage } from '@wix/headless-media/react';
import { Commerce } from '@wix/headless-ecom/react';
import { MoneyProps } from '@wix/headless-components/react';
interface RootProps {
    planServiceConfig: PlanServiceConfig;
    children: React.ReactNode;
}
/**
 * The root container that provides plan context to child components
 *
 * @component
 * @example
 * ```tsx
 * <Plan.Root planServiceConfig={planServiceConfig}>
 *   <Plan.Plan>
 *     <Plan.Image />
 *     <Plan.Name />
 *     <Plan.Price />
 *     <Plan.AdditionalFees />
 *     <Plan.Recurrence />
 *     <Plan.Duration />
 *     <Plan.Action.BuyNow label="Select Plan" />
 *   </Plan.Plan>
 * </Plan.Root>
 * ```
 */
export declare const Root: ({ planServiceConfig, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
interface PlanProps {
    asChild?: boolean;
    children: AsChildChildren<PlanData> | React.ReactNode;
    className?: string;
    loadingState?: React.ReactNode;
}
/**
 * Displays the plan data with support for loading state
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.Plan className="flex flex-col gap-4" loadingState={<div>Loading...</div>}>
 *   <Plan.Image />
 *   <Plan.Name />
 * </Plan.Plan>
 *
 * // With asChild
 * <Plan.Plan asChild>
 *   {React.forwardRef(({isLoading, error, plan}, ref) => {
 *     if (isLoading) {
 *       return <div>Loading...</div>;
 *     }
 *     if (error) {
 *       return <div>Error!</div>;
 *     }
 *     return (
 *       <div ref={ref} className="flex flex-col gap-4">
 *         Plan {plan.name}
 *       </div>
 *     );
 *   })}
 * </Plan.Plan>
 *
 */
export declare const Plan: React.ForwardRefExoticComponent<PlanProps & React.RefAttributes<HTMLElement>>;
type ImageProps = Omit<React.ComponentProps<typeof WixMediaImage>, 'src' | 'media'>;
/**
 * Displays the plan image using WixMediaImage
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.Image className="w-full h-full object-cover" />
 *
 * // asChild with primitive
 * <Plan.Image asChild>
 *   <img className="w-full h-full object-cover" />
 * </Plan.Image>
 *
 * // asChild with react component
 * <Plan.Image asChild>
 *   {React.forwardRef(({src, ...props}, ref) => (
 *     <img ref={ref} {...props} src={src} className="w-full h-full object-cover" />
 *   ))}
 * </Plan.Image>
 * ```
 */
export declare const Image: React.ForwardRefExoticComponent<Omit<ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
export type PlanNameData = NameData;
interface NameProps {
    asChild?: boolean;
    children?: AsChildChildren<PlanNameData>;
    className?: string;
}
/**
 * Displays the plan name.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.Name className="text-2xl font-bold" />
 *
 * // asChild with primitive
 * <Plan.Name asChild>
 *   <h1 className="text-2xl font-bold" />
 * </Plan.Name>
 *
 * // asChild with react component
 * <Plan.Name asChild>
 *   {React.forwardRef(({name, ...props}, ref) => (
 *     <h1 ref={ref} {...props} className="text-2xl font-bold">
 *       {name}
 *     </h1>
 *   ))}
 * </Plan.Name>
 * ```
 */
export declare const Name: React.ForwardRefExoticComponent<NameProps & React.RefAttributes<HTMLElement>>;
export type PlanDescriptionData = DescriptionData;
interface DescriptionProps {
    asChild?: boolean;
    children?: AsChildChildren<PlanDescriptionData>;
    className?: string;
}
/**
 * Displays the plan description.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.Description className="text-sm" />
 *
 * // asChild with primitive
 * <Plan.Description asChild>
 *   <p className="text-sm" />
 * </Plan.Description>
 *
 * // asChild with react component
 * <Plan.Description asChild>
 *   {React.forwardRef(({description, ...props}, ref) => (
 *     <p ref={ref} {...props} className="text-sm">
 *       {description}
 *     </p>
 *   ))}
 * </Plan.Description>
 * ```
 */
export declare const Description: React.ForwardRefExoticComponent<DescriptionProps & React.RefAttributes<HTMLElement>>;
export type PlanPriceData = {
    amount: number;
    currency: string;
    formattedMoney: string;
    formattedMoneyParts: Intl.NumberFormatPart[];
};
interface PriceProps {
    asChild?: boolean;
    children?: MoneyProps['children'];
    className?: string;
}
/**
 * Displays the plan price.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.Price className="text-2xl font-bold" />
 *
 * // asChild with primitive
 * <Plan.Price asChild>
 *   <span className="text-2xl font-bold" />
 * </Plan.Price>
 *
 * // asChild with react component
 * <Plan.Price asChild>
 *   {React.forwardRef(({amount, currency, formattedMoney, formattedMoneyParts, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-2xl font-bold">
 *       {price.formattedMoney}
 *       <br />
 *       <br />
 *       {amount} {currency}
 *     </span>
 *   ))}
 * </Plan.Price>
 * ```
 */
export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLElement>>;
export type PlanAdditionalFeesData = AdditionalFeesData;
interface AdditionalFeesProps {
    asChild?: boolean;
    children: AsChildChildren<PlanAdditionalFeesData>;
    className?: string;
}
/**
 * Container for plan additional fees.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.AdditionalFees className="flex flex-col gap-2">
 *   <Plan.AdditionalFeesRepeater>
 *     <Plan.AdditionalFeeName />
 *     <Plan.AdditionalFeeAmount />
 *   </Plan.AdditionalFeesRepeater>
 * </Plan.AdditionalFees>
 *
 * // asChild with react component
 * <Plan.AdditionalFees asChild>
 *   {React.forwardRef(({additionalFees, ...props}, ref) => (
 *     <div ref={ref} {...props} className="fees-container">
 *       {additionalFees.length > 0 && 'Additional fees apply'}
 *     </div>
 *   ))}
 * </Plan.AdditionalFees>
 * ```
 */
export declare const AdditionalFees: React.ForwardRefExoticComponent<AdditionalFeesProps & React.RefAttributes<HTMLElement>>;
interface AdditionalFeesRepeaterProps {
    children: React.ReactNode;
}
/**
 * Repeater component that renders children for each additional fee with the additional fee context.
 *
 * @component
 * @example
 * ```tsx
 * <Plan.AdditionalFeesRepeater>
 *   <Plan.AdditionalFeeName />
 *   <Plan.AdditionalFeeAmount />
 * </Plan.AdditionalFeesRepeater>
 * ```
 */
export declare const AdditionalFeesRepeater: ({ children, }: AdditionalFeesRepeaterProps) => import("react/jsx-runtime").JSX.Element;
export type PlanAdditionalFeeNameData = AdditionalFeeNameData;
interface AdditionalFeeNameProps {
    asChild?: boolean;
    children?: AsChildChildren<PlanAdditionalFeeNameData>;
    className?: string;
}
/**
 * Displays the additional fee name. Must be used within an AdditionalFeesRepeater.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.AdditionalFeeName className="text-sm" />
 *
 * // asChild with primitive
 * <Plan.AdditionalFeeName asChild>
 *   <span className="text-sm" />
 * </Plan.AdditionalFeeName>
 *
 * // asChild with react component
 * <Plan.AdditionalFeeName asChild>
 *   {React.forwardRef(({name, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-sm">
 *       {name}
 *     </span>
 *   ))}
 * </Plan.AdditionalFeeName>
 * ```
 */
export declare const AdditionalFeeName: React.ForwardRefExoticComponent<AdditionalFeeNameProps & React.RefAttributes<HTMLElement>>;
export type PlanAdditionalFeeAmountData = {
    amount: number;
    currency: string;
    formattedMoney: string;
    formattedMoneyParts: Intl.NumberFormatPart[];
};
interface AdditionalFeeAmountProps {
    asChild?: boolean;
    children?: MoneyProps['children'];
    className?: string;
}
/**
 * Displays the additional fee amount. Must be used within an AdditionalFeesRepeater.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.AdditionalFeeAmount className="text-sm" />
 *
 * // asChild with primitive
 * <Plan.AdditionalFeeAmount asChild>
 *   <span className="text-sm" />
 * </Plan.AdditionalFeeAmount>
 *
 * // asChild with react component
 * <Plan.AdditionalFeeAmount asChild>
 *   {React.forwardRef(({amount, currency, formattedMoney, formattedMoneyParts, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-sm">
 *       {amount} {currency}
 *       <br />
 *       <br />
 *       {formattedFee}
 *     </span>
 *   ))}
 * </Plan.AdditionalFeeAmount>
 * ```
 */
export declare const AdditionalFeeAmount: React.ForwardRefExoticComponent<AdditionalFeeAmountProps & React.RefAttributes<HTMLElement>>;
export type PlanRecurrenceData = RecurrenceData;
interface RecurrenceProps {
    children: React.ForwardRefExoticComponent<PlanRecurrenceData>;
}
/**
 * Provides the child component with the recurrence data. It will be null for one-time plans.
 *
 * @component
 * @example
 * ```tsx
 * <Plan.Recurrence>
 *   {React.forwardRef(({ recurrence }, ref) => {
 *     if (!recurrence) return null;
 *
 *     return <span ref={ref} className="text-content-secondary" data-testid="plan-recurrence">
 *       Renews every {recurrence.count} {recurrence.period}(s)
 *     </span>
 *   })}
 * </Plan.Recurrence>
 * ```
 */
export declare const Recurrence: React.ForwardRefExoticComponent<RecurrenceProps & React.RefAttributes<HTMLElement>>;
export type PlanDurationData = DurationData;
interface DurationProps {
    children: React.ForwardRefExoticComponent<PlanDurationData>;
}
/**
 * Provides the child component with the duration data. It will be null for unlimited plans.
 *
 * @component
 * @example
 * ```tsx
 * <Plan.Duration>
 *   {React.forwardRef(({ duration }, ref) => {
 *     if (!duration) return <span>Valid until canceled</span>;
 *
 *     return <span ref={ref} className="text-sm" data-testid="plan-duration">
 *       Valid for {duration.count} {duration.period}(s)
 *     </span>
 *   })}
 * </Plan.Duration>
 * ```
 */
export declare const Duration: React.ForwardRefExoticComponent<DurationProps & React.RefAttributes<HTMLElement>>;
export type PlanFreeTrialDaysData = FreeTrialDaysData;
interface FreeTrialDaysProps {
    children: React.ForwardRefExoticComponent<PlanFreeTrialDaysData>;
}
/**
 * Displays the free trial days.
 *
 * @component
 * @example
 * ```tsx
 * <Plan.FreeTrialDays>
 *   {React.forwardRef(({ freeTrialDays }, ref) => {
 *     return <span ref={ref} className="text-sm" data-testid="plan-free-trial-days">
 *       Free trial for {freeTrialDays} days
 *     </span>
 *   })}
 * </Plan.FreeTrialDays>
 * ```
 */
export declare const FreeTrialDays: React.ForwardRefExoticComponent<FreeTrialDaysProps & React.RefAttributes<HTMLElement>>;
export type PlanPerksData = PerksData;
interface PerksProps {
    asChild?: boolean;
    children: AsChildChildren<PlanPerksData>;
    className?: string;
}
/**
 * Container for plan perks.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.Perks className="flex flex-col gap-2">
 *   <Plan.PerksRepeater>
 *     <Plan.PerkItem className="text-sm" />
 *   </Plan.PerksRepeater>
 * </Plan.Perks>
 *
 * // asChild with react component
 * <Plan.Perks asChild>
 *   {React.forwardRef(({perks, ...props}, ref) => (
 *     <div ref={ref} {...props} className="flex flex-col gap-2">
 *       {perks.map((perk) => <span key={perk}> 🎉 {perk}</span>)}
 *     </div>
 *   ))}
 * </Plan.Perks>
 * ```
 */
export declare const Perks: React.ForwardRefExoticComponent<PerksProps & React.RefAttributes<HTMLElement>>;
interface PerksRepeaterProps {
    children: React.ReactNode;
}
/**
 * Repeater component that renders children for each perk with the perk item context.
 *
 * @component
 * @example
 * ```tsx
 * <Plan.PerksRepeater>
 *   <Plan.PerkItem className="text-sm" />
 * </Plan.PerksRepeater>
 * ```
 */
export declare const PerksRepeater: ({ children }: PerksRepeaterProps) => import("react/jsx-runtime").JSX.Element;
export type PlanPerkItemData = PerkItemData;
interface PerkItemProps {
    asChild?: boolean;
    children?: AsChildChildren<PlanPerkItemData>;
    className?: string;
}
/**
 * Displays the perk item. Must be used within a PerksRepeater.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <Plan.PerkItem className="text-sm" />
 *
 * // asChild with primitive
 * <Plan.PerkItem asChild>
 *   <span className="text-sm" />
 * </Plan.PerkItem>
 *
 * // asChild with react component
 * <Plan.PerkItem asChild>
 *   {React.forwardRef(({perk, ...props}, ref) => (
 *     <span ref={ref} {...props} className="text-sm">
 *       {perk}
 *     </span>
 *   ))}
 * </Plan.PerkItem>
 * ```
 */
export declare const PerkItem: React.ForwardRefExoticComponent<PerkItemProps & React.RefAttributes<HTMLElement>>;
type ActionBuyNowProps = Omit<Commerce.ActionAddToCartProps, 'lineItems'>;
export declare const Action: {
    BuyNow: React.ForwardRefExoticComponent<ActionBuyNowProps & React.RefAttributes<HTMLButtonElement>>;
};