@x-plat/design-system 0.5.20 → 0.5.22

package/dist/components/Chart/index.cjs

@@ -475,8 +475,22 @@ var PieDonutChart = import_react.default.memo(
     const innerR = isDoughnut ? r * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
+    const maskRef = import_react.default.useRef(null);
+    const maskR = r + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    import_react.default.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
     const sliceData = import_react.default.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -500,38 +514,53 @@ var PieDonutChart = import_react.default.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r, innerR, labels]);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("mask", { id: maskId, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";

package/dist/components/Chart/index.css

@@ -63,7 +63,7 @@
     transform 0.15s ease-out;
   transform-origin: center;
 }
-.lib-xplat-chart .chart-svg:hover .chart-slice {
+.lib-xplat-chart .chart-pie:has(.chart-slice:hover) .chart-slice {
   opacity: 0.5;
 }
 .lib-xplat-chart .chart-slice:hover {
@@ -91,10 +91,8 @@
 .lib-xplat-chart .chart-bar-animate {
   animation: chart-bar-grow 800ms ease-out both;
 }
-.lib-xplat-chart .chart-slice-group-animate {
-  animation: chart-slice-in 1000ms ease-out both;
-}
 .lib-xplat-chart .chart-pie-label-animate {
+  opacity: 0;
   animation: chart-fade-in 150ms ease-out both;
 }
 .lib-xplat-chart .chart-area[style*=animationDelay] {
@@ -108,16 +106,6 @@
     transform: scaleY(1);
   }
 }
-@keyframes chart-slice-in {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
 @keyframes chart-fade-in {
   from {
     opacity: 0;
@@ -138,7 +126,6 @@
 }
 @media (prefers-reduced-motion: reduce) {
   .lib-xplat-chart .chart-bar-animate,
-  .lib-xplat-chart .chart-slice-group-animate,
   .lib-xplat-chart .chart-pie-label-animate,
   .lib-xplat-chart .chart-area {
     animation: none !important;

package/dist/components/Chart/index.js

@@ -439,8 +439,22 @@ var PieDonutChart = React.memo(
     const innerR = isDoughnut ? r * 0.5 : 0;
     const firstKey = entries[0]?.[0] ?? "";
     const colorOffset = hashString(firstKey);
+    const maskRef = React.useRef(null);
+    const maskR = r + 10;
+    const maskCircumference = 2 * Math.PI * maskR;
+    React.useEffect(() => {
+      if (!animate || !maskRef.current) return;
+      const el = maskRef.current;
+      el.style.strokeDasharray = `${maskCircumference}`;
+      el.style.strokeDashoffset = `${maskCircumference}`;
+      requestAnimationFrame(() => {
+        el.style.transition = "stroke-dashoffset 1000ms ease-out";
+        el.style.strokeDashoffset = "0";
+      });
+    }, [animate, maskCircumference]);
     const sliceData = React.useMemo(() => {
       let angle0 = -Math.PI / 2;
+      let cumulativeAngle = 0;
       return values.map((v, i) => {
         const angle = v / total * Math.PI * 2;
         const endAngle = angle0 + angle;
@@ -464,38 +478,53 @@ var PieDonutChart = React.memo(
         const lx = cx + labelR * Math.cos(midAngle);
         const ly = cy + labelR * Math.sin(midAngle);
         const pct = Math.round(v / total * 100);
+        cumulativeAngle += angle;
+        const sliceEndRatio = cumulativeAngle / (Math.PI * 2);
+        const labelDelay = 1e3 * sliceEndRatio + 150;
         angle0 = endAngle;
-        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}` };
+        return { d, lx, ly, v, pct, angle, label: labels[i] || `${i + 1}`, labelDelay };
       });
     }, [values, total, cx, cy, r, innerR, labels]);
-    return /* @__PURE__ */ jsx("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: sliceData.map((s, i) => {
-      const delay = i * 100;
-      return /* @__PURE__ */ jsxs("g", { className: animate ? "chart-slice-group-animate" : "", style: animate ? { animationDelay: `${delay}ms` } : void 0, children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: s.d,
-            fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
-            className: "chart-slice",
-            onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
-            onMouseMove: onMove,
-            onMouseLeave: onLeave
-          }
-        ),
-        s.angle > 0.2 && /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: s.lx,
-            y: s.ly,
-            className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
-            style: animate ? { animationDelay: `${delay + 150}ms` } : void 0,
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: s.v
-          }
-        )
-      ] }, i);
-    }) });
+    const maskId = `pie-mask-${isDoughnut ? "d" : "p"}`;
+    return /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${size} ${size}`, className: "chart-svg chart-pie", children: [
+      animate && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx(
+        "circle",
+        {
+          ref: maskRef,
+          cx,
+          cy,
+          r: maskR,
+          fill: "none",
+          stroke: "white",
+          strokeWidth: maskR * 2,
+          transform: `rotate(-90 ${cx} ${cy})`
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx("g", { mask: animate ? `url(#${maskId})` : void 0, children: sliceData.map((s, i) => /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: s.d,
+          fill: PIE_COLORS[(i + colorOffset) % PIE_COLORS.length],
+          className: "chart-slice",
+          onMouseEnter: (e) => onHover(e, `${s.label}: ${s.v} (${s.pct}%)`),
+          onMouseMove: onMove,
+          onMouseLeave: onLeave
+        }
+      ) }, i)) }),
+      sliceData.map((s, i) => s.angle > 0.2 && /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: s.lx,
+          y: s.ly,
+          className: `chart-pie-label ${animate ? "chart-pie-label-animate" : ""}`,
+          style: animate ? { animationDelay: `${s.labelDelay}ms` } : void 0,
+          textAnchor: "middle",
+          dominantBaseline: "central",
+          children: s.v
+        },
+        `label-${i}`
+      ))
+    ] });
   }
 );
 PieDonutChart.displayName = "PieDonutChart";

package/dist/components/ChatInput/index.cjs

@@ -0,0 +1,214 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ChatInput/index.ts
+var ChatInput_exports = {};
+__export(ChatInput_exports, {
+  ChatInput: () => ChatInput_default
+});
+module.exports = __toCommonJS(ChatInput_exports);
+
+// src/components/ChatInput/ChatInput.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/components/TextArea/TextArea.tsx
+var import_react = __toESM(require("react"), 1);
+
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/TextArea/TextArea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var TextArea = import_react.default.forwardRef(
+  (props, ref) => {
+    const { value, onChange, disabled, ...textareaProps } = props;
+    const localRef = import_react.default.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(el);
+      } else if (ref && typeof ref === "object" && "current" in ref) {
+        ref.current = el;
+      }
+    };
+    const handleOnChange = (e) => {
+      const val = e.target.value;
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: val }
+        };
+        onChange(event);
+      }
+    };
+    import_react.default.useEffect(() => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      const nextHeight = Math.min(el.scrollHeight, 400);
+      el.style.height = `${nextHeight}px`;
+    }, [value]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "lib-xplat-textarea-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: clsx_default(
+          "lib-xplat-textarea",
+          disabled ? "disabled" : void 0
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "textarea",
+          {
+            ...textareaProps,
+            ref: setRefs,
+            disabled,
+            value,
+            onChange: handleOnChange
+          }
+        )
+      }
+    ) });
+  }
+);
+TextArea.displayName = "TextArea";
+var TextArea_default = TextArea;
+
+// src/tokens/svg/communication/BellIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/BellOffIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/InboxIcon.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/MessageCircleIcon.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/MessageSquareIcon.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/PaperclipIcon.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/tokens/svg/communication/SendIcon.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var SendIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    children: [
+      /* @__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" }) }),
+      /* @__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" }) }) })
+    ]
+  }
+);
+var SendIcon_default = SendIcon;
+
+// src/components/ChatInput/ChatInput.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChatInput = import_react2.default.forwardRef(
+  (props, ref) => {
+    const {
+      placeholder,
+      value: valueProp,
+      disabled = false,
+      buttonType = "primary",
+      onSubmit,
+      onChange
+    } = props;
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = import_react2.default.useState("");
+    const value = isControlled ? valueProp : internalValue;
+    const hasText = value.trim().length > 0;
+    const handleChange = (e) => {
+      const val = e.target.value;
+      if (!isControlled) setInternalValue(val);
+      onChange?.(val);
+    };
+    const handleSubmit = () => {
+      if (!hasText || disabled) return;
+      onSubmit?.(value);
+      if (!isControlled) setInternalValue("");
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        TextArea_default,
+        {
+          ref,
+          placeholder,
+          value,
+          disabled,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "button",
+        {
+          type: "button",
+          className: clsx_default("chat-input-send", `btn-${buttonType}`),
+          disabled: !hasText || disabled,
+          onClick: handleSubmit,
+          "aria-label": "\uC804\uC1A1",
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SendIcon_default, {})
+        }
+      )
+    ] });
+  }
+);
+ChatInput.displayName = "ChatInput";
+var ChatInput_default = ChatInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ChatInput
+});

package/dist/components/ChatInput/index.css

@@ -0,0 +1,133 @@
+/* src/components/TextArea/textArea.scss */
+.lib-xplat-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-md);
+  min-height: var(--spacing-control-height-md);
+  overflow: hidden;
+  background-color: var(--semantic-surface-neutral-default);
+  width: 100%;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea.disabled {
+  background-color: var(--semantic-surface-neutral-disabled);
+  cursor: not-allowed;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea {
+  border: none;
+  outline: none;
+  flex: 1;
+  padding-left: var(--spacing-space-4);
+  padding-right: var(--spacing-space-4);
+  width: 100%;
+  color: var(--semantic-text-subtle);
+  resize: none;
+  height: 1.5em;
+}
+.lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
+  cursor: not-allowed;
+}
+
+/* src/components/ChatInput/chatInput.scss */
+.lib-xplat-chat-input {
+  display: flex;
+  align-items: flex-end;
+  gap: var(--spacing-space-2);
+  padding: var(--spacing-space-3);
+  border: 1px solid var(--semantic-border-default);
+  border-radius: var(--spacing-radius-lg);
+  background-color: var(--semantic-surface-neutral-default);
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.lib-xplat-chat-input:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-chat-input:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-chat-input.disabled {
+  background-color: var(--semantic-surface-neutral-subtle);
+  border-color: var(--semantic-border-default);
+  cursor: not-allowed;
+}
+.lib-xplat-chat-input .chat-input-textarea {
+  flex: 1;
+  border: none;
+  outline: none;
+  resize: none;
+  min-height: var(--spacing-control-height-lg);
+  max-height: 200px;
+  overflow-y: auto;
+  padding: 0;
+  font-size: 16px;
+  line-height: 1.5;
+  color: var(--semantic-text-strong);
+  background: transparent;
+}
+.lib-xplat-chat-input .chat-input-textarea::placeholder {
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-chat-input .chat-input-textarea:disabled {
+  cursor: not-allowed;
+  color: var(--semantic-text-disabled);
+}
+.lib-xplat-chat-input .chat-input-send {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--spacing-control-height-lg);
+  height: var(--spacing-control-height-lg);
+  border: none;
+  border-radius: var(--spacing-radius-md);
+  cursor: pointer;
+  font-size: 20px;
+  transition: background-color 0.15s, opacity 0.15s;
+}
+.lib-xplat-chat-input .chat-input-send:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.lib-xplat-chat-input .chat-input-send:focus-visible {
+  outline: 2px solid var(--semantic-interaction-focus-ring);
+  outline-offset: 2px;
+}
+.lib-xplat-chat-input .chat-input-send.btn-primary {
+  background-color: var(--semantic-surface-brand-default);
+  color: var(--semantic-text-inverse);
+}
+.lib-xplat-chat-input .chat-input-send.btn-primary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-brand-strong);
+}
+.lib-xplat-chat-input .chat-input-send.btn-secondary {
+  background-color: var(--semantic-surface-neutral-default);
+  color: var(--semantic-surface-brand-default);
+  border: 1px solid var(--semantic-border-default);
+}
+.lib-xplat-chat-input .chat-input-send.btn-secondary:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}
+.lib-xplat-chat-input .chat-input-send.btn-text {
+  background-color: transparent;
+  color: var(--semantic-surface-brand-default);
+}
+.lib-xplat-chat-input .chat-input-send.btn-text:hover:not(:disabled) {
+  background-color: var(--semantic-surface-neutral-subtle);
+}

package/dist/components/ChatInput/index.d.cts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type ButtonType = "primary" | "secondary" | "text";
+interface ChatInputProps {
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    buttonType?: ButtonType;
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+}
+declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { ChatInput };

package/dist/components/ChatInput/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type ButtonType = "primary" | "secondary" | "text";
+interface ChatInputProps {
+    placeholder?: string;
+    value?: string;
+    disabled?: boolean;
+    buttonType?: ButtonType;
+    onSubmit?: (value: string) => void;
+    onChange?: (value: string) => void;
+}
+declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { ChatInput };