import React from "react"; import type { StyleProp, TextProps, TextStyle } from "react-native"; export interface TypographyProps { /** * Text capitalization */ readonly transform?: TextTransform; /** * Color of text */ readonly color?: TextColor; /** * Alignment of text */ readonly align?: TextAlign; /** * Lets the user select text, to use the native copy and paste functionality. * WARNING: if true, this prevents ellipsis from being shown on Android. * @default true */ readonly selectable?: boolean; /** * Font size */ readonly size?: TextSize; /** * Text to display. Supports nesting text elements. */ readonly children?: React.ReactNode; /** * The maximum amount of lines the text can occupy before being truncated with "...". * Uses predefined string values that correspond to a doubling scale for the amount of lines. * WARNING: if `selectable` is true, Android will not show an ellipsis. */ readonly maxLines?: TruncateLength; /** * Allow text to be resized based on user's device display scale */ readonly allowFontScaling?: boolean; /** * Set the maximum font the text can go to size when the user scales their * device font size */ readonly maxFontScaleSize?: number; /** * Determines whether text should be scaled down to fit based on maxLines prop */ readonly adjustsFontSizeToFit?: boolean; /** * Line Height */ readonly lineHeight?: LineHeight; /** * Spacing between letters */ readonly letterSpacing?: LetterSpacing; /** * Font Family */ readonly fontFamily?: T; /** * Font style */ readonly fontStyle?: T extends "base" ? BaseStyle : DisplayStyle; /** * Underline style to use for the text. The non-solid style is only supported * on iOS, as per React Native's Text component's limitations. * https://reactnative.dev/docs/text-style-props#textdecorationstyle-ios */ readonly underline?: "solid" | "double" | "dotted" | "dashed" | undefined; /** * Font weight */ readonly fontWeight?: T extends "base" ? BaseWeight : DisplayWeight; /** * Reverse theme for better display on dark background */ readonly reverseTheme?: boolean; /** * Accessibility role describing the context of the text */ readonly accessibilityRole?: TextAccessibilityRole; /** * This will make the text inaccessible to the screen reader. * This should be avoided unless there is a good reason. * For example this is used in InputText to make it so the label isn't * selectable because it is already read from the accessibilityLabel * of the TextInput */ readonly hideFromScreenReader?: boolean; /** * Have text styled with strike through */ readonly strikeThrough?: boolean; readonly UNSAFE_style?: TypographyUnsafeStyle; /** * Callback behaves differently on iOS and Android. * On iOS, it is called when the text is laid out. * On Android, it is called before the text is laid out. * @see https://reactnative.dev/docs/text#ontextlayout */ readonly onTextLayout?: OnTextLayoutEvent; } export interface TypographyUnsafeStyle { textStyle?: StyleProp; } export declare const Typography: React.MemoExoticComponent; declare function InternalTypography({ fontFamily, fontStyle, fontWeight, transform, color, align, size, children, maxLines, allowFontScaling, maxFontScaleSize, adjustsFontSizeToFit, lineHeight, letterSpacing, reverseTheme, hideFromScreenReader, accessibilityRole, strikeThrough, underline, UNSAFE_style, selectable, onTextLayout, }: TypographyProps): React.JSX.Element; export type FontFamily = "base" | "display"; export type FontStyle = "regular" | "italic"; export type FontWeight = "regular" | "medium" | "bold" | "semiBold" | "extraBold" | "black"; export type BaseWeight = Extract; export type DisplayWeight = Extract; export type BaseStyle = FontStyle; export type DisplayStyle = Extract; export type TextColor = TextVariation | "default" | "blueDark" | "white" | "green" | "greenDark" | "grey" | "greyDark" | "greyBlue" | "greyBlueDark" | "lightBlue" | "lightBlueDark" | "red" | "redDark" | "yellow" | "yellowDark" | "yellowGreenDark" | "orangeDark" | "navyDark" | "limeDark" | "purpleDark" | "pinkDark" | "tealDark" | "indigoDark" | "navy" | "heading" | "text" | "textSecondary" | "textReverse" | "textReverseSecondary" | "inactive" | "inactiveSurface" | "inactiveOnSurface" | "critical" | "criticalSurface" | "criticalOnSurface" | "warning" | "warningSurface" | "warningOnSurface" | "informative" | "informativeSurface" | "informativeOnSurface" | "successSurface" | "successOnSurface" | "interactiveHover" | "interactiveSubtleHover" | "destructiveHover" | "disabledSecondary" | "request" | "requestSurface" | "requestOnSurface" | "quote" | "quoteSurface" | "quoteOnSurface" | "job" | "jobSurface" | "jobOnSurface" | "visit" | "visitSurface" | "visitOnSurface" | "task" | "taskSurface" | "taskOnSurface" | "event" | "eventSurface" | "eventOnSurface" | "invoice" | "invoiceSurface" | "invoiceOnSurface" | "payments" | "paymentsSurface" | "paymentsOnSurface" | "client" | "blue" | "learning" | "subtle" | "onPrimary"; export type TextVariation = "text" | "textSecondary" | "interactive" | "interactiveSubtle" | "successOnSurface" | "critical" | "warning" | "informativeOnSurface" | "disabled" | "destructive" | "base" | "success" | "subdued" | "error" | "warn" | "info"; export type TextTransform = "uppercase" | "lowercase" | "capitalize" | "none"; export type TextSize = "smallest" | "smaller" | "small" | "default" | "large" | "larger" | "largest" | "jumbo" | "extravagant"; export type TextAlign = "start" | "end" | "center" | "justify"; export type LineHeight = "extravagant" | "jumbo" | "largest" | "larger" | "large" | "base" | "tight"; export type LetterSpacing = "base" | "loose"; export type TextAccessibilityRole = "text" | "header"; export type TruncateLength = "single" | "small" | "base" | "large" | "extraLarge" | "unlimited"; export type OnTextLayoutEvent = Exclude; export {};