import { default as React, ReactNode } from 'react';
/**
 * MasterListItem - Standardized list item with rounded selection overlay
 *
 * Provides consistent selection styling across all master-detail layouts
 */
export interface MasterListItemProps {
    /** Whether this item is currently selected */
    isSelected: boolean;
    /** Click handler */
    onClick: () => void;
    /** Icon component to display (optional) */
    icon?: React.ComponentType<{
        className?: string;
    }>;
    /** Main label text */
    label: string;
    /** Description text (optional) */
    description?: string;
    /** Custom className for additional styling */
    className?: string;
}
export declare const MasterListItem: React.FC<MasterListItemProps>;
export interface MasterDetailLayoutProps {
    /** Title shown above the master panel (navigation/sidebar) */
    masterTitle?: string;
    /** Subtitle shown below master title, above the content list (e.g., wallet address) */
    masterSubtitle?: string;
    /** Text shown in the back button on mobile (e.g., page name like "Documentation") */
    backButtonText?: string;
    /** Content for the master panel (left side on desktop, navigation view on mobile) */
    masterContent: ReactNode;
    /** Content for the detail panel (right side on desktop, content view on mobile) */
    detailContent: ReactNode;
    /** Title for the detail panel - should match the selected item from master list */
    detailTitle?: string;
    /** Optional content rendered above the master-detail area, sticky to top */
    topContent?: ReactNode;
    /** Optional content rendered below the master-detail area, sticky to bottom */
    bottomContent?: ReactNode;
    /** Current mobile view state - "navigation" shows master, "content" shows detail */
    mobileView?: 'navigation' | 'content';
    /** Callback when user wants to switch to navigation view on mobile */
    onBackToNavigation?: () => void;
    /** Custom class for master panel container */
    masterClassName?: string;
    /** Custom class for detail panel container */
    detailClassName?: string;
    /** Custom class for detail title */
    detailTitleClassName?: string;
    /** Width of the master panel on desktop (default: 320px) */
    masterWidth?: number;
    /** Whether to make the master panel sticky on desktop (default: true) */
    stickyMaster?: boolean;
    /** Top offset for sticky master panel (default: 96px / top-24) */
    stickyTopOffset?: number;
    /** Gap between master and detail panels on desktop (default: 32px / gap-8) */
    desktopGap?: number;
    /** Whether to show the master panel background on mobile (default: true) */
    showMasterBackground?: boolean;
    /** Enable smooth fade animations when content changes (default: true) */
    enableAnimations?: boolean;
    /** Animation duration in milliseconds (default: 300) */
    animationDuration?: number;
    /** Content key to trigger animations when changed (e.g., section ID) */
    contentKey?: string;
    /** Ref to access animation trigger function */
    animationRef?: React.MutableRefObject<{
        triggerTransition: (onContentChange: () => void) => void;
    } | null>;
}
/**
 * MasterDetailLayout - A responsive master-detail layout component
 *
 * Features:
 * - Desktop: Side-by-side layout with sticky master panel (sidebar)
 * - Mobile: Toggle between master (navigation) and detail (content) views
 * - Customizable widths, gaps, and styling
 * - Built-in back button for mobile navigation
 * - Dark mode support
 * - Smooth transitions support via refs
 * - Sticky top/bottom content panels
 *
 * @example
 * ```tsx
 * <MasterDetailLayout
 *   masterTitle="Table of Contents"
 *   masterContent={<NavigationMenu items={sections} />}
 *   detailContent={<Article content={currentSection} />}
 *   mobileView={view}
 *   onBackToNavigation={() => setView('navigation')}
 * />
 * ```
 */
export declare const MasterDetailLayout: React.FC<MasterDetailLayoutProps>;
//# sourceMappingURL=MasterDetailLayout.d.ts.map