@wonderflow/react-components/dist/components/text/text.d.ts

UI components from Wonderflow's Wanda design system

/// <reference types="react" />
import { ChipProps, Polymorphic, SymbolProps } from '../..';
declare type VariantDisplay = 'display-1' | 'display-2' | 'display-3' | 'display-4';
declare type VariantHeading = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6';
declare type VariantTagline = 'tagline-1' | 'tagline-2' | 'tagline-3';
declare type VariantSubtitle = 'subtitle-1' | 'subtitle-2';
declare type VariantBody = 'body-1' | 'body-2' | 'body-3';
export declare type TextVariants = VariantDisplay | VariantHeading | VariantTagline | VariantSubtitle | VariantBody;
export declare type TextColors = 'positive' | 'informative' | 'danger' | 'warning' | 'neutral' | 'dark';
declare type Decorator = React.ReactElement<SymbolProps> | React.ReactElement<ChipProps>;
export declare type TextProps = {
    /**
     * Apply typographic text style.
     */
    variant?: TextVariants;
    /**
     * Set the color of the text.
     */
    color?: TextColors;
    /**
     * Set the text alignment of the text. This is a logical property
     * based on the direction of the text.
     */
    textAlign?: 'start' | 'center' | 'end' | 'justify';
    /**
     * Allow text to overflow.
     */
    preventBreakWord?: boolean;
    /**
     * Disable the responsiveness of the text. If disabled,
     * the text will be always the same size across all breakpoints.
     */
    preventResponsive?: boolean;
    /**
     * Truncate text overflow with ellipsis.
     */
    truncate?: boolean;
    /**
     * Set the maximum width of the text after which it will wrap.
     */
    maxWidth?: string;
    /**
     * Place a Decorator before the string. This must be a Symbol or a Chip component.
     */
    decoratorStart?: Decorator;
    /**
     * Place a Decorator after the string. This must be a Symbol or a Chip component.
     */
    decoratorEnd?: Decorator;
    /**
     * Set the size of the decorator according to the variant.
     */
    decoratorSize?: 'small' | 'medium' | 'big';
    /**
     * Auto generate anchor link inside the heading and display variants. This should be
     * used only when the title define a new content section and has
     * a semantic tag.
     *
     * @default: `false`
     */
    anchor?: boolean;
};
declare type PolymorphicText = Polymorphic.ForwardRefComponent<'p', TextProps>;
export declare const Text: PolymorphicText;
export {};
//# sourceMappingURL=text.d.ts.map