@snksergio/design-system 0.5.0 → 0.17.0

package/dist-lib/chunks/{app-shell-C_enrPD8.mjs → app-shell-Cy9be0Zx.mjs}

@@ -1,10 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { Fragment as Fragment$1, useState, useEffect, useRef, forwardRef, useCallback } from "react";
+import { Fragment as Fragment$1, useState, useEffect, forwardRef, useCallback, useRef } from "react";
 import { t as tv, c as cn, B as Button, a as ChipGroup, b as ChipGroupItem } from "./chip-group-_e-yh1Zq.mjs";
 import { ChevronRight, X, Search, Bell, CheckCheck, MoreHorizontal, MessageSquare, PenLine, Maximize2, Check, Sun, Moon, PanelLeftOpen, PanelLeftClose, Menu, Plus, ChevronDown, LayoutGrid, SunMoon, Settings, LogOut } from "lucide-react";
 import { Command as Command$1 } from "cmdk";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cva } from "class-variance-authority";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
@@ -96,10 +97,10 @@ const searchFakeInputKbd = tv({
     "text-caption-xs font-semibold text-fg-muted tabular-nums shrink-0"
   ]
 });
-const hdWrap = tv({
+tv({
   base: "relative inline-flex"
 });
-const hdDropdown = tv({
+tv({
   base: [
     "absolute top-[calc(100%+8px)] right-0 z-50",
     "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] flex flex-col",
@@ -626,6 +627,71 @@ function CommandGroupBlock({
     !isLast && /* @__PURE__ */ jsx(CommandSeparator, {})
   ] });
 }
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const POPOVER_MOBILE_SHEET = [
+  "max-md:w-full max-md:min-w-0 max-md:max-w-none",
+  "max-md:!max-h-[92vh]",
+  "max-md:rounded-b-none max-md:rounded-t-[12px]",
+  "max-md:border-x-0 max-md:border-b-0",
+  "max-md:outline-none max-md:shadow-none",
+  // Respiro de 20px (pad-3xl) no rodapé pra o conteúdo (footer/última seção)
+  // não colar na borda inferior do device quando vira sheet.
+  "max-md:pb-pad-3xl",
+  "max-md:data-[state=open]:zoom-in-100 max-md:data-[state=closed]:zoom-out-100",
+  "max-md:data-[state=open]:slide-in-from-bottom-12 max-md:data-[state=closed]:slide-out-to-bottom-12"
+].join(" ");
+const PopoverSheetBackdrop = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    "aria-hidden": "true",
+    className: "fixed inset-0 z-[55] bg-overlay-scrim pointer-events-auto md:hidden animate-in fade-in-0 duration-150"
+  }
+);
+const PopoverContent = React.forwardRef(
+  ({ className, align = "center", sideOffset = 6, disablePortal, mobileSheet = true, ...props }, ref) => {
+    const content = /* @__PURE__ */ jsx(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        "data-mobile-sheet": mobileSheet ? "" : void 0,
+        className: cn(
+          "relative z-50",
+          // Unificado com DropdownMenu/Select: bg-bg-dropdown (frosted no dark)
+          // + border-border-default + outline-float. O `before` pseudo-element
+          // aplica o blur backdrop (necessário pra bg-bg-dropdown semi-transparente
+          // render correto no dark mode).
+          "bg-bg-dropdown",
+          "border border-border-default rounded-[12px] shadow-sh-lg outline-float",
+          "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:backdrop-blur-2xl before:backdrop-saturate-150",
+          "text-fg-default",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+          "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          mobileSheet && POPOVER_MOBILE_SHEET,
+          className
+        ),
+        ...props
+      }
+    );
+    if (disablePortal) {
+      return mobileSheet ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(PopoverSheetBackdrop, {}),
+        content
+      ] }) : content;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      mobileSheet && /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverSheetBackdrop, {}) }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: content })
+    ] });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 const DEFAULT_FILTERS$1 = [
   { id: "all", label: "Todas", predicate: () => true },
   { id: "unread", label: "Não lidas", predicate: (n) => !!n.unread },
@@ -643,28 +709,12 @@ function HeaderNotifications({ config, className }) {
   } = config;
   const [open, setOpen] = useState(false);
   const [activeFilter, setActiveFilter] = useState(filters[0]?.id ?? "all");
-  const wrapRef = useRef(null);
   const unreadCount = items.filter((n) => n.unread).length;
-  useEffect(() => {
-    if (!open) return;
-    const onClick = (e) => {
-      if (!wrapRef.current?.contains(e.target)) setOpen(false);
-    };
-    const onEsc = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", onClick);
-    document.addEventListener("keydown", onEsc);
-    return () => {
-      document.removeEventListener("mousedown", onClick);
-      document.removeEventListener("keydown", onEsc);
-    };
-  }, [open]);
   const filtered = items.filter(
     filters.find((f) => f.id === activeFilter)?.predicate ?? (() => true)
   );
-  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: cn(hdWrap(), className), children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
         color: "secondary",
@@ -673,84 +723,93 @@ function HeaderNotifications({ config, className }) {
         className: "rounded-radius-md relative",
         "aria-label": "Notificações",
         title: "Notificações",
-        "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
         children: [
           /* @__PURE__ */ jsx(Bell, {}),
           unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: headerIconBtnBadge({ kind: "danger" }), "aria-hidden": "true" })
         ]
       }
