xertica-ui 2.5.2 → 2.6.0

package/dist/{sidebar-3XyzjVBw.js → sidebar-BI6mZlC8.js}

@@ -2,14 +2,14 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { createContext, useState, useEffect, useRef, useMemo, useContext } from 'react';
 import { Menu, Settings, User, LogOut, ArrowLeft, Search, Filter, MoreVertical, ChevronRight } from 'lucide-react';
 import { B as Button, c as cn } from './button-DZHzN1Gd.js';
-import { L as LanguageSelector, T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from './XerticaXLogo-mqjoBiLI.js';
+import { L as LanguageSelector, T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from './LanguageSelector-CmTj3lWq.js';
 import { B as Breadcrumb, d as BreadcrumbList, b as BreadcrumbItem, c as BreadcrumbLink, e as BreadcrumbPage, f as BreadcrumbSeparator } from './breadcrumb-ifNsA7Zl.js';
 import { D as DropdownMenu, n as DropdownMenuTrigger, b as DropdownMenuContent, e as DropdownMenuLabel, i as DropdownMenuSeparator, d as DropdownMenuItem, k as DropdownMenuSub, m as DropdownMenuSubTrigger, f as DropdownMenuPortal, l as DropdownMenuSubContent } from './dropdown-menu-Dn_eV2Xb.js';
 import { A as Avatar, b as AvatarImage, a as AvatarFallback } from './avatar-3kO2Anrp.js';
 import { a as useOptionalLayout } from './LayoutContext-DNl1xSoX.js';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useTranslation } from 'react-i18next';
-import { I as Input, S as ScrollArea, P as Popover, c as PopoverTrigger, b as PopoverContent } from './input-cc-PTD4R.js';
+import { I as Input, P as Popover, c as PopoverTrigger, b as PopoverContent } from './input-B0_vbA3g.js';
 import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger } from './tooltip-RtbSmPYJ.js';
 import { C as CustomTooltipContent } from './CustomTooltipContent-CNbVB2NS.js';
 
@@ -237,18 +237,114 @@ function SidebarHeader({
     /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-4 py-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center h-10 justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? logo || /* @__PURE__ */ jsx(XerticaLogo, { className: "h-5 w-auto", variant: "white" }) : logoCollapsed || /* @__PURE__ */ jsx(XerticaXLogo, { className: "h-5 w-auto", variant: "white" }) }) }) })
   ] });
 }
