@snksergio/design-system 0.40.0 → 0.41.0

package/dist-lib/chunks/{useTheme-BD0nloAv.cjs → useTheme-3iZAognE.cjs}

@@ -1,7 +1,7 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const avatar = require("./avatar-BiaG9OJS.cjs");
+const avatar = require("./avatar-eM5txRFZ.cjs");
 const lucideReact = require("lucide-react");
 const ToggleGroupPrimitive = require("@radix-ui/react-toggle-group");
 function _interopNamespaceDefault(e) {
@@ -1204,7 +1204,7 @@ function Header({
     ] })
   ] });
 }
-const sidebarRoot = avatar.tv({
+const sidebarRoot$1 = avatar.tv({
   base: "relative flex h-screen w-fit bg-bg-sidebar text-fg-default font-sans",
   variants: {
     mobile: {
@@ -2187,7 +2187,7 @@ function MenuSidebar({
       "div",
       {
         className: avatar.cn(
-          sidebarRoot({ mobile: isMobile, mobileOpen: isMobile && openMobile }),
+          sidebarRoot$1({ mobile: isMobile, mobileOpen: isMobile && openMobile }),
           className
         ),
         onMouseEnter: () => {
@@ -2258,6 +2258,752 @@ function MenuSidebar({
     )
   ] });
 }
+const SingleMenuSidebarContext = React.createContext({
+  expanded: true,
+  isHoverExpand: false,
+  toggle: () => {
+  },
+  openCategoryId: null,
+  setOpenCategoryId: () => {
+  }
+});
+function useSingleMenuSidebar() {
+  return React.useContext(SingleMenuSidebarContext);
+}
+function useSingleMenuSidebarState(defaultExpanded, controlledExpanded, onExpandedChange) {
+  const [internal, setInternal] = React.useState(defaultExpanded);
+  const isControlled = controlledExpanded !== void 0;
+  const expanded = isControlled ? controlledExpanded : internal;
+  const [lockedOpen, setLockedOpen] = React.useState(defaultExpanded);
+  const [hoverOpen, setHoverOpen] = React.useState(false);
+  const hoverTimeoutRef = React.useRef(null);
+  const suppressHoverRef = React.useRef(false);
+  const suppressTimerRef = React.useRef(null);
+  const setExpanded = React.useCallback(
+    (v) => {
+      if (!isControlled) setInternal(v);
+      onExpandedChange?.(v);
+    },
+    [isControlled, onExpandedChange]
+  );
+  const toggle = React.useCallback(() => {
+    const next = !lockedOpen;
+    setLockedOpen(next);
+    setHoverOpen(false);
+    if (!next) {
+      suppressHoverRef.current = true;
+      if (suppressTimerRef.current) clearTimeout(suppressTimerRef.current);
+      suppressTimerRef.current = setTimeout(() => {
+        suppressHoverRef.current = false;
+      }, 500);
+    }
+    setExpanded(next);
+  }, [lockedOpen, setExpanded]);
+  const onMouseEnter = React.useCallback(() => {
+    if (lockedOpen) return;
+    if (suppressHoverRef.current) return;
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setHoverOpen(true);
+    setExpanded(true);
+  }, [lockedOpen, setExpanded]);
+  const onMouseLeave = React.useCallback(() => {
+    if (lockedOpen) return;
+    hoverTimeoutRef.current = setTimeout(() => {
+      setHoverOpen(false);
+      setExpanded(false);
+    }, 200);
+  }, [lockedOpen, setExpanded]);
+  React.useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
+      if (suppressTimerRef.current) clearTimeout(suppressTimerRef.current);
+    };
+  }, []);
+  const isHoverExpand = hoverOpen && !lockedOpen;
+  const [openCategoryId, setOpenCategoryId] = React.useState(null);
+  return {
+    expanded,
+    isHoverExpand,
+    toggle,
+    onMouseEnter,
+    onMouseLeave,
+    openCategoryId,
+    setOpenCategoryId
+  };
+}
+const sidebarRoot = avatar.tv({
+  base: [
+    "relative flex h-full flex-col overflow-x-hidden",
+    "border-r border-border-sidebar bg-bg-sidebar",
+    "transition-[width] duration-300 ease-in-out"
+  ],
+  variants: {
+    // Mobile (< md): expandida = 100% da largura; recolhida = SOME (hidden).
+    // Desktop (md+): largura fixa, expandida (280px) ou recolhida (rail 80px).
+    expanded: {
+      true: "w-full md:w-[280px]",
+      false: "hidden md:flex md:w-20"
+    }
+  },
+  defaultVariants: {
+    expanded: true
+  }
+});
+const category = avatar.tv({
+  slots: {
+    root: "flex items-center rounded-radius-lg cursor-pointer transition-all",
+    text: "flex-1 text-left text-body-sm whitespace-nowrap overflow-hidden text-ellipsis",
+    // SVG do consumidor (ícone bare do lucide vem 24px) dimensionado no slot → 18px
+    icon: "grid size-[18px] shrink-0 place-items-center [&>svg]:size-[18px]",
+    chevron: "size-icon-sm shrink-0 transition-transform"
+  },
+  variants: {
+    // selected = folha ativa OU pai que contém o item ativo → card cheio
+    // default  = nada marcado (inclui pai apenas aberto, sem filho ativo)
+    state: {
+      selected: {
+        root: "bg-bg-sidebar-accent shadow-sh-sm",
+        text: "font-bold text-fg-brand",
+        icon: "text-fg-brand",
+        chevron: "text-fg-brand"
+      },
+      default: {
+        root: "hover:bg-bg-sidebar-accent",
+        text: "font-medium text-fg-default",
+        icon: "text-fg-muted",
+        chevron: "text-fg-subtle"
+      }
+    },
+    collapsed: {
+      true: { root: "justify-center px-0 size-form-xl" },
+      false: { root: "w-full gap-gp-lg px-pad-2xl py-pad-xl" }
+    }
+  },
+  defaultVariants: {
+    state: "default",
+    collapsed: false
+  }
+});
+const menuItem = avatar.tv({
+  slots: {
+    root: "flex h-[38px] items-center gap-[18px] pl-[18px] pr-pad-2xl cursor-pointer transition-colors hover:bg-bg-sidebar-accent",
+    border: "h-full w-0 shrink-0",
+    text: "text-body-sm text-left"
+  },
+  variants: {
+    selected: {
+      true: {
+        border: "border-l-[3px] border-border-brand",
+        text: "font-semibold text-fg-default"
+      },
+      false: {
+        border: "border-l border-border-subtle",
+        text: "font-medium text-fg-muted"
+      }
+    }
+  },
+  defaultVariants: {
+    selected: false
+  }
+});
+const styles = {
+  // Header
+  header: {
+    wrapper: "flex h-layout-navbar items-center overflow-hidden px-pad-4xl py-pad-md shrink-0",
+    wrapperCollapsed: "justify-center px-0",
+    inner: "flex items-center gap-gp-md",
+    logo: "shrink-0",
+    title: "text-title-sm font-bold text-fg-default whitespace-nowrap",
+    collapseBtn: "ml-auto shrink-0 cursor-pointer rounded-radius-md p-pad-xs text-fg-subtle hover:bg-bg-sidebar-accent hover:text-fg-muted transition-colors",
+    expandBtn: "absolute right-0 top-16 translate-x-1/2 z-10 cursor-pointer rounded-radius-full bg-bg-surface border border-border-default p-pad-xs shadow-sh-sm text-fg-subtle hover:text-fg-muted transition-colors",
+    expandBtnIcon: "size-icon-sm"
+  },
+  // Module selector
+  module: {
+    trigger: "flex w-full cursor-pointer items-center gap-gp-lg rounded-radius-md bg-bg-sidebar-accent py-pad-md pl-pad-md pr-pad-2xl shadow-sh-sm transition-colors hover:bg-bg-sidebar-accent-hover focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand",
+    iconContainer: "flex size-icon-xl shrink-0 items-center justify-center rounded-radius-md bg-bg-brand text-fg-on-brand",
+    textContainer: "flex flex-col items-start gap-gp-xs overflow-hidden",
+    title: "text-body-md font-bold leading-4 text-fg-default truncate text-left",
+    subtitle: "text-caption-sm font-semibold text-fg-subtle text-left",
+    chevron: "ml-auto shrink-0 size-icon-sm text-fg-subtle",
+    dropdownItem: "flex items-center gap-gp-lg cursor-pointer",
+    // selecionado: realça a linha (bg-brand-subtle) + label/check em fg-brand
+    dropdownItemSelected: "bg-bg-brand-subtle text-fg-brand",
+    // [&>svg]:!text-fg-on-brand: o DropdownMenuItem força [&_svg]:text-fg-muted
+    // (+ fg-default no hover) em TODOS os svgs descendentes — o ! garante que o
+    // ícone do chip siga fg-on-brand igual ao trigger (branco light / preto dark).
+    dropdownItemIcon: "flex size-icon-lg shrink-0 items-center justify-center rounded-radius-sm bg-bg-brand [&>svg]:size-icon-sm [&>svg]:!text-fg-on-brand",
+    dropdownItemLabel: "flex-1 text-body-md font-medium",
+    dropdownItemCheck: "ml-auto shrink-0 size-icon-sm !text-fg-brand"
+  },
+  // Search
+  search: {
+    wrapper: "flex w-full items-center justify-between rounded-radius-lg bg-bg-muted py-pad-sm pl-pad-lg pr-pad-sm transition-all focus-within:bg-bg-surface focus-within:ring-4 focus-within:ring-ring-brand",
+    inner: "flex flex-1 items-center gap-gp-md opacity-60 focus-within:opacity-100",
+    icon: "shrink-0 size-icon-sm text-fg-muted",
+    text: "text-body-sm font-medium text-fg-default placeholder:text-fg-subtle",
+    shortcutBadge: "shrink-0 flex items-center justify-center rounded-radius-md bg-bg-surface px-pad-md py-pad-xs shadow-sh-sm",
+    shortcutText: "text-body-sm font-medium text-fg-muted"
+  },
+  // Footer
+  footer: {
+    wrapper: "px-pad-lg py-pad-xl",
+    button: "flex w-full cursor-pointer items-center gap-gp-lg rounded-radius-lg bg-bg-sidebar-accent px-pad-2xl py-pad-xl transition-colors hover:bg-bg-sidebar-accent-hover focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-brand",
+    avatar: "flex size-form-sm shrink-0 items-center justify-center rounded-radius-full bg-bg-muted overflow-hidden",
+    avatarIcon: "shrink-0 size-icon-sm text-fg-muted",
+    textContainer: "flex flex-col items-start gap-gp-2xs overflow-hidden",
+    name: "text-body-sm font-semibold text-fg-default truncate w-full text-left",
+    email: "text-caption-sm font-medium text-fg-muted truncate w-full text-left",
+    chevron: "ml-auto shrink-0 size-icon-sm text-fg-subtle",
+    dropdownLabel: "flex flex-col gap-gp-2xs px-pad-sm py-pad-xs normal-case tracking-normal",
+    dropdownLabelName: "text-body-md font-semibold",
+    dropdownLabelEmail: "text-caption-md font-normal text-fg-muted",
+    dropdownItem: "flex items-center gap-gp-md cursor-pointer",
+    dropdownItemIcon: "size-icon-sm shrink-0"
+  },
+  // Layout
+  // Fade do conteúdo textual durante a transição de largura (evita wrap visível)
+  textFadeIn: "animate-in fade-in-0 duration-200",
+  divider: "mx-pad-3xl h-px bg-border-sidebar",
+  sectionPadding: "flex flex-col gap-gp-2xl px-pad-3xl py-pad-4xl shrink-0 overflow-hidden",
+  navContainer: "scrollbar-thin flex flex-1 flex-col overflow-y-auto overflow-x-hidden py-pad-4xl",
+  navContainerExpanded: "px-pad-3xl",
+  navContainerCollapsed: "items-center",
+  navList: "flex flex-col",
+  subItemList: "flex flex-col py-pad-lg"
+};
+function SingleMenuHeader({
+  logo,
+  title,
+  showToggleIndicator = false
+}) {
+  const { expanded, isHoverExpand, toggle } = useSingleMenuSidebar();
+  const isFlipped = isHoverExpand || !expanded;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: avatar.cn(
+        styles.header.wrapper,
+        !expanded && styles.header.wrapperCollapsed
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header.inner, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.header.logo, children: logo }),
+          expanded && /* @__PURE__ */ jsxRuntime.jsx("span", { className: avatar.cn(styles.header.title, styles.textFadeIn), children: title })
+        ] }),
+        expanded ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            className: styles.header.collapseBtn,
+            "aria-label": isFlipped ? "Expandir sidebar" : "Recolher sidebar",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.PanelLeftClose,
+              {
+                className: avatar.cn(
+                  "size-icon-sm transition-transform duration-300",
+                  isFlipped && "rotate-180"
+                )
+              }
+            )
+          }
+        ) : showToggleIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: toggle,
+            className: styles.header.expandBtn,
+            "aria-label": "Expandir sidebar",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.PanelLeftClose,
+              {
+                className: avatar.cn(
+                  styles.header.expandBtnIcon,
+                  "transition-transform duration-300 rotate-180"
+                )
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+SingleMenuHeader.displayName = "SingleMenuHeader";
+function SingleMenuModuleSelector({
+  icon,
+  title,
+  subtitle,
+  options,
+  onModuleChange
+}) {
+  const s = styles.module;
+  const triggerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.iconContainer, children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.textContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.title, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.subtitle, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: s.chevron })
+  ] });
+  if (!options || options.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.trigger, children: triggerContent });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuTrigger, { className: s.trigger, children: triggerContent }),
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuContent, { side: "bottom", sideOffset: 4, align: "start", children: options.map((option) => {
+      const isSelected = option.label === title;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        avatar.DropdownMenuItem,
+        {
+          className: avatar.cn(
+            s.dropdownItem,
+            isSelected && s.dropdownItemSelected
+          ),
+          onClick: () => onModuleChange?.(option.id),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.dropdownItemIcon, children: option.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.dropdownItemLabel, children: option.label }),
+            isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: s.dropdownItemCheck })
+          ]
+        },
+        option.id
+      );
+    }) })
+  ] });
+}
+SingleMenuModuleSelector.displayName = "SingleMenuModuleSelector";
+function SingleMenuSearch({
+  placeholder = "Buscar",
+  onOpen
+}) {
+  const s = styles.search;
+  return /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", onClick: onOpen, className: s.wrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.inner, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: s.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.text, children: placeholder })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.shortcutBadge, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.shortcutText, children: "⌘K" }) })
+  ] });
+}
+SingleMenuSearch.displayName = "SingleMenuSearch";
+function SingleMenuCommand({
+  open,
+  onOpenChange,
+  categories,
+  placeholder = "Buscar no menu…",
+  onSelect,
+  custom
+}) {
+  const leaves = categories.filter((c) => !c.items?.length);
+  const groups = categories.filter((c) => c.items?.length);
+  const handle = (id, parentId) => {
+    onSelect(id, parentId);
+    onOpenChange(false);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(avatar.CommandDialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandInput, { placeholder }),
+    /* @__PURE__ */ jsxRuntime.jsxs(avatar.CommandList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandEmpty, { children: "Nenhum resultado." }),
+      custom ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        leaves.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandGroup, { heading: "Menu", children: leaves.map((c) => /* @__PURE__ */ jsxRuntime.jsxs(
+          avatar.CommandItem,
+          {
+            value: c.label,
+            onSelect: () => handle(c.id),
+            children: [
+              c.icon,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: c.label })
+            ]
+          },
+          c.id
+        )) }),
+        groups.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(avatar.CommandGroup, { heading: cat.label, children: cat.items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          avatar.CommandItem,
+          {
+            value: `${cat.label} ${item.label}`,
+            onSelect: () => handle(item.id, cat.id),
+            children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+          },
+          item.id
+        )) }, cat.id))
+      ] })
+    ] })
+  ] });
+}
+SingleMenuCommand.displayName = "SingleMenuCommand";
+function SingleMenuItem({
+  label,
+  selected = false,
+  href,
+  target,
+  onClick,
+  renderLink,
+  interceptNavigation
+}) {
+  const s = menuItem({ selected });
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.border() }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.text(), children: label })
+  ] });
+  const handleClick = (e) => {
+    if (!renderLink) {
+      const prevent = shouldPreventNavigation({
+        href,
+        hasHandler: interceptNavigation ?? !!onClick,
+        target,
+        event: e
+      });
+      if (prevent) e.preventDefault();
+    }
+    onClick?.(e);
+  };
+  if (href) {
+    const linkProps = {
+      href,
+      target,
+      className: s.root(),
+      onClick: handleClick,
+      "aria-current": selected ? "page" : void 0,
+      children: content
+    };
+    if (renderLink) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink(linkProps) });
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleClick, className: s.root(), children: content });
+}
+SingleMenuItem.displayName = "SingleMenuItem";
+function SingleMenuCategory({
+  id,
+  icon,
+  label,
+  active = false,
+  items,
+  activeItemId,
+  onItemClick,
+  onCategoryClick,
+  href,
+  renderLink
+}) {
+  const { expanded, openCategoryId, setOpenCategoryId } = useSingleMenuSidebar();
+  const hasItems = !!items && items.length > 0;
+  const isOpen = hasItems ? openCategoryId === id : false;
+  const isLeafActive = !hasItems && (activeItemId !== void 0 ? activeItemId === id : !!active);
+  const containsActive = hasItems && items.some((item) => item.id === activeItemId);
+  const selected = !expanded ? hasItems ? isOpen || containsActive : isLeafActive : hasItems ? isOpen : isLeafActive && openCategoryId == null;
+  const state = selected ? "selected" : "default";
+  const s = category({ state, collapsed: !expanded });
+  const handleToggle = () => {
+    if (hasItems) {
+      setOpenCategoryId(isOpen ? null : id);
+      onCategoryClick?.();
+    } else {
+      onItemClick?.(id);
+      setOpenCategoryId(null);
+      onCategoryClick?.();
+    }
+  };
+  if (!expanded) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(avatar.Tooltip, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        avatar.TooltipTrigger,
+        {
+          role: "button",
+          tabIndex: 0,
+          onClick: handleToggle,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleToggle();
+            }
+          },
+          className: s.root(),
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.icon(), children: icon })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(avatar.TooltipContent, { side: "right", sideOffset: 8, children: label })
+    ] });
+  }
+  if (!hasItems) {
+    const conteudo = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.icon(), children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: avatar.cn(s.text(), styles.textFadeIn), children: label })
+    ] });
+    if (href) {
+      const linkProps = {
+        href,
+        className: s.root(),
+        onClick: (e) => {
+          if (!renderLink) {
+            const prevent = shouldPreventNavigation({ href, hasHandler: true, event: e });
+            if (prevent) e.preventDefault();
+          }
+          handleToggle();
+        },
+        "aria-current": selected ? "page" : void 0,
+        children: conteudo
+      };
+      if (renderLink) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink(linkProps) });
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: handleToggle, className: s.root(), children: conteudo });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    avatar.Collapsible,
+    {
+      open: isOpen,
+      onOpenChange: (open) => {
+        setOpenCategoryId(open ? id : null);
+        onCategoryClick?.();
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(avatar.CollapsibleTrigger, { className: s.root(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.icon(), children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: avatar.cn(s.text(), styles.textFadeIn), children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: avatar.cn(s.chevron(), isOpen && "rotate-180") })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(avatar.CollapsibleContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.subItemList, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          SingleMenuItem,
+          {
+            label: item.label,
+            selected: item.id === activeItemId,
+            href: item.href,
+            renderLink,
+            interceptNavigation: !!onItemClick,
+            onClick: () => onItemClick?.(item.id)
+          },
+          item.id
+        )) }) })
+      ]
+    }
+  );
+}
+SingleMenuCategory.displayName = "SingleMenuCategory";
+function SingleMenuFooter({
+  name,
+  email,
+  avatar: avatar$1,
+  actions,
+  onAction
+}) {
+  const { expanded } = useSingleMenuSidebar();
+  const s = styles.footer;
+  const triggerContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.avatar, children: avatar$1 ?? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.User, { className: s.avatarIcon }) }),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: s.textContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.name, children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.email, children: email })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: s.chevron })
+    ] })
+  ] });
+  if (!actions || actions.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.wrapper, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: avatar.cn(s.button, !expanded && "justify-center px-0"), children: triggerContent }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: s.wrapper, children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      avatar.DropdownMenuTrigger,
+      {
+        className: avatar.cn(s.button, !expanded && "justify-center px-0"),
+        children: triggerContent
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      avatar.DropdownMenuContent,
+      {
+        side: expanded ? "top" : "right",
+        sideOffset: 8,
+        align: expanded ? "end" : "start",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuGroup, { children: /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenuLabel, { className: s.dropdownLabel, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.dropdownLabelName, children: name }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.dropdownLabelEmail, children: email })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuSeparator, {}),
+          actions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
+            avatar.DropdownMenuItem,
+            {
+              variant: action.variant === "destructive" ? "destructive" : "default",
+              onClick: () => onAction?.(action.id),
+              className: s.dropdownItem,
+              children: [
+                action.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: s.dropdownItemIcon, children: action.icon }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: action.label })
+              ]
+            },
+            action.id
+          ))
+        ]
+      }
+    )
+  ] }) });
+}
+SingleMenuFooter.displayName = "SingleMenuFooter";
+function SingleMenuSidebar({
+  logo,
+  title,
+  module: module2,
+  modules,
+  activeModuleId,
+  defaultModuleId,
+  onModuleChange,
+  showSearch = true,
+  searchPlaceholder,
+  searchCommand,
+  categories,
+  activeItemId,
+  onItemClick,
+  renderLink,
+  user,
+  defaultExpanded = true,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  showToggleIndicator = false,
+  className,
+  ...props
+}) {
+  const {
+    expanded,
+    isHoverExpand,
+    toggle,
+    onMouseEnter,
+    onMouseLeave,
+    openCategoryId,
+    setOpenCategoryId
+  } = useSingleMenuSidebarState(
+    defaultExpanded,
+    controlledExpanded,
+    onExpandedChange
+  );
+  const hasModules = !!modules && modules.length > 0;
+  const [internalModuleId, setInternalModuleId] = React.useState(
+    defaultModuleId ?? modules?.[0]?.id
+  );
+  const currentModuleId = activeModuleId ?? internalModuleId;
+  const activeModule = hasModules ? modules.find((m) => m.id === currentModuleId) ?? modules[0] : void 0;
+  const handleModuleChange = (id) => {
+    if (activeModuleId === void 0) setInternalModuleId(id);
+    onModuleChange?.(id);
+  };
+  const moduleDisplay = hasModules ? {
+    icon: activeModule.icon,
+    title: activeModule.title,
+    subtitle: activeModule.subtitle ?? "",
+    options: modules.map((m) => ({
+      id: m.id,
+      label: m.title,
+      icon: m.icon
+    })),
+    onModuleChange: handleModuleChange
+  } : module2;
+  const effectiveCategories = hasModules ? activeModule.categories : categories ?? [];
+  const [commandOpen, setCommandOpen] = React.useState(false);
+  React.useEffect(() => {
+    if (!showSearch) return;
+    const onKey = (e) => {
+      if (e.key.toLowerCase() === "k" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        setCommandOpen((o) => !o);
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [showSearch]);
+  const selectFromSearch = (id, parentId) => {
+    onItemClick?.(id);
+    setOpenCategoryId(parentId ?? null);
+  };
+  const resolvedOpenCategoryId = openCategoryId ?? effectiveCategories.find(
+    (cat) => cat.items?.some((item) => item.id === activeItemId)
+  )?.id ?? null;
+  const contextValue = React.useMemo(
+    () => ({
+      expanded,
+      isHoverExpand,
+      toggle,
+      openCategoryId: resolvedOpenCategoryId,
+      setOpenCategoryId
+    }),
+    [
+      expanded,
+      isHoverExpand,
+      toggle,
+      resolvedOpenCategoryId,
+      setOpenCategoryId
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(SingleMenuSidebarContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "aside",
+      {
+        "aria-label": "Navegação lateral",
+        className: avatar.cn(sidebarRoot({ expanded }), className),
+        onMouseEnter,
+        onMouseLeave,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SingleMenuHeader,
+            {
+              logo,
+              title,
+              showToggleIndicator
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.divider }),
+          expanded && (moduleDisplay || showSearch) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: avatar.cn(styles.sectionPadding, styles.textFadeIn), children: [
+            moduleDisplay && /* @__PURE__ */ jsxRuntime.jsx(SingleMenuModuleSelector, { ...moduleDisplay }),
+            showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+              SingleMenuSearch,
+              {
+                placeholder: searchPlaceholder,
+                onOpen: () => setCommandOpen(true)
+              }
+            )
+          ] }),
+          expanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.divider }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "nav",
+            {
+              className: avatar.cn(
+                styles.navContainer,
+                expanded ? styles.navContainerExpanded : styles.navContainerCollapsed
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.navList, children: effectiveCategories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
+                SingleMenuCategory,
+                {
+                  ...cat,
+                  activeItemId,
+                  onItemClick,
+                  renderLink
+                },
+                cat.id
+              )) })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(SingleMenuFooter, { ...user })
+        ]
+      }
+    ) }),
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(
+      SingleMenuCommand,
+      {
+        open: commandOpen,
+        onOpenChange: setCommandOpen,
+        categories: effectiveCategories,
+        placeholder: searchPlaceholder,
+        onSelect: selectFromSearch,
+        custom: searchCommand
+      }
+    )
+  ] });
+}
+SingleMenuSidebar.displayName = "SingleMenuSidebar";
 function deriveInitials(name) {
   return name.split(" ").filter(Boolean).map((p) => p[0]).join("").slice(0, 2).toUpperCase();
 }
