import type { BaseProps } from '../BaseProps';
import type { OutlineItem } from './types';
export type { OutlineItem } from './types';
export interface OutlineProps extends BaseProps<HTMLElement> {
    /** Ref forwarded to the root nav element. */
    ref?: React.Ref<HTMLElement>;
    /** Ordered list of heading items to render. */
    items: OutlineItem[];
    /** ID of the currently active item. When provided, disables built-in scroll-spy. */
    activeId?: string;
    /** Called when the active item changes from scroll-spy or click. */
    onActiveIdChange?: (id: string) => void;
    /** Accessible label for the nav landmark. @default 'Table of contents' */
    label?: string;
    /**
     * Density variant controlling item padding.
     * - 'default': Standard spacing (default)
     * - 'compact': Reduced spacing for dense UIs
     * @default 'default'
     */
    density?: 'default' | 'compact';
    /**
     * Called when navigation to an item begins, before the scroll starts.
     * Receives the item `id`. Pair with `onNavigateEnd` to drive an arrival
     * effect (flash, ring, pulse) on the target heading.
     */
    onNavigateStart?: (id: string) => void;
    /**
     * Called once when navigation to an item resolves — when the smooth scroll
     * settles, or immediately-ish when reduced motion turns it into a jump.
     *
     * Fires exactly once for every `onNavigateStart`, including when the user
     * interrupts the scroll by scrolling manually, so a "navigating" state can
     * never leak. It does not fire if the Outline unmounts mid-scroll.
     */
    onNavigateEnd?: (id: string) => void;
    /**
     * Height in px of a fixed header overlaying the top of the scroll root.
     *
     * Shifts both the activation line *and* the scroll landing by the same
     * amount, so a heading activates exactly where navigating to it puts it —
     * below the header rather than hidden underneath it.
     *
     * It composes with each heading's own `scroll-margin-top` (the header, then
     * the breathing room below it) rather than replacing it. When nothing
     * overlays the content, leave this at 0 and let `scroll-margin-top` do the
     * work — the browser already honors it.
     *
     * @default 0
     */
    offset?: number;
    /**
     * Scroll container to track, instead of auto-detecting the nearest scrollable
     * ancestor. Use this when the content scrolls inside a split pane, modal, or
     * dashboard panel rather than the viewport.
     */
    scrollContainerRef?: React.RefObject<HTMLElement | null>;
    /**
     * Whether activating an item smooth-scrolls to it. Set to false to own the
     * scrolling yourself (virtualized content, a router) — the Outline still
     * updates the active item, the hash, and the navigate callbacks, but performs
     * no scroll and suppresses the anchor's default jump.
     * @default true
     */
    hasScrollOnClick?: boolean;
    /** Test ID for testing frameworks. */
    'data-testid'?: string;
}
/**
 * A table-of-contents navigation component for document headings.
 *
 * Outline accepts a flat `items` array and renders anchor links with
 * indentation based on each heading level. Features a sliding indicator
 * track that animates to the active item.
 *
 * When `activeId` is omitted, it tracks scroll position and marks the last
 * heading whose top has passed its activation line — which is exactly where
 * navigating to that heading lands it: `offset` (a fixed header overlaying the
 * scroll root) plus the heading's own `scroll-margin-top`. It defaults to the
 * first item at the top and the last at the bottom.
 *
 * Keyboard: the list is a single tab stop (roving tabindex), seated on the
 * active heading. Arrow keys move between headings, Home/End jump to the ends,
 * and Enter/Space activate — so a long table of contents costs one Tab press,
 * not one per heading.
 *
 * @example
 * ```
 * <Outline
 *   items={[
 *     {id: 'intro', label: 'Introduction', level: 1},
 *     {id: 'features', label: 'Features', level: 2},
 *     {id: 'api', label: 'API Reference', level: 1},
 *   ]}
 * />
 * ```
 *
 * Scoped to a custom scroll container, under a fixed header:
 *
 * @example
 * ```
 * const scrollContainerRef = useRef<HTMLDivElement>(null);
 * <div ref={scrollContainerRef} style={{overflowY: 'auto'}}>...</div>
 * <Outline
 *   items={items}
 *   scrollContainerRef={scrollContainerRef}
 *   offset={64}
 *   onNavigateEnd={id => flashHeading(id)}
 * />
 * ```
 */
export declare function Outline({ items, activeId, onActiveIdChange, label: labelFromProps, density, onNavigateStart, onNavigateEnd, offset, scrollContainerRef, hasScrollOnClick, xstyle, className, style, ref, 'data-testid': testId, ...props }: OutlineProps): import("react").JSX.Element;
export declare namespace Outline {
    var displayName: string;
}
//# sourceMappingURL=Outline.d.ts.map