@designbasekorea/ui 0.6.0 → 0.7.0

package/dist/index.esm.js

@@ -4451,7 +4451,53 @@ const Checkbox = forwardRef(({ isSelected, defaultSelected, isIndeterminate = fa
 });
 Checkbox.displayName = 'Checkbox';
 
-const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, showShortcut = false, shortcutLabel = '⌘K', className, ...rest }) => {
+const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
+    // 사이즈별 아이콘 크기
+    const getIconSize = () => {
+        switch (size) {
+            case 's':
+                return 12;
+            case 'm':
+                return 16;
+            case 'l':
+                return 20;
+            default:
+                return 16;
+        }
+    };
+    const iconSize = getIconSize();
+    const handleDelete = (e) => {
+        e.stopPropagation();
+        if (!disabled && onDelete) {
+            onDelete();
+        }
+    };
+    const handleClick = () => {
+        if (!disabled && onClick) {
+            onClick();
+        }
+    };
+    const classes = clsx('designbase-chip', `designbase-chip--${size}`, `designbase-chip--${variant}`, {
+        'designbase-chip--deletable': deletable,
+        'designbase-chip--disabled': disabled,
+        'designbase-chip--selected': selected,
+        'designbase-chip--clickable': onClick,
+        'designbase-chip--full-width': fullWidth,
+    }, className);
+    return (jsxs("div", { className: classes, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handleClick();
+            }
+        }, ...props, children: [startIcon && (jsx("span", { className: "designbase-chip__start-icon", children: React.isValidElement(startIcon)
+                    ? React.cloneElement(startIcon, { size: iconSize })
+                    : startIcon })), jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsx("span", { className: "designbase-chip__end-icon", children: React.isValidElement(endIcon)
+                    ? React.cloneElement(endIcon, { size: iconSize })
+                    : endIcon })), deletable && (jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
+};
+Chip.displayName = 'Chip';
+
+const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', recentSearchesLayout = 'vertical', suggestedSearches = [], suggestionRollingInterval = 5000, categories = [], selectedCategory = '', onCategoryChange, searchResults, renderSearchResult, onSearchResultClick, emptyStateMessage, onChange, onSearch, onFocus, onBlur, onKeyDown, showShortcut = false, shortcutLabel = '⌘K', className, ...rest }) => {
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [recentSearches, setRecentSearches] = useState([]);
     const [showRecentSearches, setShowRecentSearches] = useState(false);
@@ -4498,6 +4544,26 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
             setInternalValue(value);
         }
     }, [value]);
+    // 전역 단축키 포커스
+    useEffect(() => {
+        if (!showShortcut || disabled || readOnly)
+            return;
+        const handleGlobalKeyDown = (e) => {
+            const isModifier = e.metaKey || e.ctrlKey;
+            let keyToMatch = 'k'; // 기본값 (⌘K)
+            if (shortcutLabel) {
+                const lastChar = shortcutLabel.slice(-1).toLowerCase();
+                if (lastChar)
+                    keyToMatch = lastChar;
+            }
+            if (isModifier && e.key.toLowerCase() === keyToMatch) {
+                e.preventDefault();
+                inputRef.current?.focus();
+            }
+        };
+        window.addEventListener('keydown', handleGlobalKeyDown);
+        return () => window.removeEventListener('keydown', handleGlobalKeyDown);
+    }, [showShortcut, shortcutLabel, disabled, readOnly]);
     const handleChange = (e) => {
         const newValue = e.target.value;
         setInternalValue(newValue);
@@ -4582,6 +4648,20 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         }
         handleSearch(suggestion);
     };
