import { type JSX } from "react";
import { type DrawerProps } from "../../drawer";
import * as styles from "./sidebar.css";
/**
 * Properties for the {@link SidebarLayout} component.
 */
type SidebarLayoutProps = JSX.IntrinsicElements["div"] & {
    /**
     * The layout variant determining sidebar position.
     * @defaultValue "inlineStart"
     */
    variant?: keyof typeof styles.layoutVariants;
    /**
     * Whether the sidebar is expanded (`true`) or collapsed (`false`).
     */
    open: boolean;
    /**
     * Callback triggered when the sidebar should close (e.g., clicking drawer backdrop).
     */
    onClose?: () => void;
    /**
     * The initial size of the aside section (e.g., "250px", "20%").
     * If not provided, the CSS default is used.
     */
    defaultAsideSize?: string;
    /**
     * CSS media query to determine when the sidebar transforms into a mobile-friendly drawer.
     * @defaultValue "(max-width: 60rem)"
     */
    drawerMediaQuery?: string;
};
/**
 * A responsive sidebar layout component that supports resizable aside panels,
 * multiple layout variants (start/end, inline/block), and automatic
 * conversion to a Drawer on smaller screens.
 *
 * @remarks
 * This component coordinates the state between the {@link Aside} and {@link Content}
 * components. It handles the interactive resizing logic using pointer events and RxJS.
 *
 * @example
 * Basic usage with toggle:
 * ```tsx
 * const [isOpen, setIsOpen] = useState(true);
 * return (
 *   <SidebarLayout open={isOpen} onClose={() => setIsOpen(false)}>
 *     <Aside>Sidebar Content</Aside>
 *     <Content>
 *       <button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
 *       Main Content
 *     </Content>
 *   </SidebarLayout>
 * );
 * ```
 *
 * @param props - Component properties including variant and open state.
 * @returns A grid-based layout container.
 */
export declare function SidebarLayout({ variant, open, onClose, defaultAsideSize, drawerMediaQuery, ...props }: SidebarLayoutProps): JSX.Element;
/**
 * Properties for the {@link Aside} component.
 */
type AsideProps = JSX.IntrinsicElements["aside"] & {
    /**
     * Optional props to pass to the {@link Drawer} component when in mobile/drawer mode.
     */
    drawerProps?: DrawerProps;
};
/**
 * The sidebar (aside) panel of the {@link SidebarLayout}.
 *
 * @remarks
 * This component is polymorphic:
 * - On large screens: It renders as a standard `<aside>` with a resize handle.
 * - On small screens (defined by `drawerMediaQuery`): It renders inside a {@link Drawer}.
 *
 * It uses the {@link Activity} component to manage visibility state for standard sidebars
 * without unmounting unnecessarily.
 *
 * @example
 * ```tsx
 * <Aside drawerProps={{ placement: 'left' }}>
 *   <nav>Navigation links...</nav>
 * </Aside>
 * ```
 *
 * @param props - Component properties and children content.
 * @returns An aside element or a Drawer component.
 */
export declare function Aside({ drawerProps, ...props }: AsideProps): JSX.Element;
/**
 * Properties for the {@link Content} component.
 */
type ContentProps = JSX.IntrinsicElements["section"];
/**
 * The main content area component for the {@link SidebarLayout}.
 *
 * @remarks
 * This component simply wraps a `<section>` element with the appropriate grid area
 * styles to occupy the non-sidebar space of the layout.
 *
 * @param props - Standard HTML section properties.
 * @returns A styled section element.
 */
export declare function Content(props: ContentProps): JSX.Element;
export {};