@nurimedia/react-ui 0.1.0

package/dist/Switch/index.d.cts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface SwitchProps {
+    /**
+     * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,
+     * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.
+     */
+    label?: ReactNode;
+    /** 켜짐 상태 (제어형). */
+    checked?: boolean;
+    /** 초기 상태 (비제어형). */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** 폼 전송용 name. */
+    name?: string;
+    /** 폼 전송 시 값. @default 'on' */
+    value?: string;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * 스위치(토글). Radix Switch 기반 — `role="switch"`·Space/Enter 토글·폼 참여 자동.
+ * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).
+ *
+ * @example
+ * <Switch label="알림 받기" checked={on} onCheckedChange={setOn} />
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps };

package/dist/Switch/index.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface SwitchProps {
+    /**
+     * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,
+     * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.
+     */
+    label?: ReactNode;
+    /** 켜짐 상태 (제어형). */
+    checked?: boolean;
+    /** 초기 상태 (비제어형). */
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    /** 폼 전송용 name. */
+    name?: string;
+    /** 폼 전송 시 값. @default 'on' */
+    value?: string;
+    required?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * 스위치(토글). Radix Switch 기반 — `role="switch"`·Space/Enter 토글·폼 참여 자동.
+ * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).
+ *
+ * @example
+ * <Switch label="알림 받기" checked={on} onCheckedChange={setOn} />
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { Switch, type SwitchProps };

package/dist/Switch/index.js

@@ -0,0 +1,34 @@
+// src/Switch/Switch.tsx
+import "./styles.css";
+import * as RadixSwitch from "@radix-ui/react-switch";
+import { forwardRef, useId } from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Switch/Switch.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Switch = forwardRef(function Switch2({ label, disabled = false, id: idProp, className, ...rest }, ref) {
+  const reactId = useId();
+  const id = idProp ?? `nuri-switch-${reactId}`;
+  return /* @__PURE__ */ jsxs("div", { className: cx("nuri-switch", className), children: [
+    /* @__PURE__ */ jsx(
+      RadixSwitch.Root,
+      {
+        ref,
+        id,
+        className: "nuri-switch__control",
+        disabled,
+        ...rest,
+        children: /* @__PURE__ */ jsx(RadixSwitch.Thumb, { className: "nuri-switch__thumb" })
+      }
+    ),
+    label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "nuri-switch__label", children: label })
+  ] });
+});
+export {
+  Switch
+};
+//# sourceMappingURL=index.js.map

package/dist/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Switch/Switch.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport * as RadixSwitch from '@radix-ui/react-switch';\nimport { forwardRef, useId } from 'react';\nimport type { ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface SwitchProps {\n  /**\n   * 라벨 (컨트롤 우측). 디자인 시스템의 Toggle은 컨트롤 단독 정의지만,\n   * 범용 사용을 위해 라벨을 지원한다(Checkbox 라벨 스타일 준용). 없으면 `aria-label` 필수.\n   */\n  label?: ReactNode;\n  /** 켜짐 상태 (제어형). */\n  checked?: boolean;\n  /** 초기 상태 (비제어형). */\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  /** 폼 전송용 name. */\n  name?: string;\n  /** 폼 전송 시 값. @default 'on' */\n  value?: string;\n  required?: boolean;\n  id?: string;\n  className?: string;\n  'aria-label'?: string;\n}\n\n/**\n * 스위치(토글). Radix Switch 기반 — `role=\"switch\"`·Space/Enter 토글·폼 참여 자동.\n * 즉시 적용되는 켬/끔 설정에 사용한다 (제출이 필요한 선택은 Checkbox).\n *\n * @example\n * <Switch label=\"알림 받기\" checked={on} onCheckedChange={setOn} />\n */\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\n  { label, disabled = false, id: idProp, className, ...rest },\n  ref,\n) {\n  const reactId = useId();\n  const id = idProp ?? `nuri-switch-${reactId}`;\n\n  return (\n    <div className={cx('nuri-switch', className)}>\n      <RadixSwitch.Root\n        ref={ref}\n        id={id}\n        className=\"nuri-switch__control\"\n        disabled={disabled}\n        {...rest}\n      >\n        <RadixSwitch.Thumb className=\"nuri-switch__thumb\" />\n      </RadixSwitch.Root>\n      {label != null && (\n        <label htmlFor={id} className=\"nuri-switch__label\">\n          {label}\n        </label>\n      )}\n    </div>\n  );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,YAAY,iBAAiB;AAC7B,SAAS,YAAY,aAAa;;;ACA3B,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADuCI,SAQI,KARJ;AARG,IAAM,SAAS,WAA2C,SAASA,QACxE,EAAE,OAAO,WAAW,OAAO,IAAI,QAAQ,WAAW,GAAG,KAAK,GAC1D,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,eAAe,OAAO;AAE3C,SACE,qBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA;AAAA,MAAa;AAAA,MAAZ;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAU;AAAA,QACV;AAAA,QACC,GAAG;AAAA,QAEJ,8BAAa,mBAAZ,EAAkB,WAAU,sBAAqB;AAAA;AAAA,IACpD;AAAA,IACC,SAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAU,sBAC3B,iBACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Switch"]}

