maru_design2 2.24.3 → 2.25.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [2.25.0](https://github.com/42maru-ai/maru-design2/compare/v2.24.4...v2.25.0) (2025-04-08)
+
+
+### Features
+
+* :sparkles: Textarea - add minRows, maxRows [#540](https://github.com/42maru-ai/maru-design2/issues/540) ([b907d40](https://github.com/42maru-ai/maru-design2/commit/b907d40834eb48baea693d94364940605478963a))
+* :sparkles: Textarea - add resizable [#553](https://github.com/42maru-ai/maru-design2/issues/553) ([594031e](https://github.com/42maru-ai/maru-design2/commit/594031e12f14870708e691b1f59fc863c948aa20))
+
+
+### Bug Fixes
+
+* :bug: Textarea - fix condition & update storybook ([7f14d1a](https://github.com/42maru-ai/maru-design2/commit/7f14d1a95f53956e2a5a6fcbcbdfc5a3ed9d440c))
+* :bug: Textarea - fix init scrollHeight ([c6aa3cc](https://github.com/42maru-ai/maru-design2/commit/c6aa3ccf3f2b2e1b1947bf5a70943044ad2e9f40))
+
+## [2.24.4](https://github.com/42maru-ai/maru-design2/compare/v2.24.3...v2.24.4) (2025-03-31)
+
+
+### Bug Fixes
+
+* :bento: Icon - add icons [#402](https://github.com/42maru-ai/maru-design2/issues/402) ([d14d4b1](https://github.com/42maru-ai/maru-design2/commit/d14d4b1cfd2ae1c58f4badb9f5c65eca814b60f4))
+
 ## [2.24.3](https://github.com/42maru-ai/maru-design2/compare/v2.24.2...v2.24.3) (2025-03-26)
 
 

package/dist/components/atoms/icon/iconmap.d.ts

@@ -114,6 +114,7 @@ export declare const ICONS: {
     readonly CodeSnippet02_s2420: "CodeSnippet02_s2420";
     readonly Connection_s1810: "Connection_s1810";
     readonly Copy03_s1615: "Copy03_s1615";
+    readonly Copy03_s1810: "Copy03_s1810";
     readonly Copy_s1413: "Copy_s1413";
     readonly Copy_s1613: "Copy_s1613";
     readonly CornerDownRight_s1615: "CornerDownRight_s1615";
@@ -233,6 +234,7 @@ export declare const ICONS: {
     readonly Loading02_s4830: "Loading02_s4830";
     readonly Lock01_s1615: "Lock01_s1615";
     readonly LogOut01_s1615: "LogOut01_s1615";
+    readonly MagicTool_s1513: "MagicTool_s1513";
     readonly Menu2_s1613: "Menu2_s1613";
     readonly Menu_s2415: "Menu_s2415";
     readonly MessageCheck_s1615: "MessageCheck_s1615";
@@ -308,6 +310,7 @@ export declare const ICONS: {
     readonly Star_s1613: "Star_s1613";
     readonly State_s1610: "State_s1610";
     readonly State_s1810: "State_s1810";
+    readonly StopCircleBg_s1513: "StopCircleBg_s1513";
     readonly StopCircle_s1413: "StopCircle_s1413";
     readonly StopCircle_s1615: "StopCircle_s1615";
     readonly StopCircle_s2420: "StopCircle_s2420";

package/dist/components/atoms/textarea/Textarea.d.ts

@@ -21,5 +21,18 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
      */
     wrapperRef?: React.RefObject<HTMLDivElement>;
     className?: string;
+    /**
+     * 최소 높이. 없으면 props.rows 이거나 1로 설정.
+     */
+    minRows?: number;
+    /**
+     * 최대 높이. 없으면 무한대 늘어남.
+     */
+    maxRows?: number;
+    /**
+     * 바닥 선분을 마우스로 드래그해서 크기를 조절할 수 있는지 여부
+     * - 기본값은 false
+     */
+    resizable?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { useState, useMemo, forwardRef, useEffect, useRef, createElement, Component, useLayoutEffect, createRef } from 'react';
+import React__default, { useState, useMemo, forwardRef, useEffect, useRef, useCallback, createElement, Component, useLayoutEffect, createRef } from 'react';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default, { findDOMNode } from 'react-dom';
 
@@ -1427,6 +1427,20 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "Copy03_s1810": {
+    "width": "18",
+    "height": "19",
+    "viewBox": "0 0 18 19",
+    "fill": "none",
+    "paths": [{
+      "d": "M6.3 6.8V4.91C6.3 4.15393 6.3 3.77589 6.44714 3.48711C6.57657 3.23309 6.78309 3.02657 7.03711 2.89714C7.32589 2.75 7.70393 2.75 8.46 2.75H13.59C14.3461 2.75 14.7241 2.75 15.0129 2.89714C15.2669 3.02657 15.4734 3.23309 15.6029 3.48711C15.75 3.77589 15.75 4.15393 15.75 4.91V10.04C15.75 10.7961 15.75 11.1741 15.6029 11.4629C15.4734 11.7169 15.2669 11.9234 15.0129 12.0529C14.7241 12.2 14.3461 12.2 13.59 12.2H11.7M4.41 16.25H9.54C10.2961 16.25 10.6741 16.25 10.9629 16.1029C11.2169 15.9734 11.4234 15.7669 11.5529 15.5129C11.7 15.2241 11.7 14.8461 11.7 14.09V8.96C11.7 8.20393 11.7 7.82589 11.5529 7.53711C11.4234 7.28309 11.2169 7.07657 10.9629 6.94714C10.6741 6.8 10.2961 6.8 9.54 6.8H4.41C3.65393 6.8 3.27589 6.8 2.98711 6.94714C2.73309 7.07657 2.52657 7.28309 2.39714 7.53711C2.25 7.82589 2.25 8.20393 2.25 8.96V14.09C2.25 14.8461 2.25 15.2241 2.39714 15.5129C2.52657 15.7669 2.73309 15.9734 2.98711 16.1029C3.27589 16.25 3.65393 16.25 4.41 16.25Z",
+      "stroke": "#5C5C5C",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Copy_s1413": {
     "width": "14",
     "height": "14",
@@ -3850,6 +3864,48 @@ var iconmap = {
     "circles": [],
     "rects": []
   },
+  "MagicTool_s1513": {
+    "width": "15",
+    "height": "15",
+    "viewBox": "0 0 15 15",
+    "fill": "none",
+    "paths": [{
+      "d": "M5.14884 1.5C5.14884 1.88993 5.30374 2.2639 5.57947 2.53962C5.85519 2.81535 6.22915 2.97025 6.61909 2.97025C6.22915 2.97025 5.85519 3.12515 5.57947 3.40088C5.30374 3.6766 5.14884 4.05057 5.14884 4.4405C5.14884 4.05057 4.99394 3.6766 4.71821 3.40088C4.44249 3.12515 4.06852 2.97025 3.67859 2.97025C4.06852 2.97025 4.44249 2.81535 4.71821 2.53962C4.99394 2.2639 5.14884 1.88993 5.14884 1.5Z",
+      "fill": "white",
+      "stroke": "white",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M12.0269 1.5C12.0269 1.88993 12.1818 2.2639 12.4575 2.53962C12.7332 2.81535 13.1072 2.97025 13.4971 2.97025C13.1072 2.97025 12.7332 3.12515 12.4575 3.40088C12.1818 3.6766 12.0269 4.05057 12.0269 4.4405C12.0269 4.05057 11.872 3.6766 11.5963 3.40088C11.3205 3.12515 10.9466 2.97025 10.5566 2.97025C10.9466 2.97025 11.3205 2.81535 11.5963 2.53962C11.872 2.2639 12.0269 1.88993 12.0269 1.5Z",
+      "fill": "white",
+      "stroke": "white",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M12.2917 7.75C12.2917 8.13993 12.4466 8.5139 12.7223 8.78962C12.998 9.06535 13.372 9.22025 13.7619 9.22025C13.372 9.22025 12.998 9.37515 12.7223 9.65088C12.4466 9.9266 12.2917 10.3006 12.2917 10.6905C12.2917 10.3006 12.1368 9.9266 11.861 9.65088C11.5853 9.37515 11.2113 9.22025 10.8214 9.22025C11.2113 9.22025 11.5853 9.06535 11.861 8.78962C12.1368 8.5139 12.2917 8.13993 12.2917 7.75Z",
+      "fill": "white",
+      "stroke": "white",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M9.95935 5.63403L9.36206 5.03674C9.03219 4.70687 8.49735 4.70687 8.16748 5.03674L1.5973 11.6069C1.26742 11.9368 1.26742 12.4716 1.5973 12.8015L2.19459 13.3988C2.52446 13.7287 3.05929 13.7287 3.38917 13.3988L9.95935 6.82861C10.2892 6.49874 10.2892 5.96391 9.95935 5.63403Z",
+      "stroke": "white",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }, {
+      "d": "M6.37695 6.83203L8.16882 8.6239L3.39051 13.4022C3.2321 13.5606 3.01724 13.6496 2.79322 13.6496C2.56919 13.6496 2.35434 13.5606 2.19593 13.4022L1.59864 12.8049C1.44023 12.6465 1.35123 12.4317 1.35123 12.2076C1.35123 11.9836 1.44023 11.7688 1.59864 11.6103L6.37695 6.83203V6.83203Z",
+      "stroke": "white",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": []
+  },
   "Menu2_s1613": {
     "width": "14",
     "height": "13",
@@ -5139,6 +5195,29 @@ var iconmap = {
     }],
     "rects": []
   },
+  "StopCircleBg_s1513": {
+    "width": "15",
+    "height": "16",
+    "viewBox": "0 0 15 16",
+    "fill": "none",
+    "paths": [{
+      "d": "M7.5 14.5C11.0899 14.5 14 11.5899 14 8C14 4.41015 11.0899 1.5 7.5 1.5C3.91015 1.5 1 4.41015 1 8C1 11.5899 3.91015 14.5 7.5 14.5Z",
+      "fill": "#213A78",
+      "stroke": "#213A78",
+      "strokeWidth": "1.3",
+      "strokeLinecap": "round",
+      "strokeLinejoin": "round"
+    }],
+    "circles": [],
+    "rects": [{
+      "x": "5",
+      "y": "5.5",
+      "width": "5",
+      "height": "5",
+      "rx": "1",
+      "fill": "#213A78"
+    }]
+  },
   "StopCircle_s1413": {
     "width": "14",
     "height": "14",
@@ -5923,6 +6002,7 @@ var ICONS = {
   "CodeSnippet02_s2420": "CodeSnippet02_s2420",
   "Connection_s1810": "Connection_s1810",
   "Copy03_s1615": "Copy03_s1615",
+  "Copy03_s1810": "Copy03_s1810",
   "Copy_s1413": "Copy_s1413",
   "Copy_s1613": "Copy_s1613",
   "CornerDownRight_s1615": "CornerDownRight_s1615",
@@ -6042,6 +6122,7 @@ var ICONS = {
   "Loading02_s4830": "Loading02_s4830",
   "Lock01_s1615": "Lock01_s1615",
   "LogOut01_s1615": "LogOut01_s1615",
+  "MagicTool_s1513": "MagicTool_s1513",
   "Menu2_s1613": "Menu2_s1613",
   "Menu_s2415": "Menu_s2415",
   "MessageCheck_s1615": "MessageCheck_s1615",
@@ -6117,6 +6198,7 @@ var ICONS = {
   "Star_s1613": "Star_s1613",
   "State_s1610": "State_s1610",
   "State_s1810": "State_s1810",
+  "StopCircleBg_s1513": "StopCircleBg_s1513",
   "StopCircle_s1413": "StopCircle_s1413",
   "StopCircle_s1615": "StopCircle_s1615",
   "StopCircle_s2420": "StopCircle_s2420",
@@ -6204,6 +6286,12 @@ function Icon(_a) {
   var staticPathStorke = useMemo(function () {
     return name === ICONS.ChevronLeftCircleBg_s2415 || name === ICONS.ChevronRightCircleBg_s2415 || name === ICONS.CheckCircleBg_s1612 || name === ICONS.XCircleBg_s1612 || name === ICONS.XDiamondBg_s2415 || name === ICONS.UserCircleBg_s2415 || name === ICONS.BarChartSquare01Bg_s1810;
   }, [name]);
+  /**
+   * path.fill를 svg에 있는대로 두고 싶으면 true
+   */
+  var staticPathFill = useMemo(function () {
+    return name === ICONS.StopCircleBg_s1513;
+  }, [name]);
   return jsxs("svg", __assign({
     width: width,
     height: height,
@@ -6242,7 +6330,7 @@ function Icon(_a) {
     }), paths.map(function (path, idx) {
       return jsx("path", {
         d: path.d,
-        fill: path.fill && iconColor,
+        fill: path.fill && (staticPathFill ? undefined : iconColor),
         fillRule: path.fillRule,
         clipRule: path.clipRule,
         stroke: path.stroke && (staticPathStorke && idx === paths.length - 1 ? path.stroke : iconColor),
@@ -8803,7 +8891,7 @@ function Slider(_a) {
   }));
 }
 
-var css_248z$b = ".maru-textarea-wrapper .maru-textarea {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: row;\n  padding: 8px 8px 8px 12px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n  border-color: #5c5c5c;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n  outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
+var css_248z$b = ".maru-textarea-wrapper .maru-textarea-resizable-wrapper {\n  position: relative;\n}\n.maru-textarea-wrapper .maru-textarea {\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  flex-direction: row;\n  padding: 8px 8px 8px 12px;\n  border: 1px solid #e4e4e4;\n  border-radius: 6px;\n  gap: 8px;\n}\n.maru-textarea-wrapper .maru-textarea > textarea {\n  width: 100%;\n  border: unset;\n  outline: unset;\n  background-color: transparent;\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 14px;\n  letter-spacing: -0.56px;\n  font-weight: 400;\n  color: #5c5c5c;\n  resize: none;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-webkit-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-moz-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea:-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::-ms-input-placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea > textarea::placeholder {\n  font-weight: 300;\n  color: #8c8c8c;\n}\n.maru-textarea-wrapper .maru-textarea:focus-visible, .maru-textarea-wrapper .maru-textarea:focus-within {\n  border-color: #5c5c5c;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.errored {\n  outline: 1px solid #e53e3e;\n  border-color: #e53e3e;\n}\n.maru-textarea-wrapper .maru-textarea:hover {\n  outline: 1px solid #e4e4e4;\n  border-color: #e4e4e4;\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled {\n  background-color: #fafafa;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-webkit-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-moz-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea:-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::-ms-input-placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled > textarea::placeholder {\n  color: #bdbdbd;\n}\n.maru-textarea-wrapper .maru-textarea.disabled:hover {\n  outline: unset;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: row;\n}\n.maru-textarea-wrapper .maru-textarea-end-node-wrapper > button {\n  padding: unset;\n  margin: unset;\n  border: unset;\n  background-color: unset;\n  cursor: pointer;\n  width: 16px;\n  height: 16px;\n}\n.maru-textarea-wrapper .resizer {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  height: 5px;\n  width: 100%;\n  cursor: ns-resize;\n  background: transparent;\n}\n.maru-textarea-wrapper .maru-textarea-footer {\n  display: block;\n  margin-top: 4px;\n}\n.maru-textarea-wrapper .maru-textarea-footer > span {\n  font-family: Pretendard;\n  font-style: normal;\n  line-height: 150%;\n  font-size: 12px;\n  letter-spacing: -0.48px;\n  font-weight: 500;\n  color: #e53e3e;\n}";
 styleInject(css_248z$b);
 
 var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
@@ -8812,15 +8900,40 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
     hiddenClearButton = _a.hiddenClearButton,
     wrapperRef = _a.wrapperRef,
     className = _a.className,
-    props = __rest(_a, ["invalid", "onClear", "hiddenClearButton", "wrapperRef", "className"]);
-  var _b = useState(false),
-    showClearButton = _b[0],
-    setShowClearButton = _b[1];
+    minRows = _a.minRows,
+    maxRows = _a.maxRows,
+    _b = _a.resizable,
+    resizable = _b === void 0 ? false : _b,
+    props = __rest(_a, ["invalid", "onClear", "hiddenClearButton", "wrapperRef", "className", "minRows", "maxRows", "resizable"]);
+  var _c = useState(false),
+    showClearButton = _c[0],
+    setShowClearButton = _c[1];
   var combineRef = useCombineRef(textareaRef);
+  var minHeight = useCallback(function (lineHeight) {
+    return minRows ? minRows * lineHeight : 0;
+  }, [minRows]);
+  var maxHeight = useCallback(function (lineHeight) {
+    return maxRows ? maxRows * lineHeight : Infinity;
+  }, [maxRows]);
+  /**
+   * textarea의 높이를 조절하는 함수
+   * - rows는 기본적으로 초기 높이 설정하는데에만 쓰임
+   * - 동적 높이 조정은 css height 속성 변경으로 조정해야함
+   */
   var resizeHeight = function resizeHeight() {
     if (combineRef.current) {
+      // 항상 그때의 scrollHeight를 가져오도록 높이를 초기화
       combineRef.current.style.height = 'auto';
-      combineRef.current.style.height = "".concat(combineRef.current.scrollHeight, "px");
+      var lineHeight = parseInt(window.getComputedStyle(combineRef.current).lineHeight || '0', 10);
+      var scrollHeight = combineRef.current.scrollHeight;
+      if (lineHeight) {
+        var min = minHeight(lineHeight);
+        var max = maxHeight(lineHeight);
+        var newHeight = Math.min(Math.max(scrollHeight, min), max);
+        combineRef.current.style.height = "".concat(newHeight, "px");
+      } else {
+        combineRef.current.style.height = "".concat(scrollHeight, "px");
+      }
     }
   };
   useEffect(function () {
@@ -8867,33 +8980,65 @@ var Textarea = /*#__PURE__*/forwardRef(function (_a, textareaRef) {
     onClear === null || onClear === void 0 ? void 0 : onClear();
     resizeHeight();
   };
+  var handleResizerMouseDown = function handleResizerMouseDown(e) {
+    var combine = combineRef === null || combineRef === void 0 ? void 0 : combineRef.current;
+    if (resizable && combine) {
+      var startY_1 = e.clientY;
+      var startHeight_1 = combine.clientHeight;
+      document.body.style.userSelect = 'none';
+      var lineHeight = parseInt(window.getComputedStyle(combine).lineHeight || '0', 10);
+      var min_1 = minHeight(lineHeight);
+      var max_1 = maxHeight(lineHeight);
+      var handleMouseMove_1 = function handleMouseMove_1(moveEvent) {
+        var newHeight = startHeight_1 + moveEvent.clientY - startY_1;
+        if (min_1 <= newHeight && newHeight <= max_1) {
+          combine.style.height = "".concat(newHeight, "px");
+        }
+      };
+      var handleMouseUp_1 = function handleMouseUp_1() {
+        document.body.style.userSelect = '';
+        document.removeEventListener('mousemove', handleMouseMove_1);
+        document.removeEventListener('mouseup', handleMouseUp_1);
+      };
+      document.addEventListener('mousemove', handleMouseMove_1);
+      document.addEventListener('mouseup', handleMouseUp_1);
+    }
+  };
   return jsxs("div", __assign({
     ref: wrapperRef,
     className: classNames('maru-textarea-wrapper', className)
   }, {
     children: [jsxs("div", __assign({
-      className: classNames('maru-textarea', {
-        errored: invalid === null || invalid === void 0 ? void 0 : invalid.on,
-        disabled: props.disabled
-      })
+      className: "maru-textarea-resizable-wrapper"
     }, {
-      children: [jsx("textarea", __assign({}, props, {
-        ref: combineRef,
-        onChange: handleTextareaChange
-      })), jsx("div", __assign({
-        className: "maru-textarea-end-node-wrapper"
+      children: [jsxs("div", __assign({
+        className: classNames('maru-textarea', {
+          errored: invalid === null || invalid === void 0 ? void 0 : invalid.on,
+          disabled: props.disabled
+        })
       }, {
-        children: showClearButton && !props.disabled && jsx("button", __assign({
-          type: "button",
-          onClick: handleClearClick,
-          tabIndex: -1
+        children: [jsx("textarea", __assign({}, props, {
+          ref: combineRef,
+          onChange: handleTextareaChange,
+          rows: props.rows || minRows || 1
+        })), jsx("div", __assign({
+          className: "maru-textarea-end-node-wrapper"
         }, {
-          children: jsx(Icon, {
-            name: ICONS.X_s1615,
-            color: "#5c5c5c"
-          })
-        }))
-      }))]
+          children: showClearButton && !props.disabled && jsx("button", __assign({
+            type: "button",
+            onClick: handleClearClick,
+            tabIndex: -1
+          }, {
+            children: jsx(Icon, {
+              name: ICONS.X_s1615,
+              color: "#5c5c5c"
+            })
+          }))
+        }))]
+      })), resizable && jsx("div", {
+        className: "resizer",
+        onMouseDown: handleResizerMouseDown
+      })]
     })), invalid && invalid.on && jsx("div", __assign({
       className: "maru-textarea-footer"
     }, {
@@ -8908,7 +9053,10 @@ Textarea.defaultProps = {
   onClear: undefined,
   hiddenClearButton: undefined,
   wrapperRef: undefined,
-  className: undefined
+  className: undefined,
+  minRows: undefined,
+  maxRows: undefined,
+  resizable: false
 };
 Textarea.displayName = 'Textarea';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maru_design2",
-  "version": "2.24.3",
+  "version": "2.25.0",
   "main": "./dist/index.js",
   "author": "zena-42maru",
   "license": "MIT",