@bigtablet/design-system 3.2.1 → 3.3.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/dist/index.css +102 -11
- package/dist/index.d.ts +132 -77
- package/dist/index.js +359 -168
- package/dist/styles/colors/_index.scss +5 -0
- package/package.json +19 -15
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
2
|
import * as _react_spring_web from '@react-spring/web';
|
|
3
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
3
|
import { LucideProps, LucideIcon } from 'lucide-react';
|
|
5
4
|
export { LucideIcon, LucideProps } from 'lucide-react';
|
|
6
5
|
|
|
@@ -37,6 +36,21 @@ declare const cn: (...classes: ClassValue[]) => string;
|
|
|
37
36
|
|
|
38
37
|
declare function useFocusTrap(containerRef: React$1.RefObject<HTMLElement | null>, isActive: boolean): void;
|
|
39
38
|
|
|
39
|
+
/**
|
|
40
|
+
* 사용자가 OS 수준에서 "동작 줄이기"를 켰는지 반환한다 (WCAG 2.3.3).
|
|
41
|
+
* spring 훅이나 JS 애니메이션에서 모션을 끌 때 사용. SSR에서는 false.
|
|
42
|
+
*
|
|
43
|
+
* React 표준 `useSyncExternalStore` 로 matchMedia 를 구독한다 - 불필요한
|
|
44
|
+
* 마운트 리렌더 없이 hydration-safe 하게 동작.
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* ```tsx
|
|
48
|
+
* const reduced = useReducedMotion();
|
|
49
|
+
* const style = useSpring({ ..., immediate: reduced });
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
declare function useReducedMotion(): boolean;
|
|
53
|
+
|
|
40
54
|
/**
|
|
41
55
|
* 마우스 hover 시 spring 기반 lift 효과를 만든다. 카드/CTA 강조에 사용.
|
|
42
56
|
*
|
|
@@ -100,7 +114,9 @@ interface AccordionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "o
|
|
|
100
114
|
defaultOpenKeys?: string[];
|
|
101
115
|
/** 제어형: 펼쳐진 키들 */
|
|
102
116
|
openKeys?: string[];
|
|
103
|
-
/** 펼침/접힘 콜백 */
|
|
117
|
+
/** 펼침/접힘 콜백 (canonical). 열린 키 배열 전달 */
|
|
118
|
+
onValueChange?: (openKeys: string[]) => void;
|
|
119
|
+
/** @deprecated `onValueChange` 를 사용하세요. */
|
|
104
120
|
onChange?: (openKeys: string[]) => void;
|
|
105
121
|
}
|
|
106
122
|
/**
|
|
@@ -111,7 +127,7 @@ interface AccordionProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "o
|
|
|
111
127
|
* <Accordion items={faqItems} multiple />
|
|
112
128
|
* ```
|
|
113
129
|
*/
|
|
114
|
-
declare const Accordion: ({ items, multiple, defaultOpenKeys, openKeys: controlledKeys, onChange, className, ...props }: AccordionProps) =>
|
|
130
|
+
declare const Accordion: ({ items, multiple, defaultOpenKeys, openKeys: controlledKeys, onValueChange, onChange, className, ...props }: AccordionProps) => React$1.JSX.Element;
|
|
115
131
|
|
|
116
132
|
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
117
133
|
type AvatarShape = "circle" | "square";
|
|
@@ -137,7 +153,7 @@ interface AvatarProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
|
137
153
|
* <Avatar name="Sangmin Park" size="lg" /> // initials "SP"
|
|
138
154
|
* ```
|
|
139
155
|
*/
|
|
140
|
-
declare const Avatar: ({ src, name, size, shape, bgColor, className, style, ...props }: AvatarProps) =>
|
|
156
|
+
declare const Avatar: ({ src, name, size, shape, bgColor, className, style, ...props }: AvatarProps) => React$1.JSX.Element;
|
|
141
157
|
|
|
142
158
|
type BadgeVariant = "accent" | "neutral" | "info" | "success" | "warning" | "error";
|
|
143
159
|
type BadgeShape = "dot" | "count" | "label";
|
|
@@ -177,7 +193,7 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
|
177
193
|
* <Badge variant="success" appearance="soft">+5%</Badge>
|
|
178
194
|
* ```
|
|
179
195
|
*/
|
|
180
|
-
declare const Badge: ({ variant, shape, size, appearance, count, max, className, children, ...props }: BadgeProps) =>
|
|
196
|
+
declare const Badge: ({ variant, shape, size, appearance, count, max, className, children, ...props }: BadgeProps) => React$1.JSX.Element;
|
|
181
197
|
|
|
182
198
|
interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
|
|
183
199
|
/** 스크린 리더 레이블 (기본 "주요 메뉴") */
|
|
@@ -202,7 +218,7 @@ interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onCh
|
|
|
202
218
|
* <BottomNavSpacer />
|
|
203
219
|
* ```
|
|
204
220
|
*/
|
|
205
|
-
declare const BottomNav: ({ ariaLabel, className, children, ...props }: BottomNavProps) =>
|
|
221
|
+
declare const BottomNav: ({ ariaLabel, className, children, ...props }: BottomNavProps) => React$1.JSX.Element;
|
|
206
222
|
interface BottomNavItemCommon {
|
|
207
223
|
/** 아이콘 (필수) */
|
|
208
224
|
icon: React$1.ReactNode;
|
|
@@ -228,12 +244,12 @@ type BottomNavItemProps = BottomNavItemButton | BottomNavItemAnchor;
|
|
|
228
244
|
* `BottomNav` 의 항목. icon + label 수직 스택.
|
|
229
245
|
* active 시 `aria-current="page"` 자동 부여.
|
|
230
246
|
*/
|
|
231
|
-
declare const BottomNavItem: (props: BottomNavItemProps) =>
|
|
247
|
+
declare const BottomNavItem: (props: BottomNavItemProps) => React$1.JSX.Element;
|
|
232
248
|
/**
|
|
233
249
|
* 페이지 본문 끝에 두면 `BottomNav` 가 콘텐츠를 가리지 않게 빈 공간 확보.
|
|
234
250
|
* `--bt-bottom-nav-height` (+ safe-area) 만큼 height.
|
|
235
251
|
*/
|
|
236
|
-
declare const BottomNavSpacer: ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>) =>
|
|
252
|
+
declare const BottomNavSpacer: ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>) => React$1.JSX.Element;
|
|
237
253
|
|
|
238
254
|
interface BreadcrumbItem {
|
|
239
255
|
/** 표시 텍스트 */
|
|
@@ -261,7 +277,7 @@ interface BreadcrumbProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
261
277
|
* ]} />
|
|
262
278
|
* ```
|
|
263
279
|
*/
|
|
264
|
-
declare const Breadcrumb: ({ items, separator, className, ...props }: BreadcrumbProps) =>
|
|
280
|
+
declare const Breadcrumb: ({ items, separator, className, ...props }: BreadcrumbProps) => React$1.JSX.Element;
|
|
265
281
|
|
|
266
282
|
interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
267
283
|
/** 일러스트 영역 (아이콘/이미지 등) */
|
|
@@ -288,7 +304,7 @@ interface EmptyStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
|
288
304
|
* />
|
|
289
305
|
* ```
|
|
290
306
|
*/
|
|
291
|
-
declare const EmptyState: ({ illustration, title, description, action, size, className, ...props }: EmptyStateProps) =>
|
|
307
|
+
declare const EmptyState: ({ illustration, title, description, action, size, className, ...props }: EmptyStateProps) => React$1.JSX.Element;
|
|
292
308
|
|
|
293
309
|
type ErrorStateVariant = "page" | "widget";
|
|
294
310
|
interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
@@ -324,7 +340,7 @@ interface ErrorStateProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
|
324
340
|
* <ErrorState variant="widget" title="불러오기 실패" action={<Button size="sm" onClick={retry}>재시도</Button>} />
|
|
325
341
|
* ```
|
|
326
342
|
*/
|
|
327
|
-
declare const ErrorState: ({ title, description, icon, action, variant, className, ...props }: ErrorStateProps) =>
|
|
343
|
+
declare const ErrorState: ({ title, description, icon, action, variant, className, ...props }: ErrorStateProps) => React$1.JSX.Element;
|
|
328
344
|
|
|
329
345
|
interface MenuItem {
|
|
330
346
|
key: string;
|
|
@@ -359,7 +375,7 @@ interface MenuProps {
|
|
|
359
375
|
* />
|
|
360
376
|
* ```
|
|
361
377
|
*/
|
|
362
|
-
declare const Menu: ({ items, trigger, align }: MenuProps) =>
|
|
378
|
+
declare const Menu: ({ items, trigger, align }: MenuProps) => React$1.JSX.Element;
|
|
363
379
|
|
|
364
380
|
type NavBarVariant = "default" | "transparent" | "accent";
|
|
365
381
|
type NavBarLayout = "contained" | "fluid";
|
|
@@ -372,8 +388,10 @@ interface NavBarLocaleConfig {
|
|
|
372
388
|
current: string;
|
|
373
389
|
/** 가능한 옵션 */
|
|
374
390
|
options: NavBarLocaleOption[];
|
|
375
|
-
/** locale 변경 콜백 */
|
|
376
|
-
|
|
391
|
+
/** locale 변경 콜백 (canonical) */
|
|
392
|
+
onValueChange?: (next: string) => void;
|
|
393
|
+
/** @deprecated `onValueChange` 를 사용하세요. */
|
|
394
|
+
onChange?: (next: string) => void;
|
|
377
395
|
/** 표시 라벨 - 기본은 옵션의 label, 미지정 시 short code 표시 */
|
|
378
396
|
hideLabel?: boolean;
|
|
379
397
|
}
|
|
@@ -419,12 +437,12 @@ interface NavBarProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
419
437
|
* />
|
|
420
438
|
* ```
|
|
421
439
|
*/
|
|
422
|
-
declare const NavBar: ({ brand, searchSlot, actions, locale, profile, divider, variant, layout, sticky, className, children, ...props }: NavBarProps) =>
|
|
440
|
+
declare const NavBar: ({ brand, searchSlot, actions, locale, profile, divider, variant, layout, sticky, className, children, ...props }: NavBarProps) => React$1.JSX.Element;
|
|
423
441
|
interface NavLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
424
442
|
/** 현재 활성 페이지 여부 */
|
|
425
443
|
active?: boolean;
|
|
426
444
|
}
|
|
427
|
-
declare const NavLink: ({ active, className, children, ...props }: NavLinkProps) =>
|
|
445
|
+
declare const NavLink: ({ active, className, children, ...props }: NavLinkProps) => React$1.JSX.Element;
|
|
428
446
|
|
|
429
447
|
type SidebarMode = "auto" | "static";
|
|
430
448
|
interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
|
|
@@ -470,7 +488,7 @@ interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChan
|
|
|
470
488
|
* </Sidebar>
|
|
471
489
|
* ```
|
|
472
490
|
*/
|
|
473
|
-
declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel, width, collapsedWidth, mode, className, children, style, ...props }: SidebarProps) =>
|
|
491
|
+
declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel, width, collapsedWidth, mode, className, children, style, ...props }: SidebarProps) => React$1.JSX.Element;
|
|
474
492
|
interface SidebarItemCommon {
|
|
475
493
|
/** 왼쪽 아이콘 */
|
|
476
494
|
icon?: React$1.ReactNode;
|
|
@@ -488,13 +506,13 @@ type SidebarItemAnchor = SidebarItemCommon & {
|
|
|
488
506
|
href: string;
|
|
489
507
|
} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "type">;
|
|
490
508
|
type SidebarItemProps = SidebarItemButton | SidebarItemAnchor;
|
|
491
|
-
declare const SidebarItem: (props: SidebarItemProps) =>
|
|
509
|
+
declare const SidebarItem: (props: SidebarItemProps) => React$1.JSX.Element;
|
|
492
510
|
interface SidebarSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
493
511
|
/** 섹션 라벨 (collapsed 상태에선 hidden) */
|
|
494
512
|
label?: string;
|
|
495
513
|
}
|
|
496
514
|
/** SidebarItem 그룹 라벨. collapsed에선 sr-only로 숨김. */
|
|
497
|
-
declare const SidebarSection: ({ label, className, children, ...props }: SidebarSectionProps) =>
|
|
515
|
+
declare const SidebarSection: ({ label, className, children, ...props }: SidebarSectionProps) => React$1.JSX.Element;
|
|
498
516
|
|
|
499
517
|
type TabsVariant = "line" | "fills";
|
|
500
518
|
type TabsSize = "sm" | "md";
|
|
@@ -516,24 +534,24 @@ interface TabsProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onChan
|
|
|
516
534
|
* - 제어형: `value` + `onValueChange`
|
|
517
535
|
* - 비제어형: `defaultValue`
|
|
518
536
|
*/
|
|
519
|
-
declare const Tabs: ({ value: controlledValue, defaultValue, onValueChange, variant, size, className, children, ...props }: TabsProps) =>
|
|
537
|
+
declare const Tabs: ({ value: controlledValue, defaultValue, onValueChange, variant, size, className, children, ...props }: TabsProps) => React$1.JSX.Element;
|
|
520
538
|
interface TabListProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
521
539
|
/** 스크린리더 라벨 */
|
|
522
540
|
ariaLabel?: string;
|
|
523
541
|
}
|
|
524
|
-
declare const TabList: ({ ariaLabel, className, children, ...props }: TabListProps) =>
|
|
542
|
+
declare const TabList: ({ ariaLabel, className, children, ...props }: TabListProps) => React$1.JSX.Element;
|
|
525
543
|
interface TabProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
|
|
526
544
|
/** 이 tab의 value */
|
|
527
545
|
value: string;
|
|
528
546
|
}
|
|
529
|
-
declare const Tab: ({ value, className, children, onClick, ...props }: TabProps) =>
|
|
547
|
+
declare const Tab: ({ value, className, children, onClick, ...props }: TabProps) => React$1.JSX.Element;
|
|
530
548
|
interface TabPanelProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
531
549
|
/** 이 panel을 활성화할 tab의 value */
|
|
532
550
|
value: string;
|
|
533
551
|
/** 비활성 panel을 unmount 할지 (기본 true). false면 display: none으로 유지 */
|
|
534
552
|
unmountInactive?: boolean;
|
|
535
553
|
}
|
|
536
|
-
declare const TabPanel: ({ value, unmountInactive, className, children, ...props }: TabPanelProps) =>
|
|
554
|
+
declare const TabPanel: ({ value, unmountInactive, className, children, ...props }: TabPanelProps) => React$1.JSX.Element | null;
|
|
537
555
|
|
|
538
556
|
type PopoverPlacement = "top" | "bottom" | "left" | "right";
|
|
539
557
|
interface PopoverProps {
|
|
@@ -576,7 +594,7 @@ interface PopoverProps {
|
|
|
576
594
|
* ```
|
|
577
595
|
*/
|
|
578
596
|
declare const Popover: {
|
|
579
|
-
({ trigger, content, placement, open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }: PopoverProps):
|
|
597
|
+
({ trigger, content, placement, open: openProp, defaultOpen, onOpenChange, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, }: PopoverProps): React$1.JSX.Element;
|
|
580
598
|
displayName: string;
|
|
581
599
|
};
|
|
582
600
|
|
|
@@ -602,7 +620,7 @@ interface TooltipProps {
|
|
|
602
620
|
* </Tooltip>
|
|
603
621
|
* ```
|
|
604
622
|
*/
|
|
605
|
-
declare const Tooltip: ({ content, placement, delay, disabled, children, }: TooltipProps) =>
|
|
623
|
+
declare const Tooltip: ({ content, placement, delay, disabled, children, }: TooltipProps) => React$1.JSX.Element;
|
|
606
624
|
|
|
607
625
|
declare const a11y: {
|
|
608
626
|
readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
|
|
@@ -652,10 +670,11 @@ declare const baseColors: {
|
|
|
652
670
|
readonly neutral900: "#121212";
|
|
653
671
|
readonly neutral925: "#141414";
|
|
654
672
|
readonly neutral950: "#0A0A0A";
|
|
655
|
-
readonly
|
|
656
|
-
readonly
|
|
657
|
-
readonly
|
|
658
|
-
readonly
|
|
673
|
+
readonly textCaptionLight: "#6F6F6F";
|
|
674
|
+
readonly statusError: "#B91C1C";
|
|
675
|
+
readonly statusSuccess: "#047857";
|
|
676
|
+
readonly statusWarning: "#B45309";
|
|
677
|
+
readonly statusInfo: "#1D4ED8";
|
|
659
678
|
readonly alphaBlack5: "rgba(0, 0, 0, 0.05)";
|
|
660
679
|
readonly alphaBlack8: "rgba(0, 0, 0, 0.08)";
|
|
661
680
|
readonly alphaBlack12: "rgba(26, 26, 26, 0.12)";
|
|
@@ -673,7 +692,7 @@ declare const colors: {
|
|
|
673
692
|
readonly text: {
|
|
674
693
|
readonly heading: "#121212";
|
|
675
694
|
readonly body: "#666666";
|
|
676
|
-
readonly caption: "#
|
|
695
|
+
readonly caption: "#6F6F6F";
|
|
677
696
|
readonly brand: "#121212";
|
|
678
697
|
readonly inverse: "#FFFFFF";
|
|
679
698
|
readonly disabled: "rgba(26, 26, 26, 0.38)";
|
|
@@ -700,10 +719,10 @@ declare const colors: {
|
|
|
700
719
|
readonly disabled: "#F2F2F2";
|
|
701
720
|
};
|
|
702
721
|
readonly status: {
|
|
703
|
-
readonly error: "#
|
|
704
|
-
readonly success: "#
|
|
705
|
-
readonly warning: "#
|
|
706
|
-
readonly info: "#
|
|
722
|
+
readonly error: "#B91C1C";
|
|
723
|
+
readonly success: "#047857";
|
|
724
|
+
readonly warning: "#B45309";
|
|
725
|
+
readonly info: "#1D4ED8";
|
|
707
726
|
};
|
|
708
727
|
readonly accent: {
|
|
709
728
|
readonly subtle: "rgba(0, 0, 0, 0.05)";
|
|
@@ -1121,6 +1140,8 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
1121
1140
|
* filled: 빨간 bg, outline: 빨간 텍스트/border, tonal: 빨간 wash.
|
|
1122
1141
|
*/
|
|
1123
1142
|
danger?: boolean;
|
|
1143
|
+
/** 루트 button 요소 ref (React 19 ref-as-prop) */
|
|
1144
|
+
ref?: React$1.Ref<HTMLButtonElement>;
|
|
1124
1145
|
}
|
|
1125
1146
|
/**
|
|
1126
1147
|
* 버튼을 렌더링한다.
|
|
@@ -1128,7 +1149,7 @@ interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
1128
1149
|
* @param props 버튼 속성
|
|
1129
1150
|
* @returns 렌더링된 버튼 요소
|
|
1130
1151
|
*/
|
|
1131
|
-
declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, danger, className, children, ...props }: ButtonProps) =>
|
|
1152
|
+
declare const Button: ({ variant, size, leadingIcon, trailingIcon, fullWidth, radius, danger, type, ref, className, children, ...props }: ButtonProps) => React$1.JSX.Element;
|
|
1132
1153
|
|
|
1133
1154
|
type CardVariant = "default" | "accent" | "glass" | "outlined";
|
|
1134
1155
|
type CardFooterAlign = "start" | "between" | "end";
|
|
@@ -1156,6 +1177,8 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
1156
1177
|
footer?: React$1.ReactNode;
|
|
1157
1178
|
/** footer 정렬 (기본값: "end") */
|
|
1158
1179
|
footerAlign?: CardFooterAlign;
|
|
1180
|
+
/** 루트 div 요소 ref (React 19 ref-as-prop) */
|
|
1181
|
+
ref?: React$1.Ref<HTMLDivElement>;
|
|
1159
1182
|
}
|
|
1160
1183
|
/**
|
|
1161
1184
|
* 카드 컴포넌트를 렌더링한다.
|
|
@@ -1163,7 +1186,7 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
1163
1186
|
* @param props 카드 속성
|
|
1164
1187
|
* @returns 렌더링된 카드 UI
|
|
1165
1188
|
*/
|
|
1166
|
-
declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, variant, interactive, footer, footerAlign, className, children, ...props }: CardProps) =>
|
|
1189
|
+
declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, variant, interactive, footer, footerAlign, ref, className, children, ...props }: CardProps) => React$1.JSX.Element;
|
|
1167
1190
|
|
|
1168
1191
|
interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
1169
1192
|
/** 체크박스 옆에 표시할 라벨 */
|
|
@@ -1182,7 +1205,7 @@ interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElemen
|
|
|
1182
1205
|
* @returns 렌더링된 체크박스 UI
|
|
1183
1206
|
*/
|
|
1184
1207
|
declare const Checkbox: {
|
|
1185
|
-
({ label, indeterminate, error, className, ref, ...props }: CheckboxProps):
|
|
1208
|
+
({ label, indeterminate, error, className, ref, ...props }: CheckboxProps): React$1.JSX.Element;
|
|
1186
1209
|
displayName: string;
|
|
1187
1210
|
};
|
|
1188
1211
|
|
|
@@ -1213,17 +1236,15 @@ interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClic
|
|
|
1213
1236
|
/** 삭제 버튼 클릭 시 콜백 */
|
|
1214
1237
|
onRemove?: () => void;
|
|
1215
1238
|
}
|
|
1216
|
-
declare const Chip: ({ type, size, tone, label, selected, removable, disabled, open, leadingIcon, onClick, onRemove, className, ...props }: ChipProps) =>
|
|
1239
|
+
declare const Chip: ({ type, size, tone, label, selected, removable, disabled, open, leadingIcon, onClick, onRemove, className, ...props }: ChipProps) => React$1.JSX.Element;
|
|
1217
1240
|
|
|
1218
1241
|
type DatePickerMode = "year-month" | "year-month-day";
|
|
1219
1242
|
type SelectableRange = "all" | "until-today";
|
|
1220
|
-
interface
|
|
1243
|
+
interface DatePickerBaseProps {
|
|
1221
1244
|
/** 데이트 피커 위에 표시할 라벨 텍스트 */
|
|
1222
1245
|
label?: string;
|
|
1223
1246
|
/** 제어형 날짜 값 ("YYYY-MM" 또는 "YYYY-MM-DD" 형식) */
|
|
1224
1247
|
value?: string;
|
|
1225
|
-
/** 날짜 변경 시 호출되는 콜백. `mode` 값에 따라 "YYYY-MM" 또는 "YYYY-MM-DD" 형식의 문자열이 전달됩니다. */
|
|
1226
|
-
onChange: (value: string) => void;
|
|
1227
1248
|
/** 선택 모드 (기본값: "year-month-day") */
|
|
1228
1249
|
mode?: DatePickerMode;
|
|
1229
1250
|
/** 연도 선택 범위 시작 (기본값: 1950) */
|
|
@@ -1260,11 +1281,19 @@ interface DatePickerProps {
|
|
|
1260
1281
|
*/
|
|
1261
1282
|
selectableRangeUntilTodaySrText?: string;
|
|
1262
1283
|
}
|
|
1284
|
+
type DatePickerCallbacks = {
|
|
1285
|
+
onValueChange: (value: string) => void;
|
|
1286
|
+
onChange?: (value: string) => void;
|
|
1287
|
+
} | {
|
|
1288
|
+
onValueChange?: (value: string) => void;
|
|
1289
|
+
onChange: (value: string) => void;
|
|
1290
|
+
};
|
|
1291
|
+
type DatePickerProps = DatePickerBaseProps & DatePickerCallbacks;
|
|
1263
1292
|
/**
|
|
1264
1293
|
* 연/월/일 선택형 데이트 피커를 렌더링한다.
|
|
1265
1294
|
* 내부적으로 DS Dropdown 3개를 조합해 드롭다운 UX 일관성을 유지한다.
|
|
1266
1295
|
*/
|
|
1267
|
-
declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) =>
|
|
1296
|
+
declare const DatePicker: ({ label, value, onValueChange, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => React$1.JSX.Element;
|
|
1268
1297
|
|
|
1269
1298
|
interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
|
|
1270
1299
|
/** 구분선 두께 (기본값: "standard") */
|
|
@@ -1276,7 +1305,7 @@ interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
|
|
|
1276
1305
|
* @param props 구분선 속성
|
|
1277
1306
|
* @returns 렌더링된 구분선 UI
|
|
1278
1307
|
*/
|
|
1279
|
-
declare const Divider: ({ weight, className, ...props }: DividerProps) =>
|
|
1308
|
+
declare const Divider: ({ weight, className, ...props }: DividerProps) => React$1.JSX.Element;
|
|
1280
1309
|
|
|
1281
1310
|
type DropdownSize = "sm" | "md" | "lg";
|
|
1282
1311
|
interface DropdownOption {
|
|
@@ -1303,7 +1332,9 @@ interface DropdownProps {
|
|
|
1303
1332
|
options: DropdownOption[];
|
|
1304
1333
|
/** 제어형 선택 값 */
|
|
1305
1334
|
value?: string | null;
|
|
1306
|
-
/** 값 변경
|
|
1335
|
+
/** 값 변경 콜백 (canonical). 선택된 값과 전체 옵션 객체를 전달합니다. */
|
|
1336
|
+
onValueChange?: (value: string | null, option?: DropdownOption | null) => void;
|
|
1337
|
+
/** @deprecated `onValueChange` 를 사용하세요. */
|
|
1307
1338
|
onChange?: (value: string | null, option?: DropdownOption | null) => void;
|
|
1308
1339
|
/** 비제어형 초기 선택 값 */
|
|
1309
1340
|
defaultValue?: string | null;
|
|
@@ -1332,7 +1363,7 @@ interface DropdownProps {
|
|
|
1332
1363
|
* @param props 드롭다운 속성
|
|
1333
1364
|
* @returns 렌더링된 드롭다운 UI
|
|
1334
1365
|
*/
|
|
1335
|
-
declare const Dropdown: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, className, }: DropdownProps) =>
|
|
1366
|
+
declare const Dropdown: ({ id, label, placeholder, options, value, onValueChange, onChange, defaultValue, disabled, size, className, }: DropdownProps) => React$1.JSX.Element;
|
|
1336
1367
|
|
|
1337
1368
|
type FileInputVariant = "button" | "preview";
|
|
1338
1369
|
interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
@@ -1359,7 +1390,7 @@ interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
|
1359
1390
|
* @param props 파일 입력 속성
|
|
1360
1391
|
* @returns 렌더링된 파일 입력 UI
|
|
1361
1392
|
*/
|
|
1362
|
-
declare const FileInput: ({ label, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) =>
|
|
1393
|
+
declare const FileInput: ({ label, onFiles, supportingText, preview, variant, previewSize, className, disabled, accept, onChange, ...props }: FileInputProps) => React$1.JSX.Element;
|
|
1363
1394
|
|
|
1364
1395
|
interface HeroAction {
|
|
1365
1396
|
/** 버튼 라벨 */
|
|
@@ -1408,7 +1439,7 @@ interface HeroProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "title"> {
|
|
|
1408
1439
|
* @param props 히어로 속성
|
|
1409
1440
|
* @returns 히어로 섹션
|
|
1410
1441
|
*/
|
|
1411
|
-
declare const Hero: ({ height, align, backgroundImage, backgroundColor, overlay, title, subtitle, eyebrow, textColor, primaryAction, secondaryAction, children, className, style, ...props }: HeroProps) =>
|
|
1442
|
+
declare const Hero: ({ height, align, backgroundImage, backgroundColor, overlay, title, subtitle, eyebrow, textColor, primaryAction, secondaryAction, children, className, style, ...props }: HeroProps) => React$1.JSX.Element;
|
|
1412
1443
|
|
|
1413
1444
|
interface IconProps extends Omit<LucideProps, "ref"> {
|
|
1414
1445
|
/** lucide-react 아이콘 컴포넌트 */
|
|
@@ -1430,7 +1461,7 @@ interface IconProps extends Omit<LucideProps, "ref"> {
|
|
|
1430
1461
|
* lucide-react 아이콘 전체 카탈로그: https://lucide.dev/icons/
|
|
1431
1462
|
*/
|
|
1432
1463
|
declare const Icon: {
|
|
1433
|
-
({ icon: IconComponent, ...props }: IconProps):
|
|
1464
|
+
({ icon: IconComponent, ...props }: IconProps): React$1.JSX.Element;
|
|
1434
1465
|
displayName: string;
|
|
1435
1466
|
};
|
|
1436
1467
|
|
|
@@ -1443,6 +1474,8 @@ interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement
|
|
|
1443
1474
|
size?: IconButtonSize;
|
|
1444
1475
|
/** 표시할 아이콘 */
|
|
1445
1476
|
icon: React$1.ReactNode;
|
|
1477
|
+
/** 루트 button 요소 ref (React 19 ref-as-prop) */
|
|
1478
|
+
ref?: React$1.Ref<HTMLButtonElement>;
|
|
1446
1479
|
}
|
|
1447
1480
|
/**
|
|
1448
1481
|
* 아이콘만 표시하는 버튼을 렌더링한다.
|
|
@@ -1450,7 +1483,7 @@ interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement
|
|
|
1450
1483
|
* @param props 아이콘 버튼 속성
|
|
1451
1484
|
* @returns 렌더링된 아이콘 버튼 요소
|
|
1452
1485
|
*/
|
|
1453
|
-
declare const IconButton: ({ variant, size, icon, className, ...props }: IconButtonProps) =>
|
|
1486
|
+
declare const IconButton: ({ variant, size, icon, type, ref, className, ...props }: IconButtonProps) => React$1.JSX.Element;
|
|
1454
1487
|
|
|
1455
1488
|
interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1456
1489
|
/** 전체 단계 수 */
|
|
@@ -1466,7 +1499,7 @@ interface LinearProgressProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
1466
1499
|
* @param props 진행 표시기 속성
|
|
1467
1500
|
* @returns 렌더링된 진행 표시기 요소
|
|
1468
1501
|
*/
|
|
1469
|
-
declare const LinearProgress: ({ totalSteps, currentStep, className, ...props }: LinearProgressProps) =>
|
|
1502
|
+
declare const LinearProgress: ({ totalSteps, currentStep, className, ...props }: LinearProgressProps) => React$1.JSX.Element;
|
|
1470
1503
|
|
|
1471
1504
|
interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick"> {
|
|
1472
1505
|
/** 오버라인 (상단 작은 글씨). 문자열 또는 노드(강조/링크/아이콘) */
|
|
@@ -1496,7 +1529,7 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
|
|
|
1496
1529
|
* @param props 리스트 아이템 속성
|
|
1497
1530
|
* @returns 렌더링된 리스트 아이템 UI
|
|
1498
1531
|
*/
|
|
1499
|
-
declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, selected, onClick, className, ...props }: ListItemProps) =>
|
|
1532
|
+
declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, selected, onClick, className, ...props }: ListItemProps) => React$1.JSX.Element;
|
|
1500
1533
|
|
|
1501
1534
|
type MediaCardImagePosition = "top" | "left" | "overlay";
|
|
1502
1535
|
type MediaCardShadow = "none" | "sm" | "md" | "lg";
|
|
@@ -1532,7 +1565,7 @@ interface MediaCardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "t
|
|
|
1532
1565
|
* @param props 카드 속성
|
|
1533
1566
|
* @returns 이미지 카드
|
|
1534
1567
|
*/
|
|
1535
|
-
declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) =>
|
|
1568
|
+
declare const MediaCard: ({ image, imagePosition, aspectRatio, heading, headingAs: HeadingTag, eyebrow, shadow, bordered, clickable, meta, children, className, ...props }: MediaCardProps) => React$1.JSX.Element;
|
|
1536
1569
|
|
|
1537
1570
|
type ModalFooterAlign = "end" | "between" | "start";
|
|
1538
1571
|
interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
|
|
@@ -1565,14 +1598,16 @@ interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title
|
|
|
1565
1598
|
* @param props 모달 속성
|
|
1566
1599
|
* @returns 열림 상태일 때 렌더링된 모달, 닫힘 상태면 null
|
|
1567
1600
|
*/
|
|
1568
|
-
declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) =>
|
|
1601
|
+
declare const Modal: ({ open, onClose, closeOnOverlay, width, title, description, footer, footerAlign, showCloseIcon, closeLabel, children, className, ariaLabel, ...props }: ModalProps) => React$1.JSX.Element | null;
|
|
1569
1602
|
|
|
1570
1603
|
interface OtpInputProps {
|
|
1571
1604
|
/** OTP 자릿수 (기본값: 6) */
|
|
1572
1605
|
length?: 4 | 6;
|
|
1573
1606
|
/** 제어형 값 */
|
|
1574
1607
|
value?: string;
|
|
1575
|
-
/** 값 변경 콜백 */
|
|
1608
|
+
/** 값 변경 콜백 (canonical) */
|
|
1609
|
+
onValueChange?: (value: string) => void;
|
|
1610
|
+
/** @deprecated `onValueChange` 를 사용하세요. */
|
|
1576
1611
|
onChange?: (value: string) => void;
|
|
1577
1612
|
/** 에러 상태 */
|
|
1578
1613
|
error?: boolean;
|
|
@@ -1594,29 +1629,35 @@ interface OtpInputProps {
|
|
|
1594
1629
|
* @returns 렌더링된 OTP 입력 요소
|
|
1595
1630
|
*/
|
|
1596
1631
|
declare const OtpInput: {
|
|
1597
|
-
({ length, value, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps):
|
|
1632
|
+
({ length, value, onValueChange, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): React$1.JSX.Element;
|
|
1598
1633
|
displayName: string;
|
|
1599
1634
|
};
|
|
1600
1635
|
|
|
1601
|
-
interface
|
|
1636
|
+
interface PaginationBaseProps {
|
|
1602
1637
|
/** 현재 페이지 번호 (1-based) */
|
|
1603
1638
|
page: number;
|
|
1604
1639
|
/** 전체 페이지 수 */
|
|
1605
1640
|
totalPages: number;
|
|
1606
|
-
/** 페이지 변경 시 호출되는 콜백 */
|
|
1607
|
-
onChange: (page: number) => void;
|
|
1608
1641
|
/** 이전 페이지 버튼 aria-label (기본값: "Previous page") */
|
|
1609
1642
|
prevLabel?: string;
|
|
1610
1643
|
/** 다음 페이지 버튼 aria-label (기본값: "Next page") */
|
|
1611
1644
|
nextLabel?: string;
|
|
1612
1645
|
}
|
|
1646
|
+
type PaginationCallbacks = {
|
|
1647
|
+
onPageChange: (page: number) => void;
|
|
1648
|
+
onChange?: (page: number) => void;
|
|
1649
|
+
} | {
|
|
1650
|
+
onPageChange?: (page: number) => void;
|
|
1651
|
+
onChange: (page: number) => void;
|
|
1652
|
+
};
|
|
1653
|
+
type PaginationProps = PaginationBaseProps & PaginationCallbacks;
|
|
1613
1654
|
/**
|
|
1614
1655
|
* 페이지네이션을 렌더링한다.
|
|
1615
1656
|
* 이전/다음 버튼과 페이지 목록을 구성해 전달된 콜백으로 페이지 변경을 전달한다.
|
|
1616
1657
|
* @param props 페이지네이션 속성
|
|
1617
1658
|
* @returns 렌더링된 페이지네이션 UI
|
|
1618
1659
|
*/
|
|
1619
|
-
declare const Pagination: ({ page, totalPages, onChange, prevLabel, nextLabel, }: PaginationProps) =>
|
|
1660
|
+
declare const Pagination: ({ page, totalPages, onPageChange, onChange, prevLabel, nextLabel, }: PaginationProps) => React$1.JSX.Element;
|
|
1620
1661
|
|
|
1621
1662
|
interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
1622
1663
|
/** 라디오 버튼 옆에 표시할 라벨 */
|
|
@@ -1634,7 +1675,7 @@ interface RadioProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>,
|
|
|
1634
1675
|
* @returns 렌더링된 라디오 UI
|
|
1635
1676
|
*/
|
|
1636
1677
|
declare const Radio: {
|
|
1637
|
-
({ label, size: sizeProp, className, ref, value, checked, onChange, name: nameProp, disabled: disabledProp, ...props }: RadioProps):
|
|
1678
|
+
({ label, size: sizeProp, className, ref, value, checked, onChange, name: nameProp, disabled: disabledProp, ...props }: RadioProps): React$1.JSX.Element;
|
|
1638
1679
|
displayName: string;
|
|
1639
1680
|
};
|
|
1640
1681
|
|
|
@@ -1681,7 +1722,7 @@ interface RadioGroupProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
|
1681
1722
|
* ```
|
|
1682
1723
|
*/
|
|
1683
1724
|
declare const RadioGroup: {
|
|
1684
|
-
({ value: controlledValue, defaultValue, onValueChange, name: nameProp, label, supportingText, error, size, orientation, disabled, className, children, ...props }: RadioGroupProps):
|
|
1725
|
+
({ value: controlledValue, defaultValue, onValueChange, name: nameProp, label, supportingText, error, size, orientation, disabled, className, children, ...props }: RadioGroupProps): React$1.JSX.Element;
|
|
1685
1726
|
displayName: string;
|
|
1686
1727
|
};
|
|
1687
1728
|
|
|
@@ -1701,7 +1742,7 @@ interface SkeletonProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "ch
|
|
|
1701
1742
|
* @param props 스켈레톤 속성
|
|
1702
1743
|
* @returns 스켈레톤 요소
|
|
1703
1744
|
*/
|
|
1704
|
-
declare const Skeleton: ({ variant, width, height, radius, className, style, ...props }: SkeletonProps) =>
|
|
1745
|
+
declare const Skeleton: ({ variant, width, height, radius, className, style, ...props }: SkeletonProps) => React$1.JSX.Element;
|
|
1705
1746
|
|
|
1706
1747
|
interface SpinnerProps {
|
|
1707
1748
|
/** 스피너 크기(px) (기본값: 24) */
|
|
@@ -1715,7 +1756,7 @@ interface SpinnerProps {
|
|
|
1715
1756
|
* @param props 스피너 속성
|
|
1716
1757
|
* @returns 렌더링된 스피너 요소
|
|
1717
1758
|
*/
|
|
1718
|
-
declare const Spinner: ({ size, ariaLabel }: SpinnerProps) =>
|
|
1759
|
+
declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => React$1.JSX.Element;
|
|
1719
1760
|
|
|
1720
1761
|
type TableSize = "sm" | "md" | "lg";
|
|
1721
1762
|
interface TableColumn<T extends object> {
|
|
@@ -1761,7 +1802,7 @@ interface TableProps<T extends object> {
|
|
|
1761
1802
|
* @param props 테이블 속성
|
|
1762
1803
|
* @returns 테이블 컴포넌트
|
|
1763
1804
|
*/
|
|
1764
|
-
declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, }: TableProps<T>) =>
|
|
1805
|
+
declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, }: TableProps<T>) => React$1.JSX.Element;
|
|
1765
1806
|
|
|
1766
1807
|
type ThemeMode = "light" | "dark" | "system";
|
|
1767
1808
|
type ResolvedTheme = "light" | "dark";
|
|
@@ -1826,7 +1867,9 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
1826
1867
|
clearable?: boolean;
|
|
1827
1868
|
/** 컨테이너 전체 너비 차지 여부 */
|
|
1828
1869
|
fullWidth?: boolean;
|
|
1829
|
-
/** 값 변경
|
|
1870
|
+
/** 값 변경 콜백 (canonical). 호출 시점은 `imeStrategy` 에 따름 (기본: 조합 완료 후) */
|
|
1871
|
+
onValueChange?: (value: string) => void;
|
|
1872
|
+
/** @deprecated `onValueChange` 를 사용하세요. (Next 서버액션 전달용으로 `Action` 접미사가 필요하면 그대로 사용 가능) */
|
|
1830
1873
|
onChangeAction?: (value: string) => void;
|
|
1831
1874
|
/**
|
|
1832
1875
|
* IME 조합 중 콜백 전략 (기본값: "delayed").
|
|
@@ -1850,7 +1893,7 @@ interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
1850
1893
|
* @returns 렌더링된 텍스트 필드 UI
|
|
1851
1894
|
*/
|
|
1852
1895
|
declare const TextField: {
|
|
1853
|
-
({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, size, className, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps):
|
|
1896
|
+
({ id, label, showLabel, supportingText, error, leadingIcon, trailingIcon, clearable, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, ref, ...props }: TextFieldProps): React$1.JSX.Element;
|
|
1854
1897
|
displayName: string;
|
|
1855
1898
|
};
|
|
1856
1899
|
|
|
@@ -1869,7 +1912,9 @@ interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextArea
|
|
|
1869
1912
|
error?: boolean;
|
|
1870
1913
|
/** 컨테이너 전체 너비 차지 여부 */
|
|
1871
1914
|
fullWidth?: boolean;
|
|
1872
|
-
/** 값 변경
|
|
1915
|
+
/** 값 변경 콜백 (canonical). 호출 시점은 `imeStrategy` 에 따름 (기본: 조합 완료 후) */
|
|
1916
|
+
onValueChange?: (value: string) => void;
|
|
1917
|
+
/** @deprecated `onValueChange` 를 사용하세요. (Next 서버액션 전달용으로 `Action` 접미사가 필요하면 그대로 사용 가능) */
|
|
1873
1918
|
onChangeAction?: (value: string) => void;
|
|
1874
1919
|
/**
|
|
1875
1920
|
* IME 조합 중 콜백 전략 (기본값: "delayed").
|
|
@@ -1909,7 +1954,7 @@ interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextArea
|
|
|
1909
1954
|
* ```
|
|
1910
1955
|
*/
|
|
1911
1956
|
declare const Textarea: {
|
|
1912
|
-
({ id, label, showLabel, supportingText, error, fullWidth, size, className, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, maxLength, ref, ...props }: TextareaProps):
|
|
1957
|
+
({ id, label, showLabel, supportingText, error, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, maxLength, ref, ...props }: TextareaProps): React$1.JSX.Element;
|
|
1913
1958
|
displayName: string;
|
|
1914
1959
|
};
|
|
1915
1960
|
|
|
@@ -1927,7 +1972,7 @@ interface ToastProviderProps {
|
|
|
1927
1972
|
* @param props Provider 속성
|
|
1928
1973
|
* @returns 렌더링된 Provider와 토스트 컨테이너
|
|
1929
1974
|
*/
|
|
1930
|
-
declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) =>
|
|
1975
|
+
declare const ToastProvider: ({ children, maxCount, closeAriaLabel, }: ToastProviderProps) => React$1.JSX.Element;
|
|
1931
1976
|
|
|
1932
1977
|
/**
|
|
1933
1978
|
* 토스트 메시지를 표시하는 훅.
|
|
@@ -1952,7 +1997,9 @@ interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
1952
1997
|
checked?: boolean;
|
|
1953
1998
|
/** 비제어형 초기 토글 상태 */
|
|
1954
1999
|
defaultChecked?: boolean;
|
|
1955
|
-
/** 상태 변경
|
|
2000
|
+
/** 상태 변경 콜백 (canonical) */
|
|
2001
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
2002
|
+
/** @deprecated `onCheckedChange` 를 사용하세요. */
|
|
1956
2003
|
onChange?: (checked: boolean) => void;
|
|
1957
2004
|
/** 토글 크기 (기본값: "sm") */
|
|
1958
2005
|
size?: "sm" | "md";
|
|
@@ -1970,7 +2017,7 @@ interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
1970
2017
|
* @returns 렌더링된 토글 요소
|
|
1971
2018
|
*/
|
|
1972
2019
|
declare const Toggle: {
|
|
1973
|
-
({ checked, defaultChecked, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps):
|
|
2020
|
+
({ checked, defaultChecked, onCheckedChange, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps): React$1.JSX.Element;
|
|
1974
2021
|
displayName: string;
|
|
1975
2022
|
};
|
|
1976
2023
|
|
|
@@ -1992,7 +2039,7 @@ interface TopLoadingProps {
|
|
|
1992
2039
|
* @param props 로딩바 속성
|
|
1993
2040
|
* @returns 렌더링된 로딩바 요소 또는 null
|
|
1994
2041
|
*/
|
|
1995
|
-
declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) =>
|
|
2042
|
+
declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => React$1.JSX.Element | null;
|
|
1996
2043
|
|
|
1997
2044
|
type ContainerSize = "sm" | "md" | "lg" | "xl" | "full";
|
|
1998
2045
|
interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
@@ -2006,6 +2053,8 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2006
2053
|
center?: boolean;
|
|
2007
2054
|
/** 렌더링할 HTML 요소 */
|
|
2008
2055
|
as?: React$1.ElementType;
|
|
2056
|
+
/** 루트 요소 ref (React 19 ref-as-prop) */
|
|
2057
|
+
ref?: React$1.Ref<HTMLElement>;
|
|
2009
2058
|
}
|
|
2010
2059
|
/**
|
|
2011
2060
|
* max-width 제한 + 반응형 수평 패딩을 가진 컨테이너.
|
|
@@ -2019,7 +2068,7 @@ interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2019
2068
|
* </Container>
|
|
2020
2069
|
* ```
|
|
2021
2070
|
*/
|
|
2022
|
-
declare const Container: ({ size, center, as: Tag, className, children, ...props }: ContainerProps) =>
|
|
2071
|
+
declare const Container: ({ size, center, as: Tag, ref, className, children, ...props }: ContainerProps) => React$1.JSX.Element;
|
|
2023
2072
|
|
|
2024
2073
|
type SectionSpacing = "xs" | "sm" | "md" | "lg" | "xl";
|
|
2025
2074
|
type SectionBg = "default" | "dim" | "accent" | "inverted" | "transparent";
|
|
@@ -2038,6 +2087,8 @@ interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
2038
2087
|
bg?: SectionBg;
|
|
2039
2088
|
/** 렌더링할 HTML 요소 */
|
|
2040
2089
|
as?: React$1.ElementType;
|
|
2090
|
+
/** 루트 요소 ref (React 19 ref-as-prop) */
|
|
2091
|
+
ref?: React$1.Ref<HTMLElement>;
|
|
2041
2092
|
}
|
|
2042
2093
|
/**
|
|
2043
2094
|
* 마케팅 페이지의 섹션 단위. 수직 여백 + 배경색 variants.
|
|
@@ -2052,7 +2103,7 @@ interface SectionProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
|
2052
2103
|
* </Section>
|
|
2053
2104
|
* ```
|
|
2054
2105
|
*/
|
|
2055
|
-
declare const Section: ({ spacing, bg, as: Tag, className, children, ...props }: SectionProps) =>
|
|
2106
|
+
declare const Section: ({ spacing, bg, as: Tag, ref, className, children, ...props }: SectionProps) => React$1.JSX.Element;
|
|
2056
2107
|
|
|
2057
2108
|
type StackDirection = "vertical" | "horizontal";
|
|
2058
2109
|
type StackAlign = "start" | "center" | "end" | "stretch";
|
|
@@ -2078,6 +2129,8 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2078
2129
|
wrap?: StackWrap;
|
|
2079
2130
|
/** 렌더링할 HTML 요소 */
|
|
2080
2131
|
as?: React$1.ElementType;
|
|
2132
|
+
/** 루트 요소 ref (React 19 ref-as-prop) */
|
|
2133
|
+
ref?: React$1.Ref<HTMLElement>;
|
|
2081
2134
|
}
|
|
2082
2135
|
/**
|
|
2083
2136
|
* Flex 기반 1D 레이아웃 컨테이너.
|
|
@@ -2096,7 +2149,7 @@ interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2096
2149
|
* </Stack>
|
|
2097
2150
|
* ```
|
|
2098
2151
|
*/
|
|
2099
|
-
declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, className, children, style, ...props }: StackProps) =>
|
|
2152
|
+
declare const Stack: ({ direction, gap, align, justify, wrap, as: Tag, ref, className, children, style, ...props }: StackProps) => React$1.JSX.Element;
|
|
2100
2153
|
|
|
2101
2154
|
type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | "auto";
|
|
2102
2155
|
type GridGap = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48;
|
|
@@ -2124,6 +2177,8 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2124
2177
|
singleColOnMobile?: boolean;
|
|
2125
2178
|
/** 렌더링할 HTML 요소 */
|
|
2126
2179
|
as?: React$1.ElementType;
|
|
2180
|
+
/** 루트 요소 ref (React 19 ref-as-prop) */
|
|
2181
|
+
ref?: React$1.Ref<HTMLElement>;
|
|
2127
2182
|
}
|
|
2128
2183
|
/**
|
|
2129
2184
|
* CSS Grid 기반 2D 레이아웃 컨테이너.
|
|
@@ -2142,6 +2197,6 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
2142
2197
|
* </Grid>
|
|
2143
2198
|
* ```
|
|
2144
2199
|
*/
|
|
2145
|
-
declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, className, children, style, ...props }: GridProps) =>
|
|
2200
|
+
declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, ref, className, children, style, ...props }: GridProps) => React$1.JSX.Element;
|
|
2146
2201
|
|
|
2147
|
-
export { Accordion, type AccordionItem, type AccordionProps, AlertProvider, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, DatePicker, type DatePickerProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
|
|
2202
|
+
export { Accordion, type AccordionItem, type AccordionProps, AlertProvider, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, DatePicker, type DatePickerProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
|