@furystack/shades-common-components/esm/components/page-layout/index.d.ts

Common UI components for FuryStack Shades

import { type ScreenSize } from '@furystack/shades';
/**
 * AppBar configuration for PageLayout.
 */
export type AppBarConfig = {
    /** AppBar visibility behavior */
    variant: 'permanent' | 'auto-hide';
    /** Height of the AppBar (CSS value). Default: '48px' */
    height?: string;
    /** The AppBar component to render */
    component: JSX.Element;
};
/**
 * Drawer configuration for a single side.
 */
export type DrawerConfig = {
    /** Drawer behavior variant */
    variant: 'permanent' | 'collapsible' | 'temporary';
    /** Width of the drawer (CSS value). Default: '240px' */
    width?: string;
    /** The drawer content component */
    component: JSX.Element;
    /** Initial open state for collapsible drawers. Default: true */
    defaultOpen?: boolean;
    /** Auto-collapse the drawer below this breakpoint (uses ScreenService) */
    collapseOnBreakpoint?: ScreenSize;
};
/**
 * Props for the PageLayout component.
 */
export type PageLayoutProps = {
    /** AppBar configuration */
    appBar?: AppBarConfig;
    /** Drawer configurations for left and/or right sides */
    drawer?: {
        left?: DrawerConfig;
        right?: DrawerConfig;
    };
    /** Gap between the AppBar and the content area (CSS value). Default: '0px' */
    topGap?: string;
    /** Gap between the drawers and the content area (CSS value). Default: '0px' */
    sideGap?: string;
    /**
     * When true, uses `position: absolute` instead of `position: fixed` so the
     * layout fills its nearest positioned ancestor rather than the viewport.
     * This enables nesting PageLayout instances (e.g. in a showcase grid).
     */
    contained?: boolean;
};
/**
 * PageLayout component for full-viewport application layouts.
 *
 * Provides a structured layout with:
 * - Optional AppBar (permanent or auto-hide)
 * - Optional left/right drawers (permanent, collapsible, or temporary)
 * - Main content area with automatic margin management
 * - Configurable gaps between AppBar/drawers and content
 * - Responsive drawer collapse via `collapseOnBreakpoint`
 *
 * The LayoutService is scoped to this component, so CSS variables are isolated
 * and automatically cleaned up when navigating away.
 *
 * @example
 * ```tsx
 * <PageLayout
 *   appBar={{
 *     variant: 'permanent',
 *     component: <MyAppBar />,
 *   }}
 *   drawer={{
 *     left: {
 *       variant: 'collapsible',
 *       component: <Sidebar />,
 *       collapseOnBreakpoint: 'md', // Auto-collapse below 900px
 *     },
 *   }}
 *   topGap="16px"
 *   sideGap="24px"
 * >
 *   <MainContent />
 * </PageLayout>
 * ```
 */
export declare const PageLayout: (props: PageLayoutProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=index.d.ts.map