import * as React from 'react';
import { type RenderProp } from '../../internal/render-seam';
/**
 * The typography role vocabulary, as camelCase handles onto the kebab-case role
 * names. Callers may pass either — the type is the union of the *values* — but
 * the map gives editors something to autocomplete and gives dependents a stable
 * reference (`TYPOGRAPHY_VARIANTS.bodyMRegular`) instead of a bare string.
 */
export declare const TYPOGRAPHY_VARIANTS: {
    readonly bodyL: "body-l";
    readonly bodyLSemibold: "body-l-semibold";
    readonly bodyMRegular: "body-m-regular";
    readonly bodyMMedium: "body-m-medium";
    readonly bodyMSemibold: "body-m-semibold";
    readonly bodyS: "body-s";
    readonly bodySMedium: "body-s-medium";
    readonly bodySSemibold: "body-s-semibold";
    readonly bodyXs: "body-xs";
    readonly bodyXsSemibold: "body-xs-semibold";
    readonly ctaRegularL: "cta-regular-l";
    readonly ctaRegularM: "cta-regular-m";
    readonly ctaRegularS: "cta-regular-s";
    readonly ctaMediumXs: "cta-medium-xs";
    readonly ctaStrongL: "cta-strong-l";
    readonly ctaStrongM: "cta-strong-m";
    readonly ctaStrongS: "cta-strong-s";
    readonly d1: "d1";
    readonly d2: "d2";
    readonly d3: "d3";
    readonly d4: "d4";
    readonly d5: "d5";
    readonly d6: "d6";
    readonly d7: "d7";
    readonly eyebrowL: "eyebrow-l";
    readonly eyebrowLSemibold: "eyebrow-l-semibold";
    readonly eyebrowSRetina: "eyebrow-s-retina";
    readonly eyebrowSSemibold: "eyebrow-s-semibold";
    readonly h1: "h1";
    readonly h2: "h2";
    readonly h3: "h3";
    readonly h4: "h4";
    readonly h5: "h5";
    readonly h6: "h6";
    readonly h7: "h7";
    readonly monoLSemibold: "mono-l-semibold";
    readonly monoMMedium: "mono-m-medium";
    readonly monoMRegular: "mono-m-regular";
    readonly monoMSemibold: "mono-m-semibold";
    readonly monoSRegular: "mono-s-regular";
    readonly subheadL: "subhead-l";
    readonly subheadM: "subhead-m";
    readonly subheadS: "subhead-s";
};
export type TypographyVariantsType = (typeof TYPOGRAPHY_VARIANTS)[keyof typeof TYPOGRAPHY_VARIANTS];
/**
 * A CSS gradient is a background image, so gradient text is painted as a
 * background clipped to the glyphs. Each value below is an arbitrary Tailwind
 * background-image value wrapping a `--gradients-*` token, which is necessary:
 * Tailwind has no `bg-image-*` namespace to generate these from.
 *
 * **Every class name here is written out in full, and must stay that way.**
 * Deriving them from `TYPOGRAPHY_GRADIENTS` with a template literal reads far
 * better and generates nothing: Tailwind extracts candidates by scanning source
 * text, so a name assembled at runtime is invisible to it and no gradient utility
 * is ever emitted. This feature was shipped broken for exactly that reason.
 *
 * Worse, an incomplete class name survives into the published bundle, where a
 * consumer's `@source` points Tailwind straight at it. The extractor takes it for
 * a real candidate and emits a `background-image` whose value still holds the
 * placeholder — which is not valid CSS. Lightning CSS rejects it: a warning in
 * `next build`, a hard HTTP 500 on every request in `next dev`, so the build
 * stays green while local development is broken.
 *
 * **So no prose in this package may spell out a bracket-syntax class whose value
 * is not a real token.** Not the interpolated form, and not a `*`/`NAME`/`…`
 * stand-in either — the extractor cannot tell prose from code, and a docblock is
 * copied verbatim into both `sourcesContent` of the emitted `.js.map` and the
 * generated `.d.ts`. A consumer whose glob reaches either one gets the invalid
 * rule. Describe the shape in words, as above. `build.packaging.test.ts` compiles
 * Tailwind against the whole of `dist` — maps and declarations included — and
 * fails on any candidate that emits CSS Lightning CSS rejects.
 */
declare const GRADIENT_VARIANTS: {
    readonly 'blue-primary': "bg-[image:var(--gradients-blue-primary)]";
    readonly 'blue-secondary': "bg-[image:var(--gradients-blue-secondary)]";
    readonly 'blue-tertiary': "bg-[image:var(--gradients-blue-tertiary)]";
    readonly 'blue-quaternary': "bg-[image:var(--gradients-blue-quaternary)]";
    readonly 'blue-balance': "bg-[image:var(--gradients-blue-balance)]";
    readonly 'blue-card-active': "bg-[image:var(--gradients-blue-card-active)]";
    readonly 'white-primary': "bg-[image:var(--gradients-white-primary)]";
    readonly 'white-on-surface': "bg-[image:var(--gradients-white-on-surface)]";
    readonly 'mint-active': "bg-[image:var(--gradients-mint-active)]";
    readonly 'mint-primary': "bg-[image:var(--gradients-mint-primary)]";
    readonly 'lime-primary': "bg-[image:var(--gradients-lime-primary)]";
    readonly 'lavender-primary': "bg-[image:var(--gradients-lavender-primary)]";
    readonly 'surface-fade': "bg-[image:var(--gradients-surface-fade)]";
};
/**
 * Gradient fills available to text. Every name here is a `--gradients-*` token;
 * the component's tests assert that, so a gradient cannot be offered that the
 * token layer cannot paint. Derived from `GRADIENT_VARIANTS` so the two cannot
 * drift.
 */
