import "./section_nav.css";
import type * as React from "react";
import { type ReactNode } from "react";
import { useRender } from "@base-ui/react/use-render";
import { type IconName } from "./icon";
import { type StyleProps } from "./style_props";
/** A staged section's place in the work: behind, the one being worked, ahead. */
export type SectionNavStep = "done" | "current" | "waiting";
/** `issue` says where to look; the section still states it beside its fields. */
export interface SectionNavItem<K extends string = string> {
    key: K;
    label: string;
    /** A `Count` at the row's end, never written into the label. */
    count?: number;
    issue?: "warning" | "danger";
    /** Where a staged section stands, in the leading slot — the kit's step marker at the glyph's size, the face a
     *  checklist's step wears in the same state: done a filled disc with its tick, the one being worked an accent
     *  ring with its word under the name (after it in a strip), a waiting one a hollow ring. Only a stop that is a step of the work
     *  carries one. */
    step?: SectionNavStep;
    /** What the section holds, as a glyph in muted ink in the same leading slot; a step's mark stands there
     *  instead. An item with neither is its name alone. */
    icon?: IconName;
    /** A page of its own rather than a place on this one: a link ending on a chevron, which `onOpen` follows.
     *  Listed after the stops on the page; never the one in view. */
    page?: true;
    /** An end the work takes instead of its steps — a cancellation, a refusal: led by its glyph, never a step's
     *  mark, and set apart from the items before it. List it after the steps. */
    exit?: true;
}
export interface SectionNavLabels {
    sections: string;
    needsAttention: string;
    hasProblem: string;
    done: string;
    current: string;
    waiting: string;
}
export interface SectionNavProps<K extends string = string> extends StyleProps {
    /** In page order, as `useSectionNav` spies. */
    items: readonly SectionNavItem<K>[];
    /** The section in view: highlighted, and announced as the reader's location. */
    activeKey?: K;
    onJump: (key: K) => void;
    /** A `page` item's press: its own page opens. */
    onOpen?: (key: K) => void;
    /** `rail` in a desk's gutter; `strip` pinned over a narrow column, scrolling sideways, never hiding a
     *  section behind a press. Decided from the caller's measured container, never the window. */
    form: "rail" | "strip";
    /** A `BackButton`, above the rail's items; a strip leaves it to the page. */
    back?: ReactNode;
    labels?: Partial<SectionNavLabels>;
    testID?: string;
    ref?: React.Ref<HTMLElement>;
    render?: useRender.RenderProp;
}
/**
 * A LONG SURFACE'S SECTIONS, one press each (`useSectionNav` is the spy half): a rail in the gutter — the way
 * back, then each section by its name — or, on a narrow column, a strip of the same names pinned at its top
 * that scrolls sideways. The section in view is highlighted in both and follows the scroll; a staged section
 * carries its step; a page of its own is a link ending on a chevron. Pass `render={<nav aria-label=… />}`: the
 * items announce as buttons.
 */
export declare function SectionNav<K extends string = string>(props: SectionNavProps<K>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;