@designbasekorea/ui 0.1.44 → 0.1.46

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, forwardRef, useId, useLayoutEffect } from 'react';
+import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, useLayoutEffect, forwardRef, useId } from 'react';
 import { ChevronDownIcon, StarIcon, TrendingUpIcon, StarFilledIcon, CartIcon, CloseIcon, ArrowRightIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ShrinkIcon, ExpandIcon, DoneIcon as DoneIcon$1, CopyIcon, BulbIcon, CloudCloseIcon, BellActiveIcon, AwardIcon, CalendarIcon, PlusIcon, ErrorIcon, ClockIcon, MinusIcon as MinusIcon$1, VideoIcon, CodeIcon, WriteIcon, UploadIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, VerticalArrowsIcon, CaretUpdownFilledIcon } from '@designbasekorea/icons';
 import { flushSync, createPortal } from 'react-dom';
 
@@ -2194,7 +2194,215 @@ const Spinner = ({ type = 'circular', size = 'm', color, speed = 1, label = '로
 };
 Spinner.displayName = 'Spinner';
 
-const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
+const GAP$1 = 8; // 트리거와의 간격
+const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
+const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
+const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 240, showArrow = true, className, ...props }) => {
+    const [visible, setVisible] = useState(false);
+    const [style, setStyle] = useState({});
+    const [arrowStyle, setArrowStyle] = useState({});
+    const [placementGroup, setPlacementGroup] = useState('top');
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timers = useRef({});
+    const rafId = useRef(null);
+    const clearTimer = () => {
+        if (timers.current.t) {
+            clearTimeout(timers.current.t);
+            timers.current.t = undefined;
+        }
+    };
+    const groupOf = (p) => p.startsWith('top') ? 'top' :
+        p.startsWith('bottom') ? 'bottom' :
+            p.startsWith('left') ? 'left' : 'right';
+    // 위치 계산 (⚠️ 뷰포트 클램핑 후 화살표도 보정)
+    const calculatePosition = useCallback(() => {
+        if (!triggerRef.current || !tooltipRef.current)
+            return;
+        const tRect = triggerRef.current.getBoundingClientRect();
+        const pRect = tooltipRef.current.getBoundingClientRect();
+        let top = 0, left = 0;
+        // 1차: 이상적(미보정) 화살표 좌표
+        let aTop = 0, aLeft = 0;
+        switch (position) {
+            case 'top':
+                top = tRect.top - pRect.height - GAP$1;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = pRect.height;
+                aLeft = pRect.width / 2 - ARW;
+                break;
+            case 'top-start':
+                top = tRect.top - pRect.height - GAP$1;
+                left = tRect.left;
+                aTop = pRect.height;
+                aLeft = PAD;
+                break;
+            case 'top-end':
+                top = tRect.top - pRect.height - GAP$1;
+                left = tRect.right - pRect.width;
+                aTop = pRect.height;
+                aLeft = pRect.width - PAD;
+                break;
+            case 'bottom':
+                top = tRect.bottom + GAP$1;
+                left = tRect.left + tRect.width / 2 - pRect.width / 2;
+                aTop = -ARW;
+                aLeft = pRect.width / 2 - ARW;
+                break;
+            case 'bottom-start':
+                top = tRect.bottom + GAP$1;
+                left = tRect.left;
+                aTop = -ARW;
+                aLeft = PAD;
+                break;
+            case 'bottom-end':
+                top = tRect.bottom + GAP$1;
+                left = tRect.right - pRect.width;
+                aTop = -ARW;
+                aLeft = pRect.width - PAD;
+                break;
+            case 'left':
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.left - pRect.width - GAP$1;
+                aTop = pRect.height / 2 - ARW;
+                aLeft = pRect.width;
+                break;
+            case 'left-start':
+                top = tRect.top;
+                left = tRect.left - pRect.width - GAP$1;
+                aTop = PAD;
+                aLeft = pRect.width;
+                break;
+            case 'left-end':
+                top = tRect.bottom - pRect.height;
+                left = tRect.left - pRect.width - GAP$1;
+                aTop = pRect.height - PAD;
+                aLeft = pRect.width;
+                break;
+            case 'right':
+                top = tRect.top + tRect.height / 2 - pRect.height / 2;
+                left = tRect.right + GAP$1;
+                aTop = pRect.height / 2 - ARW;
+                aLeft = -ARW;
+                break;
+            case 'right-start':
+                top = tRect.top;
+                left = tRect.right + GAP$1;
+                aTop = PAD;
+                aLeft = -ARW;
+                break;
+            case 'right-end':
+                top = tRect.bottom - pRect.height;
+                left = tRect.right + GAP$1;
+                aTop = pRect.height - PAD;
+                aLeft = -ARW;
+                break;
+        }
+        // 뷰포트 클램핑
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        if (left < 8)
+            left = 8;
+        if (left + pRect.width > vw - 8)
+            left = vw - pRect.width - 8;
+        if (top < 8)
+            top = 8;
+        if (top + pRect.height > vh - 8)
+            top = vh - pRect.height - 8;
+        // 🔁 클램핑으로 박스 위치가 바뀌었을 수 있으니, 화살표를 박스 내부에서 다시 보정
+        const g = groupOf(position);
+        if (g === 'top' || g === 'bottom') {
+            // 트리거 중앙 X 를 툴팁 좌표계로 변환
+            const triggerCenterX = tRect.left + tRect.width / 2;
+            const localX = triggerCenterX - left - ARW; // 화살표 기준점을 고려
+            // 8px ~ (width-8px) 범위로 제한
+            aLeft = Math.min(pRect.width - PAD, Math.max(PAD, localX));
+            // aTop은 이미 위/아래에 고정(-ARW 또는 높이)
+        }
+        else {
+            const triggerCenterY = tRect.top + tRect.height / 2;
+            const localY = triggerCenterY - top - ARW;
+            aTop = Math.min(pRect.height - PAD, Math.max(PAD, localY));
+            // aLeft는 이미 좌/우에 고정(-ARW 또는 너비)
+        }
+        setStyle({
+            position: 'fixed',
+            top,
+            left,
+            maxWidth,
+            zIndex: 9999,
+            pointerEvents: 'none', // hover 유지
+        });
+        setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
+        setPlacementGroup(g);
+    }, [position, maxWidth]);
+    // 초기 페인트 전에 위치 확정
+    useLayoutEffect(() => {
+        if (visible || alwaysShow)
+            calculatePosition();
+    }, [visible, alwaysShow, calculatePosition]);
+    // 스크롤/리사이즈/크기변화 추적 (rAF 스로틀)
+    useEffect(() => {
+        if (!(visible || alwaysShow))
+            return;
+        const onMove = () => {
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+            rafId.current = requestAnimationFrame(() => {
+                calculatePosition();
+                rafId.current = null;
+            });
+        };
+        window.addEventListener('scroll', onMove, { capture: true, passive: true });
+        window.addEventListener('resize', onMove, { passive: true });
+        let ro = null;
+        const ResizeObs = window.ResizeObserver;
+        if (ResizeObs) {
+            ro = new ResizeObs(() => onMove());
+            if (tooltipRef.current)
+                ro.observe(tooltipRef.current);
+            if (triggerRef.current)
+                ro.observe(triggerRef.current);
+        }
+        return () => {
+            window.removeEventListener('scroll', onMove, { capture: true });
+            window.removeEventListener('resize', onMove);
+            ro?.disconnect?.();
+            if (rafId.current != null)
+                cancelAnimationFrame(rafId.current);
+        };
+    }, [visible, alwaysShow, calculatePosition]);
+    // show/hide
+    const show = useCallback(() => {
+        if (disabled)
+            return;
+        clearTimer();
+        timers.current.t = setTimeout(() => setVisible(true), Math.max(0, delay));
+    }, [disabled, delay]);
+    const hide = useCallback(() => {
+        if (disabled)
+            return;
+        clearTimer();
+        timers.current.t = setTimeout(() => setVisible(false), Math.max(0, hideDelay));
+    }, [disabled, hideDelay]);
+    useEffect(() => () => clearTimer(), []);
+    useEffect(() => { if (!disabled && alwaysShow)
+        setVisible(true);
+    else if (!alwaysShow)
+        setVisible(false); }, [alwaysShow, disabled]);
+    const onKeyDown = useCallback((e) => {
+        if (e.key === 'Escape') {
+            clearTimer();
+            setVisible(false);
+        }
+    }, []);
+    const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': visible || alwaysShow, 'designbase-tooltip--disabled': disabled }, className);
+    const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
+    return (jsxs(Fragment, { children: [jsx("span", { ref: triggerRef, className: "designbase-tooltip__trigger", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, onKeyDown: onKeyDown, tabIndex: 0, "aria-describedby": visible || alwaysShow ? 'db-tooltip' : undefined, children: children }), (visible || alwaysShow) && (jsxs("div", { ref: tooltipRef, className: classes, style: style, role: "tooltip", id: "db-tooltip", "aria-hidden": !(visible || alwaysShow), "data-placement-group": placementGroup, ...props, children: [jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
+};
+Tooltip.displayName = 'Tooltip';
+
+const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, tooltip, tooltipProps, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
     const ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
     const { buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({
         ...props,
@@ -2258,7 +2466,12 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
         }
         return (jsxs(Fragment, { children: [StartIcon && (jsx(StartIcon, { size: iconSize, className: "designbase-button__start-icon", color: getIconColor() })), children, EndIcon && (jsx(EndIcon, { size: iconSize, className: "designbase-button__end-icon", color: getIconColor() }))] }));
     };
-    return (jsx("button", { ...buttonProps, ref: ref, className: classes, "aria-label": iconOnly ? props['aria-label'] || children : undefined, children: renderContent() }));
+    const buttonElement = (jsx("button", { ...buttonProps, ref: ref, className: classes, "aria-label": iconOnly ? props['aria-label'] || children : undefined, children: renderContent() }));
+    // 툴팁이 있는 경우 Tooltip으로 감싸기
+    if (tooltip) {
+        return (jsx(Tooltip, { content: tooltip, position: "top", size: "s", variant: "default", ...tooltipProps, children: buttonElement }));
+    }
+    return buttonElement;
 });
 Button.displayName = 'Button';
 
@@ -8167,9 +8380,9 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
             }
         }
     }, [enableRecentSearches, recentSearchesKey]);
-    // 추천 검색어 롤링 (포커스 없이도 계속)
+    // 추천 검색어 롤링 (value가 없을 때만)
     useEffect(() => {
-        if (suggestedSearches.length > 0 && !currentValue) {
+        if (suggestedSearches.length > 0 && !currentValue && currentValue === '') {
             suggestionIntervalRef.current = setInterval(() => {
                 setCurrentSuggestion(prev => (prev + 1) % suggestedSearches.length);
             }, suggestionRollingInterval);
@@ -8268,6 +8481,11 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
     const handleSuggestionClick = (suggestion) => {
         setInternalValue(suggestion);
         onChange?.(suggestion);
+        // 롤링 중단
+        if (suggestionIntervalRef.current) {
+            clearInterval(suggestionIntervalRef.current);
+            suggestionIntervalRef.current = null;
+        }
         handleSearch(suggestion);
     };
     const classes = clsx('designbase-search-bar', `designbase-search-bar--${size}`, `designbase-search-bar--${variant}`, {
@@ -8280,8 +8498,8 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         'designbase-search-bar__input--disabled': disabled,
         'designbase-search-bar__input--readonly': readOnly,
     });
-    // 현재 플레이스홀더 (추천 검색어가 있으면 롤링)
-    const currentPlaceholder = suggestedSearches.length > 0 && !currentValue
+    // 현재 플레이스홀더 (value가 없을 때만 추천 검색어 롤링)
+    const currentPlaceholder = suggestedSearches.length > 0 && !currentValue && currentValue === ''
         ? suggestedSearches[currentSuggestion]
         : placeholder;
     return (jsxs("div", { className: classes, role: "search", children: [jsxs("div", { className: "designbase-search-bar__container", children: [jsx("div", { className: "designbase-search-bar__search-icon", children: jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsx(CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
@@ -8513,7 +8731,7 @@ const Pagination = ({ currentPage, totalPages, totalItems, pageSize = 10, pageSi
 };
 Pagination.displayName = 'Pagination';
 
-const GAP$1 = 8; // trigger와 popover 사이 간격
+const GAP = 8; // trigger와 popover 사이 간격
 const Popover = ({ content, children, title, position = 'top', size = 'm', variant = 'default', trigger = 'click', delay = 0, // 클릭/포커스는 즉시, 호버는 아래에서만 적용
 hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 300, showArrow = true, closeOnOutsideClick = true, closeOnEscape = true, open: controlledOpen, onOpenChange, className, ...props }) => {
     const [internalOpen, setInternalOpen] = useState(false);
@@ -8546,74 +8764,74 @@ hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 300, showArrow
         };
         switch (position) {
             case 'top':
-                top = tRect.top - pRect.height - GAP$1;
+                top = tRect.top - pRect.height - GAP;
                 left = tRect.left + tRect.width / 2 - pRect.width / 2;
                 aTop = pRect.height;
                 aLeft = pRect.width / 2 - 4;
                 break;
             case 'top-start':
-                top = tRect.top - pRect.height - GAP$1;
+                top = tRect.top - pRect.height - GAP;
                 left = tRect.left;
                 aTop = pRect.height;
                 aLeft = 12;
                 break;
             case 'top-end':
-                top = tRect.top - pRect.height - GAP$1;
+                top = tRect.top - pRect.height - GAP;
                 left = tRect.right - pRect.width;
                 aTop = pRect.height;
                 aLeft = pRect.width - 12;
                 break;
             case 'bottom':
-                top = tRect.bottom + GAP$1;
+                top = tRect.bottom + GAP;
                 left = tRect.left + tRect.width / 2 - pRect.width / 2;
                 aTop = -4;
                 aLeft = pRect.width / 2 - 4;
                 break;
             case 'bottom-start':
-                top = tRect.bottom + GAP$1;
+                top = tRect.bottom + GAP;
                 left = tRect.left;
                 aTop = -4;
                 aLeft = 12;
                 break;
             case 'bottom-end':
-                top = tRect.bottom + GAP$1;
+                top = tRect.bottom + GAP;
                 left = tRect.right - pRect.width;
                 aTop = -4;
                 aLeft = pRect.width - 12;
                 break;
             case 'left':
                 top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                left = tRect.left - pRect.width - GAP$1;
+                left = tRect.left - pRect.width - GAP;
                 aTop = pRect.height / 2 - 4;
                 aLeft = pRect.width;
                 break;
             case 'left-start':
                 top = tRect.top;
-                left = tRect.left - pRect.width - GAP$1;
+                left = tRect.left - pRect.width - GAP;
                 aTop = 12;
                 aLeft = pRect.width;
                 break;
             case 'left-end':
                 top = tRect.bottom - pRect.height;
-                left = tRect.left - pRect.width - GAP$1;
+                left = tRect.left - pRect.width - GAP;
                 aTop = pRect.height - 12;
                 aLeft = pRect.width;
                 break;
             case 'right':
                 top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                left = tRect.right + GAP$1;
+                left = tRect.right + GAP;
                 aTop = pRect.height / 2 - 4;
                 aLeft = -4;
                 break;
             case 'right-start':
                 top = tRect.top;
-                left = tRect.right + GAP$1;
+                left = tRect.right + GAP;
                 aTop = 12;
                 aLeft = -4;
                 break;
             case 'right-end':
                 top = tRect.bottom - pRect.height;
-                left = tRect.right + GAP$1;
+                left = tRect.right + GAP;
                 aTop = pRect.height - 12;
                 aLeft = -4;
                 break;
@@ -10686,214 +10904,6 @@ const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', ful
     return (jsx("div", { className: classes, children: jsxs("div", { className: "designbase-toolbar__content", children: [Object.entries(groupedItems).map(([groupName, groupItems], groupIndex) => (jsxs("div", { className: "designbase-toolbar__group", children: [groupItems.map(renderItem), groupIndex < Object.keys(groupedItems).length - 1 && (jsx("div", { className: "designbase-toolbar__group-separator" }))] }, groupName))), children && (jsx("div", { className: "designbase-toolbar__children", children: children }))] }) }));
 };
 
-const GAP = 8; // 트리거와의 간격
-const ARW = 6; // 화살표 반쪽 길이(삼각형 변 길이)
-const PAD = 8; // 화살표가 박스 안에서 안전하게 보일 최소 여백
-const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'default', delay = 200, hideDelay = 80, alwaysShow = false, disabled = false, maxWidth = 240, showArrow = true, className, ...props }) => {
-    const [visible, setVisible] = useState(false);
-    const [style, setStyle] = useState({});
-    const [arrowStyle, setArrowStyle] = useState({});
-    const [placementGroup, setPlacementGroup] = useState('top');
-    const triggerRef = useRef(null);
-    const tooltipRef = useRef(null);
-    const timers = useRef({});
-    const rafId = useRef(null);
-    const clearTimer = () => {
-        if (timers.current.t) {
-            clearTimeout(timers.current.t);
-            timers.current.t = undefined;
-        }
-    };
-    const groupOf = (p) => p.startsWith('top') ? 'top' :
-        p.startsWith('bottom') ? 'bottom' :
-            p.startsWith('left') ? 'left' : 'right';
-    // 위치 계산 (⚠️ 뷰포트 클램핑 후 화살표도 보정)
-    const calculatePosition = useCallback(() => {
-        if (!triggerRef.current || !tooltipRef.current)
-            return;
-        const tRect = triggerRef.current.getBoundingClientRect();
-        const pRect = tooltipRef.current.getBoundingClientRect();
-        let top = 0, left = 0;
-        // 1차: 이상적(미보정) 화살표 좌표
-        let aTop = 0, aLeft = 0;
-        switch (position) {
-            case 'top':
-                top = tRect.top - pRect.height - GAP;
-                left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                aTop = pRect.height;
-                aLeft = pRect.width / 2 - ARW;
-                break;
-            case 'top-start':
-                top = tRect.top - pRect.height - GAP;
-                left = tRect.left;
-                aTop = pRect.height;
-                aLeft = PAD;
-                break;
-            case 'top-end':
-                top = tRect.top - pRect.height - GAP;
-                left = tRect.right - pRect.width;
-                aTop = pRect.height;
-                aLeft = pRect.width - PAD;
-                break;
-            case 'bottom':
-                top = tRect.bottom + GAP;
-                left = tRect.left + tRect.width / 2 - pRect.width / 2;
-                aTop = -ARW;
-                aLeft = pRect.width / 2 - ARW;
-                break;
-            case 'bottom-start':
-                top = tRect.bottom + GAP;
-                left = tRect.left;
-                aTop = -ARW;
-                aLeft = PAD;
-                break;
-            case 'bottom-end':
-                top = tRect.bottom + GAP;
-                left = tRect.right - pRect.width;
-                aTop = -ARW;
-                aLeft = pRect.width - PAD;
-                break;
-            case 'left':
-                top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                left = tRect.left - pRect.width - GAP;
-                aTop = pRect.height / 2 - ARW;
-                aLeft = pRect.width;
-                break;
-            case 'left-start':
-                top = tRect.top;
-                left = tRect.left - pRect.width - GAP;
-                aTop = PAD;
-                aLeft = pRect.width;
-                break;
-            case 'left-end':
-                top = tRect.bottom - pRect.height;
-                left = tRect.left - pRect.width - GAP;
-                aTop = pRect.height - PAD;
-                aLeft = pRect.width;
-                break;
-            case 'right':
-                top = tRect.top + tRect.height / 2 - pRect.height / 2;
-                left = tRect.right + GAP;
-                aTop = pRect.height / 2 - ARW;
-                aLeft = -ARW;
-                break;
-            case 'right-start':
-                top = tRect.top;
-                left = tRect.right + GAP;
-                aTop = PAD;
-                aLeft = -ARW;
-                break;
-            case 'right-end':
-                top = tRect.bottom - pRect.height;
-                left = tRect.right + GAP;
-                aTop = pRect.height - PAD;
-                aLeft = -ARW;
-                break;
-        }
-        // 뷰포트 클램핑
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        if (left < 8)
-            left = 8;
-        if (left + pRect.width > vw - 8)
-            left = vw - pRect.width - 8;
-        if (top < 8)
-            top = 8;
-        if (top + pRect.height > vh - 8)
-            top = vh - pRect.height - 8;
-        // 🔁 클램핑으로 박스 위치가 바뀌었을 수 있으니, 화살표를 박스 내부에서 다시 보정
-        const g = groupOf(position);
-        if (g === 'top' || g === 'bottom') {
-            // 트리거 중앙 X 를 툴팁 좌표계로 변환
-            const triggerCenterX = tRect.left + tRect.width / 2;
-            const localX = triggerCenterX - left - ARW; // 화살표 기준점을 고려
-            // 8px ~ (width-8px) 범위로 제한
-            aLeft = Math.min(pRect.width - PAD, Math.max(PAD, localX));
-            // aTop은 이미 위/아래에 고정(-ARW 또는 높이)
-        }
-        else {
-            const triggerCenterY = tRect.top + tRect.height / 2;
-            const localY = triggerCenterY - top - ARW;
-            aTop = Math.min(pRect.height - PAD, Math.max(PAD, localY));
-            // aLeft는 이미 좌/우에 고정(-ARW 또는 너비)
-        }
-        setStyle({
-            position: 'fixed',
-            top,
-            left,
-            maxWidth,
-            zIndex: 9999,
-            pointerEvents: 'none', // hover 유지
-        });
-        setArrowStyle({ position: 'absolute', top: aTop, left: aLeft });
-        setPlacementGroup(g);
-    }, [position, maxWidth]);
-    // 초기 페인트 전에 위치 확정
-    useLayoutEffect(() => {
-        if (visible || alwaysShow)
-            calculatePosition();
-    }, [visible, alwaysShow, calculatePosition]);
-    // 스크롤/리사이즈/크기변화 추적 (rAF 스로틀)
-    useEffect(() => {
-        if (!(visible || alwaysShow))
-            return;
-        const onMove = () => {
-            if (rafId.current != null)
-                cancelAnimationFrame(rafId.current);
-            rafId.current = requestAnimationFrame(() => {
-                calculatePosition();
-                rafId.current = null;
-            });
-        };
-        window.addEventListener('scroll', onMove, { capture: true, passive: true });
-        window.addEventListener('resize', onMove, { passive: true });
-        let ro = null;
-        const ResizeObs = window.ResizeObserver;
-        if (ResizeObs) {
-            ro = new ResizeObs(() => onMove());
-            if (tooltipRef.current)
-                ro.observe(tooltipRef.current);
-            if (triggerRef.current)
-                ro.observe(triggerRef.current);
-        }
-        return () => {
-            window.removeEventListener('scroll', onMove, { capture: true });
-            window.removeEventListener('resize', onMove);
-            ro?.disconnect?.();
-            if (rafId.current != null)
-                cancelAnimationFrame(rafId.current);
-        };
-    }, [visible, alwaysShow, calculatePosition]);
-    // show/hide
-    const show = useCallback(() => {
-        if (disabled)
-            return;
-        clearTimer();
-        timers.current.t = setTimeout(() => setVisible(true), Math.max(0, delay));
-    }, [disabled, delay]);
-    const hide = useCallback(() => {
-        if (disabled)
-            return;
-        clearTimer();
-        timers.current.t = setTimeout(() => setVisible(false), Math.max(0, hideDelay));
-    }, [disabled, hideDelay]);
-    useEffect(() => () => clearTimer(), []);
-    useEffect(() => { if (!disabled && alwaysShow)
-        setVisible(true);
-    else if (!alwaysShow)
-        setVisible(false); }, [alwaysShow, disabled]);
-    const onKeyDown = useCallback((e) => {
-        if (e.key === 'Escape') {
-            clearTimer();
-            setVisible(false);
-        }
-    }, []);
-    const classes = clsx('designbase-tooltip', `designbase-tooltip--${size}`, `designbase-tooltip--${variant}`, `designbase-tooltip--${position}`, { 'designbase-tooltip--visible': visible || alwaysShow, 'designbase-tooltip--disabled': disabled }, className);
-    const arrowClasses = clsx('designbase-tooltip__arrow', `designbase-tooltip__arrow--${position}`);
-    return (jsxs(Fragment, { children: [jsx("span", { ref: triggerRef, className: "designbase-tooltip__trigger", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, onKeyDown: onKeyDown, tabIndex: 0, "aria-describedby": visible || alwaysShow ? 'db-tooltip' : undefined, children: children }), (visible || alwaysShow) && (jsxs("div", { ref: tooltipRef, className: classes, style: style, role: "tooltip", id: "db-tooltip", "aria-hidden": !(visible || alwaysShow), "data-placement-group": placementGroup, ...props, children: [jsx("div", { className: "designbase-tooltip__content", children: content }), showArrow && jsx("div", { className: arrowClasses, style: arrowStyle })] }))] }));
-};
-Tooltip.displayName = 'Tooltip';
-
 const VideoPlayer = ({ src, poster, title, description, size = 'm', variant = 'default', theme = 'auto', autoPlay = false, loop = false, muted = false, showControls = true, enableFullscreen = true, enableKeyboard = true, enableTouch = true, showProgress = true, showTime = true, showVolume = true, showSettings = false, playlist = [], currentIndex = 0, autoPause = true, playbackRates = [0.5, 0.75, 1, 1.25, 1.5, 2], defaultPlaybackRate = 1, qualities = [], defaultQuality = '', subtitles = [], defaultSubtitle = '', onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onFullscreenChange, onPlaylistChange, onPlaybackRateChange, onQualityChange, onSubtitleChange, onError, className, }) => {
     const videoRef = useRef(null);
     const containerRef = useRef(null);