moru-krds-react 0.1.0

package/dist/context-menu/index.js

@@ -0,0 +1,399 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Button } from "../button/index.js";
+import { cx } from "../lib/krds.js";
+function alignClass(align) {
+  return align === "left" || align === "right" ? `drop-${align}` : void 0;
+}
+function itemText(item) {
+  return (item.text ?? (typeof item.label === "string" ? item.label : "")).trim().toLowerCase();
+}
+const TYPEAHEAD_RESET_MS = 500;
+const VIEWPORT_GUTTER_PX = 8;
+function useMenuController() {
+  const [open, setOpen] = useState(false);
+  const wrapRef = useRef(null);
+  const menuRef = useRef(null);
+  const returnFocusRef = useRef(null);
+  const initialFocusRef = useRef("first");
+  const items = useCallback(
+    () => Array.from(menuRef.current?.querySelectorAll('[role="menuitem"]') ?? []),
+    []
+  );
+  const openMenu = useCallback((initial = "first", returnTo) => {
+    initialFocusRef.current = initial;
+    returnFocusRef.current = returnTo ?? document.activeElement ?? null;
+    setOpen(true);
+  }, []);
+  const close = useCallback((refocus = false) => {
+    setOpen(false);
+    if (refocus) returnFocusRef.current?.focus();
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const list = items();
+    if (!list.length) return;
+    (initialFocusRef.current === "last" ? list[list.length - 1] : list[0]).focus();
+  }, [open, items]);
+  useEffect(() => {
+    if (!open) return;
+    const onPointerDown = (e) => {
+      if (!wrapRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  return { open, openMenu, close, wrapRef, menuRef, items };
+}
+function mergeRef(inner, outer) {
+  return (node) => {
+    inner.current = node;
+    if (typeof outer === "function") outer(node);
+    else if (outer) outer.current = node;
+  };
+}
+function useOpenChange(open, onOpenChange) {
+  const latest = useRef(onOpenChange);
+  const mounted = useRef(false);
+  useEffect(() => {
+    latest.current = onOpenChange;
+  });
+  useEffect(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+      return;
+    }
+    latest.current?.(open);
+  }, [open]);
+}
+function MenuList({ id, items, label, labelledBy, menuRef, onKeyDown, onActivate }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: menuRef,
+      id,
+      role: "menu",
+      "aria-label": labelledBy ? void 0 : label,
+      "aria-labelledby": labelledBy,
+      className: "drop-list",
+      onKeyDown,
+      children: items.map((item, index) => {
+        if (item.separator) {
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              role: "separator",
+              className: "my-1 h-px bg-divider"
+            },
+            item.id ?? `separator-${index}`
+          );
+        }
+        const { id: itemId, label: itemLabel, icon, href, target, disabled, danger, active } = item;
+        const cls = cx(
+          "item-link",
+          active && "active",
+          // 킷에 위험·비활성 항목 모양이 없다 — 유틸리티로 보충한다.
+          danger && !disabled && "text-danger",
+          disabled && "text-fg-disabled cursor-not-allowed hover:bg-transparent"
+        );
+        const iconNode = icon ? /* @__PURE__ */ jsx(
+          "i",
+          {
+            className: cx(
+              "svg-icon",
+              `ico-${icon}`,
+              danger && !disabled && "bg-danger",
+              disabled && "bg-fg-disabled"
+            ),
+            "aria-hidden": "true"
+          }
+        ) : null;
+        const shared = {
+          role: "menuitem",
+          // 메뉴 안에서는 ↑↓ 로만 오간다(roving tabindex). 초점은 부품이 옮긴다.
+          tabIndex: -1,
+          className: cls,
+          // 비활성은 disabled 속성이 아니라 aria-disabled 다 — 초점은 받아야 한다(APG).
+          "aria-disabled": disabled || void 0,
+          "aria-current": active ? "true" : void 0
+        };
+        return /* @__PURE__ */ jsx("li", { role: "none", children: href !== void 0 ? /* @__PURE__ */ jsxs(
+          "a",
+          {
+            ...shared,
+            href: disabled ? void 0 : href,
+            target,
+            title: target === "_blank" ? "\uC0C8 \uCC3D \uC5F4\uB9BC" : void 0,
+            onClick: (e) => {
+              if (disabled) {
+                e.preventDefault();
+                return;
+              }
+              onActivate(item);
+            },
+            children: [
+              iconNode,
+              itemLabel
+            ]
+          }
+        ) : /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ...shared,
+            type: "button",
+            onClick: () => {
+              if (disabled) return;
+              onActivate(item);
+            },
+            children: [
+              iconNode,
+              itemLabel
+            ]
+          }
+        ) }, itemId);
+      })
+    }
+  );
+}
+function useMenuKeyDown({ items, close }, entries) {
+  const buffer = useRef("");
+  const timer = useRef(null);
+  useEffect(
+    () => () => {
+      if (timer.current) clearTimeout(timer.current);
+    },
+    []
+  );
+  const focusAt = (list, index) => {
+    if (!list.length) return;
+    list[(index + list.length) % list.length].focus();
+  };
+  return (e) => {
+    const list = items();
+    const at = list.indexOf(document.activeElement);
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        focusAt(list, at + 1);
+        return;
+      case "ArrowUp":
+        e.preventDefault();
+        focusAt(list, at - 1);
+        return;
+      case "Home":
+        e.preventDefault();
+        focusAt(list, 0);
+        return;
+      case "End":
+        e.preventDefault();
+        focusAt(list, list.length - 1);
+        return;
+      case "Escape":
+        e.stopPropagation();
+        e.preventDefault();
+        close(true);
+        return;
+      case "Tab":
+        close();
+        return;
+      default:
+        break;
+    }
+    if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;
+    const key = e.key.toLowerCase();
+    if (key === " " && !buffer.current) return;
+    e.preventDefault();
+    buffer.current += key;
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      buffer.current = "";
+    }, TYPEAHEAD_RESET_MS);
+    const actions = entries.filter((i) => !i.separator);
+    const from = at < 0 ? 0 : at + (buffer.current.length > 1 ? 0 : 1);
+    for (let n = 0; n < actions.length; n += 1) {
+      const i = (from + n) % actions.length;
+      if (itemText(actions[i]).startsWith(buffer.current)) {
+        focusAt(list, i);
+        return;
+      }
+    }
+  };
+}
+function ContextMenu({
+  items,
+  label,
+  triggerLabel,
+  icon = "more",
+  size = "small",
+  align = "right",
+  onSelect,
+  onOpenChange,
+  triggerClassName,
+  className,
+  ref,
+  ...rest
+}) {
+  const ctl = useMenuController();
+  const triggerRef = useRef(null);
+  const baseId = useId();
+  const menuId = `${baseId}-menu`;
+  const triggerId = `${baseId}-trigger`;
+  const onKeyDownMenu = useMenuKeyDown({ items: ctl.items, close: ctl.close }, items);
+  useOpenChange(ctl.open, onOpenChange);
+  const toggle = () => {
+    if (ctl.open) ctl.close(true);
+    else ctl.openMenu("first", triggerRef.current);
+  };
+  const onTriggerKeyDown = (e) => {
+    if (e.key !== "ArrowDown" && e.key !== "ArrowUp") return;
+    e.preventDefault();
+    ctl.openMenu(e.key === "ArrowDown" ? "first" : "last", triggerRef.current);
+  };
+  const triggerProps = {
+    id: triggerId,
+    ref: triggerRef,
+    size,
+    variant: "text",
+    // drop-btn 은 킷 CSS 에 없는 손잡이 클래스지만 샘플에 있으므로 남긴다.
+    className: cx("drop-btn", triggerClassName),
+    "aria-haspopup": "true",
+    "aria-expanded": ctl.open,
+    "aria-controls": menuId,
+    onClick: toggle,
+    onKeyDown: onTriggerKeyDown
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: mergeRef(ctl.wrapRef, ref),
+      className: cx("krds-drop-wrap", alignClass(align), className),
+      onKeyDown: (e) => {
+        if (e.key === "Escape" && ctl.open) {
+          e.stopPropagation();
+          ctl.close(true);
+        }
+      },
+      children: [
+        triggerLabel === void 0 ? /* @__PURE__ */ jsx(Button, { iconOnly: true, icon, label, ...triggerProps }) : /* @__PURE__ */ jsx(Button, { icon: "toggle", ...triggerProps, children: triggerLabel }),
+        /* @__PURE__ */ jsx("div", { className: "drop-menu", style: ctl.open ? { display: "block" } : void 0, children: /* @__PURE__ */ jsx("div", { className: "drop-in", children: /* @__PURE__ */ jsx(
+          MenuList,
+          {
+            id: menuId,
+            items,
+            labelledBy: triggerId,
+            menuRef: ctl.menuRef,
+            onKeyDown: onKeyDownMenu,
+            onActivate: (item) => {
+              ctl.close(true);
+              item.onSelect?.(item.id);
+              onSelect?.(item.id);
+            }
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+function ContextMenuArea({
+  items,
+  label,
+  onSelect,
+  onOpenChange,
+  disabled,
+  className,
+  children,
+  ref,
+  ...rest
+}) {
+  const ctl = useMenuController();
+  const menuId = useId();
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [side, setSide] = useState("left");
+  const anchorRef = useRef(null);
+  const onKeyDownMenu = useMenuKeyDown({ items: ctl.items, close: ctl.close }, items);
+  useOpenChange(ctl.open, onOpenChange);
+  useEffect(() => {
+    if (!ctl.open) return;
+    const anchor = anchorRef.current;
+    const box = anchor?.firstElementChild?.getBoundingClientRect();
+    if (!anchor || !box) return;
+    const over = box.bottom - (window.innerHeight - VIEWPORT_GUTTER_PX);
+    if (over > 0) anchor.style.top = `${pos.y - over}px`;
+  }, [ctl.open, pos.x, pos.y]);
+  const openAt = (clientX, clientY) => {
+    const rect = ctl.wrapRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setPos({ x: clientX - rect.left, y: clientY - rect.top });
+    setSide(clientX > window.innerWidth / 2 ? "right" : "left");
+    ctl.openMenu("first");
+  };
+  const onContextMenu = (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    openAt(e.clientX, e.clientY);
+  };
+  const onKeyDown = (e) => {
+    if (ctl.open) {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        ctl.close(true);
+      }
+      return;
+    }
+    if (disabled) return;
+    if (e.key !== "ContextMenu" && !(e.key === "F10" && e.shiftKey)) return;
+    e.preventDefault();
+    const box = e.target.getBoundingClientRect?.();
+    if (box) openAt(box.left, box.bottom);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      ref: mergeRef(ctl.wrapRef, ref),
+      className: cx("krds-drop-wrap block", ctl.open && `drop-${side}`, className),
+      onContextMenu,
+      onKeyDown,
+      children: [
+        children,
+        ctl.open && // 0 크기 앵커. 메뉴의 기준점일 뿐이라 화면에도 스크린리더에도 잡히지 않는다.
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: anchorRef,
+            className: "absolute",
+            style: { left: pos.x, top: pos.y, width: 0, height: 0 },
+            children: /* @__PURE__ */ jsx("div", { className: "drop-menu", style: { display: "block" }, children: /* @__PURE__ */ jsx("div", { className: "drop-in", children: /* @__PURE__ */ jsx(
+              MenuList,
+              {
+                id: menuId,
+                items,
+                label,
+                menuRef: ctl.menuRef,
+                onKeyDown: onKeyDownMenu,
+                onActivate: (item) => {
+                  ctl.close(true);
+                  item.onSelect?.(item.id);
+                  onSelect?.(item.id);
+                }
+              }
+            ) }) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ContextMenu,
+  ContextMenuArea
+};
+//# sourceMappingURL=index.js.map

package/dist/context-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/context-menu/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { Button } from '../button';\nimport { cx, type KrdsIcon, type KrdsSize } from '../lib/krds';\n\n/**\n * 상황 메뉴(더보기 · 우클릭) — KRDS 에 없는 보충 부품이다.\n *\n * 모양은 킷 드롭다운(`krds-drop-wrap`), 동작은 WAI-ARIA APG 의 Menu Button 패턴이다.\n * 표 한 칸에 늘어선 행 동작을 하나로 접을 때 쓴다 — 「삭제」는 `danger` 로 표시하고\n * 구분선(`{ separator: true }`)으로 나머지와 떼어 놓는다.\n * **동작 목록에만 쓴다.** 메뉴는 Tab 을 가로막으므로 언어 전환·화면 크기처럼 Tab 으로 닿아야\n * 하는 목록에는 `ui/resize` 의 드롭다운을 쓴다. 하위 메뉴(2단)는 지원하지 않는다.\n *\n * @example\n * <ContextMenu\n *   label={`${row.name} 행 더보기`}\n *   items={[\n *     { id: 'edit', label: '수정', icon: 'setting', onSelect: () => edit(row) },\n *     { separator: true },\n *     { id: 'delete', label: '삭제', icon: 'delete', danger: true, onSelect: () => remove(row) },\n *   ]}\n * />\n *\n * 자세히: docs/krds/09-부품-노트.md#컨텍스트메뉴\n */\n\n/* ────────────────────────────────────────────────────────────────────────\n * 1. 항목\n * ──────────────────────────────────────────────────────────────────────── */\n\n/** 실행 항목. `href` 가 있으면 링크(`<a>`), 없으면 단추(`<button>`)로 그린다. */\nexport type ContextMenuAction = {\n  id: string;\n  label: ReactNode;\n  /** 글자 탐색에 쓸 문자열. `label` 이 문자열이면 필요 없다. */\n  text?: string;\n  /** 킷 아이콘 이름(`ico-` 뺀 것). 예: `delete` · `setting` · `download` */\n  icon?: KrdsIcon;\n  /** 이동이면 링크로 그린다. 동작에는 주지 않는다. */\n  href?: string;\n  target?: string;\n  /** 초점은 받되 실행되지 않는다(`aria-disabled`). */\n  disabled?: boolean;\n  /** 되돌릴 수 없는 동작(삭제 등). 글자를 위험색으로 물들인다. */\n  danger?: boolean;\n  /** 현재 상태 표시(킷 `.active`). 정렬 기준처럼 「지금 이것」을 보일 때. */\n  active?: boolean;\n  onSelect?: (id: string) => void;\n  separator?: never;\n};\n\n/** 구분선. 「삭제」처럼 되돌릴 수 없는 항목을 나머지와 떼어 놓는다. */\nexport type ContextMenuSeparatorItem = {\n  separator: true;\n  /** 목록 key 용. 없으면 순번으로 만든다. */\n  id?: string;\n};\n\nexport type ContextMenuItem = ContextMenuAction | ContextMenuSeparatorItem;\n\n/** 킷의 드롭다운 정렬 클래스(`.drop-left` · `.drop-right`). 생략하면 가운데(킷 기본). */\nexport type ContextMenuAlign = 'left' | 'center' | 'right';\n\n/** 정렬 → 킷 클래스. `center` 는 킷 기본값이라 클래스가 없다. */\nfunction alignClass(align: ContextMenuAlign | undefined): string | undefined {\n  return align === 'left' || align === 'right' ? `drop-${align}` : undefined;\n}\n\n/** 글자 탐색에 쓸 문자열을 뽑는다. */\nfunction itemText(item: ContextMenuAction): string {\n  return (item.text ?? (typeof item.label === 'string' ? item.label : '')).trim().toLowerCase();\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 2. 여닫기·초점 — 두 부품이 함께 쓴다\n * ──────────────────────────────────────────────────────────────────────── */\n\n/** 열 때 어느 항목에 초점을 둘지. ↑ 로 열면 마지막 항목이다(APG). */\ntype InitialFocus = 'first' | 'last';\n\n/** 글자 탐색 버퍼가 살아 있는 시간(ms). APG 예제가 쓰는 값이다. */\nconst TYPEAHEAD_RESET_MS = 500;\n\n/** 커서 메뉴가 화면 아래로 넘칠 때 남길 여유(px). KRDS 눈금에 없어 그림자가 잘리지 않을 값으로 정했다. */\nconst VIEWPORT_GUTTER_PX = 8;\n\nfunction useMenuController() {\n  const [open, setOpen] = useState(false);\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLUListElement>(null);\n  /** 닫을 때 초점을 돌려줄 곳. 열기 직전에 채운다. */\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  /** 열린 직후 초점을 둘 자리. */\n  const initialFocusRef = useRef<InitialFocus>('first');\n\n  /** 지금 메뉴 안에 있는 항목들. 구분선은 걸리지 않는다. */\n  const items = useCallback(\n    () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]') ?? []),\n    [],\n  );\n\n  /** 연다. `returnTo` 를 주지 않으면 열기 직전 초점이 있던 곳으로 돌아간다. */\n  const openMenu = useCallback((initial: InitialFocus = 'first', returnTo?: HTMLElement | null) => {\n    initialFocusRef.current = initial;\n    returnFocusRef.current = returnTo ?? (document.activeElement as HTMLElement | null) ?? null;\n    setOpen(true);\n  }, []);\n\n  const close = useCallback((refocus = false) => {\n    setOpen(false);\n    if (refocus) returnFocusRef.current?.focus();\n  }, []);\n\n  // 열린 직후 첫(또는 마지막) 항목으로 초점을 옮긴다 — APG 의 Menu Button 규정이다.\n  useEffect(() => {\n    if (!open) return;\n    const list = items();\n    if (!list.length) return;\n    (initialFocusRef.current === 'last' ? list[list.length - 1] : list[0]).focus();\n  }, [open, items]);\n\n  // 바깥을 누르면 닫는다. 초점은 돌려주지 않는다(누른 곳으로 가는 게 자연스럽다).\n  useEffect(() => {\n    if (!open) return;\n    const onPointerDown = (e: PointerEvent) => {\n      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false);\n    };\n    document.addEventListener('pointerdown', onPointerDown);\n    return () => document.removeEventListener('pointerdown', onPointerDown);\n  }, [open]);\n\n  return { open, openMenu, close, wrapRef, menuRef, items };\n}\n\n/** 밖에서 온 ref 와 부품 내부 ref 를 함께 채운다. 감싸개 ref 를 삼키지 않으려고 둔다. */\nfunction mergeRef<T>(inner: { current: T | null }, outer: Ref<T> | undefined) {\n  return (node: T | null) => {\n    inner.current = node;\n    if (typeof outer === 'function') outer(node);\n    else if (outer) outer.current = node;\n  };\n}\n\n/** 열림이 바뀔 때만 알린다. 인라인 콜백이 매 렌더 새 함수라 ref 에 담아 의존성에서 뺀다. */\nfunction useOpenChange(open: boolean, onOpenChange?: (open: boolean) => void) {\n  const latest = useRef(onOpenChange);\n  const mounted = useRef(false);\n  useEffect(() => {\n    latest.current = onOpenChange;\n  });\n  useEffect(() => {\n    // 붙자마자 `false` 를 알리지 않는다 — 바뀐 것이 없다.\n    if (!mounted.current) {\n      mounted.current = true;\n      return;\n    }\n    latest.current?.(open);\n  }, [open]);\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 3. 목록 그리기\n * ──────────────────────────────────────────────────────────────────────── */\n\ntype MenuListProps = {\n  id: string;\n  items: ReadonlyArray<ContextMenuItem>;\n  /** 메뉴 이름. 여는 단추가 있으면 그 id 를 `labelledBy` 로 준다. */\n  label?: string;\n  labelledBy?: string;\n  menuRef: Ref<HTMLUListElement>;\n  onKeyDown: (e: ReactKeyboardEvent<HTMLUListElement>) => void;\n  onActivate: (item: ContextMenuAction) => void;\n};\n\nfunction MenuList({ id, items, label, labelledBy, menuRef, onKeyDown, onActivate }: MenuListProps) {\n  return (\n    <ul\n      ref={menuRef}\n      id={id}\n      // ★ role=\"menu\" 는 이 <ul> 에 준다. 바깥 .drop-menu 에 주면 ul/li 가 허용되지 않는 자식이 된다.\n      role=\"menu\"\n      aria-label={labelledBy ? undefined : label}\n      aria-labelledby={labelledBy}\n      className=\"drop-list\"\n      onKeyDown={onKeyDown}\n    >\n      {items.map((item, index) => {\n        if (item.separator) {\n          // 킷에 구분선 클래스가 없다 — 유틸리티로 그린다. 킷 목록 간격(--krds-gap-3=8px)에 맞춰 my-1(4px)씩.\n          return (\n            <li\n              key={item.id ?? `separator-${index}`}\n              role=\"separator\"\n              className=\"my-1 h-px bg-divider\"\n            />\n          );\n        }\n\n        const { id: itemId, label: itemLabel, icon, href, target, disabled, danger, active } = item;\n        const cls = cx(\n          'item-link',\n          active && 'active',\n          // 킷에 위험·비활성 항목 모양이 없다 — 유틸리티로 보충한다.\n          danger && !disabled && 'text-danger',\n          disabled && 'text-fg-disabled cursor-not-allowed hover:bg-transparent',\n        );\n        const iconNode = icon ? (\n          <i\n            // .svg-icon 은 background-color 를 mask 색으로 쓴다 — 글자색과 맞추려면 bg-* 를 얹는다.\n            className={cx(\n              'svg-icon',\n              `ico-${icon}`,\n              danger && !disabled && 'bg-danger',\n              disabled && 'bg-fg-disabled',\n            )}\n            aria-hidden=\"true\"\n          />\n        ) : null;\n\n        const shared = {\n          role: 'menuitem' as const,\n          // 메뉴 안에서는 ↑↓ 로만 오간다(roving tabindex). 초점은 부품이 옮긴다.\n          tabIndex: -1,\n          className: cls,\n          // 비활성은 disabled 속성이 아니라 aria-disabled 다 — 초점은 받아야 한다(APG).\n          'aria-disabled': disabled || undefined,\n          'aria-current': active ? ('true' as const) : undefined,\n        };\n\n        return (\n          <li key={itemId} role=\"none\">\n            {href !== undefined ? (\n              <a\n                {...shared}\n                // 비활성 링크는 href 를 떼어 이동을 막는다. tabIndex=-1 이라 초점은 그대로 받는다.\n                href={disabled ? undefined : href}\n                target={target}\n                // 새 창으로 열리면 미리 알린다 — KRDS 접근성 요구.\n                title={target === '_blank' ? '새 창 열림' : undefined}\n                onClick={(e) => {\n                  if (disabled) {\n                    e.preventDefault();\n                    return;\n                  }\n                  onActivate(item);\n                }}\n              >\n                {iconNode}\n                {itemLabel}\n              </a>\n            ) : (\n              <button\n                {...shared}\n                type=\"button\"\n                onClick={() => {\n                  if (disabled) return;\n                  onActivate(item);\n                }}\n              >\n                {iconNode}\n                {itemLabel}\n              </button>\n            )}\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 4. 키보드 — APG Menu Button\n * ──────────────────────────────────────────────────────────────────────── */\n\ntype Nav = {\n  items: () => HTMLElement[];\n  close: (refocus?: boolean) => void;\n};\n\n/**\n * 메뉴 안 키 처리(APG) — ↓↑ 는 끝에서 돌고, Home/End 는 양 끝, Esc 는 닫고 초점 복귀,\n * Tab 은 닫고 흘려보내며, 글자를 치면 그 글자로 시작하는 다음 항목으로 간다.\n */\nfunction useMenuKeyDown({ items, close }: Nav, entries: ReadonlyArray<ContextMenuItem>) {\n  const buffer = useRef('');\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  // 딸린 타이머는 부품이 사라질 때 반드시 끈다.\n  useEffect(\n    () => () => {\n      if (timer.current) clearTimeout(timer.current);\n    },\n    [],\n  );\n\n  const focusAt = (list: HTMLElement[], index: number) => {\n    if (!list.length) return;\n    list[(index + list.length) % list.length].focus();\n  };\n\n  return (e: ReactKeyboardEvent<HTMLUListElement>) => {\n    const list = items();\n    const at = list.indexOf(document.activeElement as HTMLElement);\n\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        focusAt(list, at + 1);\n        return;\n      case 'ArrowUp':\n        e.preventDefault();\n        focusAt(list, at - 1);\n        return;\n      case 'Home':\n        e.preventDefault();\n        focusAt(list, 0);\n        return;\n      case 'End':\n        e.preventDefault();\n        focusAt(list, list.length - 1);\n        return;\n      case 'Escape':\n        // 바깥(모달 등)이 같은 Esc 를 받지 않도록 여기서 멈춘다.\n        e.stopPropagation();\n        e.preventDefault();\n        close(true);\n        return;\n      case 'Tab':\n        // APG: Tab 은 메뉴를 닫고 초점을 다음 요소로 넘긴다. preventDefault 하지 않는다.\n        close();\n        return;\n      default:\n        break;\n    }\n\n    // 글자 탐색. 조합키가 걸린 입력은 단축키이므로 건드리지 않는다.\n    if (e.key.length !== 1 || e.altKey || e.ctrlKey || e.metaKey) return;\n    const key = e.key.toLowerCase();\n    if (key === ' ' && !buffer.current) return; // Space 는 실행(기본 동작)이다\n\n    e.preventDefault();\n    buffer.current += key;\n    if (timer.current) clearTimeout(timer.current);\n    timer.current = setTimeout(() => {\n      buffer.current = '';\n    }, TYPEAHEAD_RESET_MS);\n\n    // 구분선을 뺀 실제 항목 순서로 견준다 — DOM 순서(list)와 짝이 맞는다.\n    const actions = entries.filter((i): i is ContextMenuAction => !i.separator);\n    const from = at < 0 ? 0 : at + (buffer.current.length > 1 ? 0 : 1);\n    for (let n = 0; n < actions.length; n += 1) {\n      const i = (from + n) % actions.length;\n      if (itemText(actions[i]).startsWith(buffer.current)) {\n        focusAt(list, i);\n        return;\n      }\n    }\n  };\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 5. 더보기 단추 — ContextMenu\n * ──────────────────────────────────────────────────────────────────────── */\n\nexport type ContextMenuProps = Omit<ComponentPropsWithRef<'div'>, 'onSelect'> & {\n  items: ReadonlyArray<ContextMenuItem>;\n  /** 단추의 이름(`sr-only`). 표 안에서는 어느 행인지까지 담는다 — 「홍길동 행 더보기」. */\n  label: string;\n  /** 글자가 있는 단추로 그린다. 주면 아이콘 대신 「글자 + ico-toggle」이 된다. */\n  triggerLabel?: ReactNode;\n  /** 아이콘만인 단추의 아이콘. 기본 `more`(킷 `ico_more.svg`). */\n  icon?: KrdsIcon;\n  /** 단추 크기. 기본 small(40px) — 표 안 행 동작 자리에 맞춘 값이다. */\n  size?: KrdsSize;\n  /** 메뉴가 펼쳐지는 쪽. 기본 `right`(오른쪽 끝 열에 놓이는 자리라 왼쪽으로 편다). */\n  align?: ContextMenuAlign;\n  /** 항목별 `onSelect` 와 별개로, 무엇을 골랐든 한 번 부른다. */\n  onSelect?: (id: string) => void;\n  onOpenChange?: (open: boolean) => void;\n  /** 여는 단추에 붙일 클래스. */\n  triggerClassName?: string;\n};\n\n/** 더보기 메뉴 — 표 행 동작·카드 우상단처럼 「이 대상에 대한 동작 묶음」을 접는다. */\nexport function ContextMenu({\n  items,\n  label,\n  triggerLabel,\n  icon = 'more',\n  size = 'small',\n  align = 'right',\n  onSelect,\n  onOpenChange,\n  triggerClassName,\n  className,\n  ref,\n  ...rest\n}: ContextMenuProps) {\n  const ctl = useMenuController();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const baseId = useId();\n  const menuId = `${baseId}-menu`;\n  const triggerId = `${baseId}-trigger`;\n\n  const onKeyDownMenu = useMenuKeyDown({ items: ctl.items, close: ctl.close }, items);\n  useOpenChange(ctl.open, onOpenChange);\n\n  const toggle = () => {\n    // 마우스로 눌렀을 때 Safari 는 단추에 초점을 주지 않는다 — 돌려줄 자리를 직접 지정한다.\n    if (ctl.open) ctl.close(true);\n    else ctl.openMenu('first', triggerRef.current);\n  };\n\n  const onTriggerKeyDown = (e: ReactKeyboardEvent<HTMLButtonElement>) => {\n    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;\n    e.preventDefault();\n    // APG: ↓ 로 열면 첫 항목, ↑ 로 열면 마지막 항목에 초점.\n    ctl.openMenu(e.key === 'ArrowDown' ? 'first' : 'last', triggerRef.current);\n  };\n\n  const triggerProps = {\n    id: triggerId,\n    ref: triggerRef,\n    size,\n    variant: 'text' as const,\n    // drop-btn 은 킷 CSS 에 없는 손잡이 클래스지만 샘플에 있으므로 남긴다.\n    className: cx('drop-btn', triggerClassName),\n    'aria-haspopup': 'true' as const,\n    'aria-expanded': ctl.open,\n    'aria-controls': menuId,\n    onClick: toggle,\n    onKeyDown: onTriggerKeyDown,\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRef(ctl.wrapRef, ref)}\n      className={cx('krds-drop-wrap', alignClass(align), className)}\n      // 초점이 여는 단추에 있을 때의 Esc. 목록 안에서는 <ul> 이 먼저 받아 여기까지 오지 않는다.\n      onKeyDown={(e) => {\n        if (e.key === 'Escape' && ctl.open) {\n          e.stopPropagation();\n          ctl.close(true);\n        }\n      }}\n    >\n      {triggerLabel === undefined ? (\n        <Button iconOnly icon={icon} label={label} {...triggerProps} />\n      ) : (\n        <Button icon=\"toggle\" {...triggerProps}>\n          {triggerLabel}\n        </Button>\n      )}\n\n      {/*\n        킷은 `.drop-menu{display:none}` 만 두고 여는 클래스를 주지 않는다 — 인라인으로 연다.\n        접힌 동안 display:none 이라 스크린리더도 읽지 않는다(별도 hidden 처리가 필요 없다).\n      */}\n      <div className=\"drop-menu\" style={ctl.open ? { display: 'block' } : undefined}>\n        <div className=\"drop-in\">\n          <MenuList\n            id={menuId}\n            items={items}\n            labelledBy={triggerId}\n            menuRef={ctl.menuRef}\n            onKeyDown={onKeyDownMenu}\n            onActivate={(item) => {\n              ctl.close(true);\n              item.onSelect?.(item.id);\n              onSelect?.(item.id);\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 6. 우클릭 영역 — ContextMenuArea\n * ──────────────────────────────────────────────────────────────────────── */\n\nexport type ContextMenuAreaProps = Omit<ComponentPropsWithRef<'div'>, 'onSelect'> & {\n  items: ReadonlyArray<ContextMenuItem>;\n  /** 메뉴 이름. 여는 단추가 없으니 여기서 준다 — 「목록 항목 동작」처럼. */\n  label: string;\n  onSelect?: (id: string) => void;\n  onOpenChange?: (open: boolean) => void;\n  /** 우클릭을 가로채지 않는다(브라우저 기본 메뉴가 뜬다). */\n  disabled?: boolean;\n};\n\n/**\n * 우클릭 메뉴 — 영역 안에서 오른쪽 단추(또는 Shift+F10 · ContextMenu 키)로 연다.\n *\n * **브라우저 기본 메뉴를 가린다.** 「새 탭에서 열기」를 빼앗으므로 꼭 필요한 곳에만 쓰고,\n * 같은 동작을 여는 눈에 보이는 단추(`ContextMenu`)를 함께 둔다.\n *\n * @example\n * <ContextMenuArea label=\"목록 항목 동작\" items={rowActions}>\n *   <ul>…</ul>\n * </ContextMenuArea>\n */\nexport function ContextMenuArea({\n  items,\n  label,\n  onSelect,\n  onOpenChange,\n  disabled,\n  className,\n  children,\n  ref,\n  ...rest\n}: ContextMenuAreaProps) {\n  const ctl = useMenuController();\n  const menuId = useId();\n  /** 감싸개 왼쪽 위를 원점으로 한 앵커 좌표(px). */\n  const [pos, setPos] = useState({ x: 0, y: 0 });\n  const [side, setSide] = useState<'left' | 'right'>('left');\n  const anchorRef = useRef<HTMLDivElement>(null);\n\n  const onKeyDownMenu = useMenuKeyDown({ items: ctl.items, close: ctl.close }, items);\n  useOpenChange(ctl.open, onOpenChange);\n\n  // 화면 아래로 넘치면 그만큼 끌어올린다. 상태가 아니라 앵커의 style.top 을 직접 쓴다 —\n  // 재고 나서 상태를 바꾸면 한 프레임이 잘못된 자리에 그려진다. 위로 뒤집지는 않는다(꼭지가 거꾸로 선다).\n  useEffect(() => {\n    if (!ctl.open) return;\n    const anchor = anchorRef.current;\n    const box = anchor?.firstElementChild?.getBoundingClientRect();\n    if (!anchor || !box) return;\n    const over = box.bottom - (window.innerHeight - VIEWPORT_GUTTER_PX);\n    if (over > 0) anchor.style.top = `${pos.y - over}px`;\n  }, [ctl.open, pos.x, pos.y]);\n\n  /** 감싸개 기준 좌표로 옮겨 담고 연다. */\n  const openAt = (clientX: number, clientY: number) => {\n    const rect = ctl.wrapRef.current?.getBoundingClientRect();\n    if (!rect) return;\n    setPos({ x: clientX - rect.left, y: clientY - rect.top });\n    // 오른쪽 절반에서 열면 메뉴를 왼쪽으로 편다.\n    setSide(clientX > window.innerWidth / 2 ? 'right' : 'left');\n    ctl.openMenu('first');\n  };\n\n  const onContextMenu = (e: ReactMouseEvent<HTMLDivElement>) => {\n    if (disabled) return;\n    e.preventDefault();\n    openAt(e.clientX, e.clientY);\n  };\n\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    // 메뉴가 열려 있으면 목록 쪽 처리에 맡긴다.\n    if (ctl.open) {\n      if (e.key === 'Escape') {\n        e.stopPropagation();\n        ctl.close(true);\n      }\n      return;\n    }\n    if (disabled) return;\n    // 키보드로 상황 메뉴를 여는 표준 두 가지.\n    if (e.key !== 'ContextMenu' && !(e.key === 'F10' && e.shiftKey)) return;\n    e.preventDefault();\n    // 초점이 있는 요소의 왼쪽 아래에 띄운다 — 커서가 없으니 그 자리가 기준이다.\n    const box = (e.target as HTMLElement).getBoundingClientRect?.();\n    if (box) openAt(box.left, box.bottom);\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRef(ctl.wrapRef, ref)}\n      // 킷 감싸개는 inline-flex 다 — 영역을 감싸는 쓰임이라 block 으로 되돌린다.\n      className={cx('krds-drop-wrap block', ctl.open && `drop-${side}`, className)}\n      onContextMenu={onContextMenu}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n\n      {ctl.open && (\n        // 0 크기 앵커. 메뉴의 기준점일 뿐이라 화면에도 스크린리더에도 잡히지 않는다.\n        <div\n          ref={anchorRef}\n          className=\"absolute\"\n          style={{ left: pos.x, top: pos.y, width: 0, height: 0 }}\n        >\n          <div className=\"drop-menu\" style={{ display: 'block' }}>\n            <div className=\"drop-in\">\n              <MenuList\n                id={menuId}\n                items={items}\n                label={label}\n                menuRef={ctl.menuRef}\n                onKeyDown={onKeyDownMenu}\n                onActivate={(item) => {\n                  ctl.close(true);\n                  item.onSelect?.(item.id);\n                  onSelect?.(item.id);\n                }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/critical-alert/index.d.ts

@@ -0,0 +1,39 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+/**
+ * 긴급 공지 — KRDS `krds-critical-alerts`.
+ *
+ * **재난·재해, 예고 없는 장애, 점검 사전 예고에만 쓴다.** 규격이 피드백 메시지·일반 공지·홍보에
+ * 쓰는 것을 금지한다 — 본문 안내는 `Alert`, 폼 오류는 `Field` 의 `error` 다.
+ * 한 화면에 하나, 링크도 하나, 본문은 한 줄이다(킷이 두 줄에서 잘라낸다).
+ * 닫기 단추는 규격이 금지해 prop 자체가 없다. 자리는 주메뉴와 히어로 사이, 본문의 첫 요소다.
+ *
+ * @example
+ * <CriticalAlert level="danger" href="/notice/1024" linkTitle="집중호우 대응 안내">
+ *   집중호우로 일부 민원 처리가 지연되고 있습니다.
+ * </CriticalAlert>
+ *
+ * 자세히: docs/krds/09-부품-노트.md#긴급공지
+ */
+/**
+ * 긴급도. `danger` 재난·급작스러운 장애(「긴급」) · `ok` 서비스 중단 사전 예고(「안전」) ·
+ * `info` 대부분의 사용자가 알아야 하는 상황(「안내」).
+ */
+export type CriticalAlertLevel = 'danger' | 'ok' | 'info';
+export type CriticalAlertProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    /** 긴급도. 기본값 `danger` — 이 부품을 쓸 상황 자체가 긴급 상황이다. */
+    level?: CriticalAlertLevel;
+    /** 배지 글자. 생략하면 긴급도별 기본값(긴급/안전/안내). 감추지 마라 — 아이콘만으로는 안 읽힌다. */
+    label?: string;
+    /** 공지 내용. 한 줄로 쓴다 — 킷이 두 줄에서 잘라낸다. */
+    children: ReactNode;
+    /** 상세 화면 링크. 규격상 하나만 둘 수 있다. */
+    href?: string;
+    /** 링크 글자. 기본 「자세히 보기」. 작은 화면(<768px)에서는 감춰지고 화살표만 남는다. */
+    linkLabel?: ReactNode;
+    /** 링크의 목적지 설명(`title`). 「자세히 보기」만으로는 목적지를 알 수 없으니 문서 제목을 넣는다. */
+    linkTitle?: string;
+    /** 링크 target. `_blank` 면 `title` 에 「새 창 열림」을 덧붙인다. */
+    linkTarget?: ComponentPropsWithRef<'a'>['target'];
+};
+export declare function CriticalAlert({ level, label, children, href, linkLabel, linkTitle, linkTarget, className, role, 'aria-label': ariaLabel, ...rest }: CriticalAlertProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/critical-alert/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/critical-alert/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D;;;;;;;;;;;;;;GAcG;AAEH;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,CAAC;AAS1D,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IAChF,kDAAkD;IAClD,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,gCAAgC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0DAA0D;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,qBAAqB,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD,CAAC;AAEF,wBAAgB,aAAa,CAAC,EAC5B,KAAgB,EAChB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,SAAoB,EACpB,SAAS,EACT,UAAU,EACV,SAAS,EAIT,IAAe,EACf,YAAY,EAAE,SAAmB,EACjC,GAAG,IAAI,EACR,EAAE,kBAAkB,+BAqCpB"}

package/dist/critical-alert/index.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../lib/krds.js";
+const DEFAULT_LABEL = {
+  danger: "\uAE34\uAE09",
+  ok: "\uC548\uC804",
+  info: "\uC548\uB0B4"
+};
+function CriticalAlert({
+  level = "danger",
+  label,
+  children,
+  href,
+  linkLabel = "\uC790\uC138\uD788 \uBCF4\uAE30",
+  linkTitle,
+  linkTarget,
+  className,
+  // 접근성 가이드: 「긴급 공지 섹션에 role="banner" 를 사용하여 배너 역할을 부여」.
+  // 킷 샘플에는 없고 가이드가 요구한 것이다. 페이지에 <header> 가 이미 있으면 banner
+  // 랜드마크가 둘이 되므로 이름을 붙여 구분한다(aria-label 은 우리가 덧댄 것).
+  role = "banner",
+  "aria-label": ariaLabel = "\uAE34\uAE09 \uACF5\uC9C0",
+  ...rest
+}) {
+  const newWindow = linkTarget === "_blank";
+  const title = linkTitle ? newWindow ? `${linkTitle} (\uC0C8 \uCC3D \uC5F4\uB9BC)` : linkTitle : newWindow ? "\uC0C8 \uCC3D \uC5F4\uB9BC" : void 0;
+  return (
+    // `.main-urgent-wrap` 은 킷 CSS 에 없다(위 주석 참고) — 전폭만 Tailwind 로 준다.
+    /* @__PURE__ */ jsx("div", { className: cx("w-full", className), role, "aria-label": ariaLabel, ...rest, children: /* @__PURE__ */ jsx("ul", { className: "krds-critical-alerts", children: /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("div", { className: "critical-ban", children: [
+      /* @__PURE__ */ jsx("span", { className: cx("critical-badge", level), children: label ?? DEFAULT_LABEL[level] }),
+      /* @__PURE__ */ jsx("p", { className: "critical-txt", children }),
+      href && /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href,
+          className: "krds-btn medium link basic",
+          target: linkTarget,
+          title,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "hidden md:inline", children: linkLabel }),
+            /* @__PURE__ */ jsx("i", { className: "svg-icon ico-angle right", "aria-hidden": "true" })
+          ]
+        }
+      )
+    ] }) }) }) })
+  );
+}
+export {
+  CriticalAlert
+};
+//# sourceMappingURL=index.js.map

package/dist/critical-alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/critical-alert/index.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\nimport { cx } from '../lib/krds';\n\n/**\n * 긴급 공지 — KRDS `krds-critical-alerts`.\n *\n * **재난·재해, 예고 없는 장애, 점검 사전 예고에만 쓴다.** 규격이 피드백 메시지·일반 공지·홍보에\n * 쓰는 것을 금지한다 — 본문 안내는 `Alert`, 폼 오류는 `Field` 의 `error` 다.\n * 한 화면에 하나, 링크도 하나, 본문은 한 줄이다(킷이 두 줄에서 잘라낸다).\n * 닫기 단추는 규격이 금지해 prop 자체가 없다. 자리는 주메뉴와 히어로 사이, 본문의 첫 요소다.\n *\n * @example\n * <CriticalAlert level=\"danger\" href=\"/notice/1024\" linkTitle=\"집중호우 대응 안내\">\n *   집중호우로 일부 민원 처리가 지연되고 있습니다.\n * </CriticalAlert>\n *\n * 자세히: docs/krds/09-부품-노트.md#긴급공지\n */\n\n/**\n * 긴급도. `danger` 재난·급작스러운 장애(「긴급」) · `ok` 서비스 중단 사전 예고(「안전」) ·\n * `info` 대부분의 사용자가 알아야 하는 상황(「안내」).\n */\nexport type CriticalAlertLevel = 'danger' | 'ok' | 'info';\n\n/** 긴급도별 기본 레이블. 킷 샘플에 적힌 글자 그대로다. */\nconst DEFAULT_LABEL: Record<CriticalAlertLevel, string> = {\n  danger: '긴급',\n  ok: '안전',\n  info: '안내',\n};\n\nexport type CriticalAlertProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** 긴급도. 기본값 `danger` — 이 부품을 쓸 상황 자체가 긴급 상황이다. */\n  level?: CriticalAlertLevel;\n  /** 배지 글자. 생략하면 긴급도별 기본값(긴급/안전/안내). 감추지 마라 — 아이콘만으로는 안 읽힌다. */\n  label?: string;\n  /** 공지 내용. 한 줄로 쓴다 — 킷이 두 줄에서 잘라낸다. */\n  children: ReactNode;\n  /** 상세 화면 링크. 규격상 하나만 둘 수 있다. */\n  href?: string;\n  /** 링크 글자. 기본 「자세히 보기」. 작은 화면(<768px)에서는 감춰지고 화살표만 남는다. */\n  linkLabel?: ReactNode;\n  /** 링크의 목적지 설명(`title`). 「자세히 보기」만으로는 목적지를 알 수 없으니 문서 제목을 넣는다. */\n  linkTitle?: string;\n  /** 링크 target. `_blank` 면 `title` 에 「새 창 열림」을 덧붙인다. */\n  linkTarget?: ComponentPropsWithRef<'a'>['target'];\n};\n\nexport function CriticalAlert({\n  level = 'danger',\n  label,\n  children,\n  href,\n  linkLabel = '자세히 보기',\n  linkTitle,\n  linkTarget,\n  className,\n  // 접근성 가이드: 「긴급 공지 섹션에 role=\"banner\" 를 사용하여 배너 역할을 부여」.\n  // 킷 샘플에는 없고 가이드가 요구한 것이다. 페이지에 <header> 가 이미 있으면 banner\n  // 랜드마크가 둘이 되므로 이름을 붙여 구분한다(aria-label 은 우리가 덧댄 것).\n  role = 'banner',\n  'aria-label': ariaLabel = '긴급 공지',\n  ...rest\n}: CriticalAlertProps) {\n  const newWindow = linkTarget === '_blank';\n  const title = linkTitle\n    ? newWindow\n      ? `${linkTitle} (새 창 열림)`\n      : linkTitle\n    : newWindow\n      ? '새 창 열림'\n      : undefined;\n\n  return (\n    // `.main-urgent-wrap` 은 킷 CSS 에 없다(위 주석 참고) — 전폭만 Tailwind 로 준다.\n    <div className={cx('w-full', className)} role={role} aria-label={ariaLabel} {...rest}>\n      <ul className=\"krds-critical-alerts\">\n        {/* 규격상 항목은 하나뿐이다. 늘리지 마라. */}\n        <li>\n          <div className=\"critical-ban\">\n            {/* 아이콘은 이 배지의 ::before 다. 안에 <i> 나 sr-only 를 넣지 마라. */}\n            <span className={cx('critical-badge', level)}>{label ?? DEFAULT_LABEL[level]}</span>\n            <p className=\"critical-txt\">{children}</p>\n            {href && (\n              <a\n                href={href}\n                className=\"krds-btn medium link basic\"\n                target={linkTarget}\n                title={title}\n              >\n                {/* 킷의 `m-hide`(모바일 숨김)가 CSS 에 없어 Tailwind 로 대신한다. */}\n                <span className=\"hidden md:inline\">{linkLabel}</span>\n                <i className=\"svg-icon ico-angle right\" aria-hidden=\"true\" />\n              </a>\n            )}\n          </div>\n        </li>\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"AAkFY,cAGE,YAHF;AAjFZ,SAAS,UAAU;AAyBnB,MAAM,gBAAoD;AAAA,EACxD,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,MAAM;AACR;AAmBO,SAAS,cAAc;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAIA,OAAO;AAAA,EACP,cAAc,YAAY;AAAA,EAC1B,GAAG;AACL,GAAuB;AACrB,QAAM,YAAY,eAAe;AACjC,QAAM,QAAQ,YACV,YACE,GAAG,SAAS,kCACZ,YACF,YACE,+BACA;AAEN;AAAA;AAAA,IAEE,oBAAC,SAAI,WAAW,GAAG,UAAU,SAAS,GAAG,MAAY,cAAY,WAAY,GAAG,MAC9E,8BAAC,QAAG,WAAU,wBAEZ,8BAAC,QACC,+BAAC,SAAI,WAAU,gBAEb;AAAA,0BAAC,UAAK,WAAW,GAAG,kBAAkB,KAAK,GAAI,mBAAS,cAAc,KAAK,GAAE;AAAA,MAC7E,oBAAC,OAAE,WAAU,gBAAgB,UAAS;AAAA,MACrC,QACC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UACV,QAAQ;AAAA,UACR;AAAA,UAGA;AAAA,gCAAC,UAAK,WAAU,oBAAoB,qBAAU;AAAA,YAC9C,oBAAC,OAAE,WAAU,4BAA2B,eAAY,QAAO;AAAA;AAAA;AAAA,MAC7D;AAAA,OAEJ,GACF,GACF,GACF;AAAA;AAEJ;","names":[]}