elseware-ui 2.26.0 → 2.26.1

package/build/index.d.ts

@@ -1,7 +1,7 @@
 import "./styles/gradients.css";
 import "./styles/index.css";
 export * from "./components";
-export * from "./compositions/data-display";
+export * from "./compositions";
 export * from "./hooks";
 export * from "./layouts";
 export * from "./utils";

package/build/index.es.js

@@ -146224,6 +146224,140 @@ function WorldMapCountryTable(_a) {
     return (jsx(DataViewTable, { title: title, data: finalData, columns: columns, sortOptions: sortOptions, sortConfig: sortConfig, searchPlaceholder: "Search countries...", defaultPageSize: 6 }));
 }
 
+function BoxNavItem(_a) {
+    var icon = _a.icon, name = _a.name, to = _a.to, selected = _a.selected, onClick = _a.onClick;
+    var normalizedTo = to.startsWith("/") ? to : "/".concat(to);
+    var handleClick = function (e) {
+        if (onClick)
+            onClick(e, normalizedTo);
+    };
+    return (jsxs("button", __assign$1({ type: "button", onClick: handleClick, "aria-current": selected ? "page" : undefined, className: classnames("w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center", "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer", selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400", "eui-theme-transition") }, { children: [jsx("div", __assign$1({ className: "text-xl" }, { children: icon })), jsx("span", __assign$1({ className: "text-[11px]" }, { children: name }))] })));
+}
+
+function BoxNav(_a) {
+    var _b = _a.data, data = _b === void 0 ? [] : _b, currentPath = _a.currentPath, onNavigate = _a.onNavigate, navigate = _a.navigate;
+    var pathname = currentPath !== null && currentPath !== void 0 ? currentPath : (typeof window !== "undefined" ? window.location.pathname : "");
+    var current = (pathname.split("/")[1] || "").replace(/^\//, "");
+    var handleNavigate = function (to) {
+        if (onNavigate) {
+            onNavigate(to);
+        }
+        else if (navigate) {
+            navigate(to);
+        }
+        else if (typeof window !== "undefined") {
+            window.location.href = to; // fallback for non-router usage
+        }
+    };
+    return (jsx("div", __assign$1({ className: "flex justify-between" }, { children: data.map(function (item, index) {
+            var normalized = (item.to || "").replace(/^\//, "");
+            var to = normalized ? "/".concat(normalized) : "/";
+            var selected = normalized === current;
+            return (jsx(BoxNavItem, { icon: item.icon, name: item.name, to: to, selected: selected, onClick: function (_, dest) { return handleNavigate(dest); } }, item.to || item.name || index));
+        }) })));
+}
+
+var TNContext = function (_a) {
+    var icon = _a.icon, name = _a.name, badge = _a.badge;
+    return (jsxs(Fragment$3, { children: [icon && (jsx("div", __assign$1({ className: "text-base text-gray-500 dark:text-gray-400" }, { children: icon }))), jsx("div", __assign$1({ className: "flex-1" }, { children: name })), badge && jsx("div", { children: badge })] }));
+};
+
+var TNItem = function (_a) {
+    var icon = _a.icon, name = _a.name, selected = _a.selected, onClick = _a.onClick;
+    return (jsx("button", __assign$1({ onClick: onClick, className: cn$1("flex items-center gap-2 px-4 py-2 text-sm font-medium", "transition-all duration-200", "text-gray-400", "hover:text-eui-secondary-700", "hover:bg-gray-300/10", selected && ["text-eui-secondary-700", "bg-gray-300/10"]) }, { children: jsx(TNContext, { icon: icon, name: name }) })));
+};
+
+var TNDropdownItem = function (_a) {
+    var icon = _a.icon, name = _a.name, badge = _a.badge, to = _a.to, navigate = _a.navigate, onClick = _a.onClick, className = _a.className;
+    var handle = function (e) {
+        if (to) {
+            navigate ? navigate(to) : (window.location.href = to);
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    return (jsx("div", __assign$1({ onClick: handle, className: cn$1("flex items-center gap-3 px-3 py-3 cursor-pointer border-b border-gray-200 dark:border-gray-700/40", "text-sm font-medium", "text-gray-600 dark:text-gray-400", "hover:bg-gray-100 dark:hover:bg-gray-700/50", "hover:text-gray-900 dark:hover:text-gray-300", "transition-colors duration-200", className) }, { children: jsx(TNContext, { icon: icon, name: name, badge: badge }) })));
+};
+
+var TNDropdownTitle = function (_a) {
+    var name = _a.name, className = _a.className;
+    return (jsx("div", __assign$1({ className: cn$1("px-3 py-4 text-xs font-semibold uppercase tracking-wide", "text-gray-500 dark:text-gray-600", className) }, { children: name })));
+};
+
+var TNDropdownGroup = function (_a) {
+    var name = _a.name, icon = _a.icon, badge = _a.badge, items = _a.items, navigate = _a.navigate, className = _a.className;
+    var _b = useState(true), open = _b[0], setOpen = _b[1];
+    return (jsxs("div", { children: [jsxs("div", __assign$1({ onClick: function () { return setOpen(function (p) { return !p; }); }, className: cn$1("flex items-center justify-between px-3 py-3 cursor-pointer border-b border-green-900/40", "text-sm font-semibold", "text-gray-900 dark:text-gray-400", "bg-gradient-to-r", "from-gray-100 to-transparent", "dark:from-green-900/30 dark:to-transparent", "hover:from-gray-200 dark:hover:from-green-900/50", "transition-all duration-200", className) }, { children: [jsx("div", __assign$1({ className: "flex items-center gap-3" }, { children: jsx(TNContext, { icon: icon, name: name, badge: badge }) })), jsx(BsChevronDown, { className: cn$1("text-xs transition-transform duration-200", open && "rotate-180") })] })), open && (jsx("div", __assign$1({ className: "ml-2 border-l border-gray-200 dark:border-gray-700 pl-1" }, { children: items.map(function (item, i) {
+                    if (item.type === "title") {
+                        return jsx(TNDropdownTitle, __assign$1({}, item), i);
+                    }
+                    if (item.type === "group") {
+                        return jsx(TNDropdownGroup, __assign$1({}, item, { navigate: navigate }), i);
+                    }
+                    return jsx(TNDropdownItem, __assign$1({}, item, { navigate: navigate }), i);
+                }) })))] }));
+};
+
+var TNDropdown = function (_a) {
+    var items = _a.items, navigate = _a.navigate, components = _a.components;
+    var Item = (components === null || components === void 0 ? void 0 : components.dropdownItem) || TNDropdownItem;
+    var Group = (components === null || components === void 0 ? void 0 : components.dropdownGroup) || TNDropdownGroup;
+    var Title = (components === null || components === void 0 ? void 0 : components.dropdownTitle) || TNDropdownTitle;
+    return (jsx("div", __assign$1({ className: cn$1("absolute top-full left-0 z-50", "bg-white dark:bg-gray-950", "border border-gray-200 dark:border-gray-800", "shadow-lg", "min-w-[260px]", "w-max", "max-w-[90vw]", "overflow-auto") }, { children: jsx("div", __assign$1({ className: "py-0" }, { children: items.map(function (item, i) {
+                if (item.type === "title")
+                    return jsx(Title, __assign$1({}, item), i);
+                if (item.type === "group")
+                    return (jsx(Group, __assign$1({}, item, { navigate: navigate, components: components }), i));
+                return jsx(Item, __assign$1({}, item, { navigate: navigate }), i);
+            }) })) })));
+};
+
+var TNGroup = function (_a) {
+    var icon = _a.icon, name = _a.name, items = _a.items, navigate = _a.navigate, columns = _a.columns, components = _a.components;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var timeoutRef = useRef(null);
+    var handleEnter = function () {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        setOpen(true);
+    };
+    var handleLeave = function () {
+        timeoutRef.current = setTimeout(function () {
+            setOpen(false);
+        }, 150);
+    };
+    var Dropdown = (components === null || components === void 0 ? void 0 : components.dropdown) || TNDropdown;
+    return (jsxs("div", __assign$1({ className: "relative flex items-center", onMouseEnter: handleEnter, onMouseLeave: handleLeave }, { children: [jsx("div", __assign$1({ className: cn$1("flex items-center", "border border-transparent", "transition-all duration-200", "hover:text-eui-secondary-700", "hover:bg-gray-300/10", open && ["text-eui-secondary-700", "bg-gray-300/10"]) }, { children: jsx(TNItem, { icon: icon, name: name }) })), jsx("div", __assign$1({ className: "absolute top-full left-0 -mt-[1px]" }, { children: open && (jsx(Dropdown, { items: items, navigate: navigate, columns: columns, components: components })) }))] })));
+};
+
+var TopNav = function (_a) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, currentPath = _a.currentPath, navigate = _a.navigate, components = _a.components;
+    var pathname = currentPath !== null && currentPath !== void 0 ? currentPath : (typeof window !== "undefined" ? window.location.pathname : "");
+    var current = pathname.split("/")[1];
+    var resolved = {
+        item: (components === null || components === void 0 ? void 0 : components.item) || TNItem,
+        group: (components === null || components === void 0 ? void 0 : components.group) || TNGroup,
+    };
+    var handleNavigate = function (to) {
+        if (!to)
+            return;
+        navigate ? navigate(to) : (window.location.href = to);
+    };
+    var renderNode = function (node, index) {
+        var _a;
+        if (node.type === "item") {
+            var Component = node.component || resolved.item;
+            return (jsx(Component, { icon: node.icon, name: node.name, selected: (_a = node.to) === null || _a === void 0 ? void 0 : _a.includes(current), onClick: function () { return handleNavigate(node.to); } }, node.key || index));
+        }
+        if (node.type === "group") {
+            var Component = node.component || resolved.group;
+            return (jsx(Component, { icon: node.icon, name: node.name, items: node.items, navigate: navigate, columns: node.columns, components: components }, node.key || index));
+        }
+        return null;
+    };
+    return jsx("div", __assign$1({ className: "flex items-center gap-2" }, { children: items.map(renderNode) }));
+};
+
 var useDrawer = function (defaultVisibility) {
     if (defaultVisibility === void 0) { defaultVisibility = true; }
     var _a = useState(defaultVisibility), show = _a[0], setShow = _a[1];
@@ -146300,4 +146434,4 @@ function EUIDevLayout(_a) {
         } }, { children: jsx(GenericLayout, { children: jsxs(Layout, { children: [header, jsx(Content$2, __assign$1({ styles: "pt-[60px]" }, { children: jsx(ContentArea, __assign$1({ enablePadding: true }, { children: children })) })), footer] }) }) })));
 }
 
-export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, Block, BlockGroup, Brand, Breadcrumb, BreadcrumbItem, Button$2 as Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Content$2 as Content, ContentArea, DataView$3 as DataView, DataViewTable, DateSelector, DefaultLayout, Drawer, DrawerToggler, EUIDevLayout, EUIProvider, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, Image$1 as Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Layout, LineChart, Link, List, ListItem, MarkdownEditor, MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MotionSurface, MultiImageInput, Paragraph, PieChart, PriceTag, ProgressBar, Quote, Radio, RouteTab, RouteTabs, Section, Select$2 as Select, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, Tags, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip$1 as Tooltip, Transition$1 as Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer, cn$1 as cn, createForceLayout, createGridLayout, createTreeLayout, getCurrencySymbol, getLayout, isRenderFn, registerLayout, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };
+export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, Block, BlockGroup, BoxNav, BoxNavItem, Brand, Breadcrumb, BreadcrumbItem, Button$2 as Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, CloudinaryProvider, CloudinaryVideo, Content$2 as Content, ContentArea, DataView$3 as DataView, DataViewTable, DateSelector, DefaultLayout, Drawer, DrawerToggler, EUIDevLayout, EUIProvider, Flag, Flex, FlexCol, FlexRow, Footer, FooterNav, FooterNavGroup, FooterNavItem, FooterNavItemContext, FooterNavItemTitle, Form, FormResponse, GenericLayout, GlowWrapper, Graph, GraphEdge, GraphNode, GraphRenderer, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemContext, HeaderNavItemTitle, HomeLayout, Image$1 as Image, ImageInput, Info, Input, InputFile, InputLabel, InputList, InputListGroup, InputResponse, Layout, LineChart, Link, List, ListItem, MarkdownEditor, MarkdownViewer, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MotionSurface, MultiImageInput, Paragraph, PieChart, PriceTag, ProgressBar, Quote, Radio, RouteTab, RouteTabs, Section, Select$2 as Select, ShapeSwitch, ShowMore, Sidebar, SidebarLayout, SidemenuLayout, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, TNDropdown, TNDropdownItem, TNDropdownTitle, TNGroup, Table, Tag, Tags, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Tooltip$1 as Tooltip, TopNav, Transition$1 as Transition, TransitionDropdown, TransitionFadeIn, Typography, UnderConstructionBanner, ValueBadge, WorldMap, WorldMapCountryTable, YoutubeVideoPlayer, cn$1 as cn, createForceLayout, createGridLayout, createTreeLayout, getCurrencySymbol, getLayout, isRenderFn, registerLayout, resolveWithGlobal, sendToast, useClickOutside, useCloudinaryConfig, useCurrentTheme, useDrawer, useEUIConfig, useIsMobile, useModal, useTheme };

package/build/index.js

@@ -146251,6 +146251,140 @@ function WorldMapCountryTable(_a) {
     return (jsxRuntime.jsx(DataViewTable, { title: title, data: finalData, columns: columns, sortOptions: sortOptions, sortConfig: sortConfig, searchPlaceholder: "Search countries...", defaultPageSize: 6 }));
 }
 
+function BoxNavItem(_a) {
+    var icon = _a.icon, name = _a.name, to = _a.to, selected = _a.selected, onClick = _a.onClick;
+    var normalizedTo = to.startsWith("/") ? to : "/".concat(to);
+    var handleClick = function (e) {
+        if (onClick)
+            onClick(e, normalizedTo);
+    };
+    return (jsxRuntime.jsxs("button", __assign$1({ type: "button", onClick: handleClick, "aria-current": selected ? "page" : undefined, className: classnames("w-full min-w-[80px] flex flex-col items-center justify-center py-3 text-center", "hover:text-secondary-700 hover:bg-gray-300/10 hover:cursor-pointer", selected ? "text-eui-secondary-700 bg-gray-300/10" : "text-gray-400", "eui-theme-transition") }, { children: [jsxRuntime.jsx("div", __assign$1({ className: "text-xl" }, { children: icon })), jsxRuntime.jsx("span", __assign$1({ className: "text-[11px]" }, { children: name }))] })));
+}
+
+function BoxNav(_a) {
+    var _b = _a.data, data = _b === void 0 ? [] : _b, currentPath = _a.currentPath, onNavigate = _a.onNavigate, navigate = _a.navigate;
+    var pathname = currentPath !== null && currentPath !== void 0 ? currentPath : (typeof window !== "undefined" ? window.location.pathname : "");
+    var current = (pathname.split("/")[1] || "").replace(/^\//, "");
+    var handleNavigate = function (to) {
+        if (onNavigate) {
+            onNavigate(to);
+        }
+        else if (navigate) {
+            navigate(to);
+        }
+        else if (typeof window !== "undefined") {
+            window.location.href = to; // fallback for non-router usage
+        }
+    };
+    return (jsxRuntime.jsx("div", __assign$1({ className: "flex justify-between" }, { children: data.map(function (item, index) {
+            var normalized = (item.to || "").replace(/^\//, "");
+            var to = normalized ? "/".concat(normalized) : "/";
+            var selected = normalized === current;
+            return (jsxRuntime.jsx(BoxNavItem, { icon: item.icon, name: item.name, to: to, selected: selected, onClick: function (_, dest) { return handleNavigate(dest); } }, item.to || item.name || index));
+        }) })));
+}
+
+var TNContext = function (_a) {
+    var icon = _a.icon, name = _a.name, badge = _a.badge;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && (jsxRuntime.jsx("div", __assign$1({ className: "text-base text-gray-500 dark:text-gray-400" }, { children: icon }))), jsxRuntime.jsx("div", __assign$1({ className: "flex-1" }, { children: name })), badge && jsxRuntime.jsx("div", { children: badge })] }));
+};
+
+var TNItem = function (_a) {
+    var icon = _a.icon, name = _a.name, selected = _a.selected, onClick = _a.onClick;
+    return (jsxRuntime.jsx("button", __assign$1({ onClick: onClick, className: cn$1("flex items-center gap-2 px-4 py-2 text-sm font-medium", "transition-all duration-200", "text-gray-400", "hover:text-eui-secondary-700", "hover:bg-gray-300/10", selected && ["text-eui-secondary-700", "bg-gray-300/10"]) }, { children: jsxRuntime.jsx(TNContext, { icon: icon, name: name }) })));
+};
+
+var TNDropdownItem = function (_a) {
+    var icon = _a.icon, name = _a.name, badge = _a.badge, to = _a.to, navigate = _a.navigate, onClick = _a.onClick, className = _a.className;
+    var handle = function (e) {
+        if (to) {
+            navigate ? navigate(to) : (window.location.href = to);
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    return (jsxRuntime.jsx("div", __assign$1({ onClick: handle, className: cn$1("flex items-center gap-3 px-3 py-3 cursor-pointer border-b border-gray-200 dark:border-gray-700/40", "text-sm font-medium", "text-gray-600 dark:text-gray-400", "hover:bg-gray-100 dark:hover:bg-gray-700/50", "hover:text-gray-900 dark:hover:text-gray-300", "transition-colors duration-200", className) }, { children: jsxRuntime.jsx(TNContext, { icon: icon, name: name, badge: badge }) })));
+};
+
+var TNDropdownTitle = function (_a) {
+    var name = _a.name, className = _a.className;
+    return (jsxRuntime.jsx("div", __assign$1({ className: cn$1("px-3 py-4 text-xs font-semibold uppercase tracking-wide", "text-gray-500 dark:text-gray-600", className) }, { children: name })));
+};
+
+var TNDropdownGroup = function (_a) {
+    var name = _a.name, icon = _a.icon, badge = _a.badge, items = _a.items, navigate = _a.navigate, className = _a.className;
+    var _b = React.useState(true), open = _b[0], setOpen = _b[1];
+    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", __assign$1({ onClick: function () { return setOpen(function (p) { return !p; }); }, className: cn$1("flex items-center justify-between px-3 py-3 cursor-pointer border-b border-green-900/40", "text-sm font-semibold", "text-gray-900 dark:text-gray-400", "bg-gradient-to-r", "from-gray-100 to-transparent", "dark:from-green-900/30 dark:to-transparent", "hover:from-gray-200 dark:hover:from-green-900/50", "transition-all duration-200", className) }, { children: [jsxRuntime.jsx("div", __assign$1({ className: "flex items-center gap-3" }, { children: jsxRuntime.jsx(TNContext, { icon: icon, name: name, badge: badge }) })), jsxRuntime.jsx(BsChevronDown, { className: cn$1("text-xs transition-transform duration-200", open && "rotate-180") })] })), open && (jsxRuntime.jsx("div", __assign$1({ className: "ml-2 border-l border-gray-200 dark:border-gray-700 pl-1" }, { children: items.map(function (item, i) {
+                    if (item.type === "title") {
+                        return jsxRuntime.jsx(TNDropdownTitle, __assign$1({}, item), i);
+                    }
+                    if (item.type === "group") {
+                        return jsxRuntime.jsx(TNDropdownGroup, __assign$1({}, item, { navigate: navigate }), i);
+                    }
+                    return jsxRuntime.jsx(TNDropdownItem, __assign$1({}, item, { navigate: navigate }), i);
+                }) })))] }));
+};
+
+var TNDropdown = function (_a) {
+    var items = _a.items, navigate = _a.navigate, components = _a.components;
+    var Item = (components === null || components === void 0 ? void 0 : components.dropdownItem) || TNDropdownItem;
+    var Group = (components === null || components === void 0 ? void 0 : components.dropdownGroup) || TNDropdownGroup;
+    var Title = (components === null || components === void 0 ? void 0 : components.dropdownTitle) || TNDropdownTitle;
+    return (jsxRuntime.jsx("div", __assign$1({ className: cn$1("absolute top-full left-0 z-50", "bg-white dark:bg-gray-950", "border border-gray-200 dark:border-gray-800", "shadow-lg", "min-w-[260px]", "w-max", "max-w-[90vw]", "overflow-auto") }, { children: jsxRuntime.jsx("div", __assign$1({ className: "py-0" }, { children: items.map(function (item, i) {
+                if (item.type === "title")
+                    return jsxRuntime.jsx(Title, __assign$1({}, item), i);
+                if (item.type === "group")
+                    return (jsxRuntime.jsx(Group, __assign$1({}, item, { navigate: navigate, components: components }), i));
+                return jsxRuntime.jsx(Item, __assign$1({}, item, { navigate: navigate }), i);
+            }) })) })));
+};
+
+var TNGroup = function (_a) {
+    var icon = _a.icon, name = _a.name, items = _a.items, navigate = _a.navigate, columns = _a.columns, components = _a.components;
+    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    var timeoutRef = React.useRef(null);
+    var handleEnter = function () {
+        if (timeoutRef.current)
+            clearTimeout(timeoutRef.current);
+        setOpen(true);
+    };
+    var handleLeave = function () {
+        timeoutRef.current = setTimeout(function () {
+            setOpen(false);
+        }, 150);
+    };
+    var Dropdown = (components === null || components === void 0 ? void 0 : components.dropdown) || TNDropdown;
+    return (jsxRuntime.jsxs("div", __assign$1({ className: "relative flex items-center", onMouseEnter: handleEnter, onMouseLeave: handleLeave }, { children: [jsxRuntime.jsx("div", __assign$1({ className: cn$1("flex items-center", "border border-transparent", "transition-all duration-200", "hover:text-eui-secondary-700", "hover:bg-gray-300/10", open && ["text-eui-secondary-700", "bg-gray-300/10"]) }, { children: jsxRuntime.jsx(TNItem, { icon: icon, name: name }) })), jsxRuntime.jsx("div", __assign$1({ className: "absolute top-full left-0 -mt-[1px]" }, { children: open && (jsxRuntime.jsx(Dropdown, { items: items, navigate: navigate, columns: columns, components: components })) }))] })));
+};
+
+var TopNav = function (_a) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, currentPath = _a.currentPath, navigate = _a.navigate, components = _a.components;
+    var pathname = currentPath !== null && currentPath !== void 0 ? currentPath : (typeof window !== "undefined" ? window.location.pathname : "");
+    var current = pathname.split("/")[1];
+    var resolved = {
+        item: (components === null || components === void 0 ? void 0 : components.item) || TNItem,
+        group: (components === null || components === void 0 ? void 0 : components.group) || TNGroup,
+    };
+    var handleNavigate = function (to) {
+        if (!to)
+            return;
+        navigate ? navigate(to) : (window.location.href = to);
+    };
+    var renderNode = function (node, index) {
+        var _a;
+        if (node.type === "item") {
+            var Component = node.component || resolved.item;
+            return (jsxRuntime.jsx(Component, { icon: node.icon, name: node.name, selected: (_a = node.to) === null || _a === void 0 ? void 0 : _a.includes(current), onClick: function () { return handleNavigate(node.to); } }, node.key || index));
+        }
+        if (node.type === "group") {
+            var Component = node.component || resolved.group;
+            return (jsxRuntime.jsx(Component, { icon: node.icon, name: node.name, items: node.items, navigate: navigate, columns: node.columns, components: components }, node.key || index));
+        }
+        return null;
+    };
+    return jsxRuntime.jsx("div", __assign$1({ className: "flex items-center gap-2" }, { children: items.map(renderNode) }));
+};
+
 var useDrawer = function (defaultVisibility) {
     if (defaultVisibility === void 0) { defaultVisibility = true; }
     var _a = React.useState(defaultVisibility), show = _a[0], setShow = _a[1];
@@ -146335,6 +146469,8 @@ exports.Badge = Badge;
 exports.BarChart = BarChart;
 exports.Block = Block;
 exports.BlockGroup = BlockGroup;
+exports.BoxNav = BoxNav;
+exports.BoxNavItem = BoxNavItem;
 exports.Brand = Brand;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
@@ -146429,6 +146565,10 @@ exports.StarRating = StarRating;
 exports.StarRatingDistribution = StarRatingDistribution;
 exports.StarRatingInput = StarRatingInput;
 exports.Switch = Switch;
+exports.TNDropdown = TNDropdown;
+exports.TNDropdownItem = TNDropdownItem;
+exports.TNDropdownTitle = TNDropdownTitle;
+exports.TNGroup = TNGroup;
 exports.Table = Table;
 exports.Tag = Tag;
 exports.Tags = Tags;
@@ -146439,6 +146579,7 @@ exports.ThemeSwitch = ThemeSwitch;
 exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
 exports.Tooltip = Tooltip$1;
+exports.TopNav = TopNav;
 exports.Transition = Transition$1;
 exports.TransitionDropdown = TransitionDropdown;
 exports.TransitionFadeIn = TransitionFadeIn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.26.0",
+  "version": "2.26.1",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "keywords": [