@ihabdevteam/core 0.8.0

package/dist/packages/core/src/components/Toast.d.ts

@@ -0,0 +1,10 @@
+import './Toast.css';
+/** @public */
+export default function Toast({ message, position, type, //normal, notice, warning
+onClose, duration, }: {
+    message?: string;
+    position?: 'top' | 'bottom';
+    type?: 'normal' | 'notice' | 'warning';
+    onClose?: () => void;
+    duration?: number;
+}): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Toast.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { useToastLifecycle } from './useToastLifecycle';
+import './Toast.css';
+/** @public */
+export default function Toast({ message = '', position = 'top', type = 'normal', //normal, notice, warning
+onClose = () => { }, duration = 2000, // 0 = persistent until message cleared
+ }) {
+    const { mounted, showing, popupRef } = useToastLifecycle({ message, position, duration, onClose });
+    if (!mounted)
+        return null;
+    const normalizedType = type === 'notice' || type === 'warning' ? type : 'normal';
+    const el = (_jsx("div", { ref: popupRef, className: `toast toast--${position} ${showing ? 'is-visible' : ''}`, role: "status", "aria-live": "polite", children: _jsx("div", { className: `toast__inner toast__inner--${normalizedType} body-2`, children: message }) }));
+    if (typeof document !== 'undefined') {
+        return createPortal(el, document.body);
+    }
+    return el;
+}

package/dist/packages/core/src/components/Toggle.css

@@ -0,0 +1,61 @@
+.toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  cursor: pointer;
+  user-select: none;
+}
+
+.toggle input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  position: absolute;
+}
+
+.toggle__slider {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 26px;
+  flex-shrink: 0;
+  background: var(--color-whiteLine, #e2e8f0);
+  border-radius: 26px;
+  transition: background 0.2s;
+}
+
+.toggle__slider::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  left: 3px;
+  top: 3px;
+  background: var(--color-pureWhite);
+  border-radius: 50%;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+.toggle input:checked + .toggle__slider {
+  background: var(--color-main, var(--color-main));
+}
+
+.toggle input:checked + .toggle__slider::before {
+  transform: translateX(18px);
+}
+
+.toggle input:focus-visible + .toggle__slider {
+  outline: 2px solid var(--color-main, var(--color-main));
+  outline-offset: 2px;
+}
+
+.toggle__label {
+  color: var(--color-darkGray);
+}
+
+.toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}

package/dist/packages/core/src/components/Toggle.d.ts