package/dist/Switch/styles.css

@@ -0,0 +1,71 @@
+/* 32×20 트랙 + 16px 썸. off 트랙 색 잠정 — TODO(Figma 실측 후 확정) */
+.nuri-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--nuri-control-gap);
+  font-family: inherit;
+}
+
+.nuri-switch__control {
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+  width: var(--nuri-control-switch-width);
+  height: var(--nuri-control-switch-height);
+  padding: 0;
+  border: none;
+  border-radius: calc(var(--nuri-control-switch-height) / 2);
+  background-color: var(--nuri-control-switch-track-off);
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+.nuri-switch__control[data-state='checked'] {
+  background-color: var(--nuri-control-bg-checked, var(--nuri-color-brand-default));
+}
+
+.nuri-switch__thumb {
+  display: block;
+  width: var(--nuri-control-switch-thumb-size);
+  height: var(--nuri-control-switch-thumb-size);
+  border-radius: 50%;
+  background-color: var(--nuri-color-white, #fff);
+  /* 트랙 안 2px 여백에서 좌우 이동 */
+  transform: translateX(2px);
+  transition: transform 120ms ease;
+  will-change: transform;
+}
+.nuri-switch__control[data-state='checked'] .nuri-switch__thumb {
+  transform: translateX(
+    calc(var(--nuri-control-switch-width) - var(--nuri-control-switch-thumb-size) - 2px)
+  );
+}
+
+.nuri-switch__control:focus-visible {
+  outline: var(--nuri-button-focus-ring-width) solid
+    var(--nuri-button-focus-ring-color, var(--nuri-color-brand-default));
+  outline-offset: var(--nuri-button-focus-ring-offset);
+}
+
+.nuri-switch__control:disabled {
+  background-color: var(--nuri-control-border-disabled);
+  cursor: not-allowed;
+}
+
+.nuri-switch__label {
+  font-size: var(--nuri-control-label-size);
+  line-height: var(--nuri-control-line-height);
+  color: var(--nuri-control-label-color);
+  cursor: pointer;
+  user-select: none;
+}
+.nuri-switch:has(.nuri-switch__control:disabled) .nuri-switch__label {
+  color: var(--nuri-control-label-disabled);
+  cursor: not-allowed;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .nuri-switch__control,
+  .nuri-switch__thumb {
+    transition: none;
+  }
+}

package/dist/Textarea/index.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Textarea/index.ts
+var Textarea_exports = {};
+__export(Textarea_exports, {
+  Textarea: () => Textarea
+});
+module.exports = __toCommonJS(Textarea_exports);
+
+// src/Textarea/Textarea.tsx
+var import_styles = require("./styles.css");
+var import_react = require("react");
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Textarea/Textarea.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Textarea = (0, import_react.forwardRef)(function Textarea2({
+  label,
+  hideLabel = false,
+  description,
+  invalid = false,
+  errorMessage,
+  block = false,
+  resize = "vertical",
+  autosize = false,
+  maxRows,
+  rows = 3,
+  disabled = false,
+  className,
+  id: idProp,
+  value,
+  onChange,
+  "aria-describedby": ariaDescribedby,
+  ...rest
+}, ref) {
+  const reactId = (0, import_react.useId)();
+  const id = idProp ?? `nuri-textarea-${reactId}`;
+  const messageId = `${id}-message`;
+  const innerRef = (0, import_react.useRef)(null);
+  const setRefs = (0, import_react.useCallback)(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const fitHeight = (0, import_react.useCallback)(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const cs = getComputedStyle(el);
+    const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+    const lineHeight = parseFloat(cs.lineHeight);
+    const maxHeight = maxRows != null && !Number.isNaN(lineHeight) ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders : Infinity;
+    el.style.height = "auto";
+    const contentHeight = el.scrollHeight + borders;
+    const next = Math.min(contentHeight, maxHeight);
+    if (!Number.isNaN(next)) el.style.height = `${next}px`;
+    el.style.overflowY = contentHeight > maxHeight ? "auto" : "hidden";
+  }, [maxRows]);
+  (0, import_react.useLayoutEffect)(() => {
+    if (autosize) fitHeight();
+  }, [autosize, fitHeight, value]);
+  const handleChange = (e) => {
+    onChange?.(e);
+    if (autosize) fitHeight();
+  };
+  const message = invalid && errorMessage != null ? errorMessage : description;
+  const hasMessage = message != null;
+  const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cx("nuri-textarea", block && "nuri-textarea--block", className), children: [
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: cx("nuri-textarea__label", hideLabel && "nuri-sr-only"), children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref: setRefs,
+        id,
+        rows,
+        value,
+        onChange: handleChange,
+        className: cx(
+          "nuri-textarea__control",
+          invalid && "nuri-textarea__control--invalid",
+          (resize === "none" || autosize) && "nuri-textarea__control--resize-none"
+        ),
+        disabled,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        ...rest
+      }
+    ),
+    hasMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "p",
+      {
+        id: messageId,
+        className: cx("nuri-textarea__message", invalid && "nuri-textarea__message--error"),
+        children: message
+      }
+    )
+  ] });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Textarea
+});
+//# sourceMappingURL=index.cjs.map

