@designbasekorea/ui 0.2.4 → 0.2.6

package/dist/index.umd.js

@@ -3617,6 +3617,32 @@
                             })) : icon })), image && (jsxRuntime.jsx("div", { className: "designbase-banner__image", children: jsxRuntime.jsx("img", { src: image, alt: imageAlt || title || 'Banner image' }) })), jsxRuntime.jsxs("div", { className: "designbase-banner__content", children: [title && (jsxRuntime.jsx("h3", { className: "designbase-banner__title", children: title })), description && (jsxRuntime.jsx("p", { className: "designbase-banner__description", children: description }))] }), renderActions()] })] }));
     };
 
+    const BottomNavigation = ({ items, activeItemId, onItemClick, fixed = true, backgroundColor = 'default', size = 'm', className, style, }) => {
+        const handleItemClick = (item) => {
+            if (item.disabled)
+                return;
+            if (item.onClick) {
+                item.onClick();
+            }
+            if (onItemClick) {
+                onItemClick(item);
+            }
+        };
+        const classes = clsx('designbase-bottom-navigation', `designbase-bottom-navigation--${size}`, `designbase-bottom-navigation--${backgroundColor}`, {
+            'designbase-bottom-navigation--fixed': fixed,
+        }, 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 = 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,
+                        }), onClick: () => handleItemClick(item), disabled: item.disabled, "aria-label": item.label, "aria-current": isActive ? 'page' : undefined, children: jsxRuntime.jsxs("div", { className: "designbase-bottom-navigation__item-content", children: [jsxRuntime.jsxs("div", { className: "designbase-bottom-navigation__icon-wrapper", children: [jsxRuntime.jsx(Icon, { size: size === 's' ? 20 : size === 'm' ? 24 : 28, className: "designbase-bottom-navigation__icon" }), item.badge && (jsxRuntime.jsx(Badge, { size: "s", variant: item.badgeColor === 'error' ? 'danger' : item.badgeColor === 'warning' ? 'warning' : item.badgeColor === 'success' ? 'success' : item.badgeColor === 'info' ? 'info' : item.badgeColor === 'primary' ? 'primary' : 'secondary', className: "designbase-bottom-navigation__badge", children: item.badge }))] }), jsxRuntime.jsx("span", { className: "designbase-bottom-navigation__label", children: item.label })] }) }, item.id));
+                }) }) }));
+    };
+    BottomNavigation.displayName = 'BottomNavigation';
+
     const BottomSheet = React.forwardRef(({ open = false, onClose, title, subtitle, size = 'm', variant = 'default', disableBackdropClick = false, disableEscapeKeyDown = false, disableDrag = false, maxHeight = 80, animation = 'slide', animationDuration = 300, zIndex = 1000, showBackdrop = true, backdropBlur = false, backdropOpacity = 0.5, stickyHeader = false, stickyFooter = false, className, style, header, footer, children, ...props }, forwardedRef) => {
         const [sheetHeight, setSheetHeight] = React.useState(maxHeight);
         const [isDragging, setIsDragging] = React.useState(false);
@@ -11711,6 +11737,7 @@
     exports.Backdrop = Backdrop;
     exports.Badge = Badge;
     exports.Banner = Banner;
+    exports.BottomNavigation = BottomNavigation;
     exports.BottomSheet = BottomSheet;
     exports.Breadcrumbs = Breadcrumbs;
     exports.Button = Button;