@designbasekorea/ui 0.2.4 → 0.2.6

package/dist/index.esm.js

@@ -3616,6 +3616,32 @@ const Banner = ({ title, description, icon, image, imageAlt, actions = [], size
                         })) : icon })), image && (jsx("div", { className: "designbase-banner__image", children: jsx("img", { src: image, alt: imageAlt || title || 'Banner image' }) })), jsxs("div", { className: "designbase-banner__content", children: [title && (jsx("h3", { className: "designbase-banner__title", children: title })), description && (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 (jsx("nav", { className: classes, style: style, role: "navigation", "aria-label": "\uD558\uB2E8 \uB124\uBE44\uAC8C\uC774\uC158", children: 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 (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: jsxs("div", { className: "designbase-bottom-navigation__item-content", children: [jsxs("div", { className: "designbase-bottom-navigation__icon-wrapper", children: [jsx(Icon, { size: size === 's' ? 20 : size === 'm' ? 24 : 28, className: "designbase-bottom-navigation__icon" }), item.badge && (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 }))] }), jsx("span", { className: "designbase-bottom-navigation__label", children: item.label })] }) }, item.id));
+            }) }) }));
+};
+BottomNavigation.displayName = 'BottomNavigation';
+
 const BottomSheet = 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] = useState(maxHeight);
     const [isDragging, setIsDragging] = useState(false);
@@ -11700,5 +11726,5 @@ const toggleTheme = () => {
     console.log('toggleTheme called');
 };
 
-export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme, useToast };
+export { Accordion, AdBanner, Alert, AnimationBackground, AnimationText, AudioPlayer, Avatar, Backdrop, Badge, Banner, BottomNavigation, BottomSheet, Breadcrumbs, Button, Calendar, Card, Carousel, Checkbox, Chip, ColorPicker, Confirm, Container, ContextMenu, Countdown, DatePicker, Divider, Drawer, Dropdown, Dropzone, EmptyState, FileUploader, FloatingActionButton, Form, Gradient, Grid, HeroFeature, Image$1 as Image, ImageList, Indicator, Input, Label, Lightbox, List, Logo, MarkdownEditor, Masonry, MenuItem, Modal, ModalBody, ModalFooter, ModalHeader, Navbar, OnboardingModal, Pagination, Popover, Progress, ProgressStep, Progressbar, Radio, RandomGradient, RangeSlider, Rating, Reorder, ResizablePanels, ScrollArea, SearchBar, Section, SegmentControl, Select, Share, Sidebar, Skeleton, Spinner, SplitView, Stack, Stat, Stepper, Table, Tabs, Textarea, TimePicker, Timeline, Toast, ToastContainer, ToastProvider, Toggle, Toolbar, Tooltip, Tutorial, VideoPlayer, YouTubePlayer, getTheme, setTheme, toggleTheme, useToast };
 //# sourceMappingURL=index.esm.js.map