package/dist/Textarea/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Textarea/index.ts","../../src/Textarea/Textarea.tsx","../../src/utils/cx.ts"],"sourcesContent":["export { Textarea } from './Textarea.js';\nexport type { TextareaProps } from './Textarea.js';\n","'use client';\n\nimport './styles.css';\nimport { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';\nimport type { ChangeEvent, TextareaHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n   * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.\n   */\n  label?: ReactNode;\n  /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */\n  hideLabel?: boolean;\n  /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n  description?: ReactNode;\n  /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n  invalid?: boolean;\n  /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n  errorMessage?: ReactNode;\n  /** 컨테이너 전체 너비로 확장. @default false */\n  block?: boolean;\n  /**\n   * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.\n   * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).\n   * @default 'vertical'\n   */\n  resize?: 'vertical' | 'none';\n  /**\n   * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,\n   * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.\n   * @default false\n   */\n  autosize?: boolean;\n  /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */\n  maxRows?: number;\n}\n\n/**\n * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와\n * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.\n * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.\n *\n * @example\n * <Textarea label=\"문의 내용\" rows={5} block />\n *\n * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤\n * <Textarea label=\"댓글\" autosize rows={3} maxRows={8} />\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    label,\n    hideLabel = false,\n    description,\n    invalid = false,\n    errorMessage,\n    block = false,\n    resize = 'vertical',\n    autosize = false,\n    maxRows,\n    rows = 3,\n    disabled = false,\n    className,\n    id: idProp,\n    value,\n    onChange,\n    'aria-describedby': ariaDescribedby,\n    ...rest\n  },\n  ref,\n) {\n  const reactId = useId();\n  const id = idProp ?? `nuri-textarea-${reactId}`;\n  const messageId = `${id}-message`;\n\n  const innerRef = useRef<HTMLTextAreaElement | null>(null);\n  const setRefs = useCallback(\n    (node: HTMLTextAreaElement | null) => {\n      innerRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  // autosize: height를 내용(scrollHeight)에 맞추되 maxRows 상한에서 클램프.\n  const fitHeight = useCallback(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    const cs = getComputedStyle(el);\n    const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n    const lineHeight = parseFloat(cs.lineHeight);\n    // maxRows → px 상한 (line-height 계산 불가 환경에서는 무제한)\n    const maxHeight =\n      maxRows != null && !Number.isNaN(lineHeight)\n        ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders\n        : Infinity;\n\n    el.style.height = 'auto'; // 줄어드는 경우도 반영되도록 초기화 후 측정\n    const contentHeight = el.scrollHeight + borders; // scrollHeight는 border 미포함(border-box 보정)\n    const next = Math.min(contentHeight, maxHeight);\n    if (!Number.isNaN(next)) el.style.height = `${next}px`;\n    el.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';\n  }, [maxRows]);\n\n  // 마운트·제어형 value 변경·autosize 토글 시 재계산\n  useLayoutEffect(() => {\n    if (autosize) fitHeight();\n  }, [autosize, fitHeight, value]);\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    onChange?.(e);\n    if (autosize) fitHeight(); // 비제어형 입력에도 반응\n  };\n\n  // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄. (Input과 동일)\n  const message = invalid && errorMessage != null ? errorMessage : description;\n  const hasMessage = message != null;\n  const describedBy =\n    cx(hasMessage ? messageId : undefined, ariaDescribedby as string | undefined) || undefined;\n\n  return (\n    <div className={cx('nuri-textarea', block && 'nuri-textarea--block', className)}>\n      {label != null && (\n        <label htmlFor={id} className={cx('nuri-textarea__label', hideLabel && 'nuri-sr-only')}>\n          {label}\n        </label>\n      )}\n\n      <textarea\n        ref={setRefs}\n        id={id}\n        rows={rows}\n        value={value}\n        onChange={handleChange}\n        className={cx(\n          'nuri-textarea__control',\n          invalid && 'nuri-textarea__control--invalid',\n          (resize === 'none' || autosize) && 'nuri-textarea__control--resize-none',\n        )}\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        {...rest}\n      />\n\n      {hasMessage && (\n        <p\n          id={messageId}\n          className={cx('nuri-textarea__message', invalid && 'nuri-textarea__message--error')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,oBAAO;AACP,mBAAwE;;;ACCjE,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADqHI;AAzEG,IAAM,eAAW,yBAA+C,SAASA,UAC9E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,cAAU,oBAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAC7C,QAAM,YAAY,GAAG,EAAE;AAEvB,QAAM,eAAW,qBAAmC,IAAI;AACxD,QAAM,cAAU;AAAA,IACd,CAAC,SAAqC;AACpC,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAGA,QAAM,gBAAY,0BAAY,MAAM;AAClC,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,UAAM,UAAU,WAAW,GAAG,cAAc,IAAI,WAAW,GAAG,iBAAiB;AAC/E,UAAM,aAAa,WAAW,GAAG,UAAU;AAE3C,UAAM,YACJ,WAAW,QAAQ,CAAC,OAAO,MAAM,UAAU,IACvC,UAAU,aAAa,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,aAAa,IAAI,UAClF;AAEN,OAAG,MAAM,SAAS;AAClB,UAAM,gBAAgB,GAAG,eAAe;AACxC,UAAM,OAAO,KAAK,IAAI,eAAe,SAAS;AAC9C,QAAI,CAAC,OAAO,MAAM,IAAI,EAAG,IAAG,MAAM,SAAS,GAAG,IAAI;AAClD,OAAG,MAAM,YAAY,gBAAgB,YAAY,SAAS;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAGZ,oCAAgB,MAAM;AACpB,QAAI,SAAU,WAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,WAAW,KAAK,CAAC;AAE/B,QAAM,eAAe,CAAC,MAAwC;AAC5D,eAAW,CAAC;AACZ,QAAI,SAAU,WAAU;AAAA,EAC1B;AAGA,QAAM,UAAU,WAAW,gBAAgB,OAAO,eAAe;AACjE,QAAM,aAAa,WAAW;AAC9B,QAAM,cACJ,GAAG,aAAa,YAAY,QAAW,eAAqC,KAAK;AAEnF,SACE,6CAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,wBAAwB,SAAS,GAC3E;AAAA,aAAS,QACR,4CAAC,WAAM,SAAS,IAAI,WAAW,GAAG,wBAAwB,aAAa,cAAc,GAClF,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,WACV,WAAW,UAAU,aAAa;AAAA,QACrC;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,0BAA0B,WAAW,+BAA+B;AAAA,QAEjF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Textarea"]}

