@x-plat/design-system 0.8.3 → 0.10.0

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

@@ -1,14 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
-type TagType = "neutral" | "categorical";
+type TagVariant = "neutral" | "categorical";
 type TagSize = "sm" | "md" | "lg";
 interface TagProps {
     children: React.ReactNode;
-    type?: TagType;
+    /** 태그 배색. `categorical` 은 `colorIndex` 로 계열 색을 고른다 */
+    variant?: TagVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TagVariant;
+    /** 주면 오른쪽에 닫기 버튼이 생긴다. 제거 가능한 태그로 쓸 때 */
     onClose?: () => void;
+    /** 태그 크기 */
     size?: TagSize;
+    /** 흐리게 표시하고 닫기 버튼을 막는다 */
     disabled?: boolean;
+    /** variant 가 categorical 일 때 쓸 계열 색 번호 (1~8) */
     colorIndex?: number;
 }
 declare const Tag: {

package/dist/components/Tag/index.js

@@ -913,20 +913,22 @@ import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
 var Tag = (props) => {
   const {
     children,
-    type = "neutral",
+    variant,
+    type,
     onClose,
     size = "md",
     disabled = false,
     colorIndex
   } = props;
+  const shape = variant ?? type ?? "neutral";
   return /* @__PURE__ */ jsxs189(
     "span",
     {
       className: clsx_default(
         "lib-xplat-tag",
-        type,
+        shape,
         size,
-        type === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
+        shape === "categorical" && colorIndex !== void 0 && `cat-${colorIndex}`,
         disabled && "disabled"
       ),
       children: [

package/dist/components/TextArea/index.cjs

@@ -53,29 +53,165 @@ function clsx() {
 }
 var clsx_default = clsx;
 
-// src/components/TextArea/TextArea.tsx
+// src/tokens/svg/status/ErrorIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var ErrorIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/status/InfoIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/status/SuccessIcon.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// src/components/FieldMessage/FieldMessage.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ICON = {
+  default: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
+  success: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
+  error: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
+// src/components/TextArea/TextArea.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TextArea = import_react.default.forwardRef(
   (props, ref) => {
     const {
       className,
       size = "md",
+      validations,
       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)(
+    const control = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "textarea",
       {
         ...textareaProps,
         ref,
         rows,
         disabled,
+        "aria-invalid": hasError(validations) || void 0,
         className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
         style: { resize }
       }
     ) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { validations, children: control });
   }
 );
 TextArea.displayName = "TextArea";

package/dist/components/TextArea/index.css

@@ -1,3 +1,41 @@
+/* src/components/FieldMessage/fieldMessage.scss */
+.lib-xplat-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-field-message-wrap {
+  display: flex;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message {
+  display: flex;
+  gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  align-items: center;
+  user-select: none;
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.default {
+  color: var(--semantic-icon-secondary);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.success {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.warning {
+  color: var(--semantic-text-warning);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.error {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message > .icon {
+  font-size: var(--semantic-typo-label-2-m-size);
+}
+
 /* src/components/TextArea/textArea.scss */
 .lib-xplat-textarea-wrap {
   display: flex;

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

@@ -1,11 +1,17 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.cjs';
+import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 type TextAreaSize = "sm" | "md" | "lg";
 type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 interface TextAreaProps extends Omit<TextareaAttributes, "size"> {
+    /** 안쪽 여백과 글자 크기 */
     size?: TextAreaSize;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+    /** 사용자가 크기를 조절할 방향 */
     resize?: TextAreaResize;
+    /** 기본으로 보일 줄 수 */
     rows?: number;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -1,11 +1,17 @@
 import React from 'react';
 import { T as TextareaAttributes } from '../../attributes-DJIWir_0.js';
+import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 type TextAreaSize = "sm" | "md" | "lg";
 type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
 interface TextAreaProps extends Omit<TextareaAttributes, "size"> {
+    /** 안쪽 여백과 글자 크기 */
     size?: TextAreaSize;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+    /** 사용자가 크기를 조절할 방향 */
     resize?: TextAreaResize;
+    /** 기본으로 보일 줄 수 */
     rows?: number;
 }
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextArea/index.js

@@ -17,29 +17,165 @@ function clsx() {
 }
 var clsx_default = clsx;
 
+// src/tokens/svg/status/ErrorIcon.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.57588 5.57559C9.81019 5.34127 10.19 5.34127 10.4243 5.57559C10.6586 5.8099 10.6586 6.18971 10.4243 6.42402L8.84854 7.9998L10.4243 9.57559C10.6586 9.8099 10.6586 10.1897 10.4243 10.424C10.19 10.6583 9.81019 10.6583 9.57588 10.424L8.0001 8.84824L6.42432 10.424C6.19 10.6583 5.81019 10.6583 5.57588 10.424C5.34156 10.1897 5.34156 9.8099 5.57588 9.57559L7.15166 7.9998L5.57588 6.42402C5.34156 6.18971 5.34156 5.8099 5.57588 5.57559C5.81019 5.34127 6.19 5.34127 6.42432 5.57559L8.0001 7.15137L9.57588 5.57559Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.0001 0.733398C12.0131 0.73361 15.2671 3.98679 15.2673 7.9998C15.2672 12.0129 12.0131 15.2668 8.0001 15.267C3.98701 15.2669 0.733016 12.0129 0.73291 7.9998C0.733051 3.98674 3.98704 0.733539 8.0001 0.733398ZM8.0001 1.9334C4.64978 1.93354 1.93383 4.64948 1.93369 7.9998C1.9338 11.3502 4.64975 14.0669 8.0001 14.067C11.3504 14.0668 14.0672 11.3501 14.0673 7.9998C14.0671 4.64953 11.3504 1.93361 8.0001 1.9334Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ jsx("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
+
+// src/tokens/svg/status/InfoIcon.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var InfoIcon = () => /* @__PURE__ */ jsxs2(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs2("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M8.00156 7.39999C8.33293 7.39999 8.60156 7.66862 8.60156 7.99999V10.6664C8.60156 10.9978 8.33293 11.2664 8.00156 11.2664C7.67019 11.2664 7.40156 10.9978 7.40156 10.6664V7.99999C7.40156 7.66862 7.67019 7.39999 8.00156 7.39999Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M8.00859 4.73358C8.3398 4.73378 8.60859 5.00233 8.60859 5.33358C8.60849 5.66474 8.33973 5.93338 8.00859 5.93358H8.00156C7.67026 5.93358 7.40167 5.66486 7.40156 5.33358C7.40156 5.00221 7.67019 4.73358 8.00156 4.73358H8.00859Z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M8.00156 0.733582C12.0146 0.733793 15.2686 3.98697 15.2688 7.99999C15.2686 12.013 12.0146 15.267 8.00156 15.2672C3.98848 15.267 0.734481 12.0131 0.734375 7.99999C0.734516 3.98693 3.9885 0.733722 8.00156 0.733582ZM8.00156 1.93358C4.65124 1.93372 1.9353 4.64967 1.93516 7.99999C1.93526 11.3503 4.65122 14.067 8.00156 14.0672C11.3518 14.067 14.0686 11.3503 14.0688 7.99999C14.0686 4.64971 11.3518 1.93379 8.00156 1.93358Z",
+            fill: "currentColor"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ jsx2("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
+
+// src/tokens/svg/status/SuccessIcon.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsx3(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ jsx3(
+      "path",
+      {
+        d: "M12.9084 3.57597C13.1426 3.34172 13.5225 3.34185 13.7568 3.57597C13.9911 3.81028 13.9911 4.19009 13.7568 4.4244L6.424 11.758C6.31157 11.8703 6.15869 11.9337 5.99978 11.9338C5.8409 11.9337 5.68798 11.8703 5.57556 11.758L2.24197 8.4244C2.00782 8.19018 2.00795 7.81028 2.24197 7.57597C2.47626 7.34167 2.85609 7.34172 3.09041 7.57597L5.999 10.4846L12.9084 3.57597Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+var SuccessIcon_default = SuccessIcon;
+
+// src/components/FieldMessage/FieldMessage.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ICON = {
+  default: /* @__PURE__ */ jsx4(InfoIcon_default, {}),
+  success: /* @__PURE__ */ jsx4(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ jsx4(InfoIcon_default, {}),
+  error: /* @__PURE__ */ jsx4(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ jsx4("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ jsx4("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx4(Fragment, { children });
+  return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ jsx4(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
 // src/components/TextArea/TextArea.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var TextArea = React.forwardRef(
   (props, ref) => {
     const {
       className,
       size = "md",
+      validations,
       resize = "vertical",
       rows = 3,
       disabled,
       ...textareaProps
     } = props;
-    return /* @__PURE__ */ jsx("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx(
+    const control = /* @__PURE__ */ jsx5("div", { className: clsx_default("lib-xplat-textarea-wrap", className), children: /* @__PURE__ */ jsx5(
       "textarea",
       {
         ...textareaProps,
         ref,
         rows,
         disabled,
+        "aria-invalid": hasError(validations) || void 0,
         className: clsx_default("lib-xplat-textarea", size, disabled && "disabled"),
         style: { resize }
       }
     ) });
+    return /* @__PURE__ */ jsx5(Field, { validations, children: control });
   }
 );
 TextArea.displayName = "TextArea";

package/dist/components/Tooltip/index.cjs

@@ -72,10 +72,12 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
+  const shape = variant ?? type ?? "dark";
   const triggerRef = import_react.default.useRef(null);
   const tooltipRef = import_react.default.useRef(null);
   const [visible, setVisible] = import_react.default.useState(false);
@@ -185,7 +187,7 @@ var Tooltip = (props) => {
           {
             ref: tooltipRef,
             role: "tooltip",
-            className: clsx_default("lib-xplat-tooltip", type),
+            className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
               title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tooltip-title", children: title }),

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

@@ -1,10 +1,19 @@
 import React from 'react';
 
+type TooltipVariant = "dark" | "light";
 interface TooltipProps {
     children: React.ReactNode;
+    /** 말풍선 첫 줄. 굵게 표시된다 */
     title?: React.ReactNode;
+    /** 말풍선 본문. title 과 둘 중 하나는 있어야 뜬다 */
     description?: React.ReactNode;
-    type?: "dark" | "light";
+    /** 말풍선 배색 */
+    variant?: TooltipVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TooltipVariant;
     /**
      * 커서를 따라다닌다. 기본값은 `false` — 트리거 요소 기준으로 고정된다
      * (PopOver/Dropdown/Select 와 같은 방식).
@@ -13,6 +22,7 @@ interface TooltipProps {
      * 아이콘처럼 대상이 작은 경우는 고정이 읽기 편하다.
      */
     follow?: boolean;
+    /** 말풍선을 띄우지 않는다 */
     disabled?: boolean;
 }
 declare const Tooltip: React.FC<TooltipProps>;

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

@@ -1,10 +1,19 @@
 import React from 'react';
 
+type TooltipVariant = "dark" | "light";
 interface TooltipProps {
     children: React.ReactNode;
+    /** 말풍선 첫 줄. 굵게 표시된다 */
     title?: React.ReactNode;
+    /** 말풍선 본문. title 과 둘 중 하나는 있어야 뜬다 */
     description?: React.ReactNode;
-    type?: "dark" | "light";
+    /** 말풍선 배색 */
+    variant?: TooltipVariant;
+    /**
+     * @deprecated 모양 변형은 `variant` 로 받는다. `type` 은 상태 색 전용이다.
+     * 기존 사용처가 깨지지 않도록 계속 받는다 — 둘 다 주면 `variant` 가 이긴다.
+     */
+    type?: TooltipVariant;
     /**
      * 커서를 따라다닌다. 기본값은 `false` — 트리거 요소 기준으로 고정된다
      * (PopOver/Dropdown/Select 와 같은 방식).
@@ -13,6 +22,7 @@ interface TooltipProps {
      * 아이콘처럼 대상이 작은 경우는 고정이 읽기 편하다.
      */
     follow?: boolean;
+    /** 말풍선을 띄우지 않는다 */
     disabled?: boolean;
 }
 declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/Tooltip/index.js

@@ -36,10 +36,12 @@ var Tooltip = (props) => {
     children,
     title,
     description,
-    type = "dark",
+    variant,
+    type,
     follow = false,
     disabled = false
   } = props;
+  const shape = variant ?? type ?? "dark";
   const triggerRef = React.useRef(null);
   const tooltipRef = React.useRef(null);
   const [visible, setVisible] = React.useState(false);
@@ -149,7 +151,7 @@ var Tooltip = (props) => {
           {
             ref: tooltipRef,
             role: "tooltip",
-            className: clsx_default("lib-xplat-tooltip", type),
+            className: clsx_default("lib-xplat-tooltip", shape),
             style: { position: "fixed", left: pos.left, top: pos.top },
             children: [
               title && /* @__PURE__ */ jsx("div", { className: "tooltip-title", children: title }),