@designbasekorea/ui 0.2.33 → 0.2.35

package/dist/index.umd.js

@@ -2476,58 +2476,57 @@
     });
     Button.displayName = 'Button';
 
-    // 톤별 색상 팔레트
+    // 톤별 색상 팔레트 (Light Tone은 더 밝은 색상만 사용)
     const colorPalettes = {
         primary: {
-            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
+            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'], // blue-50 ~ blue-300 (더 밝게, blue-400 제거)
             vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
             dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
         },
         secondary: {
-            light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8'], // slate-50 ~ slate-400 (더 밝게)
+            light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1'], // slate-50 ~ slate-300 (더 밝게, slate-400 제거)
             vivid: ['#6b7280', '#4b5563', '#374151', '#1f2937', '#111827'], // gray-500 ~ gray-900
             dark: ['#0f0f0f', '#1a1a1a', '#262626', '#404040', '#525252'], // neutral-950 ~ neutral-600 (더 어둡게)
         },
         success: {
-            light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80'], // green-50 ~ green-400 (더 밝게)
+            light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac'], // green-50 ~ green-300 (더 밝게, green-400 제거)
             vivid: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d'], // green-500 ~ green-900
             dark: ['#052e16', '#14532d', '#166534', '#15803d', '#16a34a'], // green-950 ~ green-600 (더 어둡게)
         },
         warning: {
-            light: ['#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24'], // amber-50 ~ amber-400 (더 밝게)
+            light: ['#fffbeb', '#fef3c7', '#fde68a'], // amber-50 ~ amber-200 (더 밝게, amber-300 이상 제거)
             vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'], // amber-600 ~ amber-900
             dark: ['#451a03', '#78350f', '#92400e', '#b45309', '#d97706'], // amber-950 ~ amber-600 (더 어둡게)
         },
         error: {
-            light: ['#fef2f2', '#fecaca', '#fca5a5', '#f87171', '#f56565'], // red-50 ~ red-400 (더 밝게)
+            light: ['#fef2f2', '#fecaca', '#fca5a5'], // red-50 ~ red-200 (더 밝게, red-300 이상 제거)
             vivid: ['#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d'], // red-500 ~ red-900
             dark: ['#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626'], // red-950 ~ red-600 (더 어둡게)
         },
         info: {
-            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
+            light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd'], // blue-50 ~ blue-300 (더 밝게, blue-400 제거)
             vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
             dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
         },
         purple: {
-            light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe', '#c084fc'], // purple-50 ~ purple-400 (더 밝게)
+            light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe'], // purple-50 ~ purple-300 (더 밝게, purple-400 제거)
             vivid: ['#a855f7', '#9333ea', '#7c3aed', '#6d28d9', '#5b21b6'], // purple-600 ~ purple-900
             dark: ['#3b0764', '#581c87', '#6b21a8', '#7c3aed', '#9333ea'], // purple-950 ~ purple-600 (더 어둡게)
         },
         ocean: {
-            light: ['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf'], // teal-50 ~ teal-400 (더 밝게)
+            light: ['#f0fdfa', '#ccfbf1', '#99f6e4'], // teal-50 ~ teal-200 (더 밝게, teal-300 이상 제거)
             vivid: ['#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a'], // teal-500 ~ teal-900
             dark: ['#042f2e', '#134e4a', '#115e59', '#0f766e', '#0d9488'], // teal-950 ~ teal-600 (더 어둡게)
         },
         sunset: {
-            light: ['#fff7ed', '#fed7aa', '#fdba74', '#fb923c', '#f97316'], // orange-50 ~ orange-500 (더 밝게)
+            light: ['#fff7ed', '#fed7aa', '#fdba74'], // orange-50 ~ orange-200 (더 밝게, orange-300 이상 제거)
             vivid: ['#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12'], // orange-600 ~ orange-900
             dark: ['#431407', '#7c2d12', '#9a3412', '#c2410c', '#ea580c'], // orange-950 ~ orange-600 (더 어둡게)
         },
     };
