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