lumir-design-system-01

import React from 'react'; import { IconName } from 'lumir-design-system-shared'; import { BadgeProps } from '../Badge'; import { ButtonProps } from '../Button'; import { TextDisplayProps } from '../TextDisplay'; type ObjectFitValue = 'fill' | 'contain' | 'cover' | 'none' | 'scaleDown' | 'stretch' | 'fitInside' | 'fillArea' | 'crop'; type ObjectPositionValue = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'cropCenter' | 'cropTop' | 'cropBottom' | 'cropLeft' | 'cropRight' | 'cropTopLeft' | 'cropTopRight' | 'cropBottomLeft' | 'cropBottomRight'; type AspectRatioValue = 'square' | 'landscape.classic' | 'landscape.wide' | 'landscape.ultraWide' | 'landscape.film' | 'portrait.classic' | 'portrait.tall' | 'portrait.book'; type ButtonVariant = 'filled' | 'outlined' | 'transparent'; type ButtonType = 'text-icon' | 'text-only' | 'icon-only'; type ButtonColorScheme = 'primary' | 'secondary' | 'cta'; type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; type ButtonPosition = 'top-right' | 'bottom-full' | 'bottom-right'; export interface CardProps { /** 카드 variant (스타일 변형) */ variant?: 'filled' | 'outlined' | 'transparent'; /** 카드 메인 제목 (상품명, 이름 등) */ title: string; /** 제목 옆에 표시할 뱃지 */ badge?: { text: string; color?: BadgeProps['color']; iconName?: IconName; size?: BadgeProps['size']; style?: BadgeProps['style']; layout?: BadgeProps['layout']; type?: BadgeProps['type']; }; /** 뱃지 표시 여부 */ showBadge?: boolean; /** 상세 설명 텍스트 (브랜드명) */ description?: string; /** 추가 정보 텍스트 (일정 등) */ additionalInfo?: string; /** 상태 텍스트 */ statusText?: string; /** 액션 버튼 설정 (Button 컴포넌트 props 제어) */ actionButton?: { /** 버튼 텍스트 */ text?: string; /** 버튼에 표시할 아이콘 */ iconName?: IconName; /** 버튼 클릭 이벤트 */ onClick?: ButtonProps['onClick']; /** 버튼 비활성화 상태 */ disabled?: ButtonProps['disabled']; /** 버튼 로딩 상태 */ isLoading?: ButtonProps['isLoading']; /** 추가 Button props */ buttonProps?: Partial<ButtonProps>; }; /** 액션 버튼 표시 여부 */ showActionButton?: boolean; /** 이미지 URL (프로필, 상품 이미지 등) */ imageUrl?: string; /** 이미지 영역 표시 여부 */ showImage?: boolean; /** 이미지 높이 (기본값: 242px) */ imageHeight?: string | number; /** 이미지 object-fit 설정 (기본값: cover) */ imageObjectFit?: ObjectFitValue; /** 이미지 object-position 설정 (기본값: center) */ imageObjectPosition?: ObjectPositionValue; /** 이미지 aspect-ratio 설정 */ imageAspectRatio?: AspectRatioValue; /** TextDisplay 크기 */ size?: TextDisplayProps['size']; /** 텍스트 정렬 */ textStyle?: TextDisplayProps['style']; /** 라벨 표시 여부 */ showLabel?: boolean; /** 라벨 텍스트 */ labelText?: string; /** 설명 표시 여부 */ showDescription?: boolean; /** 캡션 표시 여부 */ showCaption?: boolean; /** 캡션 텍스트 */ captionText?: string; /** 클릭 이벤트 */ onClick?: () => void; /** 커스텀 클래스명 */ className?: string; /** 카드의 너비 (반응형 지원) */ width?: any; /** 카드의 최소 너비 (반응형 지원) */ minWidth?: any; /** 카드의 최대 너비 (반응형 지원) */ maxWidth?: any; /** 뱃지 텍스트 */ badgeText?: string; /** 뱃지 색상 */ badgeColor?: BadgeProps['color']; /** 뱃지 아이콘 */ badgeIconName?: IconName; /** 뱃지 크기 */ badgeSize?: BadgeProps['size']; /** 뱃지 스타일 (variant) */ badgeStyle?: BadgeProps['style']; /** 뱃지 레이아웃 */ badgeLayout?: BadgeProps['layout']; /** 뱃지 형태 */ badgeType?: BadgeProps['type']; /** 버튼 variant */ buttonVariant?: ButtonVariant; /** 버튼 타입 */ buttonType?: ButtonType; /** 버튼 색상 스키마 */ buttonColorScheme?: ButtonColorScheme; /** 버튼 크기 */ buttonSize?: ButtonSize; /** 버튼 위치 */ buttonPosition?: ButtonPosition; /** 버튼 텍스트 */ buttonText?: string; /** 버튼 아이콘 (leftIcon) */ buttonIcon?: IconName; /** 버튼 오른쪽 아이콘 */ buttonRightIcon?: IconName; /** 버튼 전체 너비 여부 */ buttonIsFullWidth?: boolean; /** 버튼 선택 상태 */ buttonIsSelected?: boolean; } export declare const Card: React.FC<CardProps>; export {};