+function OverflowGroupsAccordion({
+  expanded,
+  overflowGroups,
+  location,
+  handleNavigate,
+  moreOptionsLabel,
+  onOpenChange
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => {
+    const next = !isOpen;
+    setIsOpen(next);
+    onOpenChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: toggle,
+        className: cn(
+          "w-full h-10 flex items-center rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
+          expanded ? "gap-3 px-3 justify-start" : "justify-center px-0"
+        ),
+        "aria-expanded": isOpen,
+        "aria-label": moreOptionsLabel,
+        children: [
+          /* @__PURE__ */ jsx(MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+          expanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-sidebar-foreground text-left", children: moreOptionsLabel }),
+            /* @__PURE__ */ jsx(
+              ChevronRight,
+              {
+                className: cn("w-4 h-4 flex-shrink-0 transition-transform duration-200", isOpen && "rotate-90")
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { height: 0, opacity: 0 },
+        animate: { height: "auto", opacity: 1 },
+        exit: { height: 0, opacity: 0 },
+        transition: { duration: 0.2 },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-3", children: overflowGroups.map((group) => {
+          const GroupIcon = group.icon;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            (group.label || GroupIcon) && expanded && /* @__PURE__ */ jsxs("div", { className: "px-3 mb-1 flex items-center gap-2", children: [
+              GroupIcon && (React__default.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsx(GroupIcon, { className: "h-3 w-3 text-sidebar-foreground/60" })),
+              group.label && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/60", children: group.label })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: group.items.map((item) => {
+              const Icon = item.icon;
+              const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + "/");
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleNavigate(item.path),
+                  className: cn(
+                    "w-full h-9 flex items-center gap-2.5 rounded-[var(--radius-button)] transition-all duration-200 text-left text-sm",
+                    expanded ? "px-3" : "justify-center px-0",
+                    isActive ? "bg-sidebar-foreground/15 text-sidebar-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"
+                  ),
+                  children: [
+                    Icon && /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                    expanded && /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+                  ]
+                },
+                item.path
+              );
+            }) })
+          ] }, group.id);
+        }) })
+      }
+    ) })
+  ] });
+}
 function SidebarNav({
   navigationGroups = [],
   routes = [],
   variant = "default"
 }) {
-  const { expanded, navigate, location, onToggle } = useSidebarContext();
+  const { expanded, isMobileViewport, navigate, location, onToggle } = useSidebarContext();
   const { t } = useTranslation();
   const navRef = useRef(null);
   const [localActiveItem, setLocalActiveItem] = useState(null);
   const [hasOverflow, setHasOverflow] = useState(false);
   const [visibleItems, setVisibleItems] = useState([]);
   const [overflowItems, setOverflowItems] = useState([]);
+  const [openSubmenus, setOpenSubmenus] = useState(/* @__PURE__ */ new Set());
+  const [hasGroupOverflow, setHasGroupOverflow] = useState(false);
+  const [visibleGroups, setVisibleGroups] = useState([]);
+  const [overflowGroups, setOverflowGroups] = useState([]);
+  const [isOverflowAccordionOpen, setIsOverflowAccordionOpen] = useState(false);
+  const toggleSubmenu = (path) => {
+    setOpenSubmenus((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
   const labelTranslations = useMemo(
     () => ({
       home: "Início",
@@ -288,6 +384,45 @@ function SidebarNav({
     window.addEventListener("resize", checkOverflow);
     return () => window.removeEventListener("resize", checkOverflow);
   }, [navigationItems.length, variant]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (variant === "assistant") return;
+    if (!navigationGroups || navigationGroups.length === 0) return;
+    const checkGroupOverflow = () => {
+      if (!navRef.current) return;
+      const containerHeight = navRef.current.clientHeight;
+      const itemHeight = 40;
+      const groupHeaderHeight = 32;
+      const groupSpacing = 12;
+      const moreButtonHeight = 44;
+      const padding = 32;
+      let currentHeight = padding;
+      let visibleCount = 0;
+      for (let i = 0; i < navigationGroups.length; i++) {
+        const group = navigationGroups[i];
+        let groupHeight = 0;
+        if (group.label) groupHeight += groupHeaderHeight;
+        groupHeight += group.items.length * itemHeight;
+        if (i > 0) groupHeight += groupSpacing;
+        const wouldExceed = currentHeight + groupHeight + (visibleCount < navigationGroups.length - 1 ? moreButtonHeight : 0) > containerHeight;
+        if (wouldExceed && visibleCount > 0) break;
+        currentHeight += groupHeight;
+        visibleCount++;
+      }
+      if (visibleCount < navigationGroups.length) {
+        setHasGroupOverflow(true);
+        setVisibleGroups(navigationGroups.slice(0, visibleCount));
+        setOverflowGroups(navigationGroups.slice(visibleCount));
+      } else {
+        setHasGroupOverflow(false);
+        setVisibleGroups(navigationGroups);
+        setOverflowGroups([]);
+      }
+    };
+    checkGroupOverflow();
+    window.addEventListener("resize", checkGroupOverflow);
+    return () => window.removeEventListener("resize", checkGroupOverflow);
+  }, [navigationGroups, expanded, variant]);
   const handleNavigate = (path) => {
     setLocalActiveItem(path);
     navigate(path);
@@ -375,6 +510,80 @@ function SidebarNav({
         /* @__PURE__ */ jsx(CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsx("p", { children: item.label }) })
       ] }, item.path);
     }
+    if (isMobileViewport && hasChildren) {
+      const isOpen = openSubmenus.has(item.path);
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "group/item flex items-center w-full h-10 rounded-[var(--radius-button)] transition-all duration-200",
+              activeClass
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleNavigate(item.path),
+                  className: "flex items-center gap-3 px-3 flex-1 h-full min-w-0 text-left",
+                  children: [
+                    Icon && /* @__PURE__ */ jsx(Icon, { className: "w-5 h-5 flex-shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate flex-1", children: item.label })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    toggleSubmenu(item.path);
+                  },
+                  className: "h-full px-2 pr-2.5 flex items-center justify-center text-sidebar-foreground/40 hover:text-sidebar-foreground transition-colors",
+                  "aria-label": t("sidebar.submenu", { label: item.label }),
+                  "aria-expanded": isOpen,
+                  children: /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: cn("w-4 h-4 transition-transform duration-200", isOpen && "rotate-90")
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isOpen && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: { height: 0, opacity: 0 },
+            animate: { height: "auto", opacity: 1 },
+            exit: { height: 0, opacity: 0 },
+            transition: { duration: 0.2 },
+            className: "overflow-hidden",
+            children: /* @__PURE__ */ jsx("div", { className: "ml-4 mt-0.5 mb-0.5 space-y-0.5", children: item.children.map((child) => {
+              const ChildIcon = child.icon;
+              const isChildActive = location.pathname === child.path || location.pathname.startsWith(child.path + "/");
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleNavigate(child.path),
+                  className: cn(
+                    "w-full h-9 flex items-center gap-2.5 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-left",
+                    isChildActive ? "bg-sidebar-foreground/15 text-sidebar-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"
+                  ),
+                  children: [
+                    ChildIcon && /* @__PURE__ */ jsx(ChildIcon, { className: "h-4 w-4 flex-shrink-0" }),
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-sm", children: child.label })
+                  ]
+                },
+                child.path
+              );
+            }) })
+          }
+        ) })
+      ] }, item.path);
+    }
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -507,7 +716,85 @@ function SidebarNav({
     ] }, group.id);
   };
   if (variant === "assistant") {
-    return /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full px-4", children: navigationGroups.map((group) => renderAssistantGroup(group)) }) });
+    return /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full px-4",
+        style: { overflowY: "auto", overflowX: "hidden" },
+        children: navigationGroups.map((group) => renderAssistantGroup(group))
+      }
+    ) });
+  }
+  if (isMobileViewport && isOverflowAccordionOpen) {
+    return /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "h-full",
+        style: { overflowY: "auto", overflowX: "hidden" },
+        children: /* @__PURE__ */ jsx(
+          "nav",
+          {
+            id: "sidebar-nav",
+            "aria-label": t("sidebar.mainNavigation"),
+            className: "px-4 py-4",
+            ref: navRef,
+            children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+              (hasGroupOverflow ? visibleGroups : navigationGroups).map((group) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderDefaultGroup(group) }, group.id)),
+              hasGroupOverflow && /* @__PURE__ */ jsx(
+                OverflowGroupsAccordion,
+                {
+                  expanded,
+                  overflowGroups,
+                  location,
+                  handleNavigate,
+                  moreOptionsLabel: t("sidebar.moreOptions"),
+                  onOpenChange: setIsOverflowAccordionOpen
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              (hasOverflow ? visibleItems : navigationItems).map((item) => renderDefaultItem(item)),
+              hasOverflow && /* @__PURE__ */ jsxs(Popover, { children: [
+                /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    className: expanded ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground" : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
+                    "aria-label": t("sidebar.moreOptions"),
+                    children: [
+                      /* @__PURE__ */ jsx(MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+                      expanded && /* @__PURE__ */ jsx("span", { className: "truncate text-sidebar-foreground", children: t("sidebar.moreOptions") })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(
+                  PopoverContent,
+                  {
+                    side: "right",
+                    align: "start",
+                    className: "w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg",
+                    sideOffset: 8,
+                    children: /* @__PURE__ */ jsx("div", { className: "space-y-1", children: overflowItems.map((item) => {
+                      const Icon = item.icon;
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => handleNavigate(item.path),
+                          className: "w-full h-9 flex items-center gap-2 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground text-left",
+                          children: [
+                            Icon && /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                            /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+                          ]
+                        },
+                        item.path
+                      );
+                    }) })
+                  }
+                )
+              ] })
+            ] })
+          }
+        )
+      }
+    ) });
   }
   return /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(
     "nav",
@@ -516,7 +803,75 @@ function SidebarNav({
       "aria-label": t("sidebar.mainNavigation"),
       className: "h-full px-4 py-4 overflow-hidden",
       ref: navRef,
-      children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: navigationGroups.map((group) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderDefaultGroup(group) }, group.id)) }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+      children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        (hasGroupOverflow ? visibleGroups : navigationGroups).map((group) => /* @__PURE__ */ jsx(React__default.Fragment, { children: renderDefaultGroup(group) }, group.id)),
+        hasGroupOverflow && (isMobileViewport ? (
+          // Mobile: accordion inline abre abaixo, igual aos subitens
+          /* @__PURE__ */ jsx(
+            OverflowGroupsAccordion,
+            {
+              expanded,
+              overflowGroups,
+              location,
+              handleNavigate,
+              moreOptionsLabel: t("sidebar.moreOptions"),
+              onOpenChange: setIsOverflowAccordionOpen
+            }
+          )
+        ) : (
+          // Desktop: popover lateral direito
+          /* @__PURE__ */ jsxs(Popover, { children: [
+            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: expanded ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground" : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
+                "aria-label": t("sidebar.moreOptions"),
+                children: [
+                  /* @__PURE__ */ jsx(MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+                  expanded && /* @__PURE__ */ jsx("span", { className: "truncate text-sidebar-foreground", children: t("sidebar.moreOptions") })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              PopoverContent,
+              {
+                side: "right",
+                align: "start",
+                className: "w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg",
+                sideOffset: 8,
+                children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: overflowGroups.map((group) => {
+                  const GroupIcon = group.icon;
+                  return /* @__PURE__ */ jsxs("div", { children: [
+                    (group.label || GroupIcon) && /* @__PURE__ */ jsxs("div", { className: "px-2 mb-1 flex items-center gap-2", children: [
+                      GroupIcon && (React__default.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsx(GroupIcon, { className: "h-3 w-3 text-popover-foreground/60" })),
+                      group.label && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-popover-foreground/60", children: group.label })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.items.map((item) => {
+                      const Icon = item.icon;
+                      const isActive = location.pathname === item.path || location.pathname.startsWith(item.path + "/");
+                      return /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          onClick: () => handleNavigate(item.path),
+                          className: cn(
+                            "w-full h-9 flex items-center gap-2 px-2 rounded-[var(--radius-button)] transition-all duration-200 text-left text-sm",
+                            isActive ? "bg-accent text-accent-foreground font-medium" : "text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground"
+                          ),
+                          children: [
+                            Icon && /* @__PURE__ */ jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                            /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+                          ]
+                        },
+                        item.path
+                      );
+                    }) })
+                  ] }, group.id);
+                }) })
+              }
+            )
+          ] })
+        ))
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
         (hasOverflow ? visibleItems : navigationItems).map((item) => renderDefaultItem(item)),
         hasOverflow && /* @__PURE__ */ jsxs(Popover, { children: [
           /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
@@ -620,7 +975,10 @@ function SidebarSearch({
             onClick: () => fixedArea.onClick?.(),
             className: "h-10 w-10 flex items-center justify-center rounded-[var(--radius-button)] bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 transition-all",
             "aria-label": t("assistant.newConversation"),
-            children: React__default.isValidElement(fixedArea.icon) ? fixedArea.icon : /* @__PURE__ */ jsx(fixedArea.icon, { className: "h-5 w-5" })
+            children: React__default.isValidElement(fixedArea.icon) ? fixedArea.icon : (() => {
+              const FixedAreaIcon = fixedArea.icon;
+              return /* @__PURE__ */ jsx(FixedAreaIcon, { className: "h-5 w-5" });
+            })()
           }
         ) }),
         /* @__PURE__ */ jsx(CustomTooltipContent, { side: "right", children: t("assistant.newConversation") })