dak-krds 0.1.3 → 0.1.4

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.
@@ -0,0 +1,2078 @@
1
+ import * as react from 'react';
2
+ import react__default, { HTMLAttributes, ReactNode, SVGProps, FC, ElementType, ComponentPropsWithoutRef, PropsWithChildren, ReactElement, MouseEvent, KeyboardEvent as KeyboardEvent$1, CSSProperties, Dispatch, SetStateAction } from 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { LocalDate, ZonedDateTime, ChronoUnit, DayOfWeek, LocalDateTime } from '@js-joda/core';
5
+ import { MRT_RowData, MRT_ColumnDef } from 'material-react-table';
6
+
7
+ interface AccordionItemProps {
8
+ id?: string;
9
+ title: ReactNode | string;
10
+ size?: 's' | 'm' | 'l';
11
+ className?: string;
12
+ children: ReactNode;
13
+ childrenClassName?: string;
14
+ }
15
+ interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
16
+ items: AccordionItemProps[];
17
+ variant?: 'line' | 'plain';
18
+ }
19
+ interface ChevronIconProps {
20
+ isOpen: boolean;
21
+ }
22
+ interface InternalAccordionItemProps extends AccordionItemProps {
23
+ isOpen: boolean;
24
+ onClick: () => void;
25
+ }
26
+
27
+ declare const Accordion: react__default.FC<AccordionProps>;
28
+
29
+ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'fill'> {
30
+ icon: IconType;
31
+ /**
32
+ * 아이콘 색상 변경이 필요할 시 color 값 hexCode 혹은 css variable로 넘겨주세요.
33
+ */
34
+ color?: string;
35
+ primary?: string;
36
+ secondary?: string;
37
+ size?: number;
38
+ }
39
+
40
+ declare const ICON_IMPORT_CONFIG: {
41
+ readonly CardSuccess: react.ComponentType<react.SVGProps<SVGSVGElement>>;
42
+ readonly Plus: react.ComponentType<react.SVGProps<SVGSVGElement>>;
43
+ readonly Telephone: react.ComponentType<react.SVGProps<SVGSVGElement>>;
44
+ readonly XTwitter: react.ComponentType<react.SVGProps<SVGSVGElement>>;
45
+ readonly Annotation: react.ComponentType<react.SVGProps<SVGSVGElement>>;
46
+ readonly ArrowDown: react.ComponentType<react.SVGProps<SVGSVGElement>>;
47
+ readonly ArrowDropDown: react.ComponentType<react.SVGProps<SVGSVGElement>>;
48
+ readonly ArrowDropUp: react.ComponentType<react.SVGProps<SVGSVGElement>>;
49
+ readonly ArrowLeft: react.ComponentType<react.SVGProps<SVGSVGElement>>;
50
+ readonly ArrowRightCircleSvgrepoCom: react.ComponentType<react.SVGProps<SVGSVGElement>>;
51
+ readonly ArrowRight: react.ComponentType<react.SVGProps<SVGSVGElement>>;
52
+ readonly ArrowUp: react.ComponentType<react.SVGProps<SVGSVGElement>>;
53
+ readonly ArrowSortBoth: react.ComponentType<react.SVGProps<SVGSVGElement>>;
54
+ readonly ArrowSortBothActive: react.ComponentType<react.SVGProps<SVGSVGElement>>;
55
+ readonly ArrowSortDown: react.ComponentType<react.SVGProps<SVGSVGElement>>;
56
+ readonly ArrowSortUp: react.ComponentType<react.SVGProps<SVGSVGElement>>;
57
+ readonly Attach: react.ComponentType<react.SVGProps<SVGSVGElement>>;
58
+ readonly Baby: react.ComponentType<react.SVGProps<SVGSVGElement>>;
59
+ readonly BagOutline: react.ComponentType<react.SVGProps<SVGSVGElement>>;
60
+ readonly BlueChevronRight: react.ComponentType<react.SVGProps<SVGSVGElement>>;
61
+ readonly Bookmarks: react.ComponentType<react.SVGProps<SVGSVGElement>>;
62
+ readonly Box: react.ComponentType<react.SVGProps<SVGSVGElement>>;
63
+ readonly BtnMinus: react.ComponentType<react.SVGProps<SVGSVGElement>>;
64
+ readonly BtnMore: react.ComponentType<react.SVGProps<SVGSVGElement>>;
65
+ readonly BtnShortcut: react.ComponentType<react.SVGProps<SVGSVGElement>>;
66
+ readonly Calendar: react.ComponentType<react.SVGProps<SVGSVGElement>>;
67
+ readonly CalendarClose: react.ComponentType<react.SVGProps<SVGSVGElement>>;
68
+ readonly CalendarPerson: react.ComponentType<react.SVGProps<SVGSVGElement>>;
69
+ readonly Call: react.ComponentType<react.SVGProps<SVGSVGElement>>;
70
+ readonly Card: react.ComponentType<react.SVGProps<SVGSVGElement>>;
71
+ readonly CarouselLeft: react.ComponentType<react.SVGProps<SVGSVGElement>>;
72
+ readonly CarouselRight: react.ComponentType<react.SVGProps<SVGSVGElement>>;
73
+ readonly CarouselStart: react.ComponentType<react.SVGProps<SVGSVGElement>>;
74
+ readonly CarouselStop: react.ComponentType<react.SVGProps<SVGSVGElement>>;
75
+ readonly Certificate: react.ComponentType<react.SVGProps<SVGSVGElement>>;
76
+ readonly CertificationFinanace: react.ComponentType<react.SVGProps<SVGSVGElement>>;
77
+ readonly CertificationFinanace2: react.ComponentType<react.SVGProps<SVGSVGElement>>;
78
+ readonly CertificationMobile: react.ComponentType<react.SVGProps<SVGSVGElement>>;
79
+ readonly CertificationSimple: react.ComponentType<react.SVGProps<SVGSVGElement>>;
80
+ readonly Certified: react.ComponentType<react.SVGProps<SVGSVGElement>>;
81
+ readonly Check: react.ComponentType<react.SVGProps<SVGSVGElement>>;
82
+ readonly CheckCircle: react.ComponentType<react.SVGProps<SVGSVGElement>>;
83
+ readonly CheckOff: react.ComponentType<react.SVGProps<SVGSVGElement>>;
84
+ readonly CheckOn: react.ComponentType<react.SVGProps<SVGSVGElement>>;
85
+ readonly ChevronRightCircleSvgrepoCom: react.ComponentType<react.SVGProps<SVGSVGElement>>;
86
+ readonly ChevronRightCircle: react.ComponentType<react.SVGProps<SVGSVGElement>>;
87
+ readonly ChevronUpCircleSvgrepoCom: react.ComponentType<react.SVGProps<SVGSVGElement>>;
88
+ readonly ChevronRight: react.ComponentType<react.SVGProps<SVGSVGElement>>;
89
+ readonly ChipChecked: react.ComponentType<react.SVGProps<SVGSVGElement>>;
90
+ readonly ChipDisabled: react.ComponentType<react.SVGProps<SVGSVGElement>>;
91
+ readonly ChipUnchecked: react.ComponentType<react.SVGProps<SVGSVGElement>>;
92
+ readonly Clock: react.ComponentType<react.SVGProps<SVGSVGElement>>;
93
+ readonly Close: react.ComponentType<react.SVGProps<SVGSVGElement>>;
94
+ readonly CloseSidebar: react.ComponentType<react.SVGProps<SVGSVGElement>>;
95
+ readonly Delete: react.ComponentType<react.SVGProps<SVGSVGElement>>;
96
+ readonly Desktop: react.ComponentType<react.SVGProps<SVGSVGElement>>;
97
+ readonly DocumentCheck: react.ComponentType<react.SVGProps<SVGSVGElement>>;
98
+ readonly Document: react.ComponentType<react.SVGProps<SVGSVGElement>>;
99
+ readonly DocumentFill: react.ComponentType<react.SVGProps<SVGSVGElement>>;
100
+ readonly Download: react.ComponentType<react.SVGProps<SVGSVGElement>>;
101
+ readonly Edit: react.ComponentType<react.SVGProps<SVGSVGElement>>;
102
+ readonly EllipsisHorizontal: react.ComponentType<react.SVGProps<SVGSVGElement>>;
103
+ readonly EllipsisVertical: react.ComponentType<react.SVGProps<SVGSVGElement>>;
104
+ readonly Emergency: react.ComponentType<react.SVGProps<SVGSVGElement>>;
105
+ readonly Enter: react.ComponentType<react.SVGProps<SVGSVGElement>>;
106
+ readonly Error: react.ComponentType<react.SVGProps<SVGSVGElement>>;
107
+ readonly Excel: react.ComponentType<react.SVGProps<SVGSVGElement>>;
108
+ readonly Exclamation: react.ComponentType<react.SVGProps<SVGSVGElement>>;
109
+ readonly FaceSad: react.ComponentType<react.SVGProps<SVGSVGElement>>;
110
+ readonly FaceSmile: react.ComponentType<react.SVGProps<SVGSVGElement>>;
111
+ readonly Facebook: react.ComponentType<react.SVGProps<SVGSVGElement>>;
112
+ readonly FigmaFilter: react.ComponentType<react.SVGProps<SVGSVGElement>>;
113
+ readonly FileCsv: react.ComponentType<react.SVGProps<SVGSVGElement>>;
114
+ readonly FileJpg: react.ComponentType<react.SVGProps<SVGSVGElement>>;
115
+ readonly FilePdf: react.ComponentType<react.SVGProps<SVGSVGElement>>;
116
+ readonly FilePng: react.ComponentType<react.SVGProps<SVGSVGElement>>;
117
+ readonly FileWebp: react.ComponentType<react.SVGProps<SVGSVGElement>>;
118
+ readonly FileXls: react.ComponentType<react.SVGProps<SVGSVGElement>>;
119
+ readonly Filter: react.ComponentType<react.SVGProps<SVGSVGElement>>;
120
+ readonly Flag: react.ComponentType<react.SVGProps<SVGSVGElement>>;
121
+ readonly Form: react.ComponentType<react.SVGProps<SVGSVGElement>>;
122
+ readonly Globe: react.ComponentType<react.SVGProps<SVGSVGElement>>;
123
+ readonly Government: react.ComponentType<react.SVGProps<SVGSVGElement>>;
124
+ readonly Group: react.ComponentType<react.SVGProps<SVGSVGElement>>;
125
+ readonly GuideCheck: react.ComponentType<react.SVGProps<SVGSVGElement>>;
126
+ readonly Handshake: react.ComponentType<react.SVGProps<SVGSVGElement>>;
127
+ readonly Heart: react.ComponentType<react.SVGProps<SVGSVGElement>>;
128
+ readonly Home: react.ComponentType<react.SVGProps<SVGSVGElement>>;
129
+ readonly Img: react.ComponentType<react.SVGProps<SVGSVGElement>>;
130
+ readonly InfoCircle: react.ComponentType<react.SVGProps<SVGSVGElement>>;
131
+ readonly Info: react.ComponentType<react.SVGProps<SVGSVGElement>>;
132
+ readonly Inquiry: react.ComponentType<react.SVGProps<SVGSVGElement>>;
133
+ readonly Instagram: react.ComponentType<react.SVGProps<SVGSVGElement>>;
134
+ readonly Join: react.ComponentType<react.SVGProps<SVGSVGElement>>;
135
+ readonly ListAtomicBullet: react.ComponentType<react.SVGProps<SVGSVGElement>>;
136
+ readonly ListCalendar: react.ComponentType<react.SVGProps<SVGSVGElement>>;
137
+ readonly LocationAway: react.ComponentType<react.SVGProps<SVGSVGElement>>;
138
+ readonly Login: react.ComponentType<react.SVGProps<SVGSVGElement>>;
139
+ readonly Logout: react.ComponentType<react.SVGProps<SVGSVGElement>>;
140
+ readonly Mail: react.ComponentType<react.SVGProps<SVGSVGElement>>;
141
+ readonly Map: react.ComponentType<react.SVGProps<SVGSVGElement>>;
142
+ readonly Menu: react.ComponentType<react.SVGProps<SVGSVGElement>>;
143
+ readonly Multi: react.ComponentType<react.SVGProps<SVGSVGElement>>;
144
+ readonly Myinfo: react.ComponentType<react.SVGProps<SVGSVGElement>>;
145
+ readonly NaverBlog: react.ComponentType<react.SVGProps<SVGSVGElement>>;
146
+ readonly NewFolder: react.ComponentType<react.SVGProps<SVGSVGElement>>;
147
+ readonly Nonmember: react.ComponentType<react.SVGProps<SVGSVGElement>>;
148
+ readonly OpenNewWindow: react.ComponentType<react.SVGProps<SVGSVGElement>>;
149
+ readonly PanelClose: react.ComponentType<react.SVGProps<SVGSVGElement>>;
150
+ readonly PanelOpen: react.ComponentType<react.SVGProps<SVGSVGElement>>;
151
+ readonly Pencil: react.ComponentType<react.SVGProps<SVGSVGElement>>;
152
+ readonly Pin: react.ComponentType<react.SVGProps<SVGSVGElement>>;
153
+ readonly Play: react.ComponentType<react.SVGProps<SVGSVGElement>>;
154
+ readonly PopoverHelp: react.ComponentType<react.SVGProps<SVGSVGElement>>;
155
+ readonly PopoverInfo: react.ComponentType<react.SVGProps<SVGSVGElement>>;
156
+ readonly Printer: react.ComponentType<react.SVGProps<SVGSVGElement>>;
157
+ readonly Receipt: react.ComponentType<react.SVGProps<SVGSVGElement>>;
158
+ readonly Reply: react.ComponentType<react.SVGProps<SVGSVGElement>>;
159
+ readonly Reset: react.ComponentType<react.SVGProps<SVGSVGElement>>;
160
+ readonly Return: react.ComponentType<react.SVGProps<SVGSVGElement>>;
161
+ readonly RoundCheck: react.ComponentType<react.SVGProps<SVGSVGElement>>;
162
+ readonly School: react.ComponentType<react.SVGProps<SVGSVGElement>>;
163
+ readonly Scrap: react.ComponentType<react.SVGProps<SVGSVGElement>>;
164
+ readonly Search: react.ComponentType<react.SVGProps<SVGSVGElement>>;
165
+ readonly Setting: react.ComponentType<react.SVGProps<SVGSVGElement>>;
166
+ readonly Share: react.ComponentType<react.SVGProps<SVGSVGElement>>;
167
+ readonly StarActive: react.ComponentType<react.SVGProps<SVGSVGElement>>;
168
+ readonly StarInactive: react.ComponentType<react.SVGProps<SVGSVGElement>>;
169
+ readonly StatDown: react.ComponentType<react.SVGProps<SVGSVGElement>>;
170
+ readonly StatUp: react.ComponentType<react.SVGProps<SVGSVGElement>>;
171
+ readonly Stop: react.ComponentType<react.SVGProps<SVGSVGElement>>;
172
+ readonly SystemDanger: react.ComponentType<react.SVGProps<SVGSVGElement>>;
173
+ readonly SystemInfoStrong: react.ComponentType<react.SVGProps<SVGSVGElement>>;
174
+ readonly SystemInfo: react.ComponentType<react.SVGProps<SVGSVGElement>>;
175
+ readonly SystemSuccess: react.ComponentType<react.SVGProps<SVGSVGElement>>;
176
+ readonly SystemWarning: react.ComponentType<react.SVGProps<SVGSVGElement>>;
177
+ readonly Ticket: react.ComponentType<react.SVGProps<SVGSVGElement>>;
178
+ readonly Time: react.ComponentType<react.SVGProps<SVGSVGElement>>;
179
+ readonly Top: react.ComponentType<react.SVGProps<SVGSVGElement>>;
180
+ readonly Trash: react.ComponentType<react.SVGProps<SVGSVGElement>>;
181
+ readonly Truck: react.ComponentType<react.SVGProps<SVGSVGElement>>;
182
+ readonly Upload: react.ComponentType<react.SVGProps<SVGSVGElement>>;
183
+ readonly VeiwAll: react.ComponentType<react.SVGProps<SVGSVGElement>>;
184
+ readonly Visibility: react.ComponentType<react.SVGProps<SVGSVGElement>>;
185
+ readonly VisibilityOff: react.ComponentType<react.SVGProps<SVGSVGElement>>;
186
+ readonly WidthWide: react.ComponentType<react.SVGProps<SVGSVGElement>>;
187
+ readonly Youtube: react.ComponentType<react.SVGProps<SVGSVGElement>>;
188
+ };
189
+
190
+ type IconType = keyof typeof ICON_IMPORT_CONFIG;
191
+ declare const Icon: ({ icon: iconComponent, size, color, primary, secondary, className, fillRule, viewBox, ...props }: IconProps) => react_jsx_runtime.JSX.Element;
192
+
193
+ type AlertVariant = 'danger' | 'warning' | 'success' | 'information' | 'secondary';
194
+ type IconName = IconType;
195
+ type AlertProps = {
196
+ variant: AlertVariant;
197
+ icon?: AlertVariant;
198
+ title?: ReactNode;
199
+ description?: ReactNode;
200
+ className?: string;
201
+ isFullWidth?: boolean;
202
+ };
203
+
204
+ declare const Alert: ({ variant, icon, title, description, className, isFullWidth }: AlertProps) => react_jsx_runtime.JSX.Element;
205
+
206
+ type BadgeProps = {
207
+ label: string;
208
+ variant?: 'default' | 'primary' | 'secondary' | 'information' | 'success' | 'warning' | 'point' | 'danger' | 'error';
209
+ appearance?: 'stroke' | 'fill-strong' | 'fill-soft';
210
+ size?: 's' | 'm';
211
+ className?: string;
212
+ width?: string;
213
+ height?: string;
214
+ radius?: string;
215
+ };
216
+
217
+ declare const Badge: ({ label, variant, size, appearance, className, width, height, radius, }: BadgeProps) => react_jsx_runtime.JSX.Element;
218
+
219
+ type BodyProps<E extends react.ElementType = 'p'> = {
220
+ size?: 1 | 2;
221
+ weight?: 'regular' | 'semibold' | 'bold';
222
+ color?: string;
223
+ label?: string;
224
+ children?: react.ReactNode;
225
+ className?: string;
226
+ } & react.ComponentPropsWithoutRef<E>;
227
+
228
+ /**
229
+ * Body 컴포넌트 😸
230
+ * 본문 텍스트 렌더링 dak-t1, dak-t2 스타일을 적용합니다.
231
+ *
232
+ * - @param props - Body 컴포넌트의 props
233
+ * - @param size - 본문 텍스트의 크기 (1 또는 2)
234
+ * - @param weight - 본문 텍스트의 두께 ('regular', 'semibold', 'bold')
235
+ * - @param color - 본문 텍스트의 색상
236
+ * - @param children - 렌더링할 텍스트 또는 노드
237
+ * - @param className - 추가로 적용할 클래스 이름
238
+ * - @param label - 본문 텍스트의 레이블
239
+ */
240
+ declare function Body<E extends react.ElementType = 'p'>({ size, weight, color, children, label, className, ...props }: BodyProps<E>): react_jsx_runtime.JSX.Element;
241
+
242
+ interface BreadcrumbItem {
243
+ label: string;
244
+ value: string;
245
+ onClick?: () => void;
246
+ }
247
+ interface BreadcrumbProps {
248
+ items: BreadcrumbItem[];
249
+ onItemClick?: (value: string) => void;
250
+ }
251
+
252
+ declare const Breadcrumb: react__default.FC<BreadcrumbProps>;
253
+
254
+ type ButtonColor$1 = 'primary' | 'secondary' | 'teriary' | 'text' | 'gray' | 'danger' | 'danger-secondary' | 'black' | 'success' | 'success-secondary' | 'warning' | 'outline' | 'transparent' | 'custom';
255
+ type ButtonProps = {
256
+ type?: 'button' | 'submit' | 'reset';
257
+ label?: string;
258
+ variant?: ButtonColor$1;
259
+ onClick?: () => void;
260
+ disabled?: boolean;
261
+ className?: string;
262
+ width?: string | number;
263
+ height?: string | number;
264
+ rounded?: string | number;
265
+ padding?: string | number;
266
+ borderColor?: string;
267
+ useIcon?: boolean;
268
+ icon?: react.ReactNode;
269
+ children?: react.ReactNode;
270
+ iconPosition?: 'left' | 'right';
271
+ iconClassName?: string;
272
+ size?: 'xs' | 's' | 'm' | 'l' | 'xl';
273
+ color?: string;
274
+ loading?: boolean;
275
+ loadingText?: string;
276
+ spinnerSize?: number;
277
+ [key: string]: any;
278
+ } & react.ButtonHTMLAttributes<HTMLButtonElement>;
279
+
280
+ declare function Button({ type, label, variant, onClick, disabled, className, width, height, rounded, padding, icon, iconPosition, iconClassName, size, children, loading, loadingText, spinnerSize, color, borderColor, useIcon, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
281
+
282
+ type CheckboxStatus = 'on' | 'off' | 'indeterminate';
283
+ type CheckboxProps = {
284
+ id: string;
285
+ status: CheckboxStatus;
286
+ onChange: (newStatus: CheckboxStatus) => void;
287
+ label?: string;
288
+ disabled?: boolean;
289
+ size?: 'm' | 'l';
290
+ accentColor?: string;
291
+ labelClassName?: string;
292
+ /** 스크린리더용 접근성 레이블 (시각적으로 숨겨진 레이블이 필요한 경우) */
293
+ title?: string;
294
+ };
295
+ type CheckboxOption = Record<string, string>;
296
+ type CheckboxGroupProps = {
297
+ id?: string;
298
+ options: CheckboxOption[];
299
+ values: string[];
300
+ onChange: (newValues: string[]) => void;
301
+ disabled?: boolean;
302
+ size?: 'm' | 'l';
303
+ labelKey?: string;
304
+ valueKey?: string;
305
+ direction?: 'horizontal' | 'vertical';
306
+ className?: string;
307
+ };
308
+
309
+ /**
310
+ * ✅ 단일 Checkbox 컴포넌트
311
+ * - 커스텀 체크박스 렌더링 (실제 input + 시각적 span)
312
+ * - 키보드 접근성 지원 (기본 checkbox 동작)
313
+ * - 상태: 'on' | 'off'
314
+ */
315
+ declare const Checkbox: react__default.FC<CheckboxProps>;
316
+ /**
317
+ * ✅ CheckboxGroup 컴포넌트
318
+ * - 여러 Checkbox 항목을 배열로 렌더링
319
+ * - 선택된 값 배열(values)을 관리함
320
+ * - 'labelKey', 'valueKey'를 통해 옵션 키를 지정 가능
321
+ * - 방향은 수평(horizontal) 또는 수직(vertical)
322
+ */
323
+ declare const CheckboxGroup: react__default.FC<CheckboxGroupProps>;
324
+
325
+ interface DakCheckBoxProps {
326
+ id: string;
327
+ label?: string;
328
+ width?: string;
329
+ checked?: boolean;
330
+ disabled?: boolean;
331
+ size?: 'default' | 'large';
332
+ onChange?: (checked: boolean) => void;
333
+ }
334
+
335
+ declare const DakCheckBox: ({ id, label, checked, disabled, size, width, onChange, }: DakCheckBoxProps) => react_jsx_runtime.JSX.Element;
336
+
337
+ interface CheckBoxOption {
338
+ [key: string]: any;
339
+ label: string;
340
+ value: string;
341
+ }
342
+ interface DakCheckBoxGroupProps {
343
+ options: CheckBoxOption[];
344
+ value: string[];
345
+ onChange: (value: string[]) => void;
346
+ width?: string;
347
+ valueKey?: string;
348
+ labelKey?: string;
349
+ size?: 'default' | 'large';
350
+ direction?: 'horizontal' | 'vertical';
351
+ disabled?: boolean;
352
+ name?: string;
353
+ required?: boolean;
354
+ }
355
+
356
+ declare const DakCheckBoxGroup: ({ options, value, onChange, valueKey, labelKey, size, direction, width, disabled, name, }: DakCheckBoxGroupProps) => react_jsx_runtime.JSX.Element;
357
+
358
+ type ChipProps = {
359
+ id?: string;
360
+ label: string;
361
+ checked?: boolean;
362
+ disabled?: boolean;
363
+ size?: 's' | 'm' | 'l';
364
+ onChange?: (checked: boolean) => void;
365
+ type?: 'single' | 'multi';
366
+ height?: string;
367
+ };
368
+ type ChipGroupProps = {
369
+ options: ChipOption[];
370
+ selected: string[];
371
+ onChange: (value: string, checked: boolean, label?: string) => void;
372
+ type?: 'single' | 'multi';
373
+ size?: 's' | 'm' | 'l';
374
+ disabled?: boolean;
375
+ labelKey?: string;
376
+ valueKey?: string;
377
+ className?: string;
378
+ height?: string;
379
+ };
380
+ type ChipOption = Record<string, string>;
381
+
382
+ declare const Chip: ({ id, label, checked, disabled, size, onChange, type, height, }: ChipProps) => react_jsx_runtime.JSX.Element;
383
+ declare const ChipGroup: ({ options, selected, onChange, type, size, disabled, labelKey, valueKey, className, height, }: ChipGroupProps) => react_jsx_runtime.JSX.Element;
384
+
385
+ interface CalendarProps {
386
+ type: 'single' | 'range';
387
+ selectedDate?: LocalDate | null;
388
+ onDateSelect?: (date: LocalDate) => void;
389
+ selectedRange?: [LocalDate | null, LocalDate | null];
390
+ currentStep?: 'start' | 'end';
391
+ onRangeSelect?: (range: [LocalDate | null, LocalDate | null]) => void;
392
+ onConfirm?: () => void;
393
+ onCancel?: () => void;
394
+ minYear?: number;
395
+ maxYear?: number;
396
+ minDate?: LocalDate | null;
397
+ maxDate?: LocalDate | null;
398
+ className?: string;
399
+ buttonsDisabled?: boolean;
400
+ }
401
+ interface CalendarDay {
402
+ date: LocalDate;
403
+ isCurrentMonth: boolean;
404
+ isSelected: boolean;
405
+ isToday: boolean;
406
+ isDisabled: boolean;
407
+ }
408
+ interface CalendarWeek {
409
+ year: number;
410
+ month: number;
411
+ days: CalendarDay[];
412
+ }
413
+
414
+ declare function Calendar({ type, selectedDate, onDateSelect, selectedRange, onConfirm, onCancel, minYear, maxYear, minDate, maxDate, className, buttonsDisabled, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
415
+
416
+ interface YearMonthSelectorProps {
417
+ currentDate: LocalDate;
418
+ minYear?: number;
419
+ maxYear?: number;
420
+ onYearChange: (year: number) => void;
421
+ onMonthChange: (month: number) => void;
422
+ }
423
+ declare function YearMonthSelector({ currentDate, minYear, maxYear, onYearChange, onMonthChange, }: YearMonthSelectorProps): react_jsx_runtime.JSX.Element;
424
+
425
+ interface BaseDatePickerProps {
426
+ id: string;
427
+ type?: 'single' | 'range';
428
+ label?: string;
429
+ /**
430
+ * input 요소의 title 속성 (스크린리더 접근성용)
431
+ * 예: "배송일자", "시작일", "종료일"
432
+ */
433
+ inputTitle?: string;
434
+ minYear?: number;
435
+ maxYear?: number;
436
+ minDate?: LocalDate | string | null;
437
+ maxDate?: LocalDate | string | null;
438
+ width?: string | number;
439
+ height?: string | number;
440
+ placeholder?: string;
441
+ disabled?: boolean;
442
+ isRequired?: boolean;
443
+ className?: string;
444
+ useMessage?: boolean;
445
+ titlePosition?: 'vertical' | 'horizontal';
446
+ gap?: string | number;
447
+ titleClassName?: string;
448
+ isValid?: boolean;
449
+ usePortal?: boolean;
450
+ portalGap?: number;
451
+ scrollableElementId?: string;
452
+ }
453
+ interface SingleModeProps extends BaseDatePickerProps {
454
+ type?: 'single';
455
+ value?: LocalDate | string | null;
456
+ onChange: (date: string) => void;
457
+ }
458
+ interface RangeModeProps extends BaseDatePickerProps {
459
+ type: 'range';
460
+ value?: LocalDate[] | string[] | null;
461
+ onChange: (dates: string[]) => void;
462
+ }
463
+ interface DayInfo {
464
+ date: LocalDate;
465
+ isCurrentMonth: boolean;
466
+ isToday: boolean;
467
+ isSelected: boolean;
468
+ isDisabled: boolean;
469
+ isRangeStart?: boolean;
470
+ isRangeEnd?: boolean;
471
+ isRangeMiddle?: boolean;
472
+ isRangeStartOnly?: boolean;
473
+ isRangeSingle?: boolean;
474
+ isValid?: boolean;
475
+ }
476
+ type DatePickerProps = SingleModeProps | RangeModeProps;
477
+ type SingleDatePickerProps = Omit<SingleModeProps, 'type'>;
478
+ type RangeDatePickerProps = Omit<RangeModeProps, 'type'>;
479
+
480
+ declare function DatePicker(props: DatePickerProps): react_jsx_runtime.JSX.Element;
481
+
482
+ /**
483
+ * @Datepicker 캘린더 커스텀 훅 😸
484
+ * 오늘, 현재 날짜, 이전/다음 달로 이동, 년도/월 변경, 날짜 정보 생성 및 클래스 이름 반환
485
+ * 날짜 범위 정보 생성 및 반환
486
+ */
487
+ declare const useCalendar: ({ selectedDate, type, selectedRange, minDate, maxDate, minYear, maxYear, }: {
488
+ selectedDate?: LocalDate | null;
489
+ type?: "single" | "range";
490
+ selectedRange?: [LocalDate | null, LocalDate | null];
491
+ minDate?: LocalDate | null;
492
+ maxDate?: LocalDate | null;
493
+ minYear?: number;
494
+ maxYear?: number;
495
+ }) => {
496
+ today: LocalDate;
497
+ currentDate: LocalDate;
498
+ goToPrevMonth: () => void;
499
+ goToNextMonth: () => void;
500
+ goToYear: (year: number) => void;
501
+ goToMonth: (month: number) => void;
502
+ generateDays: () => {
503
+ isRangeStart: boolean;
504
+ isRangeEnd: boolean;
505
+ isRangeMiddle: boolean;
506
+ isRangeStartOnly: boolean;
507
+ isRangeSingle: boolean;
508
+ date: LocalDate;
509
+ isCurrentMonth: boolean;
510
+ isToday: boolean;
511
+ isSelected: boolean;
512
+ isDisabled: boolean;
513
+ }[];
514
+ getDayClassName: (dayInfo: DayInfo, index: number, totalDays: number) => string[];
515
+ getRangeTextColor: (dayInfo: DayInfo) => "var(--krds-color-gray-0)" | "var(--krds-color-gray-90)" | "var(--krds-color-gray-40)";
516
+ };
517
+
518
+ type DetailProps<E extends react.ElementType> = {
519
+ size?: 'l' | 'm' | 's';
520
+ weight?: 'regular' | 'bold';
521
+ children: react.ReactNode;
522
+ className?: string;
523
+ } & react.ComponentPropsWithoutRef<E>;
524
+
525
+ /**
526
+ * Detail 컴포넌트 😸
527
+ * 상세 정보를 렌더링하는 컴포넌트
528
+ *
529
+ * @param props - Detail 컴포넌트의 props
530
+ * @param size - 텍스트 크기 (l, m, s)
531
+ * @param weight - 텍스트 두께 (regular, bold)
532
+ * @param children - 렌더링할 내용
533
+ * @param className - 추가로 적용할 클래스 이름
534
+ */
535
+ declare function Detail<E extends react.ElementType = 'span'>({ size, weight, color, children, className, ...props }: DetailProps<E>): react_jsx_runtime.JSX.Element;
536
+
537
+ type DisplayProps<E extends react.ElementType> = {
538
+ size?: 'l' | 'm' | 's';
539
+ color?: string;
540
+ children: react.ReactNode;
541
+ className?: string;
542
+ } & react.ComponentPropsWithoutRef<E>;
543
+
544
+ /**
545
+ * Display 컴포넌트 😸
546
+ * 제목(헤딩) 텍스트
547
+ *
548
+ * @param props - Display 컴포넌트의 props
549
+ * @param size - 제목 텍스트의 크기 (예: 's', 'm', 'l')
550
+ * @param color - 제목 텍스트의 색상
551
+ * @param children - 렌더링할 텍스트 또는 노드
552
+ * @param className - 추가로 적용할 클래스 이름
553
+ */
554
+ declare function Display<E extends react.ElementType = 'h1'>({ size, children, color, className, ...props }: DisplayProps<E>): react_jsx_runtime.JSX.Element;
555
+
556
+ interface ErrorPageProps {
557
+ onClick: () => void;
558
+ }
559
+
560
+ declare function ErrorPage({ onClick }: ErrorPageProps): react_jsx_runtime.JSX.Element;
561
+
562
+ type ButtonColor = 'primary' | 'secondary' | 'teriary' | 'text' | 'gray' | 'danger' | 'danger-secondary' | 'black' | 'success' | 'success-secondary' | 'warning' | 'outline' | 'transparent' | 'custom';
563
+ interface FileButtonUploadProps {
564
+ /** 버튼 라벨 텍스트 */
565
+ label?: string;
566
+ variant?: ButtonColor;
567
+ /** 허용된 파일 확장자 (예: 'image/png,image/jpg') */
568
+ accept?: string;
569
+ /** 최대 업로드 파일 용량 (MB 단위) */
570
+ maxSizeMB?: number;
571
+ /** 최대 업로드 파일 개수 (기본값: 1) */
572
+ maxFiles: number;
573
+ /** 선택된 파일 정보 (1개만 사용 시) */
574
+ value?: File[];
575
+ initialFileName?: string;
576
+ /** 파일 변경 핸들러 */
577
+ onChange: (files: File[]) => void;
578
+ /** 설명 텍스트 최대 4개까지 */
579
+ subDescription: string[];
580
+ /** 권장 이미지 크기 (예: '282 × 388') */
581
+ recommendedSize?: string;
582
+ /** 보조 텍스트*/
583
+ helpText?: string[];
584
+ useIcon?: boolean;
585
+ }
586
+
587
+ declare const FileButtonUpload: ({ label, variant, accept, maxSizeMB, value, initialFileName, onChange, subDescription, maxFiles, useIcon, }: FileButtonUploadProps) => react_jsx_runtime.JSX.Element;
588
+
589
+ interface DakFileItem {
590
+ id: string;
591
+ name: string;
592
+ size: number;
593
+ type: 'local' | 'server';
594
+ file?: File;
595
+ fileId?: string;
596
+ url?: string;
597
+ }
598
+ interface DakFileUploadProps {
599
+ value?: DakFileItem[];
600
+ onChange: (files: DakFileItem[]) => void;
601
+ accept?: string;
602
+ maxFiles?: number;
603
+ maxSize?: number;
604
+ maxTotalSize?: number;
605
+ multiple?: boolean;
606
+ disabled?: boolean;
607
+ placeholder?: string;
608
+ showPreview?: boolean;
609
+ showFileSize?: boolean;
610
+ usePreview?: boolean;
611
+ enableDownload?: boolean;
612
+ onServerFileDownload?: (fileId: string, fileName: string) => void;
613
+ onError?: (errors: string[]) => void;
614
+ className?: string;
615
+ }
616
+ interface FileValidationResult {
617
+ valid: boolean;
618
+ errors: string[];
619
+ }
620
+
621
+ declare const DakFileUpload: ({ value, onChange, accept, maxFiles, maxSize, maxTotalSize, multiple, disabled, placeholder, showPreview, showFileSize, usePreview, enableDownload, onServerFileDownload, onError, className, }: DakFileUploadProps) => react_jsx_runtime.JSX.Element;
622
+
623
+ interface FileItemProps {
624
+ name: string;
625
+ size?: number;
626
+ status?: 'uploading' | 'success';
627
+ className?: string;
628
+ maxWidth?: string;
629
+ showDownload?: boolean;
630
+ showPreview?: boolean;
631
+ onDownload?: () => void;
632
+ onRemove?: () => void;
633
+ }
634
+
635
+ declare const FileItem: FC<FileItemProps>;
636
+
637
+ interface FileObject {
638
+ file: File;
639
+ name: string;
640
+ size: number;
641
+ status: 'uploading' | 'success';
642
+ errorMessage?: string;
643
+ }
644
+ interface FileUploadComponentProps {
645
+ title: string;
646
+ description?: string | react__default.ReactNode;
647
+ subDescription?: string;
648
+ maxFiles?: number;
649
+ maxFileSize?: number;
650
+ onUpload: (file: File) => Promise<boolean>;
651
+ onRemove: (fileName: string) => void;
652
+ onChange?: (files: FileObject[]) => void;
653
+ accept?: string;
654
+ compactDisplay?: boolean;
655
+ showCountLabel?: boolean;
656
+ fileList?: FileObject[];
657
+ maxWidth?: string;
658
+ }
659
+
660
+ declare const FileUpload: react__default.FC<FileUploadComponentProps>;
661
+
662
+ type HeadingProps = {
663
+ size?: 1 | 2 | 3 | 4 | 5;
664
+ children: react.ReactNode;
665
+ className?: string;
666
+ } & react.HTMLAttributes<HTMLElement>;
667
+
668
+ /**
669
+ * Heading 컴포넌트 😸🐖
670
+ * 제목(헤딩) 텍스트
671
+ *
672
+ * @param props - Heading 컴포넌트의 props
673
+ * @param size - 헤딩의 레벨(h1~h6), 기본값 1
674
+ * @param color - 헤딩 텍스트의 색상
675
+ * @param children - 렌더링할 텍스트 또는 React 노드
676
+ * @param className - 추가로 적용할 클래스 이름
677
+ */
678
+ declare function Heading({ size, color, children, className, ...props }: HeadingProps): react.DOMElement<{
679
+ defaultChecked?: boolean | undefined;
680
+ defaultValue?: string | number | readonly string[] | undefined;
681
+ suppressContentEditableWarning?: boolean | undefined;
682
+ suppressHydrationWarning?: boolean | undefined;
683
+ accessKey?: string | undefined;
684
+ autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
685
+ autoFocus?: boolean | undefined;
686
+ contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
687
+ contextMenu?: string | undefined;
688
+ dir?: string | undefined;
689
+ draggable?: (boolean | "true" | "false") | undefined;
690
+ enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
691
+ hidden?: boolean | undefined;
692
+ id?: string | undefined;
693
+ lang?: string | undefined;
694
+ nonce?: string | undefined;
695
+ slot?: string | undefined;
696
+ spellCheck?: (boolean | "true" | "false") | undefined;
697
+ style: react.CSSProperties;
698
+ tabIndex?: number | undefined;
699
+ title?: string | undefined;
700
+ translate?: "yes" | "no" | undefined;
701
+ radioGroup?: string | undefined;
702
+ role?: react.AriaRole | undefined;
703
+ about?: string | undefined;
704
+ content?: string | undefined;
705
+ datatype?: string | undefined;
706
+ inlist?: any;
707
+ prefix?: string | undefined;
708
+ property?: string | undefined;
709
+ rel?: string | undefined;
710
+ resource?: string | undefined;
711
+ rev?: string | undefined;
712
+ typeof?: string | undefined;
713
+ vocab?: string | undefined;
714
+ autoCorrect?: string | undefined;
715
+ autoSave?: string | undefined;
716
+ itemProp?: string | undefined;
717
+ itemScope?: boolean | undefined;
718
+ itemType?: string | undefined;
719
+ itemID?: string | undefined;
720
+ itemRef?: string | undefined;
721
+ results?: number | undefined;
722
+ security?: string | undefined;
723
+ unselectable?: "on" | "off" | undefined;
724
+ popover?: "" | "auto" | "manual" | "hint" | undefined;
725
+ popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
726
+ popoverTarget?: string | undefined;
727
+ inert?: boolean | undefined;
728
+ inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
729
+ is?: string | undefined;
730
+ exportparts?: string | undefined;
731
+ part?: string | undefined;
732
+ "aria-activedescendant"?: string | undefined;
733
+ "aria-atomic"?: (boolean | "true" | "false") | undefined;
734
+ "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
735
+ "aria-braillelabel"?: string | undefined;
736
+ "aria-brailleroledescription"?: string | undefined;
737
+ "aria-busy"?: (boolean | "true" | "false") | undefined;
738
+ "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
739
+ "aria-colcount"?: number | undefined;
740
+ "aria-colindex"?: number | undefined;
741
+ "aria-colindextext"?: string | undefined;
742
+ "aria-colspan"?: number | undefined;
743
+ "aria-controls"?: string | undefined;
744
+ "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
745
+ "aria-describedby"?: string | undefined;
746
+ "aria-description"?: string | undefined;
747
+ "aria-details"?: string | undefined;
748
+ "aria-disabled"?: (boolean | "true" | "false") | undefined;
749
+ "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
750
+ "aria-errormessage"?: string | undefined;
751
+ "aria-expanded"?: (boolean | "true" | "false") | undefined;
752
+ "aria-flowto"?: string | undefined;
753
+ "aria-grabbed"?: (boolean | "true" | "false") | undefined;
754
+ "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
755
+ "aria-hidden"?: (boolean | "true" | "false") | undefined;
756
+ "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
757
+ "aria-keyshortcuts"?: string | undefined;
758
+ "aria-label"?: string | undefined;
759
+ "aria-labelledby"?: string | undefined;
760
+ "aria-level"?: number | undefined;
761
+ "aria-live"?: "off" | "assertive" | "polite" | undefined;
762
+ "aria-modal"?: (boolean | "true" | "false") | undefined;
763
+ "aria-multiline"?: (boolean | "true" | "false") | undefined;
764
+ "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
765
+ "aria-orientation"?: "horizontal" | "vertical" | undefined;
766
+ "aria-owns"?: string | undefined;
767
+ "aria-placeholder"?: string | undefined;
768
+ "aria-posinset"?: number | undefined;
769
+ "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
770
+ "aria-readonly"?: (boolean | "true" | "false") | undefined;
771
+ "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
772
+ "aria-required"?: (boolean | "true" | "false") | undefined;
773
+ "aria-roledescription"?: string | undefined;
774
+ "aria-rowcount"?: number | undefined;
775
+ "aria-rowindex"?: number | undefined;
776
+ "aria-rowindextext"?: string | undefined;
777
+ "aria-rowspan"?: number | undefined;
778
+ "aria-selected"?: (boolean | "true" | "false") | undefined;
779
+ "aria-setsize"?: number | undefined;
780
+ "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
781
+ "aria-valuemax"?: number | undefined;
782
+ "aria-valuemin"?: number | undefined;
783
+ "aria-valuenow"?: number | undefined;
784
+ "aria-valuetext"?: string | undefined;
785
+ dangerouslySetInnerHTML?: {
786
+ __html: string | TrustedHTML;
787
+ } | undefined;
788
+ onCopy?: react.ClipboardEventHandler<HTMLElement> | undefined;
789
+ onCopyCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
790
+ onCut?: react.ClipboardEventHandler<HTMLElement> | undefined;
791
+ onCutCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
792
+ onPaste?: react.ClipboardEventHandler<HTMLElement> | undefined;
793
+ onPasteCapture?: react.ClipboardEventHandler<HTMLElement> | undefined;
794
+ onCompositionEnd?: react.CompositionEventHandler<HTMLElement> | undefined;
795
+ onCompositionEndCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
796
+ onCompositionStart?: react.CompositionEventHandler<HTMLElement> | undefined;
797
+ onCompositionStartCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
798
+ onCompositionUpdate?: react.CompositionEventHandler<HTMLElement> | undefined;
799
+ onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLElement> | undefined;
800
+ onFocus?: react.FocusEventHandler<HTMLElement> | undefined;
801
+ onFocusCapture?: react.FocusEventHandler<HTMLElement> | undefined;
802
+ onBlur?: react.FocusEventHandler<HTMLElement> | undefined;
803
+ onBlurCapture?: react.FocusEventHandler<HTMLElement> | undefined;
804
+ onChange?: react.FormEventHandler<HTMLElement> | undefined;
805
+ onChangeCapture?: react.FormEventHandler<HTMLElement> | undefined;
806
+ onBeforeInput?: react.InputEventHandler<HTMLElement> | undefined;
807
+ onBeforeInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
808
+ onInput?: react.FormEventHandler<HTMLElement> | undefined;
809
+ onInputCapture?: react.FormEventHandler<HTMLElement> | undefined;
810
+ onReset?: react.FormEventHandler<HTMLElement> | undefined;
811
+ onResetCapture?: react.FormEventHandler<HTMLElement> | undefined;
812
+ onSubmit?: react.FormEventHandler<HTMLElement> | undefined;
813
+ onSubmitCapture?: react.FormEventHandler<HTMLElement> | undefined;
814
+ onInvalid?: react.FormEventHandler<HTMLElement> | undefined;
815
+ onInvalidCapture?: react.FormEventHandler<HTMLElement> | undefined;
816
+ onLoad?: react.ReactEventHandler<HTMLElement> | undefined;
817
+ onLoadCapture?: react.ReactEventHandler<HTMLElement> | undefined;
818
+ onError?: react.ReactEventHandler<HTMLElement> | undefined;
819
+ onErrorCapture?: react.ReactEventHandler<HTMLElement> | undefined;
820
+ onKeyDown?: react.KeyboardEventHandler<HTMLElement> | undefined;
821
+ onKeyDownCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
822
+ onKeyPress?: react.KeyboardEventHandler<HTMLElement> | undefined;
823
+ onKeyPressCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
824
+ onKeyUp?: react.KeyboardEventHandler<HTMLElement> | undefined;
825
+ onKeyUpCapture?: react.KeyboardEventHandler<HTMLElement> | undefined;
826
+ onAbort?: react.ReactEventHandler<HTMLElement> | undefined;
827
+ onAbortCapture?: react.ReactEventHandler<HTMLElement> | undefined;
828
+ onCanPlay?: react.ReactEventHandler<HTMLElement> | undefined;
829
+ onCanPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
830
+ onCanPlayThrough?: react.ReactEventHandler<HTMLElement> | undefined;
831
+ onCanPlayThroughCapture?: react.ReactEventHandler<HTMLElement> | undefined;
832
+ onDurationChange?: react.ReactEventHandler<HTMLElement> | undefined;
833
+ onDurationChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
834
+ onEmptied?: react.ReactEventHandler<HTMLElement> | undefined;
835
+ onEmptiedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
836
+ onEncrypted?: react.ReactEventHandler<HTMLElement> | undefined;
837
+ onEncryptedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
838
+ onEnded?: react.ReactEventHandler<HTMLElement> | undefined;
839
+ onEndedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
840
+ onLoadedData?: react.ReactEventHandler<HTMLElement> | undefined;
841
+ onLoadedDataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
842
+ onLoadedMetadata?: react.ReactEventHandler<HTMLElement> | undefined;
843
+ onLoadedMetadataCapture?: react.ReactEventHandler<HTMLElement> | undefined;
844
+ onLoadStart?: react.ReactEventHandler<HTMLElement> | undefined;
845
+ onLoadStartCapture?: react.ReactEventHandler<HTMLElement> | undefined;
846
+ onPause?: react.ReactEventHandler<HTMLElement> | undefined;
847
+ onPauseCapture?: react.ReactEventHandler<HTMLElement> | undefined;
848
+ onPlay?: react.ReactEventHandler<HTMLElement> | undefined;
849
+ onPlayCapture?: react.ReactEventHandler<HTMLElement> | undefined;
850
+ onPlaying?: react.ReactEventHandler<HTMLElement> | undefined;
851
+ onPlayingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
852
+ onProgress?: react.ReactEventHandler<HTMLElement> | undefined;
853
+ onProgressCapture?: react.ReactEventHandler<HTMLElement> | undefined;
854
+ onRateChange?: react.ReactEventHandler<HTMLElement> | undefined;
855
+ onRateChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
856
+ onSeeked?: react.ReactEventHandler<HTMLElement> | undefined;
857
+ onSeekedCapture?: react.ReactEventHandler<HTMLElement> | undefined;
858
+ onSeeking?: react.ReactEventHandler<HTMLElement> | undefined;
859
+ onSeekingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
860
+ onStalled?: react.ReactEventHandler<HTMLElement> | undefined;
861
+ onStalledCapture?: react.ReactEventHandler<HTMLElement> | undefined;
862
+ onSuspend?: react.ReactEventHandler<HTMLElement> | undefined;
863
+ onSuspendCapture?: react.ReactEventHandler<HTMLElement> | undefined;
864
+ onTimeUpdate?: react.ReactEventHandler<HTMLElement> | undefined;
865
+ onTimeUpdateCapture?: react.ReactEventHandler<HTMLElement> | undefined;
866
+ onVolumeChange?: react.ReactEventHandler<HTMLElement> | undefined;
867
+ onVolumeChangeCapture?: react.ReactEventHandler<HTMLElement> | undefined;
868
+ onWaiting?: react.ReactEventHandler<HTMLElement> | undefined;
869
+ onWaitingCapture?: react.ReactEventHandler<HTMLElement> | undefined;
870
+ onAuxClick?: react.MouseEventHandler<HTMLElement> | undefined;
871
+ onAuxClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
872
+ onClick?: react.MouseEventHandler<HTMLElement> | undefined;
873
+ onClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
874
+ onContextMenu?: react.MouseEventHandler<HTMLElement> | undefined;
875
+ onContextMenuCapture?: react.MouseEventHandler<HTMLElement> | undefined;
876
+ onDoubleClick?: react.MouseEventHandler<HTMLElement> | undefined;
877
+ onDoubleClickCapture?: react.MouseEventHandler<HTMLElement> | undefined;
878
+ onDrag?: react.DragEventHandler<HTMLElement> | undefined;
879
+ onDragCapture?: react.DragEventHandler<HTMLElement> | undefined;
880
+ onDragEnd?: react.DragEventHandler<HTMLElement> | undefined;
881
+ onDragEndCapture?: react.DragEventHandler<HTMLElement> | undefined;
882
+ onDragEnter?: react.DragEventHandler<HTMLElement> | undefined;
883
+ onDragEnterCapture?: react.DragEventHandler<HTMLElement> | undefined;
884
+ onDragExit?: react.DragEventHandler<HTMLElement> | undefined;
885
+ onDragExitCapture?: react.DragEventHandler<HTMLElement> | undefined;
886
+ onDragLeave?: react.DragEventHandler<HTMLElement> | undefined;
887
+ onDragLeaveCapture?: react.DragEventHandler<HTMLElement> | undefined;
888
+ onDragOver?: react.DragEventHandler<HTMLElement> | undefined;
889
+ onDragOverCapture?: react.DragEventHandler<HTMLElement> | undefined;
890
+ onDragStart?: react.DragEventHandler<HTMLElement> | undefined;
891
+ onDragStartCapture?: react.DragEventHandler<HTMLElement> | undefined;
892
+ onDrop?: react.DragEventHandler<HTMLElement> | undefined;
893
+ onDropCapture?: react.DragEventHandler<HTMLElement> | undefined;
894
+ onMouseDown?: react.MouseEventHandler<HTMLElement> | undefined;
895
+ onMouseDownCapture?: react.MouseEventHandler<HTMLElement> | undefined;
896
+ onMouseEnter?: react.MouseEventHandler<HTMLElement> | undefined;
897
+ onMouseLeave?: react.MouseEventHandler<HTMLElement> | undefined;
898
+ onMouseMove?: react.MouseEventHandler<HTMLElement> | undefined;
899
+ onMouseMoveCapture?: react.MouseEventHandler<HTMLElement> | undefined;
900
+ onMouseOut?: react.MouseEventHandler<HTMLElement> | undefined;
901
+ onMouseOutCapture?: react.MouseEventHandler<HTMLElement> | undefined;
902
+ onMouseOver?: react.MouseEventHandler<HTMLElement> | undefined;
903
+ onMouseOverCapture?: react.MouseEventHandler<HTMLElement> | undefined;
904
+ onMouseUp?: react.MouseEventHandler<HTMLElement> | undefined;
905
+ onMouseUpCapture?: react.MouseEventHandler<HTMLElement> | undefined;
906
+ onSelect?: react.ReactEventHandler<HTMLElement> | undefined;
907
+ onSelectCapture?: react.ReactEventHandler<HTMLElement> | undefined;
908
+ onTouchCancel?: react.TouchEventHandler<HTMLElement> | undefined;
909
+ onTouchCancelCapture?: react.TouchEventHandler<HTMLElement> | undefined;
910
+ onTouchEnd?: react.TouchEventHandler<HTMLElement> | undefined;
911
+ onTouchEndCapture?: react.TouchEventHandler<HTMLElement> | undefined;
912
+ onTouchMove?: react.TouchEventHandler<HTMLElement> | undefined;
913
+ onTouchMoveCapture?: react.TouchEventHandler<HTMLElement> | undefined;
914
+ onTouchStart?: react.TouchEventHandler<HTMLElement> | undefined;
915
+ onTouchStartCapture?: react.TouchEventHandler<HTMLElement> | undefined;
916
+ onPointerDown?: react.PointerEventHandler<HTMLElement> | undefined;
917
+ onPointerDownCapture?: react.PointerEventHandler<HTMLElement> | undefined;
918
+ onPointerMove?: react.PointerEventHandler<HTMLElement> | undefined;
919
+ onPointerMoveCapture?: react.PointerEventHandler<HTMLElement> | undefined;
920
+ onPointerUp?: react.PointerEventHandler<HTMLElement> | undefined;
921
+ onPointerUpCapture?: react.PointerEventHandler<HTMLElement> | undefined;
922
+ onPointerCancel?: react.PointerEventHandler<HTMLElement> | undefined;
923
+ onPointerCancelCapture?: react.PointerEventHandler<HTMLElement> | undefined;
924
+ onPointerEnter?: react.PointerEventHandler<HTMLElement> | undefined;
925
+ onPointerLeave?: react.PointerEventHandler<HTMLElement> | undefined;
926
+ onPointerOver?: react.PointerEventHandler<HTMLElement> | undefined;
927
+ onPointerOverCapture?: react.PointerEventHandler<HTMLElement> | undefined;
928
+ onPointerOut?: react.PointerEventHandler<HTMLElement> | undefined;
929
+ onPointerOutCapture?: react.PointerEventHandler<HTMLElement> | undefined;
930
+ onGotPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
931
+ onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
932
+ onLostPointerCapture?: react.PointerEventHandler<HTMLElement> | undefined;
933
+ onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLElement> | undefined;
934
+ onScroll?: react.UIEventHandler<HTMLElement> | undefined;
935
+ onScrollCapture?: react.UIEventHandler<HTMLElement> | undefined;
936
+ onScrollEnd?: react.UIEventHandler<HTMLElement> | undefined;
937
+ onScrollEndCapture?: react.UIEventHandler<HTMLElement> | undefined;
938
+ onWheel?: react.WheelEventHandler<HTMLElement> | undefined;
939
+ onWheelCapture?: react.WheelEventHandler<HTMLElement> | undefined;
940
+ onAnimationStart?: react.AnimationEventHandler<HTMLElement> | undefined;
941
+ onAnimationStartCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
942
+ onAnimationEnd?: react.AnimationEventHandler<HTMLElement> | undefined;
943
+ onAnimationEndCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
944
+ onAnimationIteration?: react.AnimationEventHandler<HTMLElement> | undefined;
945
+ onAnimationIterationCapture?: react.AnimationEventHandler<HTMLElement> | undefined;
946
+ onToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
947
+ onBeforeToggle?: react.ToggleEventHandler<HTMLElement> | undefined;
948
+ onTransitionCancel?: react.TransitionEventHandler<HTMLElement> | undefined;
949
+ onTransitionCancelCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
950
+ onTransitionEnd?: react.TransitionEventHandler<HTMLElement> | undefined;
951
+ onTransitionEndCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
952
+ onTransitionRun?: react.TransitionEventHandler<HTMLElement> | undefined;
953
+ onTransitionRunCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
954
+ onTransitionStart?: react.TransitionEventHandler<HTMLElement> | undefined;
955
+ onTransitionStartCapture?: react.TransitionEventHandler<HTMLElement> | undefined;
956
+ className: string;
957
+ }, Element>;
958
+
959
+ type LabelSize = 'l' | 'm' | 's' | 'xs';
960
+ type LabelWeight = 'regular' | 'bold';
961
+ type LabelProps<E extends ElementType> = {
962
+ id?: string;
963
+ size?: LabelSize;
964
+ weight?: LabelWeight;
965
+ children?: react__default.ReactNode;
966
+ className?: string;
967
+ required?: boolean;
968
+ as?: E;
969
+ label?: string | react__default.ReactNode;
970
+ } & ComponentPropsWithoutRef<E>;
971
+
972
+ /**
973
+ *
974
+ * - @param props - Label 컴포넌트의 속성
975
+ * - @param id - 글자 크기
976
+ * - @param size - 글자 크기
977
+ * - @param weight - 글자 두께 (regular 또는 bold)
978
+ * - @param children
979
+ * - @param className
980
+ * - @param required - 필수 항목 여부 ( * 표시 ) 기본 값은 false
981
+ * - @param as - 렌더링할 HTML 요소 (기본값: 'label')
982
+ * - @param label - label이 있는 경우 우선 표시됩니다. children보다 우선합니다.
983
+ * - @returns
984
+ */
985
+ declare const Label: <E extends ElementType = "label">({ id, size, weight, children, className, required, as, label, ...props }: LabelProps<E>) => react_jsx_runtime.JSX.Element;
986
+
987
+ type LinkProps<E extends react.ElementType> = {
988
+ size?: 'l' | 'm' | 's';
989
+ weight?: 'regular' | 'bold';
990
+ children: react.ReactNode;
991
+ className?: string;
992
+ title: string;
993
+ useIcon?: boolean;
994
+ } & react.ComponentPropsWithoutRef<E>;
995
+
996
+ /**
997
+ * Link 컴포넌트 😸
998
+ * 링크(anchor) 컴포넌트
999
+ *
1000
+ * @param props - Link 컴포넌트의 props
1001
+ * @param size - 링크 텍스트의 크기 (예: 's', 'm', 'l')
1002
+ * @param weight - 링크 텍스트의 두께 (예: 'regular', 'bold')
1003
+ * @param children - 렌더링할 텍스트 또는 노드
1004
+ * @param className - 추가로 적용할 클래스 이름
1005
+ * @param title - 링크의 title 및 aria-label 속성 값
1006
+ */
1007
+ declare function Link<E extends react.ElementType = 'a'>({ size, weight, children, className, title, ...props }: LinkProps<E>): react_jsx_runtime.JSX.Element;
1008
+
1009
+ type LinkButtonProps<E extends react.ElementType> = {
1010
+ variant?: 'accent' | 'default';
1011
+ size?: 's' | 'm' | 'l';
1012
+ children: react.ReactNode;
1013
+ className?: string;
1014
+ href: string;
1015
+ title: string;
1016
+ useIcon?: boolean;
1017
+ icon?: react.ReactNode;
1018
+ iconColor?: string;
1019
+ iconClassName?: string;
1020
+ } & react.ComponentPropsWithoutRef<E>;
1021
+
1022
+ /**
1023
+ * LinkButton 컴포넌트 😸
1024
+ * 링크
1025
+ *
1026
+ * @param props - LinkButton 컴포넌트의 props
1027
+ * @param variant - 버튼의 스타일 종류 ('default' | 'accent')
1028
+ * @param size - 버튼의 크기 ('small' | 'medium' | 'large')
1029
+ * @param children - 버튼 내부에 렌더링할 내용
1030
+ * @param className - 추가로 적용할 클래스 이름
1031
+ * @param href - 링크의 URL
1032
+ * @param title - 버튼의 title, aria-label 속성
1033
+ * @param useIcon - 아이콘 사용 여부
1034
+ * @param icon - 사용할 커스텀 아이콘
1035
+ * @param iconClassName - 아이콘에 적용할 클래스 이름
1036
+ */
1037
+ declare function LinkButton<E extends react__default.ElementType = 'a'>({ variant, size, children, className, href, title, useIcon, icon, iconColor, iconClassName, ...props }: LinkButtonProps<E>): react_jsx_runtime.JSX.Element;
1038
+
1039
+ declare function LoadingPage({ message }: {
1040
+ message?: string;
1041
+ }): react_jsx_runtime.JSX.Element;
1042
+
1043
+ /**
1044
+ * keyboard event 구분을 위한 type
1045
+ * - modal의 경우 modal container에 focus
1046
+ * - dialog의 경우 primary button에 focus
1047
+ * - custom의 경우 수동으로 동작을 추가해주세요
1048
+ */
1049
+ declare enum MODAL_LIST_TYPE {
1050
+ MODAL = "modal",
1051
+ DIALOG = "dialog",
1052
+ CUSTOM = "custom"
1053
+ }
1054
+ interface ModalListProps {
1055
+ type: MODAL_LIST_TYPE;
1056
+ id?: string;
1057
+ show?: boolean;
1058
+ contents: ReactNode;
1059
+ zIndex?: number;
1060
+ top?: string;
1061
+ onConfirm?: () => void;
1062
+ onKeydown?: (e: KeyboardEvent) => void;
1063
+ }
1064
+ interface ModalProps {
1065
+ type?: MODAL_LIST_TYPE;
1066
+ id?: string;
1067
+ show?: boolean;
1068
+ zIndex?: number;
1069
+ top?: string;
1070
+ onKeydown?: (e: KeyboardEvent) => void;
1071
+ }
1072
+ interface ModalPresenterProps {
1073
+ type: MODAL_LIST_TYPE;
1074
+ id?: string;
1075
+ show?: boolean;
1076
+ zIndex?: number;
1077
+ top?: string;
1078
+ removeInvisibleModal: () => void;
1079
+ }
1080
+ interface DialogProps {
1081
+ id?: string;
1082
+ show?: boolean;
1083
+ onConfirmCb?: () => void;
1084
+ zIndex?: number;
1085
+ }
1086
+ interface DimmedBackdropProps {
1087
+ onClickBackdrop?: () => void;
1088
+ staticBackdrop?: boolean;
1089
+ }
1090
+ interface ModalContainerProps extends HTMLAttributes<HTMLDivElement> {
1091
+ /**
1092
+ * backdrop click, esc keyDown 에 공통된 close func 을 넘겨주고 싶을 때 사용.
1093
+ * 아무것도 넘기지 않으면 modalService.pop 실행됨.
1094
+ */
1095
+ onClose?: () => void;
1096
+ /**
1097
+ * custom backdropClick func
1098
+ */
1099
+ onClickBackdrop?: () => void;
1100
+ /**
1101
+ * custom escKeyDown func
1102
+ */
1103
+ onEscKeyDown?: () => void;
1104
+ backdropType?: BackdropType;
1105
+ staticBackdrop?: boolean;
1106
+ useClose?: boolean;
1107
+ }
1108
+ interface BackdropProps {
1109
+ backdropType: BackdropType;
1110
+ onClickBackdrop?: () => void;
1111
+ staticBackdrop?: boolean;
1112
+ }
1113
+ type BackdropType = 'dimmed' | 'clear';
1114
+ type ModalCustomService = 'push' | 'pop' | 'popAll' | 'popById';
1115
+
1116
+ interface ModalContentProps extends HTMLAttributes<HTMLElement> {
1117
+ contentMaxHeight?: string;
1118
+ }
1119
+
1120
+ declare const DialogModalHeader: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
1121
+
1122
+ interface ModalHeaderProps {
1123
+ title: ReactNode;
1124
+ onClose?: VoidFunction;
1125
+ icon?: IconType;
1126
+ extra?: ReactNode;
1127
+ }
1128
+ interface ModalLargeHeaderProps extends ModalHeaderProps {
1129
+ subTitle?: ReactNode;
1130
+ }
1131
+
1132
+ declare const LargeModalHeader: react.ForwardRefExoticComponent<ModalLargeHeaderProps & react.RefAttributes<HTMLDivElement>>;
1133
+
1134
+ declare const MediumModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
1135
+
1136
+ declare const SmallModalHeader: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
1137
+
1138
+ declare const SmallModal: react.ForwardRefExoticComponent<ModalContainerProps & {
1139
+ children?: react.ReactNode | undefined;
1140
+ } & react.RefAttributes<HTMLDivElement>> & {
1141
+ Header: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
1142
+ Footer: ({ children, className, ...props }: react.PropsWithChildren<react.HTMLAttributes<HTMLDivElement>>) => react_jsx_runtime.JSX.Element;
1143
+ PrimaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1144
+ OutlinedBlueButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1145
+ SecondaryButton: ({ children, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1146
+ DangerousButton: ({ children, className, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1147
+ TeriaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1148
+ Content: ({ children, className, contentMaxHeight, ...props }: react.PropsWithChildren<ModalContentProps>) => react_jsx_runtime.JSX.Element;
1149
+ };
1150
+
1151
+ declare const MediumModal: react.ForwardRefExoticComponent<ModalContainerProps & {
1152
+ children?: react.ReactNode | undefined;
1153
+ } & react.RefAttributes<HTMLDivElement>> & {
1154
+ Header: react.ForwardRefExoticComponent<ModalHeaderProps & react.RefAttributes<HTMLDivElement>>;
1155
+ Footer: ({ children, className, ...props }: react.PropsWithChildren<react.HTMLAttributes<HTMLDivElement>>) => react_jsx_runtime.JSX.Element;
1156
+ PrimaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1157
+ OutlinedBlueButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1158
+ SecondaryButton: ({ children, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1159
+ DangerousButton: ({ children, className, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1160
+ TeriaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1161
+ Content: ({ children, className, contentMaxHeight, ...props }: react.PropsWithChildren<ModalContentProps>) => react_jsx_runtime.JSX.Element;
1162
+ };
1163
+
1164
+ declare const LargeModal: react.ForwardRefExoticComponent<ModalContainerProps & {
1165
+ children?: react.ReactNode | undefined;
1166
+ } & react.RefAttributes<HTMLDivElement>> & {
1167
+ Header: react.ForwardRefExoticComponent<ModalLargeHeaderProps & react.RefAttributes<HTMLDivElement>>;
1168
+ Footer: ({ children, className, ...props }: react.PropsWithChildren<react.HTMLAttributes<HTMLDivElement>>) => react_jsx_runtime.JSX.Element;
1169
+ PrimaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1170
+ OutlinedBlueButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1171
+ SecondaryButton: ({ children, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1172
+ DangerousButton: ({ children, className, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1173
+ TeriaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1174
+ Content: ({ children, className, contentMaxHeight, ...props }: react.PropsWithChildren<ModalContentProps>) => react_jsx_runtime.JSX.Element;
1175
+ };
1176
+
1177
+ declare const DialogModal: react.ForwardRefExoticComponent<ModalContainerProps & {
1178
+ children?: react.ReactNode | undefined;
1179
+ } & react.RefAttributes<HTMLDivElement>> & {
1180
+ Header: ({ children }: react.PropsWithChildren) => react_jsx_runtime.JSX.Element;
1181
+ Footer: ({ children }: react.PropsWithChildren) => react_jsx_runtime.JSX.Element;
1182
+ Content: ({ children }: react.PropsWithChildren) => react_jsx_runtime.JSX.Element;
1183
+ PrimaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1184
+ DangerButton: ({ children, className, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1185
+ OutlinedBlueButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1186
+ SecondaryButton: ({ children, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1187
+ TeriaryButton: ({ children, onClick, ...props }: react.ButtonHTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
1188
+ };
1189
+
1190
+ declare const ModalManager: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
1191
+
1192
+ declare const modalService: {
1193
+ push(contents: ReactNode, props?: ModalProps): string;
1194
+ pop(): void;
1195
+ popById(id: string): void;
1196
+ popAll(): void;
1197
+ };
1198
+
1199
+ declare enum DefaultDialogTypes {
1200
+ BOTH = 0,
1201
+ CONFIRM = 1
1202
+ }
1203
+ declare enum DefaultDialogButtonTypes {
1204
+ PRIMARY = "primary",
1205
+ DANGER = "danger",
1206
+ TERTIARY = "teriary",
1207
+ OUTLINED_BLUE = "outlinedBlue"
1208
+ }
1209
+ interface DefaultDialogProps {
1210
+ title?: ReactNode;
1211
+ id?: string;
1212
+ zIndex?: number;
1213
+ closeButton?: boolean;
1214
+ onCloseCb?: VoidFunction;
1215
+ onConfirmCb?: VoidFunction;
1216
+ cancelLabel?: string;
1217
+ buttonType?: DefaultDialogTypes;
1218
+ confirmButtonType?: DefaultDialogButtonTypes;
1219
+ confirmLabel?: string;
1220
+ width?: string;
1221
+ height?: string;
1222
+ bodyClassName?: string;
1223
+ footerClassName?: string;
1224
+ }
1225
+ declare const dialogService: {
1226
+ defaultDialog(text: ReactNode, props?: DefaultDialogProps): string;
1227
+ push(contents: ReactNode, props?: DialogProps): string;
1228
+ pop(): void;
1229
+ popById(id: string): void;
1230
+ };
1231
+ declare const dialogUtilService: {
1232
+ handleKeydownById(e: KeyboardEvent, dialogId: string, onKeydown?: VoidFunction): void;
1233
+ };
1234
+
1235
+ interface ModalManagerContextProps {
1236
+ modalList: ModalListProps[];
1237
+ }
1238
+ declare const ModalManagerContext: react.Context<ModalManagerContextProps | undefined>;
1239
+ declare const useModalManagerContext: () => ModalManagerContextProps;
1240
+
1241
+ declare const DimmedBackdrop: ({ children, onClickBackdrop, staticBackdrop, }: PropsWithChildren<DimmedBackdropProps>) => react_jsx_runtime.JSX.Element;
1242
+
1243
+ declare const ClearBackdrop: ({ children, staticBackdrop, }: PropsWithChildren<{
1244
+ staticBackdrop?: boolean;
1245
+ }>) => react_jsx_runtime.JSX.Element;
1246
+
1247
+ declare const Backdrop: ({ backdropType, onClickBackdrop, children, staticBackdrop, }: PropsWithChildren<BackdropProps>) => react_jsx_runtime.JSX.Element;
1248
+
1249
+ declare const Modal: ({ type, children, show, id, top, zIndex, removeInvisibleModal, }: PropsWithChildren<ModalPresenterProps>) => react_jsx_runtime.JSX.Element | null;
1250
+
1251
+ declare const EscKeyEventHandler: ({ children, onEscKeyDown, }: PropsWithChildren<{
1252
+ onEscKeyDown: () => void;
1253
+ }>) => react_jsx_runtime.JSX.Element;
1254
+
1255
+ declare function MScrollTab(tabProps: MTabScrollWrapperProps): react_jsx_runtime.JSX.Element;
1256
+
1257
+ interface MTabScrollWrapperProps extends TabsProps {
1258
+ scrollByAmount?: number;
1259
+ autoScroll?: boolean;
1260
+ }
1261
+
1262
+ interface TableRowData extends MRT_RowData {
1263
+ [key: string]: any;
1264
+ }
1265
+
1266
+ declare function MTable<T extends TableRowData>({ data, columns, idKey, title, excludes, customLabel, customContent, onRowClick, customRow, }: MTableProps<T>): react_jsx_runtime.JSX.Element;
1267
+
1268
+ interface MTableProps<T extends TableRowData> {
1269
+ columns: MRT_ColumnDef<T>[];
1270
+ data: T[];
1271
+ noData?: string | ReactElement;
1272
+ onRowClick?: (row: T, e?: MouseEvent<Element>) => void;
1273
+ idKey?: keyof T;
1274
+ title?: (row: T) => ReactElement;
1275
+ excludes?: (keyof T)[];
1276
+ customLabel?: MTableRenderMap<T>;
1277
+ customContent?: MTableRenderMap<T>;
1278
+ customRow?: (row: T) => ReactElement;
1279
+ }
1280
+ type MTableLabelMap<T extends TableRowData> = {
1281
+ [key in keyof T]: string;
1282
+ };
1283
+ type MTableRenderMap<T extends TableRowData> = {
1284
+ [key in keyof T]: (row: T) => ReactElement;
1285
+ };
1286
+ interface MTableItemProps<T extends TableRowData> {
1287
+ data: T;
1288
+ idKey?: keyof T;
1289
+ labelMap: MTableLabelMap<T>;
1290
+ excludes?: (keyof T)[];
1291
+ customLabel?: MTableRenderMap<T>;
1292
+ customContent?: MTableRenderMap<T>;
1293
+ }
1294
+
1295
+ declare function MTableItem<T extends TableRowData>({ data, idKey, labelMap, excludes, customContent, customLabel, }: MTableItemProps<T>): react_jsx_runtime.JSX.Element;
1296
+
1297
+ declare function MTableGuideWrapper({ children }: MTableGuideWrapperProps): react_jsx_runtime.JSX.Element;
1298
+
1299
+ interface MTableGuideWrapperProps {
1300
+ children: ReactNode;
1301
+ }
1302
+
1303
+ interface NotFountPageProps {
1304
+ onClick: () => void;
1305
+ }
1306
+
1307
+ declare function NotFountPage({ onClick }: NotFountPageProps): react_jsx_runtime.JSX.Element;
1308
+
1309
+ type NumberInputProps = Omit<TextInputProps, 'useIcon' | 'icon' | 'iconPosition' | 'type'> & {
1310
+ useComma?: boolean;
1311
+ allowDecimal?: boolean;
1312
+ defaultZero?: boolean;
1313
+ decimalScale?: number;
1314
+ };
1315
+
1316
+ declare function NumberInput({ id, title, titleAttr, titlePosition, gap, description, isValid, error, placeholder, width, height, //'40px' | '48px' | '56px'
1317
+ minHeight, maxHeight, className, titleClassName, inputClassName, value, setValue, onEnterKeyPress, useComma, // 1000 -> 1,000
1318
+ defaultZero, // 빈 값일 때 0으로 표시
1319
+ allowDecimal, // 소수점 허용
1320
+ decimalScale, // 소수점 자리수
1321
+ isRequired, ...props }: NumberInputProps): react_jsx_runtime.JSX.Element;
1322
+
1323
+ interface PaginationData {
1324
+ currentPage: number;
1325
+ onChangePage: (page: number) => void;
1326
+ }
1327
+ interface PaginationProps extends PaginationData {
1328
+ totalPage: number;
1329
+ }
1330
+ interface PaginationItemProps {
1331
+ children: number;
1332
+ }
1333
+
1334
+ declare function Pagination({ currentPage, totalPage, onChangePage }: PaginationProps): react_jsx_runtime.JSX.Element;
1335
+
1336
+ type PhoneInputProps = Omit<TextInputProps, 'useIcon' | 'icon' | 'iconPosition' | 'type'> & {
1337
+ inputWidth?: string | number;
1338
+ inputProps?: Partial<TextInputProps>[];
1339
+ separator?: string;
1340
+ };
1341
+
1342
+ declare function PhoneInput({ id, value, setValue, isRequired, title, titlePosition, gap, description, width, inputWidth, inputProps, height, //'40px' | '48px' | '56px'
1343
+ minHeight, maxHeight, titleClassName, className, ...props }: PhoneInputProps): react_jsx_runtime.JSX.Element;
1344
+
1345
+ declare function splitPhoneNumber(value: string | null | undefined): string[];
1346
+
1347
+ type RadioButtonProps = {
1348
+ id?: string;
1349
+ name: string;
1350
+ value: string | boolean;
1351
+ checked?: boolean;
1352
+ onChange?: (value: string | boolean) => void;
1353
+ label?: string | react__default.ReactNode;
1354
+ disabled?: boolean;
1355
+ size?: 'm' | 'l';
1356
+ tabIndex?: number;
1357
+ onKeyDown?: (event: KeyboardEvent$1<HTMLDivElement>) => void;
1358
+ };
1359
+ type RadioButtonOption = Record<string, string | boolean | react__default.ReactNode>;
1360
+ type RadioButtonGroupProps = {
1361
+ name: string;
1362
+ options: RadioButtonOption[];
1363
+ selectedValue?: string | boolean;
1364
+ onChange: (value: string | boolean) => void;
1365
+ disabled?: boolean;
1366
+ size?: 'm' | 'l';
1367
+ direction?: 'horizontal' | 'vertical';
1368
+ labelKey?: string;
1369
+ valueKey?: string;
1370
+ };
1371
+
1372
+ declare const RadioButton: ({ id, name, value, checked, onChange, label, disabled, size, tabIndex, onKeyDown, }: RadioButtonProps) => react_jsx_runtime.JSX.Element;
1373
+
1374
+ declare const RadioButtonGroup: ({ name, options, selectedValue, onChange, disabled, size, direction, labelKey, valueKey, }: RadioButtonGroupProps) => react_jsx_runtime.JSX.Element;
1375
+
1376
+ type SelectSize = 'l' | 'm' | 's';
1377
+ type SelectVariant = 'box' | 'text';
1378
+ type SelectDirection = 'vertical' | 'horizontal';
1379
+ interface Option {
1380
+ [key: string]: string;
1381
+ }
1382
+ interface CommonSelectProps {
1383
+ id?: string;
1384
+ label?: string;
1385
+ options: Option[];
1386
+ placeholder?: string;
1387
+ size?: SelectSize;
1388
+ variant?: SelectVariant;
1389
+ disabled?: boolean;
1390
+ width?: string | number;
1391
+ className?: string;
1392
+ state?: 'default' | 'focused' | 'completed' | 'error' | 'disabled' | 'view';
1393
+ valueKey?: string;
1394
+ labelKey?: string;
1395
+ labelFontSize?: 'xs' | 's' | 'm' | 'l';
1396
+ labelFontWeight?: 'regular' | 'bold';
1397
+ direction?: SelectDirection;
1398
+ selectWrapWidth?: string | number;
1399
+ maxVisibleItems?: number;
1400
+ scrollThreshold?: number;
1401
+ multiDisplaySeparator?: string;
1402
+ title?: string;
1403
+ /**
1404
+ * multi 선택 표시 전략:
1405
+ * - ellipsis: 전체 라벨 join 후 CSS ellipsis 로 잘림
1406
+ * - count: 첫 번째 라벨 + " 외 N건" 형식
1407
+ * - tags: Tag 컴포넌트로 표시 (최대 maxTags개 + 추가 개수)
1408
+ */
1409
+ multiDisplayStrategy?: 'ellipsis' | 'count' | 'tags';
1410
+ /**
1411
+ * tags 전략일 때 표시할 최대 태그 개수
1412
+ * 기본: 3
1413
+ */
1414
+ maxTags?: number;
1415
+ /**
1416
+ * count 전략일 때 포맷. {first} / {count} 플레이스홀더 사용
1417
+ * 기본: "{first} 외 {count}건"
1418
+ */
1419
+ multiCountPattern?: string;
1420
+ type?: 'single' | 'multi';
1421
+ isValid?: boolean;
1422
+ error?: string;
1423
+ info?: string;
1424
+ }
1425
+ interface SingleValueProps {
1426
+ type?: 'single';
1427
+ value: string;
1428
+ onChange: (value: string) => void;
1429
+ }
1430
+ interface MultiValueProps {
1431
+ type: 'multi';
1432
+ value: string[];
1433
+ onChange: (value: string[]) => void;
1434
+ }
1435
+ type SelectProps = CommonSelectProps & (SingleValueProps | MultiValueProps);
1436
+ interface SelectTriggerProps {
1437
+ onClick: () => void;
1438
+ children: ReactNode;
1439
+ isOpen: boolean;
1440
+ onKeyDown: (e: KeyboardEvent$1) => void;
1441
+ size?: SelectSize;
1442
+ }
1443
+ interface SelectValueProps {
1444
+ placeholder: string;
1445
+ selectedValue: string | null;
1446
+ size?: SelectSize;
1447
+ }
1448
+ interface SelectContentProps {
1449
+ isOpen: boolean;
1450
+ children: ReactNode;
1451
+ }
1452
+ interface SelectGroupProps {
1453
+ children: ReactNode;
1454
+ }
1455
+ interface SelectLabelProps {
1456
+ children: ReactNode;
1457
+ size?: SelectSize;
1458
+ }
1459
+ interface SelectItemProps {
1460
+ size?: SelectSize;
1461
+ value: string;
1462
+ onClick: (value: string) => void;
1463
+ isSelected: boolean;
1464
+ isHovered: boolean;
1465
+ isFocused: boolean;
1466
+ children: ReactNode;
1467
+ onKeyDown: (e: KeyboardEvent$1) => void;
1468
+ onMouseEnter: () => void;
1469
+ onMouseLeave: () => void;
1470
+ }
1471
+
1472
+ declare const Select: ({ id, label, options, value, onChange, placeholder, size, variant, disabled, width, className, state, valueKey, labelKey, labelFontSize, labelFontWeight, direction, maxVisibleItems, multiDisplaySeparator, multiDisplayStrategy, multiCountPattern, maxTags, type, isValid, error, info, title, }: SelectProps) => react_jsx_runtime.JSX.Element;
1473
+
1474
+ type SpinnerProps = {
1475
+ size?: 's' | 'm' | 'l';
1476
+ className?: string;
1477
+ };
1478
+
1479
+ declare const Spinner: ({ size, className }: SpinnerProps) => react_jsx_runtime.JSX.Element;
1480
+
1481
+ type StepStatus = 'completion' | 'ongoing' | 'before';
1482
+ interface Step {
1483
+ description: ReactNode;
1484
+ }
1485
+ interface StepIndicatorProps {
1486
+ steps: Step[];
1487
+ currentStepIndex: number;
1488
+ className?: string;
1489
+ align?: 'left' | 'center';
1490
+ variant?: 'line' | 'box';
1491
+ onClickStep?: (index: number) => void;
1492
+ focusable?: boolean;
1493
+ }
1494
+
1495
+ declare const StepIndicator: FC<StepIndicatorProps>;
1496
+
1497
+ type SwitchProps = {
1498
+ id?: string;
1499
+ status: boolean;
1500
+ onChange: (checked: boolean) => void;
1501
+ size?: 'm' | 'l';
1502
+ label?: react__default.ReactNode;
1503
+ labelPosition?: 'left' | 'right';
1504
+ disabled?: boolean;
1505
+ useIcon?: boolean;
1506
+ checkedIcon?: react__default.ReactNode;
1507
+ uncheckedIcon?: react__default.ReactNode;
1508
+ className?: string;
1509
+ labelClassName?: string;
1510
+ inputClassName?: string;
1511
+ barWidth?: number;
1512
+ barHeight?: number;
1513
+ thumbSize?: number;
1514
+ labelSize?: 's' | 'm' | 'l';
1515
+ labelWeight?: 'regular' | 'bold';
1516
+ isLabelClickable?: boolean;
1517
+ };
1518
+ type SwitchLabelProps = {
1519
+ label: react__default.ReactNode;
1520
+ position: 'left' | 'right';
1521
+ size?: 's' | 'm' | 'l';
1522
+ weight?: 'regular' | 'bold';
1523
+ className?: string;
1524
+ isClickable?: boolean;
1525
+ onClick?: () => void;
1526
+ disabled?: boolean;
1527
+ htmlFor?: string;
1528
+ };
1529
+ type SwitchTrackProps = {
1530
+ id: string;
1531
+ label?: string;
1532
+ status: boolean;
1533
+ disabled: boolean;
1534
+ onChange: (checked: boolean) => void;
1535
+ size: 'm' | 'l';
1536
+ useIcon: boolean;
1537
+ checkedIcon?: react__default.ReactNode;
1538
+ uncheckedIcon?: react__default.ReactNode;
1539
+ barWidth?: number;
1540
+ barHeight?: number;
1541
+ thumbSize?: number;
1542
+ inputClassName?: string;
1543
+ };
1544
+
1545
+ /**
1546
+ * Switch 컴포넌트 😸
1547
+ *
1548
+ * @param status 스위치 on/off 상태 (default: false)
1549
+ * @param onChange 상태 변경 시 호출되는 콜백 함수
1550
+ * @param size 스위치 크기 ('md' | 'lg', default: 'md')
1551
+ * @param label 스위치 옆에 표시할 라벨 텍스트
1552
+ * @param labelPosition 라벨 위치 ('left' | 'right', default: 'right')
1553
+ * @param disabled 비활성화 여부 (default: false)
1554
+ * @param showIcon 스위치 thumb에 아이콘 표시 여부 (default: false)
1555
+ * @param className 최상위 div에 적용할 커스텀 클래스
1556
+ * @param barWidth 스위치 바 너비 (px 단위, size에 따라 기본값 다름)
1557
+ * @param barHeight 스위치 바 높이 (px 단위, size에 따라 기본값 다름)
1558
+ * @param thumbSize 스위치 동그라미 크기 (px 단위, size에 따라 기본값 다름)
1559
+ * @param labelClassName 라벨에 적용할 커스텀 클래스
1560
+ * @param labelSize 라벨 폰트 사이즈 (default: size에 따라 's' 또는 'm')
1561
+ * @param labelWeight 라벨 폰트 두께
1562
+ * @param isClickableLabel 라벨 클릭 시 스위치 토글 여부 (default: true)
1563
+ * @param inputClassName input 요소에 적용할 커스텀 클래스 (접근성 필요할때 사용!)
1564
+ *
1565
+ */
1566
+ declare function Switch({ id, status, onChange, size, label, labelPosition, disabled, useIcon, checkedIcon, uncheckedIcon, className, barWidth, barHeight, thumbSize, labelClassName, labelSize, labelWeight, inputClassName, isLabelClickable, }: SwitchProps): react_jsx_runtime.JSX.Element;
1567
+
1568
+ interface TabProps {
1569
+ id: string;
1570
+ label: string;
1571
+ content: ReactNode | (() => ReactNode);
1572
+ disabled?: boolean;
1573
+ }
1574
+ interface TabsProps {
1575
+ tabs: TabProps[];
1576
+ variant?: 'underline' | 'plain' | 'box' | 'fill';
1577
+ selectedIndex?: number;
1578
+ onChange?: (index: number) => void;
1579
+ width?: string;
1580
+ gap?: string | number;
1581
+ tabHeight?: string;
1582
+ sideButton?: ReactNode;
1583
+ overflowX?: CSSProperties['overflowX'];
1584
+ overflowY?: CSSProperties['overflowY'];
1585
+ tabListPosition?: string;
1586
+ }
1587
+ type InternalTabProps = Omit<TabProps, 'content'> & {
1588
+ isSelected: boolean;
1589
+ onClick: () => void;
1590
+ onKeyDown?: (e: react__default.KeyboardEvent) => void;
1591
+ id: string;
1592
+ panelId: string;
1593
+ variant?: 'underline' | 'plain' | 'box' | 'fill';
1594
+ tabIndex?: number;
1595
+ };
1596
+
1597
+ declare const Tab: ({ label, isSelected, onClick, onKeyDown, id, panelId, disabled, tabIndex, }: InternalTabProps) => react_jsx_runtime.JSX.Element;
1598
+
1599
+ interface TabPanelProps {
1600
+ children: ReactNode;
1601
+ id: string;
1602
+ tabId: string;
1603
+ isSelected: boolean;
1604
+ }
1605
+ declare function TabPanel({ children, id, tabId, isSelected }: TabPanelProps): react_jsx_runtime.JSX.Element;
1606
+
1607
+ declare const Tabs: ({ tabs, variant, selectedIndex, onChange, width, tabHeight, gap, sideButton, overflowX, overflowY, tabListPosition, }: TabsProps) => react_jsx_runtime.JSX.Element;
1608
+
1609
+ interface TagProps {
1610
+ label: string;
1611
+ size?: 's' | 'm' | 'l';
1612
+ variant?: 'text' | 'removable';
1613
+ disabled?: boolean;
1614
+ onDelete?: (label: string) => void;
1615
+ className?: string;
1616
+ }
1617
+
1618
+ /** biome-ignore-all lint/a11y/noStaticElementInteractions: <explanation> */
1619
+ /** biome-ignore-all lint/a11y/useAriaPropsSupportedByRole: <explanation> */
1620
+
1621
+ declare const Tag: react__default.FC<TagProps>;
1622
+
1623
+ declare const TextArea: react__default.ForwardRefExoticComponent<{
1624
+ id: string;
1625
+ title?: string;
1626
+ titlePosition?: "vertical" | "horizontal";
1627
+ gap?: string | number;
1628
+ description?: string;
1629
+ placeholder?: string;
1630
+ size?: "s" | "m" | "l";
1631
+ useCount?: boolean;
1632
+ maxLength?: number;
1633
+ isValid?: boolean;
1634
+ isRequired?: boolean;
1635
+ error?: string;
1636
+ info?: string;
1637
+ value: string;
1638
+ setValue: (value: string) => void;
1639
+ disabled?: boolean;
1640
+ className?: string;
1641
+ titleClassName?: string;
1642
+ inputClassName?: string;
1643
+ width?: string | number;
1644
+ height?: string | number;
1645
+ minHeight?: string | number;
1646
+ maxHeight?: string | number;
1647
+ } & react__default.TextareaHTMLAttributes<HTMLTextAreaElement> & react__default.RefAttributes<HTMLTextAreaElement>>;
1648
+
1649
+ /**
1650
+ * TextArea 컴포넌트 😸
1651
+ * 텍스트 에리어 입력 필드
1652
+ *
1653
+ * @param id - textarea의 고유 id
1654
+ * @param title - 라벨 텍스트
1655
+ * @param description - 설명 텍스트
1656
+ * @param placeholder - placeholder 텍스트
1657
+ * @param size - textarea 크기 ('s' | 'm' | 'l')
1658
+ * @param useCount - 글자 수 카운트 표시 여부
1659
+ * @param maxLength - 최대 입력 글자 수
1660
+ * @param isValid - 유효성 검사 결과
1661
+ * @param error - 에러 메시지
1662
+ * @param info - 안내 메시지
1663
+ * @param value - textarea 값
1664
+ * @param setValue - 값 변경 함수
1665
+ * @param disabled - 비활성화 여부
1666
+ * @param className - wrapper에 추가할 클래스
1667
+ * @param titleClassName - 라벨에 추가할 클래스
1668
+ * @param inputClassName - textarea에 추가할 클래스
1669
+ * @param width - textarea 전체 너비
1670
+ * @param height - textarea 높이
1671
+ * @param minHeight - textarea 최소 높이
1672
+ * @param maxHeight - textarea 최대 높이
1673
+ */
1674
+ type TextAreaProps = {
1675
+ id: string;
1676
+ title?: string;
1677
+ titlePosition?: 'vertical' | 'horizontal';
1678
+ gap?: string | number;
1679
+ description?: string;
1680
+ placeholder?: string;
1681
+ size?: 's' | 'm' | 'l';
1682
+ useCount?: boolean;
1683
+ maxLength?: number;
1684
+ isValid?: boolean;
1685
+ isRequired?: boolean;
1686
+ error?: string;
1687
+ info?: string;
1688
+ value: string;
1689
+ setValue: (value: string) => void;
1690
+ disabled?: boolean;
1691
+ className?: string;
1692
+ titleClassName?: string;
1693
+ inputClassName?: string;
1694
+ width?: string | number;
1695
+ height?: string | number;
1696
+ minHeight?: string | number;
1697
+ maxHeight?: string | number;
1698
+ } & react.TextareaHTMLAttributes<HTMLTextAreaElement>;
1699
+
1700
+ interface StatusLabelProps {
1701
+ value?: string;
1702
+ disabled: boolean;
1703
+ isValid?: boolean;
1704
+ error?: string;
1705
+ info?: string;
1706
+ errorId: string;
1707
+ infoId: string;
1708
+ useCount?: boolean;
1709
+ maxLength?: number;
1710
+ charCountColor?: string;
1711
+ hasContent?: boolean;
1712
+ }
1713
+ declare function StatusLabel({ value, disabled, isValid, error, info, errorId, infoId, useCount, maxLength, charCountColor, hasContent, }: StatusLabelProps): react_jsx_runtime.JSX.Element;
1714
+
1715
+ declare const TextInput: react.ForwardRefExoticComponent<{
1716
+ id: string;
1717
+ type?: "text" | "password";
1718
+ title?: string;
1719
+ titlePosition?: "vertical" | "horizontal";
1720
+ gap?: string | number;
1721
+ description?: string;
1722
+ isValid?: boolean;
1723
+ isRequired?: boolean;
1724
+ error?: string;
1725
+ info?: string;
1726
+ placeholder?: string;
1727
+ className?: string;
1728
+ titleClassName?: string;
1729
+ inputClassName?: string;
1730
+ width?: string | number;
1731
+ height?: "40px" | "48px" | "56px" | string | number;
1732
+ minHeight?: string | number;
1733
+ maxHeight?: string | number;
1734
+ style?: react.CSSProperties;
1735
+ maxLength?: number;
1736
+ value?: string;
1737
+ useIcon?: boolean;
1738
+ icon?: react.ReactNode;
1739
+ useDelete?: boolean;
1740
+ iconPosition?: "left" | "right";
1741
+ clickableIcon?: boolean;
1742
+ deleteAction?: () => void;
1743
+ onEnterKeyPress?: () => void;
1744
+ setValue?: (value: string) => void;
1745
+ titleAttr?: string;
1746
+ } & react.InputHTMLAttributes<HTMLInputElement> & react.RefAttributes<HTMLInputElement>>;
1747
+
1748
+ /**
1749
+ * TextInput 컴포넌트 😸
1750
+ * 텍스트 입력 필드
1751
+ *
1752
+ * @param id - input의 고유 id
1753
+ * @param type - input 타입 (text, password 등)
1754
+ * @param title - 라벨 텍스트
1755
+ * @param titlePosition - 라벨 위치 ('vertical' | 'horizontal')
1756
+ * @param gap - 라벨과 input 사이의 간격
1757
+ * @param description - 설명 텍스트
1758
+ * @param isValid - 유효성 검사 결과
1759
+ * @param isRequired - 필수 입력 여부
1760
+ * @param error - 에러 메시지
1761
+ * @param placeholder - placeholder 텍스트
1762
+ * @param width - input 전체 너비
1763
+ * @param height - input 높이
1764
+ * @param minHeight - input 최소 높이
1765
+ * @param maxHeight - input 최대 높이
1766
+ * @param className - wrapper에 추가할 클래스
1767
+ * @param titleClassName - 라벨에 추가할 클래스
1768
+ * @param inputClassName - input에 추가할 클래스
1769
+ * @param value - input 값
1770
+ * @param setValue - 값 변경 함수
1771
+ * @param onEnterKeyPress - 엔터키 입력 시 콜백
1772
+ * @param useIcon - 아이콘 사용 여부
1773
+ * @param icon - 커스텀 아이콘 컴포넌트
1774
+ * @param iconPosition - 아이콘 위치 ('left' | 'right')
1775
+ * @param useDelete - 삭제(X) 버튼 사용 여부
1776
+ * @param deleteAction - 삭제 버튼 클릭 시 콜백
1777
+ * @param disabled - 비활성화 여부
1778
+ * @param ...props - 기타 input props
1779
+ */
1780
+ type TextInputProps = {
1781
+ id: string;
1782
+ type?: 'text' | 'password';
1783
+ title?: string;
1784
+ titlePosition?: 'vertical' | 'horizontal';
1785
+ gap?: string | number;
1786
+ description?: string;
1787
+ isValid?: boolean;
1788
+ isRequired?: boolean;
1789
+ error?: string;
1790
+ info?: string;
1791
+ placeholder?: string;
1792
+ className?: string;
1793
+ titleClassName?: string;
1794
+ inputClassName?: string;
1795
+ width?: string | number;
1796
+ height?: '40px' | '48px' | '56px' | string | number;
1797
+ minHeight?: string | number;
1798
+ maxHeight?: string | number;
1799
+ style?: react.CSSProperties;
1800
+ maxLength?: number;
1801
+ value?: string;
1802
+ useIcon?: boolean;
1803
+ icon?: react.ReactNode;
1804
+ useDelete?: boolean;
1805
+ iconPosition?: 'left' | 'right';
1806
+ clickableIcon?: boolean;
1807
+ deleteAction?: () => void;
1808
+ onEnterKeyPress?: () => void;
1809
+ setValue?: (value: string) => void;
1810
+ titleAttr?: string;
1811
+ } & react.InputHTMLAttributes<HTMLInputElement>;
1812
+
1813
+ interface TimeSelectorProps {
1814
+ value?: string;
1815
+ onChange: (value: string) => void;
1816
+ height?: '40px' | '48px' | '56px' | string | number;
1817
+ placeholder?: string;
1818
+ width?: string;
1819
+ useAP?: boolean;
1820
+ }
1821
+ interface TimeSelectorPopupProps {
1822
+ visible: boolean;
1823
+ setVisible: (visible: boolean) => void;
1824
+ time?: string;
1825
+ onUpdateTime: (h: string, m: string) => void;
1826
+ }
1827
+
1828
+ declare function TimeSelector({ value, onChange, height, useAP, placeholder, width, }: TimeSelectorProps): react_jsx_runtime.JSX.Element;
1829
+
1830
+ type TitleProps<E extends react__default.ElementType> = {
1831
+ size?: 1 | 2 | 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
1832
+ children: react__default.ReactNode;
1833
+ className?: string;
1834
+ weight?: 'bold' | 'semi-bold' | 'medium' | 'regular';
1835
+ } & react__default.ComponentPropsWithoutRef<E>;
1836
+
1837
+ /**
1838
+ * Title 컴포넌트 😸
1839
+ * (기본값: 'h3')
1840
+ * @param props - Title 컴포넌트의 props
1841
+ * @param size - 제목의 크기 ('1' | '2' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl')
1842
+ * @param color - 제목의 색상
1843
+ * @param children - 제목 내부에 렌더링할 내용
1844
+ * @param className - 추가로 적용할 클래스 이름
1845
+ * @param weight - 폰트 굵기 ('bold' | 'semi-bold' | 'medium' | 'regular')
1846
+ */
1847
+ declare function Title<E extends react__default.ElementType = 'h3'>({ size, color, children, className, weight, ...props }: TitleProps<E>): react_jsx_runtime.JSX.Element;
1848
+
1849
+ declare enum TOASTBAR_TYPE {
1850
+ DANGER = "danger",
1851
+ SUCCEED = "succeed",
1852
+ WARNING = "warning",
1853
+ INFO = "info"
1854
+ }
1855
+ declare const toastbarService: {
1856
+ dangerMsg(text: ReactNode, title?: string, id?: string): string;
1857
+ succeedMsg(text: ReactNode, title?: string, id?: string): string;
1858
+ warningMsg(text: ReactNode, title?: string, id?: string): string;
1859
+ infoMsg(text: ReactNode, title?: string, id?: string): string;
1860
+ close(id: string): void;
1861
+ closeAll(): void;
1862
+ };
1863
+
1864
+ interface ToastBarProps {
1865
+ text: ReactNode;
1866
+ title?: string;
1867
+ id: string;
1868
+ icon?: ReactNode;
1869
+ closeDelay?: number;
1870
+ autoCloseTimestamp?: number;
1871
+ style?: CSSProperties;
1872
+ type: 'danger' | 'succeed' | 'warning' | 'info';
1873
+ removeInvisibleToastBar?: () => void;
1874
+ }
1875
+ declare type ToastBarEventListenerType = '[toastbar] show dangerMsg' | '[toastbar] show succeedMsg' | '[toastbar] show warningMsg' | '[toastbar] show infoMsg' | '[toastbar] close Toast' | '[loadingToastbar] show loading toast' | '[loadingToastbar] close all loading toast' | '[toastbar] close all toast';
1876
+
1877
+ declare const ToastBar: ({ text, icon, closeDelay, autoCloseTimestamp, style, id, title, type, }: ToastBarProps) => react_jsx_runtime.JSX.Element | null;
1878
+
1879
+ declare const ToastBarManager: () => react_jsx_runtime.JSX.Element;
1880
+
1881
+ interface UseHandleToastBarListProps {
1882
+ toastbars: ToastBarProps[];
1883
+ setToastbars: Dispatch<SetStateAction<ToastBarProps[]>>;
1884
+ }
1885
+ declare const useHandleToastBarList: ({ toastbars, setToastbars }: UseHandleToastBarListProps) => {
1886
+ closeByIdToastBar: (id: string) => void;
1887
+ closeAllToastBar: () => void;
1888
+ };
1889
+
1890
+ interface UseToastBarCustomEventListenerProps {
1891
+ toastbars: ToastBarProps[];
1892
+ setToastbars: Dispatch<SetStateAction<ToastBarProps[]>>;
1893
+ }
1894
+ declare const useToastBarCustomEventListener: ({ toastbars, setToastbars, }: UseToastBarCustomEventListenerProps) => void;
1895
+
1896
+ interface DrawerProps {
1897
+ position?: 'top' | 'bottom' | 'left' | 'right';
1898
+ open: boolean;
1899
+ setOpen: (open: boolean) => void;
1900
+ children?: ReactNode;
1901
+ parentId?: string;
1902
+ title?: ReactNode;
1903
+ className?: string;
1904
+ }
1905
+
1906
+ declare function Drawer({ open, setOpen, position, parentId, children, title, className, }: DrawerProps): react_jsx_runtime.JSX.Element | null;
1907
+
1908
+ declare enum DateTimeFormat {
1909
+ YearMonthDays = "yyyy-MM-dd",
1910
+ YearMonthDays2 = "yyyy. MM. dd",
1911
+ YearMonthDaysDot = "yyyy.MM.dd",
1912
+ YearMonthDaysKo = "yyyy\uB144 MM\uC6D4 dd\uC77C",
1913
+ YearMonthDayWithNoSlash = "yyyyMMdd",
1914
+ Full = "yyyy-MM-dd HH:mm:ss",
1915
+ FullWithOutSec = "yyyy-MM-dd HH:mm",
1916
+ FullWithAMPM = "yyyy-MM-dd a hh:mm",
1917
+ Year = "yyyy",
1918
+ MonthDays = "MM.dd",
1919
+ MonthDays2 = "MM-dd",
1920
+ Days = "dd",
1921
+ Time = "HH:mm",
1922
+ TimeWithAMPM = "hh:mm",
1923
+ TimeSec = "HH:mm:ss",
1924
+ YearMonth = "yyyy. MM",
1925
+ YearMonth2 = "yyyy-MM"
1926
+ }
1927
+ /**
1928
+ * Date 객체를 ZonedDateTime 으로 변환한다.
1929
+ * @param date Date 객체
1930
+ * @returns ZonedDateTime
1931
+ */
1932
+ declare const convertDateToZonedDateTime: (date: Date) => ZonedDateTime;
1933
+ /**
1934
+ * ZonedDateTime => 한국 시간으로 변경
1935
+ */
1936
+ declare const parseZoneDateTimeToLocalFullTime: (date: string, locale?: string) => string;
1937
+ /**
1938
+ * ZoneDateTime Parse With System default
1939
+ * @param date string 또는 Date, string 은 날짜 형식이 포함되어야 한다.
1940
+ */
1941
+ declare const parseZoneDateTime: (date?: string | Date) => ZonedDateTime;
1942
+ /**
1943
+ * 입력한 시간을 정해진 포맷과 함께 반환한다. (기본값은 현재시간)
1944
+ * @param date
1945
+ * @param format DateTimeFormat enum type 에서 선택 또는 string 으로 직접 작성. 기본값은 yyyy-MM-dd
1946
+ * @example dateNowWithFormat() // 2021-03-01
1947
+ * dateNowWithFormat(DateTimeFormat.full) // 2021-03-01 09:00:00
1948
+ */
1949
+ declare const dateWithFormat: (date?: string | Date, format?: DateTimeFormat | string) => string;
1950
+ declare const dateWithFormatDot: (date?: string | Date, format?: DateTimeFormat | string) => string;
1951
+ /**
1952
+ *
1953
+ * @param date
1954
+ * @param format
1955
+ * @returns hh:mm
1956
+ */
1957
+ declare const timeWithFormat: (date?: string | Date) => string;
1958
+ /**
1959
+ * 기준시간과 대상시간을 입력 받아 해당 날짜와의 차이를 구한다.
1960
+ * @param standard 기준이 될 시간
1961
+ * @param target 대상이 될 시간
1962
+ * @param unit 값을 반환 할 기준 (일, 월, 시간..) 기본값은 DAYS
1963
+ * @example daysBetweenTwoDate('2021-02-01', '2021-01-31') // 1
1964
+ * daysBetweenTwoDate('2021-01-30', '2021-03-15', ChronoUnit.MONTHS) // -1
1965
+ */
1966
+ declare const daysBetweenTwoDate: (standard: string | Date, target: string | Date, unit?: ChronoUnit) => number;
1967
+ /**
1968
+ * 대상 날짜 월 의 시작과 끝을 ZonedDateTime 형식으로 반환한다.
1969
+ * @param date
1970
+ *
1971
+ */
1972
+ declare const getFirstDayAndLastDayOfMonth: (date: string) => {
1973
+ firstDay: ZonedDateTime;
1974
+ lastDay: ZonedDateTime;
1975
+ };
1976
+ /**
1977
+ * standard 날짜의 월이 target 의 월과 같은지 확인
1978
+ * @param standard 기준 날짜
1979
+ * @param target 대상 날짜
1980
+ * @returns boolean
1981
+ */
1982
+ declare const isBetweenUntilMonth: (standard: string | Date, target: string | Date) => boolean;
1983
+ /**
1984
+ * date 값이 속한 주의 시작일, 끝일을 반환
1985
+ * @param date 기준 날짜
1986
+ * @param startDayOfWeek 주의 시작 요일 (기본값: 일요일)
1987
+ */
1988
+ declare const getFirstAndLastDayOfWeek: (date: ZonedDateTime, startDayOfWeek?: DayOfWeek) => {
1989
+ firstDate: ZonedDateTime;
1990
+ lastDate: ZonedDateTime;
1991
+ };
1992
+ declare const regNoToDatePickerFormat: (regNo: string) => string;
1993
+ declare const regNoToBirthDateWithFormat: (regNo: string, format?: DateTimeFormat | string) => string;
1994
+ declare const birthDateFormat: (birthDate: string) => string;
1995
+ declare const parseStringToLocalDate: (date?: string, format?: DateTimeFormat | string) => LocalDate;
1996
+ declare const numberToHHMMSS: (secs: number) => string;
1997
+ /**
1998
+ * Tablet Safari 대응 임시 util
1999
+ */
2000
+ declare const parseZoneDateTimeTablet: (date?: string | Date) => ZonedDateTime;
2001
+ declare const daysBetweenTwoDateTablet: (standard: string | Date, target: string | Date, unit?: ChronoUnit) => number;
2002
+ declare const dateWithFormatTablet: (date?: string | Date, format?: DateTimeFormat | string) => string;
2003
+ declare const dateWithFormatWithoutConvert: (date: string, format: string) => string;
2004
+ declare const parseStringToLocalDateTime: (date: string, format: DateTimeFormat | string) => LocalDateTime;
2005
+ declare const parseStringToZonedDateTime: (date: string, format: DateTimeFormat | string) => ZonedDateTime;
2006
+ /** 타임존이 systemDefault로 세팅된 ZonedDateTime parser */
2007
+ declare const parseZonedDateTime: (zonedDateTimeString: string) => ZonedDateTime;
2008
+ /** 타임존이 systemDefault로 세팅된 현재 시간의 ZonedDateTime */
2009
+ declare const getZonedDateTimeNow: () => ZonedDateTime;
2010
+ /**
2011
+ * 1달 후 > return 28, 29, 30, 31 | 1년후 > return 364, 365 2달, 2년, 등등 일수 계산하여 리턴
2012
+ * @param day number // 1개월 후, 2개월 후, 1년 뒤, 2년 뒤 처럼 되었을 경우 앞 숫자 1,2,3....
2013
+ * @param period string // month, year
2014
+ */
2015
+ declare const getCalculateTheNumberOfDays: (day: number, period: string) => number;
2016
+
2017
+ interface UseAnimationToggleProps {
2018
+ transitionDuration: number;
2019
+ onShow?: VoidFunction;
2020
+ onHide?: VoidFunction;
2021
+ openDelay?: number;
2022
+ closeDelay?: number;
2023
+ }
2024
+ declare const useAnimationToggle: ({ transitionDuration, onShow: _onShow, onHide: _onHide, openDelay, closeDelay, }: UseAnimationToggleProps) => {
2025
+ mounted: boolean;
2026
+ trigger: number;
2027
+ onShow: () => void;
2028
+ onHide: () => void;
2029
+ };
2030
+
2031
+ declare const useBlockDocumentScroll: (trigger: boolean) => void;
2032
+
2033
+ declare const customEventService: {
2034
+ dispatch: <T extends string, V = void>(event: T, body?: CustomEventInit<V>) => void;
2035
+ subscribe: <T extends string>(event: T, listener: EventListener) => void;
2036
+ unSubscribe: <T extends string>(event: T, listener: EventListener) => void;
2037
+ };
2038
+ interface UseCustomEventListenerProps<T extends string, P = void> {
2039
+ eventType: T;
2040
+ handler: (e: P) => void;
2041
+ depths?: unknown[];
2042
+ }
2043
+ declare const useCustomEventListener: <T extends string, P = void>({ eventType, handler, depths, }: UseCustomEventListenerProps<T, P>) => void;
2044
+
2045
+ interface UseDelayToggle {
2046
+ onShow: VoidFunction;
2047
+ onHide: VoidFunction;
2048
+ transitionDuration?: number;
2049
+ openDelay?: number;
2050
+ closeDelay?: number;
2051
+ }
2052
+ declare const useDelayToggle: ({ transitionDuration, openDelay, closeDelay, onShow, onHide, }: UseDelayToggle) => {
2053
+ delayedShow: () => void;
2054
+ delayedHide: () => void;
2055
+ };
2056
+
2057
+ interface UseFocusInContentProps {
2058
+ id?: string;
2059
+ }
2060
+ /**
2061
+ * 접근성 측면에서의 포커스 관리를 위한 Hook
2062
+ * id에 해당하는 content 내에서만 포커스 움직임
2063
+ *
2064
+ * - content 그 자체에 focus
2065
+ * - content내에서 focus 유지
2066
+ * 해당 기능을 위해 content내에 tabIndex 값 할당X
2067
+ * - content가 unmount 되었을때 마지막으로 focus된 el로 다시 focus
2068
+ */
2069
+ declare const useFocusInContent: ({ id }: UseFocusInContentProps) => void;
2070
+
2071
+ /** modal 내부가 아닌 backdrop을 클릭해야만 모달이 닫히도록 함 (고객 요구사항) */
2072
+ declare const useHandleClickBackdrop: (onClickBackdrop: () => void) => {
2073
+ backdropRef: react.RefObject<HTMLDivElement | null>;
2074
+ handleMouseDown: (e: MouseEvent) => void;
2075
+ handleMouseUp: () => void;
2076
+ };
2077
+
2078
+ export { Accordion, type AccordionItemProps, type AccordionProps, Alert, type AlertProps, type AlertVariant, Backdrop, type BackdropProps, type BackdropType, Badge, type BadgeProps, type BaseDatePickerProps, Body, type BodyProps, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonColor$1 as ButtonColor, type ButtonProps, Calendar, type CalendarDay, type CalendarProps, type CalendarWeek, type CheckBoxOption, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxOption, type CheckboxProps, type CheckboxStatus, type ChevronIconProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, ClearBackdrop, type CommonSelectProps, DakCheckBox, DakCheckBoxGroup, type DakCheckBoxGroupProps, type DakCheckBoxProps, type DakFileItem, DakFileUpload, type DakFileUploadProps, DatePicker, type DatePickerProps, DateTimeFormat, type DayInfo, DefaultDialogButtonTypes, type DefaultDialogProps, DefaultDialogTypes, Detail, type DetailProps, DialogModal, DialogModalHeader, type DialogProps, DimmedBackdrop, type DimmedBackdropProps, Display, type DisplayProps, Drawer, type DrawerProps, ErrorPage, type ErrorPageProps, EscKeyEventHandler, FileButtonUpload, type FileButtonUploadProps, FileItem, type FileObject, FileUpload, type FileUploadComponentProps, type FileValidationResult, Heading, type HeadingProps, Icon, type IconName, type IconProps, type IconType, type InternalAccordionItemProps, type InternalTabProps, Label, type LabelProps, type LabelSize, type LabelWeight, LargeModal, LargeModalHeader, Link, LinkButton, type LinkButtonProps, type LinkProps, LoadingPage, MODAL_LIST_TYPE, MScrollTab, type MTabScrollWrapperProps, MTable, MTableGuideWrapper, type MTableGuideWrapperProps, MTableItem, type MTableItemProps, type MTableLabelMap, type MTableProps, type MTableRenderMap, MediumModal, MediumModalHeader, Modal, type ModalContainerProps, type ModalCustomService, type ModalHeaderProps, type ModalLargeHeaderProps, type ModalListProps, ModalManager, ModalManagerContext, type ModalPresenterProps, type ModalProps, type MultiValueProps, NotFountPage, type NotFountPageProps, NumberInput, type NumberInputProps, type Option, Pagination, type PaginationData, type PaginationItemProps, type PaginationProps, PhoneInput, type PhoneInputProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonOption, type RadioButtonProps, type RangeDatePickerProps, type RangeModeProps, Select, type SelectContentProps, type SelectDirection, type SelectGroupProps, type SelectItemProps, type SelectLabelProps, type SelectProps, type SelectSize, type SelectTriggerProps, type SelectValueProps, type SelectVariant, type SingleDatePickerProps, type SingleModeProps, type SingleValueProps, SmallModal, SmallModalHeader, Spinner, type SpinnerProps, StatusLabel, type Step, StepIndicator, type StepIndicatorProps, type StepStatus, Switch, type SwitchLabelProps, type SwitchProps, type SwitchTrackProps, TOASTBAR_TYPE, Tab, TabPanel, type TabProps, Tabs, type TabsProps, Tag, type TagProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, TimeSelector, type TimeSelectorPopupProps, type TimeSelectorProps, Title, type TitleProps, ToastBar, type ToastBarEventListenerType, ToastBarManager, type ToastBarProps, YearMonthSelector, birthDateFormat, convertDateToZonedDateTime, customEventService, dateWithFormat, dateWithFormatDot, dateWithFormatTablet, dateWithFormatWithoutConvert, daysBetweenTwoDate, daysBetweenTwoDateTablet, dialogService, dialogUtilService, getCalculateTheNumberOfDays, getFirstAndLastDayOfWeek, getFirstDayAndLastDayOfMonth, getZonedDateTimeNow, isBetweenUntilMonth, modalService, numberToHHMMSS, parseStringToLocalDate, parseStringToLocalDateTime, parseStringToZonedDateTime, parseZoneDateTime, parseZoneDateTimeTablet, parseZoneDateTimeToLocalFullTime, parseZonedDateTime, regNoToBirthDateWithFormat, regNoToDatePickerFormat, splitPhoneNumber, timeWithFormat, toastbarService, useAnimationToggle, useBlockDocumentScroll, useCalendar, useCustomEventListener, useDelayToggle, useFocusInContent, useHandleClickBackdrop, useHandleToastBarList, useModalManagerContext, useToastBarCustomEventListener };