+    const handleSearchResultClick = (result) => {
+        onSearchResultClick?.(result);
+        setShowRecentSearches(false); // Close dropdown
+    };
+    const handleCategoryClick = (category) => {
+        onCategoryChange?.(category);
+    };
+    const hasSearchResults = searchResults !== undefined && searchResults.length > 0;
+    const hasValue = currentValue && currentValue.length > 0;
+    const showDropdown = isFocused && (categories.length > 0 ||
+        (enableRecentSearches && recentSearches.length > 0 && !hasValue) ||
+        (suggestedSearches.length > 0 && !hasValue) ||
+        (searchResults !== undefined && hasValue) ||
+        (emptyStateMessage && !hasValue && (!enableRecentSearches || recentSearches.length === 0) && suggestedSearches.length === 0));
     const classes = clsx('designbase-search-bar', `designbase-search-bar--${size}`, `designbase-search-bar--${variant}`, {
         'designbase-search-bar--disabled': disabled,
         'designbase-search-bar--readonly': readOnly,
@@ -4597,9 +4677,30 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         ? suggestedSearches[currentSuggestion]
         : placeholder;
     const shortcutBadgeSize = size === 'l' ? 'm' : 's';
-    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", ...rest }), showShortcut && !currentValue && !disabled && !readOnly && (jsx(Badge, { className: "designbase-search-bar__shortcut-badge", size: shortcutBadgeSize, variant: "secondary", style: "text", "aria-hidden": "true", children: shortcutLabel })), 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', {
-                                'designbase-search-bar__suggestion-item--active': index === currentSuggestion
-                            }), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) })] }))] }));
+    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", ...rest }), showShortcut && !currentValue && !disabled && !readOnly && (jsx(Badge, { className: "designbase-search-bar__shortcut-badge", size: shortcutBadgeSize, variant: "secondary", style: "text", "aria-hidden": "true", children: shortcutLabel })), 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 }) }))] }), showDropdown && (jsxs("div", { className: "designbase-search-bar__dropdown", children: [categories.length > 0 && (jsx("div", { className: "designbase-search-bar__categories", children: categories.map((category) => (jsx(Chip, { label: category, size: "s", variant: category === selectedCategory ? 'primary' : 'default', onClick: () => { }, onMouseDown: (e) => {
+                                // prevent blur
+                                e.preventDefault();
+                                handleCategoryClick(category);
+                            } }, category))) })), hasValue && searchResults !== undefined ? (jsx("div", { className: "designbase-search-bar__results", children: hasSearchResults ? (jsx("ul", { className: "designbase-search-bar__results-list", children: searchResults.map((result, index) => (jsx("li", { className: "designbase-search-bar__result-item", onMouseDown: (e) => {
+                                    e.preventDefault();
+                                    handleSearchResultClick(result);
+                                }, children: renderSearchResult ? renderSearchResult(result, index) : result.toString() }, index))) })) : (jsx("div", { className: "designbase-search-bar__results-empty", children: "\uAC80\uC0C9 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4." })) })) : (
+                    /* 2. 최근 검색어 & 추천 검색어 (검색어가 없을 때) */
+                    jsxs(Fragment, { children: [enableRecentSearches && !hasValue && recentSearches.length > 0 && (jsxs("div", { className: clsx('designbase-search-bar__recent-searches', `designbase-search-bar__recent-searches--${recentSearchesLayout}`), 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", onMouseDown: (e) => {
+                                                    e.preventDefault();
+                                                    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", onMouseDown: (e) => {
+                                                        e.preventDefault();
+                                                        handleRecentSearchClick(searchTerm);
+                                                    }, children: searchTerm }), jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onMouseDown: (e) => {
+                                                        e.preventDefault();
+                                                        handleRemoveRecentSearch(searchTerm);
+                                                    }, "aria-label": `${searchTerm} 삭제`, children: jsx(CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && !hasValue && (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', {
+                                                'designbase-search-bar__suggestion-item--active': index === currentSuggestion
+                                            }), onMouseDown: (e) => {
+                                                e.preventDefault();
+                                                handleSuggestionClick(suggestion);
+                                            }, children: suggestion }, index))) })] })), emptyStateMessage && !hasValue && (!enableRecentSearches || recentSearches.length === 0) && suggestedSearches.length === 0 && (jsx("div", { className: "designbase-search-bar__empty-state", children: emptyStateMessage }))] }))] }))] }));
 };
 SearchBar.displayName = 'SearchBar';
 
