@x-plat/design-system 0.5.24 → 0.5.27
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/components/ChatInput/index.cjs +59 -39
- package/dist/components/ChatInput/index.css +81 -45
- package/dist/components/ChatInput/index.d.cts +1 -1
- package/dist/components/ChatInput/index.d.ts +1 -1
- package/dist/components/ChatInput/index.js +59 -39
- package/dist/components/IconButton/index.cjs +68 -0
- package/dist/components/IconButton/index.css +77 -0
- package/dist/components/IconButton/index.d.cts +18 -0
- package/dist/components/IconButton/index.d.ts +18 -0
- package/dist/components/IconButton/index.js +41 -0
- package/dist/components/index.cjs +329 -305
- package/dist/components/index.css +81 -45
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +272 -249
- package/dist/index.cjs +339 -312
- package/dist/index.css +81 -45
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +280 -254
- package/package.json +1 -1
|
@@ -37,27 +37,60 @@ module.exports = __toCommonJS(ChatInput_exports);
|
|
|
37
37
|
// src/components/ChatInput/ChatInput.tsx
|
|
38
38
|
var import_react = __toESM(require("react"), 1);
|
|
39
39
|
|
|
40
|
-
//
|
|
40
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
41
|
+
function r(e) {
|
|
42
|
+
var t, f, n = "";
|
|
43
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
44
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
45
|
+
var o = e.length;
|
|
46
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
47
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
48
|
+
return n;
|
|
49
|
+
}
|
|
50
|
+
function clsx() {
|
|
51
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
52
|
+
return n;
|
|
53
|
+
}
|
|
54
|
+
var clsx_default = clsx;
|
|
55
|
+
|
|
56
|
+
// src/components/IconButton/IconButton.tsx
|
|
41
57
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
|
+
var IconButton = (props) => {
|
|
59
|
+
const {
|
|
60
|
+
icon,
|
|
61
|
+
type = "primary",
|
|
62
|
+
size = "md",
|
|
63
|
+
disabled,
|
|
64
|
+
...rest
|
|
65
|
+
} = props;
|
|
66
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
67
|
+
"button",
|
|
68
|
+
{
|
|
69
|
+
className: clsx_default("lib-xplat-icon-button", type, size),
|
|
70
|
+
disabled,
|
|
71
|
+
...rest,
|
|
72
|
+
children: icon
|
|
73
|
+
}
|
|
74
|
+
);
|
|
75
|
+
};
|
|
76
|
+
IconButton.displayName = "IconButton";
|
|
77
|
+
var IconButton_default = IconButton;
|
|
42
78
|
|
|
43
|
-
// src/tokens/svg/communication/
|
|
79
|
+
// src/tokens/svg/communication/BellIcon.tsx
|
|
44
80
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
45
81
|
|
|
46
|
-
// src/tokens/svg/communication/
|
|
82
|
+
// src/tokens/svg/communication/BellOffIcon.tsx
|
|
47
83
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
48
84
|
|
|
49
|
-
// src/tokens/svg/communication/
|
|
85
|
+
// src/tokens/svg/communication/InboxIcon.tsx
|
|
50
86
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
51
87
|
|
|
52
|
-
// src/tokens/svg/communication/
|
|
88
|
+
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
53
89
|
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
54
90
|
|
|
55
|
-
// src/tokens/svg/communication/
|
|
91
|
+
// src/tokens/svg/communication/MessageSquareIcon.tsx
|
|
56
92
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
57
|
-
|
|
58
|
-
// src/tokens/svg/communication/SendIcon.tsx
|
|
59
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
60
|
-
var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
93
|
+
var MessageSquareIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
61
94
|
"svg",
|
|
62
95
|
{
|
|
63
96
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -65,32 +98,19 @@ var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
|
65
98
|
height: "1em",
|
|
66
99
|
viewBox: "0 0 20 20",
|
|
67
100
|
fill: "none",
|
|
68
|
-
children:
|
|
69
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
|
|
70
|
-
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("clipPath", { id: "send-clip", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
|
|
71
|
-
]
|
|
101
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.833 1.75C16.4739 1.75 17.0888 2.00479 17.542 2.45801C17.9952 2.91122 18.25 3.52605 18.25 4.16699V12.5C18.25 13.1409 17.9952 13.7558 17.542 14.209C17.0888 14.6621 16.4739 14.917 15.833 14.917H6.14355L3.03027 18.0303C2.81579 18.2448 2.49313 18.3094 2.21289 18.1934C1.93263 18.0773 1.75 17.8033 1.75 17.5V4.16699C1.75 3.52605 2.00479 2.91122 2.45801 2.45801C2.91122 2.00479 3.52605 1.75 4.16699 1.75H15.833ZM4.16699 3.25C3.92388 3.25 3.69046 3.34665 3.51855 3.51855C3.34665 3.69046 3.25 3.92388 3.25 4.16699V15.6895L5.30273 13.6367L5.41699 13.543C5.53928 13.4613 5.68382 13.4171 5.83301 13.417H15.833C16.076 13.417 16.3096 13.3202 16.4814 13.1484C16.6534 12.9765 16.75 12.7431 16.75 12.5V4.16699C16.75 3.92388 16.6534 3.69046 16.4814 3.51855C16.3095 3.34665 16.0761 3.25 15.833 3.25H4.16699Z", fill: "currentColor" })
|
|
72
102
|
}
|
|
73
103
|
);
|
|
74
|
-
var
|
|
104
|
+
var MessageSquareIcon_default = MessageSquareIcon;
|
|
75
105
|
|
|
76
|
-
//
|
|
77
|
-
|
|
78
|
-
var t, f, n = "";
|
|
79
|
-
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
80
|
-
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
81
|
-
var o = e.length;
|
|
82
|
-
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
83
|
-
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
84
|
-
return n;
|
|
85
|
-
}
|
|
86
|
-
function clsx() {
|
|
87
|
-
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
88
|
-
return n;
|
|
89
|
-
}
|
|
90
|
-
var clsx_default = clsx;
|
|
106
|
+
// src/tokens/svg/communication/PaperclipIcon.tsx
|
|
107
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
91
108
|
|
|
92
|
-
// src/
|
|
109
|
+
// src/tokens/svg/communication/SendIcon.tsx
|
|
93
110
|
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
111
|
+
|
|
112
|
+
// src/components/ChatInput/ChatInput.tsx
|
|
113
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
94
114
|
var MAX_HEIGHT = 200;
|
|
95
115
|
var ChatInput = import_react.default.forwardRef(
|
|
96
116
|
(props, ref) => {
|
|
@@ -141,8 +161,8 @@ var ChatInput = import_react.default.forwardRef(
|
|
|
141
161
|
import_react.default.useEffect(() => {
|
|
142
162
|
updateHeight();
|
|
143
163
|
}, [value, updateHeight]);
|
|
144
|
-
return /* @__PURE__ */ (0,
|
|
145
|
-
/* @__PURE__ */ (0,
|
|
164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
|
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
146
166
|
"textarea",
|
|
147
167
|
{
|
|
148
168
|
ref: setRefs,
|
|
@@ -155,15 +175,15 @@ var ChatInput = import_react.default.forwardRef(
|
|
|
155
175
|
onKeyDown: handleKeyDown
|
|
156
176
|
}
|
|
157
177
|
),
|
|
158
|
-
/* @__PURE__ */ (0,
|
|
159
|
-
|
|
178
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
179
|
+
IconButton_default,
|
|
160
180
|
{
|
|
161
|
-
|
|
162
|
-
|
|
181
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageSquareIcon_default, {}),
|
|
182
|
+
type: buttonType,
|
|
183
|
+
size: "sm",
|
|
163
184
|
disabled: !hasText || disabled,
|
|
164
185
|
onClick: handleSubmit,
|
|
165
|
-
"aria-label": "\uC804\uC1A1"
|
|
166
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SendIcon_default, {})
|
|
186
|
+
"aria-label": "\uC804\uC1A1"
|
|
167
187
|
}
|
|
168
188
|
)
|
|
169
189
|
] });
|
|
@@ -1,7 +1,86 @@
|
|
|
1
|
+
/* src/components/IconButton/iconButton.scss */
|
|
2
|
+
.lib-xplat-icon-button {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
flex-shrink: 0;
|
|
7
|
+
border: 1px solid transparent;
|
|
8
|
+
border-radius: var(--spacing-radius-md);
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
11
|
+
}
|
|
12
|
+
.lib-xplat-icon-button.sm {
|
|
13
|
+
width: var(--spacing-control-height-sm);
|
|
14
|
+
height: var(--spacing-control-height-sm);
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
}
|
|
17
|
+
.lib-xplat-icon-button.md {
|
|
18
|
+
width: var(--spacing-control-height-md);
|
|
19
|
+
height: var(--spacing-control-height-md);
|
|
20
|
+
font-size: 18px;
|
|
21
|
+
}
|
|
22
|
+
.lib-xplat-icon-button.lg {
|
|
23
|
+
width: var(--spacing-control-height-lg);
|
|
24
|
+
height: var(--spacing-control-height-lg);
|
|
25
|
+
font-size: 22px;
|
|
26
|
+
}
|
|
27
|
+
.lib-xplat-icon-button:disabled {
|
|
28
|
+
cursor: not-allowed;
|
|
29
|
+
background-color: var(--semantic-surface-neutral-disabled) !important;
|
|
30
|
+
border-color: var(--semantic-surface-neutral-disabled) !important;
|
|
31
|
+
color: var(--semantic-text-disabled) !important;
|
|
32
|
+
}
|
|
33
|
+
.lib-xplat-icon-button.primary {
|
|
34
|
+
color: var(--semantic-text-inverse);
|
|
35
|
+
background-color: var(--semantic-surface-brand-default);
|
|
36
|
+
}
|
|
37
|
+
.lib-xplat-icon-button.primary:hover:not(:disabled) {
|
|
38
|
+
background-color: var(--semantic-surface-brand-strong);
|
|
39
|
+
}
|
|
40
|
+
.lib-xplat-icon-button.primary:focus-visible {
|
|
41
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
}
|
|
44
|
+
.lib-xplat-icon-button.secondary {
|
|
45
|
+
color: var(--semantic-surface-brand-default);
|
|
46
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
47
|
+
border-color: var(--semantic-border-default);
|
|
48
|
+
}
|
|
49
|
+
.lib-xplat-icon-button.secondary:hover:not(:disabled) {
|
|
50
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
51
|
+
}
|
|
52
|
+
.lib-xplat-icon-button.secondary:focus-visible {
|
|
53
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
54
|
+
outline-offset: 2px;
|
|
55
|
+
}
|
|
56
|
+
.lib-xplat-icon-button.danger {
|
|
57
|
+
color: var(--semantic-text-inverse);
|
|
58
|
+
background-color: var(--semantic-surface-error-default);
|
|
59
|
+
}
|
|
60
|
+
.lib-xplat-icon-button.danger:hover:not(:disabled) {
|
|
61
|
+
background-color: var(--semantic-surface-error-strong);
|
|
62
|
+
}
|
|
63
|
+
.lib-xplat-icon-button.danger:focus-visible {
|
|
64
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
65
|
+
outline-offset: 2px;
|
|
66
|
+
}
|
|
67
|
+
.lib-xplat-icon-button.ghost {
|
|
68
|
+
color: var(--semantic-text-subtle);
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
}
|
|
71
|
+
.lib-xplat-icon-button.ghost:hover:not(:disabled) {
|
|
72
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
73
|
+
}
|
|
74
|
+
.lib-xplat-icon-button.ghost:focus-visible {
|
|
75
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
76
|
+
outline-offset: 2px;
|
|
77
|
+
}
|
|
78
|
+
|
|
1
79
|
/* src/components/ChatInput/chatInput.scss */
|
|
2
80
|
.lib-xplat-chat-input {
|
|
3
81
|
display: flex;
|
|
4
82
|
align-items: flex-end;
|
|
83
|
+
width: 100%;
|
|
5
84
|
gap: var(--spacing-space-2);
|
|
6
85
|
padding: var(--spacing-space-2);
|
|
7
86
|
border: 1px solid var(--semantic-border-default);
|
|
@@ -29,9 +108,9 @@
|
|
|
29
108
|
min-height: var(--spacing-control-height-sm);
|
|
30
109
|
max-height: 200px;
|
|
31
110
|
overflow-y: auto;
|
|
32
|
-
padding: 0;
|
|
111
|
+
padding: 4px 0;
|
|
33
112
|
font-size: 16px;
|
|
34
|
-
line-height:
|
|
113
|
+
line-height: 24px;
|
|
35
114
|
color: var(--semantic-text-strong);
|
|
36
115
|
background: transparent;
|
|
37
116
|
}
|
|
@@ -42,46 +121,3 @@
|
|
|
42
121
|
cursor: not-allowed;
|
|
43
122
|
color: var(--semantic-text-disabled);
|
|
44
123
|
}
|
|
45
|
-
.lib-xplat-chat-input .chat-input-send {
|
|
46
|
-
display: inline-flex;
|
|
47
|
-
align-items: center;
|
|
48
|
-
justify-content: center;
|
|
49
|
-
flex-shrink: 0;
|
|
50
|
-
width: var(--spacing-control-height-xs);
|
|
51
|
-
height: var(--spacing-control-height-xs);
|
|
52
|
-
border: none;
|
|
53
|
-
border-radius: var(--spacing-radius-md);
|
|
54
|
-
cursor: pointer;
|
|
55
|
-
font-size: 20px;
|
|
56
|
-
transition: background-color 0.15s, opacity 0.15s;
|
|
57
|
-
}
|
|
58
|
-
.lib-xplat-chat-input .chat-input-send:disabled {
|
|
59
|
-
opacity: 0.4;
|
|
60
|
-
cursor: not-allowed;
|
|
61
|
-
}
|
|
62
|
-
.lib-xplat-chat-input .chat-input-send:focus-visible {
|
|
63
|
-
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
64
|
-
outline-offset: 2px;
|
|
65
|
-
}
|
|
66
|
-
.lib-xplat-chat-input .chat-input-send.btn-primary {
|
|
67
|
-
background-color: var(--semantic-surface-brand-default);
|
|
68
|
-
color: var(--semantic-text-inverse);
|
|
69
|
-
}
|
|
70
|
-
.lib-xplat-chat-input .chat-input-send.btn-primary:hover:not(:disabled) {
|
|
71
|
-
background-color: var(--semantic-surface-brand-strong);
|
|
72
|
-
}
|
|
73
|
-
.lib-xplat-chat-input .chat-input-send.btn-secondary {
|
|
74
|
-
background-color: var(--semantic-surface-neutral-default);
|
|
75
|
-
color: var(--semantic-surface-brand-default);
|
|
76
|
-
border: 1px solid var(--semantic-border-default);
|
|
77
|
-
}
|
|
78
|
-
.lib-xplat-chat-input .chat-input-send.btn-secondary:hover:not(:disabled) {
|
|
79
|
-
background-color: var(--semantic-surface-neutral-subtle);
|
|
80
|
-
}
|
|
81
|
-
.lib-xplat-chat-input .chat-input-send.btn-text {
|
|
82
|
-
background-color: transparent;
|
|
83
|
-
color: var(--semantic-surface-brand-default);
|
|
84
|
-
}
|
|
85
|
-
.lib-xplat-chat-input .chat-input-send.btn-text:hover:not(:disabled) {
|
|
86
|
-
background-color: var(--semantic-surface-neutral-subtle);
|
|
87
|
-
}
|
|
@@ -1,27 +1,60 @@
|
|
|
1
1
|
// src/components/ChatInput/ChatInput.tsx
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
5
|
+
function r(e) {
|
|
6
|
+
var t, f, n = "";
|
|
7
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
8
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
9
|
+
var o = e.length;
|
|
10
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
11
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
12
|
+
return n;
|
|
13
|
+
}
|
|
14
|
+
function clsx() {
|
|
15
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
16
|
+
return n;
|
|
17
|
+
}
|
|
18
|
+
var clsx_default = clsx;
|
|
19
|
+
|
|
20
|
+
// src/components/IconButton/IconButton.tsx
|
|
21
|
+
import { jsx } from "react/jsx-runtime";
|
|
22
|
+
var IconButton = (props) => {
|
|
23
|
+
const {
|
|
24
|
+
icon,
|
|
25
|
+
type = "primary",
|
|
26
|
+
size = "md",
|
|
27
|
+
disabled,
|
|
28
|
+
...rest
|
|
29
|
+
} = props;
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
"button",
|
|
32
|
+
{
|
|
33
|
+
className: clsx_default("lib-xplat-icon-button", type, size),
|
|
34
|
+
disabled,
|
|
35
|
+
...rest,
|
|
36
|
+
children: icon
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
};
|
|
40
|
+
IconButton.displayName = "IconButton";
|
|
41
|
+
var IconButton_default = IconButton;
|
|
42
|
+
|
|
4
43
|
// src/tokens/svg/communication/BellIcon.tsx
|
|
5
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
44
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
6
45
|
|
|
7
46
|
// src/tokens/svg/communication/BellOffIcon.tsx
|
|
8
|
-
import { jsx as
|
|
47
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
9
48
|
|
|
10
49
|
// src/tokens/svg/communication/InboxIcon.tsx
|
|
11
|
-
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
12
|
-
|
|
13
|
-
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
14
50
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
15
51
|
|
|
16
|
-
// src/tokens/svg/communication/
|
|
52
|
+
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
17
53
|
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
18
54
|
|
|
19
|
-
// src/tokens/svg/communication/
|
|
55
|
+
// src/tokens/svg/communication/MessageSquareIcon.tsx
|
|
20
56
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
21
|
-
|
|
22
|
-
// src/tokens/svg/communication/SendIcon.tsx
|
|
23
|
-
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
24
|
-
var SendIcon = () => /* @__PURE__ */ jsxs3(
|
|
57
|
+
var MessageSquareIcon = () => /* @__PURE__ */ jsx6(
|
|
25
58
|
"svg",
|
|
26
59
|
{
|
|
27
60
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -29,32 +62,19 @@ var SendIcon = () => /* @__PURE__ */ jsxs3(
|
|
|
29
62
|
height: "1em",
|
|
30
63
|
viewBox: "0 0 20 20",
|
|
31
64
|
fill: "none",
|
|
32
|
-
children:
|
|
33
|
-
/* @__PURE__ */ jsx7("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ jsx7("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18.3558 0.918873C18.3887 0.919879 18.4212 0.9224 18.4535 0.927663C18.4642 0.929393 18.4751 0.930348 18.4857 0.932545C18.527 0.941123 18.5675 0.953269 18.6068 0.968678C18.6178 0.972968 18.6282 0.978499 18.639 0.983327C18.6672 0.995914 18.6945 1.01021 18.7211 1.0263C18.7403 1.03794 18.7594 1.04988 18.7777 1.0634C18.7803 1.06534 18.7829 1.0673 18.7855 1.06926C18.8126 1.08979 18.839 1.11195 18.8637 1.13665C18.8872 1.16018 18.9084 1.18517 18.9281 1.21087C18.9322 1.21625 18.9359 1.22198 18.9398 1.22747C18.9501 1.24168 18.959 1.25667 18.9681 1.27141C18.9866 1.30108 19.0029 1.33154 19.017 1.36321C19.0214 1.37309 19.0267 1.38248 19.0306 1.39251C19.0461 1.43186 19.0581 1.47231 19.0668 1.5136C19.069 1.52426 19.0699 1.5351 19.0717 1.54583C19.077 1.57815 19.0794 1.61062 19.0805 1.64348C19.0808 1.65621 19.0817 1.66884 19.0814 1.68157C19.0799 1.75981 19.0681 1.83872 19.0414 1.91497L13.2074 18.581C13.1058 18.871 12.8377 19.0703 12.5306 19.0829C12.2237 19.0954 11.9398 18.9192 11.8148 18.6386L8.59706 11.4003L1.3617 8.18547C1.08085 8.06057 0.90492 7.77678 0.917368 7.46965C0.929915 7.16252 1.12827 6.89358 1.41834 6.79192L18.0853 0.958913C18.1613 0.932334 18.2398 0.919479 18.3178 0.917897C18.3305 0.91763 18.3431 0.918498 18.3558 0.918873ZM10.0609 10.999L12.4164 16.2997L16.5375 4.52239L10.0609 10.999ZM3.69862 7.58294L9.00038 9.93841L15.4808 3.45794L3.69862 7.58294Z", fill: "currentColor" }) }),
|
|
34
|
-
/* @__PURE__ */ jsx7("defs", { children: /* @__PURE__ */ jsx7("clipPath", { id: "send-clip", children: /* @__PURE__ */ jsx7("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
|
|
35
|
-
]
|
|
65
|
+
children: /* @__PURE__ */ jsx6("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.833 1.75C16.4739 1.75 17.0888 2.00479 17.542 2.45801C17.9952 2.91122 18.25 3.52605 18.25 4.16699V12.5C18.25 13.1409 17.9952 13.7558 17.542 14.209C17.0888 14.6621 16.4739 14.917 15.833 14.917H6.14355L3.03027 18.0303C2.81579 18.2448 2.49313 18.3094 2.21289 18.1934C1.93263 18.0773 1.75 17.8033 1.75 17.5V4.16699C1.75 3.52605 2.00479 2.91122 2.45801 2.45801C2.91122 2.00479 3.52605 1.75 4.16699 1.75H15.833ZM4.16699 3.25C3.92388 3.25 3.69046 3.34665 3.51855 3.51855C3.34665 3.69046 3.25 3.92388 3.25 4.16699V15.6895L5.30273 13.6367L5.41699 13.543C5.53928 13.4613 5.68382 13.4171 5.83301 13.417H15.833C16.076 13.417 16.3096 13.3202 16.4814 13.1484C16.6534 12.9765 16.75 12.7431 16.75 12.5V4.16699C16.75 3.92388 16.6534 3.69046 16.4814 3.51855C16.3095 3.34665 16.0761 3.25 15.833 3.25H4.16699Z", fill: "currentColor" })
|
|
36
66
|
}
|
|
37
67
|
);
|
|
38
|
-
var
|
|
68
|
+
var MessageSquareIcon_default = MessageSquareIcon;
|
|
39
69
|
|
|
40
|
-
//
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
var o = e.length;
|
|
46
|
-
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
47
|
-
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
48
|
-
return n;
|
|
49
|
-
}
|
|
50
|
-
function clsx() {
|
|
51
|
-
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
52
|
-
return n;
|
|
53
|
-
}
|
|
54
|
-
var clsx_default = clsx;
|
|
70
|
+
// src/tokens/svg/communication/PaperclipIcon.tsx
|
|
71
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
72
|
+
|
|
73
|
+
// src/tokens/svg/communication/SendIcon.tsx
|
|
74
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
55
75
|
|
|
56
76
|
// src/components/ChatInput/ChatInput.tsx
|
|
57
|
-
import { jsx as
|
|
77
|
+
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
58
78
|
var MAX_HEIGHT = 200;
|
|
59
79
|
var ChatInput = React.forwardRef(
|
|
60
80
|
(props, ref) => {
|
|
@@ -106,7 +126,7 @@ var ChatInput = React.forwardRef(
|
|
|
106
126
|
updateHeight();
|
|
107
127
|
}, [value, updateHeight]);
|
|
108
128
|
return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
|
|
109
|
-
/* @__PURE__ */
|
|
129
|
+
/* @__PURE__ */ jsx9(
|
|
110
130
|
"textarea",
|
|
111
131
|
{
|
|
112
132
|
ref: setRefs,
|
|
@@ -119,15 +139,15 @@ var ChatInput = React.forwardRef(
|
|
|
119
139
|
onKeyDown: handleKeyDown
|
|
120
140
|
}
|
|
121
141
|
),
|
|
122
|
-
/* @__PURE__ */
|
|
123
|
-
|
|
142
|
+
/* @__PURE__ */ jsx9(
|
|
143
|
+
IconButton_default,
|
|
124
144
|
{
|
|
125
|
-
|
|
126
|
-
|
|
145
|
+
icon: /* @__PURE__ */ jsx9(MessageSquareIcon_default, {}),
|
|
146
|
+
type: buttonType,
|
|
147
|
+
size: "sm",
|
|
127
148
|
disabled: !hasText || disabled,
|
|
128
149
|
onClick: handleSubmit,
|
|
129
|
-
"aria-label": "\uC804\uC1A1"
|
|
130
|
-
children: /* @__PURE__ */ jsx8(SendIcon_default, {})
|
|
150
|
+
"aria-label": "\uC804\uC1A1"
|
|
131
151
|
}
|
|
132
152
|
)
|
|
133
153
|
] });
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/IconButton/index.ts
|
|
21
|
+
var IconButton_exports = {};
|
|
22
|
+
__export(IconButton_exports, {
|
|
23
|
+
IconButton: () => IconButton_default
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(IconButton_exports);
|
|
26
|
+
|
|
27
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
28
|
+
function r(e) {
|
|
29
|
+
var t, f, n = "";
|
|
30
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
31
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
32
|
+
var o = e.length;
|
|
33
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
34
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
35
|
+
return n;
|
|
36
|
+
}
|
|
37
|
+
function clsx() {
|
|
38
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
39
|
+
return n;
|
|
40
|
+
}
|
|
41
|
+
var clsx_default = clsx;
|
|
42
|
+
|
|
43
|
+
// src/components/IconButton/IconButton.tsx
|
|
44
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
45
|
+
var IconButton = (props) => {
|
|
46
|
+
const {
|
|
47
|
+
icon,
|
|
48
|
+
type = "primary",
|
|
49
|
+
size = "md",
|
|
50
|
+
disabled,
|
|
51
|
+
...rest
|
|
52
|
+
} = props;
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
54
|
+
"button",
|
|
55
|
+
{
|
|
56
|
+
className: clsx_default("lib-xplat-icon-button", type, size),
|
|
57
|
+
disabled,
|
|
58
|
+
...rest,
|
|
59
|
+
children: icon
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
};
|
|
63
|
+
IconButton.displayName = "IconButton";
|
|
64
|
+
var IconButton_default = IconButton;
|
|
65
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
66
|
+
0 && (module.exports = {
|
|
67
|
+
IconButton
|
|
68
|
+
});
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/* src/components/IconButton/iconButton.scss */
|
|
2
|
+
.lib-xplat-icon-button {
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
flex-shrink: 0;
|
|
7
|
+
border: 1px solid transparent;
|
|
8
|
+
border-radius: var(--spacing-radius-md);
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
transition: background-color 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
11
|
+
}
|
|
12
|
+
.lib-xplat-icon-button.sm {
|
|
13
|
+
width: var(--spacing-control-height-sm);
|
|
14
|
+
height: var(--spacing-control-height-sm);
|
|
15
|
+
font-size: 14px;
|
|
16
|
+
}
|
|
17
|
+
.lib-xplat-icon-button.md {
|
|
18
|
+
width: var(--spacing-control-height-md);
|
|
19
|
+
height: var(--spacing-control-height-md);
|
|
20
|
+
font-size: 18px;
|
|
21
|
+
}
|
|
22
|
+
.lib-xplat-icon-button.lg {
|
|
23
|
+
width: var(--spacing-control-height-lg);
|
|
24
|
+
height: var(--spacing-control-height-lg);
|
|
25
|
+
font-size: 22px;
|
|
26
|
+
}
|
|
27
|
+
.lib-xplat-icon-button:disabled {
|
|
28
|
+
cursor: not-allowed;
|
|
29
|
+
background-color: var(--semantic-surface-neutral-disabled) !important;
|
|
30
|
+
border-color: var(--semantic-surface-neutral-disabled) !important;
|
|
31
|
+
color: var(--semantic-text-disabled) !important;
|
|
32
|
+
}
|
|
33
|
+
.lib-xplat-icon-button.primary {
|
|
34
|
+
color: var(--semantic-text-inverse);
|
|
35
|
+
background-color: var(--semantic-surface-brand-default);
|
|
36
|
+
}
|
|
37
|
+
.lib-xplat-icon-button.primary:hover:not(:disabled) {
|
|
38
|
+
background-color: var(--semantic-surface-brand-strong);
|
|
39
|
+
}
|
|
40
|
+
.lib-xplat-icon-button.primary:focus-visible {
|
|
41
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
42
|
+
outline-offset: 2px;
|
|
43
|
+
}
|
|
44
|
+
.lib-xplat-icon-button.secondary {
|
|
45
|
+
color: var(--semantic-surface-brand-default);
|
|
46
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
47
|
+
border-color: var(--semantic-border-default);
|
|
48
|
+
}
|
|
49
|
+
.lib-xplat-icon-button.secondary:hover:not(:disabled) {
|
|
50
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
51
|
+
}
|
|
52
|
+
.lib-xplat-icon-button.secondary:focus-visible {
|
|
53
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
54
|
+
outline-offset: 2px;
|
|
55
|
+
}
|
|
56
|
+
.lib-xplat-icon-button.danger {
|
|
57
|
+
color: var(--semantic-text-inverse);
|
|
58
|
+
background-color: var(--semantic-surface-error-default);
|
|
59
|
+
}
|
|
60
|
+
.lib-xplat-icon-button.danger:hover:not(:disabled) {
|
|
61
|
+
background-color: var(--semantic-surface-error-strong);
|
|
62
|
+
}
|
|
63
|
+
.lib-xplat-icon-button.danger:focus-visible {
|
|
64
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
65
|
+
outline-offset: 2px;
|
|
66
|
+
}
|
|
67
|
+
.lib-xplat-icon-button.ghost {
|
|
68
|
+
color: var(--semantic-text-subtle);
|
|
69
|
+
background-color: transparent;
|
|
70
|
+
}
|
|
71
|
+
.lib-xplat-icon-button.ghost:hover:not(:disabled) {
|
|
72
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
73
|
+
}
|
|
74
|
+
.lib-xplat-icon-button.ghost:focus-visible {
|
|
75
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
76
|
+
outline-offset: 2px;
|
|
77
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { B as ButtonAttributes } from '../../attributes-DJIWir_0.cjs';
|
|
4
|
+
|
|
5
|
+
type IconButtonType = "primary" | "secondary" | "danger" | "ghost";
|
|
6
|
+
type IconButtonSize = "sm" | "md" | "lg";
|
|
7
|
+
interface IconButtonProps extends Omit<ButtonAttributes, "className" | "children"> {
|
|
8
|
+
icon: React.ReactNode;
|
|
9
|
+
type?: IconButtonType;
|
|
10
|
+
size?: IconButtonSize;
|
|
11
|
+
"aria-label": string;
|
|
12
|
+
}
|
|
13
|
+
declare const IconButton: {
|
|
14
|
+
(props: IconButtonProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { IconButton };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { B as ButtonAttributes } from '../../attributes-DJIWir_0.js';
|
|
4
|
+
|
|
5
|
+
type IconButtonType = "primary" | "secondary" | "danger" | "ghost";
|
|
6
|
+
type IconButtonSize = "sm" | "md" | "lg";
|
|
7
|
+
interface IconButtonProps extends Omit<ButtonAttributes, "className" | "children"> {
|
|
8
|
+
icon: React.ReactNode;
|
|
9
|
+
type?: IconButtonType;
|
|
10
|
+
size?: IconButtonSize;
|
|
11
|
+
"aria-label": string;
|
|
12
|
+
}
|
|
13
|
+
declare const IconButton: {
|
|
14
|
+
(props: IconButtonProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export { IconButton };
|