@designbasekorea/ui 0.1.39 → 0.1.40

package/dist/index.esm.js

@@ -2262,7 +2262,124 @@ 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, }) => {
+// Designbase 테마 기반 색상 계열 (hex 값 사용)
+const colorSchemes = {
+    primary: [
+        '#48c3ff', // blue-400
+        '#1ea2ff', // blue-500
+        '#0683ff', // blue-600
+        '#006fff', // blue-700
+        '#0855c5', // blue-800
+    ],
+    secondary: [
+        '#a4adb2', // neutral-400
+        '#8c9499', // neutral-500
+        '#757b80', // neutral-600
+        '#5e6366', // neutral-700
+        '#464a4d', // neutral-800
+    ],
+    success: [
+        '#4ade80', // green-400
+        '#22c55e', // green-500
+        '#16a34a', // green-600
+        '#14b8a6', // teal-500
+        '#0d9485', // teal-600
+    ],
+    warning: [
+        '#ff8c32', // orange-400
+        '#ff6b0a', // orange-500
+        '#ff5100', // orange-600
+        '#ffe50d', // yellow-400
+        '#ffd600', // yellow-500
+    ],
+    error: [
+        '#f87171', // red-400
+        '#ef4444', // red-500
+        '#dc2626', // red-600
+        '#b91c1c', // red-700
+        '#991b1b', // red-800
+    ],
+    info: [
+        '#48c3ff', // blue-400
+        '#1ea2ff', // blue-500
+        '#0683ff', // blue-600
+        '#006fff', // blue-700
+        '#0855c5', // blue-800
+    ],
+    purple: [
+        '#a385ff', // purple-400
+        '#8a58ff', // purple-500
+        '#7830f7', // purple-600
+        '#6a1ee3', // purple-700
+        '#5818bf', // purple-800
+    ],
+    ocean: [
+        '#1ea2ff', // blue-500
+        '#48c3ff', // blue-400
+        '#2dd4c2', // teal-400
+        '#14b8a6', // teal-500
+        '#0d9485', // teal-600
+    ],
+    sunset: [
+        '#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, }) => {
+    const [gradientStyle, setGradientStyle] = useState({});
+    // 그라데이션 생성 함수
+    const generateGradient = useMemo(() => {
+        return () => {
+            const schemeColors = colorSchemes[scheme];
+            const numColors = Math.min(6, Math.max(3, colorCount));
+            const colors = [];
+            for (let i = 0; i < numColors; i++) {
+                const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
+                colors.push(randomColor);
+            }
+            const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
+            const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
+            const centerX = Math.random() * 100;
+            const centerY = Math.random() * 100;
+            return {
+                background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
+                filter: `blur(${blur}px)`,
+                transition: `all ${animationDuration}s ease-in-out`,
+            };
+        };
+    }, [scheme, colorCount, blur, animationDuration]);
+    // 초기 그라데이션 및 애니메이션
+    useEffect(() => {
+        setGradientStyle(generateGradient());
+        if (animated) {
+            const interval = setInterval(() => {
+                setGradientStyle(generateGradient());
+            }, animationDuration * 1000);
+            return () => clearInterval(interval);
+        }
+    }, [animated, animationDuration, generateGradient]);
+    const classes = clsx('designbase-random-gradient', {
+        'designbase-random-gradient--animated': animated,
+        'designbase-random-gradient--with-overlay': overlay,
+    }, className);
+    const containerStyle = {
+        width: typeof width === 'number' ? `${width}px` : width,
+        height: typeof height === 'number' ? `${height}px` : height,
+    };
+    const overlayStyle = overlay
+        ? {
+            background: `linear-gradient(45deg, ${colorSchemes[scheme][0]}, ${colorSchemes[scheme][1]})`,
+            opacity: overlayOpacity,
+        }
+        : {};
+    return (jsxs("div", { className: classes, style: containerStyle, children: [jsx("div", { className: "designbase-random-gradient__background", style: gradientStyle }), overlay && (jsx("div", { className: "designbase-random-gradient__overlay", style: overlayStyle })), children && (jsx("div", { className: "designbase-random-gradient__content", children: children }))] }));
+};
+RandomGradient.displayName = 'RandomGradient';
+
+const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText, onCtaClick, onClose, autoClose = false, closeDelay = 5000, icon, useRandomGradient = false, gradientScheme, gradientAnimated = true, className, }) => {
     const [isVisible, setIsVisible] = useState(true);
     const [progress, setProgress] = useState(100);
     useEffect(() => {
@@ -2292,6 +2409,7 @@ const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText
         return null;
     const classes = clsx('designbase-ad-banner', `designbase-ad-banner--type-${type}`, `designbase-ad-banner--variant-${variant}`, {
         'designbase-ad-banner--auto-close': autoClose,
+        'designbase-ad-banner--with-gradient': useRandomGradient,
     }, className);
     // 기본 아이콘
     const defaultIcons = {
@@ -2304,7 +2422,23 @@ const AdBanner = ({ type = 'hero', variant = 'primary', title, subtitle, ctaText
     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}%` } }) }))] }) }));
+    // variant에 따른 그라데이션 색상 계열 매핑
+    const getGradientScheme = () => {
+        if (gradientScheme)
+            return gradientScheme;
+        const schemeMap = {
+            primary: 'primary',
+            secondary: 'secondary',
+            success: 'success',
+            warning: 'warning',
+            error: 'error',
+            gradient: 'sunset',
+        };
+        return schemeMap[variant];
+    };
+    // 배너 컨텐츠
+    const bannerContent = (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' && !useRandomGradient && (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}%` } }) }))] }));
+    return (jsx("div", { className: classes, children: useRandomGradient ? (jsx(RandomGradient, { scheme: getGradientScheme(), animated: gradientAnimated, height: "100%", width: "100%", className: "designbase-ad-banner__gradient-bg", children: bannerContent })) : (bannerContent) }));
 };
 // 기본 텍스트 헬퍼
 function getDefaultTitle(type) {
@@ -8617,123 +8751,6 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
         }) }));
 };
 
