@designbasekorea/ui 0.2.41 → 0.3.1

package/dist/index.umd.js

@@ -2417,23 +2417,18 @@
                 return `designbase-button--radius-${radius}`;
             }
             // 아이콘 전용 버튼도 일반 버튼과 동일한 radius 적용
-            return `designbase-button--radius-${size === 'xs' || size === 's' ? 's' : size === 'l' || size === 'xl' ? 'l' : 'm'}`;
+            if (size === 's')
+                return 'designbase-button--radius-s';
+            if (size === 'l')
+                return 'designbase-button--radius-l';
+            return 'designbase-button--radius-m';
         };
         const classes = clsx('designbase-button', `designbase-button--${variant}`, `designbase-button--${size}`, getRadiusClass(), {
             'designbase-button--full-width': fullWidth,
             'designbase-button--loading': loading,
             'designbase-button--icon-only': iconOnly,
         }, className);
-        const iconSize = (() => {
-            switch (size) {
-                case 'xs': return 12;
-                case 's': return 14;
-                case 'm': return 16;
-                case 'l': return 18;
-                case 'xl': return 20;
-                default: return 16;
-            }
-        })();
+        const iconSize = size === 's' ? 14 : size === 'l' ? 18 : 16;
         // 아이콘 색상 결정
         const getIconColor = () => {
             switch (variant) {
@@ -2453,7 +2448,7 @@
         };
         const renderContent = () => {
             if (loading) {
-                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { type: "circular", size: size === 'xs' ? 'xs' : size === 's' ? 's' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsxRuntime.jsx("span", { children: "\uB85C\uB529 \uC911..." })] }));
+                return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Spinner, { type: "circular", size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsxRuntime.jsx("span", { children: "\uB85C\uB529 \uC911..." })] }));
             }
             // iconOnly 버튼일 때는 children을 아이콘으로 처리
             if (iconOnly && children && React.isValidElement(children)) {
@@ -4012,7 +4007,7 @@
     ModalBody.displayName = 'ModalBody';
     ModalFooter.displayName = 'ModalFooter';
 
-    const Label = ({ children, htmlFor, required = false, size = 's', disabled = false, error = false, className, onClick, }) => {
+    const Label = ({ children, htmlFor, id, required = false, size = 's', disabled = false, error = false, className, onClick, }) => {
         const classes = [
             'designbase-label',
             `designbase-label--${size}`,
@@ -4022,7 +4017,7 @@
         ]
             .filter(Boolean)
             .join(' ');
-        return (jsxRuntime.jsxs("label", { htmlFor: htmlFor, className: classes, onClick: onClick, children: [children, required && jsxRuntime.jsx("span", { className: "designbase-label__required", children: "*" })] }));
+        return (jsxRuntime.jsxs("label", { htmlFor: htmlFor, id: id, className: classes, onClick: onClick, children: [children, required && jsxRuntime.jsx("span", { className: "designbase-label__required", children: "*" })] }));
     };
     Label.displayName = 'Label';
 
@@ -4053,12 +4048,17 @@
             'designbase-input--with-end-icon': EndIcon || isPassword,
         }, className);
         const inputClasses = clsx('designbase-input__field', inputClassName);
-        const iconSizeMap = {
-            sm: 14,
-            md: 16,
-            lg: 18,
-        };
-        const iconSize = iconSizeMap[size];
+        const iconSize = React.useMemo(() => {
+            switch (size) {
+                case 's':
+                    return 16;
+                case 'l':
+                    return 24;
+                case 'm':
+                default:
+                    return 20;
+            }
+        }, [size]);
         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';
@@ -4099,6 +4099,157 @@
     });
     Checkbox.displayName = 'Checkbox';
 
