import { default as React } from 'react';
export interface SectionConfig {
    /** Unique identifier (kebab-case), used in URL path */
    id: string;
    /** Display label for the TOC item */
    label: string;
    /** Optional category for grouping in the TOC sidebar */
    category?: string;
    /** Lazy-loaded section component */
    component: React.LazyExoticComponent<React.ComponentType<Record<string, never>>>;
}
export interface DynamicSectionsPageProps {
    /** Array of section configurations */
    sections: SectionConfig[];
    /** Hero card or intro content shown at the top */
    hero: React.ReactNode;
    /** Title for the table of contents sidebar */
    tocTitle?: string;
    /** Optional placeholder when no section is selected (defaults to a sections grid) */
    placeholder?: React.ReactNode;
    /** Hide hero content when a subsection is selected */
    hideHeroInSubSections?: boolean;
}
/**
 * Hook that extracts the current section from the URL wildcard param
 * and provides navigation helpers.
 *
 * Requires the parent route to be registered with `enableNestedRoutes: true`
 * (which appends /* to the route path).
 */
export declare function useDynamicSection(sectionIds: string[]): {
    sectionId: string | undefined;
    basePath: string;
    navigateToSection: (id: string) => void;
    navigateToBase: () => void;
};
/**
 * Generic page component that renders a TOC sidebar + a single section
 * based on the current URL. Each section gets its own route/page.
 *
 * Usage:
 * ```tsx
 * const sections: SectionConfig[] = [
 *   { id: 'button', label: 'Button', category: 'Buttons', component: lazy(() => import('./ButtonSection')) },
 * ];
 * <DynamicSectionsPage sections={sections} hero={<HeroCard ... />} />
 * ```
 */
export declare const DynamicSectionsPage: React.FC<DynamicSectionsPageProps>;
export default DynamicSectionsPage;
