@x-plat/design-system 0.8.2 → 0.9.0

package/dist/components/Input/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/Input/input.scss */
 .lib-xplat-input-wrap {
   display: flex;
@@ -24,9 +62,6 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-tertiary);
-}
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
   font-family: var(--semantic-typo-caption-1-r-font);
@@ -83,34 +118,3 @@
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper.pointer {
   cursor: pointer;
 }
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap {
-  display: flex;
-  gap: var(--spacing-space-2);
-  margin-left: var(--spacing-space-1);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
-  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-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--semantic-icon-secondary);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: var(--semantic-text-success);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: var(--semantic-text-warning);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: var(--semantic-text-error);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: var(--semantic-typo-label-2-m-size);
-}

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

@@ -1,24 +1,19 @@
 import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
+import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 
 type InputSize$1 = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputAttributes, "size"> {
     type?: "text" | "number" | "email" | "password" | "tel";
     size?: InputSize$1;
-    validations?: {
-        status: "error" | "warning" | "success" | "default";
-        message: string;
-    }[];
+    validations?: Validation[];
     suffix?: React.ReactNode;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 type InputSize = "sm" | "md" | "lg";
 interface PasswordInputProps extends Omit<InputAttributes, "size"> {
-    validations?: {
-        status: "error" | "warning" | "success" | "default";
-        message: string;
-    }[];
+    validations?: Validation[];
     size?: InputSize;
     reg?: RegExp;
 }

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

@@ -1,24 +1,19 @@
 import React from 'react';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
+import { V as Validation } from '../../validation-Dqo1zqhT.js';
 
 type InputSize$1 = "sm" | "md" | "lg";
 interface InputProps extends Omit<InputAttributes, "size"> {
     type?: "text" | "number" | "email" | "password" | "tel";
     size?: InputSize$1;
-    validations?: {
-        status: "error" | "warning" | "success" | "default";
-        message: string;
-    }[];
+    validations?: Validation[];
     suffix?: React.ReactNode;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 type InputSize = "sm" | "md" | "lg";
 interface PasswordInputProps extends Omit<InputAttributes, "size"> {
-    validations?: {
-        status: "error" | "warning" | "success" | "default";
-        message: string;
-    }[];
+    validations?: Validation[];
     size?: InputSize;
     reg?: RegExp;
 }

package/dist/components/Input/index.js

@@ -115,22 +115,41 @@ var SuccessIcon = () => /* @__PURE__ */ jsx3(
 );
 var SuccessIcon_default = SuccessIcon;
 
-// src/components/Input/InputValidations.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var InputValidations = (props) => {
-  const { message, status = "default" } = props;
-  return /* @__PURE__ */ jsxs3("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ jsx4(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ jsx4(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ jsx4(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ jsx4(ErrorIcon_default, {})
-    ] }),
-    /* @__PURE__ */ jsx4("div", { className: "message", children: message })
+// 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 FieldMessage_default = 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 })
   ] });
 };
-InputValidations.displayName = "InputValidations";
-var InputValidations_default = InputValidations;
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
 
 // src/components/Input/reg.ts
 var numberAndCommaReg = /^[0-9,]+$/;
@@ -168,7 +187,6 @@ var handleTelBackspace = (prevValue, currValue) => {
 
 // src/components/Input/Input.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-import { createElement } from "react";
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -257,20 +275,15 @@ var Input = React.forwardRef((props, ref) => {
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
-              onChange: handleChange
+              onChange: handleChange,
+              "aria-invalid": hasError(validations) || void 0
             }
           ),
           suffix && /* @__PURE__ */ jsx5("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ jsx5("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ createElement(
-      InputValidations_default,
-      {
-        ...validation,
-        key: `${validation.message}_${idx}`
-      }
-    )) })
+    /* @__PURE__ */ jsx5(FieldMessage_default, { validations })
   ] });
 });
 Input.displayName = "Input";

package/dist/components/Radio/index.cjs

@@ -51,6 +51,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,7 +195,7 @@ 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,
@@ -70,6 +203,7 @@ var Radio = (props) => {
     value,
     size: sizeProp,
     type = "brand",
+    validations,
     ...rest
   } = props;
   const context = useRadioGroupContext();
@@ -81,7 +215,7 @@ 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(
@@ -92,30 +226,40 @@ var Radio = (props) => {
         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;

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

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.cjs';
+import { V as Validation } from '../../validation-Dqo1zqhT.cjs';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
@@ -11,6 +12,8 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
      */
     name?: string;
     value: string | number;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
     size?: RadioSize;
     type?: RadioType;
 }

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

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { I as InputAttributes } from '../../attributes-DJIWir_0.js';
+import { V as Validation } from '../../validation-Dqo1zqhT.js';
 import React from 'react';
 
 type RadioSize = "sm" | "md" | "lg";
@@ -11,6 +12,8 @@ interface RadioProps extends Omit<InputAttributes, "size"> {
      */
     name?: string;
     value: string | number;
+    /** 컨트롤 아래에 표시할 검증 메시지. DS 폼 컴포넌트 공통 */
+    validations?: Validation[];
     size?: RadioSize;
     type?: RadioType;
 }