apphouse/dist/components/Text.d.ts

Component library for React that uses observable state management and theme-able components.

import { CSSProperties } from 'glamor';
import { ThemeColors, TypographyStyles } from '../styles/defaults/themes.interface';
import { StyleOverwrites } from './component.interfaces';
import React from 'react';
export type TextAsType = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'caption' | 'label' | 'em';
/**
 * Interface for styles to be applied to the text component
 */
export type TextStyles = CSSProperties;
/**
 * Interface for props to be passed to the text component
 */
export interface BaseTextProps extends StyleOverwrites<TextStyles> {
    /**
     * @default standard
     */
    variant?: keyof TypographyStyles;
    /**
     * @default decided based on variant
     */
    as?: TextAsType;
    /**
     * The content of the text
     */
    children?: React.ReactNode;
    /**
     * The color to be applied to the text
     * @default 'onPrimary'
     */
    color?: keyof ThemeColors;
    /**
     * For accessibility, sets the id of the element the text is describing
     */
    htmlFor?: string;
    /**
     * if true, the text will be bold and overwrite the variant styles
     * @default false
     */
    bold?: boolean;
    /**
     * if true, the text will be aligned to the center
     * @default false
     */
    centerAlign?: boolean;
}
export interface TruncatedTextProps extends BaseTextProps {
    /**
     * if true, the text will be truncated
     * @default false
     */
    truncate?: boolean;
    /**
     * The max width of the text that will show before it is truncated.
     * It will be ignored if truncate is false
     * @default false
     * @optional
     */
    width: number;
}
export interface TextWithoutTruncationProps extends BaseTextProps {
    /**
     * if true, the text will be truncated
     * @default false
     */
    truncate?: false;
    /**
     * The max width of the text that will show before it is truncated.
     * It will be ignored if truncate is false
     * @default false
     * @optional
     */
    width?: never;
}
export type TextProps = TextWithoutTruncationProps | TruncatedTextProps;
/**
 * A text component that renders typography html tags as
 */
export declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;