import React from 'react';

interface PortalProps extends React.ComponentPropsWithoutRef<'div'> {
    /** Portal children, for example, custom modal or popover */
    children: React.ReactNode;
    /** Element inside which portal should be created, by default a new div element is created and appended to the `document.body` */
    target?: HTMLElement | string;
}
/**
 * Portal Component
 *
 * Renders children into a different part of the DOM tree (portal).
 * By default renders to document.body, but can target any element.
 *
 * @example
 * // Basic portal
 * import { Portal } from '@paalstack/react-ui';
 *
 * <Portal>
 *   <div>Content rendered in body</div>
 * </Portal>
 *
 * @example
 * // Modal overlay
 * <Portal>
 *   <div className="fixed inset-0 bg-black/50 z-50">
 *     <div className="bg-white p-6 rounded-lg">
 *       Modal content
 *     </div>
 *   </div>
 * </Portal>
 *
 * @example
 * // Target specific element
 * <Portal target="#modal-root">
 *   <div>Rendered in #modal-root</div>
 * </Portal>
 *
 * @example
 * // Target DOM element
 * const container = document.getElementById('portal-container');
 * <Portal target={container}>
 *   <div>Content</div>
 * </Portal>
 *
 * @example
 * // Tooltip
 * <Portal>
 *   <div className="fixed top-0 left-0 z-50">
 *     Tooltip content
 *   </div>
 * </Portal>
 *
 * @example
 * // Notification
 * <Portal>
 *   <div className="fixed top-4 right-4 z-50">
 *     <div className="bg-green-500 text-white p-4 rounded">
 *       Success notification
 *     </div>
 *   </div>
 * </Portal>
 *
 * @tip Default target is document.body
 * @tip Use target prop to render elsewhere
 * @tip Ideal for modals, tooltips, and overlays
 * @tip Automatically cleans up on unmount
 * @tip SSR-safe with useIsomorphicEffect
 */
declare const Portal: React.ForwardRefExoticComponent<PortalProps & React.RefAttributes<HTMLDivElement>>;

export { Portal, type PortalProps };
