@x-plat/design-system 0.5.25 → 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.
Files changed (21) hide show
  1. package/dist/components/ChatInput/index.cjs +59 -39
  2. package/dist/components/ChatInput/index.css +80 -45
  3. package/dist/components/ChatInput/index.d.cts +1 -1
  4. package/dist/components/ChatInput/index.d.ts +1 -1
  5. package/dist/components/ChatInput/index.js +59 -39
  6. package/dist/components/IconButton/index.cjs +68 -0
  7. package/dist/components/IconButton/index.css +77 -0
  8. package/dist/components/IconButton/index.d.cts +18 -0
  9. package/dist/components/IconButton/index.d.ts +18 -0
  10. package/dist/components/IconButton/index.js +41 -0
  11. package/dist/components/index.cjs +329 -305
  12. package/dist/components/index.css +80 -45
  13. package/dist/components/index.d.cts +1 -0
  14. package/dist/components/index.d.ts +1 -0
  15. package/dist/components/index.js +272 -249
  16. package/dist/index.cjs +339 -312
  17. package/dist/index.css +80 -45
  18. package/dist/index.d.cts +1 -0
  19. package/dist/index.d.ts +1 -0
  20. package/dist/index.js +280 -254
  21. package/package.json +1 -1
package/dist/components/ChatInput/index.cjs CHANGED
@@ -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
- // src/tokens/svg/communication/BellIcon.tsx
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/BellOffIcon.tsx
79
+ // src/tokens/svg/communication/BellIcon.tsx
44
80
  var import_jsx_runtime2 = require("react/jsx-runtime");
45
81
 
46
- // src/tokens/svg/communication/InboxIcon.tsx
82
+ // src/tokens/svg/communication/BellOffIcon.tsx
47
83
  var import_jsx_runtime3 = require("react/jsx-runtime");
48
84
 
49
- // src/tokens/svg/communication/MessageCircleIcon.tsx
85
+ // src/tokens/svg/communication/InboxIcon.tsx
50
86
  var import_jsx_runtime4 = require("react/jsx-runtime");
51
87
 
52
- // src/tokens/svg/communication/MessageSquareIcon.tsx
88
+ // src/tokens/svg/communication/MessageCircleIcon.tsx
53
89
  var import_jsx_runtime5 = require("react/jsx-runtime");
54
90
 
55
- // src/tokens/svg/communication/PaperclipIcon.tsx
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 SendIcon_default = SendIcon;
104
+ var MessageSquareIcon_default = MessageSquareIcon;
75
105
 
76
- // ../../node_modules/clsx/dist/clsx.mjs
77
- function r(e) {
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/components/ChatInput/ChatInput.tsx
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, import_jsx_runtime8.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
145
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
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, import_jsx_runtime8.jsx)(
159
- "button",
178
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
179
+ IconButton_default,
160
180
  {
161
- type: "button",
162
- className: clsx_default("chat-input-send", `btn-${buttonType}`),
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
  ] });
package/dist/components/ChatInput/index.css CHANGED
@@ -1,3 +1,81 @@
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;
@@ -30,9 +108,9 @@
30
108
  min-height: var(--spacing-control-height-sm);
31
109
  max-height: 200px;
32
110
  overflow-y: auto;
33
- padding: 0;
111
+ padding: 4px 0;
34
112
  font-size: 16px;
35
- line-height: 1.5;
113
+ line-height: 24px;
36
114
  color: var(--semantic-text-strong);
37
115
  background: transparent;
38
116
  }
@@ -43,46 +121,3 @@
43
121
  cursor: not-allowed;
44
122
  color: var(--semantic-text-disabled);
45
123
  }
46
- .lib-xplat-chat-input .chat-input-send {
47
- display: inline-flex;
48
- align-items: center;
49
- justify-content: center;
50
- flex-shrink: 0;
51
- width: var(--spacing-control-height-sm);
52
- height: var(--spacing-control-height-sm);
53
- border: none;
54
- border-radius: var(--spacing-radius-md);
55
- cursor: pointer;
56
- font-size: 16px;
57
- transition: background-color 0.15s, opacity 0.15s;
58
- }
59
- .lib-xplat-chat-input .chat-input-send:disabled {
60
- opacity: 0.4;
61
- cursor: not-allowed;
62
- }
63
- .lib-xplat-chat-input .chat-input-send:focus-visible {
64
- outline: 2px solid var(--semantic-interaction-focus-ring);
65
- outline-offset: 2px;
66
- }
67
- .lib-xplat-chat-input .chat-input-send.btn-primary {
68
- background-color: var(--semantic-surface-brand-default);
69
- color: var(--semantic-text-inverse);
70
- }
71
- .lib-xplat-chat-input .chat-input-send.btn-primary:hover:not(:disabled) {
72
- background-color: var(--semantic-surface-brand-strong);
73
- }
74
- .lib-xplat-chat-input .chat-input-send.btn-secondary {
75
- background-color: var(--semantic-surface-neutral-default);
76
- color: var(--semantic-surface-brand-default);
77
- border: 1px solid var(--semantic-border-default);
78
- }
79
- .lib-xplat-chat-input .chat-input-send.btn-secondary:hover:not(:disabled) {
80
- background-color: var(--semantic-surface-neutral-subtle);
81
- }
82
- .lib-xplat-chat-input .chat-input-send.btn-text {
83
- background-color: transparent;
84
- color: var(--semantic-surface-brand-default);
85
- }
86
- .lib-xplat-chat-input .chat-input-send.btn-text:hover:not(:disabled) {
87
- background-color: var(--semantic-surface-neutral-subtle);
88
- }
package/dist/components/ChatInput/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- type ButtonType = "primary" | "secondary" | "text";
3
+ type ButtonType = "primary" | "secondary" | "ghost";
4
4
  interface ChatInputProps {
5
5
  placeholder?: string;
6
6
  value?: string;
package/dist/components/ChatInput/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- type ButtonType = "primary" | "secondary" | "text";
3
+ type ButtonType = "primary" | "secondary" | "ghost";
4
4
  interface ChatInputProps {
5
5
  placeholder?: string;
6
6
  value?: string;
package/dist/components/ChatInput/index.js CHANGED
@@ -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 jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
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/MessageSquareIcon.tsx
52
+ // src/tokens/svg/communication/MessageCircleIcon.tsx
17
53
  import { jsx as jsx5 } from "react/jsx-runtime";
18
54
 
19
- // src/tokens/svg/communication/PaperclipIcon.tsx
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 SendIcon_default = SendIcon;
68
+ var MessageSquareIcon_default = MessageSquareIcon;
39
69
 
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;
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 jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
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__ */ jsx8(
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__ */ jsx8(
123
- "button",
142
+ /* @__PURE__ */ jsx9(
143
+ IconButton_default,
124
144
  {
125
- type: "button",
126
- className: clsx_default("chat-input-send", `btn-${buttonType}`),
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
  ] });
package/dist/components/IconButton/index.cjs ADDED
@@ -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
+ });
package/dist/components/IconButton/index.css ADDED
@@ -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
+ }
package/dist/components/IconButton/index.d.cts ADDED
@@ -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 };
package/dist/components/IconButton/index.d.ts ADDED
@@ -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 };