@designbasekorea/ui 0.1.41 → 0.1.43

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, 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 { 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, XIcon, ArrowBarLeftIcon, ArrowBarRightIcon, StarHalfIcon, MoveIcon, MoreVerticalIcon, ArrowDownIcon, ArrowUpLeftIcon, ArrowUpRightIcon, ArrowDownLeftIcon, ArrowDownRightIcon, FacebookIcon, 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}
@@ -2265,49 +2265,49 @@ Button.displayName = 'Button';
 // 톤별 색상 팔레트
 const colorPalettes = {
     primary: {
-        light: ['#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6'], // blue-100 ~ blue-500
+        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
         vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
-        dark: ['#1e3a8a', '#1e40af', '#1d4ed8', '#2563eb', '#3b82f6'], // blue-900 ~ blue-500
+        dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
     },
     secondary: {
-        light: ['#f3f4f6', '#e5e7eb', '#d1d5db', '#9ca3af', '#6b7280'], // gray-100 ~ gray-500
+        light: ['#f8fafc', '#f1f5f9', '#e2e8f0', '#cbd5e1', '#94a3b8'], // slate-50 ~ slate-400 (더 밝게)
         vivid: ['#6b7280', '#4b5563', '#374151', '#1f2937', '#111827'], // gray-500 ~ gray-900
-        dark: ['#111827', '#1f2937', '#374151', '#4b5563', '#6b7280'], // gray-900 ~ gray-500
+        dark: ['#0f0f0f', '#1a1a1a', '#262626', '#404040', '#525252'], // neutral-950 ~ neutral-600 (더 어둡게)
     },
     success: {
-        light: ['#dcfce7', '#bbf7d0', '#86efac', '#4ade80', '#22c55e'], // green-100 ~ green-500
+        light: ['#f0fdf4', '#dcfce7', '#bbf7d0', '#86efac', '#4ade80'], // green-50 ~ green-400 (더 밝게)
         vivid: ['#22c55e', '#16a34a', '#15803d', '#166534', '#14532d'], // green-500 ~ green-900
-        dark: ['#14532d', '#166534', '#15803d', '#16a34a', '#22c55e'], // green-900 ~ green-500
+        dark: ['#052e16', '#14532d', '#166534', '#15803d', '#16a34a'], // green-950 ~ green-600 (더 어둡게)
     },
     warning: {
-        light: ['#fef3c7', '#fde68a', '#fcd34d', '#f59e0b', '#d97706'], // yellow-100 ~ yellow-600
-        vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'], // yellow-600 ~ yellow-900
-        dark: ['#78350f', '#92400e', '#b45309', '#d97706', '#f59e0b'], // yellow-900 ~ yellow-600
+        light: ['#fffbeb', '#fef3c7', '#fde68a', '#fcd34d', '#fbbf24'], // amber-50 ~ amber-400 (더 밝게)
+        vivid: ['#f59e0b', '#d97706', '#b45309', '#92400e', '#78350f'], // amber-600 ~ amber-900
+        dark: ['#451a03', '#78350f', '#92400e', '#b45309', '#d97706'], // amber-950 ~ amber-600 (더 어둡게)
     },
     error: {
-        light: ['#fecaca', '#fca5a5', '#f87171', '#ef4444', '#dc2626'], // red-100 ~ red-600
+        light: ['#fef2f2', '#fecaca', '#fca5a5', '#f87171', '#f56565'], // red-50 ~ red-400 (더 밝게)
         vivid: ['#ef4444', '#dc2626', '#b91c1c', '#991b1b', '#7f1d1d'], // red-500 ~ red-900
-        dark: ['#7f1d1d', '#991b1b', '#b91c1c', '#dc2626', '#ef4444'], // red-900 ~ red-500
+        dark: ['#450a0a', '#7f1d1d', '#991b1b', '#b91c1c', '#dc2626'], // red-950 ~ red-600 (더 어둡게)
     },
     info: {
-        light: ['#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa', '#3b82f6'], // blue-100 ~ blue-500
+        light: ['#eff6ff', '#dbeafe', '#bfdbfe', '#93c5fd', '#60a5fa'], // blue-50 ~ blue-400 (더 밝게)
         vivid: ['#3b82f6', '#2563eb', '#1d4ed8', '#1e40af', '#1e3a8a'], // blue-500 ~ blue-900
-        dark: ['#1e3a8a', '#1e40af', '#1d4ed8', '#2563eb', '#3b82f6'], // blue-900 ~ blue-500
+        dark: ['#0f172a', '#1e293b', '#334155', '#475569', '#64748b'], // slate-900 ~ slate-600 (더 어둡게)
     },
     purple: {
-        light: ['#e9d5ff', '#d8b4fe', '#c084fc', '#a855f7', '#9333ea'], // purple-100 ~ purple-600
+        light: ['#faf5ff', '#f3e8ff', '#e9d5ff', '#d8b4fe', '#c084fc'], // purple-50 ~ purple-400 (더 밝게)
         vivid: ['#a855f7', '#9333ea', '#7c3aed', '#6d28d9', '#5b21b6'], // purple-600 ~ purple-900
-        dark: ['#5b21b6', '#6d28d9', '#7c3aed', '#9333ea', '#a855f7'], // purple-900 ~ purple-600
+        dark: ['#3b0764', '#581c87', '#6b21a8', '#7c3aed', '#9333ea'], // purple-950 ~ purple-600 (더 어둡게)
     },
     ocean: {
-        light: ['#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf', '#14b8a6'], // teal-100 ~ teal-500
+        light: ['#f0fdfa', '#ccfbf1', '#99f6e4', '#5eead4', '#2dd4bf'], // teal-50 ~ teal-400 (더 밝게)
         vivid: ['#14b8a6', '#0d9488', '#0f766e', '#115e59', '#134e4a'], // teal-500 ~ teal-900
-        dark: ['#134e4a', '#115e59', '#0f766e', '#0d9488', '#14b8a6'], // teal-900 ~ teal-500
+        dark: ['#042f2e', '#134e4a', '#115e59', '#0f766e', '#0d9488'], // teal-950 ~ teal-600 (더 어둡게)
     },
     sunset: {
-        light: ['#fed7aa', '#fdba74', '#fb923c', '#f97316', '#ea580c'], // orange-100 ~ orange-600
+        light: ['#fff7ed', '#fed7aa', '#fdba74', '#fb923c', '#f97316'], // orange-50 ~ orange-500 (더 밝게)
         vivid: ['#f97316', '#ea580c', '#c2410c', '#9a3412', '#7c2d12'], // orange-600 ~ orange-900
-        dark: ['#7c2d12', '#9a3412', '#c2410c', '#ea580c', '#f97316'], // orange-900 ~ orange-600
+        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, }) => {
@@ -8144,10 +8144,48 @@ const Masonry = ({ images, columns = 3, spacing = 'm', ratio = 'auto', fit = 'co
                 })), currentIndex: selectedImageIndex, isOpen: true, onOpenChange: handleLightboxClose, onImageChange: handleLightboxNavigate }))] }));
 };
 
