@designbasekorea/ui 0.1.37 → 0.1.39

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useCallback, useEffect, useRef, useMemo, useContext, forwardRef, useId, useLayoutEffect } from 'react';
-import { ChevronDownIcon, CloseIcon, InfoFilledIcon, ErrorFilledIcon, WarningFilledIcon, CircleCheckFilledIcon, RefreshIcon, ChevronLeftIcon, PauseIcon, PlayIcon, ChevronRightIcon, RepeatIcon, MuteFilledIcon, VolumeUpIcon, SettingsIcon, UserIcon, HideIcon, ShowIcon, SearchIcon, ChevronUpIcon, GalleryIcon, HeartIcon, BookmarkIcon, ShareAltIcon, DownloadIcon, ArrowLeftIcon, ArrowRightIcon, 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, StarFilledIcon, StarHalfIcon, StarIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, XIcon, InstagramIcon, LinkedinIcon, PinterestIcon, WhatsappIcon, TelegramIcon, MailIcon, LinkIcon, ScanQrcodeIcon, VerticalArrowsIcon, CaretUpdownFilledIcon } from '@designbasekorea/icons';
+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';
 
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -2262,6 +2262,80 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
 });
 Button.displayName = 'Button';
 
+const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, className, }) => {
+    const [isVisible, setIsVisible] = useState(true);
+    const [progress, setProgress] = useState(100);
+    useEffect(() => {
+        if (autoClose) {
+            const interval = setInterval(() => {
+                setProgress(prev => {
+                    const newProgress = prev - (100 / (closeDelay / 100));
+                    if (newProgress <= 0) {
+                        handleClose();
+                        clearInterval(interval);
+                        return 0;
+                    }
+                    return newProgress;
+                });
+            }, 100);
+            return () => clearInterval(interval);
+        }
+    }, [autoClose, closeDelay]);
+    const handleClose = () => {
+        setIsVisible(false);
+        onClose?.();
+    };
+    const handleCtaClick = () => {
+        onCtaClick?.();
+    };
+    if (!isVisible)
+        return null;
+    const classes = clsx('designbase-ad-banner', `designbase-ad-banner--type-${type}`, `designbase-ad-banner--variant-${variant}`, {
+        'designbase-ad-banner--auto-close': autoClose,
+    }, className);
+    // 기본 아이콘
+    const defaultIcons = {
+        hero: jsx(StarIcon, { size: 24 }),
+        topbar: jsx(TrendingUpIcon, { size: 24 }),
+        card: jsx(StarFilledIcon, { size: 32 }),
+        floating: jsx(CartIcon, { size: 28 }),
+    };
+    const displayIcon = icon || defaultIcons[type];
+    const displayTitle = title || getDefaultTitle(type);
+    const displaySubtitle = subtitle || getDefaultSubtitle(type);
+    const displayCtaText = ctaText || getDefaultCtaText(type);
+    return (jsx("div", { className: classes, children: jsxs("div", { className: "designbase-ad-banner__content", children: [jsx("button", { className: "designbase-ad-banner__close", onClick: handleClose, "aria-label": "\uB2EB\uAE30", children: jsx(CloseIcon, { size: type === 'hero' ? 20 : 18 }) }), type === 'hero' && (jsxs(Fragment, { children: [jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--top" }), jsx("div", { className: "designbase-ad-banner__decoration designbase-ad-banner__decoration--bottom" })] })), jsxs("div", { className: "designbase-ad-banner__main", children: [jsxs("div", { className: "designbase-ad-banner__icon", children: [displayIcon, type === 'topbar' && (jsx("span", { className: "designbase-ad-banner__label", children: "\uD2B9\uBCC4 \uC774\uBCA4\uD2B8" })), type === 'floating' && (jsx("span", { className: "designbase-ad-banner__badge", children: "HOT DEAL" }))] }), jsxs("div", { className: "designbase-ad-banner__text", children: [jsx("h2", { className: "designbase-ad-banner__title", children: displayTitle }), jsx("p", { className: "designbase-ad-banner__subtitle", children: displaySubtitle })] }), jsx("div", { className: "designbase-ad-banner__actions", children: jsxs(Button, { variant: "primary", size: type === 'hero' ? 'l' : type === 'card' ? 's' : 'm', onPress: handleCtaClick, className: "designbase-ad-banner__cta", fullWidth: type === 'floating', children: [displayCtaText, jsx(ArrowRightIcon, { size: type === 'hero' ? 20 : 16 })] }) })] }), autoClose && (jsx("div", { className: "designbase-ad-banner__progress", children: jsx("div", { className: "designbase-ad-banner__progress-bar", style: { width: `${progress}%` } }) }))] }) }));
+};
+// 기본 텍스트 헬퍼
+function getDefaultTitle(type) {
+    const titles = {
+        hero: '지금 바로 시작하세요',
+        topbar: '🎉 신규 가입 시 10,000원 적립금 증정!',
+        card: '프리미엄 멤버십',
+        floating: '오늘만 특가!',
+    };
+    return titles[type];
+}
+function getDefaultSubtitle(type) {
+    const subtitles = {
+        hero: '최대 50% 할인된 가격으로 프리미엄 서비스를 경험해보세요. 기간 한정 특별 혜택!',
+        topbar: '오늘 하루만 특별 혜택',
+        card: '무제한 서비스 이용권을 특별가에 만나보세요',
+        floating: '장바구니에 담긴 상품 추가 20% 할인',
+    };
+    return subtitles[type];
+}
+function getDefaultCtaText(type) {
+    const ctaTexts = {
+        hero: '자세히 보기',
+        topbar: '지금 가입하기',
+        card: '알아보기',
+        floating: '할인받기',
+    };
+    return ctaTexts[type];
+}
+AdBanner.displayName = 'AdBanner';
+
 const Alert = ({ title, children, variant = 'info', size = 'm', showIcon = true, closable = true, actions, actionButtons, onClose, className, ...props }) => {
     const [isVisible, setIsVisible] = useState(true);
     const handleClose = () => {
@@ -8543,70 +8617,70 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
         }) }));
 };
 
-// Designbase 테마 변수 기반 색상 계열
+// Designbase 테마 기반 색상 계열 (hex 값 사용)
 const colorSchemes = {
     primary: [
-        'var(--color-foundation-blue-400)',
-        'var(--color-foundation-blue-500)',
-        'var(--color-foundation-blue-600)',
-        'var(--color-foundation-indigo-500)',
-        'var(--color-foundation-indigo-600)',
+        '#48c3ff', // blue-400
+        '#1ea2ff', // blue-500
+        '#0683ff', // blue-600
+        '#006fff', // blue-700
+        '#0855c5', // blue-800
     ],
     secondary: [
-        'var(--color-foundation-gray-400)',
-        'var(--color-foundation-gray-500)',
-        'var(--color-foundation-gray-600)',
-        'var(--color-foundation-slate-500)',
-        'var(--color-foundation-slate-600)',
+        '#a4adb2', // neutral-400
+        '#8c9499', // neutral-500
+        '#757b80', // neutral-600
+        '#5e6366', // neutral-700
+        '#464a4d', // neutral-800
     ],
     success: [
-        'var(--color-foundation-green-400)',
-        'var(--color-foundation-green-500)',
-        'var(--color-foundation-green-600)',
-        'var(--color-foundation-emerald-500)',
-        'var(--color-foundation-teal-500)',
+        '#4ade80', // green-400
+        '#22c55e', // green-500
+        '#16a34a', // green-600
+        '#14b8a6', // teal-500
+        '#0d9485', // teal-600
     ],
     warning: [
-        'var(--color-foundation-amber-400)',
-        'var(--color-foundation-amber-500)',
-        'var(--color-foundation-orange-400)',
-        'var(--color-foundation-orange-500)',
-        'var(--color-foundation-yellow-500)',
+        '#ff8c32', // orange-400
+        '#ff6b0a', // orange-500
+        '#ff5100', // orange-600
+        '#ffe50d', // yellow-400
+        '#ffd600', // yellow-500
     ],
     error: [
-        'var(--color-foundation-red-400)',
-        'var(--color-foundation-red-500)',
-        'var(--color-foundation-red-600)',
-        'var(--color-foundation-rose-500)',
-        'var(--color-foundation-pink-500)',
+        '#f87171', // red-400
+        '#ef4444', // red-500
+        '#dc2626', // red-600
+        '#b91c1c', // red-700
+        '#991b1b', // red-800
     ],
     info: [
-        'var(--color-foundation-cyan-400)',
-        'var(--color-foundation-cyan-500)',
-        'var(--color-foundation-sky-400)',
-        'var(--color-foundation-sky-500)',
-        'var(--color-foundation-blue-400)',
+        '#48c3ff', // blue-400
+        '#1ea2ff', // blue-500
+        '#0683ff', // blue-600
+        '#006fff', // blue-700
+        '#0855c5', // blue-800
     ],
     purple: [
-        'var(--color-foundation-purple-400)',
-        'var(--color-foundation-purple-500)',
-        'var(--color-foundation-purple-600)',
-        'var(--color-foundation-violet-500)',
-        'var(--color-foundation-fuchsia-500)',
+        '#a385ff', // purple-400
+        '#8a58ff', // purple-500
+        '#7830f7', // purple-600
+        '#6a1ee3', // purple-700
+        '#5818bf', // purple-800
     ],
     ocean: [
-        'var(--color-foundation-blue-500)',
-        'var(--color-foundation-cyan-500)',
-        'var(--color-foundation-teal-500)',
-        'var(--color-foundation-sky-500)',
-        'var(--color-foundation-indigo-500)',
+        '#1ea2ff', // blue-500
+        '#48c3ff', // blue-400
+        '#2dd4c2', // teal-400
+        '#14b8a6', // teal-500
+        '#0d9485', // teal-600
     ],
     sunset: [
-        'var(--color-foundation-orange-400)',
-        'var(--color-foundation-orange-500)',
-        'var(--color-foundation-red-400)',
-        'var(--color-foundation-pink-400)',
-        'var(--color-foundation-rose-400)',
+        '#ff8c32', // orange-400
+        '#ff6b0a', // orange-500
+        '#ff5100', // orange-600
+        '#ef4444', // red-500
+        '#f87171', // red-400
     ],
 };
 const RandomGradient = ({ scheme = 'primary', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
@@ -11190,5 +11264,5 @@ const toggleTheme = () => {
     console.log('toggleTheme called');
 };
 
-export { Accordion, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, 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, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, 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, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, 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, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, 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, Textarea, TimePicker, Timeline, Toast, Toggle, Toolbar, Tooltip, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme };
 //# sourceMappingURL=index.esm.js.map