@rarcifa/cronos-design-system/dist/components/Typography/interface.d.ts

A typescript react component library following the Cronos branding standards

/// <reference types="react" />
export interface TypographyProps {
    /**
     * An optional text label that can be used for the typography component, providing a text
     * representation if not using the `children` prop for content. This can be a simple string
     * or any React node that renders text content.
     */
    label?: string;
    /**
     * Sets the font weight of the text. The available options are 'bold', 'medium', and 'default',
     * allowing for varied text emphasis within the application.
     */
    fontWeight?: 'bold' | 'medium' | 'default';
    /**
     * Determines the size of the text. Supported values are 'sm' (small), 'md' (medium), and
     * 'lg' (large). This allows for consistent typography scaling across different UI elements.
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * Specifies the color theme for the text. Options include 'dark', 'light', and 'default',
     * enabling flexible color theming in line with the application's design system.
     */
    color?: 'dark' | 'light' | 'default';
    /**
     * Specifies the heading type for the text. Options include 'h1' to 'h5',
     * enabling heading types in line with the application's design system.
     */
    headings?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
    /**
     * Allows specifying a custom size for the text, providing additional flexibility beyond
     * the predefined sizes. This should be a valid CSS font-size value.
     */
    customSize?: number;
    /**
     * Allows specifying a custom color for the text, providing additional flexibility beyond
     * the predefined color themes. This should be a valid CSS color value.
     */
    customColor?: string;
    /**
     * Allows specifying a custom gradient color for the text, providing additional flexibility beyond
     * the predefined color themes. This should be a valid CSS gradient color value.
     */
    customGradientColor?: string[];
    /**
     * Allows specifying a custom line height for the text, providing additional flexibility beyond
     * the predefined line height . This should be a valid CSS line-height value.
     */
    customLineHeight?: number;
    /**
     * Allows specifying a custom top and bottom margin for the text, providing additional flexibility beyond
     * the predefined margin . This should be a valid margin-top and amrgin-bottom value.
     */
    customMargin?: number;
    /**
     * Controls the text alignment within the typography component. Possible values are 'left',
     * 'right', and 'center', catering to various layout and design requirements.
     */
    textAlign?: 'left' | 'right' | 'center';
    /**
     * If true, the text will be truncated with an ellipsis if it exceeds the maximum width
     * of the typography container. This is useful for maintaining UI integrity in constrained spaces.
     *  The truncation width is set by `maxWidth` below.
     */
    truncated?: boolean;
    /**
     * Specifies the maximum width of the typography container in pixels. This is relevant in
     * conjunction with `truncated`, determining the point at which text will be truncated.
     */
    maxWidth?: number;
    /**
     * Children to be passed into the typography component. This prop allows for complex text
     * structures or additional styling to be applied directly within the typography context.
     */
    children?: React.ReactNode;
    /**
     * Optional util to pass headings to styled component.
     */
    as?: React.ElementType;
}