@x-plat/design-system 0.5.64 → 0.5.65

package/dist/components/AutoResizeTextArea/index.cjs

@@ -0,0 +1,118 @@
+"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/AutoResizeTextArea/index.ts
+var AutoResizeTextArea_exports = {};
+__export(AutoResizeTextArea_exports, {
+  AutoResizeTextArea: () => AutoResizeTextArea_default
+});
+module.exports = __toCommonJS(AutoResizeTextArea_exports);
+
+// src/components/AutoResizeTextArea/AutoResizeTextArea.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/AutoResizeTextArea/AutoResizeTextArea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var MAX_HEIGHT = 400;
+var AutoResizeTextArea = import_react.default.forwardRef(
+  (props, ref) => {
+    const { value, className, onChange, disabled, bare = false, ...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 && "current" in ref)
+        ref.current = el;
+    };
+    const updateHeight = () => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+    };
+    const handleChange = (e) => {
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: e.target.value }
+        };
+        onChange(event);
+      }
+    };
+    import_react.default.useEffect(() => {
+      updateHeight();
+    }, [value]);
+    if (bare) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "textarea",
+        {
+          ...textareaProps,
+          ref: setRefs,
+          className,
+          disabled,
+          value,
+          onChange: handleChange
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ...textareaProps,
+        ref: setRefs,
+        disabled,
+        value,
+        onChange: handleChange
+      }
+    ) }) });
+  }
+);
+AutoResizeTextArea.displayName = "AutoResizeTextArea";
+var AutoResizeTextArea_default = AutoResizeTextArea;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoResizeTextArea
+});

package/dist/components/AutoResizeTextArea/index.css

@@ -0,0 +1,46 @@
+/* src/components/AutoResizeTextArea/autoResizeTextArea.scss */
+.lib-xplat-auto-resize-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-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-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
+  background-color: var(--semantic-surface-neutral-disabled);
+  cursor: not-allowed;
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea {
+  border: none;
+  outline: none;
+  flex: 1;
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  width: 100%;
+  color: var(--semantic-text-subtle);
+  resize: none;
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-family: inherit;
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea:disabled {
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
+
+interface AutoResizeTextAreaProps extends TextareaAttributes {
+    /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */
+    bare?: boolean;
+}
+declare const AutoResizeTextArea: React.ForwardRefExoticComponent<AutoResizeTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { AutoResizeTextArea };

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
+
+interface AutoResizeTextAreaProps extends TextareaAttributes {
+    /** ChatInput 등 내부 임베딩 시 wrapper 없이 textarea만 렌더 */
+    bare?: boolean;
+}
+declare const AutoResizeTextArea: React.ForwardRefExoticComponent<AutoResizeTextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+export { AutoResizeTextArea };

package/dist/components/AutoResizeTextArea/index.js

@@ -0,0 +1,81 @@
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+import React from "react";
+
+// ../../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/AutoResizeTextArea/AutoResizeTextArea.tsx
+import { jsx } from "react/jsx-runtime";
+var MAX_HEIGHT = 400;
+var AutoResizeTextArea = React.forwardRef(
+  (props, ref) => {
+    const { value, className, onChange, disabled, bare = false, ...textareaProps } = props;
+    const localRef = React.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") ref(el);
+      else if (ref && "current" in ref)
+        ref.current = el;
+    };
+    const updateHeight = () => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+    };
+    const handleChange = (e) => {
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: e.target.value }
+        };
+        onChange(event);
+      }
+    };
+    React.useEffect(() => {
+      updateHeight();
+    }, [value]);
+    if (bare) {
+      return /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ...textareaProps,
+          ref: setRefs,
+          className,
+          disabled,
+          value,
+          onChange: handleChange
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...textareaProps,
+        ref: setRefs,
+        disabled,
+        value,
+        onChange: handleChange
+      }
+    ) }) });
+  }
+);
+AutoResizeTextArea.displayName = "AutoResizeTextArea";
+var AutoResizeTextArea_default = AutoResizeTextArea;
+export {
+  AutoResizeTextArea_default as AutoResizeTextArea
+};

package/dist/components/ChatInput/index.cjs

