/** * Typography — semantic text presets, and the marks that go on them. * * The type scale in one place, so headings stay consistent instead of being * rebuilt out of size and weight classes at each call site. Built on the Text * primitive, so every preset keeps `className` passthrough and theme colours. * * ```tsx * Billing * Your plan renews on the 1st. * Terms of service * ``` * * A preset sets size, weight and tracking together; the marks — `underline`, * `italic`, `strike` — and `weight`, `align` and `transform` layer on top of * whichever preset is in force. They are props rather than class names because * the point of this component is that a screen never has to know which * utilities add up to "a bolded lead paragraph". * * React Native draws no list markers and has no blockquote, so * `Typography.List` and `Typography.Blockquote` build both out of a row and a * rule — which is exactly the kind of thing this component exists to stop * people rebuilding per screen. */ import { type ReactNode } from 'react'; import { View, type Text as RNText, type ViewProps } from 'react-native'; import { type VariantProps } from 'tailwind-variants'; import { type TextProps } from '../../primitives/text.js'; declare const typographyVariants: import("tailwind-variants").TVReturnType<{ type: { h1: string; h2: string; h3: string; h4: string; h5: string; h6: string; /** The sentence under a heading, set larger and quieter than body. */ lead: string; body: string; 'body-sm': string; 'body-xs': string; /** Body, one step up — for a number or a name that carries the row. */ large: string; small: string; blockquote: string; code: string; }; weight: { normal: string; medium: string; semibold: string; bold: string; }; align: { start: string; end: string; left: string; center: string; right: string; }; transform: { uppercase: string; lowercase: string; capitalize: string; }; underline: { true: string; }; italic: { true: string; }; strike: { true: string; }; muted: { true: string; }; }, undefined, "text-foreground", { type: { h1: string; h2: string; h3: string; h4: string; h5: string; h6: string; /** The sentence under a heading, set larger and quieter than body. */ lead: string; body: string; 'body-sm': string; 'body-xs': string; /** Body, one step up — for a number or a name that carries the row. */ large: string; small: string; blockquote: string; code: string; }; weight: { normal: string; medium: string; semibold: string; bold: string; }; align: { start: string; end: string; left: string; center: string; right: string; }; transform: { uppercase: string; lowercase: string; capitalize: string; }; underline: { true: string; }; italic: { true: string; }; strike: { true: string; }; muted: { true: string; }; }, undefined, import("tailwind-variants").TVReturnType<{ type: { h1: string; h2: string; h3: string; h4: string; h5: string; h6: string; /** The sentence under a heading, set larger and quieter than body. */ lead: string; body: string; 'body-sm': string; 'body-xs': string; /** Body, one step up — for a number or a name that carries the row. */ large: string; small: string; blockquote: string; code: string; }; weight: { normal: string; medium: string; semibold: string; bold: string; }; align: { start: string; end: string; left: string; center: string; right: string; }; transform: { uppercase: string; lowercase: string; capitalize: string; }; underline: { true: string; }; italic: { true: string; }; strike: { true: string; }; muted: { true: string; }; }, undefined, "text-foreground", unknown, unknown, undefined>>; export type TypographyType = NonNullable['type']>; export type TypographyWeight = NonNullable['weight']>; export interface TypographyProps extends Omit, VariantProps { className?: string; /** * Overrides the weight the preset sets. This is the one to reach for when a * paragraph needs a bolded run and a heading would be wrong. */ weight?: TypographyWeight; /** Underlines the text — a link, a defined term, a signature line. */ underline?: boolean; /** Slants the text. */ italic?: boolean; /** Strikes the text through: an old price, a completed task. */ strike?: boolean; /** Horizontal alignment within whatever the text is laid out in. */ align?: 'left' | 'center' | 'right'; /** Case, applied for display without changing the string underneath. */ transform?: 'uppercase' | 'lowercase' | 'capitalize'; } /** Heading levels, for `Typography.Heading`. */ type HeadingType = Extract; /** Body sizes, for `Typography.Paragraph`. */ type ParagraphType = Extract; export interface TypographyHeadingProps extends Omit { type?: HeadingType; } export interface TypographyParagraphProps extends Omit { type?: ParagraphType; } export interface TypographyCodeProps extends Omit { /** Classes for the surface behind the code text. */ containerClassName?: string; } export interface TypographyBlockquoteProps extends Omit { /** Classes for the row that carries the rule. */ containerClassName?: string; } export interface TypographyListProps extends ViewProps { className?: string; /** Numbered rather than bulleted. The numbers are drawn, not counted by CSS. */ ordered?: boolean; children?: ReactNode; } export interface TypographyListItemProps extends Omit { type?: ParagraphType; } export declare const Typography: import("react").ForwardRefExoticComponent> & { Heading: import("react").ForwardRefExoticComponent>; Paragraph: import("react").ForwardRefExoticComponent>; Code: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; Blockquote: import("react").ForwardRefExoticComponent>; List: import("react").ForwardRefExoticComponent>; ListItem: import("react").ForwardRefExoticComponent>; }; export {}; //# sourceMappingURL=index.d.ts.map