@designbasekorea/ui 0.2.6 → 0.2.7

package/dist/index.js

@@ -6329,7 +6329,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) && (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);
@@ -6458,13 +6458,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 (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}`));
                     }