xertica-ui 2.3.0 → 2.4.0

package/dist/{sidebar-DQj1z3jG.cjs → sidebar-B9NR0lCe.cjs}

@@ -2,16 +2,17 @@
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const lucideReact = require("lucide-react");
-const button = require("./button-0CXwCRTm.cjs");
-const XerticaXLogo = require("./XerticaXLogo-D8jf0SNv.cjs");
-const breadcrumb = require("./breadcrumb-DnDlQFg2.cjs");
-const dropdownMenu = require("./dropdown-menu-Ze1YZFyc.cjs");
-const avatar = require("./avatar-Cq5_E8r9.cjs");
-const LayoutContext = require("./LayoutContext-BDmcZfMH.cjs");
+const button = require("./button-Bnv9SvYK.cjs");
+const XerticaXLogo = require("./XerticaXLogo-DTee_y8X.cjs");
+const breadcrumb = require("./breadcrumb-DjSxkjlQ.cjs");
+const dropdownMenu = require("./dropdown-menu-B_uEXNc4.cjs");
+const avatar = require("./avatar-CuYu2MKt.cjs");
+const LayoutContext = require("./LayoutContext-C4kKN9RV.cjs");
 const framerMotion = require("framer-motion");
-const input = require("./input-CPl84zAx.cjs");
-const tooltip = require("./tooltip-CNtsL5cB.cjs");
-const CustomTooltipContent = require("./CustomTooltipContent-c_K-DWRr.cjs");
+const reactI18next = require("react-i18next");
+const input = require("./input-CNFHVKvo.cjs");
+const tooltip = require("./tooltip-CwgSdy3h.cjs");
+const CustomTooltipContent = require("./CustomTooltipContent-BT6brkVJ.cjs");
 function Header({
   title,
   breadcrumbs,
@@ -31,106 +32,127 @@ function Header({
   const layout = LayoutContext.useOptionalLayout();
   const toggleSidebar = (layout == null ? void 0 : layout.toggleSidebar) ?? (() => {
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `bg-card text-foreground shadow-sm border-b border-border px-[24px] h-[64px] flex-shrink-0 flex items-center ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full p-[0px]", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground w-full overflow-x-auto", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        button.Button,
-        {
-          variant: "ghost",
-          size: "sm",
-          onClick: toggleSidebar,
-          className: "md:hidden mr-2 p-2 shrink-0",
-          "aria-label": "Abrir menu lateral",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
-        }
-      ),
-      breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbList, { className: "flex-nowrap whitespace-nowrap", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: item.href ? renderLink ? /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbLink, { asChild: true, className: "flex items-center gap-1.5", children: renderLink(item.href, {
-          className: "flex items-center gap-1.5",
-          children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            item.icon,
-            item.label
-          ] })
-        }) }) : /* @__PURE__ */ jsxRuntime.jsxs(breadcrumb.BreadcrumbLink, { href: item.href, className: "flex items-center gap-1.5", children: [
-          item.icon,
-          item.label
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(breadcrumb.BreadcrumbPage, { className: "flex items-center gap-1.5", children: [
-          item.icon,
-          item.label
-        ] }) }),
-        index < breadcrumbs.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbSeparator, {})
-      ] }, index)) }) }) : title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-medium shrink-0", children: title }) : /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbList, { className: "flex-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbPage, { className: "text-foreground font-medium shrink-0", children: "Xertica.ai" }) }) }) }),
-      breadcrumbSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: breadcrumbSlot })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 shrink-0 ml-4", children: [
-      showLanguageSelector && /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
-      showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.ThemeToggle, { className: "hover:bg-accent" }),
-      actions == null ? void 0 : actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
-        button.Button,
-        {
-          variant: "ghost",
-          size: action.label ? "sm" : "icon",
-          onClick: action.onClick,
-          className: `hover:bg-accent ${action.className || ""}`,
-          "aria-label": action.label || action.id,
-          children: [
-            action.icon,
-            action.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 hidden md:inline", children: action.label })
-          ]
-        },
-        action.id
-      )),
-      showSettings && /* @__PURE__ */ jsxRuntime.jsx(
-        button.Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          onClick: onSettingsClick,
-          className: "hover:bg-accent",
-          "aria-label": "Configurações",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "w-5 h-5" })
-        }
-      ),
-      user && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", className: "relative h-8 w-8 rounded-full p-0 overflow-hidden border border-border/50 hover:border-primary/30 transition-colors", "aria-label": "Menu do usuário", children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "h-8 w-8", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: user.avatar, alt: user.name || "User" }),
-          /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "bg-primary/10 text-primary text-xs font-medium", children: user.name ? user.name.charAt(0).toUpperCase() : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-4 h-4" }) })
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { className: "w-56", align: "end", forceMount: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-none", children: user.name || "User" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-none text-muted-foreground", children: user.email || "user@example.com" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
-          (_a = user.menuItems) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: item.onClick, className: item.className, children: [
-            item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: item.icon }),
-            item.label
-          ] }, item.id)),
-          !user.menuItems && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: onSettingsClick, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "mr-2 h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Settings" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: onLogoutClick, className: "text-destructive focus:text-destructive", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Logout" })
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "header",
+    {
+      className: `bg-card text-foreground shadow-sm border-b border-border px-[24px] h-[64px] flex-shrink-0 flex items-center ${className || ""}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full p-[0px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground w-full overflow-x-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: toggleSidebar,
+              className: "md:hidden mr-2 p-2 shrink-0",
+              "aria-label": "Abrir menu lateral",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
+            }
+          ),
+          breadcrumbs && breadcrumbs.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbList, { className: "flex-nowrap whitespace-nowrap", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: item.href ? renderLink ? /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbLink, { asChild: true, className: "flex items-center gap-1.5", children: renderLink(item.href, {
+              className: "flex items-center gap-1.5",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                item.icon,
+                item.label
+              ] })
+            }) }) : /* @__PURE__ */ jsxRuntime.jsxs(breadcrumb.BreadcrumbLink, { href: item.href, className: "flex items-center gap-1.5", children: [
+              item.icon,
+              item.label
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(breadcrumb.BreadcrumbPage, { className: "flex items-center gap-1.5", children: [
+              item.icon,
+              item.label
+            ] }) }),
+            index < breadcrumbs.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbSeparator, {})
+          ] }, index)) }) }) : title ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground font-medium shrink-0", children: title }) : /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbList, { className: "flex-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbItem, { children: /* @__PURE__ */ jsxRuntime.jsx(breadcrumb.BreadcrumbPage, { className: "text-foreground font-medium shrink-0", children: "Xertica.ai" }) }) }) }),
+          breadcrumbSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center shrink-0", children: breadcrumbSlot })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 shrink-0 ml-4", children: [
+          showLanguageSelector && /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
+          showThemeToggle && /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.ThemeToggle, { className: "hover:bg-accent" }),
+          actions == null ? void 0 : actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+            button.Button,
+            {
+              variant: "ghost",
+              size: action.label ? "sm" : "icon",
+              onClick: action.onClick,
+              className: `hover:bg-accent ${action.className || ""}`,
+              "aria-label": action.label || action.id,
+              children: [
+                action.icon,
+                action.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 hidden md:inline", children: action.label })
+              ]
+            },
+            action.id
+          )),
+          showSettings && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: onSettingsClick,
+              className: "hover:bg-accent",
+              "aria-label": "Configurações",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "w-5 h-5" })
+            }
+          ),
+          user && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              button.Button,
+              {
+                variant: "ghost",
+                className: "relative h-8 w-8 rounded-full p-0 overflow-hidden border border-border/50 hover:border-primary/30 transition-colors",
+                "aria-label": "Menu do usuário",
+                children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "h-8 w-8", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: user.avatar, alt: user.name || "User" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "bg-primary/10 text-primary text-xs font-medium", children: user.name ? user.name.charAt(0).toUpperCase() : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: "w-4 h-4" }) })
+                ] })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { className: "w-56", align: "end", forceMount: true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuLabel, { className: "font-normal", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium leading-none", children: user.name || "User" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs leading-none text-muted-foreground", children: user.email || "user@example.com" })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSeparator, {}),
+              (_a = user.menuItems) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: item.onClick, className: item.className, children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: item.icon }),
+                item.label
+              ] }, item.id)),
+              !user.menuItems && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuItem, { onClick: onSettingsClick, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "mr-2 h-4 w-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Settings" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  dropdownMenu.DropdownMenuItem,
+                  {
+                    onClick: onLogoutClick,
+                    className: "text-destructive focus:text-destructive",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "mr-2 h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Logout" })
+                    ]
+                  }
+                )
+              ] })
             ] })
