@likelion-design/ui 1.0.20 → 1.0.22
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/colors.css.css +1 -1
- package/dist/colors.css.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +149 -104
- package/dist/index.d.ts +149 -104
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/tailwind-preset.js +1 -1
- package/dist/tailwind-preset.js.map +1 -1
- package/dist/tailwind-preset.mjs +1 -1
- package/dist/tailwind-preset.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/tailwind-preset.d.mts +0 -6
package/dist/index.d.ts
CHANGED
|
@@ -4,7 +4,6 @@ import React from 'react';
|
|
|
4
4
|
type ButtonSize = "xlarge" | "large" | "medium" | "small";
|
|
5
5
|
type ButtonColor = "primary" | "neutral" | "secondary";
|
|
6
6
|
type ButtonType = "solid" | "outline" | "ghost" | "weak";
|
|
7
|
-
type ButtonState = "enabled" | "hovered" | "loading" | "disabled";
|
|
8
7
|
interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
|
|
9
8
|
/** 버튼 크기 */
|
|
10
9
|
size?: ButtonSize;
|
|
@@ -14,57 +13,45 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
14
13
|
type?: ButtonType;
|
|
15
14
|
/** HTML 버튼 타입 (button, submit, reset) */
|
|
16
15
|
htmlType?: "button" | "submit" | "reset";
|
|
17
|
-
/**
|
|
18
|
-
|
|
16
|
+
/** 비활성화 */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/** 로딩 상태 */
|
|
19
|
+
loading?: boolean;
|
|
19
20
|
/** 버튼 텍스트 */
|
|
20
21
|
label: React.ReactNode;
|
|
21
22
|
/** Prefix 아이콘 */
|
|
22
23
|
prefixIcon?: React.ReactNode;
|
|
23
24
|
/** Suffix 아이콘 */
|
|
24
25
|
suffixIcon?: React.ReactNode;
|
|
25
|
-
/** 로딩 상태일 때 표시할 스피너 */
|
|
26
|
-
loading?: boolean;
|
|
27
26
|
}
|
|
28
27
|
/** ActionButton 컴포넌트는 사용자가 어떠한 액션을 트리거하거나 이벤트를 실행할 때 사용한다. */
|
|
29
|
-
declare const ActionButton: ({ size, color, type, htmlType,
|
|
28
|
+
declare const ActionButton: ({ size, color, type, htmlType, label, prefixIcon, suffixIcon, loading, className, disabled, ...props }: ActionButtonProps) => react_jsx_runtime.JSX.Element;
|
|
30
29
|
|
|
31
30
|
type IconButtonSize = "xlarge" | "large" | "medium" | "small";
|
|
32
31
|
/** 버튼 색상. solid/outline: primary | neutral | secondary. weak: primary | neutral-dark | neutral-light */
|
|
33
32
|
type IconButtonColor = "primary" | "neutral" | "secondary" | "neutral-dark" | "neutral-light";
|
|
34
33
|
/** 버튼 타입. weak일 때 color로 primary / neutral-dark / neutral-light 구분 */
|
|
35
34
|
type IconButtonType = "solid" | "outline" | "weak";
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
interface IconButtonCustomColor {
|
|
39
|
-
/** 배경색 */
|
|
40
|
-
background?: string;
|
|
41
|
-
/** 아이콘(전경) 색상 */
|
|
42
|
-
color?: string;
|
|
43
|
-
}
|
|
35
|
+
/** IconButton 슬롯 */
|
|
36
|
+
type IconButtonSlot = "root" | "icon";
|
|
44
37
|
interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> {
|
|
45
38
|
/** 버튼 크기 */
|
|
46
39
|
size?: IconButtonSize;
|
|
47
|
-
/** 버튼 색상. 기본 세트: primary, neutral, secondary
|
|
40
|
+
/** 버튼 색상. 기본 세트: primary, neutral, secondary 등 */
|
|
48
41
|
color?: IconButtonColor;
|
|
49
42
|
/** 버튼 타입 (solid, outline, weak) */
|
|
50
43
|
type?: IconButtonType;
|
|
51
|
-
/**
|
|
52
|
-
|
|
44
|
+
/** 비활성화 */
|
|
45
|
+
disabled?: boolean;
|
|
53
46
|
/** 아이콘 (Heroicons 또는 React 컴포넌트) */
|
|
54
47
|
icon: React.ReactNode;
|
|
55
|
-
/** 아이콘에 대한 접근성 라벨 */
|
|
56
|
-
"aria-label": string;
|
|
57
48
|
/** button 요소의 type (submit 등). 기본값 button */
|
|
58
49
|
htmlType?: "button" | "submit" | "reset";
|
|
59
|
-
/**
|
|
60
|
-
|
|
61
|
-
* 지정 시 inline style로 적용되어 클래스 스타일보다 우선합니다.
|
|
62
|
-
* hover/disabled는 적용되지 않으므로, 필요 시 style prop으로 보완하세요.
|
|
63
|
-
*/
|
|
64
|
-
customColor?: IconButtonCustomColor;
|
|
50
|
+
/** 각 슬롯별 인라인 스타일 (root, icon) */
|
|
51
|
+
styles?: Partial<Record<IconButtonSlot, React.CSSProperties>>;
|
|
65
52
|
}
|
|
66
53
|
/** IconButton 컴포넌트는 텍스트 레이블 없이 아이콘만으로 액션을 전달하는 버튼 컴포넌트이다. */
|
|
67
|
-
declare const IconButton: ({ size, color, type,
|
|
54
|
+
declare const IconButton: ({ size, color, type, icon, className, disabled, htmlType, style: propsStyle, styles, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
|
|
68
55
|
|
|
69
56
|
type TabType = "round" | "text";
|
|
70
57
|
type TabSize = "large" | "medium";
|
|
@@ -77,7 +64,7 @@ interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "
|
|
|
77
64
|
badge?: boolean;
|
|
78
65
|
/** 탭 라벨 */
|
|
79
66
|
label: React.ReactNode;
|
|
80
|
-
/** 탭 값 (
|
|
67
|
+
/** 탭 값 (TabGroup에서 사용 시 식별자) */
|
|
81
68
|
value?: string;
|
|
82
69
|
/** 다크 모드 여부 */
|
|
83
70
|
mode?: boolean;
|
|
@@ -124,7 +111,7 @@ interface TabGroupProps {
|
|
|
124
111
|
/** 인라인 스타일 */
|
|
125
112
|
style?: React.CSSProperties;
|
|
126
113
|
}
|
|
127
|
-
/**
|
|
114
|
+
/** TabGroup은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
|
|
128
115
|
declare const TabGroup: {
|
|
129
116
|
({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, items, children, gap, className, style, }: TabGroupProps): react_jsx_runtime.JSX.Element;
|
|
130
117
|
displayName: string;
|
|
@@ -170,6 +157,24 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
|
|
|
170
157
|
/** Close 버튼 클릭 핸들러 */
|
|
171
158
|
onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
172
159
|
}
|
|
160
|
+
interface ChipItem {
|
|
161
|
+
/** Chip 식별 값 */
|
|
162
|
+
value: string;
|
|
163
|
+
/** Chip 라벨 */
|
|
164
|
+
label: React.ReactNode;
|
|
165
|
+
/** Prefix 아이콘 */
|
|
166
|
+
prefixIcon?: React.ReactNode;
|
|
167
|
+
/** Suffix 아이콘 */
|
|
168
|
+
suffixIcon?: React.ReactNode;
|
|
169
|
+
/** 체크 아이콘 표시 여부 */
|
|
170
|
+
showCheck?: boolean;
|
|
171
|
+
/** Close 버튼 표시 여부 */
|
|
172
|
+
showClose?: boolean;
|
|
173
|
+
/** Close 버튼 클릭 핸들러 */
|
|
174
|
+
onClose?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
175
|
+
/** 개별 Chip 비활성화 */
|
|
176
|
+
disabled?: boolean;
|
|
177
|
+
}
|
|
173
178
|
interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
174
179
|
/** 선택된 값 (controlled) - 단일: string, 다중: string[] */
|
|
175
180
|
value?: string | string[];
|
|
@@ -189,12 +194,14 @@ interface ChipGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onC
|
|
|
189
194
|
showCheck?: boolean;
|
|
190
195
|
/** 전체 비활성화 */
|
|
191
196
|
disabled?: boolean;
|
|
192
|
-
/**
|
|
193
|
-
|
|
197
|
+
/** Chip 데이터 배열 (items 사용 시 children 불필요) */
|
|
198
|
+
items?: readonly ChipItem[];
|
|
199
|
+
/** 자식 Chip 컴포넌트들 (items 미사용 시) */
|
|
200
|
+
children?: React.ReactNode;
|
|
194
201
|
}
|
|
195
|
-
/**
|
|
202
|
+
/** ChipGroup은 여러 Chip을 그룹화하여 단일/다중 선택을 관리한다. */
|
|
196
203
|
declare const ChipGroup: {
|
|
197
|
-
({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
|
|
204
|
+
({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, items, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
|
|
198
205
|
displayName: string;
|
|
199
206
|
};
|
|
200
207
|
declare const Chip: {
|
|
@@ -202,7 +209,7 @@ declare const Chip: {
|
|
|
202
209
|
displayName: string;
|
|
203
210
|
} & {
|
|
204
211
|
Group: {
|
|
205
|
-
({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
|
|
212
|
+
({ value: valueProp, defaultValue, onChange, multiple, type, size, variant, showCheck, disabled, items, children, className, ...rest }: ChipGroupProps): react_jsx_runtime.JSX.Element;
|
|
206
213
|
displayName: string;
|
|
207
214
|
};
|
|
208
215
|
};
|
|
@@ -647,6 +654,16 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
|
|
|
647
654
|
}
|
|
648
655
|
/** Checkbox 컴포넌트는 사용자가 선택/해제할 수 있는 체크박스 입력 컴포넌트다. */
|
|
649
656
|
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
657
|
+
interface CheckboxItem {
|
|
658
|
+
/** 체크박스 식별 값 */
|
|
659
|
+
value: string;
|
|
660
|
+
/** 체크박스 라벨 */
|
|
661
|
+
label?: React.ReactNode;
|
|
662
|
+
/** 체크박스 설명 텍스트 */
|
|
663
|
+
description?: React.ReactNode;
|
|
664
|
+
/** 개별 체크박스 비활성화 */
|
|
665
|
+
disabled?: boolean;
|
|
666
|
+
}
|
|
650
667
|
interface CheckboxGroupProps {
|
|
651
668
|
/** 그룹 라벨 */
|
|
652
669
|
label?: React.ReactNode;
|
|
@@ -670,14 +687,16 @@ interface CheckboxGroupProps {
|
|
|
670
687
|
onChange?: (values: string[]) => void;
|
|
671
688
|
/** 비활성화 상태 */
|
|
672
689
|
disabled?: boolean;
|
|
673
|
-
/**
|
|
674
|
-
|
|
690
|
+
/** 체크박스 데이터 배열 (items 사용 시 children 불필요) */
|
|
691
|
+
items?: readonly CheckboxItem[];
|
|
692
|
+
/** 자식 Checkbox 컴포넌트들 (items 미사용 시) */
|
|
693
|
+
children?: React.ReactNode;
|
|
675
694
|
/** 추가 CSS 클래스명 */
|
|
676
695
|
className?: string;
|
|
677
696
|
}
|
|
678
|
-
/**
|
|
697
|
+
/** CheckboxGroup은 여러 Checkbox를 그룹화하여 관리할 수 있는 컴포넌트다. */
|
|
679
698
|
declare const CheckboxGroup: {
|
|
680
|
-
({ label, labelProps, description, descriptionProps, multiple, value: valueProp, defaultValue, onChange, disabled, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
699
|
+
({ label, labelProps, description, descriptionProps, multiple, value: valueProp, defaultValue, onChange, disabled, items, children, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
|
|
681
700
|
displayName: string;
|
|
682
701
|
};
|
|
683
702
|
|
|
@@ -729,6 +748,8 @@ interface SelectMenuItem {
|
|
|
729
748
|
value: string;
|
|
730
749
|
label: React.ReactNode;
|
|
731
750
|
disabled?: boolean;
|
|
751
|
+
/** 항목 왼쪽 아이콘 */
|
|
752
|
+
icon?: React.ReactNode;
|
|
732
753
|
}
|
|
733
754
|
interface SelectMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
|
|
734
755
|
/** 메뉴 항목들 */
|
|
@@ -777,7 +798,7 @@ declare const SelectMenuOverlay: {
|
|
|
777
798
|
|
|
778
799
|
type SelectHeaderType = "outlined" | "underlined";
|
|
779
800
|
type SelectHeaderSize = "medium" | "small";
|
|
780
|
-
interface SelectHeaderProps
|
|
801
|
+
interface SelectHeaderProps {
|
|
781
802
|
/** SelectHeader 타입 */
|
|
782
803
|
type?: SelectHeaderType;
|
|
783
804
|
/**
|
|
@@ -804,9 +825,11 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
804
825
|
/** Help text 아이콘 (true면 기본 아이콘, 노드면 커스텀, false면 아이콘 없음) */
|
|
805
826
|
accentIcon?: boolean | React.ReactNode;
|
|
806
827
|
/** 클릭 핸들러 */
|
|
807
|
-
onClick?: (event: React.MouseEvent<
|
|
828
|
+
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
808
829
|
/** 값 클리어 핸들러 */
|
|
809
|
-
onClear?: (event: React.MouseEvent<
|
|
830
|
+
onClear?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
831
|
+
/** 왼쪽 prefix 아이콘 (TextField prefixIcon으로 전달) */
|
|
832
|
+
prefixIcon?: React.ReactNode;
|
|
810
833
|
/** 커스텀 아이콘 */
|
|
811
834
|
icon?: React.ReactNode;
|
|
812
835
|
/** SelectMenu 항목들 (있으면 클릭 시 메뉴 열림) */
|
|
@@ -825,6 +848,10 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
825
848
|
wrapperStyle?: React.CSSProperties;
|
|
826
849
|
/** 너비 설정 (예: "100%", "300px"). 설정 시 max-width 제한이 해제됨 */
|
|
827
850
|
width?: string | number;
|
|
851
|
+
/** 추가 CSS 클래스명 */
|
|
852
|
+
className?: string;
|
|
853
|
+
/** 요소 ID */
|
|
854
|
+
id?: string;
|
|
828
855
|
/** SelectMenu에 전달: 항목 텍스트 스타일 오버라이드 */
|
|
829
856
|
menuItemTextProps?: SelectMenuProps["itemTextProps"];
|
|
830
857
|
/** SelectMenu에 전달: 선택된 항목 suffix 아이콘 */
|
|
@@ -837,58 +864,78 @@ interface SelectHeaderProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
|
|
|
837
864
|
menuStyle?: React.CSSProperties;
|
|
838
865
|
}
|
|
839
866
|
/** SelectHeader 컴포넌트는 선택된 값을 표시하고 드롭다운을 여는 헤더 컴포넌트다. items를 주면 클릭 시 메뉴가 열린다. */
|
|
840
|
-
declare const SelectHeader:
|
|
867
|
+
declare const SelectHeader: {
|
|
868
|
+
({ type, title, required, value: valueProp, placeholder, disabled, error, description, accentIcon, onClick, onClear, prefixIcon, icon, className, id, items, defaultValue, onChange, multiple, showClear, wrapperClassName, wrapperStyle, width, size, menuItemTextProps, menuSuffixIcon, menuGap, menuClassName, menuStyle, }: SelectHeaderProps): react_jsx_runtime.JSX.Element;
|
|
869
|
+
displayName: string;
|
|
870
|
+
};
|
|
841
871
|
|
|
842
|
-
type
|
|
843
|
-
|
|
844
|
-
type
|
|
845
|
-
/** root/header/menu별 className 또는 전체 적용 */
|
|
846
|
-
type SelectBoxClassName = string | {
|
|
872
|
+
type SelectBoxSize = "small" | "medium";
|
|
873
|
+
/** 파트별 className 오버라이드 */
|
|
874
|
+
type SelectBoxClassNames = {
|
|
847
875
|
root?: string;
|
|
848
876
|
header?: string;
|
|
849
877
|
menu?: string;
|
|
850
878
|
};
|
|
851
|
-
/**
|
|
852
|
-
type
|
|
879
|
+
/** 파트별 style 오버라이드 */
|
|
880
|
+
type SelectBoxStyles = {
|
|
853
881
|
root?: React.CSSProperties;
|
|
854
882
|
header?: React.CSSProperties;
|
|
855
883
|
menu?: React.CSSProperties;
|
|
856
884
|
};
|
|
857
885
|
/** SelectBox 전용 props (label는 SelectHeader title에 매핑) */
|
|
858
886
|
type SelectBoxSpecificProps = {
|
|
859
|
-
/** SelectBox 타입 (Default: 라벨 없음, Label: 라벨 있음, Placeholder: 라벨+플레이스홀더) */
|
|
860
|
-
type?: SelectBoxType;
|
|
861
887
|
/** SelectBox 사이즈 */
|
|
862
888
|
size?: SelectBoxSize;
|
|
863
|
-
/**
|
|
864
|
-
|
|
889
|
+
/** 비활성화 */
|
|
890
|
+
disabled?: boolean;
|
|
891
|
+
/** 에러 상태 */
|
|
892
|
+
error?: boolean;
|
|
893
|
+
/** 성공 상태 */
|
|
894
|
+
success?: boolean;
|
|
895
|
+
/** 로딩 상태 */
|
|
896
|
+
loading?: boolean;
|
|
865
897
|
/** 라벨 텍스트 (SelectHeader title에 매핑) */
|
|
866
898
|
label?: string;
|
|
867
|
-
/**
|
|
868
|
-
|
|
899
|
+
/** 하단 설명 텍스트 */
|
|
900
|
+
description?: string;
|
|
901
|
+
/**
|
|
902
|
+
* 왼쪽 prefix 아이콘. 미지정 시 단일 선택인 경우 선택된 항목의 icon을 자동 감지.
|
|
903
|
+
* false로 설정하면 자동 감지를 비활성화.
|
|
904
|
+
*/
|
|
905
|
+
prefixIcon?: React.ReactNode | false;
|
|
906
|
+
/** root에 적용할 className */
|
|
907
|
+
className?: string;
|
|
908
|
+
/** root에 적용할 인라인 스타일 */
|
|
909
|
+
style?: React.CSSProperties;
|
|
869
910
|
/**
|
|
870
|
-
* className
|
|
871
|
-
* @example
|
|
872
|
-
* @example className={{ root: "w-12", header: "border-red-500", menu: "border-red-500" }}
|
|
911
|
+
* 파트별 className 오버라이드
|
|
912
|
+
* @example classNames={{ root: "w-12", header: "border-red-500", menu: "bg-gray-50" }}
|
|
873
913
|
*/
|
|
874
|
-
|
|
914
|
+
classNames?: SelectBoxClassNames;
|
|
875
915
|
/**
|
|
876
|
-
*
|
|
877
|
-
* @example
|
|
916
|
+
* 파트별 인라인 스타일 오버라이드
|
|
917
|
+
* @example styles={{ header: { borderColor: "red" }, menu: { maxHeight: 200 } }}
|
|
878
918
|
*/
|
|
879
|
-
|
|
919
|
+
styles?: SelectBoxStyles;
|
|
920
|
+
/** 너비 설정 (예: "100%", 300). 미지정 시 CSS 기본 360px */
|
|
921
|
+
width?: string | number;
|
|
880
922
|
};
|
|
881
923
|
/** SelectHeader에서 SelectBox가 오버라이드하는 props 제외 */
|
|
882
|
-
type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className"> & {
|
|
924
|
+
type SelectHeaderPassThrough = Omit<SelectHeaderProps, "type" | "size" | "title" | "disabled" | "error" | "description" | "accentIcon" | "icon" | "prefixIcon" | "wrapperClassName" | "menuClassName" | "menuStyle" | "style" | "className" | "width"> & {
|
|
883
925
|
/** SelectHeader 타입 (outlined | underlined) */
|
|
884
926
|
headerType?: SelectHeaderType;
|
|
885
927
|
};
|
|
886
|
-
/** SelectMenu props (SelectHeader
|
|
887
|
-
type SelectMenuPassThrough =
|
|
928
|
+
/** SelectMenu props (SelectHeader를 통해 SelectMenu로 전달) */
|
|
929
|
+
type SelectMenuPassThrough = {
|
|
930
|
+
/** 메뉴 항목 텍스트 스타일 오버라이드 */
|
|
931
|
+
itemTextProps?: SelectMenuProps["itemTextProps"];
|
|
932
|
+
/** 선택된 항목의 suffix 아이콘 (기본: 체크 아이콘). false면 숨김 */
|
|
933
|
+
suffixIcon?: SelectMenuProps["suffixIcon"];
|
|
934
|
+
};
|
|
888
935
|
type SelectBoxProps = SelectBoxSpecificProps & SelectHeaderPassThrough & SelectMenuPassThrough;
|
|
889
936
|
/** SelectBox는 SelectHeader와 SelectMenu를 하나로 통합한 컴포넌트로, 미리 정의된 목록에서 항목을 선택하도록 돕습니다. */
|
|
890
937
|
declare const SelectBox: {
|
|
891
|
-
({
|
|
938
|
+
({ size, disabled, error, success, loading, label, required, placeholder, items, value, defaultValue, onChange, multiple, description, prefixIcon, className, style, classNames, styles, width, headerType, onClear, showClear, wrapperStyle, onClick, id, itemTextProps, suffixIcon, ...restHeaderProps }: SelectBoxProps): react_jsx_runtime.JSX.Element;
|
|
892
939
|
displayName: string;
|
|
893
940
|
};
|
|
894
941
|
|
|
@@ -927,6 +974,16 @@ interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
|
|
|
927
974
|
}
|
|
928
975
|
/** RadioButton은 단일 선택(라디오) 입력 컴포넌트다. */
|
|
929
976
|
declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
|
|
977
|
+
interface RadioButtonItem {
|
|
978
|
+
/** 라디오 식별 값 */
|
|
979
|
+
value: string;
|
|
980
|
+
/** 라디오 라벨 */
|
|
981
|
+
label?: React.ReactNode;
|
|
982
|
+
/** 라디오 설명 텍스트 */
|
|
983
|
+
description?: React.ReactNode;
|
|
984
|
+
/** 개별 라디오 비활성화 */
|
|
985
|
+
disabled?: boolean;
|
|
986
|
+
}
|
|
930
987
|
interface RadioButtonGroupProps {
|
|
931
988
|
/** 그룹 라벨 */
|
|
932
989
|
label?: React.ReactNode;
|
|
@@ -950,14 +1007,16 @@ interface RadioButtonGroupProps {
|
|
|
950
1007
|
disabled?: boolean;
|
|
951
1008
|
/** name (미지정 시 내부 생성) */
|
|
952
1009
|
name?: string;
|
|
953
|
-
/**
|
|
954
|
-
|
|
1010
|
+
/** 라디오 데이터 배열 (items 사용 시 children 불필요) */
|
|
1011
|
+
items?: readonly RadioButtonItem[];
|
|
1012
|
+
/** 자식 RadioButton 컴포넌트들 (items 미사용 시) */
|
|
1013
|
+
children?: React.ReactNode;
|
|
955
1014
|
/** 추가 CSS 클래스명 */
|
|
956
1015
|
className?: string;
|
|
957
1016
|
}
|
|
958
|
-
/**
|
|
1017
|
+
/** RadioButtonGroup은 여러 RadioButton을 그룹화하여 단일 선택을 관리한다. */
|
|
959
1018
|
declare const RadioButtonGroup: {
|
|
960
|
-
({ label, labelProps, description, descriptionProps, value: valueProp, defaultValue, onChange, disabled, name, children, className, }: RadioButtonGroupProps): react_jsx_runtime.JSX.Element;
|
|
1019
|
+
({ label, labelProps, description, descriptionProps, value: valueProp, defaultValue, onChange, disabled, name, items, children, className, }: RadioButtonGroupProps): react_jsx_runtime.JSX.Element;
|
|
961
1020
|
displayName: string;
|
|
962
1021
|
};
|
|
963
1022
|
|
|
@@ -1154,25 +1213,25 @@ interface CalendarProps {
|
|
|
1154
1213
|
declare const Calendar: React.FC<CalendarProps>;
|
|
1155
1214
|
|
|
1156
1215
|
type DateInputType = "single" | "range";
|
|
1157
|
-
type DateInputState = "default" | "selected" | "disabled";
|
|
1158
1216
|
/**
|
|
1159
1217
|
* DateInput 내부 서브 요소 슬롯 이름.
|
|
1160
1218
|
* classNames / styles 객체의 키로 사용됩니다.
|
|
1161
1219
|
*
|
|
1162
1220
|
* - `root` — 최상위 wrapper (`date-input`)
|
|
1163
|
-
* - `content` — 입력 영역
|
|
1164
|
-
* - `icon` — prefix 캘린더 아이콘
|
|
1165
|
-
* - `text` — 날짜 텍스트 표시 영역
|
|
1221
|
+
* - `content` — 입력 영역
|
|
1222
|
+
* - `icon` — prefix 캘린더 아이콘 (range 모드에서만 사용)
|
|
1223
|
+
* - `text` — 날짜 텍스트 표시 영역 (range 모드에서만 사용)
|
|
1166
1224
|
* - `separator` — range 모드 구분자 (`-`)
|
|
1167
|
-
* - `reset` — 초기화 버튼
|
|
1168
|
-
* - `help` — 도움말 텍스트 영역
|
|
1225
|
+
* - `reset` — 초기화 버튼 (range 모드에서만 사용)
|
|
1169
1226
|
*/
|
|
1170
|
-
type DateInputSlot = "root" | "content" | "icon" | "text" | "separator" | "reset"
|
|
1227
|
+
type DateInputSlot = "root" | "content" | "icon" | "text" | "separator" | "reset";
|
|
1171
1228
|
interface DateInputProps {
|
|
1172
1229
|
/** 입력 타입: 단일 날짜 또는 기간 */
|
|
1173
1230
|
type?: DateInputType;
|
|
1174
|
-
/**
|
|
1175
|
-
|
|
1231
|
+
/** 비활성화 */
|
|
1232
|
+
disabled?: boolean;
|
|
1233
|
+
/** 에러 상태 */
|
|
1234
|
+
error?: boolean;
|
|
1176
1235
|
/** 선택된 날짜 (single 모드) */
|
|
1177
1236
|
value?: Date | null;
|
|
1178
1237
|
/** 시작 날짜 (range 모드) */
|
|
@@ -1183,12 +1242,8 @@ interface DateInputProps {
|
|
|
1183
1242
|
prefixIcon?: boolean;
|
|
1184
1243
|
/** 초기화 버튼 표시 여부 (single / range 모두 지원) */
|
|
1185
1244
|
reset?: boolean;
|
|
1186
|
-
/**
|
|
1187
|
-
|
|
1188
|
-
/** 도움말 글자수 카운터 현재값 */
|
|
1189
|
-
helpCount?: number;
|
|
1190
|
-
/** 도움말 글자수 카운터 최대값 */
|
|
1191
|
-
helpMaxCount?: number;
|
|
1245
|
+
/** 도움말 텍스트 */
|
|
1246
|
+
description?: string;
|
|
1192
1247
|
/** 날짜 표시 포맷 (locale) */
|
|
1193
1248
|
locale?: string;
|
|
1194
1249
|
/** 단일 모드 플레이스홀더 */
|
|
@@ -1221,33 +1276,20 @@ interface DateInputProps {
|
|
|
1221
1276
|
/**
|
|
1222
1277
|
* 각 서브 요소별 커스텀 CSS 클래스.
|
|
1223
1278
|
* 기존 요소의 기본 className에 병합(추가)됩니다.
|
|
1224
|
-
*
|
|
1225
|
-
* @example
|
|
1226
|
-
* classNames={{
|
|
1227
|
-
* root: "my-input",
|
|
1228
|
-
* content: "my-content",
|
|
1229
|
-
* icon: "my-icon",
|
|
1230
|
-
* }}
|
|
1231
1279
|
*/
|
|
1232
1280
|
classNames?: Partial<Record<DateInputSlot, string>>;
|
|
1233
1281
|
/**
|
|
1234
1282
|
* 각 서브 요소별 인라인 스타일.
|
|
1235
1283
|
* 해당 요소에 style 속성으로 적용됩니다.
|
|
1236
|
-
*
|
|
1237
|
-
* @example
|
|
1238
|
-
* styles={{
|
|
1239
|
-
* content: { height: 40, borderRadius: 8 },
|
|
1240
|
-
* icon: { color: "red" },
|
|
1241
|
-
* }}
|
|
1242
1284
|
*/
|
|
1243
1285
|
styles?: Partial<Record<DateInputSlot, React.CSSProperties>>;
|
|
1244
1286
|
}
|
|
1245
1287
|
/**
|
|
1246
1288
|
* Date를 포맷 문자열에 따라 변환합니다.
|
|
1247
1289
|
* 지원 토큰: yyyy, MM, M, dd, d, HH, mm
|
|
1248
|
-
* format이 없으면
|
|
1290
|
+
* format이 없으면 locale 기반 기본 포맷을 사용합니다.
|
|
1249
1291
|
*/
|
|
1250
|
-
declare const formatDate: (d: Date | null | undefined, format?: string) => string;
|
|
1292
|
+
declare const formatDate: (d: Date | null | undefined, format?: string, locale?: string) => string;
|
|
1251
1293
|
/**
|
|
1252
1294
|
* 날짜 문자열을 Date 객체로 파싱합니다.
|
|
1253
1295
|
*
|
|
@@ -1313,8 +1355,14 @@ interface DatePickerRangeProps {
|
|
|
1313
1355
|
/** DatePicker가 내부적으로 관리하는 Calendar props (사용자가 오버라이드 불가) */
|
|
1314
1356
|
type ManagedCalendarProps = "year" | "month" | "selectedDate" | "startDate" | "endDate" | "hoverDate" | "rangeMode" | "minDate" | "maxDate" | "onClick" | "onHover" | "onPrev" | "onNext" | "showPrev" | "showNext" | "disablePrev" | "disableNext" | "locale" | "className" | "style" | "children";
|
|
1315
1357
|
/** DatePicker가 내부적으로 관리하는 DateInput props (사용자가 오버라이드 불가) */
|
|
1316
|
-
type ManagedDateInputProps = "type" | "value" | "startDate" | "endDate" | "onClick" | "onReset" | "reset" | "locale" | "placeholder" | "dateFormat" | "className" | "style";
|
|
1358
|
+
type ManagedDateInputProps = "type" | "value" | "startDate" | "endDate" | "onClick" | "onReset" | "reset" | "disabled" | "error" | "description" | "locale" | "placeholder" | "dateFormat" | "className" | "style";
|
|
1317
1359
|
type DatePickerBaseProps = {
|
|
1360
|
+
/** 비활성화 */
|
|
1361
|
+
disabled?: boolean;
|
|
1362
|
+
/** 에러 상태 */
|
|
1363
|
+
error?: boolean;
|
|
1364
|
+
/** 도움말 텍스트 */
|
|
1365
|
+
description?: string;
|
|
1318
1366
|
/** 선택 가능한 최소 날짜 */
|
|
1319
1367
|
minDate?: Date;
|
|
1320
1368
|
/** 선택 가능한 최대 날짜 */
|
|
@@ -1396,8 +1444,6 @@ type DatePickerBaseProps = {
|
|
|
1396
1444
|
* @example
|
|
1397
1445
|
* dateInputProps={{
|
|
1398
1446
|
* prefixIcon: false,
|
|
1399
|
-
* helpText: "날짜를 선택해주세요",
|
|
1400
|
-
* state: "disabled",
|
|
1401
1447
|
* startPlaceholder: "출발일",
|
|
1402
1448
|
* endPlaceholder: "도착일",
|
|
1403
1449
|
* }}
|
|
@@ -1424,7 +1470,6 @@ interface TimePickerProps {
|
|
|
1424
1470
|
declare const TimePicker: React.FC<TimePickerProps>;
|
|
1425
1471
|
|
|
1426
1472
|
type TextFieldSize = "pc" | "mo" | "medium" | "small";
|
|
1427
|
-
type TextFieldState = "default" | "error";
|
|
1428
1473
|
type TextFieldType = "input" | "area";
|
|
1429
1474
|
interface TextFieldBaseProps {
|
|
1430
1475
|
/** Title 텍스트 (있으면 표시) */
|
|
@@ -1566,4 +1611,4 @@ declare const LAYOUT_SYSTEM: {
|
|
|
1566
1611
|
};
|
|
1567
1612
|
};
|
|
1568
1613
|
|
|
1569
|
-
export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type
|
|
1614
|
+
export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxItem, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipItem, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonSlot, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonItem, type RadioButtonProps, SelectBox, type SelectBoxClassNames, type SelectBoxProps, type SelectBoxSize, type SelectBoxStyles, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabItem, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };
|