-    const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', height = '600px', blur = 60, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
-        const [gradientStyle, setGradientStyle] = React.useState({});
-        // 블러 최소값 60으로 제한
-        const minBlur = Math.max(60, blur);
+    const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', height = '600px', blur = 80, colorCount = 4, animated = false, animationDuration = 10, overlay = true, overlayOpacity = 0.2, children, className, }) => {
+        // 블러 최소값 80으로 제한 (더 부드러운 그라데이션을 위해)
+        const minBlur = Math.max(80, blur);
         // 그라데이션 생성 함수
         const generateGradient = React.useMemo(() => {
             return () => {
@@ -2545,13 +2544,54 @@
                 return {
                     background: `radial-gradient(circle at ${centerX}% ${centerY}%, ${gradientStops})`,
                     filter: `blur(${minBlur}px)`,
-                    transition: `all ${animationDuration}s ease-in-out`,
+                    transition: animated ? `background ${animationDuration}s ease-in-out` : 'none', // 블러는 transition 적용 안 함
                 };
             };
-        }, [scheme, tone, colorCount, minBlur, animationDuration]);
-        // 초기 그라데이션 및 애니메이션
+        }, [scheme, tone, colorCount, minBlur, animationDuration, animated]);
+        // 초기 그라데이션 생성 함수
+        const createInitialGradient = React.useCallback(() => {
+            const schemeColors = colorPalettes[scheme][tone];
+            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(${minBlur}px)`,
+                transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+            };
+        }, [scheme, tone, colorCount, minBlur, animated, animationDuration]);
+        // 초기 그라데이션을 즉시 계산하여 설정 (useState 초기값 함수 사용)
+        const [gradientStyle, setGradientStyle] = React.useState(() => {
+            const schemeColors = colorPalettes[scheme][tone];
+            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(${minBlur}px)`,
+                transition: animated ? `background ${animationDuration}s ease-in-out` : 'none',
+            };
+        });
+        // props 변경 시 그라데이션 업데이트
+        React.useEffect(() => {
+            setGradientStyle(createInitialGradient());
+        }, [createInitialGradient]);
+        // 애니메이션 업데이트
         React.useEffect(() => {
-            setGradientStyle(generateGradient());
             if (animated) {
                 const interval = setInterval(() => {
                     setGradientStyle(generateGradient());
@@ -3972,7 +4012,7 @@
     ModalBody.displayName = 'ModalBody';
     ModalFooter.displayName = 'ModalFooter';
 
-    const Label = ({ children, htmlFor, required = false, size = 'm', disabled = false, error = false, className, onClick, }) => {
+    const Label = ({ children, htmlFor, required = false, size = 's', disabled = false, error = false, className, onClick, }) => {
         const classes = [
             'designbase-label',
             `designbase-label--${size}`,
@@ -4019,7 +4059,7 @@
             lg: 18,
         };
         const iconSize = iconSizeMap[size];
-        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), jsxRuntime.jsxs("div", { className: "designbase-input__wrapper", children: [actualStartIcon && (jsxRuntime.jsx("div", { className: "designbase-input__start-icon", children: React.createElement(actualStartIcon, { size: iconSize }) })), jsxRuntime.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: actualType, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), isPassword && (jsxRuntime.jsx("button", { type: "button", className: "designbase-input__password-toggle", onClick: handlePasswordToggle, disabled: disabled, "aria-label": showPassword ? '비밀번호 숨기기' : '비밀번호 보기', children: React.createElement(PasswordIcon, { size: iconSize }) })), EndIcon && !isPassword && (jsxRuntime.jsx("div", { className: "designbase-input__end-icon", children: React.createElement(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntime.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
+        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 's' : size === 'm' ? 'm' : 'l', children: label })), jsxRuntime.jsxs("div", { className: "designbase-input__wrapper", children: [actualStartIcon && (jsxRuntime.jsx("div", { className: "designbase-input__start-icon", children: React.createElement(actualStartIcon, { size: iconSize }) })), jsxRuntime.jsx("input", { ...props, ref: forwardedRef, id: inputId, type: actualType, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, required: required, className: inputClasses, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, "aria-describedby": clsx(helperText && helperTextId, error && errorMessage && errorMessageId), "aria-invalid": error }), isPassword && (jsxRuntime.jsx("button", { type: "button", className: "designbase-input__password-toggle", onClick: handlePasswordToggle, disabled: disabled, "aria-label": showPassword ? '비밀번호 숨기기' : '비밀번호 보기', children: React.createElement(PasswordIcon, { size: iconSize }) })), EndIcon && !isPassword && (jsxRuntime.jsx("div", { className: "designbase-input__end-icon", children: React.createElement(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsxRuntime.jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
     });
     Input.displayName = 'Input';
 
@@ -6962,7 +7002,7 @@
         }, className);
         const textareaClasses = clsx('designbase-textarea__field', textareaClassName);
         const isOverLimit = maxLength && currentLength > maxLength;
-        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: textareaId, required: required, error: error, disabled: disabled, size: size === 's' ? 'xs' : size === 'm' ? 's' : 'm', children: label })), showCharacterCount && characterCountPosition === 'top' && (jsxRuntime.jsx("div", { className: "designbase-textarea__character-count designbase-textarea__character-count--top", children: jsxRuntime.jsxs("span", { className: clsx('designbase-textarea__character-count-text', {
+        return (jsxRuntime.jsxs("div", { className: classes, children: [label && (jsxRuntime.jsx(Label, { htmlFor: textareaId, required: required, error: error, disabled: disabled, size: size === 's' ? 's' : size === 'm' ? 'm' : 'l', children: label })), showCharacterCount && characterCountPosition === 'top' && (jsxRuntime.jsx("div", { className: "designbase-textarea__character-count designbase-textarea__character-count--top", children: jsxRuntime.jsxs("span", { className: clsx('designbase-textarea__character-count-text', {
                             'designbase-textarea__character-count-text--error': isOverLimit
                         }), children: [currentLength, maxLength && ` / ${maxLength}`] }) })), jsxRuntime.jsx("div", { className: "designbase-textarea__wrapper", children: jsxRuntime.jsx("textarea", { ref: forwardedRef, id: textareaId, className: textareaClasses, placeholder: placeholder, defaultValue: defaultValue, value: value, rows: rows, maxLength: maxLength, disabled: disabled, readOnly: readOnly, required: required, "aria-describedby": clsx({
                             [helperTextId]: helperText,