import * as react from 'react';
import { HTMLAttributes, ReactNode } from 'react';

interface EyebrowProps extends HTMLAttributes<HTMLDivElement> {
    /** The section marker — `"01"`, `"00"`, a roman numeral. Emphasised. */
    num?: ReactNode;
    /** The section name. Rendered after `num` and an em dash. */
    label?: ReactNode;
    /** A second item pushed to the far end of the line. */
    aside?: ReactNode;
    /** Draw the hairline rule under the head. Default `false`. */
    rule?: boolean;
    /** Full control — replaces the `num`/`label` pair, keeping the arrangement. */
    children?: ReactNode;
}

/**
 * The mono running head that opens a section — `01 — SELECTED WORK`, optionally
 * over a hairline rule, with a second item pushed to the far end.
 *
 * Thirty-six surfaces in the Inspiration Gallery carry some version of this. It
 * is a small component for a reason: what they share is the STRUCTURE (a
 * numbered marker, a label, an optional trailing aside, an optional rule) while
 * every one of them restyles the type. So this owns the arrangement and the
 * uppercase mono default, and gets out of the way of `className`.
 *
 * `num` is emphasised rather than styled a fixed colour, because in half the
 * designs it is the only part of the line that is not muted — and expressing
 * that with a `<b>` keeps it meaningful when the styling is replaced wholesale.
 */
declare const Eyebrow: react.ForwardRefExoticComponent<EyebrowProps & react.RefAttributes<HTMLDivElement>>;

export { Eyebrow, type EyebrowProps };