import { AsChildChildren } from '@wix/headless-utils/react';
import { PlanPaywallServiceConfig } from '../services/index.js';
import { PaywallData } from './core/PlanPaywall.js';
interface RootProps {
    children: React.ReactNode;
    planPaywallServiceConfig: PlanPaywallServiceConfig;
}
/**
 * Root component that provides plan paywall context to child components
 *
 * @component
 * @example
 * ```tsx
 * <PlanPaywall.Root planPaywallServiceConfig={{ requiredPlanIds: ['planId'] }}>
 *   <PlanPaywall.Paywall>
 *     <PlanPaywall.RestrictedContent>
 *       <div>Paywalled content</div>
 *     </PlanPaywall.RestrictedContent>
 *     <PlanPaywall.Fallback>
 *       <div>You need to buy a plan to access this content</div>
 *     </PlanPaywall.Fallback>
 *     <PlanPaywall.ErrorComponent>
 *       <div>There was an error checking member access</div>
 *    </PlanPaywall.ErrorComponent>
 *   </PlanPaywall.Paywall>
 * </PlanPaywall.Root>
 *
 * ```
 */
export declare const Root: ({ children, planPaywallServiceConfig }: RootProps) => import("react/jsx-runtime").JSX.Element;
export type PlanPaywallData = PaywallData;
interface PaywallProps {
    asChild?: boolean;
    children: AsChildChildren<PlanPaywallData> | React.ReactNode;
    loadingState?: React.ReactNode;
}
/**
 * Container for controlling access to the paywalled content.
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PlanPaywall.Paywall loadingState={<div>Loading...</div>}>
 *   <PlanPaywall.RestrictedContent>
 *     <div>Paywalled content</div>
 *   </PlanPaywall.RestrictedContent>
 * </PlanPaywall.Paywall>
 *
 * // With asChild
 * <PlanPaywall.Paywall asChild>
 *   {React.forwardRef(({isLoading, error, hasAccess}, ref) => {
 *     if (isLoading) {
 *       return loadingState;
 *     }
 *
 *     if (error) {
 *       return <div>Error!</div>;
 *     }
 *
 *     if (hasAccess) {
 *       return <div>Paywalled content</div>;
 *     }
 *
 *     return <div>You need to buy a plan to access this content</div>;
 *   })}
 * </PlanPaywall.Paywall>
 * ```
 */
export declare const Paywall: ({ asChild, children, loadingState }: PaywallProps) => import("react/jsx-runtime").JSX.Element;
interface RestrictedContentProps {
    children: React.ReactNode;
}
/**
 * Component that displays the restricted content if the member has access to the required plans.
 *
 * @component
 * @example
 * ```tsx
 * <PlanPaywall.RestrictedContent>
 *   <div>Paywalled content</div>
 * </PlanPaywall.RestrictedContent>
 * ```
 */
export declare const RestrictedContent: ({ children }: RestrictedContentProps) => import("react/jsx-runtime").JSX.Element;
interface FallbackProps {
    children: React.ReactNode;
}
/**
 * Component that displays the fallback content if the member does not have access to the required plans.
 *
 * @component
 * @example
 * ```tsx
 * <PlanPaywall.Fallback>
 *   <div>Fallback content</div>
 * </PlanPaywall.Fallback>
 * ```
 */
export declare const Fallback: ({ children }: FallbackProps) => import("react/jsx-runtime").JSX.Element;
interface ErrorComponentProps {
    asChild?: boolean;
    children: AsChildChildren<{
        error: string;
    }> | React.ReactNode;
    className?: string;
}
/**
 * Component that displays the error content if there is an error checking member access
 *
 * @component
 * @example
 * ```tsx
 * // Default usage
 * <PlanPaywall.ErrorComponent />
 *
 * // asChild
 * <PlanPaywall.ErrorComponent asChild>
 *   <div>There was an error checking member access</div>
 * </PlanPaywall.ErrorComponent>
 *
 * // asChild with react component
 * <PlanPaywall.ErrorComponent asChild>
 *   {React.forwardRef(({error, ...props}, ref) => (
 *     <div ref={ref} {...props} className="text-red-600">
 *       Error: {error}
 *     </div>
 *   ))}
 * </PlanPaywall.ErrorComponent>
 * ```
 */
export declare const ErrorComponent: ({ asChild, children, className, }: ErrorComponentProps) => import("react/jsx-runtime").JSX.Element;
export {};