moru-krds-react 0.1.0

package/dist/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/toast/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { cx } from '../lib/krds';\n\n/**\n * 토스트 — 킷에 없다. KRDS 토큰으로 그리는 보충 부품이다.\n *\n * 저장·삭제 결과를 한 줄로 알리고 스스로 사라진다. `ToastProvider` 를 **레이아웃 한 곳에** 두고\n * 화면에서는 `useToast()` 로 띄운다.\n * **한 줄 짧은 문장만** 담는다 — 두 줄 이상 설명은 `ui/modal`, 되돌리기 같은 행동이 붙으면 스낵바다.\n * 폼 필드의 오류·성공은 토스트가 아니라 `ui/field` 의 인라인 문구다.\n * 재난·장애는 `ui/critical-alert`, 늘 떠 있는 안내는 `ui/alert` 다.\n * `duration: 0` 이면 자동으로 사라지지 않는다(닫기 단추로만 닫힌다).\n *\n * @example\n * // 레이아웃\n * <ToastProvider><App /></ToastProvider>\n * // 화면\n * const toast = useToast();\n * toast.success('저장했습니다.');\n * toast.error('저장하지 못했습니다.');\n *\n * 자세히: docs/krds/09-부품-노트.md#토스트\n */\n\n/** 색조. 킷 상태 아이콘이 셋뿐이라 세 가지다 — 「주의·경고형」은 `danger` 를 쓴다. */\nexport type ToastTone = 'information' | 'success' | 'danger';\n\n/** 색조 → 킷 아이콘. 킷의 `form-hint-*` 가 쓰는 짝 그대로다. */\nconst TONE_ICON: Record<ToastTone, string> = {\n  information: 'ico-information-fill',\n  success: 'ico-success-fill',\n  danger: 'ico-error-fill',\n};\n\n/** 색조 → 테두리색. 의미 토큰이라 선명한 화면 모드도 따라간다. */\nconst TONE_BORDER: Record<ToastTone, string> = {\n  information: 'border-information-line',\n  success: 'border-success-line',\n  danger: 'border-danger-line',\n};\n\n/** 가이드의 권장 노출 시간(ms). 정보형 2~3초 · 주의·경고형 3~4초 중 상한이다. */\nconst DEFAULT_DURATION: Record<ToastTone, number> = {\n  information: 3000,\n  success: 3000,\n  danger: 4000,\n};\n\n/** 사라지는 동안의 시간(ms). 아래 `duration-200` 과 짝이라 한쪽만 바꾸면 어긋난다. */\nconst LEAVE_MS = 200;\n\n/* ────────────────────────────────────────────────────────────────────────\n * 토스트 한 줄\n * ──────────────────────────────────────────────────────────────────── */\n\nexport type ToastProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {\n  /** 색조. 기본 `information`. */\n  tone?: ToastTone;\n  /** 한 줄 메시지. **일부러 `string` 이다** — 더 길거나 링크가 붙으면 토스트가 아니다. */\n  children: string;\n  /** 닫기 단추를 누름. 주지 않으면 닫기 단추를 그리지 않는다. */\n  onClose?: () => void;\n  /** 닫기 단추의 스크린리더 이름. 아이콘뿐이라 이 문구가 없으면 읽을 것이 없다. */\n  closeLabel?: string;\n};\n\n/**\n * 토스트 막대 하나. 보통은 `useToast()` 로 띄우고 이것을 직접 쓰지 않는다.\n * **직접 쓰면 라이브 영역이 아니다** — 소리로는 알려지지 않는다.\n */\nexport function Toast({\n  tone = 'information',\n  children,\n  onClose,\n  closeLabel = '알림 닫기',\n  className,\n  ...rest\n}: ToastProps) {\n  return (\n    <div\n      data-tone={tone}\n      className={cx(\n        'flex max-w-full items-center gap-2 rounded-lg border bg-surface px-4 py-3 text-sm text-fg',\n        // 킷 모달의 그림자 토큰 그대로(`--krds-modal--wrap-shadow`). 우리 눈금에 그림자 단계가 없어 값으로 적는다.\n        'shadow-[0_0_0.2rem_0_var(--krds-light-color-alpha-shadow2),0_1.6rem_2.4rem_0_var(--krds-light-color-alpha-shadow3)]',\n        TONE_BORDER[tone],\n        className,\n      )}\n      {...rest}\n    >\n      {/* 색조는 아이콘과 테두리가 나른다. 글자는 본문색 그대로 둔다 — 한 줄 문장이라 색까지 입히면 읽기 나빠진다. */}\n      <i className={cx('svg-icon shrink-0', TONE_ICON[tone])} aria-hidden=\"true\" />\n      <p className=\"m-0 min-w-0 flex-1\">{children}</p>\n      {onClose && (\n        // 킷 아이콘 버튼 규격 그대로: `krds-btn icon` + sr-only 이름 + `ico-popup-close`(24px 정사각).\n        <button type=\"button\" className=\"krds-btn medium icon shrink-0\" onClick={onClose}>\n          <span className=\"sr-only\">{closeLabel}</span>\n          <i className=\"svg-icon ico-popup-close\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\n/* ────────────────────────────────────────────────────────────────────────\n * 띄우고 지우는 쪽\n * ──────────────────────────────────────────────────────────────────── */\n\nexport type ToastOptions = {\n  /** 색조. 기본 `information`. */\n  tone?: ToastTone;\n  /** 노출 시간(ms). 생략하면 색조별 권장값. **`0` 이면 자동으로 사라지지 않는다.** */\n  duration?: number;\n  /** 닫기 단추의 스크린리더 이름. */\n  closeLabel?: string;\n};\n\ntype ToastEntry = Required<Pick<ToastOptions, 'tone' | 'duration'>> & {\n  id: string;\n  message: string;\n  closeLabel?: string;\n  /** 사라지는 중. 화면에서 지우기 전 `LEAVE_MS` 동안만 참이다. */\n  leaving?: boolean;\n};\n\nexport type ToastApi = {\n  /** 토스트를 띄우고 식별자를 돌려준다. */\n  show(message: string, options?: ToastOptions): string;\n  /** `show(message, { tone: 'information' })` */\n  info(message: string, options?: Omit<ToastOptions, 'tone'>): string;\n  /** `show(message, { tone: 'success' })` — 저장·삭제 성공 */\n  success(message: string, options?: Omit<ToastOptions, 'tone'>): string;\n  /** `show(message, { tone: 'danger' })` — 실패. 되풀이되면 토스트 말고 모달로 낸다. */\n  error(message: string, options?: Omit<ToastOptions, 'tone'>): string;\n  /** 하나를 지운다. */\n  dismiss(id: string): void;\n  /** 전부 즉시 지운다(사라지는 동작 없음). 화면을 옮길 때 쓴다. */\n  dismissAll(): void;\n};\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\n/** 토스트를 띄운다. `<ToastProvider>` 안에서만 쓸 수 있다. */\nexport function useToast(): ToastApi {\n  const api = useContext(ToastContext);\n  if (!api) {\n    throw new Error('useToast() 는 <ToastProvider> 안에서만 쓸 수 있다. 레이아웃에 넣었는지 확인하라.');\n  }\n  return api;\n}\n\nexport type ToastProviderProps = {\n  /** 앱 전체. */\n  children?: ReactNode;\n  /** 한 번에 띄울 최대 개수. 기본 3 — 넘으면 오래된 것부터 사라진다. */\n  max?: number;\n  /** 뷰포트에 붙는다. 하단 고정 요소와 겹칠 때 `bottom-*` 을 올리는 자리. */\n  className?: string;\n};\n\n/**\n * 토스트 뷰포트 + 띄우는 함수를 공급한다. **레이아웃 한 곳에만 둔다.**\n * 뷰포트는 비어 있어도 그려진다 — 라이브 영역이 메시지보다 먼저 있어야 낭독된다.\n */\nexport function ToastProvider({ children, max = 3, className }: ToastProviderProps) {\n  const [items, setItems] = useState<ToastEntry[]>([]);\n  /** 포인터가 올라가 있거나 안에 초점이 있으면 참. 이때 자동 사라짐을 멈춘다(WCAG 2.2.1). */\n  const [paused, setPaused] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const seq = useRef(0);\n  const leaveTimers = useRef(new Map<string, number>());\n\n  useEffect(() => setMounted(true), []);\n\n  // 화면을 떠날 때 남은 타이머를 정리한다.\n  useEffect(() => {\n    const timers = leaveTimers.current;\n    return () => {\n      timers.forEach((t) => window.clearTimeout(t));\n      timers.clear();\n    };\n  }, []);\n\n  const dismiss = useCallback((id: string) => {\n    if (leaveTimers.current.has(id)) return; // 이미 사라지는 중\n    setItems((list) => list.map((it) => (it.id === id ? { ...it, leaving: true } : it)));\n    const timer = window.setTimeout(() => {\n      leaveTimers.current.delete(id);\n      setItems((list) => list.filter((it) => it.id !== id));\n    }, LEAVE_MS);\n    leaveTimers.current.set(id, timer);\n  }, []);\n\n  const api = useMemo<ToastApi>(() => {\n    const show = (message: string, options: ToastOptions = {}) => {\n      const tone = options.tone ?? 'information';\n      seq.current += 1;\n      const id = `toast-${seq.current}`;\n      const entry: ToastEntry = {\n        id,\n        message,\n        tone,\n        duration: options.duration ?? DEFAULT_DURATION[tone],\n        closeLabel: options.closeLabel,\n      };\n      // 넘치면 오래된 것부터 버린다.\n      setItems((list) => [...list, entry].slice(-max));\n      return id;\n    };\n    return {\n      show,\n      info: (message, options) => show(message, { ...options, tone: 'information' }),\n      success: (message, options) => show(message, { ...options, tone: 'success' }),\n      error: (message, options) => show(message, { ...options, tone: 'danger' }),\n      dismiss,\n      dismissAll: () => {\n        leaveTimers.current.forEach((t) => window.clearTimeout(t));\n        leaveTimers.current.clear();\n        setItems([]);\n      },\n    };\n  }, [dismiss, max]);\n\n  return (\n    <ToastContext.Provider value={api}>\n      {children}\n      {mounted &&\n        createPortal(\n          <div\n            role=\"status\"\n            aria-live=\"polite\"\n            // 기본값이 true 라 토스트가 하나 늘 때마다 영역 전체가 다시 낭독된다.\n            aria-atomic=\"false\"\n            className={cx(\n              // 가이드: 「토스트는 화면 중앙 하단에 표시한다」.\n              'pointer-events-none fixed bottom-10 left-1/2 z-[1030] -translate-x-1/2',\n              'flex w-full max-w-[48rem] flex-col items-center gap-2 px-4',\n              className,\n            )}\n            // 포인터가 올라가거나 초점이 들어오면 자동 사라짐을 멈춘다(WCAG 2.2.1).\n            onMouseEnter={() => setPaused(true)}\n            onMouseLeave={() => setPaused(false)}\n            onFocus={() => setPaused(true)}\n            onBlur={() => setPaused(false)}\n          >\n            {items.map((item) => (\n              <ToastRow key={item.id} item={item} paused={paused} onDismiss={dismiss} />\n            ))}\n          </div>,\n          document.body,\n        )}\n    </ToastContext.Provider>\n  );\n}\n\n/** 뷰포트 안의 토스트 한 줄. 자기 타이머와 나타남/사라짐만 맡는다. */\nfunction ToastRow({\n  item,\n  paused,\n  onDismiss,\n}: {\n  item: ToastEntry;\n  paused: boolean;\n  onDismiss: (id: string) => void;\n}) {\n  const [entered, setEntered] = useState(false);\n\n  // 붙자마자 한 프레임 뒤에 켠다 — 같은 프레임에 바꾸면 전이가 일어나지 않는다.\n  useEffect(() => {\n    const frame = window.requestAnimationFrame(() => setEntered(true));\n    return () => window.cancelAnimationFrame(frame);\n  }, []);\n\n  useEffect(() => {\n    if (paused || item.leaving || !item.duration) return;\n    const timer = window.setTimeout(() => onDismiss(item.id), item.duration);\n    return () => window.clearTimeout(timer);\n    // 멈췄다 풀리면 시간을 처음부터 다시 센다 — 남은 시간을 이어 세지 않는다.\n    // 읽던 사람에게 더 넉넉한 쪽이라 그대로 뒀다.\n  }, [paused, item.leaving, item.duration, item.id, onDismiss]);\n\n  const shown = entered && !item.leaving;\n\n  return (\n    <Toast\n      tone={item.tone}\n      closeLabel={item.closeLabel}\n      onClose={() => onDismiss(item.id)}\n      className={cx(\n        // 뷰포트가 pointer-events-none 이라 막대에서 되살린다 — 아래 화면을 가리지 않기 위해서다.\n        'pointer-events-auto transition duration-200 ease-out motion-reduce:transition-none',\n        shown ? 'translate-y-0 opacity-100' : 'translate-y-2 opacity-0',\n      )}\n    >\n      {item.message}\n    </Toast>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/tooltip/index.d.ts

@@ -0,0 +1,84 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KrdsIcon, type KrdsSize } from '../lib/krds';
+/** 버튼 위계. `ui/button` 의 `ButtonVariant` 와 같은 값이다(부품 간 의존을 만들지 않으려고 따로 적었다). */
+export type TooltipVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';
+type TooltipBaseProps = {
+    /** 팝오버 본문. **150자 내외**로 쓴다 — 더 길면 맥락적 도움말·도움 패널·별도 페이지다. */
+    content: ReactNode;
+    /** 기본 medium(48px). 같은 줄의 입력칸·버튼과 같은 값을 준다. */
+    size?: KrdsSize;
+    /** 트리거 버튼의 위계. */
+    variant?: TooltipVariant;
+    /** 킷 아이콘 이름(`ico-` 뺀 것). 예: `help` · `information` */
+    icon?: KrdsIcon;
+    /** 아이콘 회전. 방향은 이름의 일부가 아니라 별도 클래스다 — `icon="angle right"` 로 쓰지 마라. */
+    iconDirection?: 'up' | 'down' | 'left' | 'right';
+    /** 아이콘 위치. 기본 `end`. */
+    iconPosition?: 'start' | 'end';
+    /** 테두리 있는 아이콘 버튼. `iconOnly` 일 때만 뜻이 있다. */
+    bordered?: boolean;
+    /** 박스형 — 흰 바탕에 테두리, 줄바꿈 허용. 세로 방향으로 뜬다. */
+    box?: boolean;
+    /** 인라인형을 세로(위/아래) 방향으로 띄운다. */
+    vertical?: boolean;
+    /** 팝오버 맨 앞에 숨겨 넣을 트리거 이름. 생략하면 트리거의 글자에서 읽어 온다. */
+    name?: string;
+    /** 트리거 버튼에 붙일 클래스. */
+    className?: string;
+    /** 트리거 글자. `iconOnly` 가 아닐 때. */
+    children?: ReactNode;
+};
+export type TooltipProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'content'> & TooltipBaseProps & {
+    iconOnly?: false;
+};
+export type IconTooltipProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'content'> & TooltipBaseProps & {
+    iconOnly: true;
+    /** 스크린리더가 읽을 버튼 이름. **툴팁 글월은 이름의 대체물이 아니다**(가이드 원문). */
+    label: string;
+    icon: KrdsIcon;
+};
+/**
+ * 툴팁 — KRDS `krds-tooltip`. hover/focus 로 뜨는 부가 설명이다.
+ *
+ * **팝오버 안에 링크·버튼을 넣지 마라** — hover 로만 뜨는 영역은 마우스를 옮기는 동안 사라진다
+ * (대화형 요소가 필요하면 {@link ContextualHelp}).
+ * **필수 정보를 툴팁에만 담지 마라** — 터치 기기에는 hover 가 없다.
+ * `disabled` 트리거에는 붙지 않는다(마우스·초점 이벤트가 오지 않는다).
+ */
+export declare function Tooltip(props: TooltipProps | IconTooltipProps): import("react").JSX.Element;
+/** 팝오버가 붙는 세로 방향. */
+export type ContextualHelpSide = 'top' | 'bottom';
+/** 팝오버가 붙는 가로 정렬. */
+export type ContextualHelpAlign = 'left' | 'center' | 'right';
+export type ContextualHelpProps = Omit<ComponentPropsWithRef<'div'>, 'title'> & {
+    /** 아이콘 버튼의 이름. **고유하고 구체적으로** — 「도움말」 여러 개보다 「신청 자격 도움말」이 맞다. */
+    label: string;
+    /** 팝오버 제목. 한 줄로 잘린다. */
+    heading?: ReactNode;
+    /** 아이콘 버튼 옆에 놓이는 글자. 대개 그 도움말이 설명하는 항목의 이름이다. */
+    text?: ReactNode;
+    /** 킷 아이콘 이름. 기본 `tooltip` — 정보 제공이면 `information`, 과업 도움이면 `help`. */
+    icon?: KrdsIcon;
+    /** 팝오버가 붙는 세로 방향. 기본 `top`. */
+    side?: ContextualHelpSide;
+    /** 팝오버가 붙는 가로 정렬. 기본 `left`. */
+    align?: ContextualHelpAlign;
+    /** 아이콘 버튼 크기. 기본 medium(48px). */
+    buttonSize?: KrdsSize;
+    /** 닫기 버튼 이름. */
+    closeLabel?: string;
+    /** 제목 태그 단계. 기본 4 — 문서 구조에 맞춰 고른다. */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** 팝오버 본문. 링크는 `<div className="btn-wrap">` 안에 넣는다. */
+    children?: ReactNode;
+};
+/**
+ * 맥락적 도움말 — KRDS `krds-contextual-help`. click 으로 열리고 **팝오버 안에 링크를 둘 수 있다.**
+ *
+ * **스스로 열리면 안 된다**(규격 금지) — 그래서 `open`·`defaultOpen` 이 일부러 없다.
+ * 닫는 방법은 셋(닫기 버튼 · Esc · 바깥 누르기)이고, 열면 초점이 팝오버 안으로 들어간다.
+ * 제목은 한 줄로 잘린다. 한 화면에서 {@link Tooltip} 과 섞어 쓰지 마라.
+ */
+export declare function ContextualHelp({ label, heading, text, icon, side, align, buttonSize, closeLabel, headingLevel, className, children, ...rest }: ContextualHelpProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":"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"}

package/dist/tooltip/index.js

@@ -0,0 +1,329 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { cx } from "../lib/krds.js";
+const TOOLTIP_GAP = 12;
+const MOBILE_MAX = 767;
+const NARROW_MAX = 420;
+const CONTEXTUAL_FOCUSABLE = 'a, button, [tabindex="0"], input, textarea, select';
+const useIsoLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function computeTooltipPosition(trigger, popover, vertical) {
+  const { clientHeight: popH, clientWidth: popW } = popover;
+  const rect = trigger.getBoundingClientRect();
+  const halfW = window.innerWidth / 2;
+  const halfH = window.innerHeight / 2;
+  const isVertical = vertical || window.innerWidth <= MOBILE_MAX;
+  const cls = [];
+  let top;
+  let left;
+  if (isVertical) {
+    if (rect.top + rect.height > halfH) {
+      top = rect.top - popH - TOOLTIP_GAP;
+      cls.push("top");
+    } else {
+      top = rect.top + rect.height + TOOLTIP_GAP;
+      cls.push("bottom");
+    }
+    if (rect.left + rect.width > halfW) {
+      left = rect.right - popW;
+      if (window.innerWidth - (rect.left + rect.width) > popW / 2) {
+        left = rect.left + (rect.width - popW) / 2;
+      } else {
+        cls.push("right");
+      }
+    } else {
+      left = rect.left + (rect.width - popW) / 2;
+      if (left < 0) {
+        left = rect.left;
+        cls.push("left");
+      }
+    }
+  } else {
+    top = rect.top + (rect.height - popH) / 2;
+    if (rect.left + rect.width > halfW) {
+      left = rect.left - popW - TOOLTIP_GAP;
+      cls.push("right");
+    } else {
+      left = rect.right + TOOLTIP_GAP;
+    }
+  }
+  return { top, left, centered: window.innerWidth <= NARROW_MAX, cls: cls.join(" ") };
+}
+function Tooltip(props) {
+  const {
+    content,
+    size = "medium",
+    variant,
+    icon,
+    iconDirection,
+    iconPosition = "end",
+    bordered,
+    box,
+    vertical,
+    name,
+    className,
+    children,
+    type = "button",
+    disabled,
+    ref,
+    onMouseEnter,
+    onMouseLeave,
+    onFocus,
+    onBlur,
+    ...rest
+  } = props;
+  const iconOnly = "iconOnly" in props && props.iconOnly === true;
+  const label = "label" in props ? props.label : void 0;
+  const popoverId = useId();
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState(null);
+  const [autoName, setAutoName] = useState(label ?? "");
+  const setTriggerRef = useCallback(
+    (el) => {
+      triggerRef.current = el;
+      if (typeof ref === "function") ref(el);
+      else if (ref) ref.current = el;
+    },
+    [ref]
+  );
+  useEffect(() => {
+    if (name !== void 0) return;
+    const text = (triggerRef.current?.innerText ?? "").trim();
+    if (text && text !== autoName) setAutoName(text);
+  });
+  useIsoLayoutEffect(() => {
+    if (!open) {
+      setPos(null);
+      return;
+    }
+    const trigger = triggerRef.current;
+    const popover = popoverRef.current;
+    if (!trigger || !popover) return;
+    setPos(computeTooltipPosition(trigger, popover, Boolean(box || vertical)));
+  }, [open, box, vertical]);
+  useEffect(() => {
+    if (!open) return;
+    const close = () => setOpen(false);
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" || event.key === "Esc") close();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [open]);
+  const show = () => !disabled && setOpen(true);
+  const hide = () => setOpen(false);
+  const iconNode = icon ? /* @__PURE__ */ jsx("i", { className: cx(`svg-icon ico-${icon}`, iconDirection), "aria-hidden": "true" }) : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type,
+        ref: setTriggerRef,
+        disabled,
+        className: cx(
+          "krds-btn",
+          size,
+          variant,
+          iconOnly && "icon",
+          iconOnly && bordered && "border",
+          "krds-tooltip",
+          box && "tooltip-box",
+          vertical && "tooltip-vertical",
+          className
+        ),
+        "aria-labelledby": disabled ? void 0 : popoverId,
+        onMouseEnter: (event) => {
+          show();
+          onMouseEnter?.(event);
+        },
+        onMouseLeave: (event) => {
+          hide();
+          onMouseLeave?.(event);
+        },
+        onFocus: (event) => {
+          show();
+          onFocus?.(event);
+        },
+        onBlur: (event) => {
+          hide();
+          onBlur?.(event);
+        },
+        ...rest,
+        children: iconOnly ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+          iconNode
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          iconPosition === "start" && iconNode,
+          children,
+          iconPosition === "end" && iconNode
+        ] })
+      }
+    ),
+    !disabled && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: popoverId,
+        ref: popoverRef,
+        className: cx(
+          "krds-tooltip-popover",
+          open && "active",
+          box && "tooltip-box",
+          vertical && "tooltip-vertical",
+          open && pos?.cls
+        ),
+        "aria-hidden": "true",
+        style: open && pos ? { top: `${pos.top}px`, left: pos.centered ? "50%" : `${pos.left}px` } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: name ?? autoName }),
+          " ",
+          content
+        ]
+      }
+    )
+  ] });
+}
+function adjustContextualPopover(popover, action) {
+  if (window.innerWidth > MOBILE_MAX) {
+    popover.style.left = "";
+    popover.style.width = "";
+    return;
+  }
+  const raw = getComputedStyle(document.documentElement).getPropertyValue(
+    "--krds-contents-padding-x"
+  );
+  const pad = Number.parseFloat(raw) || 0;
+  const offsetLeft = action.getBoundingClientRect().left - pad;
+  popover.style.left = `${-offsetLeft}px`;
+  popover.style.width = `${document.body.clientWidth - pad * 2}px`;
+}
+function ContextualHelp({
+  label,
+  heading,
+  text,
+  icon = "tooltip",
+  side = "top",
+  align = "left",
+  buttonSize = "medium",
+  closeLabel = "\uB2EB\uAE30",
+  headingLevel = 4,
+  className,
+  children,
+  ...rest
+}) {
+  const actionRef = useRef(null);
+  const buttonRef = useRef(null);
+  const popoverRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const close = useCallback((refocus) => {
+    setOpen(false);
+    if (refocus) buttonRef.current?.focus();
+  }, []);
+  useIsoLayoutEffect(() => {
+    const popover = popoverRef.current;
+    const action = actionRef.current;
+    if (!popover || !action) return;
+    if (!open) {
+      popover.style.left = "";
+      popover.style.width = "";
+      return;
+    }
+    adjustContextualPopover(popover, action);
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    popoverRef.current?.querySelector(CONTEXTUAL_FOCUSABLE)?.focus();
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const action = actionRef.current;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape" || event.key === "Esc") close(true);
+    };
+    const onDocumentClick = (event) => {
+      if (!action?.contains(event.target)) setOpen(false);
+    };
+    const onFocusOut = (event) => {
+      const next = event.relatedTarget;
+      if (next && action?.contains(next)) return;
+      setOpen(false);
+    };
+    const onResize = () => {
+      if (popoverRef.current && action) adjustContextualPopover(popoverRef.current, action);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("click", onDocumentClick);
+    action?.addEventListener("focusout", onFocusOut);
+    window.addEventListener("resize", onResize);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("click", onDocumentClick);
+      action?.removeEventListener("focusout", onFocusOut);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, close]);
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxs("div", { className: cx("krds-contextual-help", side, align, className), ...rest, children: [
+    text != null && /* @__PURE__ */ jsx("p", { className: "tooltip-txt", children: text }),
+    /* @__PURE__ */ jsxs("div", { className: "tooltip-action", ref: actionRef, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          ref: buttonRef,
+          className: cx("krds-btn", buttonSize, "icon", "tooltip-btn"),
+          "aria-expanded": open,
+          onClick: () => open ? close(true) : setOpen(true),
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+            /* @__PURE__ */ jsx("i", { className: `svg-icon ico-${icon}`, "aria-hidden": "true" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "tooltip-popover",
+          role: "tooltip",
+          ref: popoverRef,
+          style: { display: open ? "block" : void 0 },
+          children: [
+            heading != null && /* @__PURE__ */ jsx(Heading, { className: "tooltip-title", children: heading }),
+            /* @__PURE__ */ jsx("div", { className: "tooltip-contents", children }),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "krds-btn xsmall icon tooltip-close",
+                onClick: () => close(true),
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel }),
+                  /* @__PURE__ */ jsx("i", { className: "svg-icon ico-modal-close", "aria-hidden": "true" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ContextualHelp,
+  Tooltip
+};
+//# sourceMappingURL=index.js.map

package/dist/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tooltip/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent as ReactFocusEvent,\n  type MouseEvent as ReactMouseEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport { cx, type KrdsIcon, type KrdsSize } from '../lib/krds';\n\n/**\n * 툴팁 — KRDS `krds-tooltip` · 맥락적 도움말 — KRDS `krds-contextual-help`.\n *\n * 갈림길은 하나다 — **팝오버 안에 링크·버튼이 필요하면 툴팁이 아니라 맥락적 도움말이다.**\n * 툴팁은 hover/focus 로 뜨고 맥락적 도움말은 click 으로 연다.\n * **한 화면에 둘을 섞어 쓰지 마라**(가이드 원문) — 버튼이 똑같이 생겼는데 상호작용이 달라진다.\n * 본문은 150자 내외로 쓰고, 그보다 길면 도움 패널이나 별도 도움말 페이지로 보낸다.\n * `title` 속성과 겹쳐 쓰지 않는다 — 같은 말이 두 번 읽힌다.\n *\n * @example\n * <Tooltip iconOnly icon=\"help\" label=\"처리 기간 도움말\" content=\"접수일로부터 10일 이내\" />\n * <Tooltip variant=\"text\" icon=\"angle\" iconDirection=\"right\" content=\"예상 처리 기간입니다.\">\n *   처리 기간\n * </Tooltip>\n * <ContextualHelp label=\"신청 자격 도움말\" heading=\"신청 자격\" text=\"신청 자격\">\n *   <p>만 18세 이상이면 신청할 수 있습니다.</p>\n *   <div className=\"btn-wrap\">\n *     <LinkButton size=\"xsmall\" href=\"/help/eligibility\">자세히 보기</LinkButton>\n *   </div>\n * </ContextualHelp>\n *\n * 자세히: docs/krds/09-부품-노트.md#툴팁\n */\n\n/** 킷 JS 의 `tooltipGap`. CSS 토큰이 아니라 코드 상수다. */\nconst TOOLTIP_GAP = 12;\n\n/** 킷 CSS 의 좁은 화면 경계. */\nconst MOBILE_MAX = 767;\n\n/** 킷 CSS 가 팝오버를 화면 폭에 맞춰 버리는 경계. 이때는 좌표를 계산하지 않는다. */\nconst NARROW_MAX = 420;\n\n/** 팝오버를 열 때 초점을 줄 첫 대화형 요소. 킷 JS 의 선택자 그대로다. */\nconst CONTEXTUAL_FOCUSABLE = 'a, button, [tabindex=\"0\"], input, textarea, select';\n\n/** SSR 경고를 피하려고 갈아 끼운다. 위치 계산은 그리기 전에 끝나야 좌상단에 번쩍이지 않는다. */\nconst useIsoLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;\n\n/** 버튼 위계. `ui/button` 의 `ButtonVariant` 와 같은 값이다(부품 간 의존을 만들지 않으려고 따로 적었다). */\nexport type TooltipVariant = 'primary' | 'secondary' | 'tertiary' | 'text' | 'link';\n\n/** 계산된 팝오버 위치. `cls` 는 킷이 말풍선 꼬리를 붙일 때 쓰는 방향 클래스다. */\ntype TooltipPosition = { top: number; left: number; centered: boolean; cls: string };\n\n/** 팝오버 좌표. 킷 JS 의 `calculateTooltipPosition()` 이식. 좌표가 뷰포트 기준이라 스크롤에 닫는다. */\nfunction computeTooltipPosition(\n  trigger: HTMLElement,\n  popover: HTMLElement,\n  vertical: boolean,\n): TooltipPosition {\n  const { clientHeight: popH, clientWidth: popW } = popover;\n  const rect = trigger.getBoundingClientRect();\n  const halfW = window.innerWidth / 2;\n  const halfH = window.innerHeight / 2;\n  // 좁은 화면에서는 방향 지정과 무관하게 세로형으로 떨어뜨린다(킷 JS 의 isMobile 분기).\n  const isVertical = vertical || window.innerWidth <= MOBILE_MAX;\n  const cls: string[] = [];\n  let top: number;\n  let left: number;\n\n  if (isVertical) {\n    if (rect.top + rect.height > halfH) {\n      top = rect.top - popH - TOOLTIP_GAP; // 화면 아래쪽 요소 → 위로 띄운다\n      cls.push('top');\n    } else {\n      top = rect.top + rect.height + TOOLTIP_GAP;\n      cls.push('bottom');\n    }\n    if (rect.left + rect.width > halfW) {\n      left = rect.right - popW; // 오른쪽 정렬\n      // 오른쪽에 여유가 있으면 가운데로 되돌린다\n      if (window.innerWidth - (rect.left + rect.width) > popW / 2) {\n        left = rect.left + (rect.width - popW) / 2;\n      } else {\n        cls.push('right');\n      }\n    } else {\n      left = rect.left + (rect.width - popW) / 2;\n      if (left < 0) {\n        left = rect.left; // 왼쪽 공간 부족 보정\n        cls.push('left');\n      }\n    }\n  } else {\n    // 가로형: 트리거 옆에 세로 가운데를 맞춰 붙인다\n    top = rect.top + (rect.height - popH) / 2;\n    if (rect.left + rect.width > halfW) {\n      left = rect.left - popW - TOOLTIP_GAP; // 왼쪽에 붙인다\n      cls.push('right'); // 꼬리는 팝오버의 오른쪽에 난다\n    } else {\n      left = rect.right + TOOLTIP_GAP;\n    }\n  }\n\n  return { top, left, centered: window.innerWidth <= NARROW_MAX, cls: cls.join(' ') };\n}\n\ntype TooltipBaseProps = {\n  /** 팝오버 본문. **150자 내외**로 쓴다 — 더 길면 맥락적 도움말·도움 패널·별도 페이지다. */\n  content: ReactNode;\n  /** 기본 medium(48px). 같은 줄의 입력칸·버튼과 같은 값을 준다. */\n  size?: KrdsSize;\n  /** 트리거 버튼의 위계. */\n  variant?: TooltipVariant;\n  /** 킷 아이콘 이름(`ico-` 뺀 것). 예: `help` · `information` */\n  icon?: KrdsIcon;\n  /** 아이콘 회전. 방향은 이름의 일부가 아니라 별도 클래스다 — `icon=\"angle right\"` 로 쓰지 마라. */\n  iconDirection?: 'up' | 'down' | 'left' | 'right';\n  /** 아이콘 위치. 기본 `end`. */\n  iconPosition?: 'start' | 'end';\n  /** 테두리 있는 아이콘 버튼. `iconOnly` 일 때만 뜻이 있다. */\n  bordered?: boolean;\n  /** 박스형 — 흰 바탕에 테두리, 줄바꿈 허용. 세로 방향으로 뜬다. */\n  box?: boolean;\n  /** 인라인형을 세로(위/아래) 방향으로 띄운다. */\n  vertical?: boolean;\n  /** 팝오버 맨 앞에 숨겨 넣을 트리거 이름. 생략하면 트리거의 글자에서 읽어 온다. */\n  name?: string;\n  /** 트리거 버튼에 붙일 클래스. */\n  className?: string;\n  /** 트리거 글자. `iconOnly` 가 아닐 때. */\n  children?: ReactNode;\n};\n\nexport type TooltipProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'content'> &\n  TooltipBaseProps & {\n    iconOnly?: false;\n  };\n\nexport type IconTooltipProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'content'> &\n  TooltipBaseProps & {\n    iconOnly: true;\n    /** 스크린리더가 읽을 버튼 이름. **툴팁 글월은 이름의 대체물이 아니다**(가이드 원문). */\n    label: string;\n    icon: KrdsIcon;\n  };\n\n/**\n * 툴팁 — KRDS `krds-tooltip`. hover/focus 로 뜨는 부가 설명이다.\n *\n * **팝오버 안에 링크·버튼을 넣지 마라** — hover 로만 뜨는 영역은 마우스를 옮기는 동안 사라진다\n * (대화형 요소가 필요하면 {@link ContextualHelp}).\n * **필수 정보를 툴팁에만 담지 마라** — 터치 기기에는 hover 가 없다.\n * `disabled` 트리거에는 붙지 않는다(마우스·초점 이벤트가 오지 않는다).\n */\nexport function Tooltip(props: TooltipProps | IconTooltipProps) {\n  const {\n    content,\n    size = 'medium',\n    variant,\n    icon,\n    iconDirection,\n    iconPosition = 'end',\n    bordered,\n    box,\n    vertical,\n    name,\n    className,\n    children,\n    type = 'button',\n    disabled,\n    ref,\n    onMouseEnter,\n    onMouseLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  } = props as TooltipProps & Partial<IconTooltipProps>;\n\n  const iconOnly = 'iconOnly' in props && props.iconOnly === true;\n  const label = 'label' in props ? props.label : undefined;\n\n  const popoverId = useId();\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const [open, setOpen] = useState(false);\n  const [pos, setPos] = useState<TooltipPosition | null>(null);\n  // 트리거 글자 사본. `name` 을 주면 안 읽는다.\n  const [autoName, setAutoName] = useState(label ?? '');\n\n  // 밖에서 온 ref 와 부품 ref 를 한 요소에 함께 건다.\n  const setTriggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      triggerRef.current = el;\n      if (typeof ref === 'function') ref(el);\n      else if (ref) (ref as { current: HTMLButtonElement | null }).current = el;\n    },\n    [ref],\n  );\n\n  // 트리거 글자 읽기(팝오버가 이름을 갈아 끼우므로 사본이 필요하다). 값이 같으면 아무것도 하지 않는다.\n  useEffect(() => {\n    if (name !== undefined) return;\n    const text = (triggerRef.current?.innerText ?? '').trim();\n    if (text && text !== autoName) setAutoName(text);\n  });\n\n  // 열린 뒤 그리기 전에 좌표를 잡는다. 팝오버는 `.active` 라야 크기를 잴 수 있다.\n  useIsoLayoutEffect(() => {\n    if (!open) {\n      setPos(null);\n      return;\n    }\n    const trigger = triggerRef.current;\n    const popover = popoverRef.current;\n    if (!trigger || !popover) return;\n    setPos(computeTooltipPosition(trigger, popover, Boolean(box || vertical)));\n  }, [open, box, vertical]);\n\n  // 닫는 사건들 — Esc · 스크롤 · 크기 변경.\n  useEffect(() => {\n    if (!open) return;\n    const close = () => setOpen(false);\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' || event.key === 'Esc') close();\n    };\n    document.addEventListener('keydown', onKeyDown);\n    // 안쪽 스크롤 상자에서도 좌표가 낡으므로 캡처로 넓혀 잡았다.\n    window.addEventListener('scroll', close, true);\n    window.addEventListener('resize', close);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      window.removeEventListener('scroll', close, true);\n      window.removeEventListener('resize', close);\n    };\n  }, [open]);\n\n  const show = () => !disabled && setOpen(true);\n  const hide = () => setOpen(false);\n\n  const iconNode = icon ? (\n    <i className={cx(`svg-icon ico-${icon}`, iconDirection)} aria-hidden=\"true\" />\n  ) : null;\n\n  return (\n    <>\n      <button\n        type={type}\n        ref={setTriggerRef}\n        disabled={disabled}\n        className={cx(\n          'krds-btn',\n          size,\n          variant,\n          iconOnly && 'icon',\n          iconOnly && bordered && 'border',\n          'krds-tooltip',\n          box && 'tooltip-box',\n          vertical && 'tooltip-vertical',\n          className,\n        )}\n        // 이름이 팝오버로 갈린다. 팝오버가 없는 disabled 일 때는 걸지 않는다.\n        aria-labelledby={disabled ? undefined : popoverId}\n        onMouseEnter={(event: ReactMouseEvent<HTMLButtonElement>) => {\n          show();\n          onMouseEnter?.(event);\n        }}\n        onMouseLeave={(event: ReactMouseEvent<HTMLButtonElement>) => {\n          hide();\n          onMouseLeave?.(event);\n        }}\n        onFocus={(event: ReactFocusEvent<HTMLButtonElement>) => {\n          show();\n          onFocus?.(event);\n        }}\n        onBlur={(event: ReactFocusEvent<HTMLButtonElement>) => {\n          hide();\n          onBlur?.(event);\n        }}\n        {...rest}\n      >\n        {iconOnly ? (\n          <>\n            <span className=\"sr-only\">{label}</span>\n            {iconNode}\n          </>\n        ) : (\n          <>\n            {iconPosition === 'start' && iconNode}\n            {children}\n            {iconPosition === 'end' && iconNode}\n          </>\n        )}\n      </button>\n      {!disabled && (\n        <div\n          id={popoverId}\n          ref={popoverRef}\n          className={cx(\n            'krds-tooltip-popover',\n            open && 'active',\n            box && 'tooltip-box',\n            vertical && 'tooltip-vertical',\n            open && pos?.cls,\n          )}\n          // 킷이 만드는 팝오버는 늘 aria-hidden 이다 — 소리로는 위 aria-labelledby 로 한 번만 전해진다.\n          aria-hidden=\"true\"\n          style={\n            open && pos\n              ? { top: `${pos.top}px`, left: pos.centered ? '50%' : `${pos.left}px` }\n              : undefined\n          }\n        >\n          <span className=\"sr-only\">{name ?? autoName}</span> {content}\n        </div>\n      )}\n    </>\n  );\n}\n\n/** 팝오버가 붙는 세로 방향. */\nexport type ContextualHelpSide = 'top' | 'bottom';\n\n/** 팝오버가 붙는 가로 정렬. */\nexport type ContextualHelpAlign = 'left' | 'center' | 'right';\n\nexport type ContextualHelpProps = Omit<ComponentPropsWithRef<'div'>, 'title'> & {\n  /** 아이콘 버튼의 이름. **고유하고 구체적으로** — 「도움말」 여러 개보다 「신청 자격 도움말」이 맞다. */\n  label: string;\n  /** 팝오버 제목. 한 줄로 잘린다. */\n  heading?: ReactNode;\n  /** 아이콘 버튼 옆에 놓이는 글자. 대개 그 도움말이 설명하는 항목의 이름이다. */\n  text?: ReactNode;\n  /** 킷 아이콘 이름. 기본 `tooltip` — 정보 제공이면 `information`, 과업 도움이면 `help`. */\n  icon?: KrdsIcon;\n  /** 팝오버가 붙는 세로 방향. 기본 `top`. */\n  side?: ContextualHelpSide;\n  /** 팝오버가 붙는 가로 정렬. 기본 `left`. */\n  align?: ContextualHelpAlign;\n  /** 아이콘 버튼 크기. 기본 medium(48px). */\n  buttonSize?: KrdsSize;\n  /** 닫기 버튼 이름. */\n  closeLabel?: string;\n  /** 제목 태그 단계. 기본 4 — 문서 구조에 맞춰 고른다. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** 팝오버 본문. 링크는 `<div className=\"btn-wrap\">` 안에 넣는다. */\n  children?: ReactNode;\n};\n\n/**\n * 좁은 화면에서 팝오버를 본문 폭에 맞춘다. 킷 JS 이식이되 넓은 화면에서는 인라인 폭을 지우기만 한다\n * (킷 CSS 의 rem 폭이 글자 크기 조정을 따라오기 때문이다).\n */\nfunction adjustContextualPopover(popover: HTMLElement, action: HTMLElement) {\n  // 킷 JS 는 768 로 재서 CSS 의 767 과 1px 어긋난다 — 여기서는 CSS 에 맞춰 767 로 잰다.\n  if (window.innerWidth > MOBILE_MAX) {\n    popover.style.left = '';\n    popover.style.width = '';\n    return;\n  }\n  const raw = getComputedStyle(document.documentElement).getPropertyValue(\n    '--krds-contents-padding-x',\n  );\n  const pad = Number.parseFloat(raw) || 0;\n  const offsetLeft = action.getBoundingClientRect().left - pad;\n  popover.style.left = `${-offsetLeft}px`;\n  popover.style.width = `${document.body.clientWidth - pad * 2}px`;\n}\n\n/**\n * 맥락적 도움말 — KRDS `krds-contextual-help`. click 으로 열리고 **팝오버 안에 링크를 둘 수 있다.**\n *\n * **스스로 열리면 안 된다**(규격 금지) — 그래서 `open`·`defaultOpen` 이 일부러 없다.\n * 닫는 방법은 셋(닫기 버튼 · Esc · 바깥 누르기)이고, 열면 초점이 팝오버 안으로 들어간다.\n * 제목은 한 줄로 잘린다. 한 화면에서 {@link Tooltip} 과 섞어 쓰지 마라.\n */\nexport function ContextualHelp({\n  label,\n  heading,\n  text,\n  icon = 'tooltip',\n  side = 'top',\n  align = 'left',\n  buttonSize = 'medium',\n  closeLabel = '닫기',\n  headingLevel = 4,\n  className,\n  children,\n  ...rest\n}: ContextualHelpProps) {\n  const actionRef = useRef<HTMLDivElement | null>(null);\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const popoverRef = useRef<HTMLDivElement | null>(null);\n  const [open, setOpen] = useState(false);\n\n  /** 규격이 초점을 아이콘 버튼으로 되돌리라고 못 박은 경우에만 `refocus` 를 켠다. */\n  const close = useCallback((refocus: boolean) => {\n    setOpen(false);\n    if (refocus) buttonRef.current?.focus();\n  }, []);\n\n  // 좁은 화면 좌표·폭. 그리기 전에 넣어야 어긋난 자리에 번쩍이지 않는다.\n  useIsoLayoutEffect(() => {\n    const popover = popoverRef.current;\n    const action = actionRef.current;\n    if (!popover || !action) return;\n    if (!open) {\n      popover.style.left = '';\n      popover.style.width = '';\n      return;\n    }\n    adjustContextualPopover(popover, action);\n  }, [open]);\n\n  // 열리면 초점을 팝오버 안 첫 대화형 요소로(닫기 버튼도 그 대상에 든다).\n  useEffect(() => {\n    if (!open) return;\n    popoverRef.current?.querySelector<HTMLElement>(CONTEXTUAL_FOCUSABLE)?.focus();\n  }, [open]);\n\n  useEffect(() => {\n    if (!open) return;\n    const action = actionRef.current;\n    const onKeyDown = (event: KeyboardEvent) => {\n      // 초점이 어디 있든 Esc 로 닫고 아이콘 버튼으로 돌아간다(규격).\n      if (event.key === 'Escape' || event.key === 'Esc') close(true);\n    };\n    const onDocumentClick = (event: MouseEvent) => {\n      if (!action?.contains(event.target as Node)) setOpen(false);\n    };\n    const onFocusOut = (event: FocusEvent) => {\n      const next = event.relatedTarget as Node | null;\n      if (next && action?.contains(next)) return;\n      setOpen(false); // 초점은 사용자가 간 곳에 둔다 — 킷은 버튼으로 끌어와 키보드 함정이 된다\n    };\n    const onResize = () => {\n      if (popoverRef.current && action) adjustContextualPopover(popoverRef.current, action);\n    };\n    document.addEventListener('keydown', onKeyDown);\n    document.addEventListener('click', onDocumentClick);\n    action?.addEventListener('focusout', onFocusOut);\n    window.addEventListener('resize', onResize);\n    return () => {\n      document.removeEventListener('keydown', onKeyDown);\n      document.removeEventListener('click', onDocumentClick);\n      action?.removeEventListener('focusout', onFocusOut);\n      window.removeEventListener('resize', onResize);\n    };\n  }, [open, close]);\n\n  const Heading = `h${headingLevel}` as 'h4';\n\n  return (\n    <div className={cx('krds-contextual-help', side, align, className)} {...rest}>\n      {text != null && <p className=\"tooltip-txt\">{text}</p>}\n      <div className=\"tooltip-action\" ref={actionRef}>\n        <button\n          type=\"button\"\n          ref={buttonRef}\n          className={cx('krds-btn', buttonSize, 'icon', 'tooltip-btn')}\n          aria-expanded={open}\n          onClick={() => (open ? close(true) : setOpen(true))}\n        >\n          <span className=\"sr-only\">{label}</span>\n          <i className={`svg-icon ico-${icon}`} aria-hidden=\"true\" />\n        </button>\n        {/* 킷은 팝오버를 인라인 display 로 여닫는다. */}\n        <div\n          className=\"tooltip-popover\"\n          role=\"tooltip\"\n          ref={popoverRef}\n          style={{ display: open ? 'block' : undefined }}\n        >\n          {heading != null && <Heading className=\"tooltip-title\">{heading}</Heading>}\n          <div className=\"tooltip-contents\">{children}</div>\n          <button\n            type=\"button\"\n            className=\"krds-btn xsmall icon tooltip-close\"\n            onClick={() => close(true)}\n          >\n            <span className=\"sr-only\">{closeLabel}</span>\n            <i className=\"svg-icon ico-modal-close\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "moru-krds-react",
+  "version": "0.1.0",
+  "description": "React components built on the CSS of KRDS, the Korean government design system",
+  "license": "MIT",
+  "author": "mhb8436",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles/krds-tailwind.css": "./styles/krds-tailwind.css",
+    "./package.json": "./package.json",
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "keywords": [
+    "krds",
+    "react",
+    "design-system",
+    "korea",
+    "government",
+    "accessibility",
+    "wcag",
+    "admin",
+    "backoffice"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsup && npm run build:types && node scripts/fix-esm-imports.mjs",
+    "build:types": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mhb8436/moru-krds-react.git"
+  },
+  "types": "./dist/index.d.ts"
+}