@@ -0,0 +1,18 @@
+import './Toggle.css';
+/** @public */
+export interface ToggleProps {
+    checked: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    /** 이름표를 밖에서 그릴 때(PanelRow 등) 낭독기용 이름 — PanelRow 의 라벨은 <div>라
+     *  입력과 이어지지 않아서, 이것을 안 주면 낭독기가 "체크박스" 라고만 읽는다. */
+    ariaLabel?: string;
+    /** 라벨 위치. 기본 'right'(스위치 뒤). 'left'면 "라벨 (O)" 형태로 스위치 앞에 온다. */
+    labelPosition?: 'left' | 'right';
+    className?: string;
+    /** 외부(예: PanelRow)에서 별도로 렌더하는 라벨과 연결할 때 사용하는 input id */
+    id?: string;
+}
+/** @public */
+export default function Toggle({ checked, onChange, disabled, label, ariaLabel, labelPosition, className, id }: ToggleProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Toggle.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Toggle.css';
+/** @public */
+export default function Toggle({ checked, onChange, disabled = false, label, ariaLabel, labelPosition = 'right', className = '', id }) {
+    const labelNode = label && _jsx("span", { className: "toggle__label body-3", children: label });
+    return (_jsxs("label", { className: `toggle${disabled ? ' toggle--disabled' : ''} ${className}`.trim(), children: [labelPosition === 'left' && labelNode, _jsx("input", { id: id, type: "checkbox", checked: checked, disabled: disabled, onChange: e => onChange?.(e.target.checked), "aria-label": !label && ariaLabel ? ariaLabel : undefined }), _jsx("span", { className: "toggle__slider" }), labelPosition === 'right' && labelNode] }));
+}

package/dist/packages/core/src/components/Toolbar.css

@@ -0,0 +1,86 @@
+/* Toolbar — 페이지/팝업 공통 툴바 컴포넌트 */
+
+/* ── 기본(page) 모드 ── */
+.toolbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /* 가로·세로 모두 12px — 줄바꿈으로 여러 줄이 될 때 줄 간격(예전 --spacing-m, 16px)만
+     넓어 오른쪽 그룹 내부(12px)와 리듬이 어긋났다. */
+  gap: var(--spacing-s);
+  flex-wrap: wrap;
+  width: 100%;
+  min-height: 64px;
+  /* 위아래 여백 — 줄바꿈으로 툴바가 두 줄이 될 때 위아래 콘텐츠와 붙어 보이던 것을 띄운다.
+     box-sizing:border-box라 min-height 64px 안에 포함되므로 한 줄일 땐 높이가 그대로다. */
+  padding-top: 8px;
+  padding-bottom: 8px;
+  box-sizing: border-box;
+}
+
+/* 데스크탑: row 래퍼를 투명하게 해서 자식이 바로 1줄에 참여 */
+.toolbar__row {
+  display: contents;
+}
+
+/* 우측 그룹(검색·정렬·페이지 크기·페이지네이션·액션)은 하나의 flex 아이템이라, 공간이
+   부족하면 좌측 그룹(count·segment) 옆이 아니라 통째로 다음 줄로 개행된다.
+   margin-left: auto로 같은 줄에 있을 땐 우측 끝에 붙는다.
+   내용이 넘쳐 이 박스 자체가 줄 전체 너비로 늘어나는 경우에도(그러면 margin-left: auto가
+   먹힐 여유 공간이 없어진다), justify-content: flex-end로 내부 항목들이 각 줄에서 우측
+   정렬되도록 이중으로 보장한다. */
+.toolbar__row-end {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: var(--spacing-s);
+}
+
+.toolbar__count {
+  flex-shrink: 0;
+  margin: 0;
+  white-space: nowrap;
+  color: var(--color-gray);
+}
+
+.toolbar .toolbar__search {
+  flex-shrink: 0;
+  min-width: 200px;
+}
+
+/* 모바일: 2줄 레이아웃 복원 */
+@media (max-width: 767px) {
+  .toolbar {
+    flex-direction: column;
+    align-items: stretch;
+    flex-wrap: wrap;
+    /* 모바일은 툴바가 항상 여러 줄로 쌓여 위아래 콘텐츠와 더 가까워진다 — 8px보다 넉넉히. */
+    padding-top: 12px;
+    padding-bottom: 12px;
+  }
+  .toolbar__row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
+    flex-wrap: wrap;
+  }
+  .toolbar .toolbar__search {
+    flex: 1;
+    min-width: 150px;
+  }
+}
+
+.toolbar__count-highlight { color: var(--color-main); }
+
+/* 세그먼트/필터/페이지네이션/액션처럼 성격이 다른 그룹 사이를 구분하는 세로선 */
+.toolbar__divider {
+  align-self: stretch;
+  height: auto;
+  margin: 8px 0;
+}
+
+@media (max-width: 767px) {
+  .toolbar__divider { display: none; }
+}

package/dist/packages/core/src/components/Toolbar.d.ts