-const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
+const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = SearchIcon, clearIcon: ClearIconComponent = CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
     const [internalValue, setInternalValue] = useState(defaultValue);
+    const [recentSearches, setRecentSearches] = useState([]);
+    const [showRecentSearches, setShowRecentSearches] = useState(false);
+    const [currentSuggestion, setCurrentSuggestion] = useState(0);
+    const [isFocused, setIsFocused] = useState(false);
     const inputRef = useRef(null);
+    const suggestionIntervalRef = useRef(null);
     const currentValue = value !== undefined ? value : internalValue;
+    // 최근 검색어 로드
+    useEffect(() => {
+        if (enableRecentSearches) {
+            try {
+                const stored = localStorage.getItem(recentSearchesKey);
+                if (stored) {
+                    setRecentSearches(JSON.parse(stored));
+                }
+            }
+            catch (error) {
+                console.warn('최근 검색어를 불러올 수 없습니다:', error);
+            }
+        }
+    }, [enableRecentSearches, recentSearchesKey]);
+    // 추천 검색어 롤링
+    useEffect(() => {
+        if (suggestedSearches.length > 0 && isFocused && !currentValue) {
+            suggestionIntervalRef.current = setInterval(() => {
+                setCurrentSuggestion(prev => (prev + 1) % suggestedSearches.length);
+            }, suggestionRollingInterval);
+        }
+        else {
+            if (suggestionIntervalRef.current) {
+                clearInterval(suggestionIntervalRef.current);
+                suggestionIntervalRef.current = null;
+            }
+        }
+        return () => {
+            if (suggestionIntervalRef.current) {
+                clearInterval(suggestionIntervalRef.current);
+            }
+        };
+    }, [suggestedSearches.length, isFocused, currentValue, suggestionRollingInterval]);
     useEffect(() => {
         if (value !== undefined) {
             setInternalValue(value);
@@ -8163,9 +8201,24 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         onChange?.('');
         inputRef.current?.focus();
     };
-    const handleSearch = () => {
-        if (currentValue.trim()) {
-            onSearch?.(currentValue.trim());
+    const handleSearch = (searchValue) => {
+        const searchTerm = searchValue || currentValue.trim();
+        if (searchTerm) {
+            onSearch?.(searchTerm);
+            // 최근 검색어 저장
+            if (enableRecentSearches) {
+                const newRecentSearches = [
+                    searchTerm,
+                    ...recentSearches.filter(item => item !== searchTerm)
+                ].slice(0, 10); // 최대 10개
+                setRecentSearches(newRecentSearches);
+                try {
+                    localStorage.setItem(recentSearchesKey, JSON.stringify(newRecentSearches));
+                }
+                catch (error) {
+                    console.warn('최근 검색어를 저장할 수 없습니다:', error);
+                }
+            }
         }
     };
     const handleKeyDown = (e) => {
@@ -8174,6 +8227,49 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         }
         onKeyDown?.(e);
     };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        setShowRecentSearches(enableRecentSearches && recentSearches.length > 0);
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        // 약간의 지연을 두어 클릭 이벤트가 처리되도록 함
+        setTimeout(() => {
+            setShowRecentSearches(false);
+        }, 200);
+        onBlur?.(e);
+    };
+    const handleRecentSearchClick = (searchTerm) => {
+        setInternalValue(searchTerm);
+        onChange?.(searchTerm);
+        setShowRecentSearches(false);
+        handleSearch(searchTerm);
+    };
+    const handleRemoveRecentSearch = (searchTerm) => {
+        const newRecentSearches = recentSearches.filter(item => item !== searchTerm);
+        setRecentSearches(newRecentSearches);
+        try {
+            localStorage.setItem(recentSearchesKey, JSON.stringify(newRecentSearches));
+        }
+        catch (error) {
+            console.warn('최근 검색어를 삭제할 수 없습니다:', error);
+        }
+    };
+    const handleClearAllRecentSearches = () => {
+        setRecentSearches([]);
+        try {
+            localStorage.removeItem(recentSearchesKey);
+        }
+        catch (error) {
+            console.warn('최근 검색어를 모두 삭제할 수 없습니다:', error);
+        }
+    };
+    const handleSuggestionClick = (suggestion) => {
+        setInternalValue(suggestion);
+        onChange?.(suggestion);
+        handleSearch(suggestion);
+    };
     const classes = clsx('designbase-search-bar', `designbase-search-bar--${size}`, `designbase-search-bar--${variant}`, {
         'designbase-search-bar--disabled': disabled,
         'designbase-search-bar--readonly': readOnly,
@@ -8184,7 +8280,13 @@ const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size =
         'designbase-search-bar__input--disabled': disabled,
         'designbase-search-bar__input--readonly': readOnly,
     });
-    return (jsx("div", { className: classes, role: "search", children: jsxs("div", { className: "designbase-search-bar__container", children: [jsx("div", { className: "designbase-search-bar__search-icon", children: jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }) }));
+    // 현재 플레이스홀더 (추천 검색어가 있으면 롤링)
+    const currentPlaceholder = suggestedSearches.length > 0 && isFocused && !currentValue
+        ? suggestedSearches[currentSuggestion]
+        : placeholder;
+    return (jsxs("div", { className: classes, role: "search", children: [jsxs("div", { className: "designbase-search-bar__container", children: [jsx("div", { className: "designbase-search-bar__search-icon", children: jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsx("input", { ref: inputRef, type: "text", className: inputClasses, value: currentValue, placeholder: currentPlaceholder, disabled: disabled, readOnly: readOnly, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, "aria-label": "\uAC80\uC0C9\uC5B4 \uC785\uB825", ...props }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsx("button", { type: "button", className: "designbase-search-bar__clear-all-button", onClick: handleClearAllRecentSearches, "aria-label": "\uBAA8\uB4E0 \uCD5C\uADFC \uAC80\uC0C9\uC5B4 \uC0AD\uC81C", children: "\uC804\uCCB4 \uC0AD\uC81C" })] }), jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsx(XIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsx("button", { type: "button", className: clsx('designbase-search-bar__suggestion-item', {
+                                'designbase-search-bar__suggestion-item--active': index === currentSuggestion
+                            }), onClick: () => handleSuggestionClick(suggestion), children: suggestion }, index))) })] }))] }));
 };
 SearchBar.displayName = 'SearchBar';