import type { ReactNode } from 'react';
import { useRender } from '@base-ui/react/use-render';
/**
 * The 32px row a section starts with (Peek's SectionHeader, 2026-09-01):
 * a SectionLabel, an optional collapse chevron that makes the title the
 * toggle, and actions that appear while the row is hovered or keyboard-focused,
 * as IconButtons with tooltips.
 *
 * Three things changed on 2026-09-09, for `CollapsibleSection`:
 *
 * - **The title is a button when it toggles.** It was a `div` with an
 *   `onClick`, so the keyboard could not open or close a section at all.
 *   The button fills the row up to the actions, so the whole row is still
 *   the hit target; the actions sit beside it rather than inside it,
 *   because a button inside a button is invalid HTML — and was why every
 *   action had to stop its click from also toggling.
 * - **The hover is CSS.** The fill and the actions' reveal were React
 *   state (`isHovered`), which the README forbids — a mount cannot stay in
 *   step with a transition. `group-hover` now; the actions are in the row
 *   at `opacity-0` until hovered or focused, so a keyboard user reaches
 *   them too.
 * - **`render`** lets `CollapsibleSection` hand in Base UI's
 *   `Collapsible.Trigger` as the title button — one header for the
 *   hand-held section (`isExpanded` / `onToggle`) and the Base UI one,
 *   with no second click handler.
 *
 * One API change from Peek's original, safe because no call site used the
 * old shape yet: the two hard-wired action slots (add, sort) became
 * `actions` — the caller brings the icon, the tooltip and the handler.
 */
export interface SectionAction {
    /** 16px, stroke 1.5. */
    icon: ReactNode;
    tooltip: string;
    onClick: () => void;
}
export interface SectionHeaderProps {
    title: string;
    /** Collapsible: draws the chevron and makes the title a button that toggles. */
    chevron?: boolean;
    /**
     * 16px, stroke 1.5, before the title — a folder's (Katerina, 5 October:
     * Peek's Folders, the standard heading with a folder icon). With `chevron`
     * the icon is what shows at rest and the arrow takes its place under the
     * pointer or the keyboard, as a NavItem's icon turns into its arrow.
     */
    icon?: ReactNode;
    isExpanded?: boolean;
    onToggle?: () => void;
    /**
     * Beside the title and always visible, before the actions — a count. An
     * `UnreadDot` instead sits in the last action's place (the ⋮'s, with a
     * `menu`) and steps aside while the actions show, as a NavItem's dot does.
     *
     * The actions come and go with the hover; this does not, because a count is
     * information rather than an affordance. Peek's Screener header carries its
     * number as a `Chip` here, and was the last hand-drawn folding header in the
     * app for want of the slot (ADOPTION B23).
     */
    trailing?: ReactNode;
    /**
     * How many there are, 8px after the title — not at the row's end, where
     * `trailing` goes (Katerina, 7 October: a heading over a list says its
     * count beside its name, as a tab does).
     */
    count?: number;
    /** Right-aligned, in the order given. */
    actions?: SectionAction[];
    /**
     * The heading's "More options" menu: `MenuItem`s — what acts on the whole
     * section, a folder's Rename or Archive (Katerina, 5 October: Peek's Folders
     * page goes, and its folder actions move onto the folder's heading). The ⋮
     * is NavItem's, after the actions and revealed with them; it stays while its
     * menu is open.
     */
    menu?: ReactNode;
    /** The ⋮'s accessible name. Default "More options for" the title. */
    menuLabel?: string;
    /** `hover` reveals the actions while the row is hovered or keyboard-focused (always on a screen with no hover); `always` keeps them. */
    showActions?: 'hover' | 'always';
    /**
     * `fill` lights the row under the pointer when it does something (a toggle,
     * actions); `none` keeps it still — a heading whose actions are always shown,
     * where the buttons light up on their own (UIG-14, Katerina, 19 September).
     */
    hover?: 'fill' | 'none';
    /**
     * `heading` (default): a section's title, the `SectionLabel`. `quiet`: a
     * small grey label over a list (12px, muted) — "Folders" over the folders,
     * which never reads as one of them. `row`: a row among rows — the chevron
     * and the title at a row's weight and colour, as a sidebar row is (Katerina,
     * 30 September: Leaf's folders, in Ship).
     */
    look?: 'heading' | 'quiet' | 'row';
    /**
     * What the title renders as, in Base UI's manner. A plain button with
     * `onToggle` by default; `CollapsibleSection` hands in `Collapsible.Trigger`.
     */
    render?: useRender.RenderProp;
    className?: string;
}
export declare function SectionHeader({ title, chevron, icon, isExpanded, onToggle, trailing, count, actions, menu, menuLabel, showActions, hover, look, render, className }: SectionHeaderProps): import("react").JSX.Element;
//# sourceMappingURL=SectionHeader.d.ts.map