@designbasekorea/ui 0.2.6 → 0.2.7

package/dist/index.esm.js

@@ -6327,7 +6327,7 @@ const Drawer = ({ isOpen, onClose, title, children, position = 'right', size = '
                 }), 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) && (jsxs("div", { className: "designbase-drawer__header", children: [title && (jsx("h2", { className: "designbase-drawer__title", id: id ? `${id}-title` : undefined, children: title })), showCloseButton && (jsx(Button, { variant: "ghost", size: "s", onClick: handleClose, className: "designbase-drawer__close-button", "aria-label": "\uB2EB\uAE30", children: jsx(CloseIcon, { size: iconSize, color: "currentColor" }) }))] })), 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] = useState(false);
@@ -6456,13 +6456,11 @@ const Dropdown = ({ items, trigger, label = '메뉴', size = 'm', placement = 'b
         '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 (jsxs("div", { ref: containerRef, className: classes, ...props, children: [jsx("button", { ref: triggerRef, className: triggerClasses, onClick: handleToggle, onKeyDown: handleKeyDown, disabled: disabled, "aria-haspopup": "true", "aria-expanded": isDropdownOpen, "aria-label": label, children: trigger || (jsxs(Fragment, { children: [jsx("span", { className: "designbase-dropdown__trigger-label", children: label }), jsx(ChevronDownIcon, { size: iconSize, className: "designbase-dropdown__trigger-icon" })] })) }), jsx("div", { ref: menuRef, className: menuClasses, role: "menu", "aria-label": label, children: items.map((item, index) => {
+    return (jsxs("div", { ref: containerRef, className: classes, ...props, children: [trigger ? (jsx("div", { ref: triggerRef, onClick: handleToggle, onKeyDown: handleKeyDown, children: trigger })) : (jsx("div", { ref: triggerRef, children: jsx(Button, { variant: triggerVariant, size: buttonSize, iconOnly: iconOnly, startIcon: triggerIcon, endIcon: ChevronDownIcon, disabled: disabled, fullWidth: fullWidth, onPress: handleToggle, "aria-haspopup": "true", "aria-expanded": isDropdownOpen, "aria-label": label, className: isDropdownOpen ? 'designbase-dropdown__trigger--open' : '', children: label }) })), jsx("div", { ref: menuRef, className: menuClasses, role: "menu", "aria-label": label, children: items.map((item, index) => {
                     if (item.divider) {
                         return (jsx("div", { className: "designbase-dropdown__divider", role: "separator" }, `divider-${index}`));
                     }