@x-plat/design-system 0.8.3 → 0.10.0

package/dist/components/Pagination/index.cjs

@@ -24,6 +24,9 @@ __export(Pagination_exports, {
 });
 module.exports = __toCommonJS(Pagination_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 
@@ -981,8 +984,9 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -990,7 +994,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
       "button",
       {

package/dist/components/Pagination/index.css

@@ -93,6 +93,7 @@
 .lib-xplat-pagination .page-btn svg {
   font-size: var(--semantic-typo-label-2-m-size);
 }
+.lib-xplat-pagination.primary .page-btn.active,
 .lib-xplat-pagination.brand .page-btn.active {
   background-color: var(--semantic-surface-brand-default);
 }

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

@@ -1,15 +1,26 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
 type PaginationSize = "sm" | "md" | "lg";
-type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+/** Pagination 의 상태 색 */
+type PaginationType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type PaginationTypeInput = PaginationType | LegacyStatusType;
 interface PaginationProps {
+    /** 현재 페이지 (1부터 시작) */
     current: number;
+    /** **전체 아이템 수**. 페이지 수가 아니다 */
     total: number;
+    /** 한 페이지에 담기는 아이템 수. total 과 함께 페이지 수를 계산한다 */
     pageSize?: number;
+    /** 현재 페이지 좌우로 보여줄 번호 개수 */
     siblingCount?: number;
+    /** 페이지를 누르면 새 페이지 번호를 준다 */
     onChange?: (page: number) => void;
+    /** 버튼 크기 */
     size?: PaginationSize;
-    type?: PaginationType;
+    /** 활성 페이지 색 */
+    type?: PaginationTypeInput;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

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

@@ -1,15 +1,26 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
 type PaginationSize = "sm" | "md" | "lg";
-type PaginationType = "brand" | "success" | "error" | "warning" | "info";
+/** Pagination 의 상태 색 */
+type PaginationType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type PaginationTypeInput = PaginationType | LegacyStatusType;
 interface PaginationProps {
+    /** 현재 페이지 (1부터 시작) */
     current: number;
+    /** **전체 아이템 수**. 페이지 수가 아니다 */
     total: number;
+    /** 한 페이지에 담기는 아이템 수. total 과 함께 페이지 수를 계산한다 */
     pageSize?: number;
+    /** 현재 페이지 좌우로 보여줄 번호 개수 */
     siblingCount?: number;
+    /** 페이지를 누르면 새 페이지 번호를 준다 */
     onChange?: (page: number) => void;
+    /** 버튼 크기 */
     size?: PaginationSize;
-    type?: PaginationType;
+    /** 활성 페이지 색 */
+    type?: PaginationTypeInput;
 }
 declare const Pagination: {
     (props: PaginationProps): react_jsx_runtime.JSX.Element;

package/dist/components/Pagination/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // src/tokens/svg/action/CopyIcon.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -955,8 +958,9 @@ var Pagination = (props) => {
     siblingCount = 1,
     onChange,
     size = "md",
-    type = "brand"
+    type = "primary"
   } = props;
+  const statusType = normalizeStatus(type);
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const pages = getPageRange(current, totalPages, siblingCount);
   const handleClick = (page) => {
@@ -964,7 +968,7 @@ var Pagination = (props) => {
       onChange?.(page);
     }
   };
-  return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size, type), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
+  return /* @__PURE__ */ jsxs189("nav", { className: clsx_default("lib-xplat-pagination", size, statusType), "aria-label": "\uD398\uC774\uC9C0 \uB124\uBE44\uAC8C\uC774\uC158", children: [
     /* @__PURE__ */ jsx295(
       "button",
       {

package/dist/components/Progress/index.cjs

@@ -24,6 +24,9 @@ __export(Progress_exports, {
 });
 module.exports = __toCommonJS(Progress_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -47,11 +50,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {

package/dist/components/Progress/index.css

@@ -25,6 +25,7 @@
   border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
 }
+.lib-xplat-progress.primary .bar,
 .lib-xplat-progress.brand .bar {
   background-color: var(--semantic-surface-brand-default);
 }

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

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
 type ProgressSize = "sm" | "md" | "lg";
-type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+/** Progress 의 상태 색 */
+type ProgressType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type ProgressTypeInput = ProgressType | LegacyStatusType;
 interface ProgressProps {
+    /** 현재 값. max 에 대한 비율로 채워진다 */
     value: number;
+    /** 최대값. 기본 100 */
     max?: number;
+    /** 막대 두께 */
     size?: ProgressSize;
-    type?: ProgressType;
+    /** 막대 색 */
+    type?: ProgressTypeInput;
+    /** 오른쪽에 퍼센트 글자를 표시한다 */
     showLabel?: boolean;
 }
 declare const Progress: {

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

@@ -1,12 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
 type ProgressSize = "sm" | "md" | "lg";
-type ProgressType = "brand" | "success" | "error" | "warning" | "info";
+/** Progress 의 상태 색 */
+type ProgressType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type ProgressTypeInput = ProgressType | LegacyStatusType;
 interface ProgressProps {
+    /** 현재 값. max 에 대한 비율로 채워진다 */
     value: number;
+    /** 최대값. 기본 100 */
     max?: number;
+    /** 막대 두께 */
     size?: ProgressSize;
-    type?: ProgressType;
+    /** 막대 색 */
+    type?: ProgressTypeInput;
+    /** 오른쪽에 퍼센트 글자를 표시한다 */
     showLabel?: boolean;
 }
 declare const Progress: {

package/dist/components/Progress/index.js

@@ -1,3 +1,6 @@
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -21,11 +24,12 @@ var Progress = (props) => {
     value,
     max = 100,
     size = "md",
-    type = "brand",
+    type = "primary",
     showLabel = false
   } = props;
+  const statusType = normalizeStatus(type);
   const percentage = Math.min(100, Math.max(0, value / max * 100));
-  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, type), children: [
+  return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-progress", size, statusType), children: [
     /* @__PURE__ */ jsx(
       "div",
       {

package/dist/components/Radio/index.cjs

@@ -35,6 +35,9 @@ __export(Radio_exports, {
 });
 module.exports = __toCommonJS(Radio_exports);
 
+// src/tokens/interface/status.ts
+var normalizeStatus = (value) => value === "brand" ? "primary" : value;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -51,6 +54,139 @@ function clsx() {
 }
 var clsx_default = clsx;
 
+// 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/Radio/RadioGroupContext.tsx
 var import_react = __toESM(require("react"), 1);
 var RadioGroupContext = import_react.default.createContext(
@@ -62,16 +198,18 @@ var useRadioGroupContext = () => {
 var RadioGroupContext_default = RadioGroupContext;
 
 // src/components/Radio/Radio.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Radio = (props) => {
   const {
     label,
     className,
     value,
     size: sizeProp,
-    type = "brand",
+    type = "primary",
+    validations,
     ...rest
   } = props;
+  const statusType = normalizeStatus(type);
   const context = useRadioGroupContext();
   const size = sizeProp ?? context?.size ?? "md";
   const isGroup = !!context;
@@ -81,41 +219,51 @@ var Radio = (props) => {
     value,
     onChange: rest.onChange
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  const control = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "label",
     {
       className: clsx_default(
         "lib-xplat-radio",
         size,
-        type,
+        statusType,
         localChecked ? "checked" : void 0,
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...rest, ...inputProps, checked: localChecked, type: "radio" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            ...rest,
+            ...inputProps,
+            checked: localChecked,
+            type: "radio",
+            "aria-invalid": hasError(validations) || void 0
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "div",
           {
             className: clsx_default(
               "circle",
               localChecked ? "checked" : void 0
             ),
-            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "inner-circle" })
+            children: localChecked && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "inner-circle" })
           }
         ),
-        label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: label })
       ]
     }
   );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { validations, children: control });
 };
 Radio.displayName = "Radio";
 var Radio_default = Radio;
 
 // src/components/Radio/RadioGroup.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var RadioGroup = (props) => {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RadioGroupContext_default.Provider, { value: rest, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 var RadioGroup_default = RadioGroup;

package/dist/components/Radio/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/Radio/radio.scss */
 .lib-xplat-radio {
   display: flex;
@@ -74,6 +112,7 @@
   border-color: var(--semantic-icon-primary);
   background-color: var(--semantic-surface-neutral-secondary);
 }
+.lib-xplat-radio.primary > .circle.checked,
 .lib-xplat-radio.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-default);
   border-color: var(--semantic-surface-brand-default);
@@ -94,6 +133,7 @@
   background-color: var(--semantic-surface-info-default);
   border-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-radio:hover.primary > .circle.checked,
 .lib-xplat-radio:hover.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-strong);
   border-color: var(--semantic-surface-brand-strong);

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

@@ -1,9 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
+import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-type RadioType = "brand" | "success" | "error" | "warning" | "info";
+/** Radio 의 상태 색 */
+type RadioType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type RadioTypeInput = RadioType | LegacyStatusType;
 interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
@@ -11,8 +16,12 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
      */
     name?: string;
     value: string | number;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+    /** 컨트롤 크기 */
     size?: RadioSize;
-    type?: RadioType;
+    /** 선택됐을 때의 색 */
+    type?: RadioTypeInput;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
@@ -24,9 +33,12 @@ declare const Radio: {
 };
 
 interface RadioGroupContextProps {
+    /** 이 항목의 값. 그룹의 선택값과 비교된다 */
     value?: string | number;
+    /** 같은 name 끼리 한 그룹이 된다. RadioGroup 안에서는 자동으로 채워진다 */
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** 컨트롤 크기 */
     size?: "sm" | "md" | "lg";
 }
 

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

@@ -1,9 +1,14 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
+import { V as Validation } from '../../validation-Dqo1zqhT.js';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
-type RadioType = "brand" | "success" | "error" | "warning" | "info";
+/** Radio 의 상태 색 */
+type RadioType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type RadioTypeInput = RadioType | LegacyStatusType;
 interface RadioProps extends Omit<InputAttributes, "size"> {
     label?: string;
     /**
@@ -11,8 +16,12 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
      */
     name?: string;
     value: string | number;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
+    /** 컨트롤 크기 */
     size?: RadioSize;
-    type?: RadioType;
+    /** 선택됐을 때의 색 */
+    type?: RadioTypeInput;
 }
 /**
  * 그룹모드 check 조건 : RadioGroup value === radio value
@@ -24,9 +33,12 @@ declare const Radio: {
 };
 
 interface RadioGroupContextProps {
+    /** 이 항목의 값. 그룹의 선택값과 비교된다 */
     value?: string | number;
+    /** 같은 name 끼리 한 그룹이 된다. RadioGroup 안에서는 자동으로 채워진다 */
     name: string;
     onChange: React.ChangeEventHandler<HTMLInputElement>;
+    /** 컨트롤 크기 */
     size?: "sm" | "md" | "lg";
 }