@greatapps/common 1.1.92 → 1.1.94

package/dist/components/layouts/AppMobileNavBar.mjs

@@ -7,6 +7,8 @@ function AppMobileNavBar({
   appIconActive = false,
   appIconIndicator = false,
   logoIndicator = false,
+  onLogoClick,
+  onAppIconClick,
   extraLeftSlot,
   rightActionSlot,
   menuItems = [],
@@ -15,15 +17,23 @@ function AppMobileNavBar({
   const { openConfigurations } = useAccountModals();
   return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsxs("div", { className: "relative size-10 flex items-center justify-center", children: [
-        /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
-        logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? "cursor-pointer hover:bg-gray-100" : ""}`,
+          onClick: onLogoClick,
+          children: [
+            /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
+            logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"}`,
+            className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"} ${onAppIconClick ? "cursor-pointer hover:opacity-80" : ""}`,
+            onClick: onAppIconClick,
             children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
           }
         ),

package/dist/components/layouts/AppMobileNavBar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppMobileNavBarProps {\n  appIconActive?: boolean;\n  /** Shows the colored indicator bar below the app icon */\n  appIconIndicator?: boolean;\n  /** Shows the gray indicator bar below the GreatApps logo */\n  logoIndicator?: boolean;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  appIconActive = false,\n  appIconIndicator = false,\n  logoIndicator = false,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <div className=\"relative size-10 flex items-center justify-center\">\n          <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n          {logoIndicator && (\n            <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n          )}\n        </div>\n        <div className=\"relative\">\n          <div\n            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${\n              appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n            }`}\n          >\n            <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n          </div>\n          {appIconIndicator && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl\" />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,SACE,KADF;AAjCR,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAiB1B,SAAS,gBAAgB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,SAAI,WAAU,qDACb;AAAA,4BAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,QACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA,SAE5G;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,sFACT,gBAAgB,iBAAiB,aACnC;AAAA,YAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,QAC9E;AAAA,QACC,oBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppMobileNavBarProps {\n  appIconActive?: boolean;\n  /** Shows the colored indicator bar below the app icon */\n  appIconIndicator?: boolean;\n  /** Shows the gray indicator bar below the GreatApps logo */\n  logoIndicator?: boolean;\n  /** Called when the GreatApps logo is clicked */\n  onLogoClick?: () => void;\n  /** Called when the app icon (e.g. GreatPages) is clicked */\n  onAppIconClick?: () => void;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  appIconActive = false,\n  appIconIndicator = false,\n  logoIndicator = false,\n  onLogoClick,\n  onAppIconClick,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <div\n          className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}\n          onClick={onLogoClick}\n        >\n          <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n          {logoIndicator && (\n            <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n          )}\n        </div>\n        <div className=\"relative\">\n          <div\n            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${\n              appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n            } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}\n            onClick={onAppIconClick}\n          >\n            <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n          </div>\n          {appIconIndicator && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl\" />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA0CQ,SAIE,KAJF;AAvCR,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAqB1B,SAAS,gBAAgB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,kFAAkF,cAAc,qCAAqC,EAAE;AAAA,UAClJ,SAAS;AAAA,UAET;AAAA,gCAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,YACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA;AAAA;AAAA,MAE5G;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,sFACT,gBAAgB,iBAAiB,aACnC,IAAI,iBAAiB,oCAAoC,EAAE;AAAA,YAC3D,SAAS;AAAA,YAET,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,QAC9E;AAAA,QACC,oBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/layouts/MdSideBarNavigation.mjs

@@ -1,7 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft } from "lucide-react";
 import { useMdSidebarStore } from "../../store/useMdSidebarStore";
 import { cn } from "../../infra/utils/clsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
 function MdSideBarNavigation({
   className,
   children,
@@ -20,13 +22,26 @@ function MdSideBarNavigation({
       "div",
       {
         className: `hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${isExpanded ? "translate-x-0" : "-translate-x-full"}`,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsxs(
           "div",
           {
             "data-slot": "md-sidebar-navigation",
-            className: cn("w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className),
+            className: cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className),
             ...props,
-            children
+            children: [
+              isExpanded && /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: collapse,
+                    className: "absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40",
+                    children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16, className: "text-gray-500" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Recolher menu" })
+              ] }),
+              children
+            ]
           }
         )
       }

package/dist/components/layouts/MdSideBarNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/MdSideBarNavigation.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\n\r\nfunction MdSideBarNavigation({\r\n    className,\r\n    children,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    const { isExpanded, collapse } = useMdSidebarStore()\r\n\r\n    return (\r\n        <>\r\n            <div\r\n                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${\r\n                    isExpanded ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\r\n                }`}\r\n                onClick={collapse}\r\n            />\r\n            <div\r\n                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${\r\n                    isExpanded ? \"translate-x-0\" : \"-translate-x-full\"\r\n                }`}\r\n            >\r\n                <div\r\n                    data-slot=\"md-sidebar-navigation\"\r\n                    className={cn(\"w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200\", className)}\r\n                    {...props}\r\n                >\r\n                    {children}\r\n                </div>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nexport { MdSideBarNavigation };\r\n"],"mappings":";AAcQ,mBACI,KADJ;AAXR,SAAS,yBAAyB;AAClC,SAAS,UAAU;AAEnB,SAAS,oBAAoB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,kBAAkB;AAEnD,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,4FACP,aAAa,gBAAgB,+BACjC;AAAA,QACA,SAAS;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,iIACP,aAAa,kBAAkB,mBACnC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,aAAU;AAAA,YACV,WAAW,GAAG,wEAAwE,SAAS;AAAA,YAC9F,GAAG;AAAA,YAEH;AAAA;AAAA,QACL;AAAA;AAAA,IACJ;AAAA,KACJ;AAER;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/MdSideBarNavigation.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ChevronLeft } from \"lucide-react\"\r\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\r\n\r\nfunction MdSideBarNavigation({\r\n    className,\r\n    children,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    const { isExpanded, collapse } = useMdSidebarStore()\r\n\r\n    return (\r\n        <>\r\n            <div\r\n                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${\r\n                    isExpanded ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\r\n                }`}\r\n                onClick={collapse}\r\n            />\r\n            <div\r\n                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${\r\n                    isExpanded ? \"translate-x-0\" : \"-translate-x-full\"\r\n                }`}\r\n            >\r\n                <div\r\n                    data-slot=\"md-sidebar-navigation\"\r\n                    className={cn(\"relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200\", className)}\r\n                    {...props}\r\n                >\r\n                    {isExpanded && (\r\n                        <Tooltip>\r\n                            <TooltipTrigger asChild>\r\n                                <button\r\n                                    onClick={collapse}\r\n                                    className=\"absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40\"\r\n                                >\r\n                                    <ChevronLeft size={16} className=\"text-gray-500\" />\r\n                                </button>\r\n                            </TooltipTrigger>\r\n                            <TooltipContent side=\"right\">Recolher menu</TooltipContent>\r\n                        </Tooltip>\r\n                    )}\r\n                    {children}\r\n                </div>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nexport { MdSideBarNavigation };\r\n"],"mappings":";AAgBQ,mBACI,KAiBY,YAlBhB;AAbR,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,oBAAoB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,kBAAkB;AAEnD,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,4FACP,aAAa,gBAAgB,+BACjC;AAAA,QACA,SAAS;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,iIACP,aAAa,kBAAkB,mBACnC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,aAAU;AAAA,YACV,WAAW,GAAG,iFAAiF,SAAS;AAAA,YACvG,GAAG;AAAA,YAEH;AAAA,4BACG,qBAAC,WACG;AAAA,oCAAC,kBAAe,SAAO,MACnB;AAAA,kBAAC;AAAA;AAAA,oBACG,SAAS;AAAA,oBACT,WAAU;AAAA,oBAEV,8BAAC,eAAY,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,gBACrD,GACJ;AAAA,gBACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,iBAC9C;AAAA,cAEH;AAAA;AAAA;AAAA,QACL;AAAA;AAAA,IACJ;AAAA,KACJ;AAER;","names":[]}

package/dist/components/navigation/AppNavigation.mjs

@@ -1,17 +1,21 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { DesktopShell } from "./shells/DesktopShell";
 import { MdShell } from "./shells/MdShell";
 import { MobileShell } from "./shells/MobileShell";
+import { TabsMobileShell } from "./shells/TabsMobileShell";
 import { NavItems } from "./subcomponents/NavItems";
 import { ProjectSelector } from "./subcomponents/ProjectSelector";
 import { PlanCard } from "./subcomponents/PlanCard";
 import { CreditsCard } from "./subcomponents/CreditsCard";
-function AppNavigationRoot({ children }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+import { NavItemsContext } from "./NavItemsContext";
+function AppNavigationRoot({ children, mobileVariant = "sheet" }) {
+  const [navItems, setNavItems] = useState([]);
+  return /* @__PURE__ */ jsxs(NavItemsContext.Provider, { value: { navItems, setNavItems, mobileVariant }, children: [
     /* @__PURE__ */ jsx(DesktopShell, { children }),
     /* @__PURE__ */ jsx(MdShell, { children }),
-    /* @__PURE__ */ jsx(MobileShell, { children })
+    mobileVariant === "sheet" ? /* @__PURE__ */ jsx(MobileShell, { children }) : /* @__PURE__ */ jsx(TabsMobileShell, { children })
   ] });
 }
 const AppNavigation = Object.assign(AppNavigationRoot, {

package/dist/components/navigation/AppNavigation.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n  children: ReactNode;\r\n}\r\n\r\nfunction AppNavigationRoot({ children }: AppNavigationProps) {\r\n  return (\r\n    <>\r\n      <DesktopShell>{children}</DesktopShell>\r\n      <MdShell>{children}</MdShell>\r\n      <MobileShell>{children}</MobileShell>\r\n    </>\r\n  );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n  NavItems,\r\n  ProjectSelector,\r\n  PlanCard,\r\n  CreditsCard,\r\n});\r\n"],"mappings":";AAsBI,mBACE,KADF;AAnBJ,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAW5B,SAAS,kBAAkB,EAAE,SAAS,GAAuB;AAC3D,SACE,iCACE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IACnB,oBAAC,eAAa,UAAS;AAAA,KACzB;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { TabsMobileShell } from './shells/TabsMobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\nimport { NavItemsContext } from './NavItemsContext';\r\nimport type { NavItemConfig } from './subcomponents/NavItems';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n  children: ReactNode;\r\n  mobileVariant?: 'sheet' | 'tabs';\r\n}\r\n\r\nfunction AppNavigationRoot({ children, mobileVariant = 'sheet' }: AppNavigationProps) {\r\n  const [navItems, setNavItems] = useState<NavItemConfig[]>([]);\r\n\r\n  return (\r\n    <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>\r\n      <DesktopShell>{children}</DesktopShell>\r\n      <MdShell>{children}</MdShell>\r\n      {mobileVariant === 'sheet' ? (\r\n        <MobileShell>{children}</MobileShell>\r\n      ) : (\r\n        <TabsMobileShell>{children}</TabsMobileShell>\r\n      )}\r\n    </NavItemsContext.Provider>\r\n  );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n  NavItems,\r\n  ProjectSelector,\r\n  PlanCard,\r\n  CreditsCard,\r\n});\r\n"],"mappings":";AA4BI,SACE,KADF;AA1BJ,SAAoB,gBAAgB;AACpC,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAahC,SAAS,kBAAkB,EAAE,UAAU,gBAAgB,QAAQ,GAAuB;AACpF,QAAM,CAAC,UAAU,WAAW,IAAI,SAA0B,CAAC,CAAC;AAE5D,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,UAAU,aAAa,cAAc,GACtE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IAClB,kBAAkB,UACjB,oBAAC,eAAa,UAAS,IAEvB,oBAAC,mBAAiB,UAAS;AAAA,KAE/B;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}

package/dist/components/navigation/NavItemsContext.mjs

@@ -0,0 +1,16 @@
+"use client";
+import { createContext, useContext } from "react";
+const NavItemsContext = createContext({
+  navItems: [],
+  setNavItems: () => {
+  },
+  mobileVariant: "sheet"
+});
+function useNavItemsContext() {
+  return useContext(NavItemsContext);
+}
+export {
+  NavItemsContext,
+  useNavItemsContext
+};
+//# sourceMappingURL=NavItemsContext.mjs.map

package/dist/components/navigation/NavItemsContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/NavItemsContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContext } from 'react';\nimport type { NavItemConfig } from './subcomponents/NavItems';\n\ninterface NavItemsContextValue {\n  navItems: NavItemConfig[];\n  setNavItems: (items: NavItemConfig[]) => void;\n  mobileVariant: 'sheet' | 'tabs';\n}\n\nexport const NavItemsContext = createContext<NavItemsContextValue>({\n  navItems: [],\n  setNavItems: () => {},\n  mobileVariant: 'sheet',\n});\n\nexport function useNavItemsContext(): NavItemsContextValue {\n  return useContext(NavItemsContext);\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AASnC,MAAM,kBAAkB,cAAoC;AAAA,EACjE,UAAU,CAAC;AAAA,EACX,aAAa,MAAM;AAAA,EAAC;AAAA,EACpB,eAAe;AACjB,CAAC;AAEM,SAAS,qBAA2C;AACzD,SAAO,WAAW,eAAe;AACnC;","names":[]}

package/dist/components/navigation/shells/TabsMobileShell.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import { AppNavigationContext } from "../AppNavigationContext";
+import { useNavItemsContext } from "../NavItemsContext";
+function InternalTabsBar() {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef(null);
+  const activeTabRef = useRef(null);
+  const activeLabel = navItems.find((i) => i.isActive)?.label;
+  useEffect(() => {
+    if (activeTabRef.current && tabsListRef.current) {
+      const tabsList = tabsListRef.current;
+      const activeTabElement = activeTabRef.current;
+      const tabsListRect = tabsList.getBoundingClientRect();
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const scrollLeft = activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
+      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" });
+    }
+  }, [activeLabel]);
+  if (!navItems.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: tabsListRef,
+      className: "md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide",
+      children: navItems.map((item) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: item.isActive ? activeTabRef : void 0,
+          onClick: item.onClick,
+          className: `flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${item.isActive ? "border-gray-950 text-gray-950" : "border-transparent text-gray-500 hover:text-gray-900"}`,
+          children: [
+            item.icon && /* @__PURE__ */ jsx(item.icon, { size: 16, className: "shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: item.isActive ? "paragraph-small-semibold" : "paragraph-small-medium",
+                children: item.label
+              }
+            )
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+}
+function TabsMobileShell({ children }) {
+  return /* @__PURE__ */ jsxs(AppNavigationContext.Provider, { value: { breakpoint: "mobile" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden", children }),
+    /* @__PURE__ */ jsx(InternalTabsBar, {})
+  ] });
+}
+export {
+  TabsMobileShell
+};
+//# sourceMappingURL=TabsMobileShell.mjs.map

package/dist/components/navigation/shells/TabsMobileShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/shells/TabsMobileShell.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useRef, useEffect } from 'react';\nimport { AppNavigationContext } from '../AppNavigationContext';\nimport { useNavItemsContext } from '../NavItemsContext';\n\nfunction InternalTabsBar() {\n  const { navItems } = useNavItemsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const activeTabRef = useRef<HTMLButtonElement>(null);\n\n  const activeLabel = navItems.find((i) => i.isActive)?.label;\n\n  // Scroll active tab into center when active item changes\n  useEffect(() => {\n    if (activeTabRef.current && tabsListRef.current) {\n      const tabsList = tabsListRef.current;\n      const activeTabElement = activeTabRef.current;\n      const tabsListRect = tabsList.getBoundingClientRect();\n      const activeTabRect = activeTabElement.getBoundingClientRect();\n      const scrollLeft =\n        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;\n      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });\n    }\n  }, [activeLabel]);\n\n  if (!navItems.length) return null;\n\n  return (\n    <div\n      ref={tabsListRef}\n      className=\"md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide\"\n    >\n      {navItems.map((item) => (\n        <button\n          key={item.label}\n          ref={item.isActive ? activeTabRef : undefined}\n          onClick={item.onClick}\n          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${\n            item.isActive\n              ? 'border-gray-950 text-gray-950'\n              : 'border-transparent text-gray-500 hover:text-gray-900'\n          }`}\n        >\n          {item.icon && <item.icon size={16} className=\"shrink-0\" />}\n          <span\n            className={\n              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'\n            }\n          >\n            {item.label}\n          </span>\n        </button>\n      ))}\n    </div>\n  );\n}\n\nexport function TabsMobileShell({ children }: { children: ReactNode }) {\n  return (\n    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>\n      {/*\n        Children are hidden visually, but NavItems' useEffect still fires inside\n        display:none — React effects are tied to commit phase, not layout visibility.\n        This registers navItems in NavItemsContext so InternalTabsBar can read them.\n      */}\n      <div className=\"hidden\">{children}</div>\n      <InternalTabsBar />\n    </AppNavigationContext.Provider>\n  );\n}\n"],"mappings":";AAkCQ,SAUgB,KAVhB;AAhCR,SAAoB,QAAQ,iBAAiB;AAC7C,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAEnC,SAAS,kBAAkB;AACzB,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,eAAe,OAA0B,IAAI;AAEnD,QAAM,cAAc,SAAS,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAGtD,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,YAAY,SAAS;AAC/C,YAAM,WAAW,YAAY;AAC7B,YAAM,mBAAmB,aAAa;AACtC,YAAM,eAAe,SAAS,sBAAsB;AACpD,YAAM,gBAAgB,iBAAiB,sBAAsB;AAC7D,YAAM,aACJ,iBAAiB,aAAa,aAAa,QAAQ,IAAI,cAAc,QAAQ;AAC/E,eAAS,SAAS,EAAE,MAAM,KAAK,IAAI,GAAG,UAAU,GAAG,UAAU,SAAS,CAAC;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MAET,mBAAS,IAAI,CAAC,SACb;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,KAAK,WAAW,eAAe;AAAA,UACpC,SAAS,KAAK;AAAA,UACd,WAAW,2EACT,KAAK,WACD,kCACA,sDACN;AAAA,UAEC;AAAA,iBAAK,QAAQ,oBAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,YAAW;AAAA,YACxD;AAAA,cAAC;AAAA;AAAA,gBACC,WACE,KAAK,WAAW,6BAA6B;AAAA,gBAG9C,eAAK;AAAA;AAAA,YACR;AAAA;AAAA;AAAA,QAhBK,KAAK;AAAA,MAiBZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAgB,EAAE,SAAS,GAA4B;AACrE,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,SAAS,GAM3D;AAAA,wBAAC,SAAI,WAAU,UAAU,UAAS;AAAA,IAClC,oBAAC,mBAAgB;AAAA,KACnB;AAEJ;","names":[]}

package/dist/components/navigation/subcomponents/NavItems.mjs

@@ -1,7 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { NavItem } from "../NavItem";
+import { useNavItemsContext } from "../NavItemsContext";
 function NavItems({ items }) {
+  const { setNavItems } = useNavItemsContext();
+  useEffect(() => {
+    setNavItems(items);
+  }, [items, setNavItems]);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item) => /* @__PURE__ */ jsx(
     NavItem,
     {

package/dist/components/navigation/subcomponents/NavItems.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/navigation/subcomponents/NavItems.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType } from 'react';\r\nimport { NavItem } from '../NavItem';\r\n\r\nexport interface NavItemConfig {\r\n  label: string;\r\n  isActive: boolean;\r\n  icon: ElementType;\r\n  onClick: () => void;\r\n}\r\n\r\ninterface NavItemsProps {\r\n  items: NavItemConfig[];\r\n}\r\n\r\nexport function NavItems({ items }: NavItemsProps) {\r\n  return (\r\n    <div className=\"flex flex-col\">\r\n      {items.map((item) => (\r\n        <NavItem\r\n          key={item.label}\r\n          label={item.label}\r\n          icon={item.icon}\r\n          isActive={item.isActive}\r\n          onClick={item.onClick}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAoBQ;AAjBR,SAAS,eAAe;AAajB,SAAS,SAAS,EAAE,MAAM,GAAkB;AACjD,SACE,oBAAC,SAAI,WAAU,iBACZ,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA;AAAA,IAJT,KAAK;AAAA,EAKZ,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/NavItems.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType, useEffect } from 'react';\r\nimport { NavItem } from '../NavItem';\r\nimport { useNavItemsContext } from '../NavItemsContext';\r\n\r\nexport interface NavItemConfig {\r\n  label: string;\r\n  isActive: boolean;\r\n  icon: ElementType;\r\n  onClick: () => void;\r\n}\r\n\r\ninterface NavItemsProps {\r\n  items: NavItemConfig[];\r\n}\r\n\r\nexport function NavItems({ items }: NavItemsProps) {\r\n  const { setNavItems } = useNavItemsContext();\r\n\r\n  useEffect(() => {\r\n    setNavItems(items);\r\n  }, [items, setNavItems]);\r\n\r\n  return (\r\n    <div className=\"flex flex-col\">\r\n      {items.map((item) => (\r\n        <NavItem\r\n          key={item.label}\r\n          label={item.label}\r\n          icon={item.icon}\r\n          isActive={item.isActive}\r\n          onClick={item.onClick}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AA2BQ;AAzBR,SAAsB,iBAAiB;AACvC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAa5B,SAAS,SAAS,EAAE,MAAM,GAAkB;AACjD,QAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,YAAU,MAAM;AACd,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,SACE,oBAAC,SAAI,WAAU,iBACZ,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA;AAAA,IAJT,KAAK;AAAA,EAKZ,CACD,GACH;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.92",
+  "version": "1.1.94",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

package/src/components/layouts/AppMobileNavBar.tsx

@@ -12,6 +12,10 @@ export interface AppMobileNavBarProps {
   appIconIndicator?: boolean;
   /** Shows the gray indicator bar below the GreatApps logo */
   logoIndicator?: boolean;
+  /** Called when the GreatApps logo is clicked */
+  onLogoClick?: () => void;
+  /** Called when the app icon (e.g. GreatPages) is clicked */
+  onAppIconClick?: () => void;
   /** Extra slot rendered after the app icon (e.g. project selector) */
   extraLeftSlot?: ReactNode;
   /** Required: the right-side action element (toggle button, sheet button, etc.) */
@@ -24,6 +28,8 @@ export function AppMobileNavBar({
   appIconActive = false,
   appIconIndicator = false,
   logoIndicator = false,
+  onLogoClick,
+  onAppIconClick,
   extraLeftSlot,
   rightActionSlot,
   menuItems = [],
@@ -34,7 +40,10 @@ export function AppMobileNavBar({
   return (
     <div className="fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200">
       <div className="flex items-center gap-1.5">
-        <div className="relative size-10 flex items-center justify-center">
+        <div
+          className={`relative size-10 flex items-center justify-center rounded-lg transition-colors ${onLogoClick ? 'cursor-pointer hover:bg-gray-100' : ''}`}
+          onClick={onLogoClick}
+        >
           <Image src="/icons/great-icon.svg" alt="GreatApps" width={28} height={28} />
           {logoIndicator && (
             <div className="absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" />
@@ -44,7 +53,8 @@ export function AppMobileNavBar({
           <div
             className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${
               appIconActive ? 'bg-pages-300' : 'bg-pages-50'
-            }`}
+            } ${onAppIconClick ? 'cursor-pointer hover:opacity-80' : ''}`}
+            onClick={onAppIconClick}
           >
             <Image src="/icons/icon-navbar.svg" alt="GreatPages" width={24} height={24} />
           </div>

package/src/components/layouts/MdSideBarNavigation.tsx

@@ -1,8 +1,10 @@
 "use client"
 
 import * as React from "react"
+import { ChevronLeft } from "lucide-react"
 import { useMdSidebarStore } from "../../store/useMdSidebarStore"
 import { cn } from "../../infra/utils/clsx"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip"
 
 function MdSideBarNavigation({
     className,
@@ -26,9 +28,22 @@ function MdSideBarNavigation({
             >
                 <div
                     data-slot="md-sidebar-navigation"
-                    className={cn("w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
+                    className={cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className)}
                     {...props}
                 >
+                    {isExpanded && (
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    onClick={collapse}
+                                    className="absolute top-[68px] -right-4 size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-40"
+                                >
+                                    <ChevronLeft size={16} className="text-gray-500" />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent side="right">Recolher menu</TooltipContent>
+                        </Tooltip>
+                    )}
                     {children}
                 </div>
             </div>

package/src/components/navigation/AppNavigation.tsx

@@ -1,13 +1,16 @@
 'use client';
 
-import { ReactNode } from 'react';
+import { ReactNode, useState } from 'react';
 import { DesktopShell } from './shells/DesktopShell';
 import { MdShell } from './shells/MdShell';
 import { MobileShell } from './shells/MobileShell';
+import { TabsMobileShell } from './shells/TabsMobileShell';
 import { NavItems } from './subcomponents/NavItems';
 import { ProjectSelector } from './subcomponents/ProjectSelector';
 import { PlanCard } from './subcomponents/PlanCard';
 import { CreditsCard } from './subcomponents/CreditsCard';
+import { NavItemsContext } from './NavItemsContext';
+import type { NavItemConfig } from './subcomponents/NavItems';
 
 export type { NavItemConfig } from './subcomponents/NavItems';
 export type { ProjectSelectorProps } from './subcomponents/ProjectSelector';
@@ -16,15 +19,22 @@ export type { CreditsCardProps } from './subcomponents/CreditsCard';
 
 interface AppNavigationProps {
   children: ReactNode;
+  mobileVariant?: 'sheet' | 'tabs';
 }
 
-function AppNavigationRoot({ children }: AppNavigationProps) {
+function AppNavigationRoot({ children, mobileVariant = 'sheet' }: AppNavigationProps) {
+  const [navItems, setNavItems] = useState<NavItemConfig[]>([]);
+
   return (
-    <>
+    <NavItemsContext.Provider value={{ navItems, setNavItems, mobileVariant }}>
       <DesktopShell>{children}</DesktopShell>
       <MdShell>{children}</MdShell>
-      <MobileShell>{children}</MobileShell>
-    </>
+      {mobileVariant === 'sheet' ? (
+        <MobileShell>{children}</MobileShell>
+      ) : (
+        <TabsMobileShell>{children}</TabsMobileShell>
+      )}
+    </NavItemsContext.Provider>
   );
 }
 

package/src/components/navigation/NavItemsContext.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import type { NavItemConfig } from './subcomponents/NavItems';
+
+interface NavItemsContextValue {
+  navItems: NavItemConfig[];
+  setNavItems: (items: NavItemConfig[]) => void;
+  mobileVariant: 'sheet' | 'tabs';
+}
+
+export const NavItemsContext = createContext<NavItemsContextValue>({
+  navItems: [],
+  setNavItems: () => {},
+  mobileVariant: 'sheet',
+});
+
+export function useNavItemsContext(): NavItemsContextValue {
+  return useContext(NavItemsContext);
+}

package/src/components/navigation/shells/TabsMobileShell.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { ReactNode, useRef, useEffect } from 'react';
+import { AppNavigationContext } from '../AppNavigationContext';
+import { useNavItemsContext } from '../NavItemsContext';
+
+function InternalTabsBar() {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef<HTMLDivElement>(null);
+  const activeTabRef = useRef<HTMLButtonElement>(null);
+
+  const activeLabel = navItems.find((i) => i.isActive)?.label;
+
+  // Scroll active tab into center when active item changes
+  useEffect(() => {
+    if (activeTabRef.current && tabsListRef.current) {
+      const tabsList = tabsListRef.current;
+      const activeTabElement = activeTabRef.current;
+      const tabsListRect = tabsList.getBoundingClientRect();
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const scrollLeft =
+        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
+      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });
+    }
+  }, [activeLabel]);
+
+  if (!navItems.length) return null;
+
+  return (
+    <div
+      ref={tabsListRef}
+      className="md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide"
+    >
+      {navItems.map((item) => (
+        <button
+          key={item.label}
+          ref={item.isActive ? activeTabRef : undefined}
+          onClick={item.onClick}
+          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${
+            item.isActive
+              ? 'border-gray-950 text-gray-950'
+              : 'border-transparent text-gray-500 hover:text-gray-900'
+          }`}
+        >
+          {item.icon && <item.icon size={16} className="shrink-0" />}
+          <span
+            className={
+              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'
+            }
+          >
+            {item.label}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+export function TabsMobileShell({ children }: { children: ReactNode }) {
+  return (
+    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>
+      {/*
+        Children are hidden visually, but NavItems' useEffect still fires inside
+        display:none — React effects are tied to commit phase, not layout visibility.
+        This registers navItems in NavItemsContext so InternalTabsBar can read them.
+      */}
+      <div className="hidden">{children}</div>
+      <InternalTabsBar />
+    </AppNavigationContext.Provider>
+  );
+}

package/src/components/navigation/subcomponents/NavItems.tsx

@@ -1,7 +1,8 @@
 'use client';
 
-import { ElementType } from 'react';
+import { ElementType, useEffect } from 'react';
 import { NavItem } from '../NavItem';
+import { useNavItemsContext } from '../NavItemsContext';
 
 export interface NavItemConfig {
   label: string;
@@ -15,6 +16,12 @@ interface NavItemsProps {
 }
 
 export function NavItems({ items }: NavItemsProps) {
+  const { setNavItems } = useNavItemsContext();
+
+  useEffect(() => {
+    setNavItems(items);
+  }, [items, setNavItems]);
+
   return (
     <div className="flex flex-col">
       {items.map((item) => (