@@ -5771,52 +5872,6 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
                                             }, title: "\uB2E4\uC6B4\uB85C\uB4DC", children: jsx(DownloadIcon, { size: iconSize, color: "currentColor" }) }))] })] }, item.id))) }), showNavigation && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--prev'), onClick: goToPrevious, disabled: disabled || readonly || isPrevDisabled, title: "\uC774\uC804 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ChevronLeftIcon, { size: iconSize, color: "currentColor" }) }), jsx("button", { className: clsx('designbase-carousel__nav-button', 'designbase-carousel__nav-button--next'), onClick: goToNext, disabled: disabled || readonly || isNextDisabled, title: "\uB2E4\uC74C \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ChevronRightIcon, { size: iconSize, color: "currentColor" }) })] })), enablePaging && items.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--first", onClick: goToFirst, disabled: disabled || readonly || currentIndex === 0, title: "\uCCAB \uBC88\uC9F8 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ArrowLeftIcon, { size: iconSize, color: "currentColor" }) }), jsx("button", { className: "designbase-carousel__quick-nav-button designbase-carousel__quick-nav-button--last", onClick: goToLast, disabled: disabled || readonly || currentIndex === items.length - 1, title: "\uB9C8\uC9C0\uB9C9 \uC2AC\uB77C\uC774\uB4DC", type: "button", children: jsx(ArrowRightIcon, { size: iconSize, color: "currentColor" }) })] })), enableFullscreen && (jsx("button", { className: "designbase-carousel__fullscreen-button", onClick: handleFullscreenToggle, disabled: disabled || readonly, title: isFullscreen ? "전체화면 해제" : "전체화면", type: "button", children: isFullscreen ? jsx(ShrinkIcon, { size: iconSize, color: "currentColor" }) : jsx(ExpandIcon, { size: iconSize, color: "currentColor" }) }))] }), jsxs("div", { className: "designbase-carousel__controls", children: [showIndicators && items.length > 1 && (jsx("div", { className: "designbase-carousel__indicators", children: jsx(Indicator, { current: currentIndex, total: items.length, type: indicatorStyle === 'lines' ? 'line' : indicatorStyle === 'numbers' ? 'numbers' : 'dots', size: "s", clickable: true, onStepClick: goToSlide }) })), showAutoPlayControl && items.length > 1 && (jsx("button", { className: "designbase-carousel__autoplay-button", onClick: handleAutoPlayToggle, disabled: disabled || readonly, title: isAutoPlaying ? "자동 재생 정지" : "자동 재생 시작", type: "button", children: isAutoPlaying ? jsx(PauseIcon, { size: iconSize, color: "currentColor" }) : jsx(PlayIcon, { size: iconSize, color: "currentColor" }) }))] })] }));
 };
 
-const Chip = ({ label, size = 'm', variant = 'default', color = 'primary', deletable = false, onDelete, onClick, startIcon, endIcon, disabled = false, selected = false, fullWidth = false, className, ...props }) => {
-    // 사이즈별 아이콘 크기
-    const getIconSize = () => {
-        switch (size) {
-            case 's':
-                return 12;
-            case 'm':
-                return 16;
-            case 'l':
-                return 20;
-            default:
-                return 16;
-        }
-    };
-    const iconSize = getIconSize();
-    const handleDelete = (e) => {
-        e.stopPropagation();
-        if (!disabled && onDelete) {
-            onDelete();
-        }
-    };
-    const handleClick = () => {
-        if (!disabled && onClick) {
-            onClick();
-        }
-    };
-    const classes = clsx('designbase-chip', `designbase-chip--${size}`, `designbase-chip--${variant}`, {
-        'designbase-chip--deletable': deletable,
-        'designbase-chip--disabled': disabled,
-        'designbase-chip--selected': selected,
-        'designbase-chip--clickable': onClick,
-        'designbase-chip--full-width': fullWidth,
-    }, className);
-    return (jsxs("div", { className: classes, role: onClick ? 'button' : undefined, tabIndex: onClick && !disabled ? 0 : undefined, onClick: handleClick, onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                handleClick();
-            }
-        }, ...props, children: [startIcon && (jsx("span", { className: "designbase-chip__start-icon", children: React.isValidElement(startIcon)
-                    ? React.cloneElement(startIcon, { size: iconSize })
-                    : startIcon })), jsx("span", { className: "designbase-chip__label", children: label }), endIcon && !deletable && (jsx("span", { className: "designbase-chip__end-icon", children: React.isValidElement(endIcon)
-                    ? React.cloneElement(endIcon, { size: iconSize })
-                    : endIcon })), deletable && (jsx("button", { type: "button", className: "designbase-chip__delete-button", onClick: handleDelete, disabled: disabled, "aria-label": `${label} 삭제`, children: jsx("svg", { width: iconSize, height: iconSize, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }))] }));
-};
-Chip.displayName = 'Chip';
-
 /* ----------------------- 유틸 ----------------------- */
 const clamp = (n, min, max) => Math.max(min, Math.min(max, n));
 const normalizeHex = (s) => (s || '').trim().toUpperCase();
