@designbasekorea/ui 0.2.41 → 0.3.2

package/dist/index.esm.js

@@ -2402,7 +2402,7 @@ const Tooltip = ({ content, children, position = 'top', size = 'm', variant = 'd
 };
 Tooltip.displayName = 'Tooltip';
 
-const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, tooltip, tooltipProps, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
+const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth = false, disabled = false, loading = false, loadingText, iconOnly = false, startIcon: StartIcon, endIcon: EndIcon, tooltip, tooltipProps, className, children, onPress, type = 'button', ...props }, forwardedRef) => {
     const ref = $df56164dff5785e2$export$4338b53315abf666(forwardedRef);
     const { buttonProps } = $701a24aa0da5b062$export$ea18c227d4417cc3({
         ...props,
@@ -2416,23 +2416,18 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
             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) {
@@ -2452,7 +2447,13 @@ const Button = forwardRef(({ variant = 'primary', size = 'm', radius, fullWidth
     };
     const renderContent = () => {
         if (loading) {
-            return (jsxs(Fragment, { children: [jsx(Spinner, { type: "circular", size: size === 'xs' ? 'xs' : size === 's' ? 's' : 'm', color: getIconColor(), speed: 1, showLabel: false }), !iconOnly && jsx("span", { children: "\uB85C\uB529 \uC911..." })] }));
+            // 로딩 중 표시할 텍스트 결정: loadingText > children > 기본값
+            const displayText = loadingText !== undefined
+                ? loadingText
+                : (!iconOnly && children)
+                    ? children
+                    : null;
+            return (jsxs(Fragment, { children: [jsx(Spinner, { type: "circular", size: size === 's' ? 's' : size === 'l' ? 'l' : 'm', color: getIconColor(), speed: 1, showLabel: false }), displayText && jsx("span", { children: displayText })] }));
         }
         // iconOnly 버튼일 때는 children을 아이콘으로 처리
         if (iconOnly && children && React.isValidElement(children)) {
@@ -4011,7 +4012,7 @@ ModalHeader.displayName = 'ModalHeader';
 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}`,
@@ -4021,7 +4022,7 @@ const Label = ({ children, htmlFor, required = false, size = 's', disabled = fal
     ]
         .filter(Boolean)
         .join(' ');
-    return (jsxs("label", { htmlFor: htmlFor, className: classes, onClick: onClick, children: [children, required && jsx("span", { className: "designbase-label__required", children: "*" })] }));
+    return (jsxs("label", { htmlFor: htmlFor, id: id, className: classes, onClick: onClick, children: [children, required && jsx("span", { className: "designbase-label__required", children: "*" })] }));
 };
 Label.displayName = 'Label';
 
@@ -4052,12 +4053,17 @@ const Input = forwardRef(({ type = 'text', label, placeholder, defaultValue, val
         '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 (jsxs("div", { className: classes, children: [label && (jsx(Label, { htmlFor: inputId, required: required, error: error, disabled: disabled, size: size === 's' ? 's' : size === 'm' ? 'm' : 'l', children: label })), jsxs("div", { className: "designbase-input__wrapper", children: [actualStartIcon && (jsx("div", { className: "designbase-input__start-icon", children: React.createElement(actualStartIcon, { size: iconSize }) })), 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 && (jsx("button", { type: "button", className: "designbase-input__password-toggle", onClick: handlePasswordToggle, disabled: disabled, "aria-label": showPassword ? '비밀번호 숨기기' : '비밀번호 보기', children: React.createElement(PasswordIcon, { size: iconSize }) })), EndIcon && !isPassword && (jsx("div", { className: "designbase-input__end-icon", children: React.createElement(EndIcon, { size: iconSize }) }))] }), helperText && !error && (jsx("p", { id: helperTextId, className: "designbase-input__helper-text", children: helperText })), error && errorMessage && (jsx("p", { id: errorMessageId, className: "designbase-input__error-message", children: errorMessage }))] }));
 });
 Input.displayName = 'Input';
@@ -4098,6 +4104,157 @@ const Checkbox = forwardRef(({ isSelected, defaultSelected, isIndeterminate = fa
 });
 Checkbox.displayName = 'Checkbox';
 
+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, ...rest }) => {
+    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]);
+    // 추천 검색어 롤링 (value가 없을 때만)
+    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]);
+    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 (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", ...rest }), 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(CloseIcon, { 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';
+
 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] = useState(false);
     const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? (multiple ? [] : ''));
@@ -4242,9 +4399,6 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
         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,
@@ -4252,9 +4406,11 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
         '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,
@@ -4262,23 +4418,23 @@ const Select = ({ value, defaultValue, options, label, placeholder = '선택하
     const filteredOptions = getFilteredOptions();
     const selectedLabels = getSelectedLabels();
     const hasValue = multiple ? selectedValue.length > 0 : selectedValue !== '';
-    return (jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxs("label", { className: "designbase-select__label", children: [label, required && jsx("span", { className: "designbase-select__required", children: "*" })] })), 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: [jsx("div", { className: "designbase-select__value", children: multiple ? (jsxs("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: [selectedValue.map((value) => {
-                                    const option = options.find(opt => opt.value === value);
-                                    return (jsxs("span", { className: "designbase-select__tag", children: [jsx("span", { className: "designbase-select__tag-label", children: option?.label || value }), jsx("button", { type: "button", className: "designbase-select__tag-remove", onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleRemoveValue(value);
-                                                }, children: jsx(CloseIcon, { size: 12 }) })] }, value));
-                                }), searchable && isOpen && (jsx("input", { ref: inputRef, type: "text", className: "designbase-select__search-input", value: searchTerm, onChange: handleSearchChange, placeholder: "\uAC80\uC0C9...", onClick: (e) => e.stopPropagation() }))] })) : (jsx("span", { className: "designbase-select__single-value", children: selectedLabels || placeholder })) }), jsxs("div", { className: "designbase-select__indicators", children: [showClearButton && hasValue && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-select__clear-button", onClick: handleClearAll, "aria-label": "\uBAA8\uB4E0 \uAC12 \uC9C0\uC6B0\uAE30", children: jsx(CloseIcon, { size: 16 }) })), jsx("div", { className: "designbase-select__chevron", children: isOpen ? jsx(ChevronUpIcon, { size: 16 }) : jsx(ChevronDownIcon, { size: 16 }) })] })] }), jsx("div", { className: dropdownClasses, ref: dropdownRef, children: jsx("div", { className: "designbase-select__options", style: { maxHeight: `${maxHeight}px` }, role: "listbox", children: filteredOptions.length === 0 ? (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 (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 && (jsx("div", { className: "designbase-select__checkbox", children: jsx(Checkbox, { isSelected: isSelected, isDisabled: option.disabled, size: "s", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
-                    })) }) }), helperText && !error && (jsx("p", { className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsx("p", { className: "designbase-select__error-message", children: errorMessage }))] }));
+    return (jsxs("div", { className: classes, ref: containerRef, children: [label && (jsxs("label", { className: "designbase-select__label", children: [label, required && jsx("span", { className: "designbase-select__required", children: "*" })] })), 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: [jsx("div", { className: "designbase-select__value", children: multiple ? (jsx("div", { className: "designbase-select__tags", ref: tagsContainerRef, children: selectedValue.map((value) => {
+                                const option = options.find(opt => opt.value === value);
+                                return (jsxs("span", { className: "designbase-select__tag", children: [jsx("span", { className: "designbase-select__tag-label", children: option?.label || value }), jsx("button", { type: "button", className: "designbase-select__tag-remove", onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleRemoveValue(value);
+                                            }, children: jsx(CloseIcon, { size: 12 }) })] }, value));
+                            }) })) : (jsx("span", { className: "designbase-select__single-value", children: selectedLabels || placeholder })) }), jsxs("div", { className: "designbase-select__indicators", children: [showClearButton && hasValue && !disabled && !readOnly && (jsx("button", { type: "button", className: "designbase-select__clear-button", onClick: handleClearAll, "aria-label": "\uBAA8\uB4E0 \uAC12 \uC9C0\uC6B0\uAE30", children: jsx(CloseIcon, { size: 16 }) })), jsx("div", { className: "designbase-select__chevron", children: isOpen ? jsx(ChevronUpIcon, { size: 16 }) : jsx(ChevronDownIcon, { size: 16 }) })] })] }), jsxs("div", { className: dropdownClasses, ref: dropdownRef, children: [searchable && (jsx("div", { className: "designbase-select__search", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: 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() }) })), jsx("div", { className: "designbase-select__options", style: { maxHeight: `${maxHeight}px` }, role: "listbox", children: filteredOptions.length === 0 ? (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 (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 && (jsx("div", { className: "designbase-select__checkbox", children: jsx(Checkbox, { isSelected: isSelected, isDisabled: option.disabled, size: "s", hasLabel: false, onChange: () => handleOptionSelect(option) }) })), jsx("span", { className: "designbase-select__option-label", children: option.label })] }, option.value));
+                        })) })] }), helperText && !error && (jsx("p", { className: "designbase-select__helper-text", children: helperText })), error && errorMessage && (jsx("p", { className: "designbase-select__error-message", children: errorMessage }))] }));
 };
 Select.displayName = 'Select';
 
@@ -5219,8 +5375,6 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
     const handleTouchEndEvent = useCallback(() => {
         handleTouchEnd();
     }, [handleTouchEnd]);
-    // 현재 아이템
-    const currentItem = items[currentIndex];
     // 슬라이드 스타일 계산
     const getSlideStyle = () => {
         const containerWidth = containerRef.current?.offsetWidth || 1;
@@ -5235,9 +5389,6 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
     // 네비게이션 버튼 비활성화 상태
     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 (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}`, {
@@ -5258,13 +5409,17 @@ const Carousel = ({ items, size = 'm', variant = 'default', theme = 'light', tra
                                                         color: item.textColor || (item.image ? '#ffffff' : undefined),
                                                     }, children: item.title })), showDescription && item.description && (jsx("p", { className: "designbase-carousel__slide-description", style: {
                                                         color: item.textColor || (item.image ? '#ffffff' : undefined),
-                                                    }, children: item.description })), item.meta && (jsxs("div", { className: "designbase-carousel__slide-meta", children: [item.meta.author && (jsx("span", { className: "designbase-carousel__slide-author", children: item.meta.author })), item.meta.date && (jsx("span", { className: "designbase-carousel__slide-date", children: item.meta.date })), item.meta.rating && (jsxs("span", { className: "designbase-carousel__slide-rating", children: ["\u2B50 ", item.meta.rating] }))] }))] })) : null] })), jsxs("div", { className: "designbase-carousel__slide-actions", children: [enableLike && (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 && (jsxs("div", { className: "designbase-carousel__slide-meta", children: [item.meta.author && (jsx("span", { className: "designbase-carousel__slide-author", children: item.meta.author })), item.meta.date && (jsx("span", { className: "designbase-carousel__slide-date", children: item.meta.date })), item.meta.rating && (jsxs("span", { className: "designbase-carousel__slide-rating", children: ["\u2B50 ", item.meta.rating] }))] }))] })) : null] })), jsxs("div", { className: "designbase-carousel__slide-actions", children: [enableLike && (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: jsx(HeartIcon, { size: iconSize, color: "currentColor" }) })), enableBookmark && (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: jsx(HeartIcon, { size: iconSize, color: "currentColor" }) })), enableBookmark && (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: jsx(BookmarkIcon, { size: iconSize, color: "currentColor" }) })), enableShare && (jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--share", onClick: (e) => {
+                                            }, title: bookmarkedItems.has(item.id) ? "북마크 해제" : "북마크", children: jsx(BookmarkIcon, { size: iconSize, color: "currentColor" }) })), enableShare && (jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--share", onClick: (e) => {
                                                 e.stopPropagation();
                                                 handleShare(item, index);
                                             }, title: "\uACF5\uC720", children: jsx(ShareAltIcon, { size: iconSize, color: "currentColor" }) })), enableDownload && item.image && (jsx("button", { className: "designbase-carousel__action-button designbase-carousel__action-button--download", onClick: (e) => {
@@ -8927,157 +9082,6 @@ const Tutorial = ({ steps, currentStep = 0, isActive, onStart, onEnd, onStepChan
 };
 Tutorial.displayName = 'Tutorial';
 
-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]);
-    // 추천 검색어 롤링 (value가 없을 때만)
-    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]);
-    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 (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(CloseIcon, { 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';
-
 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] = useState(false);
     const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
@@ -11590,6 +11594,47 @@ const Toggle = forwardRef(({ isSelected, defaultSelected, isDisabled = false, is
 });
 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 (jsxs("figure", { className: clsx('designbase-testimonial', `designbase-testimonial--size-${size}`, `designbase-testimonial--align-${align}`, className), children: [badge && (jsx(Badge, { size: computedBadgeSize, variant: computedBadgeVariant, style: computedBadgeStyle, className: clsx('designbase-testimonial__badge', badgeCustomClassName), ...restBadgeProps, children: badge })), jsxs("blockquote", { className: "designbase-testimonial__quote", children: ["\u201C", quote, "\u201D"] }), jsxs("figcaption", { className: "designbase-testimonial__footer", children: [shouldRenderAvatar && (jsx("div", { className: "designbase-testimonial__avatar", children: jsx(Avatar, { src: computedAvatarSrc, alt: computedAvatarAlt, size: computedAvatarSize, className: clsx('designbase-testimonial__avatar-image', avatarCustomClassName), ...restAvatarProps }) })), jsxs("div", { className: "designbase-testimonial__meta", children: [jsx("span", { className: "designbase-testimonial__author", children: author }), (role || company) && (jsx("span", { className: "designbase-testimonial__role", children: [role, company].filter(Boolean).join(' · ') }))] }), typeof clampedRating === 'number' && (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 && 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) => {
@@ -12140,5 +12185,5 @@ const toggleTheme = () => {
     console.log('toggleTheme called');
 };
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme, useToast };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Testimonial, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme, useToast };
 //# sourceMappingURL=index.esm.js.map