/**
 * @file Layout.tsx
 * @input Uses React, stack/stackItem utilities, LayoutAreaContext, LayoutSlotsContext
 * @output Exports Layout component and LayoutProps, LayoutHeight types
 * @position Page shell and app layout — use for any page with a header, sidebar, or content area.
 *   Building a page with a sidebar? Use Layout with start/end slots.
 *   Need a header + scrollable content? Use Layout with header + content slots.
 *   Manages padding collapse, scroll containment, and responsive slot sizing automatically.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Layout/Layout.doc.mjs
 * - /apps/storybook/stories/Layout.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
 */
import { type ReactNode } from 'react';
import type { BaseProps } from '../BaseProps';
import type { SizeValue, SpacingStep } from '../utils/types';
/**
 * Height behavior for the layout.
 * - `fill`: Layout fills container height, content scrolls internally (default)
 * - `auto`: Layout grows with content, container/page scrolls
 */
export type LayoutHeight = 'fill' | 'auto';
export interface LayoutProps extends Omit<BaseProps, 'content'> {
    /**
     * Ref forwarded to the root DOM element.
     */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Main content area (center).
     */
    content?: ReactNode;
    /**
     * Maximum width of the content within each slot (header, content, footer,
     * panels). Dividers remain full-bleed. Content is centered with
     * `margin-inline: auto` when narrower than the available space.
     *
     * Numbers are treated as pixels, strings are used as-is (e.g., '60ch').
     * Common page widths:
     * - `640` — forms, settings, text-focused pages
     * - `960` — content pages, component demos, wider layouts
     */
    contentWidth?: SizeValue;
    /**
     * End panel slot (right in LTR, left in RTL).
     */
    end?: ReactNode;
    /**
     * Footer slot.
     */
    footer?: ReactNode;
    /**
     * Header slot.
     */
    header?: ReactNode;
    /**
     * Controls the height behavior:
     * - `fill`: Layout fills container height, content scrolls internally (default)
     * - `auto`: Layout grows with content, container/page scrolls
     * @default 'fill'
     */
    height?: LayoutHeight;
    /**
     * Padding at the layout's outer edges using the spacing scale.
     * Controls both `--layout-padding-outer-x` and `--layout-padding-outer-y`.
     * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
     */
    padding?: SpacingStep;
    /**
     * Start panel slot (left in LTR, right in RTL).
     */
    start?: ReactNode;
    /**
     * Default divider visibility for LayoutHeader and LayoutFooter children.
     * When set, headers/footers that don't explicitly pass `hasDivider` will use this value.
     * When not set, nested layouts inherit from their parent context.
     */
    defaultHasDividers?: boolean;
    /**
     * Children are a shorthand for the `content` slot:
     * `<Layout>{main}</Layout>` is equivalent to `<Layout content={main} />`.
     * The surrounding zones (`header`/`start`/`end`/`footer`) stay explicit
     * props. If both `content` and `children` are provided, `content` wins.
     * Accepting children keeps the natural `<Layout>…</Layout>` form from
     * rendering a blank shell.
     */
    children?: ReactNode;
}
/**
 * Page shell with header, sidebar(s), content, and footer slots.
 * Use this for full-page layouts, app shells, dashboard layouts, or any UI
 * that needs a header bar, side navigation, scrollable content area, or action footer.
 * Can be used standalone for page-level layouts, or inside a container
 * (Card, Section) for content-level layouts.
 *
 * Handles padding collapse between adjacent slots, scroll containment in the
 * content area, and automatic RTL support via CSS logical properties.
 *
 * Structure:
 * ```
 * ┌─────────────────────────────────────────┐
 * │                 header                  │
 * ├──────┬─────────────────────────┬────────┤
 * │      │                         │        │
 * │start │        content          │  end   │
 * │      │                         │        │
 * ├──────┴─────────────────────────┴────────┤
 * │                 footer                  │
 * └─────────────────────────────────────────┘
 * ```
 *
 * When to use Layout vs raw flexbox:
 * - Page with a sidebar → Layout with `start` slot
 * - Dashboard with header + scrollable body → Layout with `header` + `content`
 * - Settings page with nav panel → Layout with `start` + `content`
 * - Simple vertical stack of items → use VStack instead
 *
 * @example
 * ```
 * <Layout
 *   header={<LayoutHeader hasDivider>App Name</LayoutHeader>}
 *   start={
 *     <LayoutPanel hasDivider width={240} role="navigation">
 *       <Navigation />
 *     </LayoutPanel>
 *   }
 *   content={
 *     <LayoutContent role="main">
 *       <MainContent />
 *     </LayoutContent>
 *   }
 * />
 * ```
 */
export declare function Layout({ children, content, contentWidth, defaultHasDividers, end, footer, header, height, padding, ref, start, xstyle, className, style, }: LayoutProps): import("react").JSX.Element;
export declare namespace Layout {
    var displayName: string;
}
//# sourceMappingURL=Layout.d.ts.map