lumir-design-system-shared/dist/types/src/primitives/Text/Text.d.ts

Lumir Design System - Shared Components & Tokens

import React from 'react';
import { ResponsiveOrSingle } from '../../types/responsive';
type TextVariant = 'hero-1' | 'hero-2' | 'title-1' | 'title-2' | 'heading-1' | 'heading-2' | 'heading-3' | 'body-1' | 'body-2' | 'reading' | 'label-1' | 'label-2' | 'caption-1' | 'caption-2' | 'caption-3';
type FontWeight = 'regular' | 'medium' | 'bold';
type TextAlign = 'left' | 'center' | 'right' | 'justify';
type TextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase';
export interface TextProps extends React.HTMLAttributes<HTMLElement> {
    /**
     * 텍스트 요소의 HTML 태그를 지정합니다.
     */
    as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
    /**
     * 텍스트의 스타일 변형을 지정합니다. 반응형 객체 또는 단일 값을 받습니다.
     * hero-1=48px, hero-2=36px, title-1=30px, title-2=24px, heading-1/2=20px,
     * heading-3/body-1/reading=16px, body-2/label-1=14px, label-2/caption-1/2/3=12px
     */
    variant?: ResponsiveOrSingle<TextVariant>;
    /**
     * 텍스트의 굵기를 지정합니다. 반응형 객체 또는 단일 값을 받습니다.
     */
    weight?: ResponsiveOrSingle<FontWeight>;
    /**
     * 텍스트의 정렬 방향을 지정합니다. 반응형 객체 또는 단일 값을 받습니다.
     */
    textAlign?: ResponsiveOrSingle<TextAlign>;
    /**
     * 텍스트 변형(대문자, 소문자 등)을 지정합니다. 반응형 객체 또는 단일 값을 받습니다.
     */
    transform?: ResponsiveOrSingle<TextTransform>;
    /**
     * 텍스트가 한 줄에 표시되고 넘칠 경우 생략 부호로 표시할지 여부를 지정합니다.
     */
    noWrap?: boolean;
    /**
     * 텍스트가 지정된 라인 수 이후 생략 부호로 표시할지 여부를 지정합니다.
     */
    truncate?: number;
    /**
     * 텍스트의 내용물을 지정합니다.
     */
    children: React.ReactNode;
}
/**
 * Text 컴포넌트는 순수한 타이포그래피 프리미티브입니다.
 * Fluent Design System의 타이포그래피 계층 구조를 따르며, 시멘틱 토큰을 사용하여 일관된 스타일을 제공합니다.
 * 색상은 Surface 프리미티브와 조합하여 사용하세요.
 *
 * @example
 * ```tsx
 * <Text variant="title-1" weight="bold">
 *   제목 텍스트
 * </Text>
 *
 * // Surface와 조합하여 색상 적용
 * <Surface foreground="primary-foreground-1-rest">
 *   <Text variant="body-1">색상이 적용된 텍스트</Text>
 * </Surface>
 *
 * // 반응형 사용 예시
 * <Text
 *   variant={{ mobile: 'body-1', desktop: 'title-1' }}
 *   weight={{ mobile: 'regular', desktop: 'bold' }}
 *   textAlign={{ mobile: 'center', desktop: 'left' }}
 * >
 *   반응형 텍스트
 * </Text>
 * ```
 */
export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
export {};