@@ -0,0 +1,52 @@
+import type { ReactNode } from 'react';
+import { type SegmentedControlProps } from './SegmentedControl';
+import './Toolbar.css';
+/** @public */
+export interface ToolbarDropdown {
+    options: {
+        value: string;
+        label: string;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    /** 스크린리더용 접근명. 없으면 선택된 값이 곧 이름이 돼 무엇을 고르는 자리인지 알 수 없다. */
+    ariaLabel?: string;
+}
+export interface ToolbarCount {
+    /** 강조 표시할 숫자 */
+    value: number;
+    /** 숫자 바로 뒤 단위 (색상 span 안). 예: "건" */
+    unit?: string;
+    /** 숫자 span 앞 텍스트. 안 주면 common.totalPrefix (한국어 "총 ", 영어는 빈 값) */
+    prefix?: string;
+    /** 숫자 span 뒤 텍스트. 예: "명의 고객", "의 방문" */
+    suffix?: string;
+}
+export interface ToolbarProps {
+    count?: ToolbarCount;
+    search?: {
+        value: string;
+        onChange: (v: string) => void;
+        placeholder?: string;
+    };
+    /** 1번째 row 왼쪽 — 탭 필터 세그먼트.
+     *  **여럿을 줄 수 있다.** 고르개가 둘인 화면(먼저 무엇을 볼지 고르고, 그 안에서
+     *  다시 갈래를 고르는 꼴)에서 Toolbar 를 두 번 쌓으면 머리만 두 줄이 되어,
+     *  정작 표에 남는 세로가 그만큼 줄고 스크롤이 난다(고객 훈련기록에서 실측).
+     *  한 줄에 나란히 둔다 — 왼쪽이 큰 갈래, 오른쪽이 그 안의 갈래로 읽힌다. */
+    segment?: SegmentedControlProps | SegmentedControlProps[];
+    /** pageSize 앞에 위치할 추가 드롭다운 (상태 필터 등) */
+    filters?: ToolbarDropdown[];
+    pageSize?: ToolbarDropdown;
+    pagination?: {
+        page: number;
+        total: number;
+        onChange: (page: number) => void;
+        prevLabel?: string;
+        nextLabel?: string;
+    };
+    /** 우측 액션 버튼 */
+    actions?: ReactNode;
+    className?: string;
+}
+export default function Toolbar({ count, search, segment, filters, pageSize, pagination, actions, className, }: ToolbarProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Toolbar.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import { useTranslation } from 'react-i18next';
+import TextField from './TextField';
+import Dropdown from './Dropdown';
+import Pagination from './Pagination';
+import SegmentedControl from './SegmentedControl';
+import './Toolbar.css';
+export default function Toolbar({ count, search, segment, filters, pageSize, pagination, actions, className, }) {
+    const { t } = useTranslation();
+    const countNode = count != null && (_jsxs("p", { className: "toolbar__count body-1", children: [count.prefix ?? t('common.totalPrefix', '총 '), _jsx("span", { className: "toolbar__count-highlight", children: count.value }), count.unit, count.suffix] }));
+    // 좌측 그룹: count → segment. 우측 그룹: search → filters(정렬 등) → pageSize → pagination → actions
+    const hasRight = !!(search || filters?.length || pageSize || pagination || actions);
+    return (_jsxs("div", { className: cx('toolbar', className), children: [_jsxs("div", { className: "toolbar__row", children: [countNode, segment && (Array.isArray(segment) ? segment : [segment]).map((seg, i) => (_jsx(SegmentedControl, { size: 40, ...seg }, seg.ariaLabel ?? i)))] }), hasRight && (_jsx("div", { className: "toolbar__row", children: _jsxs("div", { className: "toolbar__row-end", children: [search && (_jsx(TextField, { className: "toolbar__search", size: 40, value: search.value, onChange: search.onChange, placeholder: search.placeholder ?? t('common.search', '검색'), 
+                            /* placeholder는 접근 가능한 이름이 아니다 — 입력이 시작되면 사라지고
+                               화면낭독기 지원도 제각각이라, 같은 문구를 aria-label로도 준다.
+                               (툴바 검색은 시각적 라벨이 따로 없는 자리라 이게 유일한 이름이 된다.) */
+                            ariaLabel: search.placeholder ?? t('common.search', '검색'), clearable: true })), filters?.map((f, i) => (_jsx(Dropdown, { size: 40, options: f.options, value: f.value, onChange: f.onChange, ariaLabel: f.ariaLabel }, i))), pageSize && _jsx(Dropdown, { size: 40, options: pageSize.options, value: pageSize.value, onChange: pageSize.onChange, ariaLabel: pageSize.ariaLabel ?? t('common.pageSizeSelect', '페이지당 표시 개수') }), pagination && (_jsx(Pagination, { page: pagination.page, totalPages: pagination.total, onChange: pagination.onChange, prevLabel: pagination.prevLabel, nextLabel: pagination.nextLabel })), actions] }) }))] }));
+}

package/dist/packages/core/src/components/Tooltip/DebugTooltip.css

@@ -0,0 +1,27 @@
+.debug-result-launcher {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: var(--z-tooltip);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.debug-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  background: rgba(11,43,47,0.02);
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-s);
+  box-shadow: var(--shadow-dropdown);
+}
+.debug-button {
+  background: var(--color-white);
+  border: 1px solid rgba(11,43,47,0.06);
+  padding: 8px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  cursor: pointer;
+}
+.debug-button:hover { transform: translateY(-1px); }

package/dist/packages/core/src/components/Tooltip/DebugTooltip.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import './DebugTooltip.css';
+/** @public */
+export default function DebugResultLauncher({ renderResultPopup }?: {
+    renderResultPopup?: (props: {
+        score?: number | null;
+        contextsLength?: number | null;
+        results?: unknown[];
+        onReplay?: () => void;
+        onClose?: () => void;
+    }) => ReactNode;
+}): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Tooltip/DebugTooltip.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from 'react';
+import './DebugTooltip.css';
+const DEBUG = false;
+/** @public */
+export default function DebugResultLauncher({ renderResultPopup } = {}) {
+    const [openType, setOpenType] = useState(null);
+    const [payload, setPayload] = useState(null);
+    const openPopup = (type) => {
+        let data = null;
+        if (type === 'noise') {
+            data = {
+                score: 3,
+                contextsLength: 5,
+                results: [
+                    { sentence: '문장 A', judgement: true, wording: '잘 들림', useAnswer: false },
+                    { sentence: '문장 B', judgement: false, wording: '안 들림', useAnswer: false },
+                    { sentence: '문장 C', judgement: true, wording: '잘 들림', useAnswer: false },
+                    { sentence: '문장 D', judgement: null, wording: '안 함', useAnswer: false },
+                    { sentence: '문장 E', judgement: false, wording: '안 들림', useAnswer: false },
+                ],
+            };
+        }
+        else if (type === 'short') {
+            data = {
+                score: 2,
+                contextsLength: 3,
+                results: [
+                    { sentence: '비빔밥 설명', answer: '비빔밥', selected: '비빔밥', selectedText: '비빔밥', correct: true },
+                    { sentence: '보쌈 설명', answer: '보쌈', selected: '족발', selectedText: '족발', correct: false },
+                    { sentence: '칼국수 설명', answer: '칼국수', selected: undefined, selectedText: undefined, correct: undefined },
+                ],
+            };
+        }
+        else if (type === 'long') {
+            data = {
+                score: 4,
+                contextsLength: 4,
+                results: [
+                    { sentence: '긴 이야기 1', answer: '정답 텍스트 1', selectedText: '정답 텍스트 1', correct: true },
+                    { sentence: '긴 이야기 2', answer: '정답 텍스트 2', selectedText: '선택 텍스트 2', correct: false },
+                    { sentence: '긴 이야기 3', answer: '정답 텍스트 3', selectedText: undefined, correct: undefined },
+                    { sentence: '긴 이야기 4', answer: '정답 텍스트 4', selectedText: '정답 텍스트 4', correct: true },
+                ],
+            };
+        }
+        else if (type === 'order') {
+            data = {
+                score: 1,
+                contextsLength: 2,
+                results: [
+                    { sentence: '순서 문제 1', answer: '1,2,3', selectedText: '1,2,3', correct: true },
+                    { sentence: '순서 문제 2', answer: 'A,B,C', selectedText: 'B,A,C', correct: false },
+                ],
+            };
+        }
+        setPayload(data);
+        setOpenType(type);
+    };
+    const close = useCallback(() => {
+        setOpenType(null);
+        setPayload(null);
+    }, []);
+    const handleNoisePopup = useCallback(() => openPopup('noise'), []);
+    const handleShortPopup = useCallback(() => openPopup('short'), []);
+    const handleLongPopup = useCallback(() => openPopup('long'), []);
+    const handleOrderPopup = useCallback(() => openPopup('order'), []);
+    // 훅 규칙 준수를 위해 모든 훅 호출 뒤에서 분기(DEBUG는 컴파일 타임 상수)
+    if (!DEBUG)
+        return null;
+    return (_jsxs("div", { className: "debug-result-launcher", children: [_jsxs("div", { className: "debug-buttons", children: [_jsx("button", { className: "debug-button", onClick: handleNoisePopup, children: "Noise \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleShortPopup, children: "ShortStory \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleLongPopup, children: "LongStory \uACB0\uACFC\uBCF4\uAE30" }), _jsx("button", { className: "debug-button", onClick: handleOrderPopup, children: "Order \uACB0\uACFC\uBCF4\uAE30" })] }), openType && payload ? renderResultPopup?.({
+                score: payload.score,
+                contextsLength: payload.contextsLength,
+                results: payload.results,
+                onReplay: close,
+                onClose: close,
+            }) : null] }));
+}

package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.css

@@ -0,0 +1,50 @@
+/* wrapper(.tooltip-content)의 배경 없앰(background/box-shadow)은 Tooltip.css의 공용
+   variant 규칙으로 정규화됨(중복 제거). */
+
+.tooltip-description__box {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 16px 20px;
+    background: var(--color-white);
+    border-radius: var(--radius-m);
+    box-shadow: var(--shadow-tooltip);
+    border: 1px solid var(--color-whiteLine);
+    max-width: 640px;
+}
+
+.tooltip-description__title {
+    color: var(--color-black);
+    margin: 0;
+}
+
+.tooltip-description__items {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.tooltip-description__item {
+    display: flex;
+    gap: var(--spacing-xs);
+    align-items: flex-start;
+    color: var(--color-darkGray);
+    margin: 0;
+}
+
+.tooltip-description__index {
+    flex-shrink: 0;
+    color: var(--color-main);
+}
+
+/* 현재 재생 중인 항목 */
+.tooltip-description__item--active {
+    color: var(--color-main);
+    font-weight: 600;
+}
+.tooltip-description__item--active .tooltip-description__index {
+    color: var(--color-main);
+}

package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.d.ts

@@ -0,0 +1,16 @@
+import './DescriptionTooltip.css';
+import type { AnchorRectLike } from '../../types/geometry';
+/** @public */
+export interface TooltipDescriptionProps {
+    anchorRect?: DOMRect | AnchorRectLike | null;
+    title?: string;
+    items?: string | string[];
+    /** 현재 재생 중인 항목 인덱스 (-1 이면 없음) */
+    activeIndex?: number;
+    /** 항목 번호 표시 여부 (기본값 true) */
+    showIndex?: boolean;
+    onClose?: () => void;
+    offset?: number;
+}
+/** @public */
+export default function DescriptionTooltip(props: TooltipDescriptionProps): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Tooltip/DescriptionTooltip.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Tooltip from './Tooltip';
+import './DescriptionTooltip.css';
+/** @public */
+export default function DescriptionTooltip(props) {
+    const { anchorRect, title, items, activeIndex = -1, showIndex = true, onClose, offset = 12 } = props || {};
+    const list = Array.isArray(items) ? items : (items ? [items] : []);
+    if (!list.length && !title)
+        return null;
+    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: offset, onClose: onClose, closeOnOutsideClick: true, useBorder: false, className: "tooltip-description", children: _jsxs("div", { className: "tooltip-description__box", children: [title && _jsx("span", { className: "tooltip-description__title body-2", children: title }), _jsx("ol", { className: "tooltip-description__items", children: list.map((item, i) => (_jsxs("li", { className: `tooltip-description__item body-3${i === activeIndex ? ' tooltip-description__item--active' : ''}`, children: [showIndex && list.length > 1 && _jsxs("span", { className: "tooltip-description__index button-1", children: [i + 1, "."] }), _jsx("span", { children: item })] }, i))) })] }) }));
+}