+    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...rest }) => {
+        const [internalValue, setInternalValue] = React.useState(defaultValue);
+        const [recentSearches, setRecentSearches] = React.useState([]);
+        const [showRecentSearches, setShowRecentSearches] = React.useState(false);
+        const [currentSuggestion, setCurrentSuggestion] = React.useState(0);
+        const [isFocused, setIsFocused] = React.useState(false);
+        const inputRef = React.useRef(null);
+        const suggestionIntervalRef = React.useRef(null);
+        const currentValue = value !== undefined ? value : internalValue;
+        // 최근 검색어 로드
+        React.useEffect(() => {
+            if (enableRecentSearches) {
+                try {
+                    const stored = localStorage.getItem(recentSearchesKey);
+                    if (stored) {
+                        setRecentSearches(JSON.parse(stored));
+                    }
+                }
+                catch (error) {
+                    console.warn('최근 검색어를 불러올 수 없습니다:', error);
+                }
+            }
+        }, [enableRecentSearches, recentSearchesKey]);
+        // 추천 검색어 롤링 (value가 없을 때만)
+        React.useEffect(() => {
+            if (suggestedSearches.length > 0 && !currentValue && 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, currentValue, suggestionRollingInterval]);
+        React.useEffect(() => {
+            if (value !== undefined) {
+                setInternalValue(value);
+            }
+        }, [value]);
+        const handleChange = (e) => {
+            const newValue = e.target.value;
+            setInternalValue(newValue);
+            onChange?.(newValue);
+        };
+        const handleClear = () => {
+            setInternalValue('');
+            onChange?.('');
+            inputRef.current?.focus();
+        };
+        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) => {
+            if (e.key === 'Enter') {
+                handleSearch();
+            }
+            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);
+            // 롤링 중단
+            if (suggestionIntervalRef.current) {
+                clearInterval(suggestionIntervalRef.current);
+                suggestionIntervalRef.current = null;
+            }
+            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,
+            'designbase-search-bar--full-width': fullWidth,
+            'designbase-search-bar--has-value': currentValue && currentValue.length > 0,
+        }, className);
+        const inputClasses = clsx('designbase-search-bar__input', {
+            'designbase-search-bar__input--disabled': disabled,
+            'designbase-search-bar__input--readonly': readOnly,
+        });
+        // 현재 플레이스홀더 (value가 없을 때만 추천 검색어 롤링)
+        const currentPlaceholder = suggestedSearches.length > 0 && !currentValue && currentValue === ''
+            ? suggestedSearches[currentSuggestion]
+            : placeholder;
+        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.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", ...rest }), currentValue && currentValue.length > 0 && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.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" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.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';
+
     const Select = ({ value, defaultValue, options, label, placeholder = '선택하세요', multiple = false, searchable = false, disabled = false, readOnly = false, required = false, error = false, errorMessage, helperText, size = 'm', fullWidth = false, dropdownWidth = 'auto', position = 'bottom', maxHeight = 200, showClearButton = true, className, onChange, onFocus, onBlur, ...props }) => {
         const [isOpen, setIsOpen] = React.useState(false);
         const [selectedValue, setSelectedValue] = React.useState(value ?? defaultValue ?? (multiple ? [] : ''));
@@ -4243,9 +4394,6 @@
             setSelectedValue(newValue);
             onChange?.(newValue);
         };