package/dist/Textarea/index.d.cts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.
+     * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.
+     */
+    label?: ReactNode;
+    /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */
+    hideLabel?: boolean;
+    /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */
+    description?: ReactNode;
+    /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */
+    invalid?: boolean;
+    /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */
+    errorMessage?: ReactNode;
+    /** 컨테이너 전체 너비로 확장. @default false */
+    block?: boolean;
+    /**
+     * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.
+     * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).
+     * @default 'vertical'
+     */
+    resize?: 'vertical' | 'none';
+    /**
+     * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,
+     * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.
+     * @default false
+     */
+    autosize?: boolean;
+    /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */
+    maxRows?: number;
+}
+/**
+ * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와
+ * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.
+ * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.
+ *
+ * @example
+ * <Textarea label="문의 내용" rows={5} block />
+ *
+ * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤
+ * <Textarea label="댓글" autosize rows={3} maxRows={8} />
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/Textarea/index.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.
+     * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.
+     */
+    label?: ReactNode;
+    /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */
+    hideLabel?: boolean;
+    /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */
+    description?: ReactNode;
+    /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */
+    invalid?: boolean;
+    /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */
+    errorMessage?: ReactNode;
+    /** 컨테이너 전체 너비로 확장. @default false */
+    block?: boolean;
+    /**
+     * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.
+     * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).
+     * @default 'vertical'
+     */
+    resize?: 'vertical' | 'none';
+    /**
+     * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,
+     * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.
+     * @default false
+     */
+    autosize?: boolean;
+    /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */
+    maxRows?: number;
+}
+/**
+ * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와
+ * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.
+ * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.
+ *
+ * @example
+ * <Textarea label="문의 내용" rows={5} block />
+ *
+ * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤
+ * <Textarea label="댓글" autosize rows={3} maxRows={8} />
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps };

package/dist/Textarea/index.js

@@ -0,0 +1,100 @@
+// src/Textarea/Textarea.tsx
+import "./styles.css";
+import { forwardRef, useCallback, useId, useLayoutEffect, useRef } from "react";
+
+// src/utils/cx.ts
+function cx(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+// src/Textarea/Textarea.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Textarea = forwardRef(function Textarea2({
+  label,
+  hideLabel = false,
+  description,
+  invalid = false,
+  errorMessage,
+  block = false,
+  resize = "vertical",
+  autosize = false,
+  maxRows,
+  rows = 3,
+  disabled = false,
+  className,
+  id: idProp,
+  value,
+  onChange,
+  "aria-describedby": ariaDescribedby,
+  ...rest
+}, ref) {
+  const reactId = useId();
+  const id = idProp ?? `nuri-textarea-${reactId}`;
+  const messageId = `${id}-message`;
+  const innerRef = useRef(null);
+  const setRefs = useCallback(
+    (node) => {
+      innerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const fitHeight = useCallback(() => {
+    const el = innerRef.current;
+    if (!el) return;
+    const cs = getComputedStyle(el);
+    const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
+    const lineHeight = parseFloat(cs.lineHeight);
+    const maxHeight = maxRows != null && !Number.isNaN(lineHeight) ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders : Infinity;
+    el.style.height = "auto";
+    const contentHeight = el.scrollHeight + borders;
+    const next = Math.min(contentHeight, maxHeight);
+    if (!Number.isNaN(next)) el.style.height = `${next}px`;
+    el.style.overflowY = contentHeight > maxHeight ? "auto" : "hidden";
+  }, [maxRows]);
+  useLayoutEffect(() => {
+    if (autosize) fitHeight();
+  }, [autosize, fitHeight, value]);
+  const handleChange = (e) => {
+    onChange?.(e);
+    if (autosize) fitHeight();
+  };
+  const message = invalid && errorMessage != null ? errorMessage : description;
+  const hasMessage = message != null;
+  const describedBy = cx(hasMessage ? messageId : void 0, ariaDescribedby) || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cx("nuri-textarea", block && "nuri-textarea--block", className), children: [
+    label != null && /* @__PURE__ */ jsx("label", { htmlFor: id, className: cx("nuri-textarea__label", hideLabel && "nuri-sr-only"), children: label }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: setRefs,
+        id,
+        rows,
+        value,
+        onChange: handleChange,
+        className: cx(
+          "nuri-textarea__control",
+          invalid && "nuri-textarea__control--invalid",
+          (resize === "none" || autosize) && "nuri-textarea__control--resize-none"
+        ),
+        disabled,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": describedBy,
+        ...rest
+      }
+    ),
+    hasMessage && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: messageId,
+        className: cx("nuri-textarea__message", invalid && "nuri-textarea__message--error"),
+        children: message
+      }
+    )
+  ] });
+});
+export {
+  Textarea
+};
+//# sourceMappingURL=index.js.map