-// Designbase 테마 기반 색상 계열 (hex 값 사용)
-const colorSchemes = {
-    primary: [
-        '#48c3ff', // blue-400
-        '#1ea2ff', // blue-500
-        '#0683ff', // blue-600
-        '#006fff', // blue-700
-        '#0855c5', // blue-800
-    ],
-    secondary: [
-        '#a4adb2', // neutral-400
-        '#8c9499', // neutral-500
-        '#757b80', // neutral-600
-        '#5e6366', // neutral-700
-        '#464a4d', // neutral-800
-    ],
-    success: [
-        '#4ade80', // green-400
-        '#22c55e', // green-500
-        '#16a34a', // green-600
-        '#14b8a6', // teal-500
-        '#0d9485', // teal-600
-    ],
-    warning: [
-        '#ff8c32', // orange-400
-        '#ff6b0a', // orange-500
-        '#ff5100', // orange-600
-        '#ffe50d', // yellow-400
-        '#ffd600', // yellow-500
-    ],
-    error: [
-        '#f87171', // red-400
-        '#ef4444', // red-500
-        '#dc2626', // red-600
-        '#b91c1c', // red-700
-        '#991b1b', // red-800
-    ],
-    info: [
-        '#48c3ff', // blue-400
-        '#1ea2ff', // blue-500
-        '#0683ff', // blue-600
-        '#006fff', // blue-700
-        '#0855c5', // blue-800
-    ],
-    purple: [
-        '#a385ff', // purple-400
-        '#8a58ff', // purple-500
-        '#7830f7', // purple-600
-        '#6a1ee3', // purple-700
-        '#5818bf', // purple-800
-    ],
-    ocean: [
-        '#1ea2ff', // blue-500
-        '#48c3ff', // blue-400
-        '#2dd4c2', // teal-400
-        '#14b8a6', // teal-500
-        '#0d9485', // teal-600
-    ],
-    sunset: [
-        '#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, }) => {
-    const [gradientStyle, setGradientStyle] = useState({});
-    // 그라데이션 생성 함수
-    const generateGradient = useMemo(() => {
-        return () => {
-            const schemeColors = colorSchemes[scheme];
-            const numColors = Math.min(6, Math.max(3, colorCount));
-            const colors = [];
-            for (let i = 0; i < numColors; i++) {
-                const randomColor = schemeColors[Math.floor(Math.random() * schemeColors.length)];
-                colors.push(randomColor);
-            }
-            const positions = Array.from({ length: numColors }, () => Math.random() * 100).sort((a, b) => a - b);
-            const gradientStops = colors.map((color, i) => `${color} ${positions[i]}%`).join(', ');
-            const centerX = Math.random() * 100;
-            const centerY = Math.random() * 100;
-            return {
-                background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
-                filter: `blur(${blur}px)`,
-                transition: `all ${animationDuration}s ease-in-out`,
-            };
-        };
-    }, [scheme, colorCount, blur, animationDuration]);
-    // 초기 그라데이션 및 애니메이션
-    useEffect(() => {
-        setGradientStyle(generateGradient());
-        if (animated) {
-            const interval = setInterval(() => {
-                setGradientStyle(generateGradient());
-            }, animationDuration * 1000);
-            return () => clearInterval(interval);
-        }
-    }, [animated, animationDuration, generateGradient]);
-    const classes = clsx('designbase-random-gradient', {
-        'designbase-random-gradient--animated': animated,
-        'designbase-random-gradient--with-overlay': overlay,
-    }, className);
-    const containerStyle = {
-        width: typeof width === 'number' ? `${width}px` : width,
-        height: typeof height === 'number' ? `${height}px` : height,
-    };
-    const overlayStyle = overlay
-        ? {
-            background: `linear-gradient(45deg, ${colorSchemes[scheme][0]}, ${colorSchemes[scheme][1]})`,
-            opacity: overlayOpacity,
-        }
-        : {};
-    return (jsxs("div", { className: classes, style: containerStyle, children: [jsx("div", { className: "designbase-random-gradient__background", style: gradientStyle }), overlay && (jsx("div", { className: "designbase-random-gradient__overlay", style: overlayStyle })), children && (jsx("div", { className: "designbase-random-gradient__content", children: children }))] }));
-};
-RandomGradient.displayName = 'RandomGradient';
-
 const RangeSlider = ({ value, range, min = 0, max = 100, step = 1, size = 'm', variant = 'default', showValue = false, showMarks = false, marks = [], markLabels = {}, disabled = false, readOnly = false, fullWidth = false, vertical = false, onChange, onRangeChange, className, ...props }) => {
     const [internalValue, setInternalValue] = useState(value ?? min);
     const [internalRange, setInternalRange] = useState(range ?? [min, max]);