xertica-ui 2.1.2 → 2.1.4

package/dist/sidebar-CVUGHOS_.cjs

@@ -0,0 +1,756 @@
+"use strict";
+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 framerMotion = require("framer-motion");
+const input = require("./input-CPl84zAx.cjs");
+const tooltip = require("./tooltip-CNtsL5cB.cjs");
+const CustomTooltipContent = require("./CustomTooltipContent-c_K-DWRr.cjs");
+function Header({
+  title,
+  breadcrumbs,
+  showLanguageSelector = true,
+  showThemeToggle = true,
+  className,
+  user,
+  actions,
+  showSettings,
+  onSettingsClick,
+  showLogout,
+  onLogoutClick,
+  renderLink,
+  breadcrumbSlot
+}) {
+  var _a;
+  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" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      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() {
+  const ctx = React.useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error("Sidebar compound components must be used within <Sidebar.Root>");
+  }
+  return ctx;
+}
+function SidebarRoot({
+  expanded: expandedProp,
+  onToggle: onToggleProp,
+  navigate: navigateProp,
+  location: locationProp,
+  width: widthProp,
+  children,
+  className
+}) {
+  const layoutContext = LayoutContext.useOptionalLayout();
+  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 width = widthProp !== void 0 ? widthProp : (layoutContext == null ? void 0 : layoutContext.sidebarWidth) ?? 280;
+  const navigate = navigateProp || ((path) => {
+    if (typeof window !== "undefined") window.location.href = path;
+  });
+  const location = locationProp || (typeof window !== "undefined" ? window.location : { pathname: "/" });
+  React.useEffect(() => {
+    const checkViewport = () => setIsMobileViewport(window.innerWidth < 768);
+    checkViewport();
+    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: `
+          @media (max-width: 767px) {
+            [style*="padding-left"].flex-1,
+            [style*="paddingLeft"].flex-1 {
+              padding-left: 0 !important;
+            }
+          }
+        ` }),
+    /* @__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();
+  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",
+        children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeft, { className: "w-5 h-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center h-10 justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: expanded ? logo || /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.XerticaLogo, { className: "h-5 w-auto", variant: "white" }) : logoCollapsed || /* @__PURE__ */ jsxRuntime.jsx(XerticaXLogo.XerticaXLogo, { className: "h-5 w-auto", variant: "white" }) }) }) })
+  ] });
+}
+function SidebarNav({
+  navigationGroups = [],
+  routes = [],
+  variant = "default"
+}) {
+  const { expanded, navigate, location, onToggle } = useSidebarContext();
+  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 = {
+    home: "Início",
+    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
+  }));
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const checkOverflow = () => {
+      if (!navRef.current) return;
+      if (variant === "assistant") return;
+      const navHeight = navRef.current.clientHeight;
+      const itemHeight = 44;
+      const maxVisibleItems = Math.floor(navHeight / itemHeight);
+      if (navigationItems.length > maxVisibleItems) {
+        setHasOverflow(true);
+        setVisibleItems(navigationItems.slice(0, maxVisibleItems - 1));
+        setOverflowItems(navigationItems.slice(maxVisibleItems - 1));
+      } else {
+        setHasOverflow(false);
+        setVisibleItems(navigationItems);
+        setOverflowItems([]);
+      }
+    };
+    checkOverflow();
+    window.addEventListener("resize", checkOverflow);
+    return () => window.removeEventListener("resize", checkOverflow);
+  }, [navigationItems.length, variant]);
+  const handleNavigate = (path) => {
+    setLocalActiveItem(path);
+    navigate(path);
+    if (typeof window !== "undefined" && window.innerWidth < 768) {
+      onToggle();
+    }
+  };
+  const toNavItem = (route) => ({
+    path: route.path,
+    label: labelTranslations[route.label.toLowerCase()] || route.label,
+    icon: route.icon,
+    active: location.pathname === route.path || location.pathname.startsWith(route.path + "/"),
+    children: route.children,
+    actions: route.actions
+  });
+  const renderActionItems = (actions) => {
+    return actions.map((action, idx) => {
+      const Icon = action.icon;
+      if (action.children && action.children.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuSubTrigger, { children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "mr-2 h-4 w-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: action.label })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuSubContent, { className: "w-48 bg-popover border-border", children: renderActionItems(action.children) }) })
+        ] }, idx);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        dropdownMenu.DropdownMenuItem,
+        {
+          className: button.cn(
+            "flex items-center gap-2",
+            action.variant === "destructive" ? "text-destructive focus:text-destructive" : ""
+          ),
+          onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = action.onClick) == null ? void 0 : _a.call(action, null);
+          },
+          children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "h-4 w-4 flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: action.label })
+          ]
+        },
+        idx
+      );
+    });
+  };
+  const renderAssistantActionMenu = (actions, isHeader = false) => {
+    if (!actions || actions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: button.cn(
+            "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",
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreVertical, { className: "h-4 w-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuContent, { align: "end", className: "w-48 bg-popover border-border p-1", children: renderActionItems(actions) })
+    ] });
+  };
+  const renderDefaultItem = (item) => {
+    const Icon = item.icon;
+    const hasChildren = item.children && item.children.length > 0;
+    const activeClass = item.active ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm" : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground";
+    if (!expanded) {
+      return /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleNavigate(item.path),
+            className: button.cn(
+              "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200",
+              activeClass
+            ),
+            "aria-label": item.label,
+            children: Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-5 h-5 flex-shrink-0" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", sideOffset: 0, children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.label }) })
+      ] }, item.path);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: button.cn(
+          "group/item flex items-center w-full h-10 rounded-[var(--radius-button)] transition-all duration-200",
+          activeClass
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { className: "w-5 h-5 flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", children: item.label })
+              ]
+            }
+          ),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                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}`,
+                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
+              );
+            }) })
+          ] })
+        ]
+      },
+      item.path
+    );
+  };
+  const renderDefaultGroup = (group) => {
+    const GroupIcon = group.icon;
+    if (!expanded) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.items.map((item) => renderDefaultItem(toNavItem(item))) }, group.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      (group.label || GroupIcon) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 mb-1 flex items-center gap-2", children: [
+        GroupIcon && (React.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsxRuntime.jsx(GroupIcon, { className: "h-3 w-3 text-sidebar-foreground/80" })),
+        group.label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-sidebar-foreground/80", children: group.label })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.items.map((item) => renderDefaultItem(toNavItem(item))) })
+    ] }, group.id);
+  };
+  const renderAssistantGroup = (group) => {
+    const isAnyItemActive = group.items.some(
+      (item) => location.pathname === item.path || location.pathname.startsWith(item.path + "/")
+    );
+    const GroupIcon = group.icon;
+    if (!expanded) {
+      if (!GroupIcon) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-2 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onToggle(),
+            "aria-label": group.label,
+            className: button.cn(
+              "h-10 w-10 flex items-center justify-center rounded-[var(--radius-button)] transition-all duration-200",
+              isAnyItemActive ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm" : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+            ),
+            children: React.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsxRuntime.jsx(GroupIcon, { className: "h-5 w-5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: group.label }) })
+      ] }) }, group.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-2 group", children: [
+      (group.label || group.icon) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 mb-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sidebar-foreground/80 text-xs font-semibold uppercase tracking-wider", children: [
+          GroupIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: React.isValidElement(GroupIcon) ? GroupIcon : /* @__PURE__ */ jsxRuntime.jsx(GroupIcon, { className: "h-4 w-4" }) }),
+          group.label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: group.label })
+        ] }),
+        renderAssistantActionMenu(group.actions, true)
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.items.map((item) => {
+        const isRouteActive = location.pathname === item.path || location.pathname.startsWith(item.path + "/");
+        const isActive = isRouteActive || localActiveItem === item.path;
+        const Icon = item.icon;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `group/item flex items-start justify-between px-3 min-h-[36px] py-2.5 rounded-[var(--radius-button)] cursor-pointer transition-all duration-200 ${isActive ? "bg-sidebar-foreground/15 text-sidebar-foreground" : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground"}`,
+            onClick: () => handleNavigate(item.path),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 overflow-hidden h-5", children: [
+                  Icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 flex-shrink-0 flex items-center justify-center", children: React.isValidElement(Icon) ? Icon : /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "w-4 h-4" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-sm font-medium leading-none", children: item.label })
+                ] }),
+                isActive && item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[11px] text-sidebar-foreground/60 mt-1.5 animate-in fade-in slide-in-from-top-1 duration-200", children: item.description })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 flex items-center ml-1", children: renderAssistantActionMenu(item.actions) })
+            ]
+          },
+          item.path
+        );
+      }) })
+    ] }, group.id);
+  };
+  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", { 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
+            );
+          }) })
+        }
+      )
+    ] })
+  ] }) }) });
+}
+function SidebarSearch({
+  fixedArea,
+  search
+}) {
+  var _a, _b;
+  const { expanded } = useSidebarContext();
+  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: [
+    (fixedArea == null ? void 0 : fixedArea.show) && fixedArea.content && expanded && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-sidebar-foreground/50" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            input.Input,
+            {
+              type: "text",
+              placeholder: search.placeholder || "Buscar...",
+              "aria-label": search.placeholder || "Buscar...",
+              value: search.value,
+              onChange: (e) => {
+                var _a2;
+                return (_a2 = search.onChange) == null ? void 0 : _a2.call(search, 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__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            onClick: () => setIsFilterOpen(!isFilterOpen),
+            className: button.cn(
+              "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",
+            children: search.filter.icon || /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isFilterOpen && ((_b = search.filter) == null ? void 0 : _b.show) && search.filter.content && /* @__PURE__ */ jsxRuntime.jsx(
+        framerMotion.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__ */ jsxRuntime.jsx("div", { className: "pt-2 border-t border-sidebar-border/20", children: search.filter.content })
+        }
+      ) })
+    ] }),
+    !expanded && ((fixedArea == null ? void 0 : fixedArea.show) || (search == null ? void 0 : search.show)) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4 py-2", children: [
+      (fixedArea == null ? void 0 : fixedArea.show) && fixedArea.icon && /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              var _a2;
+              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",
+            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" })
+      ] }),
+      (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",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "h-5 w-5" })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(CustomTooltipContent.CustomTooltipContent, { side: "right", children: "Buscar" })
+      ] })
+    ] })
+  ] });
+}
+function SidebarFooter({
+  user,
+  onLogout = () => {
+  },
+  onSettingsClick,
+  showUser = true,
+  showSettings = true,
+  showLogout = true
+}) {
+  const { expanded, navigate, location, onToggle } = useSidebarContext();
+  const isSettingsActive = location.pathname === "/settings";
+  const handleSettingsClick = () => {
+    if (onSettingsClick) {
+      onSettingsClick();
+    } else {
+      navigate("/settings");
+    }
+    if (typeof window !== "undefined" && window.innerWidth < 768) {
+      onToggle();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 p-4 space-y-2", children: [
+    showUser && (!expanded ? /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "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",
+          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.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" })
+    ] })),
+    showSettings && (!expanded ? /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleSettingsClick,
+          className: button.cn(
+            "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",
+          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.jsxs(
+      "button",
+      {
+        onClick: handleSettingsClick,
+        className: button.cn(
+          "w-full h-10 flex items-center gap-3 px-3 justify-start 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"
+        ),
+        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" })
+        ]
+      }
+    )),
+    showLogout && (!expanded ? /* @__PURE__ */ jsxRuntime.jsxs(tooltip.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          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",
+          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.jsxs(
+      "button",
+      {
+        onClick: onLogout,
+        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" })
+        ]
+      }
+    ))
+  ] });
+}
+function Sidebar({
+  expanded: expandedProp,
+  onToggle: onToggleProp,
+  user,
+  onLogout = () => {
+  },
+  onSettingsClick,
+  location: locationProp,
+  navigate: navigateProp,
+  routes,
+  logo,
+  logoCollapsed,
+  variant = "default",
+  fixedArea,
+  search,
+  navigationGroups = [],
+  footer,
+  showFooter,
+  width: widthProp
+}) {
+  const {
+    showUser = true,
+    showSettings = true,
+    showLogout = true
+  } = footer || {};
+  const displayFooter = showFooter !== void 0 ? showFooter : variant === "default";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SidebarRoot,
+    {
+      expanded: expandedProp,
+      onToggle: onToggleProp,
+      navigate: navigateProp,
+      location: locationProp,
+      width: widthProp,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SidebarHeader, { logo, logoCollapsed }),
+        variant === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(SidebarSearch, { fixedArea, search }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarNav,
+          {
+            navigationGroups,
+            routes,
+            variant
+          }
+        ),
+        displayFooter && (showUser || showSettings || showLogout) && /* @__PURE__ */ jsxRuntime.jsx(
+          SidebarFooter,
+          {
+            user,
+            onLogout,
+            onSettingsClick,
+            showUser,
+            showSettings,
+            showLogout
+          }
+        )
+      ]
+    }
+  );
+}
+Sidebar.Root = SidebarRoot;
+Sidebar.Header = SidebarHeader;
+Sidebar.Search = SidebarSearch;
+Sidebar.Nav = SidebarNav;
+Sidebar.Footer = SidebarFooter;
+exports.Header = Header;
+exports.Sidebar = Sidebar;