@x-plat/design-system 0.8.3 → 0.10.0

package/dist/components/ImageSelector/index.js

@@ -856,12 +856,83 @@ import { jsx as jsx253 } from "react/jsx-runtime";
 
 // src/tokens/svg/status/ErrorIcon.tsx
 import { jsx as jsx254, jsxs as jsxs160 } from "react/jsx-runtime";
+var ErrorIcon = () => /* @__PURE__ */ jsxs160(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs160("g", { clipPath: "url(#clip0_1196_9603)", children: [
+        /* @__PURE__ */ jsx254(
+          "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__ */ jsx254(
+          "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__ */ jsx254("defs", { children: /* @__PURE__ */ jsx254("clipPath", { id: "clip0_1196_9603", children: /* @__PURE__ */ jsx254("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var ErrorIcon_default = ErrorIcon;
 
 // src/tokens/svg/status/HelpCircleIcon.tsx
 import { jsx as jsx255, jsxs as jsxs161 } from "react/jsx-runtime";
 
 // src/tokens/svg/status/InfoIcon.tsx
 import { jsx as jsx256, jsxs as jsxs162 } from "react/jsx-runtime";
+var InfoIcon = () => /* @__PURE__ */ jsxs162(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: [
+      /* @__PURE__ */ jsxs162("g", { clipPath: "url(#clip0_1188_11261)", children: [
+        /* @__PURE__ */ jsx256(
+          "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__ */ jsx256(
+          "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__ */ jsx256(
+          "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__ */ jsx256("defs", { children: /* @__PURE__ */ jsx256("clipPath", { id: "clip0_1188_11261", children: /* @__PURE__ */ jsx256("rect", { width: "16", height: "16", fill: "white" }) }) })
+    ]
+  }
+);
+var InfoIcon_default = InfoIcon;
 
 // src/tokens/svg/status/LoaderIcon.tsx
 import { jsx as jsx257, jsxs as jsxs163 } from "react/jsx-runtime";
@@ -886,6 +957,24 @@ import { jsx as jsx263, jsxs as jsxs167 } from "react/jsx-runtime";
 
 // src/tokens/svg/status/SuccessIcon.tsx
 import { jsx as jsx264 } from "react/jsx-runtime";
+var SuccessIcon = () => /* @__PURE__ */ jsx264(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ jsx264(
+      "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/tokens/svg/status/XCircleIcon.tsx
 import { jsx as jsx265, jsxs as jsxs168 } from "react/jsx-runtime";
@@ -977,10 +1066,61 @@ import { jsx as jsx293, jsxs as jsxs187 } from "react/jsx-runtime";
 // src/tokens/svg/weather/WindIcon.tsx
 import { jsx as jsx294, jsxs as jsxs188 } from "react/jsx-runtime";
 
+// ../../node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// src/components/FieldMessage/FieldMessage.tsx
+import { Fragment, jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
+var ICON = {
+  default: /* @__PURE__ */ jsx295(InfoIcon_default, {}),
+  success: /* @__PURE__ */ jsx295(SuccessIcon_default, {}),
+  warning: /* @__PURE__ */ jsx295(InfoIcon_default, {}),
+  error: /* @__PURE__ */ jsx295(ErrorIcon_default, {})
+};
+var FieldMessage = (props) => {
+  const { validations } = props;
+  if (!validations || validations.length === 0) return null;
+  return /* @__PURE__ */ jsx295("div", { className: "lib-xplat-field-message-wrap", children: validations.map((v, idx) => /* @__PURE__ */ jsxs189(
+    "div",
+    {
+      className: clsx_default("lib-xplat-field-message", v.status),
+      children: [
+        /* @__PURE__ */ jsx295("div", { className: "icon", children: ICON[v.status] }),
+        /* @__PURE__ */ jsx295("span", { children: v.message })
+      ]
+    },
+    `${v.message}_${idx}`
+  )) });
+};
+FieldMessage.displayName = "FieldMessage";
+var Field = (props) => {
+  const { validations, children } = props;
+  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx295(Fragment, { children });
+  return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
+    children,
+    /* @__PURE__ */ jsx295(FieldMessage, { validations })
+  ] });
+};
+Field.displayName = "Field";
+var hasError = (validations) => !!validations?.some((v) => v.status === "error");
+
 // src/components/ImageSelector/ImageSelector.tsx
-import { jsx as jsx295, jsxs as jsxs189 } from "react/jsx-runtime";
+import { jsx as jsx296, jsxs as jsxs190 } from "react/jsx-runtime";
 var ImageSelector = (props) => {
-  const { value, label, onChange } = props;
+  const { value, label, onChange, validations } = props;
   const [previewUrl, setPreviewUrl] = React.useState();
   React.useEffect(() => {
     if (!value) {
@@ -1004,26 +1144,28 @@ var ImageSelector = (props) => {
   const handleOpenFileDialog = () => {
     inputRef.current?.click();
   };
-  return /* @__PURE__ */ jsxs189("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
-    /* @__PURE__ */ jsx295(
+  const control = /* @__PURE__ */ jsxs190("div", { className: `lib-xplat-imageselector${value ? "" : " none-value"}`, children: [
+    /* @__PURE__ */ jsx296(
       "input",
       {
         type: "file",
         accept: "image/*",
         id: "image-input",
         onChange: handleFileChange,
-        ref: inputRef
+        ref: inputRef,
+        "aria-invalid": hasError(validations) || void 0
       }
     ),
-    value && /* @__PURE__ */ jsxs189("div", { className: "action-bar", children: [
-      /* @__PURE__ */ jsx295("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx295(UploadIcon_default, {}) }),
-      /* @__PURE__ */ jsx295("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx295(DeleteIcon_default, {}) })
+    value && /* @__PURE__ */ jsxs190("div", { className: "action-bar", children: [
+      /* @__PURE__ */ jsx296("div", { className: "icon-wrapper", onClick: handleOpenFileDialog, children: /* @__PURE__ */ jsx296(UploadIcon_default, {}) }),
+      /* @__PURE__ */ jsx296("div", { className: "icon-wrapper", onClick: handleDeleteFile, children: /* @__PURE__ */ jsx296(DeleteIcon_default, {}) })
     ] }),
-    /* @__PURE__ */ jsx295("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx295("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs189("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
-      /* @__PURE__ */ jsx295("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx295(ImageIcon_default, {}) }),
-      /* @__PURE__ */ jsx295("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
+    /* @__PURE__ */ jsx296("div", { className: "content", children: previewUrl ? /* @__PURE__ */ jsx296("img", { src: previewUrl, alt: "preview" }) : /* @__PURE__ */ jsxs190("div", { className: "skeleton", onClick: handleOpenFileDialog, children: [
+      /* @__PURE__ */ jsx296("div", { className: "icon-wrapper", children: /* @__PURE__ */ jsx296(ImageIcon_default, {}) }),
+      /* @__PURE__ */ jsx296("div", { className: "label", children: label || "\uC774\uBBF8\uC9C0 \uCD94\uAC00\uD558\uAE30" })
     ] }) })
   ] });
+  return /* @__PURE__ */ jsx296(Field, { validations, children: control });
 };
 ImageSelector.displayName = "ImageSelector";
 var ImageSelector_default = ImageSelector;

package/dist/components/Input/index.cjs

@@ -152,22 +152,41 @@ var SuccessIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
 );
 var SuccessIcon_default = SuccessIcon;
 
-// src/components/Input/InputValidations.tsx
+// src/components/FieldMessage/FieldMessage.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var InputValidations = (props) => {
-  const { message, status = "default" } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: clsx_default("lib-xplat-input-validation", status), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "icon", children: [
-      status === "default" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
-      status === "success" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SuccessIcon_default, {}),
-      status === "warning" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(InfoIcon_default, {}),
-      status === "error" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorIcon_default, {})
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "message", children: message })
+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 FieldMessage_default = 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 })
   ] });
 };
-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,]+$/;
@@ -205,7 +224,6 @@ var handleTelBackspace = (prevValue, currValue) => {
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var import_react2 = require("react");
 var formatValue = (type, value) => {
   if (value === null || value === void 0) return "";
   const strValue = Array.isArray(value) ? String(value[0] ?? "") : String(value);
@@ -294,27 +312,22 @@ var Input = import_react.default.forwardRef((props, ref) => {
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
-              onChange: handleChange
+              onChange: handleChange,
+              "aria-invalid": hasError(validations) || void 0
             }
           ),
           suffix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "suffix", children: suffix })
         ]
       }
     ),
-    validations && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "lib-xplat-input-validation-wrap", children: validations?.map((validation, idx) => /* @__PURE__ */ (0, import_react2.createElement)(
-      InputValidations_default,
-      {
-        ...validation,
-        key: `${validation.message}_${idx}`
-      }
-    )) })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldMessage_default, { validations })
   ] });
 });
 Input.displayName = "Input";
 var Input_default = Input;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 
 // src/tokens/svg/form/CloseEyeIcon.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -384,10 +397,10 @@ var OpenEyeIcon_default = OpenEyeIcon;
 
 // src/components/Input/PasswordInput/PasswordInput.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var PasswordInput = import_react3.default.forwardRef(
+var PasswordInput = import_react2.default.forwardRef(
   (props, ref) => {
     const { reg: _reg, ...inputProps } = props;
-    const [isView, setIsView] = import_react3.default.useState(false);
+    const [isView, setIsView] = import_react2.default.useState(false);
     const handleChangeView = () => {
       setIsView((prev) => !prev);
     };

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;
@@ -80,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,23 @@
 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"> {
+    /** 입력 종류. number 는 천 단위 구분, tel 은 하이픈을 자동으로 넣는다 */
     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,23 @@
 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"> {
+    /** 입력 종류. number 는 천 단위 구분, tel 은 하이픈을 자동으로 넣는다 */
     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/NotificationBadge/index.cjs

@@ -25,6 +25,9 @@ __export(NotificationBadge_exports, {
 });
 module.exports = __toCommonJS(NotificationBadge_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 = "";
@@ -52,11 +55,12 @@ var NotificationBadge = (props) => {
     dot = false,
     size = "md"
   } = props;
+  const statusType = normalizeStatus(type);
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";

package/dist/components/NotificationBadge/index.css

@@ -70,6 +70,7 @@
 .lib-xplat-notification-badge .badge-indicator.info {
   background-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-notification-badge .badge-indicator.primary,
 .lib-xplat-notification-badge .badge-indicator.brand {
   background-color: var(--semantic-surface-brand-default);
 }

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

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
 
-type NotificationBadgeType = "error" | "success" | "warning" | "info" | "brand";
+/** NotificationBadge 의 상태 색 */
+type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type NotificationBadgeTypeInput = NotificationBadgeType | LegacyStatusType;
 type NotificationBadgeSize = "sm" | "md" | "lg";
 /**
  * 알림 뱃지 — 다른 요소의 **우상단 모서리에 얹히는** 작은 원.
@@ -33,7 +37,7 @@ interface NotificationBadgeProps {
     /** 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 */
     dot?: boolean;
     /** 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 */
-    type?: NotificationBadgeType;
+    type?: NotificationBadgeTypeInput;
     /** `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 */
     maxCount?: number;
     /** 뱃지 크기. 대상의 크기가 아니다 */

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

@@ -1,7 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
+import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
 
-type NotificationBadgeType = "error" | "success" | "warning" | "info" | "brand";
+/** NotificationBadge 의 상태 색 */
+type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";
+/** 입력으로는 예전 이름 `brand` 도 받는다 (= `primary`) */
+type NotificationBadgeTypeInput = NotificationBadgeType | LegacyStatusType;
 type NotificationBadgeSize = "sm" | "md" | "lg";
 /**
  * 알림 뱃지 — 다른 요소의 **우상단 모서리에 얹히는** 작은 원.
@@ -33,7 +37,7 @@ interface NotificationBadgeProps {
     /** 개수 대신 점만 표시한다. `count` 없이 "새 항목 있음" 만 알릴 때 쓴다 */
     dot?: boolean;
     /** 뱃지 색. 뱃지가 렌더될 때만 의미가 있다 */
-    type?: NotificationBadgeType;
+    type?: NotificationBadgeTypeInput;
     /** `count` 가 이 값을 넘으면 `99+` 처럼 표시한다 */
     maxCount?: number;
     /** 뱃지 크기. 대상의 크기가 아니다 */

package/dist/components/NotificationBadge/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 = "";
@@ -25,11 +28,12 @@ var NotificationBadge = (props) => {
     dot = false,
     size = "md"
   } = props;
+  const statusType = normalizeStatus(type);
   const showBadge = dot || count !== void 0 && count > 0;
   const displayCount = count !== void 0 && count > maxCount ? `${maxCount}+` : count;
   return /* @__PURE__ */ jsxs("div", { className: clsx_default("lib-xplat-notification-badge", size), children: [
     children,
-    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", type, { dot }), children: !dot && displayCount })
+    showBadge && /* @__PURE__ */ jsx("span", { className: clsx_default("badge-indicator", statusType, { dot }), children: !dot && displayCount })
   ] });
 };
 NotificationBadge.displayName = "NotificationBadge";