@@ -8255,6 +8310,32 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     return (jsxs("section", { className: classes, style: containerStyle, children: [renderBackground(), renderOverlay(), jsxs("div", { className: "designbase-hero-feature__container", children: [jsxs("div", { className: "designbase-hero-feature__content", children: [icon && (jsx("div", { className: "designbase-hero-feature__icon", children: icon })), renderBadge(), jsx("h1", { className: "designbase-hero-feature__title", children: title }), subtitle && (jsx("h2", { className: "designbase-hero-feature__subtitle", children: subtitle })), description && (jsx("p", { className: "designbase-hero-feature__description", children: description })), renderButtons(), renderStats()] }), variant === 'split' && renderImage()] }), variant !== 'split' && renderImage()] }));
 };
 
+/**
+ * ImagePlaceholder 컴포넌트
+ *
+ * 이미지가 없거나 업로드 전 대기 상태일 때 격자 패턴과 라벨을 보여주는 자리표시자입니다.
+ */
+const ImagePlaceholder = ({ className, style, label, showLabel = false, patternSize = 20, patternColor = '#f3f3f3', backgroundColor = '#e7e7e7', width = '100%', height, aspectRatio, hoverEffect = false, onClick, }) => {
+    const rootStyle = {
+        width,
+        height,
+        aspectRatio,
+        ...style,
+    };
+    const patternStyle = {
+        '--db-placeholder-bg': backgroundColor,
+        '--db-placeholder-pattern': patternColor,
+        '--db-placeholder-size': `${patternSize}px`,
+        '--db-placeholder-half-size': `${patternSize / 2}px`,
+    };
+    const classes = clsx('designbase-image-placeholder', {
+        'designbase-image-placeholder--hover': hoverEffect,
+        'designbase-image-placeholder--clickable': !!onClick,
+    }, className);
+    return (jsxs("div", { className: classes, style: rootStyle, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [jsx("div", { className: "designbase-image-placeholder__pattern", style: patternStyle }), showLabel && label && (jsx("div", { className: "designbase-image-placeholder__label-wrap", children: jsx("span", { className: "designbase-image-placeholder__label", children: label }) }))] }));
+};
+ImagePlaceholder.displayName = 'ImagePlaceholder';
+
 const Lightbox = ({ images, currentIndex = 0, size = 'l', isOpen, onOpenChange, onImageChange, enableZoom = true, enableRotate = true, enableDownload = true, enableFullscreen = true, enableKeyboard = true, enableWheelZoom = true, showThumbnails = true, showCounter = true, showCloseButton = true, showNavigationButtons = true, showToolbar = true, closeOnBackdropClick = true, closeOnEscape = true, className, }) => {
     const [internalCurrentIndex, setInternalCurrentIndex] = useState(currentIndex);
     const [zoomLevel, setZoomLevel] = useState(1);
@@ -9354,6 +9435,17 @@ const OnboardingModal = ({ steps, currentStep = 0, isOpen, onClose, onStepChange
 };
 OnboardingModal.displayName = 'OnboardingModal';
 
+/**
+ * PageHeader 컴포넌트
+ *
+ * 브레드크럼, 타이틀, 서브타이틀, 설명 및 액션(버튼, 탭 등)을 포함하는 페이지 헤더 섹션입니다.
+ */
+const PageHeader = ({ title, description, subtitle, breadcrumbs, actions, align = 'center', className, }) => {
+    const classes = clsx('designbase-page-header', `designbase-page-header--${align}`, className);
+    return (jsxs("div", { className: classes, children: [breadcrumbs && breadcrumbs.length > 0 && (jsx("div", { className: "designbase-page-header__breadcrumbs", children: jsx(Breadcrumbs, { items: breadcrumbs, size: "s" }) })), jsxs("div", { className: "designbase-page-header__content", children: [jsx("h1", { className: "designbase-page-header__title", children: title }), subtitle && (jsx("h2", { className: "designbase-page-header__subtitle", children: subtitle })), description && (jsx("div", { className: "designbase-page-header__description", children: description }))] }), actions && (jsx("div", { className: "designbase-page-header__actions", children: actions }))] }));
+};
+PageHeader.displayName = 'PageHeader';
+
 const Tutorial = ({ steps, currentStep = 0, isActive, onStart, onEnd, onStepChange, onNext, onPrev, indicatorType = 'numbers', indicatorSize = 'm', closeIcon: CloseIconComponent = CloseIcon, prevIcon: PrevIconComponent = ChevronLeftIcon, nextIcon: NextIconComponent = ChevronRightIcon, className, ...props }) => {
     const [internalStep, setInternalStep] = useState(currentStep);
     const [targetElement, setTargetElement] = useState(null);
@@ -10038,7 +10130,7 @@ const Progress = ({ value, max = 100, size = 'm', variant = 'default', type = 'l
     return (jsx("div", { className: classes, children: type === 'linear' ? renderLinearProgress() : renderCircularProgress() }));
 };
 
-const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0, clickable = false, fullWidth = false, disabled = false, className, style, onStepClick, }) => {
+const ProgressStep = ({ items, size = 'm', layout = 'horizontal', currentStep = 0, clickable = false, fullWidth = false, disabled = false, className, style, onStepClick, }) => {
     const handleStepClick = (item, index) => {
         if (disabled || item.disabled || !clickable)
             return;
@@ -10076,7 +10168,7 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
                                         e.preventDefault();
                                         handleStepClick(item, index);
                                     }
-                                }, children: [status === 'active' && (jsx("div", { className: "designbase-progress-step__pulse" })), item.icon ? (jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsx("span", { className: "designbase-progress-step__number", children: index + 1 }))] }), !isLast && (jsx("div", { className: connectorClasses }))] }), jsxs("div", { className: "designbase-progress-step__content", children: [jsxs("div", { className: "designbase-progress-step__header", children: [jsx("h3", { className: "designbase-progress-step__title", children: item.title }), item.timestamp && (jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] }), item.description && (jsx("p", { className: "designbase-progress-step__description", children: item.description }))] })] }, item.id));
+                                }, children: [status === 'active' && (jsx("div", { className: "designbase-progress-step__pulse" })), item.icon ? (jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsx("div", { className: "designbase-progress-step__icon", children: status === 'completed' ? (jsx(DoneIcon$1, { size: size === 's' ? 12 : size === 'l' ? 20 : 16 })) : status === 'error' ? (jsx(WarningFilledIcon, { size: size === 's' ? 12 : size === 'l' ? 20 : 16 })) : (jsx("span", { className: "designbase-progress-step__number", children: index + 1 })) }))] }), !isLast && (jsx("div", { className: connectorClasses }))] }), jsxs("div", { className: "designbase-progress-step__content", children: [jsx("div", { className: "designbase-progress-step__header", children: jsx("h3", { className: "designbase-progress-step__title", children: item.title }) }), item.description && (jsx("p", { className: "designbase-progress-step__description", children: item.description })), item.timestamp && (jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] })] }, item.id));
         }) }));
 };
 
