@papernote/ui/dist/components/Layout.d.ts

A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive

import React from 'react';
export interface Section {
    /** Unique identifier for the section */
    id: string;
    /** Display label for the section in navigation */
    label: string;
}
export interface LayoutProps {
    /** Sidebar content - typically the Sidebar component with navigation items */
    sidebar: React.ReactNode;
    /** Main page content - wrap in Page or PageLayout components for notebook styling */
    children: React.ReactNode;
    /** Optional status bar component displayed at the bottom of the layout */
    statusBar?: React.ReactNode;
    /** Additional CSS classes to apply to the layout container */
    className?: string;
    /** Page sections for navigation dots in the gutter (auto-detected from section IDs in content) */
    sections?: Section[];
}
/**
 * Layout - Complete application layout with sidebar, gutter, and scrollable content
 *
 * The top-level layout component that creates the classic notebook application structure:
 * - **Sidebar** - Fixed 256px wide navigation sidebar with notebook binding effect
 * - **Gutter** - 32px space between sidebar and content, contains page navigation dots
 * - **Content area** - Flexible, independently scrollable main content region
 * - **Status bar** - Optional fixed bar at the bottom for status information
 *
 * The gutter contains PageNavigation dots that automatically track scroll position when sections
 * are provided. This creates the table-of-contents navigation experience.
 *
 * @example Basic usage with sidebar and content
 * ```tsx
 * <Layout
 *   sidebar={
 *     <Sidebar
 *       items={[
 *         { id: 'home', label: 'Home', icon: <Home />, href: '/' },
 *         { id: 'settings', label: 'Settings', icon: <Settings />, href: '/settings' }
 *       ]}
 *       currentPath="/"
 *     />
 *   }
 *   statusBar={<StatusBar />}
 * >
 *   <Page>
 *     <h1>Dashboard</h1>
 *     <Card>Your content</Card>
 *   </Page>
 * </Layout>
 * ```
 *
 * @example With page sections for navigation dots
 * ```tsx
 * <Layout
 *   sidebar={<Sidebar items={items} />}
 *   sections={[
 *     { id: 'overview', label: 'Overview' },
 *     { id: 'stats', label: 'Statistics' },
 *     { id: 'settings', label: 'Settings' }
 *   ]}
 * >
 *   <Page>
 *     <section id="overview">...</section>
 *     <section id="stats">...</section>
 *     <section id="settings">...</section>
 *   </Page>
 * </Layout>
 * ```
 */
export declare const Layout: React.FC<LayoutProps>;
export default Layout;
//# sourceMappingURL=Layout.d.ts.map