@x-plat/design-system 0.10.0 → 0.11.0

package/dist/components/Editor/index.js

@@ -67,6 +67,15 @@ var ALLOWED_ATTRS = {
   a: ["href", "target", "rel"],
   img: ["src", "alt"]
 };
+var DROP_WITH_CONTENT = /* @__PURE__ */ new Set([
+  "script",
+  "style",
+  "noscript",
+  "iframe",
+  "object",
+  "embed",
+  "template"
+]);
 var sanitizeHtml = (input) => {
   const doc = new DOMParser().parseFromString(`<div>${input}</div>`, "text/html");
   const root = doc.body.firstElementChild;
@@ -75,6 +84,10 @@ var sanitizeHtml = (input) => {
     const children = Array.from(node.children);
     for (const child of children) {
       const tag = child.tagName.toLowerCase();
+      if (DROP_WITH_CONTENT.has(tag)) {
+        node.removeChild(child);
+        continue;
+      }
       if (!ALLOWED_TAGS.has(tag)) {
         while (child.firstChild) node.insertBefore(child.firstChild, child);
         node.removeChild(child);
@@ -139,12 +152,16 @@ var Editor = (props) => {
   const [linkOpen, setLinkOpen] = React.useState(false);
   const [linkValue, setLinkValue] = React.useState("");
   const [linkPos, setLinkPos] = React.useState({ top: 0, left: 0 });
+  const lastEmittedRef = React.useRef(null);
   React.useEffect(() => {
-    if (!editorRef.current) return;
-    if (editorRef.current.innerHTML !== value) {
-      editorRef.current.innerHTML = sanitizeHtml(value || "");
-      updateEmpty();
-    }
+    const el = editorRef.current;
+    if (!el) return;
+    if (value === lastEmittedRef.current) return;
+    if (el.innerHTML === value) return;
+    el.innerHTML = sanitizeHtml(value || "");
+    if (!el.firstChild) el.innerHTML = "<p><br></p>";
+    lastEmittedRef.current = null;
+    updateEmpty();
   }, [value]);
   const updateEmpty = () => {
     const el = editorRef.current;
@@ -160,10 +177,19 @@ var Editor = (props) => {
     }
   };
   const restoreSelection = () => {
-    if (!lastRangeRef.current) return;
+    const range = lastRangeRef.current;
+    if (!range) return;
+    if (!editorRef.current?.contains(range.startContainer)) {
+      lastRangeRef.current = null;
+      return;
+    }
     const sel = window.getSelection();
-    sel?.removeAllRanges();
-    sel?.addRange(lastRangeRef.current);
+    try {
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    } catch {
+      lastRangeRef.current = null;
+    }
   };
   const updateActiveFormats = () => {
     if (!editorRef.current) return;
@@ -192,6 +218,96 @@ var Editor = (props) => {
   const setBlock = (tag) => {
     exec("formatBlock", tag);
   };
+  const closestPre = () => {
+    const sel = window.getSelection();
+    const node = sel?.anchorNode;
+    if (!node || !editorRef.current?.contains(node)) return null;
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    return el?.closest("pre") ?? null;
+  };
+  const insertCodeBlock = () => {
+    const el = editorRef.current;
+    const sel = window.getSelection();
+    if (!el || !sel || sel.rangeCount === 0) return;
+    const existing = closestPre();
+    if (existing) {
+      const p = document.createElement("p");
+      p.textContent = existing.textContent || "";
+      if (!p.textContent) p.innerHTML = "<br>";
+      existing.replaceWith(p);
+      placeCaretAtEnd(p);
+      handleInput();
+      return;
+    }
+    const range = sel.getRangeAt(0);
+    const frag = range.cloneContents();
+    const holder = document.createElement("div");
+    holder.appendChild(frag);
+    const BLOCK = /^(p|div|h[1-6]|li|blockquote|pre|tr)$/i;
+    const linesOf = (node) => {
+      const out = [];
+      let cur = "";
+      for (const child of Array.from(node.childNodes)) {
+        if (child.nodeType === Node.TEXT_NODE) {
+          cur += child.textContent || "";
+        } else if (child.nodeName === "BR") {
+          out.push(cur);
+          cur = "";
+        } else if (BLOCK.test(child.nodeName)) {
+          if (cur) {
+            out.push(cur);
+            cur = "";
+          }
+          const sub = linesOf(child);
+          out.push(...sub.length > 0 ? sub : [""]);
+        } else {
+          cur += linesOf(child).join("\n");
+        }
+      }
+      if (cur) out.push(cur);
+      return out;
+    };
+    const text = linesOf(holder).join("\n").replace(/\n+$/, "");
+    const pre = document.createElement("pre");
+    const code = document.createElement("code");
+    code.textContent = text || "";
+    pre.appendChild(code);
+    range.deleteContents();
+    range.insertNode(pre);
+    ensureParagraphAfter(pre);
+    placeCaretAtEnd(code);
+    handleInput();
+  };
+  const insertTextAtCaret = (text) => {
+    const sel = window.getSelection();
+    if (!sel || sel.rangeCount === 0) return;
+    const range = sel.getRangeAt(0);
+    range.deleteContents();
+    const node = document.createTextNode(text);
+    range.insertNode(node);
+    range.setStartAfter(node);
+    range.collapse(true);
+    sel.removeAllRanges();
+    sel.addRange(range);
+    handleInput();
+  };
+  const ensureParagraphAfter = (node) => {
+    const next = node.nextElementSibling;
+    if (next && next.tagName === "P") return;
+    const p = document.createElement("p");
+    p.innerHTML = "<br>";
+    node.after(p);
+  };
+  const placeCaretAtEnd = (node) => {
+    const sel = window.getSelection();
+    if (!sel) return;
+    const r2 = document.createRange();
+    r2.selectNodeContents(node);
+    r2.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(r2);
+    editorRef.current?.focus();
+  };
   const insertDivider = () => {
     exec("insertHorizontalRule");
     const el = editorRef.current;
@@ -238,7 +354,9 @@ var Editor = (props) => {
     const range = sel.getRangeAt(0);
     slashStartRangeRef.current = range.cloneRange();
     const rect = range.getBoundingClientRect();
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const editorEl = editorRef.current;
+    if (!editorEl) return;
+    const editorRect = editorEl.getBoundingClientRect();
     setSlashPos({
       top: rect.bottom - editorRect.top + 4,
       left: rect.left - editorRect.left
@@ -296,7 +414,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "divider":
         insertDivider();
@@ -314,7 +432,9 @@ var Editor = (props) => {
     if (!sel || sel.rangeCount === 0) return;
     const range = sel.getRangeAt(0);
     const rect = range.getBoundingClientRect();
-    const editorRect = editorRef.current.getBoundingClientRect();
+    const editorEl2 = editorRef.current;
+    if (!editorEl2) return;
+    const editorRect = editorEl2.getBoundingClientRect();
     setLinkPos({
       top: rect.bottom - editorRect.top + 4,
       left: rect.left - editorRect.left
@@ -347,13 +467,13 @@ var Editor = (props) => {
     if (node.nodeType !== Node.TEXT_NODE) return false;
     const text = (node.textContent || "").slice(0, range.startOffset);
     const patterns = [
-      [/^###\s$/, () => setBlock("h3")],
-      [/^##\s$/, () => setBlock("h2")],
-      [/^#\s$/, () => setBlock("h1")],
-      [/^-\s$/, () => exec("insertUnorderedList")],
-      [/^\*\s$/, () => exec("insertUnorderedList")],
-      [/^1\.\s$/, () => exec("insertOrderedList")],
-      [/^>\s$/, () => setBlock("blockquote")]
+      [/^###$/, () => setBlock("h3")],
+      [/^##$/, () => setBlock("h2")],
+      [/^#$/, () => setBlock("h1")],
+      [/^-$/, () => exec("insertUnorderedList")],
+      [/^\*$/, () => exec("insertUnorderedList")],
+      [/^1\.$/, () => exec("insertOrderedList")],
+      [/^>$/, () => setBlock("blockquote")]
     ];
     for (const [re, fn] of patterns) {
       if (re.test(text)) {
@@ -373,7 +493,9 @@ var Editor = (props) => {
     if (composingRef.current) return;
     const el = editorRef.current;
     if (!el) return;
-    onChange?.(el.innerHTML);
+    const html = el.innerHTML;
+    lastEmittedRef.current = html;
+    onChange?.(html);
     updateEmpty();
     updateActiveFormats();
     if (slashOpen) {
@@ -401,6 +523,31 @@ var Editor = (props) => {
   };
   const handleKeyDown = (e) => {
     if (readOnly) return;
+    if (composingRef.current || e.nativeEvent.isComposing || e.keyCode === 229) return;
+    const pre = closestPre();
+    if (pre && !slashOpen) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        const text = pre.textContent || "";
+        if (text.endsWith("\n\n")) {
+          e.preventDefault();
+          const code = pre.querySelector("code") ?? pre;
+          code.textContent = text.replace(/\n\n$/, "");
+          ensureParagraphAfter(pre);
+          const next = pre.nextElementSibling;
+          if (next) placeCaretAtEnd(next);
+          handleInput();
+          return;
+        }
+        e.preventDefault();
+        insertTextAtCaret("\n");
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault();
+        insertTextAtCaret("  ");
+        return;
+      }
+    }
     if (slashOpen) {
       if (e.key === "ArrowDown") {
         e.preventDefault();
@@ -447,6 +594,7 @@ var Editor = (props) => {
         return;
       }
     }
+    if (pre) return;
     if (enableSlashCommand && e.key === "/") {
       setTimeout(openSlashMenu, 0);
     }
@@ -459,8 +607,12 @@ var Editor = (props) => {
   const handlePaste = (e) => {
     if (readOnly) return;
     e.preventDefault();
-    const html = e.clipboardData.getData("text/html");
     const text = e.clipboardData.getData("text/plain");
+    if (closestPre()) {
+      insertTextAtCaret(text);
+      return;
+    }
+    const html = e.clipboardData.getData("text/html");
     const clean = html ? sanitizeHtml(html) : escapeHtml(text);
     document.execCommand("insertHTML", false, clean);
     handleInput();
@@ -484,6 +636,7 @@ var Editor = (props) => {
     updateActiveFormats();
   };
   const onToolbarAction = (item) => {
+    if (closestPre() && item !== "code-block") return;
     switch (item) {
       case "bold":
         exec("bold");
@@ -525,7 +678,7 @@ var Editor = (props) => {
         setBlock("blockquote");
         break;
       case "code-block":
-        setBlock("pre");
+        insertCodeBlock();
         break;
       case "link":
         openLinkEditor();
@@ -555,6 +708,10 @@ var Editor = (props) => {
           ref: editorRef,
           contentEditable: !readOnly,
           suppressContentEditableWarning: true,
+          role: "textbox",
+          "aria-multiline": "true",
+          "aria-readonly": readOnly || void 0,
+          "aria-label": placeholder,
           className: "lib-xplat-editor__editable",
           onInput: handleInput,
           onKeyDown: handleKeyDown,

package/dist/components/FieldMessage/index.cjs

@@ -166,11 +166,16 @@ var FieldMessage = (props) => {
 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 });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) 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: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";

package/dist/components/FieldMessage/index.css

@@ -4,6 +4,21 @@
   flex-direction: column;
   gap: var(--spacing-space-2);
 }
+.lib-xplat-field-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
 .lib-xplat-field-message-wrap {
   display: flex;
   gap: var(--spacing-space-2);

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

@@ -24,11 +24,18 @@ declare const FieldMessage: {
  * 기존 사용처의 DOM 구조와 레이아웃이 바뀌지 않도록 하기 위해서다.
  * (폼 컨트롤들의 루트가 label·div·textarea 로 제각각이라 무조건 감싸면 깨진다.)
  */
+interface FieldProps {
+    /** 컨트롤 위에 붙는 라벨. htmlFor 로 컨트롤과 연결된다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
+    /** 라벨의 htmlFor 와 컨트롤의 id 를 잇는 값 */
+    htmlFor?: string;
+    validations?: Validation[];
+    children: React.ReactNode;
+}
 declare const Field: {
-    (props: {
-        validations?: Validation[];
-        children: React.ReactNode;
-    }): react_jsx_runtime.JSX.Element;
+    (props: FieldProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 /** validations 중 하나라도 error 면 true. aria-invalid 판정에 쓴다 */

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

@@ -24,11 +24,18 @@ declare const FieldMessage: {
  * 기존 사용처의 DOM 구조와 레이아웃이 바뀌지 않도록 하기 위해서다.
  * (폼 컨트롤들의 루트가 label·div·textarea 로 제각각이라 무조건 감싸면 깨진다.)
  */
+interface FieldProps {
+    /** 컨트롤 위에 붙는 라벨. htmlFor 로 컨트롤과 연결된다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
+    /** 라벨의 htmlFor 와 컨트롤의 id 를 잇는 값 */
+    htmlFor?: string;
+    validations?: Validation[];
+    children: React.ReactNode;
+}
 declare const Field: {
-    (props: {
-        validations?: Validation[];
-        children: React.ReactNode;
-    }): react_jsx_runtime.JSX.Element;
+    (props: FieldProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 /** validations 중 하나라도 error 면 true. aria-invalid 판정에 쓴다 */

package/dist/components/FieldMessage/index.js

@@ -138,11 +138,16 @@ var FieldMessage = (props) => {
 FieldMessage.displayName = "FieldMessage";
 var FieldMessage_default = FieldMessage;
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx4(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx4(Fragment, { children });
   return /* @__PURE__ */ jsxs3("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs3("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx4("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx4(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx4(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";

package/dist/components/FileUpload/index.cjs

@@ -1076,11 +1076,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";

package/dist/components/FileUpload/index.css

@@ -4,6 +4,21 @@
   flex-direction: column;
   gap: var(--spacing-space-2);
 }
+.lib-xplat-field-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
 .lib-xplat-field-message-wrap {
   display: flex;
   gap: var(--spacing-space-2);

package/dist/components/FileUpload/index.js

@@ -1040,11 +1040,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx295(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx295(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx295(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";

package/dist/components/ImageSelector/index.cjs

@@ -1143,11 +1143,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(import_jsx_runtime295.Fragment, { children });
   return /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime295.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";

package/dist/components/ImageSelector/index.css

@@ -4,6 +4,21 @@
   flex-direction: column;
   gap: var(--spacing-space-2);
 }
+.lib-xplat-field-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
 .lib-xplat-field-message-wrap {
   display: flex;
   gap: var(--spacing-space-2);

package/dist/components/ImageSelector/index.js

@@ -1107,11 +1107,16 @@ var FieldMessage = (props) => {
 };
 FieldMessage.displayName = "FieldMessage";
 var Field = (props) => {
-  const { validations, children } = props;
-  if (!validations || validations.length === 0) return /* @__PURE__ */ jsx295(Fragment, { children });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) return /* @__PURE__ */ jsx295(Fragment, { children });
   return /* @__PURE__ */ jsxs189("div", { className: "lib-xplat-field", children: [
+    label && /* @__PURE__ */ jsxs189("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ jsx295("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ jsx295(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ jsx295(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";

package/dist/components/Input/index.cjs

@@ -178,11 +178,16 @@ var FieldMessage = (props) => {
 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 });
+  const { label, required = false, htmlFor, validations, children } = props;
+  const hasMessages = !!validations && validations.length > 0;
+  if (!label && !hasMessages) 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: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "lib-xplat-field-label", htmlFor, children: [
+      label,
+      required && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "required", "aria-hidden": "true", children: "*" })
+    ] }),
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
+    hasMessages && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldMessage, { validations })
   ] });
 };
 Field.displayName = "Field";
@@ -281,8 +286,12 @@ var Input = import_react.default.forwardRef((props, ref) => {
     suffix,
     disabled,
     validations,
+    label,
+    required,
     ...inputProps
   } = props;
+  const autoId = import_react.default.useId();
+  const fieldId = inputProps.id ?? autoId;
   const localValue = formatValue(type, value);
   const handleChange = (e) => {
     let val = e.target.value;
@@ -298,7 +307,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Field, { label, required, htmlFor: fieldId, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "div",
       {
@@ -309,6 +318,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
             {
               ...inputProps,
               ref,
+              id: fieldId,
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
@@ -321,7 +331,7 @@ var Input = import_react.default.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FieldMessage_default, { validations })
-  ] });
+  ] }) });
 });
 Input.displayName = "Input";
 var Input_default = Input;

package/dist/components/Input/index.css

@@ -4,6 +4,21 @@
   flex-direction: column;
   gap: var(--spacing-space-2);
 }
+.lib-xplat-field-label {
+  font-family: var(--semantic-typo-label-2-m-font);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
+  font-weight: var(--semantic-typo-label-2-m-weight);
+  letter-spacing: var(--semantic-typo-label-2-m-ls);
+  color: var(--semantic-text-secondary);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-space-1);
+  cursor: pointer;
+}
+.lib-xplat-field-label > .required {
+  color: var(--semantic-text-error);
+}
 .lib-xplat-field-message-wrap {
   display: flex;
   gap: var(--spacing-space-2);

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

@@ -9,6 +9,10 @@ interface InputProps extends Omit<InputAttributes, "size"> {
     /** 높이와 글자 크기 */
     size?: InputSize$1;
     validations?: Validation[];
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 입력칸에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     /** 입력칸 오른쪽에 붙일 요소 (단위·아이콘 등) */
     suffix?: React.ReactNode;
 }

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

@@ -9,6 +9,10 @@ interface InputProps extends Omit<InputAttributes, "size"> {
     /** 높이와 글자 크기 */
     size?: InputSize$1;
     validations?: Validation[];
+    /** 컨트롤 위에 붙는 라벨. 클릭하면 입력칸에 포커스가 간다 */
+    label?: React.ReactNode;
+    /** 라벨 뒤에 필수 표시(*)를 붙인다 */
+    required?: boolean;
     /** 입력칸 오른쪽에 붙일 요소 (단위·아이콘 등) */
     suffix?: React.ReactNode;
 }