@designbasekorea/ui 0.2.4 → 0.2.6

package/dist/index.js

@@ -3618,6 +3618,32 @@ const Banner = ({ title, description, icon, image, imageAlt, actions = [], size
                         })) : 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);
@@ -11712,6 +11738,7 @@ exports.Avatar = Avatar;
 exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Banner = Banner;
+exports.BottomNavigation = BottomNavigation;
 exports.BottomSheet = BottomSheet;
 exports.Breadcrumbs = Breadcrumbs;
 exports.Button = Button;