@x-plat/design-system 0.5.21 → 0.5.22
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 +214 -0
- package/dist/components/ChatInput/index.css +133 -0
- package/dist/components/ChatInput/index.d.cts +14 -0
- package/dist/components/ChatInput/index.d.ts +14 -0
- package/dist/components/ChatInput/index.js +177 -0
- package/dist/components/Table/index.cjs +2 -1
- package/dist/components/Table/index.css +117 -0
- package/dist/components/Table/index.d.cts +3 -1
- package/dist/components/Table/index.d.ts +3 -1
- package/dist/components/Table/index.js +2 -1
- package/dist/components/index.cjs +655 -573
- package/dist/components/index.css +251 -46
- package/dist/components/index.d.cts +1 -0
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +653 -572
- package/dist/index.cjs +664 -597
- package/dist/index.css +251 -46
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +662 -596
- package/package.json +1 -1
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/components/ChatInput/index.ts
|
|
31
|
+
var ChatInput_exports = {};
|
|
32
|
+
__export(ChatInput_exports, {
|
|
33
|
+
ChatInput: () => ChatInput_default
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(ChatInput_exports);
|
|
36
|
+
|
|
37
|
+
// src/components/ChatInput/ChatInput.tsx
|
|
38
|
+
var import_react2 = __toESM(require("react"), 1);
|
|
39
|
+
|
|
40
|
+
// src/components/TextArea/TextArea.tsx
|
|
41
|
+
var import_react = __toESM(require("react"), 1);
|
|
42
|
+
|
|
43
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
44
|
+
function r(e) {
|
|
45
|
+
var t, f, n = "";
|
|
46
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
47
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
48
|
+
var o = e.length;
|
|
49
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
50
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
51
|
+
return n;
|
|
52
|
+
}
|
|
53
|
+
function clsx() {
|
|
54
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
55
|
+
return n;
|
|
56
|
+
}
|
|
57
|
+
var clsx_default = clsx;
|
|
58
|
+
|
|
59
|
+
// src/components/TextArea/TextArea.tsx
|
|
60
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
61
|
+
var TextArea = import_react.default.forwardRef(
|
|
62
|
+
(props, ref) => {
|
|
63
|
+
const { value, onChange, disabled, ...textareaProps } = props;
|
|
64
|
+
const localRef = import_react.default.useRef(null);
|
|
65
|
+
const setRefs = (el) => {
|
|
66
|
+
localRef.current = el;
|
|
67
|
+
if (!ref) return;
|
|
68
|
+
if (typeof ref === "function") {
|
|
69
|
+
ref(el);
|
|
70
|
+
} else if (ref && typeof ref === "object" && "current" in ref) {
|
|
71
|
+
ref.current = el;
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
const handleOnChange = (e) => {
|
|
75
|
+
const val = e.target.value;
|
|
76
|
+
if (onChange) {
|
|
77
|
+
const event = {
|
|
78
|
+
...e,
|
|
79
|
+
target: { value: val }
|
|
80
|
+
};
|
|
81
|
+
onChange(event);
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
import_react.default.useEffect(() => {
|
|
85
|
+
const el = localRef.current;
|
|
86
|
+
if (!el) return;
|
|
87
|
+
el.style.height = "0px";
|
|
88
|
+
const nextHeight = Math.min(el.scrollHeight, 400);
|
|
89
|
+
el.style.height = `${nextHeight}px`;
|
|
90
|
+
}, [value]);
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
"div",
|
|
93
|
+
{
|
|
94
|
+
className: clsx_default(
|
|
95
|
+
"lib-xplat-textarea",
|
|
96
|
+
disabled ? "disabled" : void 0
|
|
97
|
+
),
|
|
98
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
99
|
+
"textarea",
|
|
100
|
+
{
|
|
101
|
+
...textareaProps,
|
|
102
|
+
ref: setRefs,
|
|
103
|
+
disabled,
|
|
104
|
+
value,
|
|
105
|
+
onChange: handleOnChange
|
|
106
|
+
}
|
|
107
|
+
)
|
|
108
|
+
}
|
|
109
|
+
) });
|
|
110
|
+
}
|
|
111
|
+
);
|
|
112
|
+
TextArea.displayName = "TextArea";
|
|
113
|
+
var TextArea_default = TextArea;
|
|
114
|
+
|
|
115
|
+
// src/tokens/svg/communication/BellIcon.tsx
|
|
116
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
117
|
+
|
|
118
|
+
// src/tokens/svg/communication/BellOffIcon.tsx
|
|
119
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
120
|
+
|
|
121
|
+
// src/tokens/svg/communication/InboxIcon.tsx
|
|
122
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
123
|
+
|
|
124
|
+
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
125
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
126
|
+
|
|
127
|
+
// src/tokens/svg/communication/MessageSquareIcon.tsx
|
|
128
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
129
|
+
|
|
130
|
+
// src/tokens/svg/communication/PaperclipIcon.tsx
|
|
131
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
132
|
+
|
|
133
|
+
// src/tokens/svg/communication/SendIcon.tsx
|
|
134
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
135
|
+
var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
|
|
136
|
+
"svg",
|
|
137
|
+
{
|
|
138
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
139
|
+
width: "1em",
|
|
140
|
+
height: "1em",
|
|
141
|
+
viewBox: "0 0 20 20",
|
|
142
|
+
fill: "none",
|
|
143
|
+
children: [
|
|
144
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ (0, import_jsx_runtime8.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" }) }),
|
|
145
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("clipPath", { id: "send-clip", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
);
|
|
149
|
+
var SendIcon_default = SendIcon;
|
|
150
|
+
|
|
151
|
+
// src/components/ChatInput/ChatInput.tsx
|
|
152
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
153
|
+
var ChatInput = import_react2.default.forwardRef(
|
|
154
|
+
(props, ref) => {
|
|
155
|
+
const {
|
|
156
|
+
placeholder,
|
|
157
|
+
value: valueProp,
|
|
158
|
+
disabled = false,
|
|
159
|
+
buttonType = "primary",
|
|
160
|
+
onSubmit,
|
|
161
|
+
onChange
|
|
162
|
+
} = props;
|
|
163
|
+
const isControlled = valueProp !== void 0;
|
|
164
|
+
const [internalValue, setInternalValue] = import_react2.default.useState("");
|
|
165
|
+
const value = isControlled ? valueProp : internalValue;
|
|
166
|
+
const hasText = value.trim().length > 0;
|
|
167
|
+
const handleChange = (e) => {
|
|
168
|
+
const val = e.target.value;
|
|
169
|
+
if (!isControlled) setInternalValue(val);
|
|
170
|
+
onChange?.(val);
|
|
171
|
+
};
|
|
172
|
+
const handleSubmit = () => {
|
|
173
|
+
if (!hasText || disabled) return;
|
|
174
|
+
onSubmit?.(value);
|
|
175
|
+
if (!isControlled) setInternalValue("");
|
|
176
|
+
};
|
|
177
|
+
const handleKeyDown = (e) => {
|
|
178
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
179
|
+
e.preventDefault();
|
|
180
|
+
handleSubmit();
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
|
|
184
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
185
|
+
TextArea_default,
|
|
186
|
+
{
|
|
187
|
+
ref,
|
|
188
|
+
placeholder,
|
|
189
|
+
value,
|
|
190
|
+
disabled,
|
|
191
|
+
onChange: handleChange,
|
|
192
|
+
onKeyDown: handleKeyDown
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
196
|
+
"button",
|
|
197
|
+
{
|
|
198
|
+
type: "button",
|
|
199
|
+
className: clsx_default("chat-input-send", `btn-${buttonType}`),
|
|
200
|
+
disabled: !hasText || disabled,
|
|
201
|
+
onClick: handleSubmit,
|
|
202
|
+
"aria-label": "\uC804\uC1A1",
|
|
203
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SendIcon_default, {})
|
|
204
|
+
}
|
|
205
|
+
)
|
|
206
|
+
] });
|
|
207
|
+
}
|
|
208
|
+
);
|
|
209
|
+
ChatInput.displayName = "ChatInput";
|
|
210
|
+
var ChatInput_default = ChatInput;
|
|
211
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
212
|
+
0 && (module.exports = {
|
|
213
|
+
ChatInput
|
|
214
|
+
});
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
/* src/components/TextArea/textArea.scss */
|
|
2
|
+
.lib-xplat-textarea-wrapper {
|
|
3
|
+
display: flex;
|
|
4
|
+
flex-direction: column;
|
|
5
|
+
gap: var(--spacing-space-2);
|
|
6
|
+
}
|
|
7
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea {
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: center;
|
|
10
|
+
border: 1px solid var(--semantic-border-default);
|
|
11
|
+
border-radius: var(--spacing-radius-md);
|
|
12
|
+
min-height: var(--spacing-control-height-md);
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
15
|
+
width: 100%;
|
|
16
|
+
transition: border-color 0.15s, box-shadow 0.15s;
|
|
17
|
+
}
|
|
18
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
|
|
19
|
+
border-color: var(--semantic-border-strong);
|
|
20
|
+
}
|
|
21
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
|
|
22
|
+
border-color: var(--semantic-interaction-focus-ring);
|
|
23
|
+
box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
|
|
24
|
+
}
|
|
25
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
|
|
26
|
+
border-color: var(--semantic-border-strong);
|
|
27
|
+
}
|
|
28
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
|
|
29
|
+
background-color: var(--semantic-surface-neutral-disabled);
|
|
30
|
+
cursor: not-allowed;
|
|
31
|
+
}
|
|
32
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
|
|
33
|
+
border: none;
|
|
34
|
+
outline: none;
|
|
35
|
+
flex: 1;
|
|
36
|
+
padding-left: var(--spacing-space-4);
|
|
37
|
+
padding-right: var(--spacing-space-4);
|
|
38
|
+
width: 100%;
|
|
39
|
+
color: var(--semantic-text-subtle);
|
|
40
|
+
resize: none;
|
|
41
|
+
height: 1.5em;
|
|
42
|
+
}
|
|
43
|
+
.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
|
|
44
|
+
cursor: not-allowed;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* src/components/ChatInput/chatInput.scss */
|
|
48
|
+
.lib-xplat-chat-input {
|
|
49
|
+
display: flex;
|
|
50
|
+
align-items: flex-end;
|
|
51
|
+
gap: var(--spacing-space-2);
|
|
52
|
+
padding: var(--spacing-space-3);
|
|
53
|
+
border: 1px solid var(--semantic-border-default);
|
|
54
|
+
border-radius: var(--spacing-radius-lg);
|
|
55
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
56
|
+
transition: border-color 0.15s, box-shadow 0.15s;
|
|
57
|
+
}
|
|
58
|
+
.lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
|
|
59
|
+
border-color: var(--semantic-border-strong);
|
|
60
|
+
}
|
|
61
|
+
.lib-xplat-chat-input:focus-within {
|
|
62
|
+
border-color: var(--semantic-interaction-focus-ring);
|
|
63
|
+
box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
|
|
64
|
+
}
|
|
65
|
+
.lib-xplat-chat-input.disabled {
|
|
66
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
67
|
+
border-color: var(--semantic-border-default);
|
|
68
|
+
cursor: not-allowed;
|
|
69
|
+
}
|
|
70
|
+
.lib-xplat-chat-input .chat-input-textarea {
|
|
71
|
+
flex: 1;
|
|
72
|
+
border: none;
|
|
73
|
+
outline: none;
|
|
74
|
+
resize: none;
|
|
75
|
+
min-height: var(--spacing-control-height-lg);
|
|
76
|
+
max-height: 200px;
|
|
77
|
+
overflow-y: auto;
|
|
78
|
+
padding: 0;
|
|
79
|
+
font-size: 16px;
|
|
80
|
+
line-height: 1.5;
|
|
81
|
+
color: var(--semantic-text-strong);
|
|
82
|
+
background: transparent;
|
|
83
|
+
}
|
|
84
|
+
.lib-xplat-chat-input .chat-input-textarea::placeholder {
|
|
85
|
+
color: var(--semantic-text-disabled);
|
|
86
|
+
}
|
|
87
|
+
.lib-xplat-chat-input .chat-input-textarea:disabled {
|
|
88
|
+
cursor: not-allowed;
|
|
89
|
+
color: var(--semantic-text-disabled);
|
|
90
|
+
}
|
|
91
|
+
.lib-xplat-chat-input .chat-input-send {
|
|
92
|
+
display: inline-flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
flex-shrink: 0;
|
|
96
|
+
width: var(--spacing-control-height-lg);
|
|
97
|
+
height: var(--spacing-control-height-lg);
|
|
98
|
+
border: none;
|
|
99
|
+
border-radius: var(--spacing-radius-md);
|
|
100
|
+
cursor: pointer;
|
|
101
|
+
font-size: 20px;
|
|
102
|
+
transition: background-color 0.15s, opacity 0.15s;
|
|
103
|
+
}
|
|
104
|
+
.lib-xplat-chat-input .chat-input-send:disabled {
|
|
105
|
+
opacity: 0.4;
|
|
106
|
+
cursor: not-allowed;
|
|
107
|
+
}
|
|
108
|
+
.lib-xplat-chat-input .chat-input-send:focus-visible {
|
|
109
|
+
outline: 2px solid var(--semantic-interaction-focus-ring);
|
|
110
|
+
outline-offset: 2px;
|
|
111
|
+
}
|
|
112
|
+
.lib-xplat-chat-input .chat-input-send.btn-primary {
|
|
113
|
+
background-color: var(--semantic-surface-brand-default);
|
|
114
|
+
color: var(--semantic-text-inverse);
|
|
115
|
+
}
|
|
116
|
+
.lib-xplat-chat-input .chat-input-send.btn-primary:hover:not(:disabled) {
|
|
117
|
+
background-color: var(--semantic-surface-brand-strong);
|
|
118
|
+
}
|
|
119
|
+
.lib-xplat-chat-input .chat-input-send.btn-secondary {
|
|
120
|
+
background-color: var(--semantic-surface-neutral-default);
|
|
121
|
+
color: var(--semantic-surface-brand-default);
|
|
122
|
+
border: 1px solid var(--semantic-border-default);
|
|
123
|
+
}
|
|
124
|
+
.lib-xplat-chat-input .chat-input-send.btn-secondary:hover:not(:disabled) {
|
|
125
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
126
|
+
}
|
|
127
|
+
.lib-xplat-chat-input .chat-input-send.btn-text {
|
|
128
|
+
background-color: transparent;
|
|
129
|
+
color: var(--semantic-surface-brand-default);
|
|
130
|
+
}
|
|
131
|
+
.lib-xplat-chat-input .chat-input-send.btn-text:hover:not(:disabled) {
|
|
132
|
+
background-color: var(--semantic-surface-neutral-subtle);
|
|
133
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type ButtonType = "primary" | "secondary" | "text";
|
|
4
|
+
interface ChatInputProps {
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
value?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
buttonType?: ButtonType;
|
|
9
|
+
onSubmit?: (value: string) => void;
|
|
10
|
+
onChange?: (value: string) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
13
|
+
|
|
14
|
+
export { ChatInput };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
type ButtonType = "primary" | "secondary" | "text";
|
|
4
|
+
interface ChatInputProps {
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
value?: string;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
buttonType?: ButtonType;
|
|
9
|
+
onSubmit?: (value: string) => void;
|
|
10
|
+
onChange?: (value: string) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
13
|
+
|
|
14
|
+
export { ChatInput };
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
// src/components/ChatInput/ChatInput.tsx
|
|
2
|
+
import React2 from "react";
|
|
3
|
+
|
|
4
|
+
// src/components/TextArea/TextArea.tsx
|
|
5
|
+
import React from "react";
|
|
6
|
+
|
|
7
|
+
// ../../node_modules/clsx/dist/clsx.mjs
|
|
8
|
+
function r(e) {
|
|
9
|
+
var t, f, n = "";
|
|
10
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
11
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
12
|
+
var o = e.length;
|
|
13
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
14
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
15
|
+
return n;
|
|
16
|
+
}
|
|
17
|
+
function clsx() {
|
|
18
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
19
|
+
return n;
|
|
20
|
+
}
|
|
21
|
+
var clsx_default = clsx;
|
|
22
|
+
|
|
23
|
+
// src/components/TextArea/TextArea.tsx
|
|
24
|
+
import { jsx } from "react/jsx-runtime";
|
|
25
|
+
var TextArea = React.forwardRef(
|
|
26
|
+
(props, ref) => {
|
|
27
|
+
const { value, onChange, disabled, ...textareaProps } = props;
|
|
28
|
+
const localRef = React.useRef(null);
|
|
29
|
+
const setRefs = (el) => {
|
|
30
|
+
localRef.current = el;
|
|
31
|
+
if (!ref) return;
|
|
32
|
+
if (typeof ref === "function") {
|
|
33
|
+
ref(el);
|
|
34
|
+
} else if (ref && typeof ref === "object" && "current" in ref) {
|
|
35
|
+
ref.current = el;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const handleOnChange = (e) => {
|
|
39
|
+
const val = e.target.value;
|
|
40
|
+
if (onChange) {
|
|
41
|
+
const event = {
|
|
42
|
+
...e,
|
|
43
|
+
target: { value: val }
|
|
44
|
+
};
|
|
45
|
+
onChange(event);
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
React.useEffect(() => {
|
|
49
|
+
const el = localRef.current;
|
|
50
|
+
if (!el) return;
|
|
51
|
+
el.style.height = "0px";
|
|
52
|
+
const nextHeight = Math.min(el.scrollHeight, 400);
|
|
53
|
+
el.style.height = `${nextHeight}px`;
|
|
54
|
+
}, [value]);
|
|
55
|
+
return /* @__PURE__ */ jsx("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ jsx(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
className: clsx_default(
|
|
59
|
+
"lib-xplat-textarea",
|
|
60
|
+
disabled ? "disabled" : void 0
|
|
61
|
+
),
|
|
62
|
+
children: /* @__PURE__ */ jsx(
|
|
63
|
+
"textarea",
|
|
64
|
+
{
|
|
65
|
+
...textareaProps,
|
|
66
|
+
ref: setRefs,
|
|
67
|
+
disabled,
|
|
68
|
+
value,
|
|
69
|
+
onChange: handleOnChange
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
) });
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
TextArea.displayName = "TextArea";
|
|
77
|
+
var TextArea_default = TextArea;
|
|
78
|
+
|
|
79
|
+
// src/tokens/svg/communication/BellIcon.tsx
|
|
80
|
+
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
81
|
+
|
|
82
|
+
// src/tokens/svg/communication/BellOffIcon.tsx
|
|
83
|
+
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
84
|
+
|
|
85
|
+
// src/tokens/svg/communication/InboxIcon.tsx
|
|
86
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
87
|
+
|
|
88
|
+
// src/tokens/svg/communication/MessageCircleIcon.tsx
|
|
89
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
90
|
+
|
|
91
|
+
// src/tokens/svg/communication/MessageSquareIcon.tsx
|
|
92
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
93
|
+
|
|
94
|
+
// src/tokens/svg/communication/PaperclipIcon.tsx
|
|
95
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
96
|
+
|
|
97
|
+
// src/tokens/svg/communication/SendIcon.tsx
|
|
98
|
+
import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
99
|
+
var SendIcon = () => /* @__PURE__ */ jsxs3(
|
|
100
|
+
"svg",
|
|
101
|
+
{
|
|
102
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
103
|
+
width: "1em",
|
|
104
|
+
height: "1em",
|
|
105
|
+
viewBox: "0 0 20 20",
|
|
106
|
+
fill: "none",
|
|
107
|
+
children: [
|
|
108
|
+
/* @__PURE__ */ jsx8("g", { clipPath: "url(#send-clip)", children: /* @__PURE__ */ jsx8("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" }) }),
|
|
109
|
+
/* @__PURE__ */ jsx8("defs", { children: /* @__PURE__ */ jsx8("clipPath", { id: "send-clip", children: /* @__PURE__ */ jsx8("rect", { width: "20", height: "20", fill: "currentColor" }) }) })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
var SendIcon_default = SendIcon;
|
|
114
|
+
|
|
115
|
+
// src/components/ChatInput/ChatInput.tsx
|
|
116
|
+
import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
117
|
+
var ChatInput = React2.forwardRef(
|
|
118
|
+
(props, ref) => {
|
|
119
|
+
const {
|
|
120
|
+
placeholder,
|
|
121
|
+
value: valueProp,
|
|
122
|
+
disabled = false,
|
|
123
|
+
buttonType = "primary",
|
|
124
|
+
onSubmit,
|
|
125
|
+
onChange
|
|
126
|
+
} = props;
|
|
127
|
+
const isControlled = valueProp !== void 0;
|
|
128
|
+
const [internalValue, setInternalValue] = React2.useState("");
|
|
129
|
+
const value = isControlled ? valueProp : internalValue;
|
|
130
|
+
const hasText = value.trim().length > 0;
|
|
131
|
+
const handleChange = (e) => {
|
|
132
|
+
const val = e.target.value;
|
|
133
|
+
if (!isControlled) setInternalValue(val);
|
|
134
|
+
onChange?.(val);
|
|
135
|
+
};
|
|
136
|
+
const handleSubmit = () => {
|
|
137
|
+
if (!hasText || disabled) return;
|
|
138
|
+
onSubmit?.(value);
|
|
139
|
+
if (!isControlled) setInternalValue("");
|
|
140
|
+
};
|
|
141
|
+
const handleKeyDown = (e) => {
|
|
142
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
143
|
+
e.preventDefault();
|
|
144
|
+
handleSubmit();
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
|
|
148
|
+
/* @__PURE__ */ jsx9(
|
|
149
|
+
TextArea_default,
|
|
150
|
+
{
|
|
151
|
+
ref,
|
|
152
|
+
placeholder,
|
|
153
|
+
value,
|
|
154
|
+
disabled,
|
|
155
|
+
onChange: handleChange,
|
|
156
|
+
onKeyDown: handleKeyDown
|
|
157
|
+
}
|
|
158
|
+
),
|
|
159
|
+
/* @__PURE__ */ jsx9(
|
|
160
|
+
"button",
|
|
161
|
+
{
|
|
162
|
+
type: "button",
|
|
163
|
+
className: clsx_default("chat-input-send", `btn-${buttonType}`),
|
|
164
|
+
disabled: !hasText || disabled,
|
|
165
|
+
onClick: handleSubmit,
|
|
166
|
+
"aria-label": "\uC804\uC1A1",
|
|
167
|
+
children: /* @__PURE__ */ jsx9(SendIcon_default, {})
|
|
168
|
+
}
|
|
169
|
+
)
|
|
170
|
+
] });
|
|
171
|
+
}
|
|
172
|
+
);
|
|
173
|
+
ChatInput.displayName = "ChatInput";
|
|
174
|
+
var ChatInput_default = ChatInput;
|
|
175
|
+
export {
|
|
176
|
+
ChatInput_default as ChatInput
|
|
177
|
+
};
|
|
@@ -53,12 +53,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
|
|
|
53
53
|
var Table = (props) => {
|
|
54
54
|
const {
|
|
55
55
|
children,
|
|
56
|
+
size = "md",
|
|
56
57
|
rowBorderUse = true,
|
|
57
58
|
colBorderUse = true,
|
|
58
59
|
headerSticky = false,
|
|
59
60
|
stickyShadow = true
|
|
60
61
|
} = props;
|
|
61
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className:
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `lib-xplat-table-wrapper ${size}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
63
|
TableContext_default.Provider,
|
|
63
64
|
{
|
|
64
65
|
value: {
|