@caffeinebounce/ui 0.62.2

package/dist/layouts-DPfDDF53.d.ts

@@ -0,0 +1,1001 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import { ReactNode, ComponentType } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface AdminPageLayoutBackLink {
+    /** URL to navigate back to */
+    href: string;
+    /** Label for the back link */
+    label: string;
+}
+interface AdminPageLayoutProps {
+    /** Page title displayed in header (ignored when backLink is provided) */
+    title?: string;
+    /** Page description/subtitle displayed below title (ignored when backLink is provided) */
+    description?: string;
+    /** Actions to display in the header (buttons, etc.) */
+    actions?: ReactNode;
+    /** Main content */
+    children?: ReactNode;
+    /** Additional class names for the container */
+    className?: string;
+    /** Additional class names for the content area */
+    contentClassName?: string;
+    /** Optional footer content */
+    footer?: ReactNode;
+    /** Optional back link - when provided, title and description are not shown */
+    backLink?: AdminPageLayoutBackLink;
+}
+/**
+ * Shared layout component for admin pages.
+ * Provides consistent padding, spacing, and optional header with title/description.
+ * When backLink is provided, the title/description header is replaced with a back link.
+ *
+ * @example
+ * // With header
+ * <AdminPageLayout title="Users" description="Manage user accounts">
+ *   <AdminUsersManagement />
+ * </AdminPageLayout>
+ *
+ * @example
+ * // With back link (detail pages)
+ * <AdminPageLayout backLink={{ href: "/admin/cohorts", label: "Back to Cohorts" }}>
+ *   <CohortProfile />
+ * </AdminPageLayout>
+ *
+ * @example
+ * // Without header (dashboard style)
+ * <AdminPageLayout>
+ *   <DashboardContent />
+ * </AdminPageLayout>
+ */
+declare function AdminPageLayout({ title, description, actions, children, className, contentClassName, footer, backLink, }: AdminPageLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface AppFooterProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function AppFooter({ children, className }: AppFooterProps): react_jsx_runtime.JSX.Element;
+
+interface HeaderLink {
+    /** Link href */
+    href: string;
+    /** Link label for accessibility */
+    label: string;
+    /** Icon component (defaults to CircleHelp for help, Info for about) */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Keyboard shortcut display (e.g., "⌃⇧H") */
+    shortcutDisplay?: string;
+    /** Tooltip text */
+    tooltip?: string;
+}
+interface AppHeaderProps {
+    /** Show the sidebar trigger button */
+    showSidebarTrigger?: boolean;
+    /** Show the theme toggle */
+    showThemeToggle?: boolean;
+    /** Theme toggle shortcut display */
+    themeToggleShortcut?: string;
+    /** Whether shortcuts are visible based on user preference */
+    shortcutsVisible?: boolean;
+    /** Help link configuration */
+    helpLink?: HeaderLink | string;
+    /** About link configuration */
+    aboutLink?: HeaderLink | string;
+    /** Custom actions to show between the spacer and nav links */
+    actions?: ReactNode;
+    /** Content to show after the sidebar trigger */
+    leadingContent?: ReactNode;
+    /** Additional className */
+    className?: string;
+    /** Link component to use (for Next.js Link, etc.) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Keyboard shortcut display component */
+    ShortcutComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+/**
+ * AppHeader - Standard header bar for app layouts
+ *
+ * Includes SidebarTrigger, help/about links, theme toggle, and custom action slots.
+ *
+ * @example
+ * ```tsx
+ * <AppHeader
+ *   helpLink={{ href: "/help", label: "Help", icon: CircleHelp, shortcutDisplay: "⌃⇧H" }}
+ *   aboutLink="/about"
+ *   actions={<FeedbackButton />}
+ * />
+ * ```
+ */
+declare function AppHeader({ showSidebarTrigger, showThemeToggle, themeToggleShortcut, shortcutsVisible, helpLink, aboutLink, actions, leadingContent, className, LinkComponent, ShortcutComponent, }: AppHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface UserAvatarMenuUser {
+    /** User ID for gradient generation */
+    id: string;
+    /** User email */
+    email?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Display name */
+    name?: string;
+    /** Initials for fallback */
+    initials?: string;
+}
+interface UserAvatarMenuItem {
+    /** Menu item label */
+    label: string;
+    /** Icon component */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Link href (renders as link) */
+    href?: string;
+    /** Click handler (renders as button) */
+    onClick?: () => void;
+    /** Whether link opens in new tab */
+    external?: boolean;
+    /** Keyboard shortcut display string */
+    shortcut?: string;
+    /** Whether to show keyboard shortcut */
+    showShortcut?: boolean;
+    /** Destructive styling (for sign out, delete, etc.) */
+    destructive?: boolean;
+    /** Add separator before this item */
+    separatorBefore?: boolean;
+}
+interface UserAvatarMenuProps {
+    /** User data */
+    user: UserAvatarMenuUser;
+    /** Whether data is loading */
+    loading?: boolean;
+    /** Menu items */
+    items: UserAvatarMenuItem[];
+    /** Avatar size */
+    size?: "sm" | "md" | "lg";
+    /** Position of dropdown */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Dropdown alignment */
+    align?: "start" | "center" | "end";
+    /** Whether menu is controlled */
+    open?: boolean;
+    /** Callback when menu open state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether to show chevron indicator */
+    showChevron?: boolean;
+    /** Whether this menu is currently active/highlighted */
+    isActive?: boolean;
+    /** Custom trigger content (replaces default avatar button) */
+    trigger?: ReactNode;
+    /** Header content shown above menu items */
+    header?: ReactNode;
+    /** Show user name and email in header */
+    showUserInfo?: boolean;
+    /** Menu trigger shortcut display */
+    menuShortcut?: string;
+    /** Custom menu content width */
+    menuWidth?: string;
+    /** Class name for trigger button */
+    className?: string;
+    /** Class name for avatar */
+    avatarClassName?: string;
+    /** Link component for routing */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Custom keyboard shortcut component (for user preference integration) */
+    ShortcutComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+/**
+ * User avatar with dropdown menu for profile actions.
+ * Fully configurable menu items, supports loading state and keyboard shortcuts.
+ */
+declare function UserAvatarMenu({ user, loading, items, size, side, align, open, onOpenChange, showChevron, isActive, trigger, header, showUserInfo, menuShortcut, menuWidth, className, avatarClassName, LinkComponent, ShortcutComponent, }: UserAvatarMenuProps): react_jsx_runtime.JSX.Element;
+
+interface NavItem {
+    /** Display label */
+    label: string;
+    /** Navigation URL */
+    href: string;
+    /** Icon component */
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** Whether this item is currently active */
+    isActive?: boolean;
+    /** Keyboard shortcut display (e.g., "⌃1") */
+    shortcutDisplay?: string;
+    /** Keyboard shortcut key (e.g., "1") - used with Ctrl modifier */
+    shortcutKey?: string;
+    /** Whether the item is disabled (e.g., coming soon) */
+    disabled?: boolean;
+    /** Tooltip text when disabled */
+    disabledTooltip?: string;
+    /** Icon animation on hover */
+    iconAnimation?: "scale" | "rotate" | "bounce" | "none";
+}
+/** Section header with grouped nav items */
+interface NavSection {
+    type: "section";
+    /** Section label (displayed as uppercase header) */
+    label: string;
+    /** Optional icon used when sidebar is collapsed */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** Items within this section */
+    items: NavItem[];
+    /** Whether section is visible (for conditional rendering) */
+    visible?: boolean;
+    /** Whether section is collapsible (click header to expand/collapse) */
+    collapsible?: boolean;
+    /** Whether section starts open (default: true) */
+    defaultOpen?: boolean;
+}
+/** Simple visual divider */
+interface NavDivider {
+    type: "divider";
+}
+/** Union type for all navigation elements */
+type NavElement = NavItem | NavSection | NavDivider;
+/** Type guard for NavItem - checks for required NavItem properties */
+declare function isNavItem(element: NavElement): element is NavItem;
+/** Type guard for NavSection */
+declare function isNavSection(element: NavElement): element is NavSection;
+/** Type guard for NavDivider */
+declare function isNavDivider(element: NavElement): element is NavDivider;
+interface AppSidebarUser {
+    /** User ID */
+    id: string;
+    /** User email */
+    email?: string | null;
+    /** Display name */
+    name?: string;
+    /** User initials for avatar fallback */
+    initials?: string;
+    /** Avatar URL */
+    avatarUrl?: string | null;
+}
+interface AppSidebarProps {
+    /** Navigation elements (items, sections, dividers) */
+    navItems: NavElement[];
+    /** Current pathname for active state detection */
+    pathname?: string;
+    /** User information (null if not logged in) */
+    user?: AppSidebarUser | null;
+    /** User menu items */
+    userMenuItems?: UserAvatarMenuItem[];
+    /** Loading state for user */
+    userLoading?: boolean;
+    /** Header content (e.g., team switcher) */
+    header?: ReactNode;
+    /** Sign out handler */
+    onSignOut?: () => void | Promise<void>;
+    /** Sign in URL (shown when no user) */
+    signInHref?: string;
+    /** Profile page path for active state detection */
+    profilePath?: string;
+    /** Sidebar collapsible mode */
+    collapsible?: "icon" | "offcanvas" | "none";
+    /** Link component (for Next.js) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Keyboard shortcut component */
+    ShortcutComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** User menu keyboard shortcut display */
+    userMenuShortcut?: string;
+    /** Callback for navigation (for keyboard shortcuts) */
+    onNavigate?: (href: string) => void;
+    /** Whether keyboard shortcuts are enabled */
+    enableKeyboardShortcuts?: boolean;
+    /** Whether shortcuts are visible based on user preference */
+    shortcutsVisible?: boolean;
+}
+/**
+ * AppSidebar - A complete sidebar with navigation and user menu
+ *
+ * @example
+ * ```tsx
+ * <AppSidebar
+ *   navItems={[
+ *     { label: "Dashboard", href: "/dashboard", icon: Home },
+ *     { label: "Settings", href: "/settings", icon: Settings },
+ *   ]}
+ *   pathname={pathname}
+ *   user={{ id: "1", email: "user@example.com", name: "John Doe" }}
+ *   userMenuItems={[
+ *     { label: "Profile", href: "/profile", icon: User },
+ *     { label: "Sign Out", onClick: signOut, icon: LogOut, destructive: true },
+ *   ]}
+ *   header={<TeamSwitcher />}
+ * />
+ * ```
+ */
+declare function AppSidebar({ navItems, pathname, user, userMenuItems, userLoading, header, onSignOut, signInHref, profilePath, collapsible, LinkComponent, ShortcutComponent, userMenuShortcut, onNavigate, enableKeyboardShortcuts, shortcutsVisible, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the AppLayout component
+ */
+interface AppLayoutProps {
+    /** Main page content */
+    children: ReactNode;
+    /** Navigation items for the sidebar (supports NavItem, NavSection, NavDivider) */
+    navItems?: NavElement[];
+    /** Header content for sidebar (e.g., team switcher) */
+    sidebarHeader?: ReactNode;
+    /** Custom sidebar element (overrides navItems, user, etc.) */
+    sidebar?: ReactNode;
+    /** Sidebar collapsible mode */
+    sidebarCollapsible?: "icon" | "offcanvas" | "none";
+    /** User information */
+    user?: AppSidebarUser | null;
+    /** User loading state */
+    userLoading?: boolean;
+    /** User menu items */
+    userMenuItems?: UserAvatarMenuItem[];
+    /** Sign out handler */
+    onSignOut?: () => void | Promise<void>;
+    /** Sign in URL */
+    signInHref?: string;
+    /** Current pathname (for active states) */
+    pathname?: string;
+    /** Show the header */
+    showHeader?: boolean;
+    /** Show sidebar trigger in header */
+    showSidebarTrigger?: boolean;
+    /** Show theme toggle in header */
+    showThemeToggle?: boolean;
+    /** Theme toggle shortcut display */
+    themeToggleShortcut?: string;
+    /** Whether shortcuts are visible based on user preference */
+    shortcutsVisible?: boolean;
+    /** Help link configuration */
+    helpLink?: HeaderLink | string;
+    /** About link configuration */
+    aboutLink?: HeaderLink | string;
+    /** Custom header actions */
+    headerActions?: ReactNode;
+    /** Custom header leading content */
+    headerLeading?: ReactNode;
+    /** Custom header element (overrides all header props) */
+    header?: ReactNode;
+    /** Additional className for the header */
+    headerClassName?: string;
+    /** Show floating user menu when sidebar collapsed */
+    showFloatingUserMenu?: boolean;
+    /** Additional className for the root container */
+    className?: string;
+    /** Default sidebar open state */
+    defaultOpen?: boolean;
+    /** Controlled sidebar open state */
+    open?: boolean;
+    /** Callback when sidebar state changes */
+    onOpenChange?: (open: boolean) => void;
+    /** Link component (for Next.js) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Keyboard shortcut component */
+    ShortcutComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** User menu keyboard shortcut display */
+    userMenuShortcut?: string;
+    /** Callback for navigation (for keyboard shortcuts) */
+    onNavigate?: (href: string) => void;
+    /** Whether keyboard shortcuts are enabled for nav items */
+    enableNavShortcuts?: boolean;
+}
+/**
+ * A layout component for authenticated app pages with sidebar and header.
+ *
+ * Includes sensible defaults for common patterns:
+ * - Sidebar with navigation and user menu
+ * - Header with SidebarTrigger, help/about links, theme toggle
+ * - Floating user menu when sidebar is collapsed
+ *
+ * All elements can be customized via props or disabled entirely.
+ *
+ * @example
+ * ```tsx
+ * // Minimal usage with defaults
+ * <AppLayout
+ *   navItems={[
+ *     { label: "Dashboard", href: "/dashboard", icon: Home },
+ *     { label: "Settings", href: "/settings", icon: Settings },
+ *   ]}
+ *   user={user}
+ *   userMenuItems={[{ label: "Profile", href: "/profile", icon: User }]}
+ *   onSignOut={handleSignOut}
+ *   helpLink="/help"
+ *   aboutLink="/about"
+ * >
+ *   <DashboardContent />
+ * </AppLayout>
+ *
+ * // Full customization
+ * <AppLayout
+ *   sidebar={<CustomSidebar />}
+ *   header={<CustomHeader />}
+ *   showFloatingUserMenu={false}
+ * >
+ *   <DashboardContent />
+ * </AppLayout>
+ * ```
+ */
+declare function AppLayout({ children, navItems, sidebarHeader, sidebar: customSidebar, sidebarCollapsible, user, userLoading, userMenuItems, onSignOut, signInHref, pathname, showHeader, showSidebarTrigger, showThemeToggle, themeToggleShortcut, shortcutsVisible, helpLink, aboutLink, headerActions, headerLeading, header: customHeader, headerClassName, showFloatingUserMenu, className, defaultOpen, open, onOpenChange, LinkComponent, ShortcutComponent, userMenuShortcut, onNavigate, enableNavShortcuts, }: AppLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface BasePageLayoutProps {
+    /** Page title displayed in header */
+    title?: string;
+    /** Page description/subtitle displayed below title */
+    description?: string;
+    /** Actions to display in the header (buttons, etc.) */
+    actions?: ReactNode;
+    /** Main content */
+    children?: ReactNode;
+    /** Additional class names for the container */
+    className?: string;
+    /** Additional class names for the content area */
+    contentClassName?: string;
+    /** Optional footer content */
+    footer?: ReactNode;
+}
+/**
+ * Base layout component for application pages.
+ * Provides consistent padding, spacing, and optional header with title/description.
+ * Used by AdminPageLayout and UserPageLayout.
+ */
+declare function BasePageLayout({ title, description, actions, children, className, contentClassName, footer, }: BasePageLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardGridProps {
+    /** Content to render inside the dashboard grid layout. */
+    children: React.ReactNode;
+    /** Additional CSS class names to apply to the root container. */
+    className?: string;
+}
+/**
+ * Dashboard layout container for stacking page sections with consistent spacing.
+ *
+ * Use \`DashboardGrid\` to wrap the main content areas of a dashboard page, such as
+ * summary cards, data tables, and activity feeds. It arranges children in a
+ * vertical column with a standard gap, while allowing additional layout control
+ * via the \`className\` prop.
+ *
+ * @remarks
+ * This component is intentionally minimal and only manages vertical spacing.
+ * Combine it with other layout primitives (such as card, grid, or section
+ * components) to build rich dashboard views.
+ *
+ * @example Basic usage
+ * \`\`\`tsx
+ * import { DashboardGrid } from "@caffeinebounce/ui";
+ *
+ * function DashboardPage() {
+ *   return (
+ *     <DashboardGrid>
+ *       <StatsOverview />
+ *       <RecentActivity />
+ *       <TeamTable />
+ *     </DashboardGrid>
+ *   );
+ * }
+ * \`\`\`
+ *
+ * @example With custom spacing and max width
+ * \`\`\`tsx
+ * <DashboardGrid className="max-w-6xl mx-auto gap-6">
+ *   <StatsOverview />
+ *   <RecentActivity />
+ * </DashboardGrid>
+ * \`\`\`
+ *
+ * @param props - Dashboard layout props.
+ */
+declare function DashboardGrid({ children, className }: DashboardGridProps): react_jsx_runtime.JSX.Element;
+
+interface FloatingUserMenuUser {
+    /** User ID */
+    id: string;
+    /** User email */
+    email?: string | null;
+    /** Display name */
+    name?: string;
+    /** User initials for avatar fallback */
+    initials?: string;
+    /** Avatar URL */
+    avatarUrl?: string | null;
+}
+interface FloatingUserMenuProps {
+    /** User information (null if not logged in or loading) */
+    user?: FloatingUserMenuUser | null;
+    /** User menu items */
+    menuItems?: UserAvatarMenuItem[];
+    /** Loading state */
+    loading?: boolean;
+    /** Sign out handler */
+    onSignOut?: () => void | Promise<void>;
+    /** Current pathname for active state detection */
+    pathname?: string;
+    /** Profile page path pattern */
+    profilePath?: string;
+    /** Link component (for Next.js) */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+/**
+ * FloatingUserMenu - A floating user avatar menu that appears when sidebar is collapsed
+ *
+ * Only renders when sidebar is in mobile/collapsed mode.
+ *
+ * @example
+ * ```tsx
+ * <FloatingUserMenu
+ *   user={{ id: "1", email: "user@example.com", name: "John Doe" }}
+ *   menuItems={[
+ *     { label: "Profile", href: "/profile", icon: User },
+ *   ]}
+ *   onSignOut={handleSignOut}
+ * />
+ * ```
+ */
+declare function FloatingUserMenu({ user, menuItems, loading, onSignOut, pathname, profilePath, LinkComponent, }: FloatingUserMenuProps): react_jsx_runtime.JSX.Element | null;
+
+interface HelpLayoutProps {
+    children: ReactNode;
+    panel: ReactNode;
+    isOpen: boolean;
+    className?: string;
+}
+/**
+ * HelpLayout wraps content and shifts it when the help panel is open.
+ * This allows users to continue working while viewing help.
+ *
+ * The layout maintains bounded height (h-full) to ensure child components
+ * like AppLayout can use sticky headers with overflow-y-auto content areas.
+ */
+declare function HelpLayout({ children, panel, isOpen, className, }: HelpLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface HelpBreadcrumb {
+    label: string;
+    href: string;
+}
+interface HelpPageLayoutProps {
+    /** Breadcrumbs to display at the top */
+    breadcrumbs?: HelpBreadcrumb[];
+    /** Page title */
+    title: string;
+    /** Page description */
+    description?: string;
+    /** Main content */
+    children: ReactNode;
+    /** Sidebar content */
+    sidebar?: ReactNode;
+    /** Additional content (e.g. related articles) displayed below main content or in a sidebar */
+    relatedContent?: ReactNode;
+    /** Additional class names for the container */
+    className?: string;
+    /** Additional class names for the content area */
+    contentClassName?: string;
+    /** Home link href (defaults to /admin/help) */
+    homeHref?: string;
+}
+/**
+ * Layout component for help pages.
+ * Includes breadcrumbs, header, and consistent spacing for content and related articles.
+ */
+declare function HelpPageLayout({ breadcrumbs, title, description, children, sidebar, relatedContent, className, contentClassName, homeHref, }: HelpPageLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface HelpPanelLayoutProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onBack?: () => void;
+    canGoBack?: boolean;
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    children: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+}
+declare function HelpPanelLayout({ isOpen, onClose, onBack, canGoBack, searchQuery, onSearchChange, children, footer, className, }: HelpPanelLayoutProps): react_jsx_runtime.JSX.Element | null;
+
+/**
+ * Props for the LegalLayout component
+ */
+interface LegalLayoutProps {
+    /** Page title */
+    title: string;
+    /** Last updated date */
+    lastUpdated?: string;
+    /** URL to the archive/version history page */
+    archiveUrl?: string;
+    /** Optional URL for the header back link */
+    backHref?: string;
+    /** Accessible label for the header back link */
+    backLabel?: string;
+    /** Table of contents items */
+    tableOfContents?: {
+        id: string;
+        title: string;
+    }[];
+    /** Main content */
+    children: ReactNode;
+    /** Additional className for the root container */
+    className?: string;
+}
+/**
+ * A layout component for legal pages with clean typography, table of contents, and print-friendly styling.
+ *
+ * @example
+ * ```tsx
+ * <LegalLayout
+ *   title="Terms of Service"
+ *   lastUpdated="2024-01-15"
+ *   tableOfContents={[
+ *     { id: "acceptance", title: "Acceptance of Terms" },
+ *     { id: "accounts", title: "Account Responsibilities" }
+ *   ]}
+ * >
+ *   <LegalSection id="acceptance" title="Acceptance of Terms">
+ *     Content here...
+ *   </LegalSection>
+ * </LegalLayout>
+ * ```
+ */
+declare function LegalLayout({ title, lastUpdated, archiveUrl, backHref, backLabel, tableOfContents, children, className, }: LegalLayoutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the LegalSection component
+ */
+interface LegalSectionProps {
+    /** Section ID for anchor links */
+    id: string;
+    /** Section title */
+    title: string;
+    /** Section content */
+    children: ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * A styled section component for legal documents with anchor support.
+ *
+ * @example
+ * ```tsx
+ * <LegalSection id="privacy-policy" title="Privacy Policy">
+ *   <p>Your privacy is important to us...</p>
+ * </LegalSection>
+ * ```
+ */
+declare function LegalSection({ id, title, children, className, }: LegalSectionProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for the MarketingLayout component
+ */
+interface MarketingLayoutProps {
+    /** Navigation bar element */
+    navbar: ReactNode;
+    /** Main page content */
+    children: ReactNode;
+    /** Footer element */
+    footer?: ReactNode;
+    /** Additional className for the main content area */
+    mainClassName?: string;
+    /** Additional className for the root container */
+    className?: string;
+}
+/**
+ * A layout component for marketing/public pages with navbar, main content, and footer.
+ *
+ * @example
+ * ```tsx
+ * <MarketingLayout
+ *   navbar={<Navbar />}
+ *   footer={<Footer />}
+ * >
+ *   <HeroSection />
+ *   <FeaturesSection />
+ * </MarketingLayout>
+ * ```
+ */
+declare function MarketingLayout({ navbar, children, footer, mainClassName, className, }: MarketingLayoutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Script to prevent flash of unstyled content (FOUC) when using dark mode.
+ * Runs immediately before React hydration.
+ */
+declare const themeScript = "\n  (function() {\n    try {\n      var theme = localStorage.getItem('theme');\n      var isDark =\n        theme === 'dark' ||\n        ((theme === 'system' || !theme) &&\n          window.matchMedia('(prefers-color-scheme: dark)').matches);\n      document.documentElement.classList.toggle('dark', isDark);\n    } catch (e) {}\n  })();\n";
+/**
+ * Font configuration for RootLayout.
+ *
+ * Next.js fonts provide two things:
+ * - `.variable` - A CSS class that defines a CSS variable (e.g., `--font-geist-sans`)
+ * - `.className` - A CSS class that applies the font directly
+ *
+ * This interface accepts CSS variable class names to define font variables,
+ * and CSS variable references to apply specific fonts to elements.
+ */
+interface RootLayoutFont {
+    /**
+     * Font variable classes to apply to the root element.
+     * These classes define CSS variables that can be used throughout the app.
+     * Pass Next.js font `.variable` properties here.
+     * @example `${GeistSans.variable} ${GeistMono.variable}`
+     */
+    variables?: string;
+    /**
+     * CSS variable for body text font-family.
+     * @example "var(--font-geist-sans)"
+     * @default Uses Tailwind's font-sans
+     */
+    body?: string;
+    /**
+     * CSS variable for header text (h1-h6) font-family.
+     * @example "var(--font-geist-mono)"
+     * @default Inherits from body font
+     */
+    headers?: string;
+    /**
+     * CSS variable for monospace elements (code, pre, kbd, samp).
+     * @example "var(--font-geist-mono)"
+     * @default Uses Tailwind's font-mono
+     */
+    mono?: string;
+}
+/**
+ * Analytics configuration for RootLayout.
+ */
+interface RootLayoutAnalytics {
+    /**
+     * Microsoft Clarity project ID.
+     * Get your project ID from https://clarity.microsoft.com/
+     */
+    clarityProjectId?: string;
+    /**
+     * Google Analytics (GA4) measurement ID.
+     * Get your measurement ID from https://analytics.google.com/
+     */
+    googleAnalyticsId?: string;
+}
+/**
+ * Toast configuration for RootLayout.
+ */
+interface RootLayoutToast {
+    /**
+     * Show the Toaster component for notifications.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Position of the toaster.
+     * @default "bottom-right"
+     */
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
+}
+interface RootLayoutProps {
+    /** Main page content */
+    children: ReactNode;
+    /**
+     * Structured font configuration for different text types.
+     * @example { body: GeistSans.variable, headers: GeistMono.variable, mono: GeistMono.variable }
+     */
+    font?: RootLayoutFont;
+    /**
+     * Font CSS variable classes to apply to body.
+     * @deprecated Use font.body instead for better structure and flexibility
+     * @example "font-sans" or "${GeistSans.variable} ${GeistMono.variable}"
+     */
+    fontClassName?: string;
+    /**
+     * Analytics configuration.
+     * @example { clarityProjectId: process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID, googleAnalyticsId: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID }
+     */
+    analytics?: RootLayoutAnalytics;
+    /**
+     * Toast notification configuration.
+     * @default { enabled: true, position: "bottom-right" }
+     */
+    toast?: RootLayoutToast;
+    /**
+     * Additional className for the root container.
+     */
+    className?: string;
+}
+/**
+ * Root layout body component providing consistent styling, theming, and common elements.
+ *
+ * This component handles:
+ * - Base body styles (min-height, background, text, antialiasing)
+ * - Font variable classes (body, headers, mono)
+ * - Analytics integrations (Clarity, etc.)
+ * - Toast notifications
+ *
+ * Note: This wraps the `<body>` content. The `<html>` tag, `<head>`, and metadata
+ * should be handled by your Next.js app's layout.tsx file.
+ *
+ * @example
+ * ```tsx
+ * // In your app's layout.tsx - New API
+ * import { RootLayout, themeScript } from "@caffeinebounce/ui";
+ * import { GeistSans, GeistMono } from "geist/font";
+ *
+ * export default function Layout({ children }) {
+ *   return (
+ *     <html lang="en" suppressHydrationWarning>
+ *       <head>
+ *         <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+ *       </head>
+ *       <body>
+ *         <RootLayout
+ *           font={{
+ *             variables: `${GeistSans.variable} ${GeistMono.variable}`,
+ *             headers: "var(--font-geist-sans)",
+ *             mono: "var(--font-geist-mono)",
+ *           }}
+ *           analytics={{
+ *             clarityProjectId: process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID,
+ *             googleAnalyticsId: process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID,
+ *           }}
+ *         >
+ *           {children}
+ *         </RootLayout>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ *
+ * // Legacy API (still supported, but headers/mono won't be customizable)
+ * <RootLayout
+ *   fontClassName={`${GeistSans.variable} ${GeistMono.variable}`}
+ *   analytics={{ clarityProjectId: process.env.NEXT_PUBLIC_CLARITY_PROJECT_ID }}
+ * >
+ *   {children}
+ * </RootLayout>
+ * ```
+ */
+declare function RootLayout({ children, font, fontClassName, analytics, toast, className, }: RootLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface PageTab {
+    /** Unique value identifier for the tab */
+    value: string;
+    /** Display label for the tab */
+    label: string;
+    /** Optional icon component */
+    icon?: LucideIcon;
+    /** Tab content */
+    content: React$1.ReactNode;
+}
+interface UserPageLayoutBackLink {
+    /** URL to navigate back to */
+    href: string;
+    /** Label for the back link */
+    label: string;
+}
+interface UserPageLayoutProps {
+    /** Page title displayed in header (ignored when backLink is provided) */
+    title?: string;
+    /** Page description/subtitle displayed below title (ignored when backLink is provided) */
+    description?: string;
+    /** Actions to display in the header (buttons, etc.) */
+    actions?: React$1.ReactNode;
+    /** Additional class names for the container */
+    className?: string;
+    /** Additional class names for the content area */
+    contentClassName?: string;
+    /** Whether to show a bottom border on the header (not used in BasePageLayout currently, but kept for compatibility if needed) */
+    headerBordered?: boolean;
+    /** Optional back link - when provided, title and description are not shown */
+    backLink?: UserPageLayoutBackLink;
+    /** Loading state - shows skeleton if true */
+    loading?: boolean;
+    /** Custom loading skeleton */
+    loadingSkeleton?: React$1.ReactNode;
+    /** Optional tabs configuration - when provided, renders tabbed layout */
+    tabs?: PageTab[];
+    /** Default selected tab value (first tab if not specified) */
+    defaultTab?: string;
+    /** Callback when tab changes */
+    onTabChange?: (value: string) => void;
+    /** Main content (optional if tabs are provided) */
+    children?: React$1.ReactNode;
+    /** Optional footer content */
+    footer?: React$1.ReactNode;
+}
+/**
+ * UserPageLayout - Standard layout for user app pages.
+ * Provides consistent padding, spacing, and optional header with title/description.
+ * When backLink is provided, the title/description header is replaced with a back link.
+ */
+declare function UserPageLayout({ title, description, actions, className, contentClassName, loading, loadingSkeleton, children, tabs, defaultTab, onTabChange, footer, backLink, }: UserPageLayoutProps): react_jsx_runtime.JSX.Element;
+
+type SaveStatus = "idle" | "saving" | "saved" | "error";
+interface AutoSaveIndicatorProps extends React$1.ComponentProps<"span"> {
+    status: SaveStatus;
+}
+/**
+ * AutoSaveIndicator - Visual indicator for auto-save status
+ *
+ * @example
+ * <AutoSaveIndicator status="saving" />
+ * <AutoSaveIndicator status="saved" />
+ * <AutoSaveIndicator status="error" />
+ */
+declare function AutoSaveIndicator({ status, className, ...props }: AutoSaveIndicatorProps): react_jsx_runtime.JSX.Element | null;
+
+interface StepperStep {
+    id: string;
+    label: string;
+    description?: string;
+}
+type StepperMobileVariant = "summary" | "steps";
+type StepperSize = "default" | "compact";
+interface StepperProps extends React$1.ComponentProps<"nav"> {
+    steps: StepperStep[];
+    currentStep: string;
+    completedSteps: string[];
+    onStepClick?: (stepId: string) => void;
+    mobileVariant?: StepperMobileVariant;
+    size?: StepperSize;
+}
+declare function Stepper({ steps, currentStep, completedSteps, onStepClick, mobileVariant, size, className, ...props }: StepperProps): react_jsx_runtime.JSX.Element;
+
+interface WizardLayoutProps {
+    children: ReactNode;
+    steps: StepperStep[];
+    currentStep: string;
+    completedSteps: string[];
+    onStepClick?: (stepId: string) => void;
+    /** Progress percentage (0-100) */
+    progress: number;
+    /** Time remaining estimate */
+    timeRemaining?: number;
+    /** Save status for auto-save indicator */
+    saveStatus?: SaveStatus;
+    /** Optional deadline info */
+    deadline?: {
+        label: string;
+        daysRemaining: number | null;
+    };
+    /** Whether the wizard has been submitted/completed */
+    isSubmitted?: boolean;
+    /** Custom submitted banner title */
+    submittedTitle?: string;
+    /** Custom submitted banner subtitle */
+    submittedSubtitle?: string;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom loading message */
+    loadingMessage?: string;
+    /** Error state */
+    error?: string;
+    className?: string;
+}
+declare function WizardLayout({ children, steps, currentStep, completedSteps, onStepClick, progress, timeRemaining, saveStatus, deadline, isSubmitted, submittedTitle, submittedSubtitle, loading, loadingMessage, error, className, }: WizardLayoutProps): react_jsx_runtime.JSX.Element;
+
+export { type UserPageLayoutProps as $, AdminPageLayout as A, BasePageLayout as B, type MarketingLayoutProps as C, DashboardGrid as D, type NavElement as E, FloatingUserMenu as F, type NavItem as G, type HeaderLink as H, type NavSection as I, type RootLayoutAnalytics as J, type RootLayoutFont as K, LegalLayout as L, MarketingLayout as M, type NavDivider as N, type RootLayoutProps as O, type RootLayoutToast as P, Stepper as Q, RootLayout as R, type SaveStatus as S, type StepperProps as T, type StepperStep as U, UserAvatarMenu as V, type UserAvatarMenuItem as W, type UserAvatarMenuProps as X, type UserAvatarMenuUser as Y, UserPageLayout as Z, type UserPageLayoutBackLink as _, type AdminPageLayoutBackLink as a, WizardLayout as a0, type WizardLayoutProps as a1, isNavDivider as a2, isNavItem as a3, isNavSection as a4, themeScript as a5, type AdminPageLayoutProps as b, AppFooter as c, type AppFooterProps as d, AppHeader as e, type AppHeaderProps as f, AppLayout as g, type AppLayoutProps as h, AppSidebar as i, type AppSidebarProps as j, type AppSidebarUser as k, AutoSaveIndicator as l, type BasePageLayoutProps as m, type DashboardGridProps as n, type FloatingUserMenuProps as o, type FloatingUserMenuUser as p, type HelpBreadcrumb as q, HelpLayout as r, type HelpLayoutProps as s, HelpPageLayout as t, type HelpPageLayoutProps as u, HelpPanelLayout as v, type HelpPanelLayoutProps as w, type LegalLayoutProps as x, LegalSection as y, type LegalSectionProps as z };