@@ -12182,6 +12274,28 @@ 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 }))] }) }));
 };
 
+/**
+ * TopBanner 컴포넌트
+ *
+ * 페이지 최상단에 위치하여 공지사항이나 프로모션을 안내하는 슬림한 배너입니다.
+ */
+const TopBanner = ({ badgeText, content, image, linkText, onLinkPress, onClose, variant = 'primary', fixed = false, className, }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    if (!isVisible)
+        return null;
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose?.();
+    };
+    const isDarkBg = variant === 'primary' || variant === 'dark';
+    const classes = clsx('designbase-top-banner', `designbase-top-banner--${variant}`, {
+        'designbase-top-banner--fixed': fixed,
+        'designbase-top-banner--has-image': !!image,
+    }, className);
+    return (jsx("div", { className: classes, role: "alert", children: jsxs("div", { className: "designbase-top-banner__container", children: [jsxs("div", { className: "designbase-top-banner__content", children: [image && (jsx("div", { className: "designbase-top-banner__image-wrapper", children: jsx("img", { src: image, alt: "", className: "designbase-top-banner__image" }) })), badgeText && (jsx(Badge, { size: "s", variant: isDarkBg ? 'secondary' : 'primary', style: "text", className: "designbase-top-banner__badge", children: badgeText })), jsx("span", { className: "designbase-top-banner__text", children: content }), linkText && (jsx(Button, { className: "designbase-top-banner__link", variant: isDarkBg ? 'secondary' : 'ghost', size: "s", onPress: onLinkPress, endIcon: ChevronRightIcon, children: linkText }))] }), jsx(Button, { className: "designbase-top-banner__close", variant: "ghost", size: "m", iconOnly: true, onPress: handleClose, "aria-label": "\uB2EB\uAE30", children: jsx(CloseIcon, {}) })] }) }));
+};
+TopBanner.displayName = 'TopBanner';
+
 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);
@@ -12634,5 +12748,5 @@ const YouTubePlayer = ({ videoId, title, description, size = 'm', variant = 'def
 };
 YouTubePlayer.displayName = 'YouTubePlayer';
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, useToast };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, ImagePlaceholder, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Marquee, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, PageHeader, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, TopBanner, Tutorial, VideoPlayer, YouTubePlayer, useToast };
 //# sourceMappingURL=index.esm.js.map