export declare const TYPOGRAPHY_GRADIENTS: (keyof typeof GRADIENT_VARIANTS)[];
export type TypographyGradientsType = keyof typeof GRADIENT_VARIANTS;
/**
 * Every role sets four token utilities — family, size, line height, and tracking
 * — because the token layer defines all four per role and a role is only itself
 * with all of them.
 *
 * **Font families are translated, not copied.** maker-ds names Twilio Sans Text
 * `--font-serif` and Twilio Sans Display `--font-sans`. Strix renames those to
 * `--font-sans` and `--font-display`, because calling a sans-serif face "serif"
 * misleads every reader. So upstream `font-serif` becomes `font-sans` here, and
 * upstream `font-sans` (the display roles) becomes `font-display`. Copying
 * upstream classes across verbatim silently drops the family; the tests guard
 * against exactly that.
 */
export declare const typographyVariants: (props?: ({
    textStyle?: "d1" | "d2" | "d3" | "d4" | "d5" | "d6" | "d7" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h7" | "body-l" | "body-l-semibold" | "body-m-regular" | "body-m-medium" | "body-m-semibold" | "body-s" | "body-s-medium" | "body-s-semibold" | "body-xs" | "body-xs-semibold" | "cta-regular-l" | "cta-regular-m" | "cta-regular-s" | "cta-medium-xs" | "cta-strong-l" | "cta-strong-m" | "cta-strong-s" | "eyebrow-l" | "eyebrow-l-semibold" | "eyebrow-s-retina" | "eyebrow-s-semibold" | "mono-l-semibold" | "mono-m-medium" | "mono-m-regular" | "mono-m-semibold" | "mono-s-regular" | "subhead-l" | "subhead-m" | "subhead-s" | null | undefined;
    gradient?: "blue-primary" | "blue-secondary" | "blue-tertiary" | "blue-quaternary" | "blue-balance" | "blue-card-active" | "white-primary" | "white-on-surface" | "mint-active" | "mint-primary" | "lime-primary" | "lavender-primary" | "surface-fade" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/**
 * Elements `as` can name.
 *
 * The list is deliberately not "every intrinsic tag" — `as` is for elements whose job is to hold
 * text, and a `<button>` or `<input>` here would invite a caller to reach for a type primitive
 * where they want a control. Anything outside the list still goes through `render`.
 *
 * **Lists, `code`, `pre` and `blockquote` are here because their absence was a real defect, not a
 * boundary.** A styled `<ul>` had to be written `render={<ul />}` while a styled `<p>` was
 * `as="p"`, so the narrower seam was also the prettier one and the choice between them turned on
 * an allowlist the caller could not see. `pre` in particular is text-holding by definition, and
 * `code` had already forced one component (`ToolCall`) to restate a whole type role by hand rather
 * than nest a span inside a bare `<code>`.
 *
 * `pre` keeps its own `white-space` — the base class list sets no `whitespace-*`, so the UA
 * stylesheet's `pre` value stands and a caller who wants wrapping passes `whitespace-pre-wrap`.
 */
export type AllowedTags = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'label' | 'p' | 'div' | 'ul' | 'ol' | 'li' | 'dl' | 'dt' | 'dd' | 'code' | 'pre' | 'blockquote' | 'figcaption' | 'small' | 'strong' | 'em';
/** What the `render` function form is told about the component. */
export interface TypographyRenderState {
    variant: TypographyVariantsType;
    gradient: TypographyGradientsType | null;
}
export type TypographyProps<C extends AllowedTags = 'span'> = {
    /**
     * HTML element to render.
     *
     * **`span` is inline.** A margin or block-layout utility (`mb-*`, `block`, `flex`, `w-full`, ...)
     * passed through `className` computes on an inline box and does nothing — not a Tailwind bug,
     * just CSS. Pass `as="div"` or `as="p"` when the caller needs the element to actually take
     * margin or participate in block layout, rather than adding a layout utility and finding it inert.
     *
     * @default 'span'
     */
    as?: C;
    /**
     * Render into a caller-supplied element, or a function returning one.
     *
     * **What `as` cannot do.** `as` substitutes an intrinsic tag from {@link AllowedTags}; this
     * substitutes a *component*, which is the case that actually comes up: a router's `Link`, a
     * `BreadcrumbLink`, a Base UI trigger. Without it the only options are wrapping — which splits
     * the semantics and the type role across two elements — or abandoning the component and
     * hand-applying the classes, which is what the token layer exists to prevent.
     *
     * It is also the seam for an element `as` deliberately omits — a control, or an `<a>` needing
     * `href`. Reach for `as` first; if the tag is not in the list, that is the signal to use this.
     *
     * - `render={<a href="/x" />}` is cloned, with the element's own `className` merged last so a
     *   caller's utility still beats the role.
     * - `render={(props, { variant }) => <a {...props} />}` is called and its result used as is. The
     *   function owns the element; nothing is merged over the top.
     *
     * `render` wins if `as` is also passed.
     */
    render?: RenderProp<TypographyRenderState>;
    /**
     * Typography role.
     * @default 'body-m-regular'
     */
    variant?: TypographyVariantsType;
    /** Optional gradient fill. Display roles also gain descender padding. */
    gradient?: TypographyGradientsType | null;
} & React.ComponentPropsWithoutRef<C>;
export declare const Typography: <C extends AllowedTags = "span">(props: TypographyProps<C> & {
    ref?: React.ComponentPropsWithRef<C>["ref"];
}) => React.ReactElement | null;
export {};
//# sourceMappingURL=typography.d.ts.map