@buun_group/brutalist-ui
Version:
A brutalist-styled component library
72 lines (71 loc) • 3.64 kB
TypeScript
/**
* @module Typography
* @description A flexible typography component that supports multiple text variants, styling options, and semantic HTML elements. Provides consistent text styling across the application.
*/
import React, { HTMLAttributes, ReactNode, CSSProperties } from 'react';
/**
* Props for the Typography component
*/
export interface TypographyProps extends HTMLAttributes<HTMLElement> {
/**
* Semantic variant determining the HTML element and base styling
* @default 'p'
*/
variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'lead' | 'large' | 'small' | 'muted' | 'blockquote' | 'code' | 'list';
/**
* Font size override independent of variant
*/
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
/**
* Font weight for the text
*/
weight?: 'normal' | 'medium' | 'semibold' | 'bold' | 'black';
/**
* Text alignment
*/
align?: 'left' | 'center' | 'right' | 'justify';
/**
* Text transformation
*/
transform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
/**
* Color variant for the text
* @default 'default'
*/
color?: 'default' | 'muted' | 'accent' | 'destructive' | 'warning' | 'success';
/**
* Font family to use
*/
family?: 'mono' | 'sans' | 'serif';
/**
* Whether to truncate text with ellipsis on overflow
* @default false
*/
truncate?: boolean;
/**
* The content to be rendered
*/
children: ReactNode;
/**
* Render as a span element instead of the semantic variant element
* @default false
*/
asChild?: boolean;
/**
* Custom styles to apply to the typography
*/
style?: CSSProperties;
}
export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
export declare const TypographyH1: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
export declare const TypographyH2: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
export declare const TypographyH3: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
export declare const TypographyH4: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLHeadingElement>>;
export declare const TypographyP: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLParagraphElement>>;
export declare const TypographyLead: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLParagraphElement>>;
export declare const TypographyLarge: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLParagraphElement>>;
export declare const TypographySmall: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLParagraphElement>>;
export declare const TypographyMuted: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLParagraphElement>>;
export declare const TypographyBlockquote: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLQuoteElement>>;
export declare const TypographyCode: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLElement>>;
export declare const TypographyList: React.ForwardRefExoticComponent<Omit<TypographyProps, "variant"> & React.RefAttributes<HTMLUListElement>>;