lumir-design-system-01/dist/types/components/compounds/Field/Field.d.ts

Lumir Design System 01 - Professional & Clean

import React from 'react';
import { IconName, ResponsiveOrSingle } from 'lumir-design-system-shared';
export interface FieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
    /**
     * 필드의 스타일 변형을 지정합니다.
     */
    variant?: 'outlined' | 'transparent' | 'filled';
    /**
     * 라벨의 위치를 지정합니다.
     */
    labelPosition?: 'above' | 'before' | 'none';
    /**
     * 필드의 크기를 지정합니다.
     */
    size?: 'md' | 'lg' | 'xlg';
    /**
     * 필드의 너비를 지정합니다.
     * - 'fit-content': 내용에 맞춰 크기 조절
     * - 'fill-width': 부모 요소 너비에 맞게 조절 (100%)
     * - 커스텀 값: 직접 너비 지정 (예: '200px', '50%')
     */
    fieldWidth?: 'fit-content' | 'fill-width' | ResponsiveOrSingle<string | number>;
    /**
     * 필드의 최소 너비를 지정합니다. (기본값: 80px)
     */
    minWidth?: string | number;
    /**
     * fit-content일 때 텍스트가 길면 말줄임표로 처리할지 여부
     */
    truncateOnFit?: boolean;
    /**
     * 라벨 텍스트
     */
    label?: string;
    /**
     * 필수 입력 표시 (*)
     */
    required?: boolean;
    /**
     * 비활성화 상태
     */
    disabled?: boolean;
    /**
     * 에러 상태
     */
    error?: boolean;
    /**
     * 에러 메시지
     */
    errorMessage?: string;
    /**
     * 도움말 텍스트
     */
    helperText?: string;
    /**
     * 플레이스홀더 텍스트
     */
    placeholder?: string;
    /**
     * 입력 값
     */
    value?: string;
    /**
     * 입력 타입
     */
    type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
    /**
     * 필드의 왼쪽에 표시될 아이콘 이름을 지정합니다.
     */
    leftIcon?: IconName;
    /**
     * 필드의 오른쪽에 표시될 아이콘 이름을 지정합니다.
     */
    rightIcon?: IconName;
    /**
     * 값 변경 이벤트 핸들러
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * 포커스 이벤트 핸들러
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * 블러 이벤트 핸들러
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * 클릭 이벤트 핸들러
     */
    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
}
/**
 * Field 컴포넌트는 사용자 입력을 받기 위한 텍스트 필드입니다.
 * outlined, transparent, filled 스타일을 지원하며, 라벨 위치를 다양하게 설정할 수 있습니다.
 */
export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLInputElement>>;