@designbasekorea/ui 0.1.36 → 0.1.37

package/dist/index.js

@@ -8545,6 +8545,123 @@ const ProgressStep = ({ items, size = 'm', layout = 'vertical', currentStep = 0,
         }) }));
 };
 
+// Designbase 테마 변수 기반 색상 계열
+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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+    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)',
+    ],
+};
+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] = React.useState({});
+    // 그라데이션 생성 함수
+    const generateGradient = React.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]);
+    // 초기 그라데이션 및 애니메이션
+    React.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 (jsxRuntime.jsxs("div", { className: classes, style: containerStyle, children: [jsxRuntime.jsx("div", { className: "designbase-random-gradient__background", style: gradientStyle }), overlay && (jsxRuntime.jsx("div", { className: "designbase-random-gradient__overlay", style: overlayStyle })), children && (jsxRuntime.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] = React.useState(value ?? min);
     const [internalRange, setInternalRange] = React.useState(range ?? [min, max]);
@@ -11130,6 +11247,7 @@ exports.Progress = Progress;
 exports.ProgressStep = ProgressStep;
 exports.Progressbar = Progressbar;
 exports.Radio = Radio;
+exports.RandomGradient = RandomGradient;
 exports.RangeSlider = RangeSlider;
 exports.Rating = Rating;
 exports.Reorder = Reorder;