import type { ReactNode } from "react";
/** One entry in a SectionRail. */
export interface RailSection {
    /** Unique key, matched against `activeId` and passed to `onSelect`. */
    id: string;
    /** Section name. */
    label: string;
    /** Decorative leading icon, hidden from assistive tech; the label carries the name. */
    icon?: ReactNode;
    /** Shows a dot, and `dirtyHint` to screen readers, on a section holding unsaved edits. */
    isDirty?: boolean;
}
/** Props for the section navigation of a long settings screen: a rail on wide viewports, a Select below `collapseBelow`. */
export interface SectionRailProps {
    /** Entries in display order. */
    sections: RailSection[];
    /** Id of the current section; marked `aria-current="true"` (and selected in the Select). */
    activeId: string;
    /** Called with a section's `id` when it is chosen in the rail or the Select. */
    onSelect: (id: string) => void;
    /** Accessible name of the nav and of the collapsed Select. */
    "aria-label": string;
    /** Visually hidden text announced after a dirty section's label, e.g. "Unsaved changes". */
    dirtyHint: string;
    /** Viewports narrower than this breakpoint render a Select instead of the rail; defaults to "md". */
    collapseBelow?: "sm" | "md" | "lg";
}