@snksergio/design-system 0.42.0 → 0.43.0

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

@@ -1310,7 +1310,7 @@ const sidebarRailUserDefault = avatar.tv({
     "bg-bg-brand text-fg-on-brand font-bold text-caption-sm uppercase tracking-[0.02em]"
   ]
 });
-const sidebarPanel = avatar.tv({
+const sidebarPanel$1 = avatar.tv({
   base: [
     "w-[264px] flex-none h-full sticky top-0 flex flex-col overflow-hidden",
     "bg-bg-sidebar border-r border-border-sidebar",
@@ -1998,7 +1998,7 @@ function SidebarPanel({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "aside",
     {
-      className: avatar.cn(sidebarPanel({ collapsed, floating, mobile }), className),
+      className: avatar.cn(sidebarPanel$1({ collapsed, floating, mobile }), className),
       "aria-hidden": collapsed,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: sidebarPanelHeader(), children: hasSwitcher ? /* @__PURE__ */ jsxRuntime.jsxs(avatar.DropdownMenu, { children: [
@@ -2335,21 +2335,62 @@ function useSingleMenuSidebarState(defaultExpanded, controlledExpanded, onExpand
   };
 }
 const sidebarRoot = avatar.tv({
+  base: "relative h-full shrink-0",
+  variants: {
+    // Largura NO FLUXO. `rail` cobre recolhida E peek por hover — é isso que
+    // impede o conteúdo ao lado de se mexer durante a espiada.
+    flowWidth: {
+      rail: "hidden md:block md:w-20",
+      full: "w-full md:w-[280px]"
+    }
+  },
+  defaultVariants: {
+    flowWidth: "full"
+  }
+});
+const sidebarPanel = avatar.tv({
   base: [
-    "relative flex h-full flex-col overflow-x-hidden",
+    "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"
+    /**
+     * `overlay` segue o estado TRAVADO, não o hover — e isso é o que evita um
+     * defeito medido.
+     *
+     * A 1ª versão ligava `overlay` ao `isHoverExpand`. Ao sair do hover, o
+     * `position` voltava a `static` **antes** de a largura terminar de animar:
+     * aferido, aos +400ms o painel estava `static` com **279px** dentro de um
+     * `<aside>` de 80px, sem `z-index` — grande, no fluxo e passível de ser
+     * pintado atrás do conteúdo por ~300ms.
+     *
+     * Amarrando ao travado, o `position` **nunca troca durante a animação**:
+     * fora do estado travado o painel é sempre absoluto, e só a largura anima.
+     *
+     * `md:` em tudo porque overlay é comportamento de DESKTOP — abaixo de md a
+     * sidebar é drawer de largura cheia e não existe hover em touch.
+     */
+    overlay: {
+      true: "md:absolute md:inset-y-0 md:left-0 md:z-40",
+      false: ""
+    },
+    /** Largura VISUAL — independente da que o `<aside>` ocupa no fluxo. */
+    visualWidth: {
+      rail: "w-full md:w-20",
+      full: "w-full md:w-[280px]"
     }
   },
+  compoundVariants: [
+    // Sombra só na espiada: é ela que indica "isto está flutuando sobre o
+    // conteúdo". Recolhida, o painel também é absoluto (pra não trocar de
+    // `position` no meio da animação), mas ali ele coincide com o rail e uma
+    // sombra seria ruído.
+    { overlay: true, visualWidth: "full", class: "md:shadow-sh-lg" }
+  ],
   defaultVariants: {
-    expanded: true
+    overlay: false,
+    visualWidth: "full"
   }
 });
 const category = avatar.tv({
@@ -2937,57 +2978,67 @@ function SingleMenuSidebar({
       setOpenCategoryId
     ]
   );
+  const travadaAberta = expanded && !isHoverExpand;
   return /* @__PURE__ */ jsxRuntime.jsxs(SingleMenuSidebarContext.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(avatar.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(avatar.TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsxRuntime.jsx(
       "aside",
       {
         "aria-label": "Navegação lateral",
-        className: avatar.cn(sidebarRoot({ expanded }), className),
+        className: avatar.cn(sidebarRoot({ flowWidth: travadaAberta ? "full" : "rail" }), 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.jsxs(
+          "div",
+          {
+            className: sidebarPanel({
+              overlay: !travadaAberta,
+              visualWidth: expanded ? "full" : "rail"
+            }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SingleMenuHeader,
+                {
+                  logo,
+                  title,
+                  showToggleIndicator
+                }
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.navList, children: effectiveCategories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx(
-                SingleMenuCategory,
+              /* @__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",
                 {
-                  ...cat,
-                  activeItemId,
-                  onItemClick,
-                  renderLink
-                },
-                cat.id
-              )) })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(SingleMenuFooter, { ...user })
-        ]
+                  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(
@@ -3458,4 +3509,4 @@ exports.shouldPreventNavigation = shouldPreventNavigation;
 exports.useControllable = useControllable;
 exports.useMediaQuery = useMediaQuery;
 exports.useTheme = useTheme;
-//# sourceMappingURL=useTheme-3iZAognE.cjs.map
+//# sourceMappingURL=useTheme-C9Y6vxTf.cjs.map