@x-plat/design-system 0.10.0 → 0.12.0

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;
 }

package/dist/components/Input/index.js

@@ -141,11 +141,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";
@@ -244,8 +249,12 @@ var Input = React.forwardRef((props, ref) => {
     suffix,
     disabled,
     validations,
+    label,
+    required,
     ...inputProps
   } = props;
+  const autoId = React.useId();
+  const fieldId = inputProps.id ?? autoId;
   const localValue = formatValue(type, value);
   const handleChange = (e) => {
     let val = e.target.value;
@@ -261,7 +270,7 @@ var Input = React.forwardRef((props, ref) => {
       onChange(event);
     }
   };
-  return /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
+  return /* @__PURE__ */ jsx5(Field, { label, required, htmlFor: fieldId, children: /* @__PURE__ */ jsxs4("div", { className: clsx_default("lib-xplat-input-wrap", className), children: [
     /* @__PURE__ */ jsxs4(
       "div",
       {
@@ -272,6 +281,7 @@ var Input = React.forwardRef((props, ref) => {
             {
               ...inputProps,
               ref,
+              id: fieldId,
               disabled,
               type: type === "number" ? "text" : type,
               value: localValue,
@@ -284,7 +294,7 @@ var Input = React.forwardRef((props, ref) => {
       }
     ),
     /* @__PURE__ */ jsx5(FieldMessage_default, { validations })
-  ] });
+  ] }) });
 });
 Input.displayName = "Input";
 var Input_default = Input;

package/dist/components/Modal/index.cjs

@@ -35,9 +35,84 @@ __export(Modal_exports, {
 module.exports = __toCommonJS(Modal_exports);
 
 // src/components/Modal/Modal.tsx
-var import_react = __toESM(require("react"), 1);
+var import_react2 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react = __toESM(require("react"), 1);
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
+  // 화면에 없는 것은 제외 (display:none 등)
+  (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
+);
+var useEscapeKey = (enabled, onEscape) => {
+  import_react.default.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+var useFocusTrap = (containerRef, enabled, options = {}) => {
+  const { trap = false, initialFocus } = options;
+  const restoreRef = import_react.default.useRef(null);
+  import_react.default.useEffect(() => {
+    if (!enabled) return;
+    restoreRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const target = initialFocus?.current ?? focusableIn(el)[0] ?? el;
+      if (!target.hasAttribute("tabindex") && !focusableIn(el).includes(target)) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus({ preventScroll: true });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const prev = restoreRef.current;
+      if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
+    };
+  }, [enabled, containerRef, initialFocus]);
+  import_react.default.useEffect(() => {
+    if (!enabled || !trap) return;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const items = focusableIn(el);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !el.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !el.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, trap, containerRef]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -59,10 +134,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react.default.useState(false);
-  const [visible, setVisible] = import_react.default.useState(false);
-  const [settled, setSettled] = import_react.default.useState(false);
-  import_react.default.useEffect(() => {
+  const [mounted, setMounted] = import_react2.default.useState(false);
+  const [visible, setVisible] = import_react2.default.useState(false);
+  const [settled, setSettled] = import_react2.default.useState(false);
+  const boxRef = import_react2.default.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(boxRef, isOpen && mounted, { trap: true });
+  import_react2.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -89,6 +167,7 @@ var Modal = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",

package/dist/components/Modal/index.js

@@ -1,7 +1,82 @@
 // src/components/Modal/Modal.tsx
-import React from "react";
+import React2 from "react";
 import { createPortal } from "react-dom";
 
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React from "react";
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type='hidden'])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])"
+].join(",");
+var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
+  // 화면에 없는 것은 제외 (display:none 등)
+  (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
+);
+var useEscapeKey = (enabled, onEscape) => {
+  React.useEffect(() => {
+    if (!enabled) return;
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (e.defaultPrevented) return;
+      e.preventDefault();
+      onEscape();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, onEscape]);
+};
+var useFocusTrap = (containerRef, enabled, options = {}) => {
+  const { trap = false, initialFocus } = options;
+  const restoreRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!enabled) return;
+    restoreRef.current = document.activeElement;
+    const raf = requestAnimationFrame(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const target = initialFocus?.current ?? focusableIn(el)[0] ?? el;
+      if (!target.hasAttribute("tabindex") && !focusableIn(el).includes(target)) {
+        target.setAttribute("tabindex", "-1");
+      }
+      target.focus({ preventScroll: true });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      const prev = restoreRef.current;
+      if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
+    };
+  }, [enabled, containerRef, initialFocus]);
+  React.useEffect(() => {
+    if (!enabled || !trap) return;
+    const onKey = (e) => {
+      if (e.key !== "Tab") return;
+      const el = containerRef.current;
+      if (!el) return;
+      const items = focusableIn(el);
+      if (items.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = document.activeElement;
+      if (e.shiftKey && (active === first || !el.contains(active))) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && (active === last || !el.contains(active))) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [enabled, trap, containerRef]);
+};
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -23,10 +98,13 @@ import { jsx } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React.useState(false);
-  const [visible, setVisible] = React.useState(false);
-  const [settled, setSettled] = React.useState(false);
-  React.useEffect(() => {
+  const [mounted, setMounted] = React2.useState(false);
+  const [visible, setVisible] = React2.useState(false);
+  const [settled, setSettled] = React2.useState(false);
+  const boxRef = React2.useRef(null);
+  useEscapeKey(isOpen, onClose);
+  useFocusTrap(boxRef, isOpen && mounted, { trap: true });
+  React2.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -53,6 +131,7 @@ var Modal = (props) => {
         children: /* @__PURE__ */ jsx(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass, settled && "settled"),
             role: "dialog",
             "aria-modal": "true",

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
 
 /** NotificationBadge 의 상태 색 */
 type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";

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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.js';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.js';
 
 /** NotificationBadge 의 상태 색 */
 type NotificationBadgeType = "primary" | "success" | "error" | "warning" | "info";

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

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { L as LegacyStatusType } from '../../status-g_KP3qT6.cjs';
+import { L as LegacyStatusType } from '../../status-njWqQWFV.cjs';
 
 type PaginationSize = "sm" | "md" | "lg";
 /** Pagination 의 상태 색 */