@bestow-ui/react 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -69
- package/dist/{chunk-LHT64JDG.js → chunk-TIFI6ZQU.js} +93 -3
- package/dist/chunk-TIFI6ZQU.js.map +1 -0
- package/dist/client.js +884 -389
- package/dist/client.js.map +1 -1
- package/dist/index.cjs +1365 -755
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +531 -112
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +304 -20
- package/dist/index.d.ts +304 -20
- package/dist/shared.js +98 -74
- package/dist/shared.js.map +1 -1
- package/package.json +23 -13
- package/dist/chunk-LHT64JDG.js.map +0 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as _bestow_ui_tokens from '@bestow-ui/tokens';
|
|
2
2
|
import { space } from '@bestow-ui/tokens';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import { ReactNode, HTMLAttributes, ElementType, CSSProperties, ComponentPropsWithoutRef, InputHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactElement, TdHTMLAttributes, ThHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
4
|
+
import { ReactNode, HTMLAttributes, ElementType, CSSProperties, ComponentPropsWithoutRef, InputHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactElement, OlHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, ChangeEvent, TextareaHTMLAttributes } from 'react';
|
|
5
5
|
import * as RadixAccordion from '@radix-ui/react-accordion';
|
|
6
6
|
import * as Dialog from '@radix-ui/react-dialog';
|
|
7
7
|
import * as RadixMenu from '@radix-ui/react-dropdown-menu';
|
|
@@ -42,14 +42,14 @@ declare const lightTokens: {
|
|
|
42
42
|
readonly mono: "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, monospace";
|
|
43
43
|
};
|
|
44
44
|
size: {
|
|
45
|
-
readonly xs:
|
|
46
|
-
readonly sm:
|
|
47
|
-
readonly md:
|
|
48
|
-
readonly lg:
|
|
49
|
-
readonly xl:
|
|
50
|
-
readonly '2xl':
|
|
51
|
-
readonly '3xl':
|
|
52
|
-
readonly '4xl':
|
|
45
|
+
readonly xs: string;
|
|
46
|
+
readonly sm: string;
|
|
47
|
+
readonly md: string;
|
|
48
|
+
readonly lg: string;
|
|
49
|
+
readonly xl: string;
|
|
50
|
+
readonly '2xl': string;
|
|
51
|
+
readonly '3xl': string;
|
|
52
|
+
readonly '4xl': string;
|
|
53
53
|
};
|
|
54
54
|
weight: {
|
|
55
55
|
readonly regular: "400";
|
|
@@ -69,9 +69,9 @@ declare const lightTokens: {
|
|
|
69
69
|
readonly slow: "320ms";
|
|
70
70
|
};
|
|
71
71
|
zIndex: {
|
|
72
|
-
readonly dropdown: "1000";
|
|
73
72
|
readonly overlay: "1300";
|
|
74
73
|
readonly modal: "1310";
|
|
74
|
+
readonly dropdown: "1320";
|
|
75
75
|
readonly toast: "1400";
|
|
76
76
|
readonly tooltip: "1500";
|
|
77
77
|
};
|
|
@@ -80,13 +80,30 @@ declare const lightTokens: {
|
|
|
80
80
|
type Widen<T> = {
|
|
81
81
|
[K in keyof T]: T[K] extends string ? string : Widen<T[K]>;
|
|
82
82
|
};
|
|
83
|
-
type ThemeTokens = Widen<typeof lightTokens>;
|
|
84
83
|
/**
|
|
85
|
-
*
|
|
86
|
-
*
|
|
84
|
+
* 기본값이 없는 선택 토큰 — CSS 변수를 정의하지 않고, 쓰는 곳에서 `fallbackVar` 로 기존 토큰을 따른다.
|
|
85
|
+
* 그래서 넣지 않으면 화면이 그대로이고, 기존 토큰(border.default 등)을 덮어쓴 사용자 설정도 계속 따른다(하위 영역의 CSS 덮어쓰기 포함).
|
|
86
|
+
* - `color.border.input`·`inputHover` (1.x 추가): 입력 칸(Input·Select·Combobox·Textarea·인증번호 칸 등) 테두리. 기본은 border.default·border.strong.
|
|
87
|
+
* 흰 배경과 1.3:1 인 기본 테두리를 3:1 이상으로 올리려면 `strongInputBorders` 를 쓴다(2.0 에서 기본값이 될 예정).
|
|
87
88
|
*/
|
|
89
|
+
declare const optionalTokens: {
|
|
90
|
+
color: {
|
|
91
|
+
border: {
|
|
92
|
+
input: string;
|
|
93
|
+
inputHover: string;
|
|
94
|
+
};
|
|
95
|
+
};
|
|
96
|
+
};
|
|
97
|
+
type ThemeTokens = Widen<typeof lightTokens> & Widen<typeof optionalTokens>;
|
|
88
98
|
declare const vars: {
|
|
89
99
|
color: {
|
|
100
|
+
border: {
|
|
101
|
+
input: `var(--${string})`;
|
|
102
|
+
inputHover: `var(--${string})`;
|
|
103
|
+
default: `var(--${string})`;
|
|
104
|
+
strong: `var(--${string})`;
|
|
105
|
+
focus: `var(--${string})`;
|
|
106
|
+
};
|
|
90
107
|
bg: {
|
|
91
108
|
default: `var(--${string})`;
|
|
92
109
|
subtle: `var(--${string})`;
|
|
@@ -100,11 +117,6 @@ declare const vars: {
|
|
|
100
117
|
subtle: `var(--${string})`;
|
|
101
118
|
inverse: `var(--${string})`;
|
|
102
119
|
};
|
|
103
|
-
border: {
|
|
104
|
-
default: `var(--${string})`;
|
|
105
|
-
strong: `var(--${string})`;
|
|
106
|
-
focus: `var(--${string})`;
|
|
107
|
-
};
|
|
108
120
|
primary: {
|
|
109
121
|
solid: `var(--${string})`;
|
|
110
122
|
solidHover: `var(--${string})`;
|
|
@@ -205,9 +217,9 @@ declare const vars: {
|
|
|
205
217
|
readonly slow: `var(--${string})`;
|
|
206
218
|
};
|
|
207
219
|
zIndex: {
|
|
208
|
-
readonly dropdown: `var(--${string})`;
|
|
209
220
|
readonly overlay: `var(--${string})`;
|
|
210
221
|
readonly modal: `var(--${string})`;
|
|
222
|
+
readonly dropdown: `var(--${string})`;
|
|
211
223
|
readonly toast: `var(--${string})`;
|
|
212
224
|
readonly tooltip: `var(--${string})`;
|
|
213
225
|
};
|
|
@@ -259,6 +271,17 @@ type IntentName = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
|
|
|
259
271
|
*/
|
|
260
272
|
declare function createIntentColors(intent: IntentName, color: string): ThemeInput;
|
|
261
273
|
|
|
274
|
+
/**
|
|
275
|
+
* 입력 칸 테두리를 배경과 3:1 이상으로 올리는 테마 입력 (WCAG 1.4.11 비텍스트 대비).
|
|
276
|
+
* 기본 테두리(border.default)는 흰 배경과 1.3:1 이라 칸의 경계가 잘 보이지 않는다 — 2.0 에서 기본값이 될 예정.
|
|
277
|
+
* hover 는 테두리보다 더 진하게(다크는 더 밝게) 바뀐다.
|
|
278
|
+
*
|
|
279
|
+
* @example
|
|
280
|
+
* <ThemeProvider overrides={createTheme(strongInputBorders)}>…</ThemeProvider>
|
|
281
|
+
* createTheme(createIntentColors('primary', '#7c3aed'), strongInputBorders) // 브랜드 테마와 함께
|
|
282
|
+
*/
|
|
283
|
+
declare const strongInputBorders: ThemeInput;
|
|
284
|
+
|
|
262
285
|
/**
|
|
263
286
|
* 컴포넌트의 기본 문구. 모두 생략할 수 있고, 생략하면 각 컴포넌트의 한국어 기본값을 쓴다.
|
|
264
287
|
* 우선순위: 컴포넌트에 직접 준 prop > LocaleProvider 의 messages > 한국어 기본값.
|
|
@@ -295,6 +318,28 @@ interface BestowMessages {
|
|
|
295
318
|
/** NumberInput −/+ 버튼 — "줄이기", "늘리기" (1.0 이후 추가, 선택 키) */
|
|
296
319
|
decrement?: string;
|
|
297
320
|
increment?: string;
|
|
321
|
+
/** Stepper — 목록 이름 "진행 단계", 완료한 단계에 붙는 "완료" (1.0 이후 추가, 선택 키) */
|
|
322
|
+
steps?: string;
|
|
323
|
+
stepCompleted?: string;
|
|
324
|
+
/**
|
|
325
|
+
* FileUpload (1.0 이후 추가, 선택 키) — "파일 선택", "또는 여기로 끌어다 놓으세요", "선택한 파일", "○○ 삭제",
|
|
326
|
+
* "파일 2개 선택됨", "○○ 삭제됨", 크기·형식·개수 초과 안내
|
|
327
|
+
*/
|
|
328
|
+
fileSelect?: string;
|
|
329
|
+
fileDropHint?: string;
|
|
330
|
+
fileList?: string;
|
|
331
|
+
fileRemove?: (name: string) => string;
|
|
332
|
+
filesSelected?: (count: number) => string;
|
|
333
|
+
fileRemoved?: (name: string) => string;
|
|
334
|
+
fileTooLarge?: (name: string, maxSize: string) => string;
|
|
335
|
+
fileTypeNotAllowed?: (name: string) => string;
|
|
336
|
+
fileTooMany?: (maxFiles: number) => string;
|
|
337
|
+
/** ErrorSummary 제목 — "입력한 내용에 고칠 곳이 3개 있어요" (1.0 이후 추가, 선택 키) */
|
|
338
|
+
errorSummaryTitle?: (count: number) => string;
|
|
339
|
+
/** DateRangePicker — "시작일", "종료일", 빠른 선택 묶음 이름 "빠른 선택" (1.0 이후 추가, 선택 키) */
|
|
340
|
+
dateRangeStart?: string;
|
|
341
|
+
dateRangeEnd?: string;
|
|
342
|
+
dateRangePresets?: string;
|
|
298
343
|
/** Slider 범위 손잡이 — "최소", "최대" */
|
|
299
344
|
rangeStart: string;
|
|
300
345
|
rangeEnd: string;
|
|
@@ -480,6 +525,45 @@ declare const CardBody: react.ForwardRefExoticComponent<CardSectionProps & react
|
|
|
480
525
|
/** 버튼 등 동작 영역. 오른쪽 정렬 */
|
|
481
526
|
declare const CardFooter: react.ForwardRefExoticComponent<CardSectionProps & react.RefAttributes<HTMLDivElement>>;
|
|
482
527
|
|
|
528
|
+
interface DescriptionListItem {
|
|
529
|
+
/** 이름 (dt) */
|
|
530
|
+
term: ReactNode;
|
|
531
|
+
/** 값 (dd) */
|
|
532
|
+
description: ReactNode;
|
|
533
|
+
}
|
|
534
|
+
interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
|
|
535
|
+
/** 이름–값 목록 */
|
|
536
|
+
items: DescriptionListItem[];
|
|
537
|
+
/** horizontal(기본): 이름 왼쪽·값 오른쪽. vertical: 이름 위·값 아래(좁은 곳·긴 값) */
|
|
538
|
+
layout?: 'horizontal' | 'vertical';
|
|
539
|
+
/** horizontal 일 때 이름 열의 폭 (기본 30%) — 예: "8rem" */
|
|
540
|
+
termWidth?: string;
|
|
541
|
+
/** 항목 사이에 구분선 */
|
|
542
|
+
divided?: boolean;
|
|
543
|
+
}
|
|
544
|
+
/**
|
|
545
|
+
* 이름–값 목록(주문 상세의 고객·연락처·금액 등). `<dl>` 안에 항목마다 `<div><dt/><dd/></div>` 로 그려 스크린리더가 쌍으로 읽는다.
|
|
546
|
+
* hook 이 없어 서버 컴포넌트로도 렌더링된다.
|
|
547
|
+
*/
|
|
548
|
+
declare const DescriptionList: react.ForwardRefExoticComponent<DescriptionListProps & react.RefAttributes<HTMLDListElement>>;
|
|
549
|
+
|
|
550
|
+
interface DateRange {
|
|
551
|
+
/** 시작일 'YYYY-MM-DD' (없으면 '') */
|
|
552
|
+
start: string;
|
|
553
|
+
/** 종료일 'YYYY-MM-DD' (없으면 '') */
|
|
554
|
+
end: string;
|
|
555
|
+
}
|
|
556
|
+
/** 빠른 선택 — 오늘에서 거슬러 올라간 기간. `days: 0` 은 오늘 하루 */
|
|
557
|
+
interface DateRangePreset {
|
|
558
|
+
label: string;
|
|
559
|
+
days?: number;
|
|
560
|
+
months?: number;
|
|
561
|
+
}
|
|
562
|
+
/** 조회 화면에서 흔한 빠른 선택(오늘·1주일·1개월·3개월). 그대로 넘기거나 골라 쓴다 */
|
|
563
|
+
declare const dateRangePresets: DateRangePreset[];
|
|
564
|
+
/** 빠른 선택이 가리키는 기간 (오늘 'YYYY-MM-DD' 기준) */
|
|
565
|
+
declare function presetRange(preset: DateRangePreset, today: string): DateRange;
|
|
566
|
+
|
|
483
567
|
interface DividerProps extends HTMLAttributes<HTMLDivElement> {
|
|
484
568
|
/** 방향. vertical 은 flex 행 안에서 부모 높이를 채운다 */
|
|
485
569
|
orientation?: 'horizontal' | 'vertical';
|
|
@@ -562,6 +646,23 @@ interface TypographyProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
|
|
|
562
646
|
}
|
|
563
647
|
declare const Typography: react.ForwardRefExoticComponent<TypographyProps & react.RefAttributes<HTMLElement>>;
|
|
564
648
|
|
|
649
|
+
interface VisuallyHiddenProps extends HTMLAttributes<HTMLElement> {
|
|
650
|
+
/** 렌더링할 요소 (기본 span) */
|
|
651
|
+
as?: ElementType;
|
|
652
|
+
}
|
|
653
|
+
/**
|
|
654
|
+
* 화면에는 보이지 않고 스크린리더만 읽는 글자. 아이콘만 있는 열 머리글("작업"), 보이는 글자에 붙는 보충 설명 등에 쓴다.
|
|
655
|
+
* `display: none`·`hidden` 과 달리 보조기술이 읽는다. hook 이 없어 서버 컴포넌트로도 렌더링된다.
|
|
656
|
+
*/
|
|
657
|
+
declare const VisuallyHidden: react.ForwardRefExoticComponent<VisuallyHiddenProps & react.RefAttributes<HTMLElement>>;
|
|
658
|
+
|
|
659
|
+
/**
|
|
660
|
+
* 폼 칸으로 포커스를 옮긴다(오류 요약의 링크, 제출 실패 뒤 등). `target` 은 칸의 id 나 요소.
|
|
661
|
+
* id 가 포커스할 수 없는 요소를 가리켜도 알맞은 곳을 찾는다 — RadioGroup·AgreementGroup 처럼 묶음이면 선택된(없으면 첫) 항목,
|
|
662
|
+
* FileUpload 처럼 숨긴 input 이면 같은 묶음(role="group")의 버튼. 옮겼으면 true.
|
|
663
|
+
*/
|
|
664
|
+
declare function focusField(target: string | HTMLElement | null | undefined): boolean;
|
|
665
|
+
|
|
565
666
|
interface ThemeProviderProps extends HTMLAttributes<HTMLDivElement> {
|
|
566
667
|
/** 라이트/다크 모드. 생략하면 바깥 ThemeProvider 의 모드를 이어받는다 (최상위는 light). */
|
|
567
668
|
theme?: ThemeName;
|
|
@@ -668,6 +769,8 @@ interface AgreementGroupProps {
|
|
|
668
769
|
hideText?: string;
|
|
669
770
|
/** form 제출 시 사용할 이름. 동의한 value 마다 hidden input 이 생긴다 */
|
|
670
771
|
name?: string;
|
|
772
|
+
/** fieldset 의 id — ErrorSummary 링크 등에서 이 묶음을 가리킬 때 */
|
|
773
|
+
id?: string;
|
|
671
774
|
className?: string;
|
|
672
775
|
}
|
|
673
776
|
/**
|
|
@@ -1017,6 +1120,47 @@ interface DatePickerProps {
|
|
|
1017
1120
|
*/
|
|
1018
1121
|
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
|
|
1019
1122
|
|
|
1123
|
+
interface DateRangePickerProps {
|
|
1124
|
+
/** 기간 (제어 모드) */
|
|
1125
|
+
value?: DateRange;
|
|
1126
|
+
/** 처음 기간 (비제어 모드) */
|
|
1127
|
+
defaultValue?: DateRange;
|
|
1128
|
+
/** 시작일·종료일이 바뀔 때. 비었거나 고를 수 없는 날짜면 '' */
|
|
1129
|
+
onValueChange?: (range: DateRange) => void;
|
|
1130
|
+
/** 묶음 이름 (legend) — 예: "조회 기간" */
|
|
1131
|
+
label?: ReactNode;
|
|
1132
|
+
/** 시작일 칸 레이블 (기본 "시작일") */
|
|
1133
|
+
startLabel?: string;
|
|
1134
|
+
/** 종료일 칸 레이블 (기본 "종료일") */
|
|
1135
|
+
endLabel?: string;
|
|
1136
|
+
/** 빠른 선택 버튼 — 오늘에서 거슬러 올라간 기간 (`dateRangePresets` 를 그대로 넘겨도 된다) */
|
|
1137
|
+
presets?: DateRangePreset[];
|
|
1138
|
+
/** 고를 수 있는 가장 이른 날 */
|
|
1139
|
+
min?: string;
|
|
1140
|
+
/** 고를 수 있는 가장 늦은 날 */
|
|
1141
|
+
max?: string;
|
|
1142
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
1143
|
+
isHoliday?: (date: Date) => boolean;
|
|
1144
|
+
/** "오늘" 을 고정한다 (빠른 선택의 기준, 달력의 오늘 표시 — 테스트·시각 회귀용) */
|
|
1145
|
+
today?: string;
|
|
1146
|
+
/** 묶음 아래 도움말 */
|
|
1147
|
+
helperText?: ReactNode;
|
|
1148
|
+
error?: boolean;
|
|
1149
|
+
required?: boolean;
|
|
1150
|
+
disabled?: boolean;
|
|
1151
|
+
/** form 제출용 이름 — 시작일·종료일 */
|
|
1152
|
+
startName?: string;
|
|
1153
|
+
endName?: string;
|
|
1154
|
+
/** fieldset 의 id (시작·종료 칸은 `${id}-start`, `${id}-end`) — ErrorSummary 링크가 가리키면 시작일로 간다 */
|
|
1155
|
+
id?: string;
|
|
1156
|
+
className?: string;
|
|
1157
|
+
}
|
|
1158
|
+
/**
|
|
1159
|
+
* 기간 선택 (조회 기간, 예약 기간). 시작일·종료일 DatePicker 두 개를 묶고, 시작일은 종료일보다 늦을 수 없게 서로 제한한다.
|
|
1160
|
+
* 빠른 선택(오늘·1주일·1개월…)은 현재 기간과 같으면 눌린 상태(aria-pressed)로 보인다.
|
|
1161
|
+
*/
|
|
1162
|
+
declare const DateRangePicker: react.ForwardRefExoticComponent<DateRangePickerProps & react.RefAttributes<HTMLFieldSetElement>>;
|
|
1163
|
+
|
|
1020
1164
|
interface DrawerProps {
|
|
1021
1165
|
/** 열림 상태 (제어 모드) */
|
|
1022
1166
|
open?: boolean;
|
|
@@ -1056,6 +1200,73 @@ declare function Drawer({ open, defaultOpen, onOpenChange, trigger, title, descr
|
|
|
1056
1200
|
*/
|
|
1057
1201
|
declare const DrawerClose: react.ForwardRefExoticComponent<Dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
1058
1202
|
|
|
1203
|
+
interface ErrorSummaryItem {
|
|
1204
|
+
/** 오류가 난 칸의 id — 링크를 누르면 그 칸으로 포커스가 간다(묶음이면 선택된·첫 항목) */
|
|
1205
|
+
id: string;
|
|
1206
|
+
/** 고칠 내용 (칸 아래 helperText 와 같은 문구를 권장) */
|
|
1207
|
+
message: ReactNode;
|
|
1208
|
+
}
|
|
1209
|
+
interface ErrorSummaryProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
1210
|
+
/** 고칠 곳 목록. 비어 있으면 아무것도 그리지 않는다 */
|
|
1211
|
+
errors: ErrorSummaryItem[];
|
|
1212
|
+
/** 제목 (기본 "입력한 내용에 고칠 곳이 N개 있어요") */
|
|
1213
|
+
title?: ReactNode;
|
|
1214
|
+
/**
|
|
1215
|
+
* 이 값이 바뀔 때마다(오류가 있으면) 요약으로 포커스를 옮긴다. 기본은 처음 나타날 때 한 번.
|
|
1216
|
+
* 다시 제출해도 오류가 남아 있으면 옮기도록 제출 횟수를 넘긴다 (react-hook-form: `formState.submitCount`).
|
|
1217
|
+
*/
|
|
1218
|
+
focusKey?: unknown;
|
|
1219
|
+
}
|
|
1220
|
+
/**
|
|
1221
|
+
* 폼 제출에 실패했을 때 고칠 곳을 모아 보여 주는 요약(GOV.UK error summary 패턴). 나타나면 포커스가 와서 스크린리더가 제목·목록을
|
|
1222
|
+
* 읽고, 각 링크로 해당 칸에 바로 간다. 칸마다 `error`·`helperText` 도 함께 표시한다.
|
|
1223
|
+
* react-hook-form 과 쓸 때는 `shouldFocusError: false` 로 두고 이 요약이 포커스를 받게 한다.
|
|
1224
|
+
*/
|
|
1225
|
+
declare const ErrorSummary: react.ForwardRefExoticComponent<ErrorSummaryProps & react.RefAttributes<HTMLDivElement>>;
|
|
1226
|
+
|
|
1227
|
+
type FileRejectionReason = 'type' | 'size' | 'count';
|
|
1228
|
+
interface FileRejection {
|
|
1229
|
+
file: File;
|
|
1230
|
+
reason: FileRejectionReason;
|
|
1231
|
+
}
|
|
1232
|
+
interface FileUploadProps {
|
|
1233
|
+
/** 선택한 파일 (제어 모드) */
|
|
1234
|
+
value?: File[];
|
|
1235
|
+
/** 처음 파일 (비제어 모드) */
|
|
1236
|
+
defaultValue?: File[];
|
|
1237
|
+
/** 선택한 파일이 바뀔 때 (조건에 맞는 파일만) */
|
|
1238
|
+
onValueChange?: (files: File[]) => void;
|
|
1239
|
+
/** 조건(accept·maxSize·maxFiles)에 맞지 않아 빠진 파일. 이유는 화면에도 보여 준다 */
|
|
1240
|
+
onReject?: (rejections: FileRejection[]) => void;
|
|
1241
|
+
/** 받을 형식 — input accept 와 같다 (예: ".pdf,image/*") */
|
|
1242
|
+
accept?: string;
|
|
1243
|
+
/** 여러 개 선택 (기본 false — 새로 고르면 바꾼다) */
|
|
1244
|
+
multiple?: boolean;
|
|
1245
|
+
/** 파일 하나의 최대 크기 (바이트) */
|
|
1246
|
+
maxSize?: number;
|
|
1247
|
+
/** 최대 개수 (multiple 일 때) */
|
|
1248
|
+
maxFiles?: number;
|
|
1249
|
+
/** 위에 표시할 레이블 */
|
|
1250
|
+
label?: ReactNode;
|
|
1251
|
+
/** 아래 도움말 (받는 형식·크기 안내 등). error 일 때는 에러 메시지로 표시된다 */
|
|
1252
|
+
helperText?: ReactNode;
|
|
1253
|
+
/** 에러 상태 */
|
|
1254
|
+
error?: boolean;
|
|
1255
|
+
required?: boolean;
|
|
1256
|
+
disabled?: boolean;
|
|
1257
|
+
/** form 제출 시 사용할 이름 — 네이티브 input 의 files 를 맞춰 두어 그대로 제출된다 */
|
|
1258
|
+
name?: string;
|
|
1259
|
+
id?: string;
|
|
1260
|
+
/** 바깥 래퍼 className */
|
|
1261
|
+
className?: string;
|
|
1262
|
+
}
|
|
1263
|
+
/**
|
|
1264
|
+
* 파일 첨부. "파일 선택" 버튼(또는 끌어다 놓기)으로 고르고, 선택한 파일을 이름·크기·삭제 버튼 목록으로 보여 준다.
|
|
1265
|
+
* 끌어다 놓기는 덤이고 버튼으로 모두 할 수 있다(KWCAG 2.5.7). 조건에 맞지 않는 파일은 이유를 보여 주고 스크린리더에 알린다.
|
|
1266
|
+
* 업로드(서버 전송)는 하지 않는다 — onValueChange 로 받은 File 을 직접 보낸다.
|
|
1267
|
+
*/
|
|
1268
|
+
declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
|
|
1269
|
+
|
|
1059
1270
|
/** 메뉴 루트. `open`/`defaultOpen`/`onOpenChange`/`modal` 을 받는다 */
|
|
1060
1271
|
declare const DropdownMenu: react.FC<RadixMenu.DropdownMenuProps>;
|
|
1061
1272
|
type DropdownMenuProps = ComponentPropsWithoutRef<typeof RadixMenu.Root>;
|
|
@@ -1525,6 +1736,29 @@ interface SliderProps {
|
|
|
1525
1736
|
*/
|
|
1526
1737
|
declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
|
|
1527
1738
|
|
|
1739
|
+
interface StepperStep {
|
|
1740
|
+
/** 단계 이름 */
|
|
1741
|
+
label: ReactNode;
|
|
1742
|
+
/** 이름 아래 보조 설명 */
|
|
1743
|
+
description?: ReactNode;
|
|
1744
|
+
}
|
|
1745
|
+
interface StepperProps extends Omit<OlHTMLAttributes<HTMLOListElement>, 'children' | 'type' | 'start'> {
|
|
1746
|
+
/** 단계 목록 */
|
|
1747
|
+
steps: StepperStep[];
|
|
1748
|
+
/** 현재 단계 (0부터). 앞 단계는 완료로 표시한다. steps.length 면 모두 완료 */
|
|
1749
|
+
current: number;
|
|
1750
|
+
/** horizontal(기본): 가로로 나란히, 이름은 원 아래. vertical: 세로로, 이름은 원 오른쪽(설명이 길 때) */
|
|
1751
|
+
orientation?: 'horizontal' | 'vertical';
|
|
1752
|
+
/** 목록 이름 (기본 "진행 단계") */
|
|
1753
|
+
'aria-label'?: string;
|
|
1754
|
+
}
|
|
1755
|
+
/**
|
|
1756
|
+
* 여러 단계로 나뉜 흐름(가입·결제·신청)에서 지금 어디쯤인지 보여 주는 표시용 목록.
|
|
1757
|
+
* `<ol>` 이라 스크린리더가 "n개 중 m번째" 를 읽고, 현재 단계는 aria-current="step", 완료한 단계는 "(완료)" 를 함께 읽는다.
|
|
1758
|
+
* 단계를 눌러 이동하는 기능은 없다 — 이동은 "이전"·"다음" 버튼으로 둔다.
|
|
1759
|
+
*/
|
|
1760
|
+
declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLOListElement>>;
|
|
1761
|
+
|
|
1528
1762
|
interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
|
|
1529
1763
|
/** 크기 (sm 16px, md 20px, lg 28px) */
|
|
1530
1764
|
size?: 'sm' | 'md' | 'lg';
|
|
@@ -1611,6 +1845,55 @@ interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'a
|
|
|
1611
1845
|
align?: TableAlign;
|
|
1612
1846
|
}
|
|
1613
1847
|
declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1848
|
+
interface TableEmptyProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'colSpan' | 'align'> {
|
|
1849
|
+
/** 표의 열 수 — 안내가 표 전체 폭을 차지하게 한다 */
|
|
1850
|
+
colSpan: number;
|
|
1851
|
+
children?: ReactNode;
|
|
1852
|
+
}
|
|
1853
|
+
/**
|
|
1854
|
+
* 보여 줄 행이 없을 때(검색 결과 없음 등) TableBody 안에 두는 안내 행. 표 전체 폭 가운데에 글자·버튼을 놓는다.
|
|
1855
|
+
* 검색·필터로 결과가 바뀌면 개수를 role="status" 로 따로 알리는 것을 권장한다(파일럿 /orders 참고).
|
|
1856
|
+
*/
|
|
1857
|
+
declare const TableEmpty: react.ForwardRefExoticComponent<TableEmptyProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1858
|
+
interface TableSkeletonProps {
|
|
1859
|
+
/** 자리 표시 행 수 (기본 5) */
|
|
1860
|
+
rows?: number;
|
|
1861
|
+
/** 열 수 */
|
|
1862
|
+
columns: number;
|
|
1863
|
+
}
|
|
1864
|
+
/**
|
|
1865
|
+
* 불러오는 동안 TableBody 안에 두는 자리 표시 행. 보조기술에서는 숨긴다 — 표(Table)에 `aria-busy` 를 주고,
|
|
1866
|
+
* 다 불러오면 결과 개수를 role="status" 로 알린다.
|
|
1867
|
+
*/
|
|
1868
|
+
declare function TableSkeleton({ rows, columns }: TableSkeletonProps): react.JSX.Element;
|
|
1869
|
+
|
|
1870
|
+
/**
|
|
1871
|
+
* 표 행 선택 상태. 페이지를 넘겨도 선택은 유지되고, "이 페이지 모두 선택" 체크박스(혼합 상태 포함)와 행 체크박스에
|
|
1872
|
+
* 바로 펼쳐 쓰는 prop 을 돌려준다.
|
|
1873
|
+
*
|
|
1874
|
+
* ```tsx
|
|
1875
|
+
* const selection = useTableSelection<string>();
|
|
1876
|
+
* <Checkbox aria-label="이 페이지 모두 선택" {...selection.selectAllProps(pageIds)} />
|
|
1877
|
+
* <Checkbox aria-label={`${row.id} 선택`} {...selection.rowProps(row.id)} />
|
|
1878
|
+
* <TableRow selected={selection.isSelected(row.id)}>
|
|
1879
|
+
* ```
|
|
1880
|
+
*/
|
|
1881
|
+
declare function useTableSelection<Id extends string | number = string>(initial?: Id[]): {
|
|
1882
|
+
selected: Id[];
|
|
1883
|
+
setSelected: react.Dispatch<react.SetStateAction<Id[]>>;
|
|
1884
|
+
isSelected: (id: Id) => boolean;
|
|
1885
|
+
toggle: (id: Id, checked?: boolean) => void;
|
|
1886
|
+
clear: () => void;
|
|
1887
|
+
selectAllProps: (pageIds: Id[]) => {
|
|
1888
|
+
checked: boolean;
|
|
1889
|
+
indeterminate: boolean;
|
|
1890
|
+
onChange: () => void;
|
|
1891
|
+
};
|
|
1892
|
+
rowProps: (id: Id) => {
|
|
1893
|
+
checked: boolean;
|
|
1894
|
+
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
1895
|
+
};
|
|
1896
|
+
};
|
|
1614
1897
|
|
|
1615
1898
|
interface TabsProps extends ComponentPropsWithoutRef<typeof RadixTabs.Root> {
|
|
1616
1899
|
/** 시각적 스타일. line 은 밑줄, soft 는 배경이 있는 세그먼트 */
|
|
@@ -1767,4 +2050,5 @@ interface VerificationCodeInputProps {
|
|
|
1767
2050
|
*/
|
|
1768
2051
|
declare const VerificationCodeInput: react.ForwardRefExoticComponent<VerificationCodeInputProps & react.RefAttributes<HTMLInputElement>>;
|
|
1769
2052
|
|
|
1770
|
-
export { Accordion, AccordionItem,
|
|
2053
|
+
export { Accordion, AccordionItem, AddressInput, AgreementGroup, Alert, AmountInput, Avatar, Badge, Breadcrumb, BusinessNumberInput, Button, Calendar, Card, CardBody, CardFooter, CardHeader, Checkbox, Combobox, DatePicker, DateRangePicker, DescriptionList, Divider, Drawer, DrawerClose, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorSummary, FileUpload, IconButton, Input, Link, LocaleProvider, Modal, ModalClose, NumberInput, Pagination, PhoneNumberInput, Popover, PopoverClose, Progress, RadioGroup, SegmentedControl, Select, Skeleton, SkipLink, Slider, Spinner, Stack, Stepper, Switch, Table, TableBody, TableCell, TableEmpty, TableFooter, TableHead, TableHeader, TableRow, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TextField, Textarea, ThemeProvider, ToastProvider, Tooltip, Typography, VerificationCodeInput, VisuallyHidden, composeExtraAddress, contrastRatio, createIntentColors, createTheme, dateRangePresets, en, focusField, formatBusinessNumber, formatKoreanAmount, formatKoreanDate, formatPhoneNumber, hasAllRequiredAgreements, isValidBusinessNumber, kakaoPostcodeProvider, parseISODate, presetRange, strongInputBorders, themeClass, toISODate, useMessages, usePortalProps, useTableSelection, useTheme, useToast, vars };
|
|
2054
|
+
export type { AccordionItemProps, AccordionProps, AddressInputProps, AddressProvider, AddressSearchResult, AddressValue, AgreementGroupProps, AgreementItem, AlertColor, AlertProps, AmountInputProps, AvatarProps, BadgeProps, BestowMessages, BestowTheme, BreadcrumbItemData, BreadcrumbProps, BusinessNumberInputProps, ButtonProps, CalendarProps, CardProps, CardSectionProps, CheckboxProps, ComboboxOption, ComboboxProps, DatePickerProps, DateRange, DateRangePickerProps, DateRangePreset, DeepPartial, DescriptionListItem, DescriptionListProps, DividerProps, DrawerProps, DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuLabelProps, DropdownMenuProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTriggerProps, DropdownMenuTriggerProps, ErrorSummaryItem, ErrorSummaryProps, FileRejection, FileRejectionReason, FileUploadProps, IconButtonProps, InputProps, IntentName, LinkProps, LocaleProviderProps, Messages, ModalProps, NumberInputProps, PaginationItemType, PaginationProps, PhoneNumberInputProps, PopoverProps, ProgressProps, RadioGroupProps, RadioOption, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SkipLinkProps, SliderProps, SpinnerProps, StackProps, StepperProps, StepperStep, SwitchProps, TableAlign, TableCellProps, TableEmptyProps, TableHeadProps, TableProps, TableRowProps, TableSize, TableSkeletonProps, TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps, TextFieldProps, TextareaProps, ThemeInput, ThemeName, ThemeOverrides, ThemeProviderProps, ThemeTokens, ToastColor, ToastContextValue, ToastOptions, ToastProviderProps, TooltipProps, TypographyProps, TypographyVariant, VerificationCodeInputProps, VisuallyHiddenProps };
|