-        const handleSearchChange = (e) => {
-            setSearchTerm(e.target.value);
-        };
         const classes = clsx('designbase-select', `designbase-select--${size}`, {
             'designbase-select--open': isOpen,
             'designbase-select--error': error,
@@ -4253,9 +4401,11 @@
             'designbase-select--readonly': readOnly,
             'designbase-select--full-width': fullWidth,
             'designbase-select--multiple': multiple,
+            'designbase-select--searchable': searchable,
         }, className);
         const triggerClasses = clsx('designbase-select__trigger', {
             'designbase-select__trigger--focused': isOpen,
+            'designbase-select__trigger--searchable': searchable,
         });
         const dropdownClasses = clsx('designbase-select__dropdown', `designbase-select__dropdown--${dropdownWidth}`, `designbase-select__dropdown--${position}`, {
             'designbase-select__dropdown--open': isOpen,
@@ -4263,23 +4413,23 @@
         const filteredOptions = getFilteredOptions();
         const selectedLabels = getSelectedLabels();
         const hasValue = multiple ? selectedValue.length > 0 : selectedValue !== '';
-        return (jsxRuntime.jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { className: "designbase-select__label", children: [label, required && jsxRuntime.jsx("span", { className: "designbase-select__required", children: "*" })] })), jsxRuntime.jsxs("div", { className: triggerClasses, onClick: handleToggle, onFocus: onFocus, onBlur: onBlur, tabIndex: disabled || readOnly ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? 'select-label' : undefined, ...props, children: [jsxRuntime.jsx("div", { className: "designbase-select__value", children: multiple ? (jsxRuntime.jsxs("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: [selectedValue.map((value) => {
-                                        const option = options.find(opt => opt.value === value);
-                                        return (jsxRuntime.jsxs("span", { className: "designbase-select__tag", children: [jsxRuntime.jsx("span", { className: "designbase-select__tag-label", children: option?.label || value }), jsxRuntime.jsx("button", { type: "button", className: "designbase-select__tag-remove", onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        handleRemoveValue(value);
-                                                    }, children: jsxRuntime.jsx(icons.CloseIcon, { size: 12 }) })] }, value));
-                                    }), searchable && isOpen && (jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: "designbase-select__search-input", value: searchTerm, onChange: handleSearchChange, placeholder: "\uAC80\uC0C9...", onClick: (e) => e.stopPropagation() }))] })) : (jsxRuntime.jsx("span", { className: "designbase-select__single-value", children: selectedLabels || placeholder })) }), jsxRuntime.jsxs("div", { className: "designbase-select__indicators", children: [showClearButton && hasValue && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-select__clear-button", onClick: handleClearAll, "aria-label": "\uBAA8\uB4E0 \uAC12 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })), jsxRuntime.jsx("div", { className: "designbase-select__chevron", children: isOpen ? jsxRuntime.jsx(icons.ChevronUpIcon, { size: 16 }) : jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] })] }), jsxRuntime.jsx("div", { className: dropdownClasses, ref: dropdownRef, children: jsxRuntime.jsx("div", { className: "designbase-select__options", style: { maxHeight: `${maxHeight}px` }, role: "listbox", children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "designbase-select__no-options", children: searchTerm ? '검색 결과가 없습니다.' : '옵션이 없습니다.' })) : (filteredOptions.map((option, index) => {
-                            const isSelected = multiple
-                                ? selectedValue.includes(option.value)
-                                : selectedValue === option.value;
-                            const isFocused = index === focusedIndex;
-                            return (jsxRuntime.jsxs("div", { className: clsx('designbase-select__option', {
-                                    'designbase-select__option--selected': isSelected,
-                                    'designbase-select__option--focused': isFocused,
-                                    'designbase-select__option--disabled': option.disabled,
-                                }), onClick: () => handleOptionSelect(option), role: "option", "aria-selected": isSelected, children: [multiple && (jsxRuntime.jsx("div", { className: "designbase-select__checkbox", children: jsxRuntime.jsx(Checkbox, { isSelected: isSelected, isDisabled: option.disabled, size: "s", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsxRuntime.jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
-                        })) }) }), helperText && !error && (jsxRuntime.jsx("p", { className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsxRuntime.jsx("p", { className: "designbase-select__error-message", children: errorMessage }))] }));
+        return (jsxRuntime.jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxRuntime.jsxs("label", { className: "designbase-select__label", children: [label, required && jsxRuntime.jsx("span", { className: "designbase-select__required", children: "*" })] })), jsxRuntime.jsxs("div", { className: triggerClasses, onClick: handleToggle, onFocus: onFocus, onBlur: onBlur, tabIndex: disabled || readOnly ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-labelledby": label ? 'select-label' : undefined, ...props, children: [jsxRuntime.jsx("div", { className: "designbase-select__value", children: multiple ? (jsxRuntime.jsx("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: selectedValue.map((value) => {
+                                    const option = options.find(opt => opt.value === value);
+                                    return (jsxRuntime.jsxs("span", { className: "designbase-select__tag", children: [jsxRuntime.jsx("span", { className: "designbase-select__tag-label", children: option?.label || value }), jsxRuntime.jsx("button", { type: "button", className: "designbase-select__tag-remove", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    handleRemoveValue(value);
+                                                }, children: jsxRuntime.jsx(icons.CloseIcon, { size: 12 }) })] }, value));
+                                }) })) : (jsxRuntime.jsx("span", { className: "designbase-select__single-value", children: selectedLabels || placeholder })) }), jsxRuntime.jsxs("div", { className: "designbase-select__indicators", children: [showClearButton && hasValue && !disabled && !readOnly && (jsxRuntime.jsx("button", { type: "button", className: "designbase-select__clear-button", onClick: handleClearAll, "aria-label": "\uBAA8\uB4E0 \uAC12 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })), jsxRuntime.jsx("div", { className: "designbase-select__chevron", children: isOpen ? jsxRuntime.jsx(icons.ChevronUpIcon, { size: 16 }) : jsxRuntime.jsx(icons.ChevronDownIcon, { size: 16 }) })] })] }), jsxRuntime.jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [searchable && (jsxRuntime.jsx("div", { className: "designbase-select__search", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: jsxRuntime.jsx(SearchBar, { value: searchTerm, onChange: (value) => setSearchTerm(value), onSearch: (val) => setSearchTerm(val), placeholder: "\uC635\uC158 \uAC80\uC0C9", size: size, variant: "outlined", fullWidth: true, onFocus: (e) => e.stopPropagation(), onBlur: (e) => e.stopPropagation() }) })), jsxRuntime.jsx("div", { className: "designbase-select__options", style: { maxHeight: `${maxHeight}px` }, role: "listbox", children: filteredOptions.length === 0 ? (jsxRuntime.jsx("div", { className: "designbase-select__no-options", children: searchTerm ? '검색 결과가 없습니다.' : '옵션이 없습니다.' })) : (filteredOptions.map((option, index) => {
+                                const isSelected = multiple
+                                    ? selectedValue.includes(option.value)
+                                    : selectedValue === option.value;
+                                const isFocused = index === focusedIndex;
+                                return (jsxRuntime.jsxs("div", { className: clsx('designbase-select__option', {
+                                        'designbase-select__option--selected': isSelected,
+                                        'designbase-select__option--focused': isFocused,
+                                        'designbase-select__option--disabled': option.disabled,
+                                    }), onClick: () => handleOptionSelect(option), role: "option", "aria-selected": isSelected, children: [multiple && (jsxRuntime.jsx("div", { className: "designbase-select__checkbox", children: jsxRuntime.jsx(Checkbox, { isSelected: isSelected, isDisabled: option.disabled, size: "s", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsxRuntime.jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
+                            })) })] }), helperText && !error && (jsxRuntime.jsx("p", { className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsxRuntime.jsx("p", { className: "designbase-select__error-message", children: errorMessage }))] }));
     };
     Select.displayName = 'Select';
 
@@ -5220,8 +5370,6 @@
         const handleTouchEndEvent = React.useCallback(() => {
             handleTouchEnd();
         }, [handleTouchEnd]);
-        // 현재 아이템
-        const currentItem = items[currentIndex];
         // 슬라이드 스타일 계산
         const getSlideStyle = () => {
             const containerWidth = containerRef.current?.offsetWidth || 1;
@@ -5236,9 +5384,6 @@
         // 네비게이션 버튼 비활성화 상태
         const isPrevDisabled = !infinite && currentIndex === 0;
         const isNextDisabled = !infinite && currentIndex === items.length - 1;
-        // 좋아요/북마크 상태
-        const isLiked = currentItem ? likedItems.has(currentItem.id) : false;
-        const isBookmarked = currentItem ? bookmarkedItems.has(currentItem.id) : false;
         if (items.length === 0)
             return null;
         return (jsxRuntime.jsxs("div", { className: clsx('designbase-carousel', `designbase-carousel--size-${size}`, `designbase-carousel--variant-${variant}`, `designbase-carousel--theme-${theme}`, `designbase-carousel--transition-${transition}`, `designbase-carousel--indicator-${indicatorStyle}`, {
@@ -5259,13 +5404,17 @@
                                                             color: item.textColor || (item.image ? '#ffffff' : undefined),
                                                         }, children: item.title })), showDescription && item.description && (jsxRuntime.jsx("p", { className: "designbase-carousel__slide-description", style: {
                                                             color: item.textColor || (item.image ? '#ffffff' : undefined),
-                                                        }, children: item.description })), item.meta && (jsxRuntime.jsxs("div", { className: "designbase-carousel__slide-meta", children: [item.meta.author && (jsxRuntime.jsx("span", { className: "designbase-carousel__slide-author", children: item.meta.author })), item.meta.date && (jsxRuntime.jsx("span", { className: "designbase-carousel__slide-date", children: item.meta.date })), item.meta.rating && (jsxRuntime.jsxs("span", { className: "designbase-carousel__slide-rating", children: ["\u2B50 ", item.meta.rating] }))] }))] })) : null] })), jsxRuntime.jsxs("div", { className: "designbase-carousel__slide-actions", children: [enableLike && (jsxRuntime.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--like', { 'designbase-carousel__action-button--active': isLiked }), onClick: (e) => {
+                                                        }, children: item.description })), item.meta && (jsxRuntime.jsxs("div", { className: "designbase-carousel__slide-meta", children: [item.meta.author && (jsxRuntime.jsx("span", { className: "designbase-carousel__slide-author", children: item.meta.author })), item.meta.date && (jsxRuntime.jsx("span", { className: "designbase-carousel__slide-date", children: item.meta.date })), item.meta.rating && (jsxRuntime.jsxs("span", { className: "designbase-carousel__slide-rating", children: ["\u2B50 ", item.meta.rating] }))] }))] })) : null] })), jsxRuntime.jsxs("div", { className: "designbase-carousel__slide-actions", children: [enableLike && (jsxRuntime.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--like', {
+                                                    'designbase-carousel__action-button--active': likedItems.has(item.id),
+                                                }), onClick: (e) => {
                                                     e.stopPropagation();
                                                     handleLike(item, index);
-                                                }, title: isLiked ? "좋아요 취소" : "좋아요", children: jsxRuntime.jsx(icons.HeartIcon, { size: iconSize, color: "currentColor" }) })), enableBookmark && (jsxRuntime.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--bookmark', { 'designbase-carousel__action-button--active': isBookmarked }), onClick: (e) => {
+                                                }, title: likedItems.has(item.id) ? "좋아요 취소" : "좋아요", children: jsxRuntime.jsx(icons.HeartIcon, { size: iconSize, color: "currentColor" }) })), enableBookmark && (jsxRuntime.jsx("button", { className: clsx('designbase-carousel__action-button', 'designbase-carousel__action-button--bookmark', {
+                                                    'designbase-carousel__action-button--active': bookmarkedItems.has(item.id),
+                                                }), onClick: (e) => {
                                                     e.stopPropagation();
                                                     handleBookmark(item, index);
-                                                }, title: isBookmarked ? "북마크 해제" : "북마크", children: jsxRuntime.jsx(icons.BookmarkIcon, { size: iconSize, color: "currentColor" }) })), enableShare && (jsxRuntime.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--share", onClick: (e) => {
+                                                }, title: bookmarkedItems.has(item.id) ? "북마크 해제" : "북마크", children: jsxRuntime.jsx(icons.BookmarkIcon, { size: iconSize, color: "currentColor" }) })), enableShare && (jsxRuntime.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--share", onClick: (e) => {
                                                     e.stopPropagation();
                                                     handleShare(item, index);
                                                 }, title: "\uACF5\uC720", children: jsxRuntime.jsx(icons.ShareAltIcon, { size: iconSize, color: "currentColor" }) })), enableDownload && item.image && (jsxRuntime.jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--download", onClick: (e) => {
@@ -8928,157 +9077,6 @@
     };
     Tutorial.displayName = 'Tutorial';
 
