import type { SidebarSafeAreaProps } from "./Sidebar.types";
/**
 * Componente de área segura del Sidebar
 *
 * @description
 * Área reservada en la parte superior o inferior del sidebar para
 * contenido especial como logos, usuario, configuración, etc.
 *
 * Las áreas seguras:
 * - No contienen items de navegación
 * - Tienen altura porcentual configurable
 * - Pueden mostrar patrones de debug
 * - Son completamente customizables
 *
 * Casos de uso comunes:
 * - Top: Logo, título de la aplicación, búsqueda
 * - Bottom: Usuario, configuración, logout
 *
 * @example
 * ```tsx
 * <SidebarNav>
 *   <SidebarSafeArea position="top" percent={20}>
 *     <img src="/logo.png" alt="Logo" />
 *   </SidebarSafeArea>
 *
 *   <SidebarContent>
 *     <SidebarItem href="/" />
 *   </SidebarContent>
 *
 *   <SidebarSafeArea position="bottom" percent={15}>
 *     <UserProfile />
 *   </SidebarSafeArea>
 * </SidebarNav>
 * ```
 *
 * @example
 * ```tsx
 * // Con estilos custom
 * <SidebarSafeArea
 *   position="top"
 *   className="bg-zinc-950 border-b border-zinc-800"
 * >
 *   <h1>Mi App</h1>
 * </SidebarSafeArea>
 * ```
 *
 * @example
 * ```tsx
 * // Override de porcentaje
 * <SidebarSafeArea position="bottom" percent={30}>
 *   <ExtendedFooter />
 * </SidebarSafeArea>
 * ```
 */
export declare const SidebarSafeArea: import("react").ForwardRefExoticComponent<SidebarSafeAreaProps & import("react").RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=SidebarSafeArea.d.ts.map