@@ -35,7 +35,7 @@ __export(ChatInput_exports, {
 module.exports = __toCommonJS(ChatInput_exports);
 
 // src/components/ChatInput/ChatInput.tsx
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -110,10 +110,70 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 // src/tokens/svg/communication/SendIcon.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 
-// src/components/ChatInput/ChatInput.tsx
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+var import_react = __toESM(require("react"), 1);
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var MAX_HEIGHT = 200;
-var ChatInput = import_react.default.forwardRef(
+var MAX_HEIGHT = 400;
+var AutoResizeTextArea = import_react.default.forwardRef(
+  (props, ref) => {
+    const { value, className, onChange, disabled, bare = false, ...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 && "current" in ref)
+        ref.current = el;
+    };
+    const updateHeight = () => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+    };
+    const handleChange = (e) => {
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: e.target.value }
+        };
+        onChange(event);
+      }
+    };
+    import_react.default.useEffect(() => {
+      updateHeight();
+    }, [value]);
+    if (bare) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "textarea",
+        {
+          ...textareaProps,
+          ref: setRefs,
+          className,
+          disabled,
+          value,
+          onChange: handleChange
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "textarea",
+      {
+        ...textareaProps,
+        ref: setRefs,
+        disabled,
+        value,
+        onChange: handleChange
+      }
+    ) }) });
+  }
+);
+AutoResizeTextArea.displayName = "AutoResizeTextArea";
+var AutoResizeTextArea_default = AutoResizeTextArea;
+
+// src/components/ChatInput/ChatInput.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ChatInput = import_react2.default.forwardRef(
   (props, ref) => {
     const {
       placeholder,
@@ -124,24 +184,9 @@ var ChatInput = import_react.default.forwardRef(
       onChange
     } = props;
     const isControlled = valueProp !== void 0;
-    const [internalValue, setInternalValue] = import_react.default.useState("");
+    const [internalValue, setInternalValue] = import_react2.default.useState("");
     const value = isControlled ? valueProp : internalValue;
     const hasText = value.trim().length > 0;
-    const textareaRef = import_react.default.useRef(null);
-    const setRefs = import_react.default.useCallback(
-      (el) => {
-        textareaRef.current = el;
-        if (typeof ref === "function") ref(el);
-        else if (ref) ref.current = el;
-      },
-      [ref]
-    );
-    const updateHeight = import_react.default.useCallback(() => {
-      const el = textareaRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
-    }, []);
     const handleChange = (e) => {
       const val = e.target.value;
       if (!isControlled) setInternalValue(val);
@@ -151,7 +196,6 @@ var ChatInput = import_react.default.forwardRef(
       if (!hasText || disabled) return;
       onSubmit?.(value);
       if (!isControlled) setInternalValue("");
-      requestAnimationFrame(updateHeight);
     };
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -159,14 +203,12 @@ var ChatInput = import_react.default.forwardRef(
         handleSubmit();
       }
     };
-    import_react.default.useEffect(() => {
-      updateHeight();
-    }, [value, updateHeight]);
-    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",
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        AutoResizeTextArea_default,
         {
-          ref: setRefs,
+          ref,
+          bare: true,
           className: "chat-input-textarea",
           placeholder,
           value,
@@ -176,10 +218,10 @@ var ChatInput = import_react.default.forwardRef(
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,

package/dist/components/ChatInput/index.css

@@ -76,6 +76,53 @@
   outline-offset: 2px;
 }
 
+/* src/components/AutoResizeTextArea/autoResizeTextArea.scss */
+.lib-xplat-auto-resize-textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-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-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:hover:not(.disabled):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:focus-within {
+  border-color: var(--semantic-interaction-focus-ring);
+  box-shadow: 0 0 0 2px var(--semantic-interaction-overlay-10);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
+  border-color: var(--semantic-border-strong);
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
+  background-color: var(--semantic-surface-neutral-disabled);
+  cursor: not-allowed;
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea {
+  border: none;
+  outline: none;
+  flex: 1;
+  padding: var(--spacing-space-2) var(--spacing-space-4);
+  width: 100%;
+  color: var(--semantic-text-subtle);
+  resize: none;
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-family: inherit;
+}
+.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea > textarea:disabled {
+  cursor: not-allowed;
+}
+
 /* src/components/ChatInput/chatInput.scss */
 .lib-xplat-chat-input {
   display: flex;

package/dist/components/ChatInput/index.js

@@ -1,5 +1,5 @@
 // src/components/ChatInput/ChatInput.tsx
-import React from "react";
+import React2 from "react";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -74,10 +74,70 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 // src/tokens/svg/communication/SendIcon.tsx
 import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 
+// src/components/AutoResizeTextArea/AutoResizeTextArea.tsx
+import React from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var MAX_HEIGHT = 400;
+var AutoResizeTextArea = React.forwardRef(
+  (props, ref) => {
+    const { value, className, onChange, disabled, bare = false, ...textareaProps } = props;
+    const localRef = React.useRef(null);
+    const setRefs = (el) => {
+      localRef.current = el;
+      if (!ref) return;
+      if (typeof ref === "function") ref(el);
+      else if (ref && "current" in ref)
+        ref.current = el;
+    };
+    const updateHeight = () => {
+      const el = localRef.current;
+      if (!el) return;
+      el.style.height = "0px";
+      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
+    };
+    const handleChange = (e) => {
+      if (onChange) {
+        const event = {
+          ...e,
+          target: { value: e.target.value }
+        };
+        onChange(event);
+      }
+    };
+    React.useEffect(() => {
+      updateHeight();
+    }, [value]);
+    if (bare) {
+      return /* @__PURE__ */ jsx9(
+        "textarea",
+        {
+          ...textareaProps,
+          ref: setRefs,
+          className,
+          disabled,
+          value,
+          onChange: handleChange
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx9("div", { className: clsx_default("lib-xplat-auto-resize-textarea-wrapper", className), children: /* @__PURE__ */ jsx9("div", { className: clsx_default("lib-xplat-auto-resize-textarea", disabled && "disabled"), children: /* @__PURE__ */ jsx9(
+      "textarea",
+      {
+        ...textareaProps,
+        ref: setRefs,
+        disabled,
+        value,
+        onChange: handleChange
+      }
+    ) }) });
+  }
+);
+AutoResizeTextArea.displayName = "AutoResizeTextArea";
+var AutoResizeTextArea_default = AutoResizeTextArea;
+
 // src/components/ChatInput/ChatInput.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var MAX_HEIGHT = 200;
-var ChatInput = React.forwardRef(
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var ChatInput = React2.forwardRef(
   (props, ref) => {
     const {
       placeholder,
@@ -88,24 +148,9 @@ var ChatInput = React.forwardRef(
       onChange
     } = props;
     const isControlled = valueProp !== void 0;
-    const [internalValue, setInternalValue] = React.useState("");
+    const [internalValue, setInternalValue] = React2.useState("");
     const value = isControlled ? valueProp : internalValue;
     const hasText = value.trim().length > 0;
-    const textareaRef = React.useRef(null);
-    const setRefs = React.useCallback(
-      (el) => {
-        textareaRef.current = el;
-        if (typeof ref === "function") ref(el);
-        else if (ref) ref.current = el;
-      },
-      [ref]
-    );
-    const updateHeight = React.useCallback(() => {
-      const el = textareaRef.current;
-      if (!el) return;
-      el.style.height = "0px";
-      el.style.height = `${Math.min(el.scrollHeight, MAX_HEIGHT)}px`;
-    }, []);
     const handleChange = (e) => {
       const val = e.target.value;
       if (!isControlled) setInternalValue(val);
@@ -115,7 +160,6 @@ var ChatInput = React.forwardRef(
       if (!hasText || disabled) return;
       onSubmit?.(value);
       if (!isControlled) setInternalValue("");
-      requestAnimationFrame(updateHeight);
     };
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -123,14 +167,12 @@ var ChatInput = React.forwardRef(
         handleSubmit();
       }
     };
-    React.useEffect(() => {
-      updateHeight();
-    }, [value, updateHeight]);
     return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-chat-input", disabled && "disabled"), children: [
-      /* @__PURE__ */ jsx9(
-        "textarea",
+      /* @__PURE__ */ jsx10(
+        AutoResizeTextArea_default,
         {
-          ref: setRefs,
+          ref,
+          bare: true,
           className: "chat-input-textarea",
           placeholder,
           value,
@@ -140,10 +182,10 @@ var ChatInput = React.forwardRef(
           onKeyDown: handleKeyDown
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         IconButton_default,
         {
-          icon: /* @__PURE__ */ jsx9(MessageSquareIcon_default, {}),
+          icon: /* @__PURE__ */ jsx10(MessageSquareIcon_default, {}),
           type: buttonType,
           size: "sm",
           disabled: !hasText || disabled,

package/dist/components/TextArea/index.cjs

@@ -57,51 +57,23 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var TextArea = import_react.default.forwardRef(
   (props, ref) => {
-    const { value, className, 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: clsx_default("lib-xplat-textarea-wrapper", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
+    const {
+      className,
+      size = "md",
+      resize = "vertical",
+      rows = 3,
+      disabled,
+      ...textareaProps
+    } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
       {
-        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
-          }
-        )
+        ...textareaProps,
+        ref,
+        rows,
+        disabled,
+        className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
+        style: { resize }
       }
     ) });
   }