import * as React from 'react';
/**
 * A section heading row: an icon, a 16/24 title, and an optional badge.
 *
 * Ported from Figma `.section-title-label` (22:5655). The 24px row height is the title's line-height —
 * Figma reports no padding on the root — and the badge is 24px too, so the row does not grow when it
 * appears.
 *
 * **This atom was previously declined, and the decline was about Strix rather than about the design.**
 * The recorded reason was "Strix has no `SectionTitle`, and the atom is not an argument for one". What
 * changed is that `InfoSection` had since grown exactly this header inline — icon, 16/24 title, disabled
 * treatment — so the component existed, unnamed and unreusable. Extracting it is the smaller change.
 */
declare const sectionTitleStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
/**
 * The title ink.
 *
 * Figma paints it `color/gray/gray-100` #dde0e6, which measures **1.32:1** against the light surface —
 * unusable, and a consequence of the file being authored dark-only. `--color-text-primary` inverts per
 * theme at 19.37:1 light / 17.85:1 dark.
 *
 * The disabled ink sits below 4.5:1 on purpose: WCAG 1.4.3 exempts text that is part of an inactive
 * component, and the contrast test files it under `disabledOnly` rather than dropping it silently.
 */
declare const sectionTitleTextStyles: (props?: ({
    disabled?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * The icon fill.
 *
 * Figma binds raw `color/brand/twilio-red` #db132a, which is 3.82:1 against its page — fine for a glyph
 * under WCAG 1.4.11's 3:1, and a failure as text at 4.5:1. The binding records both rows deliberately so
 * the two floors are never conflated: **this red may carry the icon and must never carry the title.**
 *
 * `--color-icon-accent` rather than `--color-icon-destructive`, matching `InfoSection`: both clear 3:1,
 * so the choice is about meaning. The red is Twilio brand; a destructive token would announce danger on
 * every section header and be actively wrong the moment something genuinely destructive appeared beside
 * it.
 */
declare const sectionTitleIconStyles: (props?: ({
    disabled?: boolean | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
export { sectionTitleStyles, sectionTitleTextStyles, sectionTitleIconStyles };
export interface SectionTitleProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> {
    /** The heading text, or arbitrary heading content. */
    title: React.ReactNode;
    /**
     * Heading level wrapped around the title, in a `display: contents` wrapper so it joins the document
     * outline without adding a layout box. No level is assumed by default, because guessing produces a
     * wrong outline that nothing downstream will catch.
     */
    titleAs?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    /** Decorative leading glyph, rendered `aria-hidden` because the title already names the section. */
    icon?: React.ReactNode;
    /**
     * Figma's `Show Badge`. A string becomes a `Badge size="small"`; any node is rendered as given, so a
     * caller can pass a badge with its own variant.
     */
    badge?: React.ReactNode;
    /**
     * Dim the title and the icon.
     *
     * **A heading has no disabled state of its own.** What a faint section title MEANS is that the section
     * it labels is unavailable — that state belongs to the container (a disabled fieldset, a gated step)
     * and reaches the heading by inheritance. It is a prop here only so that a caller who owns the
     * container can pass it down; it sets `aria-disabled` and nothing else, because a heading is not a
     * control.
     */
    disabled?: boolean;
}
/**
 * @example <SectionTitle title="Profile" titleAs="h3" icon={<UserIcon size="sm" />} />
 * @example <SectionTitle title="Profile" badge="New" />
 */
export declare const SectionTitle: React.ForwardRefExoticComponent<SectionTitleProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=section-title.d.ts.map