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

Common UI components for FuryStack Shades

/**
 * Props for the PageContainer component.
 */
export type PageContainerProps = {
    /** Maximum width of the container (CSS value). Default: '100%' */
    maxWidth?: string;
    /** Center the container horizontally. Default: false */
    centered?: boolean;
    /** Padding around the content (CSS value). Default: '24px' */
    padding?: string;
    /** Gap between child elements (CSS value). Default: '16px' */
    gap?: string;
    /** Fill the available height. Default: true */
    fullHeight?: boolean;
};
/**
 * PageContainer component for common page-level patterns.
 *
 * Provides a consistent container for page content with:
 * - Optional max-width constraint
 * - Horizontal centering option
 * - Configurable padding and gap
 * - Flex column layout with gap between children
 *
 * @example
 * ```tsx
 * <PageContainer maxWidth="800px" centered padding="48px" gap="24px">
 *   <PageHeader
 *     icon={<Icon icon={icons.users} />}
 *     title="Users"
 *     description="Manage user accounts and their roles."
 *   />
 *   <Paper>
 *     Content here...
 *   </Paper>
 * </PageContainer>
 * ```
 *
 * @example
 * ```tsx
 * // Full width container
 * <PageContainer gap="16px">
 *   <Typography variant="h4">Dashboard</Typography>
 *   <GridOfCards />
 * </PageContainer>
 * ```
 */
export declare const PageContainer: (props: PageContainerProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
export * from './page-header.js';
//# sourceMappingURL=index.d.ts.map