xertica-ui 2.5.3 → 2.7.0

package/dist/{rich-text-editor-B2CKz7nx.cjs → rich-text-editor-BuqSu718.cjs}

@@ -1,16 +1,17 @@
 'use strict';
 
 const jsxRuntime = require('react/jsx-runtime');
+const ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
+const button = require('./button-0BlA47It.cjs');
 const React = require('react');
 const RechartsPrimitive = require('recharts');
-const button = require('./button-0BlA47It.cjs');
 const classVarianceAuthority = require('class-variance-authority');
 const lucideReact = require('lucide-react');
 const skeleton = require('./skeleton-DjiHerJn.cjs');
 const select = require('./select-CH6v_KcQ.cjs');
 const DialogPrimitive = require('@radix-ui/react-dialog');
 const dropdownMenu = require('./dropdown-menu-BMcykFDf.cjs');
-const input = require('./input-C_UiS2Py.cjs');
+const input = require('./input-ByYuOv8A.cjs');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,10 +30,68 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 
+const ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const RechartsPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(RechartsPrimitive);
 const DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ScrollAreaPrimitive__namespace.Root,
+    {
+      "data-slot": "scroll-area",
+      className: button.cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ScrollAreaPrimitive__namespace.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            tabIndex: 0,
+            role: "region",
+            "aria-label": "Região rolável",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaPrimitive__namespace.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: button.cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        ScrollAreaPrimitive__namespace.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
+
 const alertVariants = classVarianceAuthority.cva(
   "relative w-full rounded-[var(--radius)] border-l-4 px-4 py-3 grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
@@ -209,6 +268,7 @@ function ChartContainer({
     }
   ) });
 }
+const SAFE_CSS_COLOR = /^(#[0-9a-fA-F]{3,8}|(rgb|rgba|hsl|hsla|var)\([^;{}<>]*\)|[a-zA-Z-]+)$/;
 const ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(([, config2]) => config2.theme || config2.color);
   if (!colorConfig.length) {
@@ -223,7 +283,10 @@ const ChartStyle = ({ id, config }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, itemConfig]) => {
             const color = itemConfig.theme?.[theme] || itemConfig.color;
-            return color ? `  --color-${key}: ${color};` : null;
+            if (!color || !SAFE_CSS_COLOR.test(color.trim())) {
+              return null;
+            }
+            return `  --color-${key}: ${color};`;
           }).join("\n")}
 }
 `
@@ -2889,6 +2952,8 @@ exports.PieMetricChart = PieMetricChart;
 exports.RadarMetricChart = RadarMetricChart;
 exports.RadialBarMetricChart = RadialBarMetricChart;
 exports.RichTextEditor = RichTextEditor;
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
 exports.SparklineChart = SparklineChart;
 exports.Table = Table;
 exports.TableBody = TableBody;

package/dist/{rich-text-editor-DloeW0wc.js → rich-text-editor-CV8FtA_l.js}

@@ -1,15 +1,73 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { c as cn, B as Button } from './button-DZHzN1Gd.js';
 import * as React from 'react';
 import { useRef, useState, useCallback, useEffect } from 'react';
 import * as RechartsPrimitive from 'recharts';
-import { c as cn, B as Button } from './button-DZHzN1Gd.js';
 import { cva } from 'class-variance-authority';
 import { XCircle, AlertTriangle, Info, CheckCircle, RefreshCw, BarChart3, WifiOff, XIcon, Undo, Redo, ChevronDown, Type, Heading1, Heading2, Heading3, Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, List, ListOrdered, Link, X, Search, ChevronUp } from 'lucide-react';
 import { C as Card, e as CardHeader, f as CardTitle, c as CardDescription, a as CardAction, b as CardContent, d as CardFooter, S as Skeleton } from './skeleton-DtR5tkYe.js';
 import { S as Select, h as SelectTrigger, i as SelectValue, a as SelectContent, c as SelectItem } from './select-D-xvCZK2.js';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { D as DropdownMenu, n as DropdownMenuTrigger, b as DropdownMenuContent, d as DropdownMenuItem } from './dropdown-menu-Dn_eV2Xb.js';
-import { P as Popover, c as PopoverTrigger, b as PopoverContent, I as Input } from './input-cc-PTD4R.js';
+import { P as Popover, c as PopoverTrigger, b as PopoverContent, I as Input } from './input-B0_vbA3g.js';
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            tabIndex: 0,
+            role: "region",
+            "aria-label": "Região rolável",
+            className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "bg-border relative flex-1 rounded-full"
+        }
+      )
+    }
+  );
+}
 
 const alertVariants = cva(
   "relative w-full rounded-[var(--radius)] border-l-4 px-4 py-3 grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-5 [&>svg]:translate-y-0.5 [&>svg]:text-current",
@@ -187,6 +245,7 @@ function ChartContainer({
     }
   ) });
 }
+const SAFE_CSS_COLOR = /^(#[0-9a-fA-F]{3,8}|(rgb|rgba|hsl|hsla|var)\([^;{}<>]*\)|[a-zA-Z-]+)$/;
 const ChartStyle = ({ id, config }) => {
   const colorConfig = Object.entries(config).filter(([, config2]) => config2.theme || config2.color);
   if (!colorConfig.length) {
@@ -201,7 +260,10 @@ const ChartStyle = ({ id, config }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, itemConfig]) => {
             const color = itemConfig.theme?.[theme] || itemConfig.color;
-            return color ? `  --color-${key}: ${color};` : null;
+            if (!color || !SAFE_CSS_COLOR.test(color.trim())) {
+              return null;
+            }
+            return `  --color-${key}: ${color};`;
           }).join("\n")}
 }
 `
