import React from 'react';
import type { ActionsMenuGroup } from '../ui/actions-menu';
import { type PageActionButton } from '../ui/page-actions';
interface LegacyPageContainerProps {
children: React.ReactNode;
className?: string;
/** Whether to apply full-width background to the entire section */
fullWidthBackground?: boolean;
/** Custom background style/className for the section wrapper */
backgroundClassName?: string;
/** Custom background style object */
backgroundStyle?: React.CSSProperties;
/** Custom padding for the content container (overrides default responsive padding) */
contentPadding?: string;
/** Custom max-width for the content container (default: max-w-[1920px]) */
maxWidth?: string;
/** HTML element type for the container */
as?: 'section' | 'div' | 'main' | 'article';
/** HTML id for the container */
id?: string;
}
interface AdvancedPageContainerProps {
/**
* Page content
*/
children: React.ReactNode;
/**
* Page variant determines layout structure
*/
variant?: 'list' | 'detail' | 'form' | 'content';
/**
* Page title (displayed as h1)
*/
title?: string;
/**
* Subtitle or description (supports both string and ReactNode)
*/
subtitle?: string | React.ReactNode;
/**
* Back button configuration
*/
backButton?: {
label?: string;
onClick: () => void;
};
/**
* Header actions (buttons, controls, etc.)
* Can be used together with or instead of `actions` prop
*/
headerActions?: React.ReactNode;
/**
* Page action buttons configuration
* Automatically renders PageActions component with appropriate variant:
* - 'list' variant → 'icon-buttons' (collapses to menu on mobile)
* - 'detail'/'form' variants → 'primary-buttons' (fixed bottom on mobile)
*/
actions?: PageActionButton[];
/**
* Override the automatically determined PageActions variant
*/
actionsVariant?: 'icon-buttons' | 'primary-buttons' | 'menu-primary';
/**
* Page action menu items configuration
*/
menuActions?: ActionsMenuGroup[];
/**
* Custom header content (overrides title/subtitle)
*/
headerContent?: React.ReactNode;
/**
* Container padding
*/
padding?: 'none' | 'sm' | 'md' | 'lg';
/**
* Container background
*/
background?: 'default' | 'card' | 'transparent';
/**
* Additional CSS classes for container
*/
className?: string;
/**
* Additional CSS classes for content area
*/
contentClassName?: string;
/**
* Whether to show the standard header section
*/
showHeader?: boolean;
}
export type PageContainerProps = LegacyPageContainerProps | AdvancedPageContainerProps;
/**
* @deprecated Use `PageLayout` from `'../layout/page-layout'` instead.
*
* Unified Page Container Component
*
* Supports both legacy layout patterns and advanced UI patterns:
*
* LEGACY USAGE (backward compatible):
*
* Your Content
*
*
* ADVANCED USAGE (new features):
* {}}}>
* Your Content
*
*/
export declare function PageContainer(props: PageContainerProps): React.JSX.Element;
/** @deprecated Use `PageLayout` from `'../layout/page-layout'` instead. */
export declare const ListPageContainer: (props: Omit) => React.JSX.Element;
/** @deprecated Use `PageLayout` from `'../layout/page-layout'` instead. */
export declare const DetailPageContainer: (props: Omit) => React.JSX.Element;
/** @deprecated Use `PageLayout` from `'../layout/page-layout'` instead. */
export declare const FormPageContainer: (props: Omit) => React.JSX.Element;
/** @deprecated Use `PageLayout` from `'../layout/page-layout'` instead. */
export declare const ContentPageContainer: (props: Omit) => React.JSX.Element;
export type { PageActionButton } from '../ui/page-actions';
/** @deprecated Use `PageLayout` from `'../layout/page-layout'` instead. */
export default PageContainer;
//# sourceMappingURL=page-container.d.ts.map