@bestow-ui/react 0.11.0 → 0.12.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 +30 -13
- package/dist/index.cjs +1135 -601
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +218 -112
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +210 -12
- package/dist/index.d.ts +210 -12
- package/dist/index.js +1049 -523
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
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 { HTMLAttributes, CSSProperties,
|
|
4
|
+
import { HTMLAttributes, CSSProperties, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactElement, TdHTMLAttributes, ThHTMLAttributes, 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';
|
|
@@ -285,6 +285,108 @@ declare function usePortalProps(): {
|
|
|
285
285
|
*/
|
|
286
286
|
declare function usePortalClassName(): string;
|
|
287
287
|
|
|
288
|
+
/**
|
|
289
|
+
* 컴포넌트의 기본 문구. 모두 생략할 수 있고, 생략하면 각 컴포넌트의 한국어 기본값을 쓴다.
|
|
290
|
+
* 우선순위: 컴포넌트에 직접 준 prop > LocaleProvider 의 messages > 한국어 기본값.
|
|
291
|
+
*
|
|
292
|
+
* 한국어 기본값을 하나의 객체로 모으지 않고 각 컴포넌트에 두는 이유: 그 객체를 import 하면 Button 하나만 써도
|
|
293
|
+
* 모든 문구가 번들에 딸려 온다(Button → Spinner). 이 파일에는 타입과 Provider 만 둔다.
|
|
294
|
+
*/
|
|
295
|
+
interface BestowMessages {
|
|
296
|
+
/** 닫기 버튼 (Modal, Drawer, Popover, Toast, Alert) — "닫기" */
|
|
297
|
+
close: string;
|
|
298
|
+
/** Spinner — "로딩 중" */
|
|
299
|
+
loading: string;
|
|
300
|
+
/** Toast 영역 — "알림" */
|
|
301
|
+
notifications: string;
|
|
302
|
+
/** Breadcrumb — "이동 경로" */
|
|
303
|
+
breadcrumb: string;
|
|
304
|
+
/** Pagination — "페이지 탐색", "이전 페이지", "다음 페이지", "3 페이지" */
|
|
305
|
+
pagination: string;
|
|
306
|
+
paginationPrevious: string;
|
|
307
|
+
paginationNext: string;
|
|
308
|
+
paginationPage: (page: number) => string;
|
|
309
|
+
/** Link external — "(새 창)" */
|
|
310
|
+
newWindow: string;
|
|
311
|
+
/** Combobox — "결과가 없어요", "목록 열기" */
|
|
312
|
+
noResults: string;
|
|
313
|
+
openList: string;
|
|
314
|
+
/** Slider 범위 손잡이 — "최소", "최대" */
|
|
315
|
+
rangeStart: string;
|
|
316
|
+
rangeEnd: string;
|
|
317
|
+
/** AgreementGroup — "전체 동의", "필수", "선택", "보기", "접기" */
|
|
318
|
+
agreeAll: string;
|
|
319
|
+
required: string;
|
|
320
|
+
optional: string;
|
|
321
|
+
show: string;
|
|
322
|
+
hide: string;
|
|
323
|
+
/** VerificationCodeInput — "인증번호", "6자리 숫자를 입력하세요.", "재전송", "인증 시간이 지났어요. 재전송해 주세요." */
|
|
324
|
+
verificationCode: string;
|
|
325
|
+
verificationCodeHint: (length: number, type: 'numeric' | 'alphanumeric') => string;
|
|
326
|
+
resend: string;
|
|
327
|
+
verificationExpired: string;
|
|
328
|
+
/** PhoneNumberInput — "휴대폰 번호" */
|
|
329
|
+
phoneNumber: string;
|
|
330
|
+
/** BusinessNumberInput — "사업자등록번호" 와 검증 문구 */
|
|
331
|
+
businessNumber: string;
|
|
332
|
+
businessNumberInvalid: string;
|
|
333
|
+
businessNumberIncomplete: string;
|
|
334
|
+
/** AmountInput — "금액", "원" */
|
|
335
|
+
amount: string;
|
|
336
|
+
currencyUnit: string;
|
|
337
|
+
/** AddressInput */
|
|
338
|
+
address: string;
|
|
339
|
+
addressSearch: string;
|
|
340
|
+
addressSearchDescription: string;
|
|
341
|
+
postalCode: string;
|
|
342
|
+
baseAddress: string;
|
|
343
|
+
baseAddressPlaceholder: string;
|
|
344
|
+
detailAddress: string;
|
|
345
|
+
detailAddressPlaceholder: string;
|
|
346
|
+
addressLoading: string;
|
|
347
|
+
addressLoadError: string;
|
|
348
|
+
/** Calendar */
|
|
349
|
+
previousMonth: string;
|
|
350
|
+
nextMonth: string;
|
|
351
|
+
/** 달 제목 — month 는 1~12 */
|
|
352
|
+
monthTitle: (year: number, month: number) => string;
|
|
353
|
+
/** 요일 머리글 (일요일부터 7개) */
|
|
354
|
+
weekdaysShort: readonly string[];
|
|
355
|
+
/** 요일 전체 이름 (일요일부터 7개) */
|
|
356
|
+
weekdaysLong: readonly string[];
|
|
357
|
+
/** 날짜 버튼 이름 — 화면에 보이는 날짜 숫자로 시작해야 한다 (WCAG 2.5.3) */
|
|
358
|
+
dayLabel: (date: Date, weekdayLong: string) => string;
|
|
359
|
+
holiday: string;
|
|
360
|
+
today: string;
|
|
361
|
+
/** DatePicker */
|
|
362
|
+
date: string;
|
|
363
|
+
openCalendar: string;
|
|
364
|
+
calendar: string;
|
|
365
|
+
dateInvalid: string;
|
|
366
|
+
dateUnavailable: string;
|
|
367
|
+
dateIncomplete: string;
|
|
368
|
+
}
|
|
369
|
+
type Messages = Partial<BestowMessages>;
|
|
370
|
+
interface LocaleProviderProps {
|
|
371
|
+
/** 바꿀 문구. 일부만 넘기면 나머지는 바깥 LocaleProvider 또는 한국어 기본값을 쓴다 */
|
|
372
|
+
messages: Messages;
|
|
373
|
+
children?: ReactNode;
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* 컴포넌트 기본 문구를 한곳에서 바꾼다 (다국어 대응 등). 중첩하면 바깥 값을 이어받고 안쪽이 우선한다.
|
|
377
|
+
* @example <LocaleProvider messages={en}>…</LocaleProvider>
|
|
378
|
+
* @example <LocaleProvider messages={{ close: '창 닫기' }}>…</LocaleProvider>
|
|
379
|
+
*/
|
|
380
|
+
declare function LocaleProvider({ messages, children }: LocaleProviderProps): react.JSX.Element;
|
|
381
|
+
/** LocaleProvider 로 바꾼 문구 (없으면 빈 객체 — 각 컴포넌트가 한국어 기본값을 쓴다) */
|
|
382
|
+
declare function useMessages(): Messages;
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* 영어 문구. `<LocaleProvider messages={en}>` 로 쓴다. 따로 import 할 때만 번들에 들어간다.
|
|
386
|
+
* 한국 서비스 전용 부품(사업자등록번호 등)의 문구도 영어로 바뀌지만 서식(하이픈 위치 등)은 그대로다.
|
|
387
|
+
*/
|
|
388
|
+
declare const en: BestowMessages;
|
|
389
|
+
|
|
288
390
|
/**
|
|
289
391
|
* `type="single"`: 한 번에 하나만 열린다 (`value: string`). `collapsible` 이면 열린 항목을 다시 눌러 닫을 수 있다.
|
|
290
392
|
* `type="multiple"`: 여러 개를 함께 열 수 있다 (`value: string[]`).
|
|
@@ -586,6 +688,36 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'col
|
|
|
586
688
|
}
|
|
587
689
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
588
690
|
|
|
691
|
+
interface CalendarProps {
|
|
692
|
+
/** 선택된 날짜 'YYYY-MM-DD' (제어 모드) */
|
|
693
|
+
value?: string;
|
|
694
|
+
/** 처음 선택된 날짜 (비제어 모드) */
|
|
695
|
+
defaultValue?: string;
|
|
696
|
+
/** 날짜를 고를 때 호출된다 */
|
|
697
|
+
onValueChange?: (value: string) => void;
|
|
698
|
+
/** 고를 수 있는 가장 이른 날짜 'YYYY-MM-DD' */
|
|
699
|
+
min?: string;
|
|
700
|
+
/** 고를 수 있는 가장 늦은 날짜 'YYYY-MM-DD' */
|
|
701
|
+
max?: string;
|
|
702
|
+
/** 고를 수 없는 날짜 (예: 주말 제외) */
|
|
703
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
704
|
+
/** 공휴일. 일요일처럼 빨갛게 표시하고 스크린리더에 "공휴일" 을 덧붙인다 */
|
|
705
|
+
isHoliday?: (date: Date) => boolean;
|
|
706
|
+
/** 오늘 날짜 'YYYY-MM-DD'. 기본은 실제 오늘 — 테스트·스크린샷에서 고정할 때 쓴다 */
|
|
707
|
+
today?: string;
|
|
708
|
+
/** 처음 그릴 때 날짜(선택된 날짜, 없으면 오늘)로 포커스를 옮긴다 — 팝업 안에서 쓸 때 */
|
|
709
|
+
initialFocus?: boolean;
|
|
710
|
+
/** 이전·다음 달 버튼 이름 */
|
|
711
|
+
prevMonthLabel?: string;
|
|
712
|
+
nextMonthLabel?: string;
|
|
713
|
+
className?: string;
|
|
714
|
+
}
|
|
715
|
+
/**
|
|
716
|
+
* 달력 (WAI-ARIA grid). 일요일부터 시작하고 일요일·공휴일은 빨강, 토요일은 파랑으로 표시한다.
|
|
717
|
+
* 키보드: ←→ 하루, ↑↓ 일주일, Home/End 주의 처음·끝, PageUp/PageDown 한 달(Shift 와 함께 1년), Enter/Space 선택.
|
|
718
|
+
*/
|
|
719
|
+
declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
|
|
720
|
+
|
|
589
721
|
interface CardProps extends HTMLAttributes<HTMLElement> {
|
|
590
722
|
/** 시각적 스타일. outline 은 테두리, elevated 는 그림자(다크 모드는 가장자리 ring 포함), soft 는 옅은 배경 */
|
|
591
723
|
variant?: 'outline' | 'elevated' | 'soft';
|
|
@@ -613,6 +745,8 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'siz
|
|
|
613
745
|
indeterminate?: boolean;
|
|
614
746
|
/** 에러 상태 */
|
|
615
747
|
invalid?: boolean;
|
|
748
|
+
/** 체크 상태가 바뀌면 호출된다 (Switch 와 같은 이름). 기본 `onChange` 도 그대로 쓸 수 있다 */
|
|
749
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
616
750
|
}
|
|
617
751
|
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
618
752
|
|
|
@@ -661,6 +795,47 @@ interface ComboboxProps {
|
|
|
661
795
|
*/
|
|
662
796
|
declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
663
797
|
|
|
798
|
+
interface DatePickerProps {
|
|
799
|
+
/** 날짜 'YYYY-MM-DD' (제어 모드). 비어 있으면 '' */
|
|
800
|
+
value?: string;
|
|
801
|
+
/** 처음 날짜 (비제어 모드) */
|
|
802
|
+
defaultValue?: string;
|
|
803
|
+
/** 올바른 날짜를 다 입력하거나 달력에서 고르면 'YYYY-MM-DD', 지우거나 잘못되면 '' 로 호출된다 */
|
|
804
|
+
onValueChange?: (value: string) => void;
|
|
805
|
+
/** 고를 수 있는 가장 이른·늦은 날짜 'YYYY-MM-DD' */
|
|
806
|
+
min?: string;
|
|
807
|
+
max?: string;
|
|
808
|
+
/** 고를 수 없는 날짜 */
|
|
809
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
810
|
+
/** 공휴일 (달력에 빨갛게 표시) */
|
|
811
|
+
isHoliday?: (date: Date) => boolean;
|
|
812
|
+
/** 오늘 날짜 'YYYY-MM-DD' (테스트·스크린샷 고정용) */
|
|
813
|
+
today?: string;
|
|
814
|
+
label?: ReactNode;
|
|
815
|
+
/** 아래 도움말. error 일 때는 에러 메시지로 표시된다 */
|
|
816
|
+
helperText?: ReactNode;
|
|
817
|
+
error?: boolean;
|
|
818
|
+
required?: boolean;
|
|
819
|
+
disabled?: boolean;
|
|
820
|
+
fullWidth?: boolean;
|
|
821
|
+
placeholder?: string;
|
|
822
|
+
/** 달력 버튼·달력 창 이름 */
|
|
823
|
+
calendarLabel?: string;
|
|
824
|
+
/** 자동 검증 문구 */
|
|
825
|
+
invalidText?: string;
|
|
826
|
+
unavailableText?: string;
|
|
827
|
+
incompleteText?: string;
|
|
828
|
+
/** form 제출 시 이름 ('YYYY-MM-DD' 가 제출된다) */
|
|
829
|
+
name?: string;
|
|
830
|
+
id?: string;
|
|
831
|
+
className?: string;
|
|
832
|
+
}
|
|
833
|
+
/**
|
|
834
|
+
* 날짜 입력. `YYYY-MM-DD` 로 직접 입력하거나(숫자만 쳐도 하이픈이 들어간다) 달력 버튼으로 고른다.
|
|
835
|
+
* 달력은 일요일부터 시작하고, 열면 선택된 날짜(없으면 오늘)로 포커스가 간다. 값은 시간대 문제가 없는 'YYYY-MM-DD' 문자열이다.
|
|
836
|
+
*/
|
|
837
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
|
|
838
|
+
|
|
664
839
|
interface DividerProps extends HTMLAttributes<HTMLDivElement> {
|
|
665
840
|
/** 방향. vertical 은 flex 행 안에서 부모 높이를 채운다 */
|
|
666
841
|
orientation?: 'horizontal' | 'vertical';
|
|
@@ -733,8 +908,11 @@ interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof Rad
|
|
|
733
908
|
icon?: ReactNode;
|
|
734
909
|
/** 오른쪽에 표시할 단축키 (예: "⌘K"). 표시용이라 항목 이름에는 포함되지 않는다 */
|
|
735
910
|
shortcut?: string;
|
|
736
|
-
/**
|
|
737
|
-
|
|
911
|
+
/**
|
|
912
|
+
* danger 는 삭제처럼 되돌리기 어려운 동작.
|
|
913
|
+
* `default` 는 0.x 의 옛 이름으로 `neutral` 과 같다 — **deprecated, 1.0 에서 제거**.
|
|
914
|
+
*/
|
|
915
|
+
color?: 'neutral' | 'danger' | 'default';
|
|
738
916
|
}
|
|
739
917
|
declare const DropdownMenuItem: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
740
918
|
type DropdownMenuLabelProps = ComponentPropsWithoutRef<typeof RadixMenu.Label>;
|
|
@@ -891,8 +1069,10 @@ interface PopoverProps {
|
|
|
891
1069
|
className?: string;
|
|
892
1070
|
/** 팝오버 style (너비 지정 등) */
|
|
893
1071
|
style?: CSSProperties;
|
|
1072
|
+
/** 열릴 때 포커스 처리. 기본은 내용의 첫 요소로 간다 — `event.preventDefault()` 후 원하는 요소에 focus() 할 수 있다 */
|
|
1073
|
+
onOpenAutoFocus?: (event: Event) => void;
|
|
894
1074
|
}
|
|
895
|
-
declare function Popover({ content, children, title, 'aria-label': ariaLabel, showClose, showArrow, side, align, open, defaultOpen, onOpenChange, modal, className, style, }: PopoverProps): react.JSX.Element;
|
|
1075
|
+
declare function Popover({ content, children, title, 'aria-label': ariaLabel, showClose, showArrow, side, align, open, defaultOpen, onOpenChange, modal, className, style, onOpenAutoFocus, }: PopoverProps): react.JSX.Element;
|
|
896
1076
|
/**
|
|
897
1077
|
* 팝오버 내용 안에서 누르면 팝오버를 닫는 요소.
|
|
898
1078
|
* @example <PopoverClose asChild><Button>확인</Button></PopoverClose>
|
|
@@ -1056,8 +1236,11 @@ declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAtt
|
|
|
1056
1236
|
interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
|
|
1057
1237
|
/** 크기 (sm 16px, md 20px, lg 28px) */
|
|
1058
1238
|
size?: 'sm' | 'md' | 'lg';
|
|
1059
|
-
/**
|
|
1060
|
-
|
|
1239
|
+
/**
|
|
1240
|
+
* 색상. `inherit`(기본)는 부모 글자색을 그대로 쓴다.
|
|
1241
|
+
* `current` 는 0.x 의 옛 이름으로 `inherit` 와 같다 — **deprecated, 1.0 에서 제거**.
|
|
1242
|
+
*/
|
|
1243
|
+
color?: 'inherit' | 'primary' | 'neutral' | 'danger' | 'current';
|
|
1061
1244
|
/**
|
|
1062
1245
|
* 스크린리더가 읽을 텍스트 (기본 "로딩 중").
|
|
1063
1246
|
* 빈 문자열이면 장식용으로 보고 `aria-hidden` 처리한다 — 버튼처럼 바깥 요소가 이미 상태를 알릴 때 쓴다.
|
|
@@ -1137,10 +1320,10 @@ interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
|
1137
1320
|
selected?: boolean;
|
|
1138
1321
|
}
|
|
1139
1322
|
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
1140
|
-
type
|
|
1323
|
+
type TableAlign = 'left' | 'center' | 'right';
|
|
1141
1324
|
interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
1142
1325
|
/** 정렬 */
|
|
1143
|
-
align?:
|
|
1326
|
+
align?: TableAlign;
|
|
1144
1327
|
/**
|
|
1145
1328
|
* 이 열의 정렬 상태. onSort 와 함께 주면 머리 셀이 정렬 버튼이 되고 `aria-sort` 를 붙인다.
|
|
1146
1329
|
* 정렬되지 않은 열은 'none'.
|
|
@@ -1152,7 +1335,7 @@ interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'a
|
|
|
1152
1335
|
declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1153
1336
|
interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
1154
1337
|
/** 정렬 (숫자는 right 권장) */
|
|
1155
|
-
align?:
|
|
1338
|
+
align?: TableAlign;
|
|
1156
1339
|
}
|
|
1157
1340
|
declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1158
1341
|
|
|
@@ -1208,12 +1391,17 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
|
|
|
1208
1391
|
}
|
|
1209
1392
|
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
1210
1393
|
|
|
1394
|
+
type ToastColor = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
|
|
1211
1395
|
interface ToastOptions {
|
|
1212
1396
|
/** 제목 */
|
|
1213
1397
|
title: ReactNode;
|
|
1214
1398
|
/** 설명 */
|
|
1215
1399
|
description?: ReactNode;
|
|
1216
|
-
/** 의미 색상 */
|
|
1400
|
+
/** 의미 색상 (기본 neutral) — Alert·Badge 의 `color` 와 같은 이름 */
|
|
1401
|
+
color?: ToastColor;
|
|
1402
|
+
/**
|
|
1403
|
+
* @deprecated `color` 를 쓰세요 (`'default'` → `'neutral'`). 1.0 에서 제거.
|
|
1404
|
+
*/
|
|
1217
1405
|
variant?: 'default' | 'success' | 'warning' | 'danger';
|
|
1218
1406
|
/** 자동으로 닫히기까지 시간(ms). Infinity 면 자동으로 닫히지 않는다 */
|
|
1219
1407
|
duration?: number;
|
|
@@ -1239,7 +1427,7 @@ interface ToastProviderProps {
|
|
|
1239
1427
|
label?: string;
|
|
1240
1428
|
}
|
|
1241
1429
|
/** 앱 최상단(ThemeProvider 안쪽)에 한 번 감싸고, 하위에서 useToast() 로 토스트를 띄운다. */
|
|
1242
|
-
declare function ToastProvider({ children, duration, label }: ToastProviderProps): react.JSX.Element;
|
|
1430
|
+
declare function ToastProvider({ children, duration, label: labelProp }: ToastProviderProps): react.JSX.Element;
|
|
1243
1431
|
declare function useToast(): ToastContextValue;
|
|
1244
1432
|
|
|
1245
1433
|
interface TooltipProps {
|
|
@@ -1347,4 +1535,14 @@ declare function isValidBusinessNumber(input: string): boolean;
|
|
|
1347
1535
|
*/
|
|
1348
1536
|
declare function formatKoreanAmount(amount: number, unit?: string): string;
|
|
1349
1537
|
|
|
1350
|
-
|
|
1538
|
+
/** Date → 'YYYY-MM-DD' (로컬 기준) */
|
|
1539
|
+
declare function toISODate(date: Date): string;
|
|
1540
|
+
/** 'YYYY-MM-DD' → Date (로컬 자정). 형식이 틀리거나 없는 날짜(2월 30일 등)면 null */
|
|
1541
|
+
declare function parseISODate(value: string | null | undefined): Date | null;
|
|
1542
|
+
/**
|
|
1543
|
+
* 한국어 날짜. 스크린리더용 날짜 이름 등에 쓴다.
|
|
1544
|
+
* @example formatKoreanDate(new Date(2026, 9, 15)) // '2026년 10월 15일 목요일'
|
|
1545
|
+
*/
|
|
1546
|
+
declare function formatKoreanDate(date: Date, withWeekday?: boolean): string;
|
|
1547
|
+
|
|
1548
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AddressInput, type AddressInputProps, type AddressProvider, type AddressSearchResult, type AddressValue, AgreementGroup, type AgreementGroupProps, type AgreementItem, Alert, type AlertColor, type AlertProps, AmountInput, type AmountInputProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BestowMessages, type BestowTheme, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, BusinessNumberInput, type BusinessNumberInputProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, DatePicker, type DatePickerProps, type DeepPartial, Divider, type DividerProps, Drawer, DrawerClose, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, IconButton, type IconButtonProps, Input, type InputProps, type IntentName, Link, type LinkProps, LocaleProvider, type LocaleProviderProps, type Messages, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, PhoneNumberInput, type PhoneNumberInputProps, Popover, PopoverClose, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Table, type TableAlign, TableBody, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastColor, type ToastContextValue, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, VerificationCodeInput, type VerificationCodeInputProps, composeExtraAddress, contrastRatio, createIntentColors, createTheme, en, formatBusinessNumber, formatKoreanAmount, formatKoreanDate, formatPhoneNumber, hasAllRequiredAgreements, isValidBusinessNumber, kakaoPostcodeProvider, parseISODate, themeClass, toISODate, useMessages, usePortalClassName, usePortalProps, useTheme, useToast, vars };
|
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 { HTMLAttributes, CSSProperties,
|
|
4
|
+
import { HTMLAttributes, CSSProperties, ReactNode, ComponentPropsWithoutRef, InputHTMLAttributes, ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, ReactElement, TdHTMLAttributes, ThHTMLAttributes, 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';
|
|
@@ -285,6 +285,108 @@ declare function usePortalProps(): {
|
|
|
285
285
|
*/
|
|
286
286
|
declare function usePortalClassName(): string;
|
|
287
287
|
|
|
288
|
+
/**
|
|
289
|
+
* 컴포넌트의 기본 문구. 모두 생략할 수 있고, 생략하면 각 컴포넌트의 한국어 기본값을 쓴다.
|
|
290
|
+
* 우선순위: 컴포넌트에 직접 준 prop > LocaleProvider 의 messages > 한국어 기본값.
|
|
291
|
+
*
|
|
292
|
+
* 한국어 기본값을 하나의 객체로 모으지 않고 각 컴포넌트에 두는 이유: 그 객체를 import 하면 Button 하나만 써도
|
|
293
|
+
* 모든 문구가 번들에 딸려 온다(Button → Spinner). 이 파일에는 타입과 Provider 만 둔다.
|
|
294
|
+
*/
|
|
295
|
+
interface BestowMessages {
|
|
296
|
+
/** 닫기 버튼 (Modal, Drawer, Popover, Toast, Alert) — "닫기" */
|
|
297
|
+
close: string;
|
|
298
|
+
/** Spinner — "로딩 중" */
|
|
299
|
+
loading: string;
|
|
300
|
+
/** Toast 영역 — "알림" */
|
|
301
|
+
notifications: string;
|
|
302
|
+
/** Breadcrumb — "이동 경로" */
|
|
303
|
+
breadcrumb: string;
|
|
304
|
+
/** Pagination — "페이지 탐색", "이전 페이지", "다음 페이지", "3 페이지" */
|
|
305
|
+
pagination: string;
|
|
306
|
+
paginationPrevious: string;
|
|
307
|
+
paginationNext: string;
|
|
308
|
+
paginationPage: (page: number) => string;
|
|
309
|
+
/** Link external — "(새 창)" */
|
|
310
|
+
newWindow: string;
|
|
311
|
+
/** Combobox — "결과가 없어요", "목록 열기" */
|
|
312
|
+
noResults: string;
|
|
313
|
+
openList: string;
|
|
314
|
+
/** Slider 범위 손잡이 — "최소", "최대" */
|
|
315
|
+
rangeStart: string;
|
|
316
|
+
rangeEnd: string;
|
|
317
|
+
/** AgreementGroup — "전체 동의", "필수", "선택", "보기", "접기" */
|
|
318
|
+
agreeAll: string;
|
|
319
|
+
required: string;
|
|
320
|
+
optional: string;
|
|
321
|
+
show: string;
|
|
322
|
+
hide: string;
|
|
323
|
+
/** VerificationCodeInput — "인증번호", "6자리 숫자를 입력하세요.", "재전송", "인증 시간이 지났어요. 재전송해 주세요." */
|
|
324
|
+
verificationCode: string;
|
|
325
|
+
verificationCodeHint: (length: number, type: 'numeric' | 'alphanumeric') => string;
|
|
326
|
+
resend: string;
|
|
327
|
+
verificationExpired: string;
|
|
328
|
+
/** PhoneNumberInput — "휴대폰 번호" */
|
|
329
|
+
phoneNumber: string;
|
|
330
|
+
/** BusinessNumberInput — "사업자등록번호" 와 검증 문구 */
|
|
331
|
+
businessNumber: string;
|
|
332
|
+
businessNumberInvalid: string;
|
|
333
|
+
businessNumberIncomplete: string;
|
|
334
|
+
/** AmountInput — "금액", "원" */
|
|
335
|
+
amount: string;
|
|
336
|
+
currencyUnit: string;
|
|
337
|
+
/** AddressInput */
|
|
338
|
+
address: string;
|
|
339
|
+
addressSearch: string;
|
|
340
|
+
addressSearchDescription: string;
|
|
341
|
+
postalCode: string;
|
|
342
|
+
baseAddress: string;
|
|
343
|
+
baseAddressPlaceholder: string;
|
|
344
|
+
detailAddress: string;
|
|
345
|
+
detailAddressPlaceholder: string;
|
|
346
|
+
addressLoading: string;
|
|
347
|
+
addressLoadError: string;
|
|
348
|
+
/** Calendar */
|
|
349
|
+
previousMonth: string;
|
|
350
|
+
nextMonth: string;
|
|
351
|
+
/** 달 제목 — month 는 1~12 */
|
|
352
|
+
monthTitle: (year: number, month: number) => string;
|
|
353
|
+
/** 요일 머리글 (일요일부터 7개) */
|
|
354
|
+
weekdaysShort: readonly string[];
|
|
355
|
+
/** 요일 전체 이름 (일요일부터 7개) */
|
|
356
|
+
weekdaysLong: readonly string[];
|
|
357
|
+
/** 날짜 버튼 이름 — 화면에 보이는 날짜 숫자로 시작해야 한다 (WCAG 2.5.3) */
|
|
358
|
+
dayLabel: (date: Date, weekdayLong: string) => string;
|
|
359
|
+
holiday: string;
|
|
360
|
+
today: string;
|
|
361
|
+
/** DatePicker */
|
|
362
|
+
date: string;
|
|
363
|
+
openCalendar: string;
|
|
364
|
+
calendar: string;
|
|
365
|
+
dateInvalid: string;
|
|
366
|
+
dateUnavailable: string;
|
|
367
|
+
dateIncomplete: string;
|
|
368
|
+
}
|
|
369
|
+
type Messages = Partial<BestowMessages>;
|
|
370
|
+
interface LocaleProviderProps {
|
|
371
|
+
/** 바꿀 문구. 일부만 넘기면 나머지는 바깥 LocaleProvider 또는 한국어 기본값을 쓴다 */
|
|
372
|
+
messages: Messages;
|
|
373
|
+
children?: ReactNode;
|
|
374
|
+
}
|
|
375
|
+
/**
|
|
376
|
+
* 컴포넌트 기본 문구를 한곳에서 바꾼다 (다국어 대응 등). 중첩하면 바깥 값을 이어받고 안쪽이 우선한다.
|
|
377
|
+
* @example <LocaleProvider messages={en}>…</LocaleProvider>
|
|
378
|
+
* @example <LocaleProvider messages={{ close: '창 닫기' }}>…</LocaleProvider>
|
|
379
|
+
*/
|
|
380
|
+
declare function LocaleProvider({ messages, children }: LocaleProviderProps): react.JSX.Element;
|
|
381
|
+
/** LocaleProvider 로 바꾼 문구 (없으면 빈 객체 — 각 컴포넌트가 한국어 기본값을 쓴다) */
|
|
382
|
+
declare function useMessages(): Messages;
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* 영어 문구. `<LocaleProvider messages={en}>` 로 쓴다. 따로 import 할 때만 번들에 들어간다.
|
|
386
|
+
* 한국 서비스 전용 부품(사업자등록번호 등)의 문구도 영어로 바뀌지만 서식(하이픈 위치 등)은 그대로다.
|
|
387
|
+
*/
|
|
388
|
+
declare const en: BestowMessages;
|
|
389
|
+
|
|
288
390
|
/**
|
|
289
391
|
* `type="single"`: 한 번에 하나만 열린다 (`value: string`). `collapsible` 이면 열린 항목을 다시 눌러 닫을 수 있다.
|
|
290
392
|
* `type="multiple"`: 여러 개를 함께 열 수 있다 (`value: string[]`).
|
|
@@ -586,6 +688,36 @@ interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'col
|
|
|
586
688
|
}
|
|
587
689
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
588
690
|
|
|
691
|
+
interface CalendarProps {
|
|
692
|
+
/** 선택된 날짜 'YYYY-MM-DD' (제어 모드) */
|
|
693
|
+
value?: string;
|
|
694
|
+
/** 처음 선택된 날짜 (비제어 모드) */
|
|
695
|
+
defaultValue?: string;
|
|
696
|
+
/** 날짜를 고를 때 호출된다 */
|
|
697
|
+
onValueChange?: (value: string) => void;
|
|
698
|
+
/** 고를 수 있는 가장 이른 날짜 'YYYY-MM-DD' */
|
|
699
|
+
min?: string;
|
|
700
|
+
/** 고를 수 있는 가장 늦은 날짜 'YYYY-MM-DD' */
|
|
701
|
+
max?: string;
|
|
702
|
+
/** 고를 수 없는 날짜 (예: 주말 제외) */
|
|
703
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
704
|
+
/** 공휴일. 일요일처럼 빨갛게 표시하고 스크린리더에 "공휴일" 을 덧붙인다 */
|
|
705
|
+
isHoliday?: (date: Date) => boolean;
|
|
706
|
+
/** 오늘 날짜 'YYYY-MM-DD'. 기본은 실제 오늘 — 테스트·스크린샷에서 고정할 때 쓴다 */
|
|
707
|
+
today?: string;
|
|
708
|
+
/** 처음 그릴 때 날짜(선택된 날짜, 없으면 오늘)로 포커스를 옮긴다 — 팝업 안에서 쓸 때 */
|
|
709
|
+
initialFocus?: boolean;
|
|
710
|
+
/** 이전·다음 달 버튼 이름 */
|
|
711
|
+
prevMonthLabel?: string;
|
|
712
|
+
nextMonthLabel?: string;
|
|
713
|
+
className?: string;
|
|
714
|
+
}
|
|
715
|
+
/**
|
|
716
|
+
* 달력 (WAI-ARIA grid). 일요일부터 시작하고 일요일·공휴일은 빨강, 토요일은 파랑으로 표시한다.
|
|
717
|
+
* 키보드: ←→ 하루, ↑↓ 일주일, Home/End 주의 처음·끝, PageUp/PageDown 한 달(Shift 와 함께 1년), Enter/Space 선택.
|
|
718
|
+
*/
|
|
719
|
+
declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLDivElement>>;
|
|
720
|
+
|
|
589
721
|
interface CardProps extends HTMLAttributes<HTMLElement> {
|
|
590
722
|
/** 시각적 스타일. outline 은 테두리, elevated 는 그림자(다크 모드는 가장자리 ring 포함), soft 는 옅은 배경 */
|
|
591
723
|
variant?: 'outline' | 'elevated' | 'soft';
|
|
@@ -613,6 +745,8 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'siz
|
|
|
613
745
|
indeterminate?: boolean;
|
|
614
746
|
/** 에러 상태 */
|
|
615
747
|
invalid?: boolean;
|
|
748
|
+
/** 체크 상태가 바뀌면 호출된다 (Switch 와 같은 이름). 기본 `onChange` 도 그대로 쓸 수 있다 */
|
|
749
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
616
750
|
}
|
|
617
751
|
declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
618
752
|
|
|
@@ -661,6 +795,47 @@ interface ComboboxProps {
|
|
|
661
795
|
*/
|
|
662
796
|
declare const Combobox: react.ForwardRefExoticComponent<ComboboxProps & react.RefAttributes<HTMLInputElement>>;
|
|
663
797
|
|
|
798
|
+
interface DatePickerProps {
|
|
799
|
+
/** 날짜 'YYYY-MM-DD' (제어 모드). 비어 있으면 '' */
|
|
800
|
+
value?: string;
|
|
801
|
+
/** 처음 날짜 (비제어 모드) */
|
|
802
|
+
defaultValue?: string;
|
|
803
|
+
/** 올바른 날짜를 다 입력하거나 달력에서 고르면 'YYYY-MM-DD', 지우거나 잘못되면 '' 로 호출된다 */
|
|
804
|
+
onValueChange?: (value: string) => void;
|
|
805
|
+
/** 고를 수 있는 가장 이른·늦은 날짜 'YYYY-MM-DD' */
|
|
806
|
+
min?: string;
|
|
807
|
+
max?: string;
|
|
808
|
+
/** 고를 수 없는 날짜 */
|
|
809
|
+
isDateDisabled?: (date: Date) => boolean;
|
|
810
|
+
/** 공휴일 (달력에 빨갛게 표시) */
|
|
811
|
+
isHoliday?: (date: Date) => boolean;
|
|
812
|
+
/** 오늘 날짜 'YYYY-MM-DD' (테스트·스크린샷 고정용) */
|
|
813
|
+
today?: string;
|
|
814
|
+
label?: ReactNode;
|
|
815
|
+
/** 아래 도움말. error 일 때는 에러 메시지로 표시된다 */
|
|
816
|
+
helperText?: ReactNode;
|
|
817
|
+
error?: boolean;
|
|
818
|
+
required?: boolean;
|
|
819
|
+
disabled?: boolean;
|
|
820
|
+
fullWidth?: boolean;
|
|
821
|
+
placeholder?: string;
|
|
822
|
+
/** 달력 버튼·달력 창 이름 */
|
|
823
|
+
calendarLabel?: string;
|
|
824
|
+
/** 자동 검증 문구 */
|
|
825
|
+
invalidText?: string;
|
|
826
|
+
unavailableText?: string;
|
|
827
|
+
incompleteText?: string;
|
|
828
|
+
/** form 제출 시 이름 ('YYYY-MM-DD' 가 제출된다) */
|
|
829
|
+
name?: string;
|
|
830
|
+
id?: string;
|
|
831
|
+
className?: string;
|
|
832
|
+
}
|
|
833
|
+
/**
|
|
834
|
+
* 날짜 입력. `YYYY-MM-DD` 로 직접 입력하거나(숫자만 쳐도 하이픈이 들어간다) 달력 버튼으로 고른다.
|
|
835
|
+
* 달력은 일요일부터 시작하고, 열면 선택된 날짜(없으면 오늘)로 포커스가 간다. 값은 시간대 문제가 없는 'YYYY-MM-DD' 문자열이다.
|
|
836
|
+
*/
|
|
837
|
+
declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
|
|
838
|
+
|
|
664
839
|
interface DividerProps extends HTMLAttributes<HTMLDivElement> {
|
|
665
840
|
/** 방향. vertical 은 flex 행 안에서 부모 높이를 채운다 */
|
|
666
841
|
orientation?: 'horizontal' | 'vertical';
|
|
@@ -733,8 +908,11 @@ interface DropdownMenuItemProps extends Omit<ComponentPropsWithoutRef<typeof Rad
|
|
|
733
908
|
icon?: ReactNode;
|
|
734
909
|
/** 오른쪽에 표시할 단축키 (예: "⌘K"). 표시용이라 항목 이름에는 포함되지 않는다 */
|
|
735
910
|
shortcut?: string;
|
|
736
|
-
/**
|
|
737
|
-
|
|
911
|
+
/**
|
|
912
|
+
* danger 는 삭제처럼 되돌리기 어려운 동작.
|
|
913
|
+
* `default` 는 0.x 의 옛 이름으로 `neutral` 과 같다 — **deprecated, 1.0 에서 제거**.
|
|
914
|
+
*/
|
|
915
|
+
color?: 'neutral' | 'danger' | 'default';
|
|
738
916
|
}
|
|
739
917
|
declare const DropdownMenuItem: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
|
|
740
918
|
type DropdownMenuLabelProps = ComponentPropsWithoutRef<typeof RadixMenu.Label>;
|
|
@@ -891,8 +1069,10 @@ interface PopoverProps {
|
|
|
891
1069
|
className?: string;
|
|
892
1070
|
/** 팝오버 style (너비 지정 등) */
|
|
893
1071
|
style?: CSSProperties;
|
|
1072
|
+
/** 열릴 때 포커스 처리. 기본은 내용의 첫 요소로 간다 — `event.preventDefault()` 후 원하는 요소에 focus() 할 수 있다 */
|
|
1073
|
+
onOpenAutoFocus?: (event: Event) => void;
|
|
894
1074
|
}
|
|
895
|
-
declare function Popover({ content, children, title, 'aria-label': ariaLabel, showClose, showArrow, side, align, open, defaultOpen, onOpenChange, modal, className, style, }: PopoverProps): react.JSX.Element;
|
|
1075
|
+
declare function Popover({ content, children, title, 'aria-label': ariaLabel, showClose, showArrow, side, align, open, defaultOpen, onOpenChange, modal, className, style, onOpenAutoFocus, }: PopoverProps): react.JSX.Element;
|
|
896
1076
|
/**
|
|
897
1077
|
* 팝오버 내용 안에서 누르면 팝오버를 닫는 요소.
|
|
898
1078
|
* @example <PopoverClose asChild><Button>확인</Button></PopoverClose>
|
|
@@ -1056,8 +1236,11 @@ declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAtt
|
|
|
1056
1236
|
interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
|
|
1057
1237
|
/** 크기 (sm 16px, md 20px, lg 28px) */
|
|
1058
1238
|
size?: 'sm' | 'md' | 'lg';
|
|
1059
|
-
/**
|
|
1060
|
-
|
|
1239
|
+
/**
|
|
1240
|
+
* 색상. `inherit`(기본)는 부모 글자색을 그대로 쓴다.
|
|
1241
|
+
* `current` 는 0.x 의 옛 이름으로 `inherit` 와 같다 — **deprecated, 1.0 에서 제거**.
|
|
1242
|
+
*/
|
|
1243
|
+
color?: 'inherit' | 'primary' | 'neutral' | 'danger' | 'current';
|
|
1061
1244
|
/**
|
|
1062
1245
|
* 스크린리더가 읽을 텍스트 (기본 "로딩 중").
|
|
1063
1246
|
* 빈 문자열이면 장식용으로 보고 `aria-hidden` 처리한다 — 버튼처럼 바깥 요소가 이미 상태를 알릴 때 쓴다.
|
|
@@ -1137,10 +1320,10 @@ interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
|
|
|
1137
1320
|
selected?: boolean;
|
|
1138
1321
|
}
|
|
1139
1322
|
declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
|
|
1140
|
-
type
|
|
1323
|
+
type TableAlign = 'left' | 'center' | 'right';
|
|
1141
1324
|
interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
1142
1325
|
/** 정렬 */
|
|
1143
|
-
align?:
|
|
1326
|
+
align?: TableAlign;
|
|
1144
1327
|
/**
|
|
1145
1328
|
* 이 열의 정렬 상태. onSort 와 함께 주면 머리 셀이 정렬 버튼이 되고 `aria-sort` 를 붙인다.
|
|
1146
1329
|
* 정렬되지 않은 열은 'none'.
|
|
@@ -1152,7 +1335,7 @@ interface TableHeadProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'a
|
|
|
1152
1335
|
declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1153
1336
|
interface TableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {
|
|
1154
1337
|
/** 정렬 (숫자는 right 권장) */
|
|
1155
|
-
align?:
|
|
1338
|
+
align?: TableAlign;
|
|
1156
1339
|
}
|
|
1157
1340
|
declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
|
|
1158
1341
|
|
|
@@ -1208,12 +1391,17 @@ interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>
|
|
|
1208
1391
|
}
|
|
1209
1392
|
declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
1210
1393
|
|
|
1394
|
+
type ToastColor = 'primary' | 'neutral' | 'danger' | 'success' | 'warning';
|
|
1211
1395
|
interface ToastOptions {
|
|
1212
1396
|
/** 제목 */
|
|
1213
1397
|
title: ReactNode;
|
|
1214
1398
|
/** 설명 */
|
|
1215
1399
|
description?: ReactNode;
|
|
1216
|
-
/** 의미 색상 */
|
|
1400
|
+
/** 의미 색상 (기본 neutral) — Alert·Badge 의 `color` 와 같은 이름 */
|
|
1401
|
+
color?: ToastColor;
|
|
1402
|
+
/**
|
|
1403
|
+
* @deprecated `color` 를 쓰세요 (`'default'` → `'neutral'`). 1.0 에서 제거.
|
|
1404
|
+
*/
|
|
1217
1405
|
variant?: 'default' | 'success' | 'warning' | 'danger';
|
|
1218
1406
|
/** 자동으로 닫히기까지 시간(ms). Infinity 면 자동으로 닫히지 않는다 */
|
|
1219
1407
|
duration?: number;
|
|
@@ -1239,7 +1427,7 @@ interface ToastProviderProps {
|
|
|
1239
1427
|
label?: string;
|
|
1240
1428
|
}
|
|
1241
1429
|
/** 앱 최상단(ThemeProvider 안쪽)에 한 번 감싸고, 하위에서 useToast() 로 토스트를 띄운다. */
|
|
1242
|
-
declare function ToastProvider({ children, duration, label }: ToastProviderProps): react.JSX.Element;
|
|
1430
|
+
declare function ToastProvider({ children, duration, label: labelProp }: ToastProviderProps): react.JSX.Element;
|
|
1243
1431
|
declare function useToast(): ToastContextValue;
|
|
1244
1432
|
|
|
1245
1433
|
interface TooltipProps {
|
|
@@ -1347,4 +1535,14 @@ declare function isValidBusinessNumber(input: string): boolean;
|
|
|
1347
1535
|
*/
|
|
1348
1536
|
declare function formatKoreanAmount(amount: number, unit?: string): string;
|
|
1349
1537
|
|
|
1350
|
-
|
|
1538
|
+
/** Date → 'YYYY-MM-DD' (로컬 기준) */
|
|
1539
|
+
declare function toISODate(date: Date): string;
|
|
1540
|
+
/** 'YYYY-MM-DD' → Date (로컬 자정). 형식이 틀리거나 없는 날짜(2월 30일 등)면 null */
|
|
1541
|
+
declare function parseISODate(value: string | null | undefined): Date | null;
|
|
1542
|
+
/**
|
|
1543
|
+
* 한국어 날짜. 스크린리더용 날짜 이름 등에 쓴다.
|
|
1544
|
+
* @example formatKoreanDate(new Date(2026, 9, 15)) // '2026년 10월 15일 목요일'
|
|
1545
|
+
*/
|
|
1546
|
+
declare function formatKoreanDate(date: Date, withWeekday?: boolean): string;
|
|
1547
|
+
|
|
1548
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, AddressInput, type AddressInputProps, type AddressProvider, type AddressSearchResult, type AddressValue, AgreementGroup, type AgreementGroupProps, type AgreementItem, Alert, type AlertColor, type AlertProps, AmountInput, type AmountInputProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BestowMessages, type BestowTheme, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, BusinessNumberInput, type BusinessNumberInputProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, CardBody, CardFooter, CardHeader, type CardProps, type CardSectionProps, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, DatePicker, type DatePickerProps, type DeepPartial, Divider, type DividerProps, Drawer, DrawerClose, type DrawerProps, DropdownMenu, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, IconButton, type IconButtonProps, Input, type InputProps, type IntentName, Link, type LinkProps, LocaleProvider, type LocaleProviderProps, type Messages, Modal, ModalClose, type ModalProps, Pagination, type PaginationProps, PhoneNumberInput, type PhoneNumberInputProps, Popover, PopoverClose, type PopoverProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Table, type TableAlign, TableBody, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TextField, type TextFieldProps, Textarea, type TextareaProps, type ThemeInput, type ThemeName, type ThemeOverrides, ThemeProvider, type ThemeProviderProps, type ThemeTokens, type ToastColor, type ToastContextValue, type ToastOptions, ToastProvider, type ToastProviderProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type TypographyVariant, VerificationCodeInput, type VerificationCodeInputProps, composeExtraAddress, contrastRatio, createIntentColors, createTheme, en, formatBusinessNumber, formatKoreanAmount, formatKoreanDate, formatPhoneNumber, hasAllRequiredAgreements, isValidBusinessNumber, kakaoPostcodeProvider, parseISODate, themeClass, toISODate, useMessages, usePortalClassName, usePortalProps, useTheme, useToast, vars };
|