package/dist/packages/core/src/components/Tooltip/InfoTooltip.css

@@ -0,0 +1,39 @@
+.tooltip-info__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 4px 12px;
+  color: var(--color-black);
+  background: var(--color-deepWhite);
+  border-radius: var(--radius-m);
+  box-shadow: var(--shadow-tooltip);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 1;
+  border: 1px solid var(--color-main);
+  text-align: center;
+}
+
+/* wrapper(.tooltip-content)의 배경 없앰(background/box-shadow)은 Tooltip.css의 공용
+   variant 규칙으로 정규화됨. 이 파일엔 InfoTooltip 전용 pointer-events만 남긴다. */
+.tooltip-content.tooltip-info {
+  pointer-events: none;
+}
+
+.tooltip-content.tooltip-info .tooltip-info__content {
+  /* the inner content provides the visible surface and shadow */
+  box-shadow: var(--shadow-tooltip);
+}
+
+/* utility hook for positioning small arrow if needed later */
+.tooltip-info[data-placement="top"] .tooltip-info__content::after,
+.tooltip-info[data-placement="bottom"] .tooltip-info__content::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  padding: 0;
+  margin: 0;
+}

package/dist/packages/core/src/components/Tooltip/InfoTooltip.d.ts

@@ -0,0 +1,13 @@
+import "./InfoTooltip.css";
+import type { AnchorRectLike } from '../../types/geometry';
+/** @public */
+export interface TooltipInfoProps {
+    anchorRect?: DOMRect | AnchorRectLike | null;
+    text?: string;
+    offset?: number;
+    onClose?: () => void;
+    className?: string;
+    ariaLabel?: string;
+}
+/** @public */
+export default function InfoTooltip(props: TooltipInfoProps): import("react").JSX.Element | null;

