@designbasekorea/ui 0.2.33 → 0.2.35

package/dist/index.js

@@ -2477,58 +2477,57 @@ const Button = React.forwardRef(({ variant = 'primary', size = 'm', radius, full
 });
 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 () => {
@@ -2546,13 +2545,54 @@ const RandomGradient = ({ scheme = 'primary', tone = 'vivid', width = '100%', he
             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());
@@ -3973,7 +4013,7 @@ ModalHeader.displayName = 'ModalHeader';
 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}`,
@@ -4020,7 +4060,7 @@ const Input = React.forwardRef(({ type = 'text', label, placeholder, defaultValu
         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';
 
@@ -6963,7 +7003,7 @@ const Textarea = React.forwardRef(({ label, placeholder, defaultValue, value, si
     }, 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,