-          ] })
+          ] }),
+          showLogout && /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              onClick: onLogoutClick,
+              className: "hover:bg-accent text-muted-foreground hover:text-foreground",
+              "aria-label": "Sair",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" })
+            }
+          )
         ] })
-      ] }),
-      showLogout && /* @__PURE__ */ jsxRuntime.jsx(
-        button.Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          onClick: onLogoutClick,
-          className: "hover:bg-accent text-muted-foreground hover:text-foreground",
-          "aria-label": "Sair",
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5" })
-        }
-      )
-    ] })
-  ] }) });
+      ] })
+    }
+  );
 }
 const SidebarContext = React.createContext(null);
 function useSidebarContext() {
@@ -153,7 +175,7 @@ function SidebarRoot({
   const [localExpanded, setLocalExpanded] = React.useState(false);
   const [isMobileViewport, setIsMobileViewport] = React.useState(false);
   const expanded = expandedProp !== void 0 ? expandedProp : (layoutContext == null ? void 0 : layoutContext.sidebarExpanded) ?? localExpanded;
-  const onToggle = onToggleProp || ((layoutContext == null ? void 0 : layoutContext.toggleSidebar) || (() => setLocalExpanded((prev) => !prev)));
+  const onToggle = onToggleProp || (layoutContext == null ? void 0 : layoutContext.toggleSidebar) || (() => setLocalExpanded((prev) => !prev));
   const width = widthProp !== void 0 ? widthProp : (layoutContext == null ? void 0 : layoutContext.sidebarWidth) ?? 280;
   const navigate = navigateProp || ((path) => {
     if (typeof window !== "undefined") window.location.href = path;
@@ -165,8 +187,12 @@ function SidebarRoot({
     window.addEventListener("resize", checkViewport);
     return () => window.removeEventListener("resize", checkViewport);
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: { expanded, isMobileViewport, onToggle, navigate, location, width }, children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipProvider, { delayDuration: 300, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SidebarContext.Provider,
+    {
+      value: { expanded, isMobileViewport, onToggle, navigate, location, width },
+      children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.TooltipProvider, { delayDuration: 300, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
           @media (max-width: 767px) {
             [style*="padding-left"].flex-1,
             [style*="paddingLeft"].flex-1 {
@@ -174,32 +200,35 @@ function SidebarRoot({
             }
           }
         ` }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: button.cn(
-          "bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50",
-          expanded ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0" : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0",
-          className
-        ),
-        style: expanded && !isMobileViewport ? { width: `${width}px` } : void 0,
-        children
-      }
-    )
-  ] }) });
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: button.cn(
+              "bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50",
+              expanded ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0" : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0",
+              className
+            ),
+            style: expanded && !isMobileViewport ? { width: `${width}px` } : void 0,
+            children
+          }
+        )
+      ] })
+    }
+  );
 }
 function SidebarHeader({
   logo,
   logoCollapsed
 }) {
   const { expanded, onToggle } = useSidebarContext();
+  const { t } = reactI18next.useTranslation();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]", children: /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         onClick: onToggle,
         className: "w-full h-10 flex items-center gap-3 px-3 justify-center rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
-        "aria-label": expanded ? "Recolher menu" : "Expandir menu",
+        "aria-label": expanded ? t("sidebar.collapse") : t("sidebar.expand"),
         "aria-expanded": expanded,
         "aria-controls": "sidebar-nav",
         children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
@@ -214,22 +243,29 @@ function SidebarNav({
   variant = "default"
 }) {
   const { expanded, navigate, location, onToggle } = useSidebarContext();
+  const { t } = reactI18next.useTranslation();
   const navRef = React.useRef(null);
   const [localActiveItem, setLocalActiveItem] = React.useState(null);
   const [hasOverflow, setHasOverflow] = React.useState(false);
   const [visibleItems, setVisibleItems] = React.useState([]);
   const [overflowItems, setOverflowItems] = React.useState([]);
-  const labelTranslations = React.useMemo(() => ({
-    home: "Início",
-    dashboard: "Painel",
-    components: "Componentes"
-  }), []);
-  const navigationItems = React.useMemo(() => (routes || []).map((route) => ({
-    ...route,
-    label: labelTranslations[route.label.toLowerCase()] || route.label,
-    active: location.pathname === route.path || location.pathname.startsWith(route.path + "/"),
-    children: route.children
-  })), [routes, location.pathname, labelTranslations]);
+  const labelTranslations = React.useMemo(
+    () => ({
+      home: "Início",
+      dashboard: "Painel",
+      components: "Componentes"
+    }),
+    []
+  );
+  const navigationItems = React.useMemo(
+    () => (routes || []).map((route) => ({
+      ...route,
+      label: labelTranslations[route.label.toLowerCase()] || route.label,
+      active: location.pathname === route.path || location.pathname.startsWith(route.path + "/"),
+      children: route.children
+    })),
+    [routes, location.pathname, labelTranslations]
+  );
   React.useEffect(() => {
     if (typeof window === "undefined") return;
     const checkOverflow = () => {
@@ -312,7 +348,7 @@ function SidebarNav({
             "h-8 w-8 text-sidebar-foreground/80 hover:bg-sidebar-foreground/20 hover:text-sidebar-foreground rounded-full transition-all",
             !isHeader && "opacity-0 group-hover/item:opacity-100"
           ),
-          "aria-label": "Mais opções",
+          "aria-label": t("sidebar.moreOptions"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "h-4 w-4" })
         }
       ) }),
@@ -365,29 +401,37 @@ function SidebarNav({
               {
                 onClick: (e) => e.stopPropagation(),
                 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": `Submenu de ${item.label}`,
+                "aria-label": t("sidebar.submenu", { label: item.label }),
                 children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" })
               }
             ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { side: "right", align: "start", className: "w-48 bg-popover border-border p-1", children: item.children.map((child) => {
-              const ChildIcon = child.icon;
-              const isChildActive = location.pathname === child.path || location.pathname.startsWith(child.path + "/");
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                dropdownMenu.DropdownMenuItem,
-                {
-                  onClick: () => handleNavigate(child.path),
-                  className: button.cn(
-                    "flex items-center gap-2 cursor-pointer",
-                    isChildActive && "bg-accent text-accent-foreground"
-                  ),
-                  children: [
-                    ChildIcon && /* @__PURE__ */ jsxRuntime.jsx(ChildIcon, { className: "h-4 w-4 flex-shrink-0" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: child.label })
-                  ]
-                },
-                child.path
-              );
-            }) })
+            /* @__PURE__ */ jsxRuntime.jsx(
+              dropdownMenu.DropdownMenuContent,
+              {
+                side: "right",
+                align: "start",
+                className: "w-48 bg-popover border-border p-1",
+                children: item.children.map((child) => {
+                  const ChildIcon = child.icon;
+                  const isChildActive = location.pathname === child.path || location.pathname.startsWith(child.path + "/");
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    dropdownMenu.DropdownMenuItem,
+                    {
+                      onClick: () => handleNavigate(child.path),
+                      className: button.cn(
+                        "flex items-center gap-2 cursor-pointer",
+                        isChildActive && "bg-accent text-accent-foreground"
+                      ),
+                      children: [
+                        ChildIcon && /* @__PURE__ */ jsxRuntime.jsx(ChildIcon, { className: "h-4 w-4 flex-shrink-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: child.label })
+                      ]
+                    },
+                    child.path
+                  );
+                })
+              }
+            )
           ] })
         ]
       },
@@ -466,48 +510,55 @@ function SidebarNav({
   if (variant === "assistant") {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(input.ScrollArea, { className: "h-full px-4", children: navigationGroups.map((group) => renderAssistantGroup(group)) }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("nav", { id: "sidebar-nav", "aria-label": "Navegação principal", className: "h-full px-4 py-4 overflow-hidden", ref: navRef, children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: navigationGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderDefaultGroup(group) }, group.id)) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-    (hasOverflow ? visibleItems : navigationItems).map(
-      (item) => renderDefaultItem(item)
-    ),
-    hasOverflow && /* @__PURE__ */ jsxRuntime.jsxs(input.Popover, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(input.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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": "Mais opções",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
-            expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: "Mais opções" })
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        input.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__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: overflowItems.map((item) => {
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
-                ]
-              },
-              item.path
-            );
-          }) })
-        }
-      )
-    ] })
-  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      id: "sidebar-nav",
+      "aria-label": t("sidebar.mainNavigation"),
+      className: "h-full px-4 py-4 overflow-hidden",
+      ref: navRef,
+      children: navigationGroups && navigationGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: navigationGroups.map((group) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderDefaultGroup(group) }, group.id)) }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+        (hasOverflow ? visibleItems : navigationItems).map((item) => renderDefaultItem(item)),
+        hasOverflow && /* @__PURE__ */ jsxRuntime.jsxs(input.Popover, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(input.PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "w-5 h-5 flex-shrink-0" }),
+                expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: t("sidebar.moreOptions") })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.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__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: overflowItems.map((item) => {
+                const Icon = item.icon;
+                return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4 flex-shrink-0" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+                    ]
+                  },
+                  item.path
+                );
+              }) })
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
 }
 function SidebarSearch({
   fixedArea,
@@ -515,6 +566,7 @@ function SidebarSearch({
 }) {
   var _a, _b;
   const { expanded } = useSidebarContext();
+  const { t } = reactI18next.useTranslation();
   const [isFilterOpen, setIsFilterOpen] = React.useState(false);
   if (!(fixedArea && fixedArea.show || search && search.show)) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 px-4 pb-4 space-y-4 border-b border-sidebar-border/30 mb-2", children: [
@@ -527,8 +579,8 @@ function SidebarSearch({
             input.Input,
             {
               type: "text",
-              placeholder: search.placeholder || "Buscar...",
-              "aria-label": search.placeholder || "Buscar...",
+              placeholder: search.placeholder || t("sidebar.searchPlaceholder"),
+              "aria-label": search.placeholder || t("sidebar.searchPlaceholder"),
               value: search.value,
               onChange: (e) => {
                 var _a2;
@@ -548,7 +600,7 @@ function SidebarSearch({
               "h-9 w-9 text-sidebar-foreground transition-all duration-200",
               isFilterOpen ? "bg-sidebar-foreground/20" : "hover:bg-sidebar-foreground/15"
             ),
-            "aria-label": isFilterOpen ? "Fechar filtros" : "Abrir filtros",
+            "aria-label": isFilterOpen ? t("sidebar.closeFilters") : t("sidebar.openFilters"),
             children: search.filter.icon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" })
           }
         )
@@ -575,22 +627,22 @@ function SidebarSearch({
               return (_a2 = fixedArea.onClick) == null ? void 0 : _a2.call(fixedArea);
             },
             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": "Nova Conversa",
+            "aria-label": t("assistant.newConversation"),
             children: React.isValidElement(fixedArea.icon) ? fixedArea.icon : /* @__PURE__ */ jsxRuntime.jsx(fixedArea.icon, { className: "h-5 w-5" })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: "Nova Conversa" })
+        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: t("assistant.newConversation") })
       ] }),
       (search == null ? void 0 : search.show) && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             className: "h-10 w-10 flex items-center justify-center rounded-[var(--radius-button)] text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground",
-            "aria-label": "Buscar",
+            "aria-label": t("sidebar.search"),
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-5 w-5" })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: "Buscar" })
+        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: t("sidebar.search") })
       ] })
     ] })
   ] });
@@ -605,6 +657,7 @@ function SidebarFooter({
   showLogout = true
 }) {
   const { expanded, navigate, location, onToggle } = useSidebarContext();
+  const { t } = reactI18next.useTranslation();
   const isSettingsActive = location.pathname === "/settings";
   const handleSettingsClick = () => {
     if (onSettingsClick) {
@@ -622,20 +675,20 @@ function SidebarFooter({
         "button",
         {
           className: "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": "Perfil do usuário",
+          "aria-label": t("sidebar.userProfile"),
           children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "w-7 h-7 flex-shrink-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: user == null ? void 0 : user.avatar, alt: (user == null ? void 0 : user.name) || "User" }),
             /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "bg-sidebar-foreground/15 text-sidebar-foreground text-xs", children: (user == null ? void 0 : user.name) ? user.name.charAt(0).toUpperCase() : "U" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: (user == null ? void 0 : user.name) || "Perfil" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: (user == null ? void 0 : user.name) || t("sidebar.profile") }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "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", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "w-7 h-7 flex-shrink-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: user == null ? void 0 : user.avatar, alt: (user == null ? void 0 : user.name) || "User" }),
         /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "bg-sidebar-foreground/15 text-sidebar-foreground text-xs", children: (user == null ? void 0 : user.name) ? user.name.charAt(0).toUpperCase() : "U" })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sidebar-foreground truncate", children: (user == null ? void 0 : user.name) || "Perfil" })
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sidebar-foreground truncate", children: (user == null ? void 0 : user.name) || t("sidebar.profile") })
     ] })),
     showSettings && (!expanded ? /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -646,11 +699,11 @@ function SidebarFooter({
             "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200",
             isSettingsActive ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm" : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
           ),
-          "aria-label": "Configurações",
+          "aria-label": t("nav.settings"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "w-5 h-5 flex-shrink-0" })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Configurações" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("nav.settings") }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -661,7 +714,7 @@ function SidebarFooter({
         ),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings, { className: "w-5 h-5 flex-shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: "Configurações" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: t("nav.settings") })
         ]
       }
     )),
@@ -671,11 +724,11 @@ function SidebarFooter({
         {
           onClick: onLogout,
           className: "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": "Sair",
+          "aria-label": t("sidebar.logout"),
           children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5 flex-shrink-0" })
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Sair" }) })
+      /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("sidebar.logout") }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -683,7 +736,7 @@ function SidebarFooter({
         className: "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",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOut, { className: "w-5 h-5 flex-shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: "Sair" })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sidebar-foreground", children: t("sidebar.logout") })
         ]
       }
     ))
@@ -709,11 +762,7 @@ function Sidebar({
   showFooter,
   width: widthProp
 }) {
-  const {
-    showUser = true,
-    showSettings = true,
-    showLogout = true
-  } = footer || {};
+  const { showUser = true, showSettings = true, showLogout = true } = footer || {};
   const displayFooter = showFooter !== void 0 ? showFooter : variant === "default";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     SidebarRoot,
@@ -726,14 +775,7 @@ function Sidebar({
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { logo, logoCollapsed }),
         variant === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(SidebarSearch, { fixedArea, search }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SidebarNav,
-          {
-            navigationGroups,
-            routes,
-            variant
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsx(SidebarNav, { navigationGroups, routes, variant }),
         displayFooter && (showUser || showSettings || showLogout) && /* @__PURE__ */ jsxRuntime.jsx(
           SidebarFooter,
           {