@designbasekorea/ui 0.2.5 → 0.2.7

package/dist/index.umd.js

@@ -3633,7 +3633,8 @@
         }, className);
         return (jsxRuntime.jsx("nav", { className: classes, style: style, role: "navigation", "aria-label": "\uD558\uB2E8 \uB124\uBE44\uAC8C\uC774\uC158", children: jsxRuntime.jsx("div", { className: "designbase-bottom-navigation__container", children: items.map((item) => {
                     const isActive = activeItemId === item.id || item.isActive;
-                    const Icon = item.icon;
+                    // 활성화 상태에 따라 다른 아이콘 사용
+                    const Icon = isActive && item.activeIcon ? item.activeIcon : item.icon;
                     return (jsxRuntime.jsx("button", { type: "button", className: clsx('designbase-bottom-navigation__item', {
                             'designbase-bottom-navigation__item--active': isActive,
                             'designbase-bottom-navigation__item--disabled': item.disabled,
@@ -6327,7 +6328,7 @@
                     }), onClick: handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? `${id || 'drawer'}-title` : undefined, "aria-describedby": id ? `${id}-content` : undefined, tabIndex: -1, id: id, children: [(title || showCloseButton) && (jsxRuntime.jsxs("div", { className: "designbase-drawer__header", children: [title && (jsxRuntime.jsx("h2", { className: "designbase-drawer__title", id: id ? `${id}-title` : undefined, children: title })), showCloseButton && (jsxRuntime.jsx(Button, { variant: "ghost", size: "s", onClick: handleClose, className: "designbase-drawer__close-button", "aria-label": "\uB2EB\uAE30", children: jsxRuntime.jsx(icons.CloseIcon, { size: iconSize, color: "currentColor" }) }))] })), jsxRuntime.jsx("div", { className: "designbase-drawer__content", id: id ? `${id}-content` : undefined, children: children })] })] }), document.body);
     };
 
-    const Dropdown = ({ items, trigger, label = '메뉴', size = 'm', placement = 'bottom-left', fullWidth = false, disabled = false, className, isOpen: controlledIsOpen, onToggle, ...props }) => {
+    const Dropdown = ({ items, trigger, label = '메뉴', triggerVariant = 'tertiary', triggerIcon, iconOnly = false, size = 'm', placement = 'bottom-left', fullWidth = false, disabled = false, className, isOpen: controlledIsOpen, onToggle, ...props }) => {
         // 아이콘 크기 계산 (m이 기본값)
         const iconSize = size === 's' ? 14 : size === 'l' ? 18 : 16;
         const [isOpen, setIsOpen] = React.useState(false);
@@ -6456,13 +6457,11 @@
             'designbase-dropdown--full-width': fullWidth,
             'designbase-dropdown--disabled': disabled,
         }, className);
-        const triggerClasses = clsx('designbase-dropdown__trigger', {
-            'designbase-dropdown__trigger--open': isDropdownOpen,
-        });
+        const buttonSize = size;
         const menuClasses = clsx('designbase-dropdown__menu', `designbase-dropdown__menu--${placement}`, {
             'designbase-dropdown__menu--open': isDropdownOpen,
         });
-        return (jsxRuntime.jsxs("div", { ref: containerRef, className: classes, ...props, children: [jsxRuntime.jsx("button", { ref: triggerRef, className: triggerClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "true", "aria-expanded": isDropdownOpen, "aria-label": label, children: trigger || (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "designbase-dropdown__trigger-label", children: label }), jsxRuntime.jsx(icons.ChevronDownIcon, { size: iconSize, className: "designbase-dropdown__trigger-icon" })] })) }), jsxRuntime.jsx("div", { ref: menuRef, className: menuClasses, role: "menu", "aria-label": label, children: items.map((item, index) => {
+        return (jsxRuntime.jsxs("div", { ref: containerRef, className: classes, ...props, children: [trigger ? (jsxRuntime.jsx("div", { ref: triggerRef, onClick: handleToggle, onKeyDown: handleKeyDown, children: trigger })) : (jsxRuntime.jsx("div", { ref: triggerRef, children: jsxRuntime.jsx(Button, { variant: triggerVariant, size: buttonSize, iconOnly: iconOnly, startIcon: triggerIcon, endIcon: icons.ChevronDownIcon, disabled: disabled, fullWidth: fullWidth, onPress: handleToggle, "aria-haspopup": "true", "aria-expanded": isDropdownOpen, "aria-label": label, className: isDropdownOpen ? 'designbase-dropdown__trigger--open' : '', children: label }) })), jsxRuntime.jsx("div", { ref: menuRef, className: menuClasses, role: "menu", "aria-label": label, children: items.map((item, index) => {
                         if (item.divider) {
                             return (jsxRuntime.jsx("div", { className: "designbase-dropdown__divider", role: "separator" }, `divider-${index}`));
                         }