import { type ComponentProps, type ReactNode } from "react";
/**
 * Groups related rows on a page, a sheet or a dialog. Title 16/24 semibold,
 * one step above the 14/20 row labels so a section never reads as a setting
 * without a control; optional 12/18 description 4px below, content 12px below
 * that, and an optional action vertically centred on the title line.
 *
 * Variants (how the rows are held):
 * - `open` (default outside settings): rows sit on the page, no box. Sections
 *   are separated by one full-width hairline (SectionStack).
 * - `group` (default inside settings, via `SectionVariantProvider` in the
 *   settings shell): the heading sits above, the rows share one bordered
 *   card (radius 14, surface, 20px inner gutter), split by hairlines. A
 *   Notice among the rows loses its own box so it never nests a card in a
 *   card, and a Section whose rows render nothing shows no empty card.
 * - `tiles`: every row gets its own bordered card.
 *
 * Rows are the direct children of a Section (SettingRow, ListRow, a Notice...).
 * `group` and `tiles` add the horizontal padding their boxes need, so the same
 * rows work in every variant.
 */
/** The section title type. Shared by every heading that sits above setting rows. */
export declare const SECTION_TITLE_CLASS = "text-base leading-6 font-semibold tracking-[-0.2px] text-fg";
import { type SectionVariant } from "./section-variant.js";
export { SectionVariantProvider, useSectionListFrame, type SectionVariant, } from "./section-variant.js";
export interface SectionStackProps extends ComponentProps<"div"> {
    /**
     * Applies to every Section inside unless a Section sets its own. Defaults to
     * the enclosing provider's variant, then `open`.
     */
    variant?: SectionVariant | undefined;
    /**
     * A full-width hairline between sections with 24px above and below.
     * Defaults to true for `open` and false for boxed variants (32px gap).
     */
    divided?: boolean | undefined;
}
/** A column of sections with the page rhythm between them. */
export declare function SectionStack({ variant: variantProp, divided, className, children, ...props }: SectionStackProps): import("react").JSX.Element;
export interface SectionProps extends Omit<ComponentProps<"section">, "title"> {
    /**
     * Omit only for the first rows of a page whose page title already names them
     * (Settings > General: Name, ID). Pass `aria-label` then if the rows need a name.
     */
    title?: ReactNode | undefined;
    /** One or two short sentences, 12px muted. */
    description?: ReactNode | undefined;
    /** Right of the title, centred on the title line. One quiet action. */
    action?: ReactNode | undefined;
    /** Defaults to the enclosing SectionStack's variant, then `open`. */
    variant?: SectionVariant | undefined;
    /** Hairlines between rows. `group` always has them. */
    divided?: boolean | undefined;
    /** Heading level. Default 2 (under the page's h1). */
    headingLevel?: 2 | 3 | undefined;
    /** Classes for the rows container. */
    contentClassName?: string | undefined;
    children?: ReactNode | undefined;
}
export declare function Section({ title, description, action, variant: variantProp, divided, headingLevel, contentClassName, className, children, ...props }: SectionProps): import("react").JSX.Element;