xertica-ui 2.4.0 → 2.5.0

package/dist/{sidebar-CA6_ek3f.js → sidebar-B6SlKZYN.js}

@@ -1,17 +1,18 @@
-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-C6uvh0rV.js";
-import { L as LanguageSelector, T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from "./XerticaXLogo-DHz5SugF.js";
-import { B as Breadcrumb, d as BreadcrumbList, b as BreadcrumbItem, c as BreadcrumbLink, e as BreadcrumbPage, f as BreadcrumbSeparator } from "./breadcrumb-DIJ0X3Ot.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-CFuCssWA.js";
-import { A as Avatar, b as AvatarImage, a as AvatarFallback } from "./avatar-Cxyofu1H.js";
-import { a as useOptionalLayout } from "./LayoutContext-CGEe1oPq.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-wPYg0d0P.js";
-import { b as TooltipProvider, T as Tooltip, c as TooltipTrigger } from "./tooltip-D-OrYnKO.js";
-import { C as CustomTooltipContent } from "./CustomTooltipContent-CfOfikhq.js";
+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-DZbo4vOE.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 { b as TooltipProvider, T as Tooltip, c as TooltipTrigger } from './tooltip-RtbSmPYJ.js';
+import { C as CustomTooltipContent } from './CustomTooltipContent-CNbVB2NS.js';
+
 function Header({
   title,
   breadcrumbs,
@@ -27,9 +28,8 @@ function Header({
   renderLink,
   breadcrumbSlot
 }) {
-  var _a;
   const layout = useOptionalLayout();
-  const toggleSidebar = (layout == null ? void 0 : layout.toggleSidebar) ?? (() => {
+  const toggleSidebar = layout?.toggleSidebar ?? (() => {
   });
   return /* @__PURE__ */ jsx(
     "header",
@@ -69,7 +69,7 @@ function Header({
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 shrink-0 ml-4", children: [
           showLanguageSelector && /* @__PURE__ */ jsx(LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
           showThemeToggle && /* @__PURE__ */ jsx(ThemeToggle, { className: "hover:bg-accent" }),
-          actions == null ? void 0 : actions.map((action) => /* @__PURE__ */ jsxs(
+          actions?.map((action) => /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "ghost",
@@ -114,7 +114,7 @@ function Header({
                 /* @__PURE__ */ jsx("p", { className: "text-xs leading-none text-muted-foreground", children: user.email || "user@example.com" })
               ] }) }),
               /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-              (_a = user.menuItems) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: item.onClick, className: item.className, children: [
+              user.menuItems?.map((item) => /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: item.onClick, className: item.className, children: [
                 item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: item.icon }),
                 item.label
               ] }, item.id)),
@@ -153,6 +153,7 @@ function Header({
     }
   );
 }
+
 const SidebarContext = createContext(null);
 function useSidebarContext() {
   const ctx = useContext(SidebarContext);
@@ -173,9 +174,9 @@ function SidebarRoot({
   const layoutContext = useOptionalLayout();
   const [localExpanded, setLocalExpanded] = useState(false);
   const [isMobileViewport, setIsMobileViewport] = 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 width = widthProp !== void 0 ? widthProp : (layoutContext == null ? void 0 : layoutContext.sidebarWidth) ?? 280;
+  const expanded = expandedProp !== void 0 ? expandedProp : layoutContext?.sidebarExpanded ?? localExpanded;
+  const onToggle = onToggleProp || layoutContext?.toggleSidebar || (() => setLocalExpanded((prev) => !prev));
+  const width = widthProp !== void 0 ? widthProp : layoutContext?.sidebarWidth ?? 280;
   const navigate = navigateProp || ((path) => {
     if (typeof window !== "undefined") window.location.href = path;
   });
@@ -322,9 +323,8 @@ function SidebarNav({
             action.variant === "destructive" ? "text-destructive focus:text-destructive" : ""
           ),
           onClick: (e) => {
-            var _a;
             e.stopPropagation();
-            (_a = action.onClick) == null ? void 0 : _a.call(action, null);
+            action.onClick?.(null);
           },
           children: [
             Icon && /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 flex-shrink-0" }),
@@ -563,14 +563,13 @@ function SidebarSearch({
   fixedArea,
   search
 }) {
-  var _a, _b;
   const { expanded } = useSidebarContext();
   const { t } = useTranslation();
   const [isFilterOpen, setIsFilterOpen] = useState(false);
   if (!(fixedArea && fixedArea.show || search && search.show)) return null;
   return /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 px-4 pb-4 space-y-4 border-b border-sidebar-border/30 mb-2", children: [
-    (fixedArea == null ? void 0 : fixedArea.show) && fixedArea.content && expanded && /* @__PURE__ */ jsx("div", { className: "animate-in fade-in slide-in-from-top-1 duration-300", children: fixedArea.content }),
-    (search == null ? void 0 : search.show) && expanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+    fixedArea?.show && fixedArea.content && expanded && /* @__PURE__ */ jsx("div", { className: "animate-in fade-in slide-in-from-top-1 duration-300", children: fixedArea.content }),
+    search?.show && expanded && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
           /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-sidebar-foreground/50" }),
@@ -581,15 +580,12 @@ function SidebarSearch({
               placeholder: search.placeholder || t("sidebar.searchPlaceholder"),
               "aria-label": search.placeholder || t("sidebar.searchPlaceholder"),
               value: search.value,
-              onChange: (e) => {
-                var _a2;
-                return (_a2 = search.onChange) == null ? void 0 : _a2.call(search, e.target.value);
-              },
+              onChange: (e) => search.onChange?.(e.target.value),
               className: "w-full h-9 bg-sidebar-foreground/10 border-sidebar-border text-sidebar-foreground placeholder:text-sidebar-foreground/50 pl-9 focus-visible:ring-1 focus-visible:ring-sidebar-foreground/30 focus-visible:ring-offset-0"
             }
           )
         ] }),
-        ((_a = search.filter) == null ? void 0 : _a.show) && search.filter.content && /* @__PURE__ */ jsx(
+        search.filter?.show && search.filter.content && /* @__PURE__ */ jsx(
           Button,
           {
             variant: "ghost",
@@ -604,7 +600,7 @@ function SidebarSearch({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(AnimatePresence, { children: isFilterOpen && ((_b = search.filter) == null ? void 0 : _b.show) && search.filter.content && /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(AnimatePresence, { children: isFilterOpen && search.filter?.show && search.filter.content && /* @__PURE__ */ jsx(
         motion.div,
         {
           initial: { height: 0, opacity: 0 },
@@ -616,15 +612,12 @@ function SidebarSearch({
         }
       ) })
     ] }),
-    !expanded && ((fixedArea == null ? void 0 : fixedArea.show) || (search == null ? void 0 : search.show)) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-2", children: [
-      (fixedArea == null ? void 0 : fixedArea.show) && fixedArea.icon && /* @__PURE__ */ jsxs(Tooltip, { children: [
+    !expanded && (fixedArea?.show || search?.show) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-2", children: [
+      fixedArea?.show && fixedArea.icon && /* @__PURE__ */ jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => {
-              var _a2;
-              return (_a2 = fixedArea.onClick) == null ? void 0 : _a2.call(fixedArea);
-            },
+            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" })
@@ -632,7 +625,7 @@ function SidebarSearch({
         ) }),
         /* @__PURE__ */ jsx(CustomTooltipContent, { side: "right", children: t("assistant.newConversation") })
       ] }),
-      (search == null ? void 0 : search.show) && /* @__PURE__ */ jsxs(Tooltip, { children: [
+      search?.show && /* @__PURE__ */ jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
           "button",
           {
@@ -676,18 +669,18 @@ function SidebarFooter({
           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": t("sidebar.userProfile"),
           children: /* @__PURE__ */ jsxs(Avatar, { className: "w-7 h-7 flex-shrink-0", children: [
-            /* @__PURE__ */ jsx(AvatarImage, { src: user == null ? void 0 : user.avatar, alt: (user == null ? void 0 : user.name) || "User" }),
-            /* @__PURE__ */ jsx(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__ */ jsx(AvatarImage, { src: user?.avatar, alt: user?.name || "User" }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-sidebar-foreground/15 text-sidebar-foreground text-xs", children: user?.name ? user.name.charAt(0).toUpperCase() : "U" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ jsx(CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsx("p", { children: (user == null ? void 0 : user.name) || t("sidebar.profile") }) })
+      /* @__PURE__ */ jsx(CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsx("p", { children: user?.name || t("sidebar.profile") }) })
     ] }) : /* @__PURE__ */ 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__ */ jsxs(Avatar, { className: "w-7 h-7 flex-shrink-0", children: [
-        /* @__PURE__ */ jsx(AvatarImage, { src: user == null ? void 0 : user.avatar, alt: (user == null ? void 0 : user.name) || "User" }),
-        /* @__PURE__ */ jsx(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__ */ jsx(AvatarImage, { src: user?.avatar, alt: user?.name || "User" }),
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-sidebar-foreground/15 text-sidebar-foreground text-xs", children: user?.name ? user.name.charAt(0).toUpperCase() : "U" })
       ] }),
-      /* @__PURE__ */ jsx("span", { className: "text-sidebar-foreground truncate", children: (user == null ? void 0 : user.name) || t("sidebar.profile") })
+      /* @__PURE__ */ jsx("span", { className: "text-sidebar-foreground truncate", children: user?.name || t("sidebar.profile") })
     ] })),
     showSettings && (!expanded ? /* @__PURE__ */ jsxs(Tooltip, { children: [
       /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
@@ -795,7 +788,5 @@ Sidebar.Header = SidebarHeader;
 Sidebar.Search = SidebarSearch;
 Sidebar.Nav = SidebarNav;
 Sidebar.Footer = SidebarFooter;
-export {
-  Header as H,
-  Sidebar as S
-};
+
+export { Header as H, Sidebar as S };

package/dist/{sidebar-CmvwjnVb.js → sidebar-BViy8Eeu.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default, { createContext, useState, useEffect, useRef, useContext } from "react";
+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-qkz7Icqf.js";
 import { L as LanguageSelector, T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from "./XerticaXLogo-fAJMy3H4.js";
@@ -174,8 +174,10 @@ function SidebarRoot({
           }
         ` }),
     /* @__PURE__ */ jsx(
-      "div",
+      "nav",
       {
+        id: "sidebar-nav",
+        "aria-label": "Navegação principal",
         className: 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",
@@ -199,6 +201,8 @@ function SidebarHeader({
         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-expanded": expanded,
+        "aria-controls": "sidebar-nav",
         children: expanded ? /* @__PURE__ */ jsx(ArrowLeft, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(Menu, { className: "w-5 h-5" })
       }
     ) }),
@@ -221,12 +225,16 @@ function SidebarNav({
     dashboard: "Painel",
     components: "Componentes"
   };
-  const navigationItems = (routes || []).map((route) => ({
-    ...route,
-    label: labelTranslations[route.label.toLowerCase()] || route.label,
-    active: location.pathname === route.path || location.pathname.startsWith(route.path + "/"),
-    children: route.children
-  }));
+  const navigationItems = 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
+    })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [routes, location.pathname]
+  );
   useEffect(() => {
     if (typeof window === "undefined") return;
     const checkOverflow = () => {
@@ -248,7 +256,7 @@ function SidebarNav({
     checkOverflow();
     window.addEventListener("resize", checkOverflow);
     return () => window.removeEventListener("resize", checkOverflow);
-  }, [navigationItems.length, variant]);
+  }, [navigationItems, variant]);
   const handleNavigate = (path) => {
     setLocalActiveItem(path);
     navigate(path);

package/dist/{sidebar-Dz7bd3zP.js → sidebar-BbVIQvlP.js}

@@ -2,7 +2,7 @@ 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-C6uvh0rV.js";
-import { L as LanguageSelector, T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from "./XerticaXLogo-DfUvz-lD.js";
+import { L as LanguageSelector, T as ThemeToggle, X as XerticaLogo, a as XerticaXLogo } from "./XerticaXLogo-Cmsp-Eey.js";
 import { B as Breadcrumb, d as BreadcrumbList, b as BreadcrumbItem, c as BreadcrumbLink, e as BreadcrumbPage, f as BreadcrumbSeparator } from "./breadcrumb-DIJ0X3Ot.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-CFuCssWA.js";
 import { A as Avatar, b as AvatarImage, a as AvatarFallback } from "./avatar-Cxyofu1H.js";

package/dist/{sidebar-CVUGHOS_.cjs → sidebar-BxGXsDAd.cjs}

@@ -175,8 +175,10 @@ function SidebarRoot({
           }
         ` }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      "nav",
       {
+        id: "sidebar-nav",
+        "aria-label": "Navegação principal",
         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",
@@ -200,6 +202,8 @@ function SidebarHeader({
         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-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" })
       }
     ) }),
@@ -222,12 +226,16 @@ function SidebarNav({
     dashboard: "Painel",
     components: "Componentes"
   };
-  const navigationItems = (routes || []).map((route) => ({
-    ...route,
-    label: labelTranslations[route.label.toLowerCase()] || route.label,
-    active: location.pathname === route.path || location.pathname.startsWith(route.path + "/"),
-    children: route.children
-  }));
+  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
+    })),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [routes, location.pathname]
+  );
   React.useEffect(() => {
     if (typeof window === "undefined") return;
     const checkOverflow = () => {
@@ -249,7 +257,7 @@ function SidebarNav({
     checkOverflow();
     window.addEventListener("resize", checkOverflow);
     return () => window.removeEventListener("resize", checkOverflow);
-  }, [navigationItems.length, variant]);
+  }, [navigationItems, variant]);
   const handleNavigate = (path) => {
     setLocalActiveItem(path);
     navigate(path);