@designbasekorea/ui 0.1.21 → 0.1.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +100 -197
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.css.map +1 -1
- package/dist/index.esm.js +1337 -936
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1339 -934
- package/dist/index.js.map +1 -1
- package/dist/index.umd.css +1 -1
- package/dist/index.umd.css.map +1 -1
- package/dist/index.umd.js +1339 -934
- package/dist/index.umd.js.map +1 -1
- package/package.json +4 -4
package/dist/index.d.ts
CHANGED
|
@@ -54,7 +54,7 @@ declare const Accordion: React$2.FC<AccordionProps>;
|
|
|
54
54
|
* 접근성: ARIA 가이드라인 준수, 키보드 네비게이션 지원
|
|
55
55
|
*/
|
|
56
56
|
|
|
57
|
-
type AlertVariant = 'info' | 'success' | 'warning' | 'danger';
|
|
57
|
+
type AlertVariant = 'default' | 'info' | 'success' | 'warning' | 'danger';
|
|
58
58
|
type AlertSize = 's' | 'm' | 'l';
|
|
59
59
|
interface AlertAction {
|
|
60
60
|
/** 액션 라벨 */
|
|
@@ -400,10 +400,7 @@ interface BadgeProps {
|
|
|
400
400
|
declare const Badge: React$2.FC<BadgeProps>;
|
|
401
401
|
|
|
402
402
|
type BannerSize = 's' | 'm' | 'l';
|
|
403
|
-
type BannerVariant = '
|
|
404
|
-
type BannerStyle = 'solid' | 'outline' | 'soft' | 'gradient';
|
|
405
|
-
type BannerPosition = 'top' | 'bottom' | 'fixed' | 'sticky';
|
|
406
|
-
type BannerAlignment = 'left' | 'center' | 'right';
|
|
403
|
+
type BannerVariant = 'primary' | 'secondary' | 'tertiary' | 'image';
|
|
407
404
|
interface BannerAction {
|
|
408
405
|
/** 액션 텍스트 */
|
|
409
406
|
text: string;
|
|
@@ -433,36 +430,12 @@ interface BannerProps {
|
|
|
433
430
|
imageAlt?: string;
|
|
434
431
|
/** 액션들 */
|
|
435
432
|
actions?: BannerAction[];
|
|
436
|
-
/** 닫기 버튼 표시 */
|
|
437
|
-
dismissible?: boolean;
|
|
438
|
-
/** 자동 닫기 시간 (ms) */
|
|
439
|
-
autoDismiss?: number;
|
|
440
433
|
/** 배너 크기 */
|
|
441
434
|
size?: BannerSize;
|
|
442
|
-
/** 배너
|
|
435
|
+
/** 배너 변형 */
|
|
443
436
|
variant?: BannerVariant;
|
|
444
|
-
/**
|
|
445
|
-
style?: BannerStyle;
|
|
446
|
-
/** 배너 위치 */
|
|
447
|
-
position?: BannerPosition;
|
|
448
|
-
/** 콘텐츠 정렬 */
|
|
449
|
-
alignment?: BannerAlignment;
|
|
450
|
-
/** 애니메이션 */
|
|
451
|
-
animated?: boolean;
|
|
452
|
-
/** 전체 너비 */
|
|
453
|
-
fullWidth?: boolean;
|
|
454
|
-
/** 그림자 */
|
|
455
|
-
shadow?: boolean;
|
|
456
|
-
/** 둥근 모서리 */
|
|
457
|
-
rounded?: boolean;
|
|
458
|
-
/** 배경 이미지 */
|
|
437
|
+
/** 배경 이미지 (variant가 'image'일 때 사용) */
|
|
459
438
|
backgroundImage?: string;
|
|
460
|
-
/** 배경 오버레이 색상 */
|
|
461
|
-
overlayColor?: string;
|
|
462
|
-
/** 배경 오버레이 투명도 */
|
|
463
|
-
overlayOpacity?: number;
|
|
464
|
-
/** 닫기 핸들러 */
|
|
465
|
-
onDismiss?: () => void;
|
|
466
439
|
/** 추가 CSS 클래스 */
|
|
467
440
|
className?: string;
|
|
468
441
|
}
|
|
@@ -505,6 +478,8 @@ interface BottomSheetProps {
|
|
|
505
478
|
animationDuration?: number;
|
|
506
479
|
/** z-index */
|
|
507
480
|
zIndex?: number;
|
|
481
|
+
/** 배경 딤 레이어 표시 여부 */
|
|
482
|
+
showBackdrop?: boolean;
|
|
508
483
|
/** 배경 블러 효과 */
|
|
509
484
|
backdropBlur?: boolean;
|
|
510
485
|
/** 배경 투명도 */
|
|
@@ -684,100 +659,55 @@ type CardSize = 's' | 'm' | 'l' | 'xl';
|
|
|
684
659
|
type CardLayout = 'vertical' | 'horizontal' | 'compact';
|
|
685
660
|
type CardImagePosition = 'top' | 'bottom' | 'left' | 'right' | 'background';
|
|
686
661
|
interface CardImage {
|
|
687
|
-
/** 이미지 URL */
|
|
688
662
|
src: string;
|
|
689
|
-
/** 이미지 대체 텍스트 */
|
|
690
663
|
alt?: string;
|
|
691
|
-
/** 이미지 비율 */
|
|
692
664
|
ratio?: '1:1' | '16:9' | '4:3' | '3:2' | '3:4' | '2:1' | 'auto';
|
|
693
|
-
/** 이미지 피팅 방식 */
|
|
694
665
|
fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
|
|
695
|
-
/** 이미지 로딩 방식 */
|
|
696
666
|
loading?: 'lazy' | 'eager';
|
|
697
|
-
/** 이미지 플레이스홀더 */
|
|
698
667
|
placeholder?: 'skeleton' | 'blur' | 'none';
|
|
699
|
-
/** 이미지 클릭 핸들러 */
|
|
700
668
|
onClick?: () => void;
|
|
701
669
|
}
|
|
702
670
|
interface CardAction {
|
|
703
|
-
/** 액션 라벨 */
|
|
704
671
|
label: string;
|
|
705
|
-
/** 액션 타입 */
|
|
706
672
|
variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'link';
|
|
707
|
-
/** 액션 크기 */
|
|
708
673
|
size?: 's' | 'm' | 'l';
|
|
709
|
-
/** 액션 아이콘 */
|
|
710
674
|
icon?: React$2.ComponentType<any>;
|
|
711
|
-
/** 액션 클릭 핸들러 */
|
|
712
675
|
onClick?: () => void;
|
|
713
|
-
/** 액션 비활성화 여부 */
|
|
714
676
|
disabled?: boolean;
|
|
715
|
-
/** 액션 로딩 상태 */
|
|
716
677
|
loading?: boolean;
|
|
717
678
|
}
|
|
718
679
|
interface CardProps {
|
|
719
|
-
/** 카드 제목 */
|
|
720
680
|
title?: string;
|
|
721
|
-
/** 카드 부제목 */
|
|
722
681
|
subtitle?: string;
|
|
723
|
-
/** 카드 설명 */
|
|
724
682
|
description?: string;
|
|
725
|
-
/** 카드 내용 */
|
|
726
683
|
children?: React$2.ReactNode;
|
|
727
|
-
/** 카드 이미지 */
|
|
728
684
|
image?: CardImage;
|
|
729
|
-
/** 카드 아이콘 */
|
|
730
685
|
icon?: React$2.ComponentType<any>;
|
|
731
|
-
/** 카드 액션들 */
|
|
732
686
|
actions?: CardAction[];
|
|
733
|
-
/** 카드 태그들 */
|
|
734
687
|
tags?: string[];
|
|
735
|
-
/** 카드 메타 정보 */
|
|
736
688
|
meta?: {
|
|
737
|
-
/** 작성자 */
|
|
738
689
|
author?: string;
|
|
739
|
-
/** 날짜 */
|
|
740
690
|
date?: string;
|
|
741
|
-
/** 조회수 */
|
|
742
691
|
views?: number;
|
|
743
|
-
/** 좋아요 수 */
|
|
744
692
|
likes?: number;
|
|
745
|
-
/** 댓글 수 */
|
|
746
693
|
comments?: number;
|
|
747
|
-
/** 커스텀 메타 정보 */
|
|
748
694
|
custom?: Record<string, any>;
|
|
749
695
|
};
|
|
750
|
-
/** 카드 변형 */
|
|
751
696
|
variant?: CardVariant;
|
|
752
|
-
/** 카드 크기 */
|
|
753
697
|
size?: CardSize;
|
|
754
|
-
/** 카드 레이아웃 */
|
|
755
698
|
layout?: CardLayout;
|
|
756
|
-
/** 이미지 위치 */
|
|
757
699
|
imagePosition?: CardImagePosition;
|
|
758
|
-
/** 전체 너비 여부 */
|
|
759
700
|
fullWidth?: boolean;
|
|
760
|
-
/** 클릭 가능 여부 */
|
|
761
701
|
clickable?: boolean;
|
|
762
|
-
/** 호버 효과 여부 */
|
|
763
702
|
hoverable?: boolean;
|
|
764
|
-
/** 선택 가능 여부 */
|
|
765
703
|
selectable?: boolean;
|
|
766
|
-
/** 선택된 상태 */
|
|
767
704
|
selected?: boolean;
|
|
768
|
-
/** 비활성화 여부 */
|
|
769
705
|
disabled?: boolean;
|
|
770
|
-
/** 로딩 상태 */
|
|
771
706
|
loading?: boolean;
|
|
772
|
-
/** 추가 CSS 클래스 */
|
|
773
707
|
className?: string;
|
|
774
|
-
/** 추가 스타일 */
|
|
775
708
|
style?: React$2.CSSProperties;
|
|
776
|
-
/** 클릭 핸들러 */
|
|
777
709
|
onClick?: () => void;
|
|
778
|
-
/** 선택 핸들러 */
|
|
779
710
|
onSelect?: (selected: boolean) => void;
|
|
780
|
-
/** 액션 클릭 핸들러 */
|
|
781
711
|
onAction?: (action: CardAction, index: number) => void;
|
|
782
712
|
}
|
|
783
713
|
declare const Card: React$2.ForwardRefExoticComponent<CardProps & React$2.RefAttributes<HTMLDivElement>>;
|
|
@@ -905,7 +835,7 @@ interface CheckboxProps {
|
|
|
905
835
|
isReadOnly?: boolean;
|
|
906
836
|
isRequired?: boolean;
|
|
907
837
|
hasLabel?: boolean;
|
|
908
|
-
size?: '
|
|
838
|
+
size?: 's' | 'm' | 'l';
|
|
909
839
|
children?: React$2.ReactNode;
|
|
910
840
|
className?: string;
|
|
911
841
|
name?: string;
|
|
@@ -958,6 +888,43 @@ interface ChipProps {
|
|
|
958
888
|
}
|
|
959
889
|
declare const Chip: React$2.FC<ChipProps>;
|
|
960
890
|
|
|
891
|
+
/**
|
|
892
|
+
* ColorPicker 컴포넌트
|
|
893
|
+
*
|
|
894
|
+
* 목적: 색상 선택을 위한 컬러 피커
|
|
895
|
+
* 기능: 드롭다운/모달 타입, 입력 필드 옵션, HEX/RGB 지원
|
|
896
|
+
*/
|
|
897
|
+
|
|
898
|
+
type ColorPickerSize = 's' | 'm' | 'l';
|
|
899
|
+
type ColorPickerType = 'dropdown' | 'modal';
|
|
900
|
+
interface ColorPickerProps {
|
|
901
|
+
/** 컬러 피커 크기 */
|
|
902
|
+
size?: ColorPickerSize;
|
|
903
|
+
/** 컬러 피커 타입 (dropdown/modal) */
|
|
904
|
+
type?: ColorPickerType;
|
|
905
|
+
/** 현재 선택된 색상 (HEX) */
|
|
906
|
+
value?: string;
|
|
907
|
+
/** 기본 색상 */
|
|
908
|
+
defaultValue?: string;
|
|
909
|
+
/** 입력 필드 표시 여부 */
|
|
910
|
+
showInput?: boolean;
|
|
911
|
+
/** 알파 채널 지원 여부 */
|
|
912
|
+
showAlpha?: boolean;
|
|
913
|
+
/** 색상 포맷 선택 표시 여부 */
|
|
914
|
+
showFormatSelector?: boolean;
|
|
915
|
+
/** 복사 버튼 표시 여부 */
|
|
916
|
+
showCopyButton?: boolean;
|
|
917
|
+
/** 비활성화 상태 */
|
|
918
|
+
disabled?: boolean;
|
|
919
|
+
/** 읽기 전용 상태 */
|
|
920
|
+
readonly?: boolean;
|
|
921
|
+
/** 색상 변경 핸들러 */
|
|
922
|
+
onChange?: (color: string) => void;
|
|
923
|
+
/** 추가 CSS 클래스 */
|
|
924
|
+
className?: string;
|
|
925
|
+
}
|
|
926
|
+
declare const ColorPicker: React$2.FC<ColorPickerProps>;
|
|
927
|
+
|
|
961
928
|
/**
|
|
962
929
|
* Confirm 컴포넌트
|
|
963
930
|
*
|
|
@@ -1096,6 +1063,7 @@ declare const ContextMenu: React$2.FC<ContextMenuProps>;
|
|
|
1096
1063
|
|
|
1097
1064
|
type DatePickerMode = 'single' | 'range' | 'multiple';
|
|
1098
1065
|
type DatePickerSize = 's' | 'm' | 'l';
|
|
1066
|
+
type DatePickerType = 'dropdown' | 'modal';
|
|
1099
1067
|
type DatePickerVariant = 'default' | 'outlined' | 'filled';
|
|
1100
1068
|
type StartOfWeek = 'sunday' | 'monday';
|
|
1101
1069
|
interface DatePickerEvent {
|
|
@@ -1106,10 +1074,15 @@ interface DatePickerEvent {
|
|
|
1106
1074
|
}
|
|
1107
1075
|
interface DatePickerProps {
|
|
1108
1076
|
mode?: DatePickerMode;
|
|
1077
|
+
type?: DatePickerType;
|
|
1109
1078
|
value?: Date | Date[] | {
|
|
1110
1079
|
start: Date;
|
|
1111
1080
|
end: Date;
|
|
1112
1081
|
};
|
|
1082
|
+
defaultValue?: Date | Date[] | {
|
|
1083
|
+
start: Date;
|
|
1084
|
+
end: Date;
|
|
1085
|
+
};
|
|
1113
1086
|
onChange?: (value: Date | Date[] | {
|
|
1114
1087
|
start: Date;
|
|
1115
1088
|
end: Date;
|
|
@@ -1129,10 +1102,6 @@ interface DatePickerProps {
|
|
|
1129
1102
|
className?: string;
|
|
1130
1103
|
disabled?: boolean;
|
|
1131
1104
|
readonly?: boolean;
|
|
1132
|
-
isOpen?: boolean;
|
|
1133
|
-
onOpenChange?: (isOpen: boolean) => void;
|
|
1134
|
-
trigger?: React$2.ReactNode;
|
|
1135
|
-
placement?: 'top' | 'bottom' | 'left' | 'right';
|
|
1136
1105
|
inline?: boolean;
|
|
1137
1106
|
}
|
|
1138
1107
|
declare const DatePicker: React$2.FC<DatePickerProps>;
|
|
@@ -1306,7 +1275,7 @@ declare const Dropzone: React$2.FC<DropzoneProps>;
|
|
|
1306
1275
|
*/
|
|
1307
1276
|
|
|
1308
1277
|
type EmptyStateVariant = 'no-data' | 'no-results' | 'no-access' | 'error' | 'onboarding';
|
|
1309
|
-
type EmptyStateSize = '
|
|
1278
|
+
type EmptyStateSize = 's' | 'm' | 'l';
|
|
1310
1279
|
interface EmptyStateProps {
|
|
1311
1280
|
/** 빈 상태 유형 */
|
|
1312
1281
|
variant?: EmptyStateVariant;
|
|
@@ -1395,8 +1364,8 @@ declare const FileUploader: React$2.FC<FileUploaderProps>;
|
|
|
1395
1364
|
* 접근성: 스크린 리더 지원, 키보드 네비게이션, 포커스 표시
|
|
1396
1365
|
*/
|
|
1397
1366
|
|
|
1398
|
-
type FloatingActionButtonSize = 's' | 'm' | 'l'
|
|
1399
|
-
type FloatingActionButtonVariant = 'primary' | 'secondary' | '
|
|
1367
|
+
type FloatingActionButtonSize = 's' | 'm' | 'l';
|
|
1368
|
+
type FloatingActionButtonVariant = 'primary' | 'secondary' | 'tertiary';
|
|
1400
1369
|
interface FloatingActionButtonProps {
|
|
1401
1370
|
/** 버튼 크기 */
|
|
1402
1371
|
size?: FloatingActionButtonSize;
|
|
@@ -1404,6 +1373,8 @@ interface FloatingActionButtonProps {
|
|
|
1404
1373
|
variant?: FloatingActionButtonVariant;
|
|
1405
1374
|
/** 아이콘 */
|
|
1406
1375
|
icon?: React$2.ReactNode;
|
|
1376
|
+
/** 로딩 상태 */
|
|
1377
|
+
loading?: boolean;
|
|
1407
1378
|
/** 비활성화 여부 */
|
|
1408
1379
|
disabled?: boolean;
|
|
1409
1380
|
/** 클릭 시 호출되는 함수 */
|
|
@@ -1417,14 +1388,14 @@ interface FloatingActionButtonProps {
|
|
|
1417
1388
|
}
|
|
1418
1389
|
declare const FloatingActionButton: React$2.ForwardRefExoticComponent<Omit<FloatingActionButtonProps, "ref"> & React$2.RefAttributes<HTMLButtonElement>>;
|
|
1419
1390
|
|
|
1420
|
-
type
|
|
1391
|
+
type FormColumns = 1 | 2;
|
|
1421
1392
|
type FormSize = 's' | 'm' | 'l';
|
|
1422
1393
|
type FormVariant = 'default' | 'bordered' | 'filled';
|
|
1423
1394
|
interface FormField {
|
|
1424
1395
|
/** 필드 이름 */
|
|
1425
1396
|
name: string;
|
|
1426
1397
|
/** 필드 타입 */
|
|
1427
|
-
type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | '
|
|
1398
|
+
type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'textarea' | 'select' | 'radio' | 'checkbox' | 'date' | 'file' | 'color' | 'timepicker';
|
|
1428
1399
|
/** 필드 라벨 */
|
|
1429
1400
|
label?: string;
|
|
1430
1401
|
/** 필드 값 */
|
|
@@ -1491,8 +1462,8 @@ interface FormField {
|
|
|
1491
1462
|
interface FormProps {
|
|
1492
1463
|
/** 폼 필드들 */
|
|
1493
1464
|
fields: FormField[];
|
|
1494
|
-
/** 폼
|
|
1495
|
-
|
|
1465
|
+
/** 폼 컬럼 수 (1단 또는 2단) */
|
|
1466
|
+
columns?: FormColumns;
|
|
1496
1467
|
/** 폼 크기 */
|
|
1497
1468
|
size?: FormSize;
|
|
1498
1469
|
/** 폼 스타일 변형 */
|
|
@@ -1925,8 +1896,6 @@ interface LabelProps {
|
|
|
1925
1896
|
declare const Label: React$2.FC<LabelProps>;
|
|
1926
1897
|
|
|
1927
1898
|
type LightboxSize = 's' | 'm' | 'l' | 'xl';
|
|
1928
|
-
type LightboxVariant = 'default' | 'minimal' | 'fullscreen';
|
|
1929
|
-
type LightboxTheme = 'light' | 'dark';
|
|
1930
1899
|
interface LightboxImage {
|
|
1931
1900
|
/** 이미지 ID */
|
|
1932
1901
|
id: string;
|
|
@@ -1952,10 +1921,6 @@ interface LightboxProps {
|
|
|
1952
1921
|
currentIndex?: number;
|
|
1953
1922
|
/** Lightbox 크기 */
|
|
1954
1923
|
size?: LightboxSize;
|
|
1955
|
-
/** Lightbox 스타일 변형 */
|
|
1956
|
-
variant?: LightboxVariant;
|
|
1957
|
-
/** 테마 */
|
|
1958
|
-
theme?: LightboxTheme;
|
|
1959
1924
|
/** 열림 상태 */
|
|
1960
1925
|
isOpen: boolean;
|
|
1961
1926
|
/** 열림 상태 변경 핸들러 */
|
|
@@ -1988,10 +1953,6 @@ interface LightboxProps {
|
|
|
1988
1953
|
closeOnBackdropClick?: boolean;
|
|
1989
1954
|
/** ESC 키로 닫기 */
|
|
1990
1955
|
closeOnEscape?: boolean;
|
|
1991
|
-
/** 읽기 전용 */
|
|
1992
|
-
readonly?: boolean;
|
|
1993
|
-
/** 비활성화 */
|
|
1994
|
-
disabled?: boolean;
|
|
1995
1956
|
/** 추가 CSS 클래스 */
|
|
1996
1957
|
className?: string;
|
|
1997
1958
|
}
|
|
@@ -2015,8 +1976,8 @@ interface ListItem {
|
|
|
2015
1976
|
/** 아이템 배지 */
|
|
2016
1977
|
badge?: {
|
|
2017
1978
|
text: string;
|
|
2018
|
-
|
|
2019
|
-
|
|
1979
|
+
variant?: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger';
|
|
1980
|
+
style?: 'text' | 'outlined';
|
|
2020
1981
|
};
|
|
2021
1982
|
/** 아이템 메타 정보 */
|
|
2022
1983
|
meta?: {
|
|
@@ -2397,6 +2358,9 @@ interface ModalFooterProps {
|
|
|
2397
2358
|
children?: React$2.ReactNode;
|
|
2398
2359
|
}
|
|
2399
2360
|
declare const Modal: React$2.FC<ModalProps>;
|
|
2361
|
+
declare const ModalHeader: React$2.FC<ModalHeaderProps>;
|
|
2362
|
+
declare const ModalBody: React$2.FC<ModalBodyProps>;
|
|
2363
|
+
declare const ModalFooter: React$2.FC<ModalFooterProps>;
|
|
2400
2364
|
|
|
2401
2365
|
/**
|
|
2402
2366
|
* Navbar 컴포넌트
|
|
@@ -2407,11 +2371,13 @@ declare const Modal: React$2.FC<ModalProps>;
|
|
|
2407
2371
|
*/
|
|
2408
2372
|
|
|
2409
2373
|
type NavbarSize = 's' | 'm' | 'l';
|
|
2410
|
-
type NavbarVariant = 'default' | 'transparent'
|
|
2374
|
+
type NavbarVariant = 'default' | 'transparent';
|
|
2411
2375
|
type NavbarPosition = 'fixed' | 'sticky' | 'static';
|
|
2412
2376
|
interface NavbarItem extends Omit<MenuItemProps, 'onClick' | 'onChildClick'> {
|
|
2413
2377
|
/** 하위 메뉴 아이템들 */
|
|
2414
2378
|
children?: NavbarItem[];
|
|
2379
|
+
/** 메뉴 아이템 클릭 핸들러 */
|
|
2380
|
+
onClick?: (item: NavbarItem) => void;
|
|
2415
2381
|
}
|
|
2416
2382
|
interface NavbarProps {
|
|
2417
2383
|
/** 네비게이션 바 크기 */
|
|
@@ -2442,8 +2408,10 @@ interface NavbarProps {
|
|
|
2442
2408
|
badgeStyle?: 'dot' | 'number' | 'text' | 'outlined';
|
|
2443
2409
|
badgeText?: string;
|
|
2444
2410
|
};
|
|
2445
|
-
/**
|
|
2446
|
-
|
|
2411
|
+
/** 로그인 핸들러 */
|
|
2412
|
+
onLoginClick?: () => void;
|
|
2413
|
+
/** 로그아웃 핸들러 */
|
|
2414
|
+
onLogoutClick?: () => void;
|
|
2447
2415
|
/** 인증 상태 */
|
|
2448
2416
|
isAuthenticated?: boolean;
|
|
2449
2417
|
/** 검색 기능 활성화 */
|
|
@@ -2520,56 +2488,29 @@ interface PaginationProps {
|
|
|
2520
2488
|
}
|
|
2521
2489
|
declare const Pagination: React$2.FC<PaginationProps>;
|
|
2522
2490
|
|
|
2523
|
-
/**
|
|
2524
|
-
* Popover 컴포넌트
|
|
2525
|
-
*
|
|
2526
|
-
* 목적: 요소에 대한 추가 콘텐츠를 표시하는 팝오버 제공
|
|
2527
|
-
* 기능: 다양한 위치, 크기, 스타일, 클릭/호버 트리거
|
|
2528
|
-
* 접근성: ARIA 가이드라인 준수, 키보드 네비게이션 지원
|
|
2529
|
-
*/
|
|
2530
|
-
|
|
2531
2491
|
type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
|
|
2532
2492
|
type PopoverSize = 's' | 'm' | 'l';
|
|
2533
2493
|
type PopoverVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
2534
2494
|
type PopoverTrigger = 'click' | 'hover' | 'focus' | 'manual';
|
|
2535
2495
|
interface PopoverProps {
|
|
2536
|
-
/** 팝오버 내용 */
|
|
2537
2496
|
content: React$2.ReactNode;
|
|
2538
|
-
/** 팝오버를 표시할 요소 */
|
|
2539
2497
|
children: React$2.ReactElement;
|
|
2540
|
-
|
|
2498
|
+
title?: string;
|
|
2541
2499
|
position?: PopoverPosition;
|
|
2542
|
-
/** 팝오버 크기 */
|
|
2543
2500
|
size?: PopoverSize;
|
|
2544
|
-
/** 팝오버 스타일 */
|
|
2545
2501
|
variant?: PopoverVariant;
|
|
2546
|
-
/** 트리거 방식 */
|
|
2547
2502
|
trigger?: PopoverTrigger;
|
|
2548
|
-
/** 표시 지연 시간 (ms) - hover 트리거용 */
|
|
2549
2503
|
delay?: number;
|
|
2550
|
-
/** 숨김 지연 시간 (ms) - hover 트리거용 */
|
|
2551
2504
|
hideDelay?: number;
|
|
2552
|
-
/** 항상 표시 여부 */
|
|
2553
2505
|
alwaysShow?: boolean;
|
|
2554
|
-
/** 비활성화 여부 */
|
|
2555
2506
|
disabled?: boolean;
|
|
2556
|
-
/** 최대 너비 */
|
|
2557
2507
|
maxWidth?: number;
|
|
2558
|
-
/** 화살표 표시 여부 */
|
|
2559
2508
|
showArrow?: boolean;
|
|
2560
|
-
/** 배경 클릭 시 닫기 여부 */
|
|
2561
2509
|
closeOnOutsideClick?: boolean;
|
|
2562
|
-
/** ESC 키로 닫기 여부 */
|
|
2563
2510
|
closeOnEscape?: boolean;
|
|
2564
|
-
/** 팝오버 열림 상태 */
|
|
2565
2511
|
open?: boolean;
|
|
2566
|
-
/** 팝오버 열림/닫힘 핸들러 */
|
|
2567
2512
|
onOpenChange?: (open: boolean) => void;
|
|
2568
|
-
/** 닫기 버튼 표시 여부 */
|
|
2569
|
-
showCloseButton?: boolean;
|
|
2570
|
-
/** 추가 CSS 클래스 */
|
|
2571
2513
|
className?: string;
|
|
2572
|
-
/** 추가 props */
|
|
2573
2514
|
[key: string]: any;
|
|
2574
2515
|
}
|
|
2575
2516
|
declare const Popover: React$2.FC<PopoverProps>;
|
|
@@ -2608,9 +2549,8 @@ interface ProgressProps {
|
|
|
2608
2549
|
}
|
|
2609
2550
|
declare const Progress: React$2.FC<ProgressProps>;
|
|
2610
2551
|
|
|
2611
|
-
type ProgressStepVariant = 'default' | 'outlined' | 'filled' | 'minimal';
|
|
2612
2552
|
type ProgressStepSize = 's' | 'm' | 'l';
|
|
2613
|
-
type ProgressStepLayout = 'vertical' | 'horizontal'
|
|
2553
|
+
type ProgressStepLayout = 'vertical' | 'horizontal';
|
|
2614
2554
|
interface ProgressStepItem {
|
|
2615
2555
|
/** 단계 ID */
|
|
2616
2556
|
id: string;
|
|
@@ -2634,8 +2574,6 @@ interface ProgressStepItem {
|
|
|
2634
2574
|
interface ProgressStepProps {
|
|
2635
2575
|
/** 진행 단계 아이템들 */
|
|
2636
2576
|
items: ProgressStepItem[];
|
|
2637
|
-
/** 진행 단계 변형 */
|
|
2638
|
-
variant?: ProgressStepVariant;
|
|
2639
2577
|
/** 진행 단계 크기 */
|
|
2640
2578
|
size?: ProgressStepSize;
|
|
2641
2579
|
/** 진행 단계 레이아웃 */
|
|
@@ -2665,7 +2603,7 @@ declare const ProgressStep: React$2.FC<ProgressStepProps>;
|
|
|
2665
2603
|
* 접근성: ARIA 가이드라인 준수, 스크린 리더 지원
|
|
2666
2604
|
*/
|
|
2667
2605
|
|
|
2668
|
-
type ProgressbarSize = '
|
|
2606
|
+
type ProgressbarSize = 's' | 'm' | 'l';
|
|
2669
2607
|
type ProgressbarVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger';
|
|
2670
2608
|
type ProgressbarStyle = 'solid' | 'striped' | 'animated';
|
|
2671
2609
|
interface ProgressbarProps {
|
|
@@ -3177,7 +3115,7 @@ interface SelectProps {
|
|
|
3177
3115
|
}
|
|
3178
3116
|
declare const Select: React$2.FC<SelectProps>;
|
|
3179
3117
|
|
|
3180
|
-
type SharePlatform = 'facebook' | '
|
|
3118
|
+
type SharePlatform = 'facebook' | 'x' | 'instagram' | 'linkedin' | 'pinterest' | 'whatsapp' | 'telegram' | 'email' | 'link' | 'qr';
|
|
3181
3119
|
type ShareVariant = 'button' | 'dropdown' | 'modal' | 'inline';
|
|
3182
3120
|
type ShareSize = 's' | 'm' | 'l';
|
|
3183
3121
|
type SharePosition = 'top' | 'bottom' | 'left' | 'right';
|
|
@@ -19447,13 +19385,27 @@ interface TableProps<T = any> {
|
|
|
19447
19385
|
height?: string | number;
|
|
19448
19386
|
/** 스크롤 가능 여부 */
|
|
19449
19387
|
scrollable?: boolean;
|
|
19388
|
+
/** 페이지네이션 사용 여부 */
|
|
19389
|
+
pagination?: boolean;
|
|
19390
|
+
/** 현재 페이지 (1-base) */
|
|
19391
|
+
page?: number;
|
|
19392
|
+
/** 페이지 크기 */
|
|
19393
|
+
pageSize?: number;
|
|
19394
|
+
/** 총 아이템 수 (서버 페이지네이션용). 미지정 시 data.length 사용 */
|
|
19395
|
+
totalItems?: number;
|
|
19396
|
+
/** 페이지 변경 핸들러 */
|
|
19397
|
+
onPageChange?: (page: number) => void;
|
|
19398
|
+
/** 페이지 크기 변경 핸들러 */
|
|
19399
|
+
onPageSizeChange?: (size: number) => void;
|
|
19400
|
+
/** 페이지 크기 옵션 */
|
|
19401
|
+
pageSizeOptions?: number[];
|
|
19450
19402
|
/** 추가 CSS 클래스 */
|
|
19451
19403
|
className?: string;
|
|
19452
19404
|
/** 추가 props */
|
|
19453
19405
|
[key: string]: any;
|
|
19454
19406
|
}
|
|
19455
19407
|
declare const Table: {
|
|
19456
|
-
<T extends Record<string, any>>({ data, columns, title, showCountBadge, showFilter, filterOptions, onFilterChange, size, variant, selectable, multiSelect, selectedRows, onSelectionChange, sortable, sortColumn, sortDirection, onSortChange, loading, emptyMessage, onRowClick, rowKey, height, scrollable, className, ...props }: TableProps<T>): JSX$1.Element;
|
|
19408
|
+
<T extends Record<string, any>>({ data, columns, title, showCountBadge, showFilter, filterOptions, onFilterChange, size, variant, selectable, multiSelect, selectedRows, onSelectionChange, sortable, sortColumn, sortDirection, onSortChange, loading, emptyMessage, onRowClick, rowKey, height, scrollable, pagination, page, pageSize, totalItems, onPageChange, onPageSizeChange, pageSizeOptions, className, ...props }: TableProps<T>): JSX$1.Element;
|
|
19457
19409
|
displayName: string;
|
|
19458
19410
|
};
|
|
19459
19411
|
|
|
@@ -19556,47 +19508,19 @@ interface TextareaProps {
|
|
|
19556
19508
|
}
|
|
19557
19509
|
declare const Textarea: React$2.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React$2.RefAttributes<HTMLTextAreaElement>>;
|
|
19558
19510
|
|
|
19559
|
-
/**
|
|
19560
|
-
* TimePicker 컴포넌트
|
|
19561
|
-
*
|
|
19562
|
-
* 시간을 선택할 수 있는 직관적이고 사용하기 쉬운 컴포넌트입니다.
|
|
19563
|
-
* 12시간/24시간 형식, 시간/분 선택, 드롭다운 형태를 지원합니다.
|
|
19564
|
-
*/
|
|
19565
|
-
|
|
19566
19511
|
type TimePickerSize = 's' | 'm' | 'l';
|
|
19567
|
-
type
|
|
19568
|
-
type TimeFormat = '12h' | '24h';
|
|
19569
|
-
type TimePickerMode = 'dropdown' | 'inline';
|
|
19512
|
+
type TimePickerType = 'dropdown' | 'modal';
|
|
19513
|
+
type TimeFormat = '12h' | '24h' | '12h-with-seconds' | '24h-with-seconds';
|
|
19570
19514
|
interface TimePickerProps {
|
|
19571
|
-
|
|
19572
|
-
|
|
19573
|
-
|
|
19574
|
-
|
|
19575
|
-
/** 시간 형식 */
|
|
19515
|
+
size?: TimePickerSize;
|
|
19516
|
+
type?: TimePickerType;
|
|
19517
|
+
value?: string;
|
|
19518
|
+
defaultValue?: string;
|
|
19576
19519
|
format?: TimeFormat;
|
|
19577
|
-
/** 피커 모드 */
|
|
19578
|
-
mode?: TimePickerMode;
|
|
19579
|
-
/** 시간 단위 */
|
|
19580
|
-
hourStep?: number;
|
|
19581
|
-
/** 분 단위 */
|
|
19582
19520
|
minuteStep?: number;
|
|
19583
|
-
/** 최소 시간 */
|
|
19584
|
-
minTime?: Date;
|
|
19585
|
-
/** 최대 시간 */
|
|
19586
|
-
maxTime?: Date;
|
|
19587
|
-
/** 피커 크기 */
|
|
19588
|
-
size?: TimePickerSize;
|
|
19589
|
-
/** 피커 변형 */
|
|
19590
|
-
variant?: TimePickerVariant;
|
|
19591
|
-
/** 비활성화 여부 */
|
|
19592
19521
|
disabled?: boolean;
|
|
19593
|
-
/** 읽기 전용 */
|
|
19594
19522
|
readonly?: boolean;
|
|
19595
|
-
|
|
19596
|
-
placeholder?: string;
|
|
19597
|
-
/** 시간 표시 형식 */
|
|
19598
|
-
displayFormat?: string;
|
|
19599
|
-
/** 추가 CSS 클래스 */
|
|
19523
|
+
onChange?: (time24: string) => void;
|
|
19600
19524
|
className?: string;
|
|
19601
19525
|
}
|
|
19602
19526
|
declare const TimePicker: React$2.FC<TimePickerProps>;
|
|
@@ -19700,7 +19624,7 @@ interface ToggleProps {
|
|
|
19700
19624
|
defaultSelected?: boolean;
|
|
19701
19625
|
isDisabled?: boolean;
|
|
19702
19626
|
isReadOnly?: boolean;
|
|
19703
|
-
size?: '
|
|
19627
|
+
size?: 's' | 'm' | 'l';
|
|
19704
19628
|
children?: React$2.ReactNode;
|
|
19705
19629
|
className?: string;
|
|
19706
19630
|
onChange?: (isSelected: boolean) => void;
|
|
@@ -19775,43 +19699,22 @@ interface ToolbarProps {
|
|
|
19775
19699
|
}
|
|
19776
19700
|
declare const Toolbar: React$2.FC<ToolbarProps>;
|
|
19777
19701
|
|
|
19778
|
-
/**
|
|
19779
|
-
* Tooltip 컴포넌트
|
|
19780
|
-
*
|
|
19781
|
-
* 목적: 요소에 대한 추가 정보를 표시하는 툴팁 제공
|
|
19782
|
-
* 기능: 다양한 위치, 크기, 스타일, 지연 시간 설정
|
|
19783
|
-
* 접근성: ARIA 가이드라인 준수, 키보드 네비게이션 지원
|
|
19784
|
-
*/
|
|
19785
|
-
|
|
19786
19702
|
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
|
|
19787
19703
|
type TooltipSize = 's' | 'm' | 'l';
|
|
19788
19704
|
type TooltipVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
|
|
19789
19705
|
interface TooltipProps {
|
|
19790
|
-
/** 툴팁 내용 */
|
|
19791
19706
|
content: React$2.ReactNode;
|
|
19792
|
-
/** 툴팁을 표시할 요소 */
|
|
19793
19707
|
children: React$2.ReactElement;
|
|
19794
|
-
/** 툴팁 위치 */
|
|
19795
19708
|
position?: TooltipPosition;
|
|
19796
|
-
/** 툴팁 크기 */
|
|
19797
19709
|
size?: TooltipSize;
|
|
19798
|
-
/** 툴팁 스타일 */
|
|
19799
19710
|
variant?: TooltipVariant;
|
|
19800
|
-
/** 표시 지연 시간 (ms) */
|
|
19801
19711
|
delay?: number;
|
|
19802
|
-
/** 숨김 지연 시간 (ms) */
|
|
19803
19712
|
hideDelay?: number;
|
|
19804
|
-
/** 항상 표시 여부 */
|
|
19805
19713
|
alwaysShow?: boolean;
|
|
19806
|
-
/** 비활성화 여부 */
|
|
19807
19714
|
disabled?: boolean;
|
|
19808
|
-
/** 최대 너비 */
|
|
19809
19715
|
maxWidth?: number;
|
|
19810
|
-
/** 화살표 표시 여부 */
|
|
19811
19716
|
showArrow?: boolean;
|
|
19812
|
-
/** 추가 CSS 클래스 */
|
|
19813
19717
|
className?: string;
|
|
19814
|
-
/** 추가 props */
|
|
19815
19718
|
[key: string]: any;
|
|
19816
19719
|
}
|
|
19817
19720
|
declare const Tooltip: React$2.FC<TooltipProps>;
|
|
@@ -20013,5 +19916,5 @@ declare const setTheme: (theme: string) => void;
|
|
|
20013
19916
|
declare const getTheme: () => string;
|
|
20014
19917
|
declare const toggleTheme: () => void;
|
|
20015
19918
|
|
|
20016
|
-
export { Accordion, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, Confirm, Container, ContextMenu, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image, ImageList, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, Navbar, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
|
|
20017
|
-
export type { AccordionItem, AccordionItemType, AccordionProps, AlertAction, AlertProps, AlertSize, AlertVariant, AnimationBackgroundProps, AnimationTextProps, AudioPlayerProps, AudioPlayerSize, AudioPlayerTheme, AudioPlayerVariant, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, AvatarVariant, BackdropProps, BadgeProps, BadgeSize, BadgeStyle, BadgeVariant, BannerAction,
|
|
19919
|
+
export { Accordion, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image, ImageList, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
|
|
19920
|
+
export type { AccordionItem, AccordionItemType, AccordionProps, AlertAction, AlertProps, AlertSize, AlertVariant, AnimationBackgroundProps, AnimationTextProps, AudioPlayerProps, AudioPlayerSize, AudioPlayerTheme, AudioPlayerVariant, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, AvatarVariant, BackdropProps, BadgeProps, BadgeSize, BadgeStyle, BadgeVariant, BannerAction, BannerProps, BannerSize, BannerVariant, BottomSheetProps, BottomSheetSize, BottomSheetVariant, BreadcrumbItem, BreadcrumbsProps, BreadcrumbsSize, BreadcrumbsStyle, ButtonProps, CalendarEvent, CalendarEventType, CalendarProps, CalendarView, CardAction, CardImage, CardImagePosition, CardLayout, CardProps, CardSize, CardVariant, CarouselIndicatorStyle, CarouselItem, CarouselProps, CarouselSize, CarouselTheme, CarouselTransition, CarouselVariant, CheckboxProps, ChipColor, ChipProps, ChipSize, ChipVariant, ColorPickerProps, ColorPickerSize, ColorPickerType, ComponentBaseProps, ConfirmProps, ConfirmSize, ConfirmVariant, ContainerPadding, ContainerProps, ContainerSize, ContainerVariant, ContextMenuItem, ContextMenuProps, DatePickerEvent, DatePickerMode, DatePickerProps, DatePickerSize, DatePickerVariant, DividerProps, DrawerPosition, DrawerProps, DrawerSize, DropdownItem, DropdownProps, DropzoneProps, DropzoneSize, DropzoneVariant, EmptyStateProps, EmptyStateSize, EmptyStateVariant, FileStatus, FileUploaderProps, FileUploaderSize, FileUploaderVariant, FloatingActionButtonProps, FloatingActionButtonSize, FloatingActionButtonVariant, FormField, FormProps, FormSize, FormVariant, GradientColor, GradientDirection, GradientProps, GradientSize, GradientVariant, GridAlignment, GridBreakpoint, GridColProps, GridJustify, GridProps, GridRowProps, GridSize, HeroFeatureAlignment, HeroFeatureButton, HeroFeatureProps, HeroFeatureSize, HeroFeatureTheme, HeroFeatureVariant, ImageFit, ImageItem, ImageListColumns, ImageListLayout, ImageListProps, ImageListSpacing, ImageLoading, ImagePlaceholder, ImageProps, ImageRatio, ImageRounded, InputProps, LabelProps, LightboxImage, LightboxProps, LightboxSize, ListItem, ListItemType, ListLayout, ListProps, ListSize, ListVariant, LogoProps, LogoSize, LogoType, LogoVariant, MarkdownEditorMode, MarkdownEditorProps, MarkdownEditorSize, MarkdownEditorTheme, MarkdownEditorVariant, MarkdownToolbarItem, MasonryAnimation, MasonryColumns, MasonryItem, MasonryProps, MasonrySpacing, MenuItemChild, MenuItemProps, MenuItemSize, MenuItemStyle, MenuItemType, MenuItemVariant, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, NavbarItem, NavbarPosition, NavbarProps, NavbarSize, NavbarVariant, PaginationAlignment, PaginationProps, PaginationSize, PaginationVariant, PopoverPosition, PopoverProps, PopoverSize, PopoverTrigger, PopoverVariant, ProgressProps, ProgressSize, ProgressStepItem, ProgressStepLayout, ProgressStepProps, ProgressStepSize, ProgressType, ProgressVariant, ProgressbarProps, ProgressbarSize, ProgressbarStyle, ProgressbarVariant, RadioProps, RangeSliderProps, RangeSliderSize, RangeSliderVariant, RatingDisplay, RatingProps, RatingSize, RatingType, RatingVariant, ReorderItem, ReorderOrientation, ReorderProps, ReorderSize, ReorderVariant, ResizablePanelsProps, ScrollAreaProps, ScrollAreaSize, ScrollDirection, ScrollbarStyle, SearchBarProps, SearchBarSize, SearchBarVariant, SectionProps, SectionSize, SectionVariant, SegmentControlProps, SegmentOption, SelectOption, SelectProps, SharePlatform, SharePlatformConfig, SharePosition, ShareProps, ShareSize, ShareVariant, SidebarItem, SidebarPosition, SidebarProps, SidebarSize, SidebarVariant, SkeletonProps, SortDirection, SpinnerProps, SpinnerSize, SpinnerType, SplitDirection, SplitMode, SplitSize, SplitViewProps, StackAlignment, StackDirection, StackJustify, StackProps, StackSpacing, StartOfWeek, StatColor, StatLayout, StatProps, StatSize, StatVariant, StepperProps, StepperSize, StepperVariant, TabItem, TableColumn, TableProps, TableSize, TableVariant, TabsProps, TextareaProps, TimeFormat, TimePickerProps, TimePickerSize, TimePickerType, TimelineColor, TimelineItem, TimelinePosition, TimelineProps, TimelineSize, TimelineVariant, ToastProps, ToastStatus, ToggleProps, ToolbarItem, ToolbarPosition, ToolbarProps, ToolbarSize, ToolbarVariant, TooltipPosition, TooltipProps, TooltipSize, TooltipVariant, UploadFile, VideoPlayerProps, VideoPlayerSize, VideoPlayerTheme, VideoPlayerVariant, YouTubePlayerProps, YouTubePlayerSize, YouTubePlayerTheme, YouTubePlayerVariant };
|