@@ -2829,4 +2891,4 @@ function RichTextEditor({
   );
 }
 
-export { Alert as A, EmptyTitle as B, ChartCard as C, DashboardBarChart as D, Empty as E, RadialBarMetricChart as F, GaugeChart as G, HorizontalBarChart as H, InteractiveTimeSeriesChart as I, RichTextEditor as J, TableBody as K, TableCaption as L, TableCell as M, TableFooter as N, TableHead as O, PieMetricChart as P, TableHeader as Q, RadarMetricChart as R, SparklineChart as S, Table as T, TableRow as U, Textarea as V, useChart as W, useRichTextEditor as X, AlertDescription as a, AlertTitle as b, ChartContainer as c, ChartLegend as d, ChartLegendContent as e, ChartStyle as f, ChartTooltip as g, ChartTooltipContent as h, ComboMetricChart as i, DashboardLineChart as j, Dialog as k, DialogBody as l, DialogClose as m, DialogContent as n, DialogDescription as o, DialogFooter as p, DialogHeader as q, DialogOverlay as r, DialogPortal as s, DialogTitle as t, DialogTrigger as u, DonutBreakdownChart as v, EmptyAction as w, EmptyDescription as x, EmptyIcon as y, EmptyImage as z };
+export { Alert as A, EmptyTitle as B, ChartCard as C, DashboardBarChart as D, Empty as E, RadialBarMetricChart as F, GaugeChart as G, HorizontalBarChart as H, InteractiveTimeSeriesChart as I, RichTextEditor as J, ScrollBar as K, SparklineChart as L, TableBody as M, TableCaption as N, TableCell as O, PieMetricChart as P, TableFooter as Q, RadarMetricChart as R, ScrollArea as S, Table as T, TableHead as U, TableHeader as V, TableRow as W, Textarea as X, useChart as Y, useRichTextEditor as Z, AlertDescription as a, AlertTitle as b, ChartContainer as c, ChartLegend as d, ChartLegendContent as e, ChartStyle as f, ChartTooltip as g, ChartTooltipContent as h, ComboMetricChart as i, DashboardLineChart as j, Dialog as k, DialogBody as l, DialogClose as m, DialogContent as n, DialogDescription as o, DialogFooter as p, DialogHeader as q, DialogOverlay as r, DialogPortal as s, DialogTitle as t, DialogTrigger as u, DonutBreakdownChart as v, EmptyAction as w, EmptyDescription as x, EmptyIcon as y, EmptyImage as z };

package/dist/{sidebar-B4ZWaMrE.js → sidebar-B7YzwAp3.js}

@@ -2,14 +2,15 @@ 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-BX3ueACh.js';
+import { T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from './ThemeToggle-BpM_iHh8.js';
+import { L as LanguageSelector } from './LanguageSelector-BR3Ss0k_.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 +238,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 +385,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 +511,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 +717,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 +804,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 +976,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") })