@bigtablet/design-system 3.15.2 → 3.16.0

package/dist/index.css

@@ -4967,6 +4967,14 @@ body:has(.bottom_nav) {
 .textarea_container:focus-within {
   border-color: var(--bt-color-border-focus);
 }
+.textarea_toolbar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--bt-color-border-default);
+}
 .textarea_input_wrap {
   display: flex;
   width: 100%;
@@ -4992,14 +5000,16 @@ body:has(.bottom_nav) {
   cursor: not-allowed;
   color: var(--bt-color-text-disabled);
 }
-.textarea_size_sm .textarea_input_wrap {
+.textarea_size_sm .textarea_input_wrap,
+.textarea_size_sm .textarea_toolbar {
   padding: 8px 16px;
 }
 .textarea_size_sm .textarea_input {
   font-size: 14px;
   line-height: 20px;
 }
-.textarea_size_lg .textarea_input_wrap {
+.textarea_size_lg .textarea_input_wrap,
+.textarea_size_lg .textarea_toolbar {
   padding: 12px 20px;
 }
 .textarea_size_lg .textarea_input {

package/dist/index.d.ts

@@ -2178,6 +2178,12 @@ interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextArea
     showCounter?: boolean;
     /** resize 핸들 제어 (기본 "vertical") */
     resize?: TextareaResize;
+    /**
+     * 입력 영역 위, **테두리 안쪽**에 붙는 슬롯. 서식 툴바처럼 입력과 한 박스로 보여야 하는
+     * 컨트롤을 넣는다. 컨테이너가 품으므로 `:focus-within` 테두리가 툴바까지 감싸고, 모서리와
+     * 구분선을 DS 가 처리한다. 미지정 시 DOM·스타일이 이전과 동일하다.
+     */
+    toolbar?: React$1.ReactNode;
     /** textarea 요소 참조 */
     ref?: React$1.Ref<HTMLTextAreaElement>;
 }
@@ -2192,7 +2198,7 @@ interface TextareaProps extends Omit<React$1.TextareaHTMLAttributes<HTMLTextArea
  * ```
  */
 declare const Textarea: {
-    ({ id, label, showLabel, supportingText, error, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, maxLength, ref, ...props }: TextareaProps): React$1.JSX.Element;
+    ({ id, label, showLabel, supportingText, error, fullWidth, size, className, onValueChange, onChangeAction, imeStrategy, value, defaultValue, transformValue, rows, minRows, maxRows, showCounter, resize, toolbar, maxLength, ref, ...props }: TextareaProps): React$1.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -4307,6 +4307,7 @@ var Textarea = ({
   maxRows,
   showCounter,
   resize = "vertical",
+  toolbar,
   maxLength,
   ref,
   ...props
@@ -4367,41 +4368,44 @@ var Textarea = ({
   };
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     label && showLabel && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "textarea_label", children: label }),
-    /* @__PURE__ */ jsx("div", { className: "textarea_container", children: /* @__PURE__ */ jsx("div", { className: "textarea_input_wrap", children: /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        id: inputId,
-        ref: setRefs,
-        className: "textarea_input",
-        style: { resize: autoGrow ? "none" : resize },
-        rows: autoGrow ? minRows ?? rows : rows,
-        maxLength,
-        "aria-invalid": !!error,
-        "aria-describedby": helperId,
-        "aria-label": !showLabel ? label : void 0,
-        ...props,
-        value: innerValue,
-        onCompositionStart: () => {
-          isComposingRef.current = true;
-        },
-        onCompositionEnd: (event) => {
-          isComposingRef.current = false;
-          emit(applyTransform(event.currentTarget.value));
-        },
-        onChange: (event) => {
-          const rawValue = event.target.value;
-          if (isComposingRef.current) {
-            setInnerValue(rawValue);
-            if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
-              lastEmittedValueRef.current = rawValue;
-              (onValueChange ?? onChangeAction)?.(rawValue);
+    /* @__PURE__ */ jsxs("div", { className: "textarea_container", children: [
+      toolbar && /* @__PURE__ */ jsx("div", { className: "textarea_toolbar", inert: props.disabled || void 0, children: toolbar }),
+      /* @__PURE__ */ jsx("div", { className: "textarea_input_wrap", children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: inputId,
+          ref: setRefs,
+          className: "textarea_input",
+          style: { resize: autoGrow ? "none" : resize },
+          rows: autoGrow ? minRows ?? rows : rows,
+          maxLength,
+          "aria-invalid": !!error,
+          "aria-describedby": helperId,
+          "aria-label": !showLabel ? label : void 0,
+          ...props,
+          value: innerValue,
+          onCompositionStart: () => {
+            isComposingRef.current = true;
+          },
+          onCompositionEnd: (event) => {
+            isComposingRef.current = false;
+            emit(applyTransform(event.currentTarget.value));
+          },
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            if (isComposingRef.current) {
+              setInnerValue(rawValue);
+              if (imeStrategy === "immediate" && rawValue !== lastEmittedValueRef.current) {
+                lastEmittedValueRef.current = rawValue;
+                (onValueChange ?? onChangeAction)?.(rawValue);
+              }
+              return;
             }
-            return;
+            emit(applyTransform(rawValue));
           }
-          emit(applyTransform(rawValue));
         }
-      }
-    ) }) }),
+      ) })
+    ] }),
     (supportingText || counterText) && /* @__PURE__ */ jsxs("div", { className: "textarea_footer", children: [
       supportingText ? /* @__PURE__ */ jsx("div", { id: helperId, className: "textarea_helper", children: supportingText }) : /* @__PURE__ */ jsx("span", {}),
       counterText && /* @__PURE__ */ jsx("div", { className: "textarea_counter", "aria-hidden": "true", children: counterText })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.15.2",
+	"version": "3.16.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",