-    ),
-    open && /* @__PURE__ */ jsxs("div", { className: hdDropdown(), role: "dialog", "aria-label": "Notificações", children: [
-      /* @__PURE__ */ jsxs("div", { className: hdTop(), children: [
-        /* @__PURE__ */ jsxs("div", { className: hdHeader(), children: [
-          /* @__PURE__ */ jsxs("div", { className: hdTitle(), children: [
-            /* @__PURE__ */ jsx("span", { children: "Notificações" }),
-            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: hdTitleCount(), children: unreadCount })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: hdHeaderActions(), children: [
-            onMarkAllRead && /* @__PURE__ */ jsx(
-              Button,
-              {
-                color: "secondary",
-                variant: "ghost",
-                size: "icon-2xs",
-                className: "rounded-radius-sm",
-                title: "Marcar todas como lidas",
-                onClick: onMarkAllRead,
-                children: /* @__PURE__ */ jsx(CheckCheck, {})
-              }
-            ),
-            onMoreActions && /* @__PURE__ */ jsx(
-              Button,
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        className: cn(
+          "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] p-0 flex flex-col overflow-hidden",
+          className
+        ),
+        "aria-label": "Notificações",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: hdTop(), children: [
+            /* @__PURE__ */ jsxs("div", { className: hdHeader(), children: [
+              /* @__PURE__ */ jsxs("div", { className: hdTitle(), children: [
+                /* @__PURE__ */ jsx("span", { children: "Notificações" }),
+                unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: hdTitleCount(), children: unreadCount })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: hdHeaderActions(), children: [
+                onMarkAllRead && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "secondary",
+                    variant: "ghost",
+                    size: "icon-2xs",
+                    className: "rounded-radius-sm",
+                    title: "Marcar todas como lidas",
+                    onClick: onMarkAllRead,
+                    children: /* @__PURE__ */ jsx(CheckCheck, {})
+                  }
+                ),
+                onMoreActions && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "secondary",
+                    variant: "ghost",
+                    size: "icon-2xs",
+                    className: "rounded-radius-sm",
+                    title: "Mais ações",
+                    onClick: onMoreActions,
+                    children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+                  }
+                )
+              ] })
+            ] }),
+            filters.length > 0 && /* @__PURE__ */ jsx(
+              ChipGroup,
               {
-                color: "secondary",
-                variant: "ghost",
-                size: "icon-2xs",
-                className: "rounded-radius-sm",
-                title: "Mais ações",
-                onClick: onMoreActions,
-                children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+                type: "single",
+                value: activeFilter,
+                onValueChange: (v) => v && setActiveFilter(v),
+                size: "lg",
+                ariaLabel: "Filtrar notificações",
+                children: filters.map((f) => {
+                  const count = items.filter(f.predicate ?? (() => true)).length;
+                  return /* @__PURE__ */ jsxs(ChipGroupItem, { value: f.id, children: [
+                    f.label,
+                    count > 0 && ` (${count})`
+                  ] }, f.id);
+                })
               }
             )
-          ] })
-        ] }),
-        filters.length > 0 && /* @__PURE__ */ jsx(
-          ChipGroup,
-          {
-            type: "single",
-            value: activeFilter,
-            onValueChange: (v) => v && setActiveFilter(v),
-            size: "lg",
-            ariaLabel: "Filtrar notificações",
-            children: filters.map((f) => {
-              const count = items.filter(f.predicate ?? (() => true)).length;
-              return /* @__PURE__ */ jsxs(ChipGroupItem, { value: f.id, children: [
-                f.label,
-                count > 0 && ` (${count})`
-              ] }, f.id);
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: hdBody(), children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: hdEmpty(), children: [
-        /* @__PURE__ */ jsx(Bell, { size: 28, strokeWidth: 1.4 }),
-        /* @__PURE__ */ jsx("p", { className: hdEmptyText(), children: emptyMessage })
-      ] }) : filtered.map((n) => /* @__PURE__ */ jsx(NotificationRow, { item: n }, n.id)) }),
-      onViewAll && /* @__PURE__ */ jsx("div", { className: hdFooter(), children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "#",
-          className: hdFooterLink(),
-          onClick: (e) => {
-            e.preventDefault();
-            onViewAll();
-            setOpen(false);
-          },
-          children: viewAllLabel
-        }
-      ) })
-    ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: hdBody(), children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: hdEmpty(), children: [
+            /* @__PURE__ */ jsx(Bell, { size: 28, strokeWidth: 1.4 }),
+            /* @__PURE__ */ jsx("p", { className: hdEmptyText(), children: emptyMessage })
+          ] }) : filtered.map((n) => /* @__PURE__ */ jsx(NotificationRow, { item: n }, n.id)) }),
+          onViewAll && /* @__PURE__ */ jsx("div", { className: hdFooter(), children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "#",
+              className: hdFooterLink(),
+              onClick: (e) => {
+                e.preventDefault();
+                onViewAll();
+                setOpen(false);
+              },
+              children: viewAllLabel
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 }
 function NotificationRow({ item }) {
@@ -964,28 +1023,12 @@ function HeaderMessages({ config, className }) {
   const [open, setOpen] = useState(false);
   const [activeFilter, setActiveFilter] = useState(filters[0]?.id ?? "all");
   const [search, setSearch] = useState("");
-  const wrapRef = useRef(null);
   const unreadCount = items.filter((m) => m.unread).length;
-  useEffect(() => {
-    if (!open) return;
-    const onClick = (e) => {
-      if (!wrapRef.current?.contains(e.target)) setOpen(false);
-    };
-    const onEsc = (e) => {
-      if (e.key === "Escape") setOpen(false);
-    };
-    document.addEventListener("mousedown", onClick);
-    document.addEventListener("keydown", onEsc);
-    return () => {
-      document.removeEventListener("mousedown", onClick);
-      document.removeEventListener("keydown", onEsc);
-    };
-  }, [open]);
   const filtered = items.filter(filters.find((f) => f.id === activeFilter)?.predicate ?? (() => true)).filter(
     (m) => search ? m.name.toLowerCase().includes(search.toLowerCase()) : true
   );
-  return /* @__PURE__ */ jsxs("div", { ref: wrapRef, className: cn(hdWrap(), className), children: [
-    /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
       Button,
       {
         color: "secondary",
@@ -994,96 +1037,105 @@ function HeaderMessages({ config, className }) {
         className: "rounded-radius-md relative",
         "aria-label": "Mensagens",
         title: "Mensagens",
-        "aria-expanded": open,
-        onClick: () => setOpen((o) => !o),
         children: [
           /* @__PURE__ */ jsx(MessageSquare, {}),
           unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: headerIconBtnBadge({ kind: "brand" }), "aria-hidden": "true" })
         ]
       }
-    ),
-    open && /* @__PURE__ */ jsxs("div", { className: hdDropdown(), role: "dialog", "aria-label": "Mensagens", children: [
-      /* @__PURE__ */ jsxs("div", { className: hdTop(), children: [
-        /* @__PURE__ */ jsxs("div", { className: hdHeader(), children: [
-          /* @__PURE__ */ jsxs("div", { className: hdTitle(), children: [
-            /* @__PURE__ */ jsx("span", { children: "Conversas" }),
-            unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: hdTitleCount(), children: unreadCount })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: hdHeaderActions(), children: [
-            onNewMessage && /* @__PURE__ */ jsx(
-              Button,
-              {
-                color: "secondary",
-                variant: "ghost",
-                size: "icon-2xs",
-                className: "rounded-radius-sm",
-                title: "Nova mensagem",
-                onClick: onNewMessage,
-                children: /* @__PURE__ */ jsx(PenLine, {})
-              }
-            ),
-            onExpand && /* @__PURE__ */ jsx(
-              Button,
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        className: cn(
+          "w-[380px] max-w-[calc(100vw-32px)] max-h-[520px] p-0 flex flex-col overflow-hidden",
+          className
+        ),
+        "aria-label": "Mensagens",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: hdTop(), children: [
+            /* @__PURE__ */ jsxs("div", { className: hdHeader(), children: [
+              /* @__PURE__ */ jsxs("div", { className: hdTitle(), children: [
+                /* @__PURE__ */ jsx("span", { children: "Conversas" }),
+                unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: hdTitleCount(), children: unreadCount })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: hdHeaderActions(), children: [
+                onNewMessage && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "secondary",
+                    variant: "ghost",
+                    size: "icon-2xs",
+                    className: "rounded-radius-sm",
+                    title: "Nova mensagem",
+                    onClick: onNewMessage,
+                    children: /* @__PURE__ */ jsx(PenLine, {})
+                  }
+                ),
+                onExpand && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    color: "secondary",
+                    variant: "ghost",
+                    size: "icon-2xs",
+                    className: "rounded-radius-sm",
+                    title: "Expandir",
+                    onClick: onExpand,
+                    children: /* @__PURE__ */ jsx(Maximize2, {})
+                  }
+                )
+              ] })
+            ] }),
+            showSearch && /* @__PURE__ */ jsxs(InputGroup, { size: "sm", children: [
+              /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { strokeWidth: 1.8 }) }),
+              /* @__PURE__ */ jsx(
+                InputGroupInput,
+                {
+                  type: "text",
+                  placeholder: searchPlaceholder,
+                  value: search,
+                  onChange: (e) => setSearch(e.target.value)
+                }
+              )
+            ] }),
+            filters.length > 0 && /* @__PURE__ */ jsx(
+              ChipGroup,
               {
-                color: "secondary",
-                variant: "ghost",
-                size: "icon-2xs",
-                className: "rounded-radius-sm",
-                title: "Expandir",
-                onClick: onExpand,
-                children: /* @__PURE__ */ jsx(Maximize2, {})
+                type: "single",
+                value: activeFilter,
+                onValueChange: (v) => v && setActiveFilter(v),
+                size: "lg",
+                ariaLabel: "Filtrar mensagens",
+                children: filters.map((f) => {
+                  const count = items.filter(f.predicate ?? (() => true)).length;
+                  return /* @__PURE__ */ jsxs(ChipGroupItem, { value: f.id, children: [
+                    f.label,
+                    count > 0 && ` (${count})`
+                  ] }, f.id);
+                })
               }
             )
-          ] })
-        ] }),
-        showSearch && /* @__PURE__ */ jsxs(InputGroup, { size: "sm", children: [
-          /* @__PURE__ */ jsx(InputGroupAddon, { align: "inline-start", children: /* @__PURE__ */ jsx(Search, { strokeWidth: 1.8 }) }),
-          /* @__PURE__ */ jsx(
-            InputGroupInput,
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: hdBody(), children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: hdEmpty(), children: [
+            /* @__PURE__ */ jsx(MessageSquare, { size: 28, strokeWidth: 1.4 }),
+            /* @__PURE__ */ jsx("p", { className: hdEmptyText(), children: emptyMessage })
+          ] }) : filtered.map((m) => /* @__PURE__ */ jsx(MessageRow, { item: m }, m.id)) }),
+          onViewAll && /* @__PURE__ */ jsx("div", { className: hdFooter(), children: /* @__PURE__ */ jsx(
+            "a",
             {
-              type: "text",
-              placeholder: searchPlaceholder,
-              value: search,
-              onChange: (e) => setSearch(e.target.value)
+              href: "#",
+              className: hdFooterLink(),
+              onClick: (e) => {
+                e.preventDefault();
+                onViewAll();
+                setOpen(false);
+              },
+              children: viewAllLabel
             }
-          )
-        ] }),
-        filters.length > 0 && /* @__PURE__ */ jsx(
-          ChipGroup,
-          {
-            type: "single",
-            value: activeFilter,
-            onValueChange: (v) => v && setActiveFilter(v),
-            size: "lg",
-            ariaLabel: "Filtrar mensagens",
-            children: filters.map((f) => {
-              const count = items.filter(f.predicate ?? (() => true)).length;
-              return /* @__PURE__ */ jsxs(ChipGroupItem, { value: f.id, children: [
-                f.label,
-                count > 0 && ` (${count})`
-              ] }, f.id);
-            })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: hdBody(), children: filtered.length === 0 ? /* @__PURE__ */ jsxs("div", { className: hdEmpty(), children: [
-        /* @__PURE__ */ jsx(MessageSquare, { size: 28, strokeWidth: 1.4 }),
-        /* @__PURE__ */ jsx("p", { className: hdEmptyText(), children: emptyMessage })
-      ] }) : filtered.map((m) => /* @__PURE__ */ jsx(MessageRow, { item: m }, m.id)) }),
-      onViewAll && /* @__PURE__ */ jsx("div", { className: hdFooter(), children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "#",
-          className: hdFooterLink(),
-          onClick: (e) => {
-            e.preventDefault();
-            onViewAll();
-            setOpen(false);
-          },
-          children: viewAllLabel
-        }
-      ) })
-    ] })
+          ) })
+        ]
+      }
+    )
   ] });
 }
 function MessageRow({ item }) {
@@ -1119,6 +1171,7 @@ function MessageRow({ item }) {
 }
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 const CONTAINER_CLASSES = [
@@ -1139,6 +1192,15 @@ const CONTAINER_CLASSES = [
   "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   "origin-[--radix-dropdown-menu-content-transform-origin]"
 ].join(" ");
+const MOBILE_SHEET_CLASSES = [
+  "max-md:w-full max-md:min-w-0 max-md:max-w-none",
+  "max-md:!max-h-[92vh]",
+  "max-md:rounded-b-none max-md:rounded-t-[12px]",
+  "max-md:border-x-0 max-md:border-b-0",
+  "max-md:outline-none max-md:shadow-none",
+  "max-md:data-[state=open]:zoom-in-100 max-md:data-[state=closed]:zoom-out-100",
+  "max-md:data-[state=open]:slide-in-from-bottom-12 max-md:data-[state=closed]:slide-out-to-bottom-12"
+].join(" ");
 const ITEM_BASE = [
   "relative flex cursor-default select-none items-center",
   "gap-pad-lg px-pad-lg py-pad-md rounded-radius-sm",
@@ -1183,19 +1245,30 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  DropdownMenuPrimitive.Content,
-  {
-    ref,
-    sideOffset,
-    className: cn(
-      CONTAINER_CLASSES,
-      "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden",
-      className
-    ),
-    ...props
-  }
-) }));
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 8, mobileSheet = true, ...props }, ref) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  mobileSheet && /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "fixed inset-0 z-[55] bg-overlay-scrim pointer-events-none md:hidden animate-in fade-in-0 duration-150"
+    }
+  ) }),
+  /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      "data-mobile-sheet": mobileSheet ? "" : void 0,
+      className: cn(
+        CONTAINER_CLASSES,
+        "max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden",
+        mobileSheet && MOBILE_SHEET_CLASSES,
+        className
+      ),
+      ...props
+    }
+  ) })
+] }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef(({ className, inset, variant = "default", ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
@@ -1411,7 +1484,8 @@ const sidebarRoot = tv({
   base: "relative flex h-screen w-fit bg-bg-sidebar text-fg-default font-sans",
   variants: {
     mobile: {
-      true: "fixed inset-y-0 left-0 z-50 h-screen w-auto transition-transform duration-200 ease-out",
+      // w-screen: drawer ocupa 100vw (rail + panel preenchendo) e h-screen (100vh).
+      true: "fixed inset-y-0 left-0 z-50 h-screen w-screen max-w-full transition-transform duration-200 ease-out",
       false: ""
     },
     mobileOpen: {
@@ -1525,6 +1599,10 @@ const sidebarPanel = tv({
     /** Quando true: overlay absoluto sobre o conteúdo (hover-to-expand). */
     floating: {
       true: "absolute left-[64px] top-0 h-full z-40"
+    },
+    /** Mobile: panel preenche o resto do drawer (100vw - rail) em vez de 264px fixo. */
+    mobile: {
+      true: "!w-auto flex-1"
     }
   }
 });
@@ -2051,6 +2129,7 @@ function SidebarPanel({
   context,
   collapsed,
   floating,
+  mobile,
   activeItemHref,
   onItemClick,
   contexts,
@@ -2063,7 +2142,7 @@ function SidebarPanel({
   return /* @__PURE__ */ jsxs(
     "aside",
     {
-      className: cn(sidebarPanel({ collapsed, floating }), className),
+      className: cn(sidebarPanel({ collapsed, floating, mobile }), className),
       "aria-hidden": collapsed,
       children: [
         /* @__PURE__ */ jsx("div", { className: sidebarPanelHeader(), children: hasSwitcher ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -2280,6 +2359,7 @@ function MenuSidebar({
               context: activeContext,
               collapsed: isMobile ? false : hoverExpanded ? false : collapsed,
               floating: shouldFloat,
+              mobile: isMobile,
               activeItemHref: itemHref,
               onItemClick: handleItemClick,
               contexts,
@@ -2355,110 +2435,117 @@ function UserMenu({
   const hasGroups = hasLayout || hasTheme || !!onSettings;
   const currentLayoutLabel = hasLayout && layout ? layoutOptions.find((o) => o.id === layout)?.label : void 0;
   const currentThemeLabel = hasTheme && theme ? themeOptions.find((o) => o.id === theme)?.label : void 0;
-  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Menu do usuário (${user.name})`,
-        className: [
-          "grid place-items-center w-9 h-9 rounded-full shrink-0",
-          "bg-bg-brand text-fg-on-brand text-caption-sm font-bold uppercase tracking-[0.02em]",
-          "cursor-pointer transition-opacity duration-150",
-          "hover:opacity-90",
-          "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
-          "data-[state=open]:ring-4 data-[state=open]:ring-ring-secondary"
-        ].join(" "),
-        style: user.avatarColor ? { background: user.avatarColor } : void 0,
-        children: user.avatarSrc ? /* @__PURE__ */ jsxs(Avatar, { className: "size-9", children: [
-          /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
-          /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-fg-on-brand", children: initials })
-        ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: initials })
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(
-      DropdownMenuContent,
-      {
-        side: "right",
-        align: "end",
-        sideOffset: 12,
-        className: "min-w-[240px]",
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-gp-md px-pad-lg py-pad-md", children: [
-            /* @__PURE__ */ jsxs(
-              Avatar,
-              {
-                className: "size-9 shrink-0",
-                style: user.avatarColor ? { background: user.avatarColor } : void 0,
-                children: [
-                  user.avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
-                  /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-bg-brand text-fg-on-brand text-body-xs font-bold uppercase", children: initials })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-body-sm font-medium text-fg-default truncate", children: user.name }),
-              user.email && /* @__PURE__ */ jsx("span", { className: "text-caption-sm text-fg-muted truncate", children: user.email })
-            ] })
-          ] }),
-          hasGroups && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-          hasLayout && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-            /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
-              /* @__PURE__ */ jsx(LayoutGrid, {}),
-              /* @__PURE__ */ jsx("span", { children: "Layout" }),
-              currentLayoutLabel && /* @__PURE__ */ jsx("span", { className: "flex-1 text-right text-caption-sm text-fg-subtle", children: currentLayoutLabel })
+  return (
+    // modal={false}: dentro do drawer mobile (overlay próprio), o modo modal do
+    // Radix injeta um dismiss/scroll-lock que entra em corrida com o gesto de
+    // abertura → o menu abre no pointerdown e fecha no click/pointerup do mesmo
+    // toque ("aparece e some", precisa 2-3 toques). Sem modal, o dismiss por
+    // toque-fora continua via DismissableLayer, sem a corrida.
+    /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+      /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Menu do usuário (${user.name})`,
+          className: [
+            "grid place-items-center w-9 h-9 rounded-full shrink-0",
+            "bg-bg-brand text-fg-on-brand text-caption-sm font-bold uppercase tracking-[0.02em]",
+            "cursor-pointer transition-opacity duration-150",
+            "hover:opacity-90",
+            "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring-secondary",
+            "data-[state=open]:ring-4 data-[state=open]:ring-ring-secondary"
+          ].join(" "),
+          style: user.avatarColor ? { background: user.avatarColor } : void 0,
+          children: user.avatarSrc ? /* @__PURE__ */ jsxs(Avatar, { className: "size-9", children: [
+            /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-transparent text-fg-on-brand", children: initials })
+          ] }) : /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: initials })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs(
+        DropdownMenuContent,
+        {
+          side: "right",
+          align: "end",
+          sideOffset: 12,
+          className: "min-w-[240px]",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-gp-md px-pad-lg py-pad-md", children: [
+              /* @__PURE__ */ jsxs(
+                Avatar,
+                {
+                  className: "size-9 shrink-0",
+                  style: user.avatarColor ? { background: user.avatarColor } : void 0,
+                  children: [
+                    user.avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarSrc, alt: user.name }),
+                    /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-bg-brand text-fg-on-brand text-body-xs font-bold uppercase", children: initials })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-body-sm font-medium text-fg-default truncate", children: user.name }),
+                user.email && /* @__PURE__ */ jsx("span", { className: "text-caption-sm text-fg-muted truncate", children: user.email })
+              ] })
             ] }),
-            /* @__PURE__ */ jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsx(
-              DropdownMenuRadioGroup,
-              {
-                value: layout,
-                onValueChange: onLayoutChange,
-                children: layoutOptions.map((opt) => {
-                  const Icon = opt.icon;
-                  return /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: opt.id, children: [
-                    /* @__PURE__ */ jsx(Icon, {}),
-                    /* @__PURE__ */ jsx("span", { children: opt.label })
-                  ] }, opt.id);
-                })
-              }
-            ) })
-          ] }),
-          hasTheme && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
-            /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
-              /* @__PURE__ */ jsx(SunMoon, {}),
-              /* @__PURE__ */ jsx("span", { children: "Tema" }),
-              currentThemeLabel && /* @__PURE__ */ jsx("span", { className: "flex-1 text-right text-caption-sm text-fg-subtle", children: currentThemeLabel })
+            hasGroups && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            hasLayout && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                /* @__PURE__ */ jsx(LayoutGrid, {}),
+                /* @__PURE__ */ jsx("span", { children: "Layout" }),
+                currentLayoutLabel && /* @__PURE__ */ jsx("span", { className: "flex-1 text-right text-caption-sm text-fg-subtle", children: currentLayoutLabel })
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsx(
+                DropdownMenuRadioGroup,
+                {
+                  value: layout,
+                  onValueChange: onLayoutChange,
+                  children: layoutOptions.map((opt) => {
+                    const Icon = opt.icon;
+                    return /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: opt.id, children: [
+                      /* @__PURE__ */ jsx(Icon, {}),
+                      /* @__PURE__ */ jsx("span", { children: opt.label })
+                    ] }, opt.id);
+                  })
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsx(
-              DropdownMenuRadioGroup,
-              {
-                value: theme,
-                onValueChange: onThemeChange,
-                children: themeOptions.map((opt) => {
-                  const Icon = opt.icon;
-                  return /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: opt.id, children: [
-                    /* @__PURE__ */ jsx(Icon, {}),
-                    /* @__PURE__ */ jsx("span", { children: opt.label })
-                  ] }, opt.id);
-                })
-              }
-            ) })
-          ] }),
-          onSettings && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSettings, children: [
-            /* @__PURE__ */ jsx(Settings, {}),
-            /* @__PURE__ */ jsx("span", { children: "Configurações" })
-          ] }),
-          onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-            /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onLogout, children: [
-              /* @__PURE__ */ jsx(LogOut, {}),
-              /* @__PURE__ */ jsx("span", { children: "Sair" })
+            hasTheme && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+              /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+                /* @__PURE__ */ jsx(SunMoon, {}),
+                /* @__PURE__ */ jsx("span", { children: "Tema" }),
+                currentThemeLabel && /* @__PURE__ */ jsx("span", { className: "flex-1 text-right text-caption-sm text-fg-subtle", children: currentThemeLabel })
+              ] }),
+              /* @__PURE__ */ jsx(DropdownMenuSubContent, { sideOffset: 4, children: /* @__PURE__ */ jsx(
+                DropdownMenuRadioGroup,
+                {
+                  value: theme,
+                  onValueChange: onThemeChange,
+                  children: themeOptions.map((opt) => {
+                    const Icon = opt.icon;
+                    return /* @__PURE__ */ jsxs(DropdownMenuRadioItem, { value: opt.id, children: [
+                      /* @__PURE__ */ jsx(Icon, {}),
+                      /* @__PURE__ */ jsx("span", { children: opt.label })
+                    ] }, opt.id);
+                  })
+                }
+              ) })
+            ] }),
+            onSettings && /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onSettings, children: [
+              /* @__PURE__ */ jsx(Settings, {}),
+              /* @__PURE__ */ jsx("span", { children: "Configurações" })
+            ] }),
+            onLogout && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs(DropdownMenuItem, { onSelect: onLogout, children: [
+                /* @__PURE__ */ jsx(LogOut, {}),
+                /* @__PURE__ */ jsx("span", { children: "Sair" })
+              ] })
             ] })
