@loke/design-system/dist/components/text/text.d.ts

A design system with individually importable components

import { type ResponsiveProps } from "@loke/design-system/responsive";
import { type VariantProps } from "class-variance-authority";
import type * as React from "react";
export declare const textVariants: (props?: ({
    align?: "center" | "justify" | "right" | "left" | null | undefined;
    color?: "popover" | "destructive" | "secondary" | "card" | "primary" | "accent" | "foreground" | "white" | "muted" | null | undefined;
    decoration?: "none" | "italic" | "line-through" | "underline" | null | undefined;
    lineHeight?: "none" | "normal" | "loose" | "relaxed" | "snug" | "tight" | null | undefined;
    size?: "base" | "lg" | "sm" | "xl" | "2xl" | "3xl" | "4xl" | "xs" | null | undefined;
    transform?: "normal" | "capitalize" | "lowercase" | "uppercase" | null | undefined;
    weight?: "bold" | "medium" | "normal" | "light" | "semibold" | null | undefined;
    whiteSpace?: "pre" | "normal" | "nowrap" | "pre-line" | "pre-wrap" | null | undefined;
    wordBreak?: "words" | "all" | "normal" | "keep" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
type TextVariants = VariantProps<typeof textVariants>;
type ResponsiveTextProps = ResponsiveProps<TextVariants>;
export interface TextProps extends ResponsiveTextProps {
    /** The text to be rendered within the component */
    children: React.ReactNode;
    /** The number of lines to clamp the text to. */
    clamped?: number;
    /** Extra classes to apply to the text */
    className?: string;
    /** Whether to truncate the text with an ellipsis. Defaults to false. */
    truncate?: boolean;
}
/**
 * Text component for displaying text with various styles
 *
 * The Text component provides a flexible way to render text with customizable styles. It supports various text properties such as size, weight, color, alignment, and more.
 *
 * Key features:
 * - Customizable text size, weight, and color
 * - Support for text transformation and alignment
 * - Options for truncation and line clamping
 * - Configurable text decoration and line height
 * - White space handling options
 *
 * Usage considerations:
 * - Use for consistent text styling across your application
 * - Combine different props to achieve desired text appearance
 * - Consider accessibility when choosing text sizes and colors
 * - Use truncate or clamped props for handling long text in constrained spaces
 * - Ensure proper contrast between text color and background for readability
 */
export declare const Text: React.FC<TextProps>;
export {};