import { ReactNode, CSSProperties, HTMLAttributes } from 'react'; /** * Typography variant defines the semantic purpose and default styling */ export type TypographyVariant = 'heading' | 'label' | 'caption' | 'body' | 'error'; /** * Typography size using theme typography size tokens * Includes '2xl' for larger headings (not in base theme, calculated as 1.5x base) */ export type TypographySize = 'tn' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; /** * Font weight options matching theme.typography.fontWeight */ export type TypographyWeight = 'regular' | 'medium' | 'semibold' | 'bold'; /** * Color options using semantic naming * Maps to theme.colors.text.* and theme.colors.status.* paths */ export type TypographyColor = 'primary' | 'secondary' | 'muted' | 'inverse' | 'error' | 'success' | 'warning' | 'info' | 'highlight' | 'inherit'; /** * HTML element to render the typography as */ export type TypographyAs = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label'; /** * Typography props interface */ export interface TypographyProps extends Omit, 'color'> { /** * The content to display */ children: ReactNode; /** * Typography variant that determines default styling * - heading: semibold, primary color, larger size (lg) * - label: medium weight, muted color, uppercase, smaller size (xs) * - caption: muted color, smaller size (xs) * - body: regular weight, primary color, base size (sm) * - error: error color, base size (sm) * @default 'body' */ variant?: TypographyVariant; /** * Font size using theme typography tokens * Overrides the default size for the variant */ size?: TypographySize; /** * Font weight override * Overrides the default weight for the variant */ weight?: TypographyWeight; /** * Text color using semantic color names * Overrides the default color for the variant */ color?: TypographyColor; /** * Whether to uppercase the text * Default is true for 'label' variant, false for others */ uppercase?: boolean; /** * Enable text truncation with ellipsis * When true, text will be truncated with "..." and a Tooltip will show the full text on hover * @default false */ truncate?: boolean; /** * Number of lines before truncation (multi-line truncation) * Only applies when truncate is true * @default 1 */ lines?: number; /** * Custom tooltip content to show when truncated * If not provided, the children text content will be used */ tooltipContent?: ReactNode; /** * Whether to disable the tooltip when truncated * @default false */ disableTooltip?: boolean; /** * HTML element to render as * Defaults based on variant: * - heading: 'h2' * - label: 'span' * - caption: 'span' * - body: 'p' * - error: 'span' */ as?: TypographyAs; /** * Text alignment */ align?: 'left' | 'center' | 'right'; /** * Whether to prevent text wrapping * @default false (only true when truncate is enabled) */ noWrap?: boolean; /** * Additional inline styles */ style?: CSSProperties; /** * Additional CSS class name */ className?: string; /** * Test identifier for automated testing */ dataTestId?: string; /** * Data identifier for ib-ui compatibility */ dataId?: string; } /** * Default element for each variant */ export declare const VARIANT_DEFAULT_ELEMENTS: Record; /** * Default size for each variant */ export declare const VARIANT_DEFAULT_SIZES: Record; /** * Default weight for each variant */ export declare const VARIANT_DEFAULT_WEIGHTS: Record; /** * Default color for each variant */ export declare const VARIANT_DEFAULT_COLORS: Record; /** * Default uppercase for each variant */ export declare const VARIANT_DEFAULT_UPPERCASE: Record; //# sourceMappingURL=Typography.types.d.ts.map