import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Stack } from './Stack.js';
const MAX_WIDTH_CLASS = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    '2xl': 'max-w-2xl',
    '3xl': 'max-w-3xl',
    '4xl': 'max-w-4xl',
    '5xl': 'max-w-5xl',
    '6xl': 'max-w-6xl',
    '7xl': 'max-w-7xl',
    full: 'max-w-none',
};
/**
 * The single canonical wrapper for every admin page. PageContainer owns
 * three responsibilities so individual views can stop redoing them:
 *
 *  1. Consistent max-width + horizontal padding (so dashboards, lists, and
 *     forms all line up visually).
 *  2. A standard header slot with title + description + actions.
 *  3. A standard body slot rendered as a `<Stack>` so children stack with
 *     consistent vertical rhythm.
 *
 * Use PageContainer at the top of every screen. Compose with `<Stack>` /
 * `<Grid>` / `<Cluster>` inside. Never roll a per-screen wrapper.
 */
export function PageContainer({ title, description, actions, maxWidth = '7xl', paddingX = '6', paddingY = '6', gap = '6', className = '', children, ...rest }) {
    const outerClasses = [
        'mx-auto w-full',
        MAX_WIDTH_CLASS[maxWidth],
        `px-${paddingX}`,
        `py-${paddingY}`,
        className,
    ]
        .filter(Boolean)
        .join(' ');
    return (_jsx("section", { className: outerClasses, ...rest, children: _jsxs(Stack, { space: gap, children: [(title || description || actions) && (_jsxs("header", { className: "flex flex-col gap-3 md:flex-row md:items-start md:justify-between", children: [(title || description) && (_jsxs("div", { className: "min-w-0", children: [title && (_jsx("h1", { className: "text-foreground truncate text-2xl font-semibold tracking-tight", children: title })), description && _jsx("p", { className: "text-muted-foreground mt-1 text-sm", children: description })] })), actions && _jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })] })), children] }) }));
}
//# sourceMappingURL=PageContainer.js.map