@primer/react/dist/PageLayout/PageLayout.d.ts

An implementation of GitHub's Primer Design System using React

import React from 'react';
import type { ResponsiveValue } from '../hooks/useResponsiveValue';
import type { FCWithSlotMarker, WithSlotMarker } from '../utils/types';
import { type CustomWidthOptions, type PaneWidth } from './usePaneWidth';
declare const SPACING_MAP: {
    none: number;
    condensed: number;
    normal: (number | null)[];
};
export type PageLayoutProps = {
    /** The maximum width of the page container */
    containerWidth?: keyof typeof containerWidths;
    /** The spacing between the outer edges of the page container and the viewport */
    padding?: keyof typeof SPACING_MAP;
    rowGap?: keyof typeof SPACING_MAP;
    columnGap?: keyof typeof SPACING_MAP;
    /** Private prop to allow SplitPageLayout to customize slot components */
    _slotsConfig?: Record<'header' | 'footer', React.ElementType>;
    className?: string;
    style?: React.CSSProperties;
};
declare const containerWidths: {
    full: string;
    medium: string;
    large: string;
    xlarge: string;
};
export type PageLayoutHeaderProps = {
    /**
     * A unique label for the rendered banner landmark
     */
    'aria-label'?: React.AriaAttributes['aria-label'];
    /**
     * An id to an element which uniquely labels the rendered banner landmark
     */
    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
    padding?: keyof typeof SPACING_MAP;
    divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>;
    /**
     * @deprecated Use the `divider` prop with a responsive value instead.
     *
     * Before:
     * ```
     * divider="line"
     * dividerWhenNarrow="filled"
     * ```
     *
     * After:
     * ```
     * divider={{regular: 'line', narrow: 'filled'}}
     * ```
     */
    dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled';
    hidden?: boolean | ResponsiveValue<boolean>;
    className?: string;
    style?: React.CSSProperties;
};
export type PageLayoutContentProps = {
    /**
     * Provide an optional element type for the outermost element rendered by the component.
     * @default 'main'
     */
    as?: React.ElementType;
    /**
     * A unique label for the rendered main landmark
     */
    'aria-label'?: React.AriaAttributes['aria-label'];
    /**
     * An id to an element which uniquely labels the rendered main landmark
     */
    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
    width?: keyof typeof contentWidths;
    padding?: keyof typeof SPACING_MAP;
    hidden?: boolean | ResponsiveValue<boolean>;
    className?: string;
    style?: React.CSSProperties;
};
declare const contentWidths: {
    full: string;
    medium: string;
    large: string;
    xlarge: string;
};
export type PageLayoutPaneProps = {
    position?: keyof typeof panePositions | ResponsiveValue<keyof typeof panePositions>;
    /**
     * @deprecated Use the `position` prop with a responsive value instead.
     *
     * Before:
     * ```
     * position="start"
     * positionWhenNarrow="end"
     * ```
     *
     * After:
     * ```
     * position={{regular: 'start', narrow: 'end'}}
     * ```
     */
    positionWhenNarrow?: 'inherit' | keyof typeof panePositions;
    'aria-labelledby'?: string;
    'aria-label'?: string;
    width?: PaneWidth | CustomWidthOptions;
    minWidth?: number;
    resizable?: boolean;
    widthStorageKey?: string;
    padding?: keyof typeof SPACING_MAP;
    divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>;
    /**
     * @deprecated Use the `divider` prop with a responsive value instead.
     *
     * Before:
     * ```
     * divider="line"
     * dividerWhenNarrow="filled"
     * ```
     *
     * After:
     * ```
     * divider={{regular: 'line', narrow: 'filled'}}
     * ```
     */
    dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled';
    sticky?: boolean;
    offsetHeader?: string | number;
    hidden?: boolean | ResponsiveValue<boolean>;
    id?: string;
    className?: string;
    style?: React.CSSProperties;
};
declare const panePositions: {
    start: number;
    end: number;
};
declare const Pane: React.ForwardRefExoticComponent<PageLayoutPaneProps & {
    children?: React.ReactNode | undefined;
} & React.RefAttributes<HTMLDivElement>>;
export type PageLayoutFooterProps = {
    /**
     * A unique label for the rendered contentinfo landmark
     */
    'aria-label'?: React.AriaAttributes['aria-label'];
    /**
     * An id to an element which uniquely labels the rendered contentinfo landmark
     */
    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
    padding?: keyof typeof SPACING_MAP;
    divider?: 'none' | 'line' | ResponsiveValue<'none' | 'line', 'none' | 'line' | 'filled'>;
    /**
     * @deprecated Use the `divider` prop with a responsive value instead.
     *
     * Before:
     * ```
     * divider="line"
     * dividerWhenNarrow="filled"
     * ```
     *
     * After:
     * ```
     * divider={{regular: 'line', narrow: 'filled'}}
     * ```
     */
    dividerWhenNarrow?: 'inherit' | 'none' | 'line' | 'filled';
    hidden?: boolean | ResponsiveValue<boolean>;
    className?: string;
    style?: React.CSSProperties;
};
export declare const PageLayout: React.FC<React.PropsWithChildren<PageLayoutProps>> & {
    __SLOT__: symbol;
    Header: FCWithSlotMarker<React.PropsWithChildren<PageLayoutHeaderProps>>;
    Content: FCWithSlotMarker<React.PropsWithChildren<PageLayoutContentProps>>;
    Pane: WithSlotMarker<typeof Pane>;
    Footer: FCWithSlotMarker<React.PropsWithChildren<PageLayoutFooterProps>>;
};
export {};
//# sourceMappingURL=PageLayout.d.ts.map