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

Lumir Design System 01 - Professional & Clean

import React from 'react';
export interface ComboBoxOption {
    value: string;
    label: string;
    disabled?: boolean;
    group?: string;
}
export interface ComboBoxProps {
    /**
     * 선택 가능한 옵션들
     */
    options: ComboBoxOption[];
    /**
     * 현재 선택된 값(들)
     */
    value?: string | string[];
    /**
     * 다중 선택 허용 여부
     */
    multiple?: boolean;
    /**
     * 검색 가능 여부
     */
    searchable?: boolean;
    /**
     * 플레이스홀더 텍스트
     */
    placeholder?: string;
    /**
     * 라벨
     */
    label?: string;
    /**
     * 비활성화 상태
     */
    disabled?: boolean;
    /**
     * 에러 메시지
     */
    errorMessage?: string;
    /**
     * 도움말 텍스트
     */
    helperText?: string;
    /**
     * 필수 입력 여부
     */
    required?: boolean;
    /**
     * 드롭다운 방향
     */
    direction?: 'up' | 'down';
    /**
     * Field 스타일 변형
     */
    fieldVariant?: 'outlined' | 'transparent' | 'filled';
    /**
     * Field 크기
     */
    fieldSize?: 'md' | 'lg' | 'xlg';
    /**
     * Field 너비
     * - 'fit-content': 내용에 맞춰 크기 조절
     * - 'fill-width': 부모 요소 너비에 맞게 조절 (100%)
     * - 커스텀 값: 직접 너비 지정 (예: '200px', '50%')
     */
    fieldWidth?: 'fit-content' | 'fill-width' | string | number;
    /**
     * 라벨 위치
     */
    labelPosition?: 'above' | 'before' | 'none';
    /**
     * 왼쪽 아이콘 (rightIcon은 드롭다운 화살표로 고정)
     */
    leftIcon?: string;
    /**
     * 값 변경 핸들러
     */
    onChange?: (value: string | string[]) => void;
    /**
     * 검색어 변경 핸들러
     */
    onSearch?: (searchTerm: string) => void;
    /**
     * 드롭다운 열림/닫힘 상태 변경 핸들러
     */
    onToggle?: (isOpen: boolean) => void;
}
/**
 * ComboBox 컴포넌트는 Field를 기반으로 하는 선택 가능한 드롭다운 메뉴입니다.
 * 검색 기능, 단일/다중 선택을 지원하며 선택된 항목을 Chip으로 표시합니다.
 */
export declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<HTMLDivElement>>;