-    const SearchBar = ({ value, defaultValue = '', placeholder = '검색...', size = 'm', variant = 'default', disabled = false, readOnly = false, fullWidth = false, searchIcon: SearchIconComponent = icons.SearchIcon, clearIcon: ClearIconComponent = icons.CloseIcon, enableRecentSearches = false, recentSearchesKey = 'searchbar-recent-searches', suggestedSearches = [], suggestionRollingInterval = 5000, onChange, onSearch, onFocus, onBlur, onKeyDown, className, ...props }) => {
-        const [internalValue, setInternalValue] = React.useState(defaultValue);
-        const [recentSearches, setRecentSearches] = React.useState([]);
-        const [showRecentSearches, setShowRecentSearches] = React.useState(false);
-        const [currentSuggestion, setCurrentSuggestion] = React.useState(0);
-        const [isFocused, setIsFocused] = React.useState(false);
-        const inputRef = React.useRef(null);
-        const suggestionIntervalRef = React.useRef(null);
-        const currentValue = value !== undefined ? value : internalValue;
-        // 최근 검색어 로드
-        React.useEffect(() => {
-            if (enableRecentSearches) {
-                try {
-                    const stored = localStorage.getItem(recentSearchesKey);
-                    if (stored) {
-                        setRecentSearches(JSON.parse(stored));
-                    }
-                }
-                catch (error) {
-                    console.warn('최근 검색어를 불러올 수 없습니다:', error);
-                }
-            }
-        }, [enableRecentSearches, recentSearchesKey]);
-        // 추천 검색어 롤링 (value가 없을 때만)
-        React.useEffect(() => {
-            if (suggestedSearches.length > 0 && !currentValue && 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, currentValue, suggestionRollingInterval]);
-        React.useEffect(() => {
-            if (value !== undefined) {
-                setInternalValue(value);
-            }
-        }, [value]);
-        const handleChange = (e) => {
-            const newValue = e.target.value;
-            setInternalValue(newValue);
-            onChange?.(newValue);
-        };
-        const handleClear = () => {
-            setInternalValue('');
-            onChange?.('');
-            inputRef.current?.focus();
-        };
-        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) => {
-            if (e.key === 'Enter') {
-                handleSearch();
-            }
-            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);
-            // 롤링 중단
-            if (suggestionIntervalRef.current) {
-                clearInterval(suggestionIntervalRef.current);
-                suggestionIntervalRef.current = null;
-            }
-            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,
-            'designbase-search-bar--full-width': fullWidth,
-            'designbase-search-bar--has-value': currentValue && currentValue.length > 0,
-        }, className);
-        const inputClasses = clsx('designbase-search-bar__input', {
-            'designbase-search-bar__input--disabled': disabled,
-            'designbase-search-bar__input--readonly': readOnly,
-        });
-        // 현재 플레이스홀더 (value가 없을 때만 추천 검색어 롤링)
-        const currentPlaceholder = suggestedSearches.length > 0 && !currentValue && currentValue === ''
-            ? suggestedSearches[currentSuggestion]
-            : placeholder;
-        return (jsxRuntime.jsxs("div", { className: classes, role: "search", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__container", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__search-icon", children: jsxRuntime.jsx(SearchIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }), jsxRuntime.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 && (jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__clear-button", onClick: handleClear, "aria-label": "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30", children: jsxRuntime.jsx(ClearIconComponent, { size: size === 's' ? 16 : size === 'l' ? 24 : 20 }) }))] }), showRecentSearches && recentSearches.length > 0 && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-searches", children: [jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-header", children: [jsxRuntime.jsx("span", { className: "designbase-search-bar__recent-title", children: "\uCD5C\uADFC \uAC80\uC0C9\uC5B4" }), jsxRuntime.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" })] }), jsxRuntime.jsx("div", { className: "designbase-search-bar__recent-list", children: recentSearches.map((searchTerm, index) => (jsxRuntime.jsxs("div", { className: "designbase-search-bar__recent-item", children: [jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-search-button", onClick: () => handleRecentSearchClick(searchTerm), children: searchTerm }), jsxRuntime.jsx("button", { type: "button", className: "designbase-search-bar__recent-remove-button", onClick: () => handleRemoveRecentSearch(searchTerm), "aria-label": `${searchTerm} 삭제`, children: jsxRuntime.jsx(icons.CloseIcon, { size: 16 }) })] }, index))) })] })), suggestedSearches.length > 0 && isFocused && !currentValue && (jsxRuntime.jsxs("div", { className: "designbase-search-bar__suggestions", children: [jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-header", children: jsxRuntime.jsx("span", { className: "designbase-search-bar__suggestions-title", children: "\uCD94\uCC9C \uAC80\uC0C9\uC5B4" }) }), jsxRuntime.jsx("div", { className: "designbase-search-bar__suggestions-list", children: suggestedSearches.map((suggestion, index) => (jsxRuntime.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';
-
     const Navbar = ({ size = 'm', variant = 'default', position = 'static', logo, onLogoClick, items = [], onItemClick, userMenuItems = [], onUserMenuItemClick, userProfile, onLoginClick, onLogoutClick, isAuthenticated = false, showSearch = false, onSearch, searchPlaceholder = '검색...', fullWidth = false, shadow = false, className, ...props }) => {
         const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
         const [isUserMenuOpen, setIsUserMenuOpen] = React.useState(false);
@@ -11591,6 +11589,47 @@
     });
     Toggle.displayName = 'Toggle';
 
+    const clampRating = (rating, maxRating) => {
+        if (typeof rating !== 'number' || Number.isNaN(rating))
+            return undefined;
+        if (rating < 0)
+            return 0;
+        if (rating > maxRating)
+            return maxRating;
+        return Math.round(rating * 10) / 10;
+    };
+    const Testimonial = ({ quote, author, role, company, avatar, rating, maxRating = 5, size = 'm', align = 'left', badge, children, className, badgeProps, avatarProps, ratingProps, }) => {
+        const clampedRating = clampRating(rating, maxRating);
+        const avatarSizeMap = {
+            s: 's',
+            m: 'm',
+            l: 'l',
+        };
+        const ratingSizeMap = {
+            s: 's',
+            m: 'm',
+            l: 'l',
+        };
+        const { className: badgeCustomClassName, size: badgeSize, variant: badgeVariant, style: badgeStyle, ...restBadgeProps } = badgeProps ?? {};
+        const { className: avatarCustomClassName, size: avatarSize, alt: avatarAlt, src: avatarSrc, ...restAvatarProps } = avatarProps ?? {};
+        const { className: ratingCustomClassName, maxValue: ratingMaxValueOverride, size: ratingSize, display: ratingDisplay, allowHalf: ratingAllowHalf, readonly: ratingReadonly, color: ratingColor, customColor: ratingCustomColor, ...restRatingProps } = ratingProps ?? {};
+        const computedBadgeSize = badgeSize ?? 's';
+        const computedBadgeVariant = badgeVariant ?? 'primary';
+        const computedBadgeStyle = badgeStyle ?? 'text';
+        const computedAvatarSrc = avatarSrc ?? avatar;
+        const computedAvatarAlt = avatarAlt ?? `${author} 프로필 이미지`;
+        const computedAvatarSize = avatarSize ?? avatarSizeMap[size];
+        const computedRatingMaxValue = ratingMaxValueOverride ?? maxRating;
+        const computedRatingSize = ratingSize ?? ratingSizeMap[size];
+        const computedRatingDisplay = ratingDisplay ?? 'both';
+        const computedRatingAllowHalf = ratingAllowHalf ?? true;
+        const computedRatingReadonly = ratingReadonly ?? true;
+        const computedRatingColor = ratingColor ?? 'primary';
+        const computedRatingCustomColor = computedRatingColor === 'custom' ? ratingCustomColor : undefined;
+        const shouldRenderAvatar = Boolean(computedAvatarSrc || restAvatarProps.initials || restAvatarProps.icon);
+        return (jsxRuntime.jsxs("figure", { className: clsx('designbase-testimonial', `designbase-testimonial--size-${size}`, `designbase-testimonial--align-${align}`, className), children: [badge && (jsxRuntime.jsx(Badge, { size: computedBadgeSize, variant: computedBadgeVariant, style: computedBadgeStyle, className: clsx('designbase-testimonial__badge', badgeCustomClassName), ...restBadgeProps, children: badge })), jsxRuntime.jsxs("blockquote", { className: "designbase-testimonial__quote", children: ["\u201C", quote, "\u201D"] }), jsxRuntime.jsxs("figcaption", { className: "designbase-testimonial__footer", children: [shouldRenderAvatar && (jsxRuntime.jsx("div", { className: "designbase-testimonial__avatar", children: jsxRuntime.jsx(Avatar, { src: computedAvatarSrc, alt: computedAvatarAlt, size: computedAvatarSize, className: clsx('designbase-testimonial__avatar-image', avatarCustomClassName), ...restAvatarProps }) })), jsxRuntime.jsxs("div", { className: "designbase-testimonial__meta", children: [jsxRuntime.jsx("span", { className: "designbase-testimonial__author", children: author }), (role || company) && (jsxRuntime.jsx("span", { className: "designbase-testimonial__role", children: [role, company].filter(Boolean).join(' · ') }))] }), typeof clampedRating === 'number' && (jsxRuntime.jsx(Rating, { value: clampedRating, maxValue: computedRatingMaxValue, size: computedRatingSize, display: computedRatingDisplay, allowHalf: computedRatingAllowHalf, readonly: computedRatingReadonly, color: computedRatingColor, customColor: computedRatingCustomColor, className: clsx('designbase-testimonial__rating', ratingCustomClassName), ...restRatingProps }))] }), children && jsxRuntime.jsx("div", { className: "designbase-testimonial__extra", children: children })] }));
+    };
+
     const Toolbar = ({ items, size = 'm', variant = 'default', position = 'top', fullWidth = false, fixed = false, shadow = true, rounded = true, className, children, }) => {
         const [openDropdown, setOpenDropdown] = React.useState(null);
         const mapSizeToButtonSize = (size) => {
@@ -12220,6 +12259,7 @@
     exports.Stepper = Stepper;
     exports.Table = Table;
     exports.Tabs = Tabs;
+    exports.Testimonial = Testimonial;
     exports.Textarea = Textarea;
     exports.TimePicker = TimePicker;
     exports.Timeline = Timeline;