@withjoy/joykit/lib/packages/core/components/Text/index.d.ts

UI Component Library for Joy web

import React from 'react';
import { TypographyVariant } from '../../common';
import { ResponsiveValue } from '../../common/styledSystem/types';
import { BaseComponentProps } from '../../common/props';
import { FontWeight } from '../../common/textStyles';
export declare type TextComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'span' | 'p';
export interface TextProps extends BaseComponentProps {
    color?: string;
    /**
     * The rendered HTML element.
     *
     * The font size, letter-spacing, and line height are primarily driven by
     * the chosen HTML tag.
     */
    component?: TextComponent;
    /**
     * Responsive font weight value that will override the current font weight.
     */
    fontWeight?: ResponsiveValue<FontWeight | number>;
    /**
     * Responsive font size value that will override the current font size.
     */
    fontSize?: ResponsiveValue<number>;
    textAlign?: ResponsiveValue<'start' | 'center' | 'end' | 'justify'>;
    /**
     * Forces the text to display on one line with elllipsis at given max-width
     *
     * Per CSS specification, truncate will only apply to block container elements.
     * In particular, this will not work with inline elements such as `<span />`.
     *
     * @default
     * false
     */
    truncate?: boolean | number | string;
    /**
     * Apply predefined styles.
     *
     * While the component tag is set for semantic correctness and accessibility,
     * we can alter the appearance of text apart from the semantic meaning.
     *
     * @example
     *
     * <Text component="h1" variant="body"/>
     * // This will render a `<h1 />` component but with the styles of a "body" variant.
     */
    variant?: TypographyVariant;
    width?: ResponsiveValue<string | number>;
}
export declare const Text: React.FC<TextProps>;