-          ] })
-        ]
-      }
-    )
-  ] });
+          ]
+        }
+      )
+    ] })
+  );
 }
 const root = tv({
   base: [
@@ -2547,11 +2634,17 @@ function AppShell({
 }) {
   const [internalCollapsed, setInternalCollapsed] = useState(defaultMenuCollapsed);
   const menuCollapsed = controlledCollapsed ?? internalCollapsed;
+  const isMobile = useMediaQuery("(max-width: 767px)");
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
   const toggleMenuCollapsed = useCallback(() => {
     const next = !menuCollapsed;
     if (controlledCollapsed === void 0) setInternalCollapsed(next);
     onMenuCollapseChange?.(next);
   }, [menuCollapsed, controlledCollapsed, onMenuCollapseChange]);
+  const handleToggleMenu = useCallback(() => {
+    if (isMobile) setMobileMenuOpen((o) => !o);
+    else toggleMenuCollapsed();
+  }, [isMobile, toggleMenuCollapsed]);
   const userNode = user ? /* @__PURE__ */ jsx(
     UserMenu,
     {
@@ -2582,7 +2675,9 @@ function AppShell({
         onPanelCollapseChange: (next) => {
           if (controlledCollapsed === void 0) setInternalCollapsed(next);
           onMenuCollapseChange?.(next);
-        }
+        },
+        mobileOpen: mobileMenuOpen,
+        onMobileOpenChange: setMobileMenuOpen
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: main(), children: [
@@ -2590,7 +2685,7 @@ function AppShell({
         Header,
         {
           breadcrumb,
-          onCollapseMenu: toggleMenuCollapsed,
+          onCollapseMenu: handleToggleMenu,
           menuCollapsed,
           commandGroups,
           commandPlaceholder,
@@ -2619,45 +2714,59 @@ function AppShell({
 }
 AppShell.displayName = "AppShell";
 export {
+  PopoverAnchor as $,
   AppShell as A,
-  useControllable as B,
-  useMediaQuery as C,
-  Dialog as D,
-  DropdownMenu as E,
-  DropdownMenuTrigger as F,
-  DropdownMenuContent as G,
+  InputGroupText as B,
+  CommandDialog as C,
+  DropdownMenu as D,
+  InputGroupTextarea as E,
+  DropdownMenuCheckboxItem as F,
+  DropdownMenuRadioGroup as G,
   Header as H,
   InputGroup as I,
-  DialogTrigger as J,
-  DialogTitle as K,
+  DropdownMenuRadioItem as J,
+  SidebarItem as K,
+  SidebarPanel as L,
   MenuSidebar as M,
+  SidebarPill as N,
+  SidebarRail as O,
+  SidebarSection as P,
+  SidebarSubgroup as Q,
+  inputGroupVariants as R,
   SidebarBrandIcon as S,
+  useControllable as T,
   UserMenu as U,
+  useMediaQuery as V,
+  Popover as W,
+  PopoverTrigger as X,
+  PopoverContent as Y,
+  Command as Z,
+  DialogDescription as _,
   Avatar as a,
   AvatarFallback as b,
-  DialogContent as c,
-  DialogClose as d,
-  HeaderBreadcrumb as e,
-  HeaderMessages as f,
-  HeaderNotifications as g,
-  HeaderSearch as h,
-  HeaderThemeSwitcher as i,
-  InputGroupAddon as j,
-  InputGroupButton as k,
-  InputGroupInput as l,
-  InputGroupText as m,
-  InputGroupTextarea as n,
-  DropdownMenuCheckboxItem as o,
-  DropdownMenuItem as p,
-  DropdownMenuLabel as q,
-  DropdownMenuRadioGroup as r,
-  DropdownMenuRadioItem as s,
-  DropdownMenuSeparator as t,
-  SidebarItem as u,
-  SidebarPanel as v,
-  SidebarPill as w,
-  SidebarRail as x,
-  SidebarSection as y,
-  SidebarSubgroup as z
+  DropdownMenuTrigger as c,
+  DropdownMenuContent as d,
+  DropdownMenuItem as e,
+  DropdownMenuSeparator as f,
+  Dialog as g,
+  DialogTrigger as h,
+  DialogContent as i,
+  DialogTitle as j,
+  DialogClose as k,
+  CommandInput as l,
+  CommandList as m,
+  CommandEmpty as n,
+  CommandGroup as o,
+  CommandItem as p,
+  DropdownMenuGroup as q,
+  DropdownMenuLabel as r,
+  HeaderBreadcrumb as s,
+  HeaderMessages as t,
+  HeaderNotifications as u,
+  HeaderSearch as v,
+  HeaderThemeSwitcher as w,
+  InputGroupAddon as x,
+  InputGroupButton as y,
+  InputGroupInput as z
 };
-//# sourceMappingURL=app-shell-C_enrPD8.mjs.map
+//# sourceMappingURL=app-shell-Cy9be0Zx.mjs.map