import type { BootstrapProviderHandle } from './type.js';
/**
 * Provider component that bootstraps the promise-modal system.
 *
 * Sets up the modal rendering infrastructure by creating a portal anchor point
 * and managing the lifecycle of modal components. Can be initialized automatically
 * on mount or manually via ref handle.
 *
 * @example
 * Basic usage with automatic initialization:
 * ```tsx
 * import { ModalProvider, alert, confirm } from '@lerx/promise-modal';
 *
 * function App() {
 *   return (
 *     <ModalProvider>
 *       <button onClick={() => alert({ title: 'Hello!' })}>Alert</button>
 *       <button onClick={() => confirm({ title: 'Confirm?' })}>Confirm</button>
 *     </ModalProvider>
 *   );
 * }
 * ```
 *
 * @example
 * Custom modal components:
 * ```tsx
 * const CustomForeground = ({ children, visible }) => (
 *   <div className={`modal ${visible ? 'show' : 'hide'}`}>
 *     {children}
 *   </div>
 * );
 *
 * const CustomTitle = ({ children }) => (
 *   <h2 className="modal-title">{children}</h2>
 * );
 *
 * <ModalProvider
 *   ForegroundComponent={CustomForeground}
 *   TitleComponent={CustomTitle}
 *   options={{
 *     duration: 300,
 *     backdrop: 'rgba(0, 0, 0, 0.5)',
 *     closeOnBackdropClick: false,
 *   }}
 * >
 *   <App />
 * </ModalProvider>
 * ```
 *
 * @example
 * Manual initialization with custom anchor:
 * ```tsx
 * function CustomModalContainer() {
 *   const modalRef = useRef<ModalProviderHandle>(null);
 *   const containerRef = useRef<HTMLDivElement>(null);
 *
 *   useEffect(() => {
 *     if (containerRef.current) {
 *       modalRef.current?.initialize(containerRef.current);
 *     }
 *   }, []);
 *
 *   return (
 *     <ModalProvider ref={modalRef}>
 *       <div className="app-layout">
 *         <main>Main Content</main>
 *         <div ref={containerRef} className="modal-container" />
 *       </div>
 *     </ModalProvider>
 *   );
 * }
 * ```
 *
 * @example
 * With routing integration:
 * ```tsx
 * import { useLocation } from 'react-router-dom';
 *
 * function useRouterPathname() {
 *   const location = useLocation();
 *   return { pathname: location.pathname };
 * }
 *
 * <ModalProvider usePathname={useRouterPathname}>
 *   <RouterApp />
 * </ModalProvider>
 * ```
 *
 * @example
 * Sharing context with modals:
 * ```tsx
 * const ThemeContext = createContext({ theme: 'light' });
 *
 * function ThemedModal() {
 *   const { theme } = useContext(ThemeContext);
 *   return <div className={`modal-${theme}`}>...</div>;
 * }
 *
 * <ModalProvider
 *   context={{ userId: currentUser.id }}
 *   ContentComponent={({ children, context }) => (
 *     <ThemeContext.Provider value={{ theme: context.theme }}>
 *       {children}
 *     </ThemeContext.Provider>
 *   )}
 * >
 *   <App />
 * </ModalProvider>
 * ```
 *
 * @remarks
 * - Without a ref, the provider initializes automatically on mount
 * - With a ref, you must call `initialize()` manually with target element
 * - All modals created within this provider share the same configuration
 * - The provider creates a portal for rendering modals outside the React tree
 */
export declare const BootstrapProvider: import("react").NamedExoticComponent<{
    usePathname?: import("../../@aileron/declare").Fn<[], {
        pathname: string;
    }>;
    context?: import("../../@aileron/declare").Dictionary;
    root?: HTMLElement | null;
} & import("../../providers/ConfigurationContext").ConfigurationContextProviderProps & {
    children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<BootstrapProviderHandle>>;