package/dist/packages/core/src/components/Tooltip/InfoTooltip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tooltip from './Tooltip';
+import "./InfoTooltip.css";
+/** @public */
+export default function InfoTooltip(props) {
+    const { anchorRect, text, offset = 8, onClose, className = '', ariaLabel } = props || {};
+    if (!text)
+        return null;
+    return (_jsx(Tooltip, { anchorRect: anchorRect, offset: offset, onClose: onClose, closeOnOutsideClick: false, className: `tooltip-info ${className}`, ariaLabel: ariaLabel || text, children: _jsx("div", { className: "tooltip-info__content body-3", children: text }) }));
+}

package/dist/packages/core/src/components/Tooltip/MenuTooltip.css

@@ -0,0 +1,93 @@
+.tooltip-menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+  min-width: 160px;
+  /* 외곽선·라운드·그림자·배경은 감싸는 Tooltip 래퍼(.tooltip-content)가 제공 —
+     여기서 다시 두면 이중 테두리가 되므로 두지 않는다 */
+}
+
+.tooltip-menu__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  height: 52px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--color-darkWhite);
+}
+
+.tooltip-menu__title {
+  font-weight: 600;
+}
+
+.tooltip-menu__columns {
+  display: flex;
+  gap: var(--spacing-s);
+  padding: 4px;
+}
+
+.tooltip-menu__column {
+  min-width: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+
+.tooltip-menu__column-title {
+  margin-bottom: 4px;
+  color: var(--color-lightGray);
+}
+
+.tooltip-menu__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-l);
+}
+
+/* ── small 변형 — 더 좁고 타이트한 메뉴 ── */
+.tooltip-menu--small {
+  min-width: 140px;
+  gap: 2px;
+}
+.tooltip-menu--small .tooltip-menu__items {
+  gap: var(--spacing-xs);
+}
+.tooltip-menu--small .tooltip-menu__columns {
+  padding: 2px;
+  gap: var(--spacing-xs);
+}
+.tooltip-menu--small .tooltip-menu__header {
+  height: 44px;
+  padding: 6px 10px;
+}
+
+.tooltip-menu__item {
+  width: 100%;
+}
+
+.tooltip-menu__item-icon {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tooltip-menu__label {
+  flex: 1;
+}
+
+.tooltip-menu__chev {
+  width: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@media (max-width: 600px) {
+  .tooltip-menu__columns {
+    flex-direction: column;
+  }
+}