package/dist/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Textarea/Textarea.tsx","../../src/utils/cx.ts"],"sourcesContent":["'use client';\n\nimport './styles.css';\nimport { forwardRef, useCallback, useId, useLayoutEffect, useRef } from 'react';\nimport type { ChangeEvent, TextareaHTMLAttributes, ReactNode } from 'react';\nimport { cx } from '../utils/cx.js';\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /**\n   * 라벨 (필드 위). 지정 시 `<label>`로 렌더되어 자동 연결됨.\n   * 라벨을 두지 않으면 `aria-label`로 접근 가능한 이름을 주세요.\n   */\n  label?: ReactNode;\n  /** 라벨을 시각적으로만 숨김 (스크린리더에는 노출). @default false */\n  hideLabel?: boolean;\n  /** 평상시 힌트 (회색, 필드 아래). `aria-describedby`로 연결됨. */\n  description?: ReactNode;\n  /** 에러 상태 — 보더·텍스트·배경이 에러색으로 바뀌고 `aria-invalid`가 설정됨. */\n  invalid?: boolean;\n  /** `invalid`일 때 표시할 에러 메시지 (빨강). 있으면 description을 대체. */\n  errorMessage?: ReactNode;\n  /** 컨테이너 전체 너비로 확장. @default false */\n  block?: boolean;\n  /**\n   * 크기 조절 핸들. 세로 조절 허용이 기본 — 긴 입력을 사용자가 늘려 볼 수 있게.\n   * `autosize`가 켜지면 무시된다(자동 크기와 수동 핸들은 충돌).\n   * @default 'vertical'\n   */\n  resize?: 'vertical' | 'none';\n  /**\n   * 내용에 따라 높이 자동 조절. `rows`(최소)에서 시작해 내용만큼 늘어나고,\n   * `maxRows`에 도달하면 멈추고 스크롤이 생긴다.\n   * @default false\n   */\n  autosize?: boolean;\n  /** `autosize`일 때 최대 줄 수 — 넘으면 스크롤. 미지정 시 무제한 확장. */\n  maxRows?: number;\n}\n\n/**\n * 여러 줄 텍스트 입력. Input과 동일한 디자인 언어(보더·상태·타이포)와\n * 라벨/힌트/에러 자동 연결 패턴을 따르는 자체 완결형.\n * 높이는 native `rows`(기본 3)로 제어하고, `autosize`로 자동 확장도 지원한다.\n *\n * @example\n * <Textarea label=\"문의 내용\" rows={5} block />\n *\n * @example 자동 높이 — 3줄에서 시작해 8줄까지 늘어난 뒤 스크롤\n * <Textarea label=\"댓글\" autosize rows={3} maxRows={8} />\n */\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(\n  {\n    label,\n    hideLabel = false,\n    description,\n    invalid = false,\n    errorMessage,\n    block = false,\n    resize = 'vertical',\n    autosize = false,\n    maxRows,\n    rows = 3,\n    disabled = false,\n    className,\n    id: idProp,\n    value,\n    onChange,\n    'aria-describedby': ariaDescribedby,\n    ...rest\n  },\n  ref,\n) {\n  const reactId = useId();\n  const id = idProp ?? `nuri-textarea-${reactId}`;\n  const messageId = `${id}-message`;\n\n  const innerRef = useRef<HTMLTextAreaElement | null>(null);\n  const setRefs = useCallback(\n    (node: HTMLTextAreaElement | null) => {\n      innerRef.current = node;\n      if (typeof ref === 'function') ref(node);\n      else if (ref) ref.current = node;\n    },\n    [ref],\n  );\n\n  // autosize: height를 내용(scrollHeight)에 맞추되 maxRows 상한에서 클램프.\n  const fitHeight = useCallback(() => {\n    const el = innerRef.current;\n    if (!el) return;\n    const cs = getComputedStyle(el);\n    const borders = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);\n    const lineHeight = parseFloat(cs.lineHeight);\n    // maxRows → px 상한 (line-height 계산 불가 환경에서는 무제한)\n    const maxHeight =\n      maxRows != null && !Number.isNaN(lineHeight)\n        ? maxRows * lineHeight + parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom) + borders\n        : Infinity;\n\n    el.style.height = 'auto'; // 줄어드는 경우도 반영되도록 초기화 후 측정\n    const contentHeight = el.scrollHeight + borders; // scrollHeight는 border 미포함(border-box 보정)\n    const next = Math.min(contentHeight, maxHeight);\n    if (!Number.isNaN(next)) el.style.height = `${next}px`;\n    el.style.overflowY = contentHeight > maxHeight ? 'auto' : 'hidden';\n  }, [maxRows]);\n\n  // 마운트·제어형 value 변경·autosize 토글 시 재계산\n  useLayoutEffect(() => {\n    if (autosize) fitHeight();\n  }, [autosize, fitHeight, value]);\n\n  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n    onChange?.(e);\n    if (autosize) fitHeight(); // 비제어형 입력에도 반응\n  };\n\n  // invalid + errorMessage → 에러 메시지 / 아니면 힌트. 시각 슬롯은 항상 한 줄. (Input과 동일)\n  const message = invalid && errorMessage != null ? errorMessage : description;\n  const hasMessage = message != null;\n  const describedBy =\n    cx(hasMessage ? messageId : undefined, ariaDescribedby as string | undefined) || undefined;\n\n  return (\n    <div className={cx('nuri-textarea', block && 'nuri-textarea--block', className)}>\n      {label != null && (\n        <label htmlFor={id} className={cx('nuri-textarea__label', hideLabel && 'nuri-sr-only')}>\n          {label}\n        </label>\n      )}\n\n      <textarea\n        ref={setRefs}\n        id={id}\n        rows={rows}\n        value={value}\n        onChange={handleChange}\n        className={cx(\n          'nuri-textarea__control',\n          invalid && 'nuri-textarea__control--invalid',\n          (resize === 'none' || autosize) && 'nuri-textarea__control--resize-none',\n        )}\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        aria-describedby={describedBy}\n        {...rest}\n      />\n\n      {hasMessage && (\n        <p\n          id={messageId}\n          className={cx('nuri-textarea__message', invalid && 'nuri-textarea__message--error')}\n        >\n          {message}\n        </p>\n      )}\n    </div>\n  );\n});\n","/**\n * 조건부 className 합성 유틸. falsy 값(undefined/false/null/'')은 제거.\n * @example cx('btn', isActive && 'btn--active', className)\n */\nexport function cx(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(' ');\n}\n"],"mappings":";AAEA,OAAO;AACP,SAAS,YAAY,aAAa,OAAO,iBAAiB,cAAc;;;ACCjE,SAAS,MAAM,SAA2D;AAC/E,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;;;ADqHI,SAEI,KAFJ;AAzEG,IAAM,WAAW,WAA+C,SAASA,UAC9E;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,iBAAiB,OAAO;AAC7C,QAAM,YAAY,GAAG,EAAE;AAEvB,QAAM,WAAW,OAAmC,IAAI;AACxD,QAAM,UAAU;AAAA,IACd,CAAC,SAAqC;AACpC,eAAS,UAAU;AACnB,UAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,eAC9B,IAAK,KAAI,UAAU;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAGA,QAAM,YAAY,YAAY,MAAM;AAClC,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,UAAM,UAAU,WAAW,GAAG,cAAc,IAAI,WAAW,GAAG,iBAAiB;AAC/E,UAAM,aAAa,WAAW,GAAG,UAAU;AAE3C,UAAM,YACJ,WAAW,QAAQ,CAAC,OAAO,MAAM,UAAU,IACvC,UAAU,aAAa,WAAW,GAAG,UAAU,IAAI,WAAW,GAAG,aAAa,IAAI,UAClF;AAEN,OAAG,MAAM,SAAS;AAClB,UAAM,gBAAgB,GAAG,eAAe;AACxC,UAAM,OAAO,KAAK,IAAI,eAAe,SAAS;AAC9C,QAAI,CAAC,OAAO,MAAM,IAAI,EAAG,IAAG,MAAM,SAAS,GAAG,IAAI;AAClD,OAAG,MAAM,YAAY,gBAAgB,YAAY,SAAS;AAAA,EAC5D,GAAG,CAAC,OAAO,CAAC;AAGZ,kBAAgB,MAAM;AACpB,QAAI,SAAU,WAAU;AAAA,EAC1B,GAAG,CAAC,UAAU,WAAW,KAAK,CAAC;AAE/B,QAAM,eAAe,CAAC,MAAwC;AAC5D,eAAW,CAAC;AACZ,QAAI,SAAU,WAAU;AAAA,EAC1B;AAGA,QAAM,UAAU,WAAW,gBAAgB,OAAO,eAAe;AACjE,QAAM,aAAa,WAAW;AAC9B,QAAM,cACJ,GAAG,aAAa,YAAY,QAAW,eAAqC,KAAK;AAEnF,SACE,qBAAC,SAAI,WAAW,GAAG,iBAAiB,SAAS,wBAAwB,SAAS,GAC3E;AAAA,aAAS,QACR,oBAAC,WAAM,SAAS,IAAI,WAAW,GAAG,wBAAwB,aAAa,cAAc,GAClF,iBACH;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA,WAAW;AAAA,WACV,WAAW,UAAU,aAAa;AAAA,QACrC;AAAA,QACA;AAAA,QACA,gBAAc,WAAW;AAAA,QACzB,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IAEC,cACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,WAAW,GAAG,0BAA0B,WAAW,+BAA+B;AAAA,QAEjF;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ,CAAC;","names":["Textarea"]}

package/dist/Textarea/styles.css

@@ -0,0 +1,95 @@
+/* Input과 동일한 토큰(--nuri-input-*)을 공유 — 폼 계열 시각 언어 통일 */
+.nuri-textarea {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--nuri-input-field-gap);
+  font-family: inherit; /* 앱 폰트 상속 */
+}
+.nuri-textarea--block {
+  display: flex;
+  width: 100%;
+}
+
+.nuri-textarea__label {
+  font-size: var(--nuri-input-label-size);
+  font-weight: var(--nuri-input-label-weight);
+  line-height: var(--nuri-input-line-height);
+  color: var(--nuri-input-label-color);
+}
+
+/* 시각적으로만 숨김 (스크린리더에는 노출) — 이 CSS 단독 사용 대비 재선언 */
+.nuri-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.nuri-textarea__control {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  padding: var(--nuri-input-padding-y) var(--nuri-input-padding-x);
+  background-color: var(--nuri-input-bg);
+  border: 1px solid var(--nuri-input-border);
+  border-radius: var(--nuri-input-radius);
+  font-family: inherit;
+  font-size: var(--nuri-input-font-size);
+  font-weight: var(--nuri-input-font-weight);
+  line-height: var(--nuri-input-line-height);
+  color: var(--nuri-input-text);
+  outline: none;
+  resize: vertical;
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease;
+}
+.nuri-textarea__control--resize-none {
+  resize: none;
+}
+
+.nuri-textarea__control::placeholder {
+  color: var(--nuri-input-placeholder);
+  opacity: 1; /* Firefox 기본 opacity 제거 */
+}
+
+/* focus — 브랜드색 보더 (Input의 focus 문법과 동일, use-site 폴백) */
+.nuri-textarea__control:focus {
+  border-color: var(--nuri-input-border-focus, var(--nuri-color-brand-default));
+}
+
+/* error — focus보다 뒤에 선언해 에러 상태가 우선 */
+.nuri-textarea__control--invalid,
+.nuri-textarea__control--invalid:focus {
+  background-color: var(--nuri-input-bg-error);
+  border-color: var(--nuri-input-border-error);
+  color: var(--nuri-input-text-error);
+}
+.nuri-textarea__control--invalid::placeholder {
+  color: var(--nuri-input-text-error);
+}
+
+/* disabled */
+.nuri-textarea__control:disabled {
+  background-color: var(--nuri-input-bg-disabled);
+  border-color: var(--nuri-input-border-disabled);
+  color: var(--nuri-input-text-disabled);
+  -webkit-text-fill-color: var(--nuri-input-text-disabled); /* Safari disabled 색 강제 */
+  cursor: not-allowed;
+  resize: none;
+}
+
+.nuri-textarea__message {
+  margin: 0;
+  font-size: var(--nuri-input-desc-size);
+  line-height: var(--nuri-input-line-height);
+  color: var(--nuri-input-desc-color);
+}
+.nuri-textarea__message--error {
+  color: var(--nuri-input-text-error);
+}