@omnitron-dev/prism 0.1.1

package/dist/layouts/index.d.ts

@@ -0,0 +1,854 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SxProps, Theme, Breakpoint } from '@mui/material';
+
+/**
+ * Layout Type Definitions
+ *
+ * Combines the best patterns from minimal and aurora layout systems.
+ *
+ * @module @omnitron-dev/prism/layouts/types
+ */
+
+/**
+ * Navigation menu type - determines overall navigation strategy.
+ */
+type NavigationMenuType = 'sidenav' | 'topnav' | 'combo';
+/**
+ * Sidenav variant - different sidebar styles.
+ */
+type SidenavVariant = 'default' | 'mini' | 'stacked';
+/**
+ * Topnav variant - different top navigation styles.
+ */
+type TopnavVariant = 'default' | 'slim' | 'stacked';
+/**
+ * Navigation color mode.
+ */
+type NavColorMode = 'default' | 'vibrant' | 'integrate';
+/**
+ * Layout configuration options.
+ */
+interface LayoutConfig {
+    /** Navigation menu type */
+    navigationMenuType: NavigationMenuType;
+    /** Sidenav variant (when using sidenav or combo) */
+    sidenavVariant: SidenavVariant;
+    /** Whether sidenav is collapsed */
+    sidenavCollapsed: boolean;
+    /** Topnav variant (when using topnav or combo) */
+    topnavVariant: TopnavVariant;
+    /** Navigation color mode */
+    navColor: NavColorMode;
+    /** Whether mobile drawer is open */
+    drawerOpen: boolean;
+    /** Current drawer width in pixels */
+    drawerWidth: number;
+    /** Content compact mode (max-width container) */
+    compactLayout: boolean;
+}
+/**
+ * Standard drawer width values.
+ */
+declare const DRAWER_WIDTHS: {
+    /** Full expanded width */
+    readonly full: 280;
+    /** Collapsed/mini width (72 content + 1px border = header desktop height) */
+    readonly mini: 73;
+    /** Mobile drawer width */
+    readonly mobile: 280;
+    /** Stacked sidenav collapsed width (left panel only) */
+    readonly stackedCollapsed: 72;
+    /** Stacked sidenav expanded width */
+    readonly stackedExpanded: 300;
+};
+/**
+ * Header height values by breakpoint.
+ */
+declare const HEADER_HEIGHTS: {
+    readonly mobile: 64;
+    readonly desktop: 72;
+};
+/**
+ * Layout navigation item definition.
+ *
+ * This is the data structure used for layout configuration.
+ * For the NavItem component, see @omnitron-dev/prism/components/nav-section.
+ */
+interface LayoutNavItem {
+    /** Unique item ID */
+    id: string;
+    /** Display title */
+    title: string;
+    /** Navigation path (for leaf items) */
+    path?: string;
+    /** Icon component */
+    icon?: ReactNode;
+    /** Info badge/label */
+    info?: ReactNode;
+    /** Caption/description text */
+    caption?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** External link flag */
+    external?: boolean;
+    /** Child items for nested menus */
+    children?: LayoutNavItem[];
+    /** Required roles for visibility */
+    allowedRoles?: string[];
+    /** Required permissions for visibility */
+    allowedPermissions?: string[];
+    /** Deep match for active state (match child paths) */
+    deepMatch?: boolean;
+    /** Badge for "new" or count indicators */
+    badge?: string | number;
+    /**
+     * Selection prefix for active state matching.
+     * If set, the item will be marked active when the current path
+     * starts with this prefix. Useful for parent items that should
+     * stay highlighted when on child routes.
+     *
+     * @example
+     * ```tsx
+     * // Parent item with selectionPrefix
+     * { id: 'products', title: 'Products', path: '/products', selectionPrefix: '/products' }
+     * // Will be active for /products, /products/123, /products/new, etc.
+     * ```
+     */
+    selectionPrefix?: string;
+}
+/**
+ * Layout navigation section (group of items with optional subheader).
+ *
+ * This is the data structure used for layout configuration.
+ * For the NavSection component, see @omnitron-dev/prism/components/nav-section.
+ */
+interface LayoutNavSection {
+    /** Section ID */
+    id: string;
+    /** Section subheader text */
+    subheader?: string;
+    /** Items in this section */
+    items: LayoutNavItem[];
+}
+/**
+ * Layout navigation data structure.
+ */
+type LayoutNavData = LayoutNavSection[];
+/**
+ * Header section slots for flexible composition.
+ */
+interface HeaderSlots {
+    /** Content above the main header row */
+    topArea?: ReactNode;
+    /** Left side content (logo, menu button) */
+    leftArea?: ReactNode;
+    /** Center content (navigation, search) */
+    centerArea?: ReactNode;
+    /** Right side content (actions, user menu) */
+    rightArea?: ReactNode;
+    /** Content below the main header row (horizontal nav) */
+    bottomArea?: ReactNode;
+}
+/**
+ * Auth layout variant.
+ */
+type AuthLayoutVariant = 'centered' | 'split' | 'simple';
+/**
+ * Auth layout props.
+ */
+interface AuthLayoutProps {
+    /** Child content */
+    children?: ReactNode;
+    /** Layout variant */
+    variant?: AuthLayoutVariant;
+    /** Title text (for split layout) */
+    title?: string;
+    /** Subtitle text (for split layout) */
+    subtitle?: string;
+    /** Illustration image (for split layout) */
+    illustration?: ReactNode;
+    /** Show logo in header */
+    showLogo?: boolean;
+    /** Show help link */
+    showHelp?: boolean;
+    /** Custom max width for content */
+    maxWidth?: number | string;
+}
+/**
+ * Layout context value.
+ */
+interface LayoutContextValue {
+    /** Current layout configuration */
+    config: LayoutConfig;
+    /** Whether the viewport is below the mobile breakpoint */
+    isMobile: boolean;
+    /** Update configuration */
+    setConfig: (config: Partial<LayoutConfig>) => void;
+    /** Toggle drawer open/close */
+    toggleDrawer: () => void;
+    /** Toggle sidenav collapse */
+    toggleSidenavCollapse: () => void;
+    /** Set navigation menu type */
+    setNavigationMenuType: (type: NavigationMenuType) => void;
+    /** Set sidenav variant */
+    setSidenavVariant: (variant: SidenavVariant) => void;
+    /** Set nav color mode */
+    setNavColor: (mode: NavColorMode) => void;
+    /** Open navigation items (for nested menus) */
+    openItems: string[];
+    /** Set open items */
+    setOpenItems: (items: string[]) => void;
+    /** Check if nested item is open */
+    isItemOpen: (id: string) => boolean;
+    /** Toggle item open state */
+    toggleItem: (id: string) => void;
+    /**
+     * Check if any nested item is active based on current pathname.
+     * Used to keep parent items highlighted when on child routes.
+     *
+     * @param items - Child items to check
+     * @param pathname - Current pathname (typically from router)
+     * @returns true if any nested item matches the current route
+     */
+    isNestedItemActive: (items: LayoutNavItem[] | undefined, pathname: string) => boolean;
+    /**
+     * Check if a single nav item is active based on pathname.
+     * Supports exact match, deep match, and selectionPrefix matching.
+     *
+     * @param item - Nav item to check
+     * @param pathname - Current pathname
+     * @returns true if the item is active
+     */
+    isNavItemActive: (item: LayoutNavItem, pathname: string) => boolean;
+}
+/**
+ * CSS variable names for layout dimensions.
+ */
+declare const LAYOUT_CSS_VARS: {
+    readonly headerHeight: "--layout-header-height";
+    readonly headerMobileHeight: "--layout-header-mobile-height";
+    readonly headerDesktopHeight: "--layout-header-desktop-height";
+    readonly headerBlur: "--layout-header-blur";
+    readonly headerZIndex: "--layout-header-z-index";
+    readonly navWidth: "--layout-nav-width";
+    readonly navMiniWidth: "--layout-nav-mini-width";
+    readonly navMobileWidth: "--layout-nav-mobile-width";
+    readonly navZIndex: "--layout-nav-z-index";
+    readonly navBg: "--layout-nav-bg";
+    readonly navTextColor: "--layout-nav-text-color";
+    readonly navTextSecondaryColor: "--layout-nav-text-secondary-color";
+    readonly mainPaddingTop: "--layout-main-padding-top";
+    readonly mainPaddingBottom: "--layout-main-padding-bottom";
+    readonly mainPaddingLeft: "--layout-main-padding-left";
+    readonly mainPaddingRight: "--layout-main-padding-right";
+};
+/**
+ * Default CSS variable values.
+ */
+declare const DEFAULT_LAYOUT_CSS_VARS: Record<string, string | number>;
+
+/**
+ * Default layout configuration.
+ */
+declare const defaultLayoutConfig: LayoutConfig;
+/**
+ * Layout context.
+ */
+declare const LayoutContext: react.Context<LayoutContextValue | null>;
+interface LayoutProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** Initial configuration overrides */
+    initialConfig?: Partial<LayoutConfig>;
+    /**
+     * Persistence key for sidebar collapsed state.
+     * When provided, sidebar collapsed state is saved to localStorage
+     * via the settings store and restored on mount.
+     * Use different keys for different layouts (e.g., 'main', 'admin').
+     */
+    persistKey?: string;
+}
+/**
+ * Layout provider component.
+ * Manages layout configuration and navigation state.
+ */
+declare function LayoutProvider({ children, initialConfig, persistKey }: LayoutProviderProps): ReactNode;
+/**
+ * Hook to access layout context.
+ *
+ * @returns Layout context value
+ * @throws If used outside LayoutProvider
+ *
+ * @example
+ * ```tsx
+ * function NavToggle() {
+ *   const { config, toggleSidenavCollapse } = useLayoutContext();
+ *
+ *   return (
+ *     <IconButton onClick={toggleSidenavCollapse}>
+ *       {config.sidenavCollapsed ? <MenuOpenIcon /> : <MenuIcon />}
+ *     </IconButton>
+ *   );
+ * }
+ * ```
+ */
+declare function useLayoutContext(): LayoutContextValue;
+/**
+ * Hook to access only layout configuration.
+ */
+declare function useLayoutConfig(): LayoutConfig;
+/**
+ * Hook to check if sidenav should be visible.
+ */
+declare function useSidenavVisible(): boolean;
+/**
+ * Hook to check if topnav should be visible.
+ */
+declare function useTopnavVisible(): boolean;
+/**
+ * Hook to check navigation item active state with current pathname.
+ * Provides utilities for building navigation components.
+ *
+ * @param pathname - Current pathname from router
+ * @returns Object with active state checking functions
+ *
+ * @example
+ * ```tsx
+ * function NavItem({ item }: { item: LayoutNavItem }) {
+ *   const { pathname } = useLocation(); // From your router
+ *   const { isItemActive, isNestedActive } = useNavActive(pathname);
+ *
+ *   const active = isItemActive(item);
+ *   const nestedActive = item.children && isNestedActive(item.children);
+ *
+ *   return (
+ *     <ListItemButton selected={active || nestedActive}>
+ *       {item.title}
+ *     </ListItemButton>
+ *   );
+ * }
+ * ```
+ */
+declare function useNavActive(pathname: string): {
+    /**
+     * Check if a nav item is active.
+     */
+    isItemActive: (item: LayoutNavItem) => boolean;
+    /**
+     * Check if any nested item is active.
+     */
+    isNestedActive: (items: LayoutNavItem[] | undefined) => boolean;
+};
+
+/**
+ * Layout CSS Variables
+ *
+ * Global CSS variables for layout dimensions and styling.
+ *
+ * @module @omnitron-dev/prism/layouts/core/css-vars
+ */
+
+/**
+ * Generate base layout CSS variables.
+ */
+declare function getBaseLayoutCssVars(zIndexBase: number): Record<string, string | number>;
+/**
+ * Generate navigation color CSS variables based on mode.
+ */
+declare function getNavColorCssVars(mode: NavColorMode, theme: {
+    palette: {
+        mode: 'light' | 'dark';
+        background: {
+            paper: string;
+            default: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+        };
+    };
+}): Record<string, string>;
+/**
+ * Merge custom CSS variables with defaults.
+ */
+declare function mergeLayoutCssVars(customVars: Record<string, string | number> | undefined, ...defaultVars: Record<string, string | number>[]): Record<string, string | number>;
+interface LayoutGlobalStylesProps {
+    /** Additional CSS variables */
+    cssVars?: Record<string, string | number>;
+}
+/**
+ * Global CSS variables for layouts.
+ * Should be rendered once at the root of the layout system.
+ */
+declare function LayoutGlobalStyles({ cssVars }: LayoutGlobalStylesProps): ReactNode;
+
+/**
+ * Layout Section
+ *
+ * Root container for all layout variants.
+ * Provides the structural foundation for header, sidebar, main, and footer.
+ *
+ * @module @omnitron-dev/prism/layouts/core/layout-section
+ */
+
+interface LayoutSectionProps {
+    /** Header section (rendered at top) */
+    headerSection?: ReactNode;
+    /** Sidebar section (sidenav) */
+    sidebarSection?: ReactNode;
+    /** Footer section (rendered at bottom of main area) */
+    footerSection?: ReactNode;
+    /** Main content */
+    children?: ReactNode;
+    /** Custom CSS variables */
+    cssVars?: Record<string, string | number>;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Layout Section - Root container for page layouts.
+ *
+ * Structure:
+ * ```
+ * LayoutRoot
+ * ├── GlobalStyles (CSS variables)
+ * ├── HeaderSection
+ * └── LayoutSidebarContainer (when sidebar exists)
+ *     ├── SidebarSection
+ *     └── MainContent
+ *         ├── children
+ *         └── FooterSection
+ * └── or MainContent directly (when no sidebar)
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <LayoutSection
+ *   headerSection={<HeaderSection slots={{ leftArea: <Logo /> }} />}
+ *   sidebarSection={<Sidenav />}
+ *   footerSection={<Footer />}
+ * >
+ *   <Outlet />
+ * </LayoutSection>
+ * ```
+ */
+declare function LayoutSection({ headerSection, sidebarSection, footerSection, children, cssVars, sx, }: LayoutSectionProps): ReactNode;
+interface MainSectionProps {
+    /** Content */
+    children?: ReactNode;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Main content section.
+ * Simple flex container for page content.
+ */
+declare function MainSection({ children, sx }: MainSectionProps): ReactNode;
+
+/**
+ * Header Section
+ *
+ * Slot-based header component with sticky positioning and scroll effects.
+ *
+ * @module @omnitron-dev/prism/layouts/core/header-section
+ */
+
+interface HeaderSectionProps {
+    /** Slot content */
+    slots?: HeaderSlots;
+    /** Props for each slot */
+    slotProps?: {
+        topArea?: SxProps<Theme>;
+        leftArea?: SxProps<Theme>;
+        centerArea?: SxProps<Theme>;
+        rightArea?: SxProps<Theme>;
+        bottomArea?: SxProps<Theme>;
+        container?: SxProps<Theme>;
+    };
+    /** Disable sticky positioning */
+    disableSticky?: boolean;
+    /** Disable scroll offset effects (blur on scroll) */
+    disableOffset?: boolean;
+    /** Disable scroll elevation shadow */
+    disableElevation?: boolean;
+    /** Use container for max-width */
+    containerized?: boolean;
+    /** Container max width */
+    maxWidth?: Breakpoint | false;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Header Section - Slot-based header with scroll effects.
+ *
+ * Slots:
+ * - `topArea`: Content above the main toolbar row
+ * - `leftArea`: Left side (logo, menu toggle)
+ * - `centerArea`: Center content (search, navigation)
+ * - `rightArea`: Right side (actions, user menu)
+ * - `bottomArea`: Content below main toolbar (horizontal nav)
+ *
+ * @example
+ * ```tsx
+ * <HeaderSection
+ *   slots={{
+ *     leftArea: (
+ *       <>
+ *         <MenuButton onClick={onMenuClick} />
+ *         <Logo />
+ *       </>
+ *     ),
+ *     centerArea: <Searchbar />,
+ *     rightArea: (
+ *       <>
+ *         <NotificationsButton />
+ *         <UserMenu />
+ *       </>
+ *     ),
+ *   }}
+ * />
+ * ```
+ */
+declare function HeaderSection({ slots, slotProps, disableSticky, disableOffset, disableElevation, containerized, maxWidth, sx, }: HeaderSectionProps): ReactNode;
+interface HeaderToolbarProps {
+    /** Content */
+    children?: ReactNode;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Standalone header toolbar without AppBar wrapper.
+ * Useful for custom header implementations.
+ */
+declare function HeaderToolbar({ children, sx }: HeaderToolbarProps): ReactNode;
+
+/**
+ * Dashboard Layout
+ *
+ * Main dashboard layout component that orchestrates navigation, header, and content.
+ * Implements WCAG 2.1 accessibility guidelines with proper landmarks and keyboard navigation.
+ *
+ * @module @omnitron-dev/prism/layouts/dashboard/layout
+ */
+
+interface DashboardLayoutProps {
+    /** Child content */
+    children?: ReactNode;
+    /** Layout breakpoint for responsive behavior */
+    layoutQuery?: Breakpoint;
+    /** Navigation data */
+    navData?: LayoutNavData;
+    /** Header slot content */
+    headerSlots?: HeaderSlots;
+    /** Logo component */
+    logo?: ReactNode;
+    /** Footer component */
+    footer?: ReactNode;
+    /** Sidenav footer content */
+    sidenavFooter?: ReactNode;
+    /** Initial layout configuration */
+    initialConfig?: Partial<LayoutConfig>;
+    /**
+     * Persistence key for sidebar collapsed state.
+     * When provided, sidebar collapsed state persists to localStorage.
+     * Use unique keys per layout (e.g., 'main', 'admin').
+     */
+    persistKey?: string;
+    /** Props for layout sections */
+    slotProps?: {
+        header?: Partial<React.ComponentProps<typeof HeaderSection>>;
+        main?: {
+            sx?: SxProps<Theme>;
+            disablePadding?: boolean;
+            maxWidth?: Breakpoint | false;
+        };
+    };
+}
+/**
+ * Dashboard Layout - Complete dashboard layout with navigation.
+ *
+ * Features:
+ * - Configurable navigation type (sidenav, topnav, combo)
+ * - Multiple sidenav variants (default, mini, stacked)
+ * - Responsive mobile drawer
+ * - Slot-based header customization
+ * - CSS variables for theming
+ *
+ * @example
+ * ```tsx
+ * <DashboardLayout
+ *   logo={<Logo />}
+ *   navData={navigationConfig}
+ *   headerSlots={{
+ *     leftArea: <MenuButton />,
+ *     rightArea: <UserMenu />,
+ *   }}
+ *   initialConfig={{
+ *     navigationMenuType: 'sidenav',
+ *     sidenavVariant: 'default',
+ *   }}
+ * >
+ *   <Outlet />
+ * </DashboardLayout>
+ * ```
+ */
+declare function DashboardLayout({ children, layoutQuery, navData, headerSlots, logo, footer, sidenavFooter, initialConfig, persistKey, slotProps, }: DashboardLayoutProps): ReactNode;
+interface DashboardContentProps {
+    /** Child content */
+    children?: ReactNode;
+    /** Disable padding */
+    disablePadding?: boolean;
+    /** Container max width */
+    maxWidth?: Breakpoint | false;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Dashboard content wrapper with optional container.
+ * Use for consistent content padding within dashboard.
+ */
+declare function DashboardContent({ children, disablePadding, maxWidth, sx }: DashboardContentProps): ReactNode;
+
+/**
+ * Dashboard Sidenav
+ *
+ * Sidebar navigation for dashboard layouts.
+ * Supports multiple variants: default, mini, and stacked.
+ * Implements WCAG 2.1 accessibility with proper ARIA attributes.
+ *
+ * @module @omnitron-dev/prism/layouts/dashboard/sidenav
+ */
+
+interface SidenavProps {
+    /** Logo component */
+    logo?: ReactNode;
+    /** Navigation data */
+    navData?: LayoutNavData;
+    /** Navigation item renderer */
+    renderNavItem?: (item: LayoutNavData[number]['items'][number], depth: number) => ReactNode;
+    /** Footer content (above collapse button) */
+    footer?: ReactNode;
+    /** Show collapse toggle button */
+    showCollapseButton?: boolean;
+    /** Layout breakpoint (hides on mobile) */
+    layoutQuery?: Breakpoint;
+    /** Accessible label for the navigation */
+    'aria-label'?: string;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Dashboard Sidenav - Sidebar navigation component.
+ *
+ * Supports three variants:
+ * - `default`: Full-width sidebar with text labels
+ * - `mini`: Icon-only collapsed sidebar
+ * - `stacked`: Two-panel design with icon nav + content panel
+ *
+ * @example
+ * ```tsx
+ * <Sidenav
+ *   logo={<Logo />}
+ *   navData={navigationConfig}
+ *   showCollapseButton
+ * />
+ * ```
+ */
+declare function Sidenav({ logo, navData, renderNavItem, footer, showCollapseButton, layoutQuery, 'aria-label': ariaLabel, sx, }: SidenavProps): ReactNode;
+interface MobileSidenavProps extends Omit<SidenavProps, 'showCollapseButton' | 'layoutQuery'> {
+    /** Layout breakpoint (shows only below this) */
+    layoutQuery?: Breakpoint;
+}
+/**
+ * Mobile Sidenav - Drawer-based navigation for mobile.
+ * Implements WCAG 2.1 accessibility with proper ARIA attributes.
+ */
+declare function MobileSidenav({ logo, navData, renderNavItem, footer, layoutQuery, 'aria-label': ariaLabel, sx, }: MobileSidenavProps): ReactNode;
+
+/**
+ * Auth Centered Layout
+ *
+ * Centered authentication layout with card-style content.
+ *
+ * @module @omnitron-dev/prism/layouts/auth/centered
+ */
+
+interface AuthCenteredLayoutProps {
+    /** Child content (form) */
+    children?: ReactNode;
+    /** Logo component */
+    logo?: ReactNode;
+    /** Custom max width for content card */
+    maxWidth?: number | string;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Auth Centered Layout - Card-based centered authentication form.
+ *
+ * Perfect for login, registration, password reset, and verification pages.
+ *
+ * @example
+ * ```tsx
+ * <AuthCenteredLayout
+ *   logo={<Logo />}
+ *   showHelp
+ * >
+ *   <LoginForm />
+ * </AuthCenteredLayout>
+ * ```
+ */
+declare function AuthCenteredLayout({ children, logo, maxWidth, sx }: AuthCenteredLayoutProps): ReactNode;
+interface AuthCenteredContentProps {
+    /** Child content */
+    children?: ReactNode;
+    /** Custom max width */
+    maxWidth?: number | string;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Auth centered content wrapper.
+ * Use for the content inside the auth card.
+ */
+declare function AuthCenteredContent({ children, maxWidth, sx }: AuthCenteredContentProps): ReactNode;
+
+/**
+ * Auth Split Layout
+ *
+ * Split-screen authentication layout with illustration and form.
+ *
+ * @module @omnitron-dev/prism/layouts/auth/split
+ */
+
+interface AuthSplitLayoutProps {
+    /** Child content (form) */
+    children?: ReactNode;
+    /** Logo component */
+    logo?: ReactNode;
+    /** Illustration title */
+    title?: string;
+    /** Illustration subtitle */
+    subtitle?: string;
+    /** Illustration image or component */
+    illustration?: ReactNode;
+    /** Show help link */
+    showHelp?: boolean;
+    /** Help link URL */
+    helpUrl?: string;
+    /** Help link text */
+    helpText?: string;
+    /** Settings button */
+    settingsButton?: ReactNode;
+    /** Custom max width for form */
+    maxWidth?: number | string;
+    /** Illustration section sx */
+    illustrationSx?: SxProps<Theme>;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Auth Split Layout - Split-screen with illustration and form.
+ *
+ * Left side: Illustration with title and subtitle
+ * Right side: Authentication form
+ *
+ * @example
+ * ```tsx
+ * <AuthSplitLayout
+ *   logo={<Logo />}
+ *   title="Welcome to Prism"
+ *   subtitle="Sign in to continue to your dashboard"
+ *   illustration={<WelcomeIllustration />}
+ * >
+ *   <LoginForm />
+ * </AuthSplitLayout>
+ * ```
+ */
+declare function AuthSplitLayout({ children, logo, title, subtitle, illustration, showHelp, helpUrl, helpText, settingsButton, maxWidth, illustrationSx, sx, }: AuthSplitLayoutProps): ReactNode;
+interface AuthSplitIllustrationProps {
+    /** Title */
+    title?: string;
+    /** Subtitle */
+    subtitle?: string;
+    /** Illustration image/component */
+    illustration?: ReactNode;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Standalone illustration section for custom split layouts.
+ */
+declare function AuthSplitIllustration({ title, subtitle, illustration, sx }: AuthSplitIllustrationProps): ReactNode;
+interface AuthSplitContentProps {
+    /** Child content */
+    children?: ReactNode;
+    /** Custom max width */
+    maxWidth?: number | string;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Standalone form content section for custom split layouts.
+ */
+declare function AuthSplitContent({ children, maxWidth, sx }: AuthSplitContentProps): ReactNode;
+
+/**
+ * Auth Simple Layout
+ *
+ * Simple, minimal layout for authentication-related pages.
+ *
+ * @module @omnitron-dev/prism/layouts/auth/simple
+ */
+
+interface AuthSimpleLayoutProps {
+    /** Child content */
+    children?: ReactNode;
+    /** Logo component */
+    logo?: ReactNode;
+    /** Show help link */
+    showHelp?: boolean;
+    /** Help link URL */
+    helpUrl?: string;
+    /** Help link text */
+    helpText?: string;
+    /** Settings button */
+    settingsButton?: ReactNode;
+    /** Use compact centered content */
+    compact?: boolean;
+    /** Container max width (for non-compact) */
+    maxWidth?: Breakpoint | false;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Auth Simple Layout - Minimal layout for auth-related pages.
+ *
+ * Use for:
+ * - Error pages (404, 500)
+ * - Maintenance pages
+ * - Simple message pages
+ * - Compact auth forms
+ *
+ * @example
+ * ```tsx
+ * <AuthSimpleLayout logo={<Logo />} compact>
+ *   <NotFoundContent />
+ * </AuthSimpleLayout>
+ * ```
+ */
+declare function AuthSimpleLayout({ children, logo, showHelp, helpUrl, helpText, settingsButton, compact, maxWidth, sx, }: AuthSimpleLayoutProps): ReactNode;
+interface SimpleCompactContentProps {
+    /** Child content */
+    children?: ReactNode;
+    /** MUI sx prop */
+    sx?: SxProps<Theme>;
+}
+/**
+ * Simple compact content wrapper.
+ * Centered, constrained-width content for simple pages.
+ */
+declare function SimpleCompactContent({ children, sx }: SimpleCompactContentProps): ReactNode;
+
+export { AuthCenteredContent, type AuthCenteredContentProps, AuthCenteredLayout, type AuthCenteredLayoutProps, type AuthLayoutProps, type AuthLayoutVariant, AuthSimpleLayout, type AuthSimpleLayoutProps, AuthSplitContent, type AuthSplitContentProps, AuthSplitIllustration, type AuthSplitIllustrationProps, AuthSplitLayout, type AuthSplitLayoutProps, DEFAULT_LAYOUT_CSS_VARS, DRAWER_WIDTHS, DashboardContent, type DashboardContentProps, DashboardLayout, type DashboardLayoutProps, HEADER_HEIGHTS, HeaderSection, type HeaderSectionProps, type HeaderSlots, HeaderToolbar, type HeaderToolbarProps, LAYOUT_CSS_VARS, type LayoutConfig, LayoutContext, type LayoutContextValue, LayoutGlobalStyles, type LayoutGlobalStylesProps, type LayoutNavData, type LayoutNavItem, type LayoutNavSection, LayoutProvider, type LayoutProviderProps, LayoutSection, type LayoutSectionProps, MainSection, type MainSectionProps, MobileSidenav, type MobileSidenavProps, type NavColorMode, type NavigationMenuType, Sidenav, type SidenavProps, type SidenavVariant, SimpleCompactContent, type SimpleCompactContentProps, type TopnavVariant, defaultLayoutConfig, getBaseLayoutCssVars, getNavColorCssVars, mergeLayoutCssVars, useLayoutConfig, useLayoutContext, useNavActive, useSidenavVisible, useTopnavVisible };