@nurihaus/web-design-system 3.8.0 → 3.9.1
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 +1 -1
- package/dist/ai/components.md +44 -4
- package/dist/ai/motion.md +2 -0
- package/dist/ai/tokens.md +3 -0
- package/dist/chunk-1176.js +24 -0
- package/dist/chunk-910.js +15 -13
- package/dist/components/bottom-bar/bottom-bar.stories.d.ts +9 -9
- package/dist/components/empty-state/empty-state.stories.d.ts +10 -10
- package/dist/components/icon/icon.stories.d.ts +1 -1
- package/dist/components/icon-button/base-icon-button.d.ts +3 -0
- package/dist/components/icon-button/icon-button-props.d.ts +12 -0
- package/dist/components/icon-button/icon-button-type.d.ts +16 -0
- package/dist/components/icon-button/icon-button.d.ts +5 -0
- package/dist/components/icon-button/icon-button.stories.d.ts +31 -0
- package/dist/components/list/list-row.stories.d.ts +13 -13
- package/dist/components/message/message.stories.d.ts +11 -11
- package/dist/components/message-composer/message-composer-type.d.ts +4 -0
- package/dist/components/message-composer/message-composer.stories.d.ts +2 -0
- package/dist/components/notice/notice-type.d.ts +2 -0
- package/dist/components/notice/notice.stories.d.ts +11 -11
- package/dist/components/skeleton/skeleton.stories.d.ts +11 -11
- package/dist/components/toast/toast.stories.d.ts +15 -15
- package/dist/components.css +103 -0
- package/dist/cta-button.js +20 -16
- package/dist/helpers/utils/fillLinkChild.d.ts +6 -0
- package/dist/icon-button.js +338 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +216 -26
- package/dist/list-row.js +19 -13
- package/dist/message-composer.js +5 -1
- package/dist/modal-with-double-button.js +8 -6
- package/dist/notice.js +9 -5
- package/dist/styles.css +88 -0
- package/dist/toast.js +8 -6
- package/dist/tokens.css +5 -0
- package/package.json +5 -1
|
@@ -21,6 +21,8 @@ declare const meta: {
|
|
|
21
21
|
leading?: import("react").ReactNode;
|
|
22
22
|
attachments?: import("react").ReactNode;
|
|
23
23
|
disabled?: boolean | undefined;
|
|
24
|
+
autoFocus?: boolean | undefined;
|
|
25
|
+
maxLength?: number | undefined;
|
|
24
26
|
className?: string | undefined;
|
|
25
27
|
style?: import("react").CSSProperties | undefined;
|
|
26
28
|
track?: string | undefined;
|
|
@@ -6,6 +6,8 @@ export type BaseNoticeProps = ComponentPropsWithRef<'div'>;
|
|
|
6
6
|
export interface NoticeAction extends TrackProps {
|
|
7
7
|
label: string;
|
|
8
8
|
onClick: () => void;
|
|
9
|
+
/** 처리 중. 버튼이 Spinner 로 바뀌고 누르지 않는다 */
|
|
10
|
+
loading?: boolean;
|
|
9
11
|
}
|
|
10
12
|
export interface NoticeProps extends Omit<ComponentPropsWithRef<'div'>, 'title'> {
|
|
11
13
|
variant?: (typeof variant)[number];
|
|
@@ -21,15 +21,16 @@ declare const meta: {
|
|
|
21
21
|
children: string;
|
|
22
22
|
};
|
|
23
23
|
decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
|
|
24
|
+
title?: import("react").ReactNode;
|
|
25
|
+
children: import("react").ReactNode;
|
|
24
26
|
className?: string | undefined | undefined;
|
|
25
|
-
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
26
|
-
onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
27
|
-
id?: string | undefined | undefined;
|
|
28
27
|
style?: import("react").CSSProperties | undefined;
|
|
29
|
-
children: import("react").ReactNode;
|
|
30
|
-
slot?: string | undefined | undefined;
|
|
31
|
-
title?: import("react").ReactNode;
|
|
32
28
|
key?: import("react").Key | null | undefined;
|
|
29
|
+
color?: string | undefined | undefined;
|
|
30
|
+
content?: string | undefined | undefined;
|
|
31
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
32
|
+
motion?: (typeof motion)[number] | undefined;
|
|
33
|
+
slot?: string | undefined | undefined;
|
|
33
34
|
defaultChecked?: boolean | undefined | undefined;
|
|
34
35
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
35
36
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -43,15 +44,14 @@ declare const meta: {
|
|
|
43
44
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
44
45
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
45
46
|
hidden?: boolean | undefined | undefined;
|
|
47
|
+
id?: string | undefined | undefined;
|
|
46
48
|
lang?: string | undefined | undefined;
|
|
47
49
|
nonce?: string | undefined | undefined;
|
|
48
50
|
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
49
51
|
tabIndex?: number | undefined | undefined;
|
|
50
|
-
translate?: "yes" | "no" | undefined | undefined;
|
|
51
52
|
radioGroup?: string | undefined | undefined;
|
|
52
53
|
role?: import("react").AriaRole | undefined;
|
|
53
54
|
about?: string | undefined | undefined;
|
|
54
|
-
content?: string | undefined | undefined;
|
|
55
55
|
datatype?: string | undefined | undefined;
|
|
56
56
|
inlist?: any;
|
|
57
57
|
prefix?: string | undefined | undefined;
|
|
@@ -63,7 +63,6 @@ declare const meta: {
|
|
|
63
63
|
vocab?: string | undefined | undefined;
|
|
64
64
|
autoCorrect?: string | undefined | undefined;
|
|
65
65
|
autoSave?: string | undefined | undefined;
|
|
66
|
-
color?: string | undefined | undefined;
|
|
67
66
|
itemProp?: string | undefined | undefined;
|
|
68
67
|
itemScope?: boolean | undefined | undefined;
|
|
69
68
|
itemType?: string | undefined | undefined;
|
|
@@ -148,6 +147,7 @@ declare const meta: {
|
|
|
148
147
|
onFocusCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
149
148
|
onBlur?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
150
149
|
onBlurCapture?: import("react").FocusEventHandler<HTMLDivElement> | undefined;
|
|
150
|
+
onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
151
151
|
onChangeCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
152
152
|
onBeforeInput?: import("react").InputEventHandler<HTMLDivElement> | undefined;
|
|
153
153
|
onBeforeInputCapture?: import("react").FormEventHandler<HTMLDivElement> | undefined;
|
|
@@ -215,6 +215,7 @@ declare const meta: {
|
|
|
215
215
|
onWaitingCapture?: import("react").ReactEventHandler<HTMLDivElement> | undefined;
|
|
216
216
|
onAuxClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
217
217
|
onAuxClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
218
|
+
onClick?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
218
219
|
onClickCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
219
220
|
onContextMenu?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
220
221
|
onContextMenuCapture?: import("react").MouseEventHandler<HTMLDivElement> | undefined;
|
|
@@ -288,9 +289,8 @@ declare const meta: {
|
|
|
288
289
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement> | undefined;
|
|
289
290
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
290
291
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
|
|
291
|
-
motion?: (typeof motion)[number] | undefined;
|
|
292
|
-
variant?: (typeof variant)[number] | undefined;
|
|
293
292
|
action?: import("./notice-type").NoticeAction | undefined;
|
|
293
|
+
variant?: (typeof variant)[number] | undefined;
|
|
294
294
|
ref?: import("react").LegacyRef<HTMLDivElement> | undefined;
|
|
295
295
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
296
296
|
};
|
|
@@ -38,15 +38,17 @@ declare const meta: {
|
|
|
38
38
|
animated: true;
|
|
39
39
|
};
|
|
40
40
|
decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
|
|
41
|
+
title?: string | undefined | undefined;
|
|
42
|
+
children?: import("react").ReactNode;
|
|
41
43
|
className?: string | undefined | undefined;
|
|
42
|
-
onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
43
|
-
onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
|
|
44
|
-
id?: string | undefined | undefined;
|
|
45
44
|
style?: import("react").CSSProperties | undefined;
|
|
46
|
-
children?: import("react").ReactNode;
|
|
47
|
-
slot?: string | undefined | undefined;
|
|
48
|
-
title?: string | undefined | undefined;
|
|
49
45
|
key?: import("react").Key | null | undefined;
|
|
46
|
+
color?: string | undefined | undefined;
|
|
47
|
+
content?: string | undefined | undefined;
|
|
48
|
+
height?: number | string | undefined;
|
|
49
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
50
|
+
width?: number | string | undefined;
|
|
51
|
+
slot?: string | undefined | undefined;
|
|
50
52
|
defaultChecked?: boolean | undefined | undefined;
|
|
51
53
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
52
54
|
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
@@ -60,15 +62,14 @@ declare const meta: {
|
|
|
60
62
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
61
63
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
62
64
|
hidden?: boolean | undefined | undefined;
|
|
65
|
+
id?: string | undefined | undefined;
|
|
63
66
|
lang?: string | undefined | undefined;
|
|
64
67
|
nonce?: string | undefined | undefined;
|
|
65
68
|
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
66
69
|
tabIndex?: number | undefined | undefined;
|
|
67
|
-
translate?: "yes" | "no" | undefined | undefined;
|
|
68
70
|
radioGroup?: string | undefined | undefined;
|
|
69
71
|
role?: import("react").AriaRole | undefined;
|
|
70
72
|
about?: string | undefined | undefined;
|
|
71
|
-
content?: string | undefined | undefined;
|
|
72
73
|
datatype?: string | undefined | undefined;
|
|
73
74
|
inlist?: any;
|
|
74
75
|
prefix?: string | undefined | undefined;
|
|
@@ -80,7 +81,6 @@ declare const meta: {
|
|
|
80
81
|
vocab?: string | undefined | undefined;
|
|
81
82
|
autoCorrect?: string | undefined | undefined;
|
|
82
83
|
autoSave?: string | undefined | undefined;
|
|
83
|
-
color?: string | undefined | undefined;
|
|
84
84
|
itemProp?: string | undefined | undefined;
|
|
85
85
|
itemScope?: boolean | undefined | undefined;
|
|
86
86
|
itemType?: string | undefined | undefined;
|
|
@@ -165,6 +165,7 @@ declare const meta: {
|
|
|
165
165
|
onFocusCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
|
|
166
166
|
onBlur?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
|
|
167
167
|
onBlurCapture?: import("react").FocusEventHandler<HTMLSpanElement> | undefined;
|
|
168
|
+
onChange?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
|
|
168
169
|
onChangeCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
|
|
169
170
|
onBeforeInput?: import("react").InputEventHandler<HTMLSpanElement> | undefined;
|
|
170
171
|
onBeforeInputCapture?: import("react").FormEventHandler<HTMLSpanElement> | undefined;
|
|
@@ -232,6 +233,7 @@ declare const meta: {
|
|
|
232
233
|
onWaitingCapture?: import("react").ReactEventHandler<HTMLSpanElement> | undefined;
|
|
233
234
|
onAuxClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
234
235
|
onAuxClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
236
|
+
onClick?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
235
237
|
onClickCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
236
238
|
onContextMenu?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
237
239
|
onContextMenuCapture?: import("react").MouseEventHandler<HTMLSpanElement> | undefined;
|
|
@@ -305,8 +307,6 @@ declare const meta: {
|
|
|
305
307
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLSpanElement> | undefined;
|
|
306
308
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
|
|
307
309
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLSpanElement> | undefined;
|
|
308
|
-
width?: number | string | undefined;
|
|
309
|
-
height?: number | string | undefined;
|
|
310
310
|
shape?: (typeof shapes)[number] | undefined;
|
|
311
311
|
lines?: number | undefined;
|
|
312
312
|
animated?: boolean | undefined;
|
|
@@ -17,17 +17,20 @@ declare const meta: {
|
|
|
17
17
|
variant: "default";
|
|
18
18
|
};
|
|
19
19
|
decorators: ((Story: import("storybook/internal/csf").PartialStoryFn<import("@storybook/react-webpack5").ReactRenderer, {
|
|
20
|
+
title: import("react").ReactNode;
|
|
21
|
+
description?: import("react").ReactNode;
|
|
22
|
+
open?: boolean | undefined;
|
|
23
|
+
defaultOpen?: boolean | undefined;
|
|
24
|
+
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
20
25
|
className?: string | undefined;
|
|
21
|
-
|
|
22
|
-
onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
|
|
23
|
-
id?: string | undefined | undefined;
|
|
26
|
+
style?: import("react").CSSProperties | undefined;
|
|
24
27
|
track?: string | undefined;
|
|
25
28
|
trackProps?: Record<string, string | number | boolean> | undefined;
|
|
26
|
-
style?: import("react").CSSProperties | undefined;
|
|
27
|
-
open?: boolean | undefined;
|
|
28
|
-
slot?: string | undefined | undefined;
|
|
29
|
-
title: import("react").ReactNode;
|
|
30
29
|
key?: import("react").Key | null | undefined;
|
|
30
|
+
color?: string | undefined | undefined;
|
|
31
|
+
content?: string | undefined | undefined;
|
|
32
|
+
translate?: "yes" | "no" | undefined | undefined;
|
|
33
|
+
slot?: string | undefined | undefined;
|
|
31
34
|
value?: string | number | readonly string[] | undefined;
|
|
32
35
|
defaultChecked?: boolean | undefined | undefined;
|
|
33
36
|
defaultValue?: string | number | readonly string[] | undefined;
|
|
@@ -42,15 +45,14 @@ declare const meta: {
|
|
|
42
45
|
draggable?: (boolean | "true" | "false") | undefined;
|
|
43
46
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
44
47
|
hidden?: boolean | undefined | undefined;
|
|
48
|
+
id?: string | undefined | undefined;
|
|
45
49
|
lang?: string | undefined | undefined;
|
|
46
50
|
nonce?: string | undefined | undefined;
|
|
47
51
|
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
48
52
|
tabIndex?: number | undefined | undefined;
|
|
49
|
-
translate?: "yes" | "no" | undefined | undefined;
|
|
50
53
|
radioGroup?: string | undefined | undefined;
|
|
51
54
|
role?: import("react").AriaRole | undefined;
|
|
52
55
|
about?: string | undefined | undefined;
|
|
53
|
-
content?: string | undefined | undefined;
|
|
54
56
|
datatype?: string | undefined | undefined;
|
|
55
57
|
inlist?: any;
|
|
56
58
|
prefix?: string | undefined | undefined;
|
|
@@ -62,7 +64,6 @@ declare const meta: {
|
|
|
62
64
|
vocab?: string | undefined | undefined;
|
|
63
65
|
autoCorrect?: string | undefined | undefined;
|
|
64
66
|
autoSave?: string | undefined | undefined;
|
|
65
|
-
color?: string | undefined | undefined;
|
|
66
67
|
itemProp?: string | undefined | undefined;
|
|
67
68
|
itemScope?: boolean | undefined | undefined;
|
|
68
69
|
itemType?: string | undefined | undefined;
|
|
@@ -147,6 +148,7 @@ declare const meta: {
|
|
|
147
148
|
onFocusCapture?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
|
|
148
149
|
onBlur?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
|
|
149
150
|
onBlurCapture?: import("react").FocusEventHandler<HTMLLIElement> | undefined;
|
|
151
|
+
onChange?: import("react").FormEventHandler<HTMLLIElement> | undefined;
|
|
150
152
|
onChangeCapture?: import("react").FormEventHandler<HTMLLIElement> | undefined;
|
|
151
153
|
onBeforeInput?: import("react").InputEventHandler<HTMLLIElement> | undefined;
|
|
152
154
|
onBeforeInputCapture?: import("react").FormEventHandler<HTMLLIElement> | undefined;
|
|
@@ -214,6 +216,7 @@ declare const meta: {
|
|
|
214
216
|
onWaitingCapture?: import("react").ReactEventHandler<HTMLLIElement> | undefined;
|
|
215
217
|
onAuxClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
|
|
216
218
|
onAuxClickCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
|
|
219
|
+
onClick?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
|
|
217
220
|
onClickCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
|
|
218
221
|
onContextMenu?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
|
|
219
222
|
onContextMenuCapture?: import("react").MouseEventHandler<HTMLLIElement> | undefined;
|
|
@@ -287,13 +290,10 @@ declare const meta: {
|
|
|
287
290
|
onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLLIElement> | undefined;
|
|
288
291
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
|
|
289
292
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLIElement> | undefined;
|
|
293
|
+
action?: import("./toast-type").ToastAction | undefined;
|
|
294
|
+
variant?: (typeof variants)[number] | undefined;
|
|
290
295
|
onResume?: (() => void) | undefined;
|
|
291
|
-
defaultOpen?: boolean | undefined;
|
|
292
|
-
onOpenChange?: ((open: boolean) => void) | undefined;
|
|
293
296
|
duration?: number | undefined;
|
|
294
|
-
description?: import("react").ReactNode;
|
|
295
|
-
variant?: (typeof variants)[number] | undefined;
|
|
296
|
-
action?: import("./toast-type").ToastAction | undefined;
|
|
297
297
|
showClose?: boolean | undefined;
|
|
298
298
|
ref?: import("react").LegacyRef<HTMLLIElement> | undefined;
|
|
299
299
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
package/dist/components.css
CHANGED
|
@@ -1645,6 +1645,13 @@
|
|
|
1645
1645
|
gap: var(--spacing-10);
|
|
1646
1646
|
}
|
|
1647
1647
|
|
|
1648
|
+
/* popper 는 높이를 정하지 않아 긴 목록(나라 221개)이 화면 밖으로 넘치고 스크롤도 안 된다.
|
|
1649
|
+
화면에 남은 높이까지만 쓰고 Viewport 가 스크롤한다 */
|
|
1650
|
+
|
|
1651
|
+
.base-drop-down.content {
|
|
1652
|
+
max-height: var(--radix-select-content-available-height);
|
|
1653
|
+
}
|
|
1654
|
+
|
|
1648
1655
|
/***************************************************************************************************
|
|
1649
1656
|
* *
|
|
1650
1657
|
* drop-down-single *
|
|
@@ -2418,6 +2425,102 @@
|
|
|
2418
2425
|
height: var(--icon-size-xl);
|
|
2419
2426
|
}
|
|
2420
2427
|
|
|
2428
|
+
.base-icon-button {
|
|
2429
|
+
position: relative;
|
|
2430
|
+
flex: none;
|
|
2431
|
+
display: inline-flex;
|
|
2432
|
+
align-items: center;
|
|
2433
|
+
justify-content: center;
|
|
2434
|
+
padding: 0;
|
|
2435
|
+
border: none;
|
|
2436
|
+
cursor: var(--cursor-button);
|
|
2437
|
+
|
|
2438
|
+
/* 보이는 크기가 작아도(s 36) 누르는 자리는 터치 44 */
|
|
2439
|
+
}
|
|
2440
|
+
|
|
2441
|
+
.base-icon-button::after {
|
|
2442
|
+
content: '';
|
|
2443
|
+
position: absolute;
|
|
2444
|
+
top: 50%;
|
|
2445
|
+
left: 50%;
|
|
2446
|
+
width: var(--touch-target);
|
|
2447
|
+
height: var(--touch-target);
|
|
2448
|
+
transform: translate(-50%, -50%);
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
.base-icon-button[data-disabled] {
|
|
2452
|
+
cursor: var(--cursor-disabled);
|
|
2453
|
+
}
|
|
2454
|
+
|
|
2455
|
+
/***************************************************************************************************
|
|
2456
|
+
* *
|
|
2457
|
+
* icon-button *
|
|
2458
|
+
* *
|
|
2459
|
+
***************************************************************************************************/
|
|
2460
|
+
|
|
2461
|
+
.icon-button {
|
|
2462
|
+
border-radius: var(--radius-full);
|
|
2463
|
+
transition:
|
|
2464
|
+
transform var(--motion-press-duration) var(--motion-press-ease),
|
|
2465
|
+
background-color var(--motion-press-duration) var(--motion-press-ease);
|
|
2466
|
+
}
|
|
2467
|
+
|
|
2468
|
+
.icon-button:active:not([data-disabled]) {
|
|
2469
|
+
transform: scale(var(--motion-press-scale));
|
|
2470
|
+
}
|
|
2471
|
+
|
|
2472
|
+
.icon-button:focus-visible {
|
|
2473
|
+
outline: var(--hairline) solid var(--color-purple-600);
|
|
2474
|
+
outline-offset: var(--spacing-2);
|
|
2475
|
+
}
|
|
2476
|
+
|
|
2477
|
+
.icon-button.size-s {
|
|
2478
|
+
width: var(--icon-button-size-s);
|
|
2479
|
+
height: var(--icon-button-size-s);
|
|
2480
|
+
}
|
|
2481
|
+
|
|
2482
|
+
.icon-button.size-m {
|
|
2483
|
+
width: var(--icon-button-size-m);
|
|
2484
|
+
height: var(--icon-button-size-m);
|
|
2485
|
+
}
|
|
2486
|
+
|
|
2487
|
+
.icon-button.size-l {
|
|
2488
|
+
width: var(--icon-button-size-l);
|
|
2489
|
+
height: var(--icon-button-size-l);
|
|
2490
|
+
}
|
|
2491
|
+
|
|
2492
|
+
/* 바탕 없이 아이콘만. 누르는 동안 회색 원이 보인다 */
|
|
2493
|
+
|
|
2494
|
+
.icon-button.variant-ghost {
|
|
2495
|
+
background-color: transparent;
|
|
2496
|
+
color: var(--color-grey-scale-700);
|
|
2497
|
+
}
|
|
2498
|
+
|
|
2499
|
+
.icon-button.variant-ghost:active:not([data-disabled]) {
|
|
2500
|
+
background-color: var(--color-grey-scale-100);
|
|
2501
|
+
}
|
|
2502
|
+
|
|
2503
|
+
/* CTAButton secondary 와 같은 연보라 */
|
|
2504
|
+
|
|
2505
|
+
.icon-button.variant-secondary {
|
|
2506
|
+
background-color: var(--color-purple-50);
|
|
2507
|
+
color: var(--color-purple-900);
|
|
2508
|
+
}
|
|
2509
|
+
|
|
2510
|
+
.icon-button.variant-primary {
|
|
2511
|
+
background-color: var(--color-purple-900);
|
|
2512
|
+
color: var(--color-white);
|
|
2513
|
+
}
|
|
2514
|
+
|
|
2515
|
+
.icon-button[data-disabled] {
|
|
2516
|
+
color: var(--color-grey-scale-300);
|
|
2517
|
+
}
|
|
2518
|
+
|
|
2519
|
+
.icon-button[data-disabled]:is(.variant-secondary,.variant-primary) {
|
|
2520
|
+
background-color: var(--color-grey-scale-200);
|
|
2521
|
+
color: var(--color-white);
|
|
2522
|
+
}
|
|
2523
|
+
|
|
2421
2524
|
.base-list:where(.group) {
|
|
2422
2525
|
display: flex;
|
|
2423
2526
|
flex-direction: column;
|
package/dist/cta-button.js
CHANGED
|
@@ -13,11 +13,12 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/j
|
|
|
13
13
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __nuri_require__(1041);
|
|
14
14
|
/* harmony import */ var _helpers_hooks_useTrack__WEBPACK_IMPORTED_MODULE_2__ = __nuri_require__(4560);
|
|
15
15
|
/* harmony import */ var _helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__ = __nuri_require__(3274);
|
|
16
|
-
/* harmony import */ var
|
|
17
|
-
/* harmony import */ var
|
|
18
|
-
/* harmony import */ var
|
|
19
|
-
/* harmony import */ var
|
|
20
|
-
/* harmony import */ var
|
|
16
|
+
/* harmony import */ var _helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__ = __nuri_require__(1176);
|
|
17
|
+
/* harmony import */ var _helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__ = __nuri_require__(7335);
|
|
18
|
+
/* harmony import */ var _callout_callout__WEBPACK_IMPORTED_MODULE_6__ = __nuri_require__(1163);
|
|
19
|
+
/* harmony import */ var _loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__ = __nuri_require__(6302);
|
|
20
|
+
/* harmony import */ var _base_button__WEBPACK_IMPORTED_MODULE_8__ = __nuri_require__(8933);
|
|
21
|
+
/* harmony import */ var _button_props__WEBPACK_IMPORTED_MODULE_9__ = __nuri_require__(9976);
|
|
21
22
|
var __assign = undefined && undefined.__assign || function () {
|
|
22
23
|
__assign = Object.assign || function (t) {
|
|
23
24
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -45,8 +46,9 @@ var __rest = undefined && undefined.__rest || function (s, e) {
|
|
|
45
46
|
|
|
46
47
|
|
|
47
48
|
|
|
49
|
+
|
|
48
50
|
var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
|
|
49
|
-
var _a = (0,
|
|
51
|
+
var _a = (0,_helpers_utils_getMergedProps__WEBPACK_IMPORTED_MODULE_5__/* .getMergedProps */ .p)(props, _button_props__WEBPACK_IMPORTED_MODULE_9__/* .ctaButtonProps */ .Lr),
|
|
50
52
|
className = _a.className,
|
|
51
53
|
text = _a.text,
|
|
52
54
|
leftIcon = _a.leftIcon,
|
|
@@ -64,26 +66,26 @@ var CTAButton = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(f
|
|
|
64
66
|
trackProps: trackProps
|
|
65
67
|
});
|
|
66
68
|
var content = (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, {
|
|
67
|
-
children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
|
|
69
|
+
children: [leftIcon, text, rightIcon, callout ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_callout_callout__WEBPACK_IMPORTED_MODULE_6__/* ["default"] */ .A, {
|
|
68
70
|
className: 'cta-button-callout',
|
|
69
71
|
text: callout
|
|
70
72
|
}) : null]
|
|
71
73
|
});
|
|
72
74
|
// asChild 면 넘겨받은 링크 요소 안에 버튼 글자를 넣고, 그 요소가 버튼 클래스·핸들러를 받는다
|
|
73
|
-
var
|
|
74
|
-
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
|
|
75
|
+
var link = (0,_helpers_utils_fillLinkChild__WEBPACK_IMPORTED_MODULE_4__/* .fillLinkChild */ .Q)(asChild, children, content);
|
|
76
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_base_button__WEBPACK_IMPORTED_MODULE_8__/* ["default"] */ .A, __assign({
|
|
75
77
|
ref: ref,
|
|
76
78
|
className: (0,_helpers_utils_classNames__WEBPACK_IMPORTED_MODULE_3__/* .classNames */ .x)(className, 'cta-button', callout ? 'with-callout' : undefined),
|
|
77
|
-
loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(
|
|
78
|
-
asChild:
|
|
79
|
+
loadingComponent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_loading_spinner_spinner__WEBPACK_IMPORTED_MODULE_7__/* ["default"] */ .A, {}),
|
|
80
|
+
asChild: link !== null,
|
|
79
81
|
// 링크는 로딩을 그리지 않는다. 그리면 Spinner 가 링크 자리를 차지한다
|
|
80
|
-
loading:
|
|
82
|
+
loading: link ? undefined : loading,
|
|
81
83
|
onClick: function onClick(event) {
|
|
82
84
|
emit('click');
|
|
83
85
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
|
|
84
86
|
}
|
|
85
87
|
}, restProps, {
|
|
86
|
-
children:
|
|
88
|
+
children: link !== null && link !== void 0 ? link : content
|
|
87
89
|
}));
|
|
88
90
|
});
|
|
89
91
|
CTAButton.displayName = 'CTAButton';
|
|
@@ -258,15 +260,17 @@ module.exports = x({ ["Fragment"]: () => (__WEBPACK_EXTERNAL_MODULE_react_jsx_ru
|
|
|
258
260
|
/******/ __nuri_require__.C(__webpack_chunk_6__);
|
|
259
261
|
/******/ import * as __webpack_chunk_7__ from "./chunk-8933.js";
|
|
260
262
|
/******/ __nuri_require__.C(__webpack_chunk_7__);
|
|
261
|
-
/******/ import * as __webpack_chunk_8__ from "./chunk-
|
|
263
|
+
/******/ import * as __webpack_chunk_8__ from "./chunk-1176.js";
|
|
262
264
|
/******/ __nuri_require__.C(__webpack_chunk_8__);
|
|
263
|
-
/******/ import * as __webpack_chunk_9__ from "./chunk-
|
|
265
|
+
/******/ import * as __webpack_chunk_9__ from "./chunk-2496.js";
|
|
264
266
|
/******/ __nuri_require__.C(__webpack_chunk_9__);
|
|
267
|
+
/******/ import * as __webpack_chunk_10__ from "./chunk-5226.js";
|
|
268
|
+
/******/ __nuri_require__.C(__webpack_chunk_10__);
|
|
265
269
|
/******/
|
|
266
270
|
/******/ // startup
|
|
267
271
|
/******/ // Load entry module and return exports
|
|
268
272
|
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
|
269
|
-
/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,2496,5226], () => (__nuri_require__(910)))
|
|
273
|
+
/******/ var __webpack_exports__ = __nuri_require__.O(undefined, [3274,7335,4560,7298,2777,6302,8933,1176,2496,5226], () => (__nuri_require__(910)))
|
|
270
274
|
/******/ __webpack_exports__ = __nuri_require__.O(__webpack_exports__);
|
|
271
275
|
/******/ const __webpack_exports__default = __webpack_exports__.A;
|
|
272
276
|
/******/ export { __webpack_exports__default as default };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* asChild 로 받은 요소 하나(`<a>`·라우터 Link)에 컴포넌트의 내용을 채운다.
|
|
4
|
+
* 요소가 아니면 null — 쓰는 쪽은 null 이면 자기 기본 요소를 그린다.
|
|
5
|
+
*/
|
|
6
|
+
export declare const fillLinkChild: (asChild: boolean | undefined, children: ReactNode, content: ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
|