@designbasekorea/ui 0.6.0 → 0.6.1

package/dist/index.js

@@ -8257,6 +8257,32 @@ const HeroFeature = ({ title, subtitle, description, image, imageAlt, background
     return (jsxRuntime.jsxs("section", { className: classes, style: containerStyle, children: [renderBackground(), renderOverlay(), jsxRuntime.jsxs("div", { className: "designbase-hero-feature__container", children: [jsxRuntime.jsxs("div", { className: "designbase-hero-feature__content", children: [icon && (jsxRuntime.jsx("div", { className: "designbase-hero-feature__icon", children: icon })), renderBadge(), jsxRuntime.jsx("h1", { className: "designbase-hero-feature__title", children: title }), subtitle && (jsxRuntime.jsx("h2", { className: "designbase-hero-feature__subtitle", children: subtitle })), description && (jsxRuntime.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 (jsxRuntime.jsxs("div", { className: classes, style: rootStyle, onClick: onClick, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: [jsxRuntime.jsx("div", { className: "designbase-image-placeholder__pattern", style: patternStyle }), showLabel && label && (jsxRuntime.jsx("div", { className: "designbase-image-placeholder__label-wrap", children: jsxRuntime.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] = React.useState(currentIndex);
     const [zoomLevel, setZoomLevel] = React.useState(1);
@@ -9356,6 +9382,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 (jsxRuntime.jsxs("div", { className: classes, children: [breadcrumbs && breadcrumbs.length > 0 && (jsxRuntime.jsx("div", { className: "designbase-page-header__breadcrumbs", children: jsxRuntime.jsx(Breadcrumbs, { items: breadcrumbs, size: "s" }) })), jsxRuntime.jsxs("div", { className: "designbase-page-header__content", children: [jsxRuntime.jsx("h1", { className: "designbase-page-header__title", children: title }), subtitle && (jsxRuntime.jsx("h2", { className: "designbase-page-header__subtitle", children: subtitle })), description && (jsxRuntime.jsx("div", { className: "designbase-page-header__description", children: description }))] }), actions && (jsxRuntime.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 = icons.CloseIcon, prevIcon: PrevIconComponent = icons.ChevronLeftIcon, nextIcon: NextIconComponent = icons.ChevronRightIcon, className, ...props }) => {
     const [internalStep, setInternalStep] = React.useState(currentStep);
     const [targetElement, setTargetElement] = React.useState(null);
@@ -10040,7 +10077,7 @@ const Progress = ({ value, max = 100, size = 'm', variant = 'default', type = 'l
     return (jsxRuntime.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;
@@ -10078,7 +10115,7 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
                                         e.preventDefault();
                                         handleStepClick(item, index);
                                     }
-                                }, children: [status === 'active' && (jsxRuntime.jsx("div", { className: "designbase-progress-step__pulse" })), item.icon ? (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsxRuntime.jsx("span", { className: "designbase-progress-step__number", children: index + 1 }))] }), !isLast && (jsxRuntime.jsx("div", { className: connectorClasses }))] }), jsxRuntime.jsxs("div", { className: "designbase-progress-step__content", children: [jsxRuntime.jsxs("div", { className: "designbase-progress-step__header", children: [jsxRuntime.jsx("h3", { className: "designbase-progress-step__title", children: item.title }), item.timestamp && (jsxRuntime.jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] }), item.description && (jsxRuntime.jsx("p", { className: "designbase-progress-step__description", children: item.description }))] })] }, item.id));
+                                }, children: [status === 'active' && (jsxRuntime.jsx("div", { className: "designbase-progress-step__pulse" })), item.icon ? (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: item.icon })) : (jsxRuntime.jsx("div", { className: "designbase-progress-step__icon", children: status === 'completed' ? (jsxRuntime.jsx(icons.DoneIcon, { size: size === 's' ? 12 : size === 'l' ? 20 : 16 })) : status === 'error' ? (jsxRuntime.jsx(icons.WarningFilledIcon, { size: size === 's' ? 12 : size === 'l' ? 20 : 16 })) : (jsxRuntime.jsx("span", { className: "designbase-progress-step__number", children: index + 1 })) }))] }), !isLast && (jsxRuntime.jsx("div", { className: connectorClasses }))] }), jsxRuntime.jsxs("div", { className: "designbase-progress-step__content", children: [jsxRuntime.jsx("div", { className: "designbase-progress-step__header", children: jsxRuntime.jsx("h3", { className: "designbase-progress-step__title", children: item.title }) }), item.description && (jsxRuntime.jsx("p", { className: "designbase-progress-step__description", children: item.description })), item.timestamp && (jsxRuntime.jsx("span", { className: "designbase-progress-step__timestamp", children: item.timestamp }))] })] }, item.id));
         }) }));
 };
 
@@ -12184,6 +12221,28 @@ const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', ful
     return (jsxRuntime.jsx("div", { className: classes, children: jsxRuntime.jsxs("div", { className: "designbase-toolbar__content", children: [Object.entries(groupedItems).map(([groupName, groupItems], groupIndex) => (jsxRuntime.jsxs("div", { className: "designbase-toolbar__group", children: [groupItems.map(renderItem), groupIndex < Object.keys(groupedItems).length - 1 && (jsxRuntime.jsx("div", { className: "designbase-toolbar__group-separator" }))] }, groupName))), children && (jsxRuntime.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] = React.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 (jsxRuntime.jsx("div", { className: classes, role: "alert", children: jsxRuntime.jsxs("div", { className: "designbase-top-banner__container", children: [jsxRuntime.jsxs("div", { className: "designbase-top-banner__content", children: [image && (jsxRuntime.jsx("div", { className: "designbase-top-banner__image-wrapper", children: jsxRuntime.jsx("img", { src: image, alt: "", className: "designbase-top-banner__image" }) })), badgeText && (jsxRuntime.jsx(Badge, { size: "s", variant: isDarkBg ? 'secondary' : 'primary', style: "text", className: "designbase-top-banner__badge", children: badgeText })), jsxRuntime.jsx("span", { className: "designbase-top-banner__text", children: content }), linkText && (jsxRuntime.jsx(Button, { className: "designbase-top-banner__link", variant: isDarkBg ? 'secondary' : 'ghost', size: "s", onPress: onLinkPress, endIcon: icons.ChevronRightIcon, children: linkText }))] }), jsxRuntime.jsx(Button, { className: "designbase-top-banner__close", variant: "ghost", size: "m", iconOnly: true, onPress: handleClose, "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.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 = React.useRef(null);
     const containerRef = React.useRef(null);
@@ -12686,6 +12745,7 @@ exports.Grid = Grid;
 exports.HeroFeature = HeroFeature;
 exports.Image = Image$1;
 exports.ImageList = ImageList;
+exports.ImagePlaceholder = ImagePlaceholder;
 exports.Indicator = Indicator;
 exports.Input = Input;
 exports.Label = Label;
@@ -12702,6 +12762,7 @@ exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
 exports.Navbar = Navbar;
 exports.OnboardingModal = OnboardingModal;
+exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Popover = Popover;
 exports.Progress = Progress;
@@ -12738,6 +12799,7 @@ exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Toolbar = Toolbar;
 exports.Tooltip = Tooltip;
+exports.TopBanner = TopBanner;
 exports.Tutorial = Tutorial;
 exports.VideoPlayer = VideoPlayer;
 exports.YouTubePlayer = YouTubePlayer;