@@ -2392,10 +3138,17 @@ function UserMenu({
 }
 const root = avatar.tv({
   base: [
-    "flex h-screen w-full bg-bg-canvas",
+    "flex w-full bg-bg-canvas",
     "overflow-hidden"
-    // garante que sidebar + main não vazem viewport
-  ]
+    // garante que sidebar + main não vazem o container
+  ],
+  variants: {
+    fillHeight: {
+      false: "h-screen",
+      true: "h-full"
+    }
+  },
+  defaultVariants: { fillHeight: false }
 });
 const main = avatar.tv({
   base: [
@@ -2437,47 +3190,60 @@ const bodyInner = avatar.tv({
     mobileEdgeToEdge: false
   }
 });
-function AppShell({
-  // Sidebar
-  contexts,
-  defaultActiveContextId,
-  activeContextId,
-  onContextChange,
-  defaultActiveItemHref,
-  activeItemHref,
-  onItemClick,
-  renderLink,
-  brandHref,
-  onBrandClick,
-  // Header
-  breadcrumb,
-  commandGroups,
-  commandPlaceholder,
-  commandEmptyMessage,
-  searchPlaceholder,
-  notifications,
-  messages,
-  theme,
-  onThemeChange,
-  themeOptions,
-  headerRightSlot,
-  // User menu
-  user,
-  layout,
-  onLayoutChange,
-  layoutOptions,
-  onSettings,
-  onLogout,
-  // Menu collapse (controlled/uncontrolled)
-  menuCollapsed: controlledCollapsed,
-  defaultMenuCollapsed,
-  onMenuCollapseChange,
-  // Body
-  children,
-  bodyClassName,
-  mobileEdgeToEdge,
-  className
-}) {
+function AppShell(props) {
+  const {
+    // Sidebar
+    contexts,
+    defaultActiveContextId,
+    activeContextId,
+    onContextChange,
+    defaultActiveItemHref,
+    activeItemHref,
+    onItemClick,
+    renderLink,
+    brandHref,
+    onBrandClick,
+    // Header
+    breadcrumb,
+    commandGroups,
+    commandPlaceholder,
+    commandEmptyMessage,
+    searchPlaceholder,
+    notifications,
+    messages,
+    theme,
+    onThemeChange,
+    themeOptions,
+    headerRightSlot,
+    // User menu
+    user,
+    layout,
+    onLayoutChange,
+    layoutOptions,
+    onSettings,
+    onLogout,
+    // Menu collapse (controlled/uncontrolled)
+    menuCollapsed: controlledCollapsed,
+    defaultMenuCollapsed,
+    onMenuCollapseChange,
+    // Body
+    children,
+    bodyClassName,
+    mobileEdgeToEdge,
+    fillHeight,
+    // Escolha da sidebar. SEM default aqui: um default literal estreitaria o tipo pra
+    // "menu" e o TS marcaria a comparação com "single" como morta (TS2367).
+    sidebar,
+    categories,
+    sidebarLogo,
+    sidebarTitle,
+    activeItemId,
+    onSidebarItemClick,
+    sidebarModules,
+    sidebarShowSearch,
+    sidebarSearchPlaceholder,
+    className
+  } = props;
   const [internalCollapsed, setInternalCollapsed] = React.useState(() => {
     if (defaultMenuCollapsed !== void 0) return defaultMenuCollapsed;
     if (typeof window === "undefined") return false;
@@ -2509,37 +3275,73 @@ function AppShell({
       onLogout
     }
   ) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: avatar.cn(root(), className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      MenuSidebar,
-      {
-        contexts,
-        activeContextId,
-        defaultActiveContextId,
-        onContextChange,
-        activeItemHref,
-        defaultActiveItemHref,
-        onItemClick,
-        renderLink,
-        brandHref,
-        onBrandClick,
-        user: userNode,
-        panelCollapsed: menuCollapsed,
-        onPanelCollapseChange: (next) => {
-          if (controlledCollapsed === void 0) setInternalCollapsed(next);
-          onMenuCollapseChange?.(next);
-        },
-        mobileOpen: mobileMenuOpen,
-        onMobileOpenChange: setMobileMenuOpen
+  const sidebarNode = sidebar === "single" ? /* @__PURE__ */ jsxRuntime.jsx(
+    SingleMenuSidebar,
+    {
+      logo: sidebarLogo,
+      title: sidebarTitle ?? "",
+      categories,
+      modules: sidebarModules,
+      activeItemId,
+      onItemClick: onSidebarItemClick,
+      renderLink,
+      showSearch: sidebarShowSearch ?? false,
+      searchPlaceholder: sidebarSearchPlaceholder,
+      expanded: isMobile ? mobileMenuOpen : !menuCollapsed,
+      onExpandedChange: (next) => {
+        if (isMobile) {
+          setMobileMenuOpen(next);
+          return;
+        }
+        const nextCollapsed = !next;
+        if (controlledCollapsed === void 0) setInternalCollapsed(nextCollapsed);
+        onMenuCollapseChange?.(nextCollapsed);
+      },
+      user: {
+        name: user?.name ?? "",
+        email: user?.email ?? "",
+        actions: [
+          ...onSettings ? [{ id: "settings", label: "Configurações" }] : [],
+          ...onLogout ? [{ id: "logout", label: "Sair", variant: "destructive" }] : []
+        ],
+        onAction: (id) => {
+          if (id === "settings") onSettings?.();
+          if (id === "logout") onLogout?.();
+        }
       }
-    ),
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    MenuSidebar,
+    {
+      contexts,
+      activeContextId,
+      defaultActiveContextId,
+      onContextChange,
+      activeItemHref,
+      defaultActiveItemHref,
+      onItemClick,
+      renderLink,
+      brandHref,
+      onBrandClick,
+      user: userNode,
+      panelCollapsed: menuCollapsed,
+      onPanelCollapseChange: (next) => {
+        if (controlledCollapsed === void 0) setInternalCollapsed(next);
+        onMenuCollapseChange?.(next);
+      },
+      mobileOpen: mobileMenuOpen,
+      onMobileOpenChange: setMobileMenuOpen
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: avatar.cn(root({ fillHeight: fillHeight ?? false }), className), children: [
+    sidebarNode,
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: main(), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         Header,
         {
           breadcrumb,
-          onCollapseMenu: handleToggleMenu,
-          menuCollapsed,
+          onCollapseMenu: sidebar === "single" && !isMobile ? void 0 : handleToggleMenu,
+          menuCollapsed: isMobile ? !mobileMenuOpen : menuCollapsed,
           commandGroups,
           commandPlaceholder,
           commandEmptyMessage,
@@ -2645,6 +3447,7 @@ exports.SidebarPill = SidebarPill;
 exports.SidebarRail = SidebarRail;
 exports.SidebarSection = SidebarSection;
 exports.SidebarSubgroup = SidebarSubgroup;
+exports.SingleMenuSidebar = SingleMenuSidebar;
 exports.UserMenu = UserMenu;
 exports.chipCount = chipCount;
 exports.chipVariants = chipVariants;
@@ -2655,4 +3458,4 @@ exports.shouldPreventNavigation = shouldPreventNavigation;
 exports.useControllable = useControllable;
 exports.useMediaQuery = useMediaQuery;
 exports.useTheme = useTheme;
-//# sourceMappingURL=useTheme-BD0nloAv.cjs.map
+//# sourceMappingURL=useTheme-3iZAognE.cjs.map