import { ReactNode, FC, ComponentType, ElementType, default as React } from 'react';
/**
 * Module slot props.
 */
export interface ModuleSlotProps {
    /** Slot name */
    name: string;
    /** Default content if slot is empty */
    children?: ReactNode;
    /** Fallback during lazy loading */
    fallback?: ReactNode;
    /** Whether slot is required */
    required?: boolean;
    /** Placeholder when slot is empty and not required */
    placeholder?: ReactNode;
    /** Wrapper element */
    as?: ElementType;
    /** Additional class name */
    className?: string;
    /** Additional styles */
    style?: React.CSSProperties;
    /** Data attributes */
    data?: Record<string, string>;
}
/**
 * Dynamic module slot props for loading external modules.
 */
export interface DynamicModuleSlotProps {
    /** Module ID to load */
    moduleId: string;
    /** Props to pass to loaded module */
    moduleProps?: Record<string, unknown>;
    /** Fallback during loading */
    fallback?: ReactNode;
    /** Error fallback */
    errorFallback?: ReactNode | ((error: Error) => ReactNode);
    /** Callback when module loads */
    onLoad?: () => void;
    /** Callback on load error */
    onError?: (error: Error) => void;
    /** Wrapper element */
    as?: ElementType;
    /** Additional class name */
    className?: string;
    /** Additional styles */
    style?: React.CSSProperties;
}
/**
 * Module outlet props for named outlets.
 */
export interface ModuleOutletProps {
    /** Outlet name */
    name: string;
    /** Default content */
    children?: ReactNode;
    /** Wrapper element */
    as?: ElementType;
    /** Additional class name */
    className?: string;
    /** Additional styles */
    style?: React.CSSProperties;
}
/**
 * Named slot within a module boundary for content projection.
 * Allows parent modules to inject content into child modules.
 *
 * @example
 * ```tsx
 * // In child module
 * <ModuleBoundary id="card" name="Card Module">
 *   <div className="card">
 *     <ModuleSlot name="header" as="header">
 *       Default Header
 *     </ModuleSlot>
 *     <ModuleSlot name="content" required>
 *       {children}
 *     </ModuleSlot>
 *     <ModuleSlot name="footer" as="footer" placeholder={<EmptyFooter />} />
 *   </div>
 * </ModuleBoundary>
 *
 * // In parent module
 * const context = useModuleContext();
 * context.setSlot('header', <CustomHeader />);
 * ```
 */
export declare const ModuleSlot: FC<ModuleSlotProps>;
/**
 * Dynamically loads and renders a module by ID.
 * Integrates with the module loader for code splitting.
 *
 * @example
 * ```tsx
 * <DynamicModuleSlot
 *   moduleId="dashboard-widget"
 *   moduleProps={{ userId: currentUser.id }}
 *   fallback={<WidgetSkeleton />}
 *   errorFallback={(error) => <WidgetError error={error} />}
 *   onLoad={() => analytics.track('widget_loaded')}
 * />
 * ```
 */
export declare const DynamicModuleSlot: FC<DynamicModuleSlotProps>;
/**
 * Props for LazyModuleSlot.
 */
export interface LazyModuleSlotProps {
    /** Lazy import function */
    loader: () => Promise<{
        default: ComponentType<unknown>;
    }>;
    /** Props to pass to loaded component */
    componentProps?: Record<string, unknown>;
    /** Fallback during loading */
    fallback?: ReactNode;
    /** Wrapper element */
    as?: ElementType;
    /** Additional class name */
    className?: string;
    /** Additional styles */
    style?: React.CSSProperties;
}
/**
 * Slot that lazily loads a component using React.lazy().
 *
 * @example
 * ```tsx
 * <LazyModuleSlot
 *   loader={() => import('./HeavyComponent')}
 *   fallback={<ComponentSkeleton />}
 *   componentProps={{ theme: 'dark' }}
 * />
 * ```
 */
export declare const LazyModuleSlot: FC<LazyModuleSlotProps>;
/**
 * Named outlet for rendering module content.
 * Similar to router outlets but for module composition.
 *
 * @example
 * ```tsx
 * // In layout
 * <div className="layout">
 *   <ModuleOutlet name="sidebar" />
 *   <main>
 *     <ModuleOutlet name="content">
 *       <DefaultContent />
 *     </ModuleOutlet>
 *   </main>
 * </div>
 * ```
 */
export declare const ModuleOutlet: FC<ModuleOutletProps>;
/**
 * Props for ConditionalModuleSlot.
 */
export interface ConditionalModuleSlotProps {
    /** Condition to check */
    when: boolean;
    /** Module ID to load when condition is true */
    moduleId: string;
    /** Props to pass to module */
    moduleProps?: Record<string, unknown>;
    /** Content to show when condition is false */
    otherwise?: ReactNode;
    /** Fallback during loading */
    fallback?: ReactNode;
}
/**
 * Conditionally loads and renders a module.
 *
 * @example
 * ```tsx
 * <ConditionalModuleSlot
 *   when={user.isPremium}
 *   moduleId="premium-features"
 *   moduleProps={{ user }}
 *   otherwise={<UpgradePrompt />}
 * />
 * ```
 */
export declare const ConditionalModuleSlot: FC<ConditionalModuleSlotProps>;
/**
 * Props for ModulePortalSlot.
 */
export interface ModulePortalSlotProps {
    /** Portal target element ID */
    target: string;
    /** Content to render in portal */
    children: ReactNode;
    /**
     * Whether to render children inline as fallback when portal cannot be created.
     * This prevents blank pages when React environment issues occur.
     * @default true
     */
    fallbackToInline?: boolean;
    /**
     * Custom fallback content to render when portal fails.
     */
    fallback?: ReactNode;
}
/**
 * Renders content into a portal target outside the module boundary.
 * Includes fallback rendering to prevent blank pages when React
 * environment issues occur (e.g., multiple React instances).
 *
 * @example
 * ```tsx
 * // In module
 * <ModulePortalSlot target="modal-root">
 *   <Modal>
 *     <ModalContent />
 *   </Modal>
 * </ModulePortalSlot>
 *
 * // In document
 * <div id="modal-root"></div>
 * ```
 */
export declare const ModulePortalSlot: FC<ModulePortalSlotProps>;