@greatapps/common 1.1.173 → 1.1.174

package/dist/components/layouts/AppNavBar.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRouter } from "next/navigation";
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import { useAccountModals } from "../../store/useAccountModals";
+function AppNavBar({
+  onLogoClick,
+  activeApp,
+  appIconHref = "/",
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  onNotificationsViewAll,
+  logoutRedirect
+}) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
+  const handleAppIconClick = () => router.push(appIconHref);
+  return /* @__PURE__ */ jsxs(
+    NavBar,
+    {
+      onLogoClick: handleLogoClick,
+      onAppIconClick: handleAppIconClick,
+      activeApp,
+      showExpandButton,
+      onExpandClick,
+      children: [
+        /* @__PURE__ */ jsx(NotificationsPopover, { onViewAll: onNotificationsViewAll }),
+        /* @__PURE__ */ jsx(
+          ProfilePopover,
+          {
+            onEditProfile: () => openConfigurations(),
+            onCreditsClick,
+            menuItems,
+            logoutRedirect
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AppNavBar
+};
+//# sourceMappingURL=AppNavBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRouter } from \"next/navigation\";\nimport { NavBar } from \"./NavBar\";\nimport { ProfilePopover } from \"./ProfilePopover\";\nimport { NotificationsPopover } from \"./NotificationsPopover\";\nimport { useAccountModals } from \"../../store/useAccountModals\";\nimport type { ProfileMenuItem } from \"./ProfilePopover\";\n\nexport interface AppNavBarProps {\n  onLogoClick?: () => void;\n  /** Which app is currently active — controls which icon gets the indicator */\n  activeApp?: \"gapps\" | \"gpages\";\n  appIconHref?: string;\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n  onNotificationsViewAll?: () => void;\n  logoutRedirect?: string;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  activeApp,\n  appIconHref = \"/\",\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onCreditsClick,\n  onNotificationsViewAll,\n  logoutRedirect,\n}: AppNavBarProps) {\n  const router = useRouter();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogoClick = onLogoClick ?? (() => router.push(\"/\"));\n  const handleAppIconClick = () => router.push(appIconHref);\n\n  return (\n    <NavBar\n      onLogoClick={handleLogoClick}\n      onAppIconClick={handleAppIconClick}\n      activeApp={activeApp}\n      showExpandButton={showExpandButton}\n      onExpandClick={onExpandClick}\n    >\n      <NotificationsPopover onViewAll={onNotificationsViewAll} />\n      <ProfilePopover\n        onEditProfile={() => openConfigurations()}\n        onCreditsClick={onCreditsClick}\n        menuItems={menuItems}\n        logoutRedirect={logoutRedirect}\n      />\n    </NavBar>\n  );\n}\n"],"mappings":";AAwCI,SAOE,KAPF;AAtCJ,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,wBAAwB;AAgB1B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb,gBAAgB;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,wBAAqB,WAAW,wBAAwB;AAAA,QACzD;AAAA,UAAC;AAAA;AAAA,YACC,eAAe,MAAM,mBAAmB;AAAA,YACxC;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/layouts/MainLayout.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../infra/utils/clsx";
+function MainLayout({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "main-layout",
+      className: cn(
+        "h-dvh md:h-screen lg:h-screen flex flex-col md:flex-row lg:flex-row overflow-visible",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function MainLayoutContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "main-layout-content",
+      className: cn("flex flex-col flex-1 min-h-0 md:overflow-hidden lg:overflow-hidden", className),
+      ...props,
+      children
+    }
+  );
+}
+function MainLayoutSpacer({ className, height, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "main-layout-spacer",
+      className: cn("md:hidden lg:hidden shrink-0", className),
+      style: { height },
+      ...props
+    }
+  );
+}
+function MainLayoutMain({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "main-layout-main",
+      className: cn(
+        "flex-1 min-h-0 overflow-y-auto overscroll-none md:overscroll-auto lg:overscroll-auto bg-(--color-base-light)",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  MainLayout,
+  MainLayoutContent,
+  MainLayoutMain,
+  MainLayoutSpacer
+};
+//# sourceMappingURL=MainLayout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/MainLayout.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\n\r\nfunction MainLayout({ className, children, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"main-layout\"\r\n            className={cn(\r\n                \"h-dvh md:h-screen lg:h-screen flex flex-col md:flex-row lg:flex-row overflow-visible\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction MainLayoutContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"main-layout-content\"\r\n            className={cn(\"flex flex-col flex-1 min-h-0 md:overflow-hidden lg:overflow-hidden\", className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction MainLayoutSpacer({ className, height, ...props }: React.ComponentProps<\"div\"> & { height: string }) {\r\n    return (\r\n        <div\r\n            data-slot=\"main-layout-spacer\"\r\n            className={cn(\"md:hidden lg:hidden shrink-0\", className)}\r\n            style={{ height }}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction MainLayoutMain({ className, children, ...props }: React.ComponentProps<\"main\">) {\r\n    return (\r\n        <main\r\n            data-slot=\"main-layout-main\"\r\n            className={cn(\r\n                \"flex-1 min-h-0 overflow-y-auto overscroll-none md:overscroll-auto lg:overscroll-auto bg-(--color-base-light)\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </main>\r\n    )\r\n}\r\n\r\nexport { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain }\r\n"],"mappings":";AASQ;AAJR,SAAS,UAAU;AAEnB,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,MAAM,GAAgC;AAChF,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;AAEA,SAAS,kBAAkB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAgC;AACvF,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW,GAAG,sEAAsE,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;AAEA,SAAS,iBAAiB,EAAE,WAAW,QAAQ,GAAG,MAAM,GAAqD;AACzG,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACvD,OAAO,EAAE,OAAO;AAAA,MACf,GAAG;AAAA;AAAA,EACR;AAER;AAEA,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,MAAM,GAAiC;AACrF,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;","names":[]}

package/dist/components/layouts/MdSideBarNavigation.mjs

@@ -0,0 +1,54 @@
+"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,
+  ...props
+}) {
+  const { isExpanded, collapse } = useMdSidebarStore();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+        onClick: collapse
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "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__ */ jsxs(
+          "div",
+          {
+            "data-slot": "md-sidebar-navigation",
+            className: cn("relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className),
+            ...props,
+            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
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  MdSideBarNavigation
+};
+//# sourceMappingURL=MdSideBarNavigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/MdSideBarNavigation.tsx"],"sourcesContent":["'use client';\n\n\"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":";AAkBQ,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/layouts/NavBar.mjs

@@ -0,0 +1,132 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { ChevronRight } from "lucide-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+function NavBar({
+  onLogoClick,
+  onAppIconClick,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center mt-[6.5px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(
+                TooltipTrigger,
+                {
+                  className: "cursor-pointer",
+                  asChild: true,
+                  onClick: onLogoClick,
+                  children: /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: "/icons/great-icon.svg",
+                      alt: "Great Icon",
+                      width: 28,
+                      height: 28
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatApps" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+                  activeApp === "gapps" ? "opacity-100" : "opacity-0"
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative w-full mt-[7.5px]", children: [
+            /* @__PURE__ */ jsx(Separator, {}),
+            showExpandButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: onExpandClick,
+                  className: "lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10",
+                  children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "text-gray-500" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: onAppIconClick, children: activeApp === "gpages" ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "size-10 rounded-xl cursor-pointer p-[2px]",
+                  style: {
+                    border: "1.5px solid rgba(153,234,255,0.75)",
+                    background: "white",
+                    boxShadow: "0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "w-full h-full rounded-lg flex items-center justify-center",
+                      style: {
+                        background: "radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)"
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          src: "/icons/icon-navbar.svg",
+                          alt: "GreatPages",
+                          width: 24,
+                          height: 24
+                        }
+                      )
+                    }
+                  )
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/icons/icon-navbar.svg",
+                  alt: "GreatPages",
+                  width: 28,
+                  height: 28
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatPages" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                  activeApp === "gpages" ? "opacity-100" : "opacity-0"
+                ),
+                style: { backgroundColor: "#6ADCFF" }
+              }
+            )
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2", children })
+      ]
+    }
+  );
+}
+export {
+  NavBar
+};
+//# sourceMappingURL=NavBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport Image from \"next/image\";\nimport { ChevronRight } from \"lucide-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { cn } from \"../../infra/utils/clsx\";\n\ntype NavBarProps = {\n  onLogoClick: () => void;\n  onAppIconClick?: () => void;\n  activeApp?: \"gapps\" | \"gpages\";\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction NavBar({\n  onLogoClick,\n  onAppIconClick,\n  activeApp,\n  showExpandButton = false,\n  onExpandClick,\n  children,\n  className,\n}: NavBarProps) {\n  return (\n    <div\n      className={cn(\n        \"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\",\n        className,\n      )}\n    >\n      <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\n        {/* GreatApps logo */}\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger\n              className=\"cursor-pointer\"\n              asChild\n              onClick={onLogoClick}\n            >\n              <Image\n                src=\"/icons/great-icon.svg\"\n                alt=\"Great Icon\"\n                width={28}\n                height={28}\n              />\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">GreatApps</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <ChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n\n        {/* GreatPages icon */}\n        <div className=\"flex flex-col gap-2\">\n          <div className=\"relative\">\n            <Tooltip>\n              <TooltipTrigger asChild onClick={onAppIconClick}>\n                {activeApp === \"gpages\" ? (\n                  <div\n                    className=\"size-10 rounded-xl cursor-pointer p-[2px]\"\n                    style={{\n                      border: \"1.5px solid rgba(153,234,255,0.75)\",\n                      background: \"white\",\n                      boxShadow:\n                        \"0 0 8px rgba(153,234,255,0.5), 0 0 18px rgba(153,234,255,0.2)\",\n                    }}\n                  >\n                    <div\n                      className=\"w-full h-full rounded-lg flex items-center justify-center\"\n                      style={{\n                        background:\n                          \"radial-gradient(circle at center, rgba(255,255,255,0.95) 0%, rgba(153,234,255,0.45) 100%)\",\n                      }}\n                    >\n                      <Image\n                        src=\"/icons/icon-navbar.svg\"\n                        alt=\"GreatPages\"\n                        width={24}\n                        height={24}\n                      />\n                    </div>\n                  </div>\n                ) : (\n                  <div className=\"size-10 flex items-center justify-center rounded-lg cursor-pointer hover:bg-gray-100 transition-colors duration-300\">\n                    <Image\n                      src=\"/icons/icon-navbar.svg\"\n                      alt=\"GreatPages\"\n                      width={28}\n                      height={28}\n                    />\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">GreatPages</TooltipContent>\n            </Tooltip>\n            <div\n              className={cn(\n                \"absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n                activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n              )}\n              style={{ backgroundColor: \"#6ADCFF\" }}\n            />\n          </div>\n        </div>\n      </div>\n\n      <div className=\"flex flex-col items-center gap-2\">{children}</div>\n    </div>\n  );\n}\n\nexport { NavBar };\nexport type { NavBarProps };\n"],"mappings":";AAsCU,SAMI,KANJ;AAnCV,OAAO,WAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAYnB,SAAS,OAAO;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,+CAEb;AAAA,+BAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,SAAO;AAAA,kBACP,SAAS;AAAA,kBAET;AAAA,oBAAC;AAAA;AAAA,sBACC,KAAI;AAAA,sBACJ,KAAI;AAAA,sBACJ,OAAO;AAAA,sBACP,QAAQ;AAAA;AAAA,kBACV;AAAA;AAAA,cACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,uBAAS;AAAA,eACxC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,UAAU,gBAAgB;AAAA,gBAC1C;AAAA;AAAA,YACF;AAAA,aACF;AAAA,UAEA,qBAAC,SAAI,WAAU,8BACb;AAAA,gCAAC,aAAU;AAAA,YACV,oBACC,qBAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MACrB;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS;AAAA,kBACT,WAAU;AAAA,kBAEV,8BAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,cACpD,GACF;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,eAC5C;AAAA,aAEJ;AAAA,UAGA,oBAAC,SAAI,WAAU,uBACb,+BAAC,SAAI,WAAU,YACb;AAAA,iCAAC,WACC;AAAA,kCAAC,kBAAe,SAAO,MAAC,SAAS,gBAC9B,wBAAc,WACb;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO;AAAA,oBACL,QAAQ;AAAA,oBACR,YAAY;AAAA,oBACZ,WACE;AAAA,kBACJ;AAAA,kBAEA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO;AAAA,wBACL,YACE;AAAA,sBACJ;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,KAAI;AAAA,0BACJ,KAAI;AAAA,0BACJ,OAAO;AAAA,0BACP,QAAQ;AAAA;AAAA,sBACV;AAAA;AAAA,kBACF;AAAA;AAAA,cACF,IAEA,oBAAC,SAAI,WAAU,uHACb;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAI;AAAA,kBACJ,KAAI;AAAA,kBACJ,OAAO;AAAA,kBACP,QAAQ;AAAA;AAAA,cACV,GACF,GAEJ;AAAA,cACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,eACzC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,WAAW,gBAAgB;AAAA,gBAC3C;AAAA,gBACA,OAAO,EAAE,iBAAiB,UAAU;AAAA;AAAA,YACtC;AAAA,aACF,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,oCAAoC,UAAS;AAAA;AAAA;AAAA,EAC9D;AAEJ;","names":[]}

package/dist/components/layouts/NavBarItem.mjs

@@ -0,0 +1,23 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../infra/utils/clsx";
+function NavBarItem({ icon, label, onClick, className, labelClassName }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-lg flex items-center gap-2 px-2 py-2 h-10 cursor-pointer transition-colors bg-white hover:bg-gray-100 active:bg-gray-50",
+        className
+      ),
+      onClick,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium text-gray-950", labelClassName), children: label })
+      ]
+    }
+  );
+}
+export {
+  NavBarItem
+};
+//# sourceMappingURL=NavBarItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/NavBarItem.tsx"],"sourcesContent":["'use client';\n\n\"use client\"\r\n\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\ntype NavBarItemProps = {\r\n  icon?: React.ReactNode;\r\n  label: string;\r\n  onClick: () => void;\r\n  className?: string;\r\n  labelClassName?: string;\r\n}\r\n\r\nfunction NavBarItem({ icon, label, onClick, className, labelClassName }: NavBarItemProps) {\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'rounded-lg flex items-center gap-2 px-2 py-2 h-10 cursor-pointer transition-colors bg-white hover:bg-gray-100 active:bg-gray-50',\r\n        className\r\n      )}\r\n      onClick={onClick}\r\n    >\r\n      {icon}\r\n      <span className={cn('text-sm font-medium text-gray-950', labelClassName)}>{label}</span>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { NavBarItem };\r\nexport type { NavBarItemProps };\r\n"],"mappings":";AAgBI,SAQE,KARF;AAZJ,SAAS,UAAU;AAUnB,SAAS,WAAW,EAAE,MAAM,OAAO,SAAS,WAAW,eAAe,GAAoB;AACxF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,QACD,oBAAC,UAAK,WAAW,GAAG,qCAAqC,cAAc,GAAI,iBAAM;AAAA;AAAA;AAAA,EACnF;AAEJ;","names":[]}

package/dist/components/layouts/NotificationsPopover.mjs

@@ -0,0 +1,97 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Bell } from "lucide-react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import NotificationCard from "../widgets/notifications/NotificationCard";
+import { cn } from "../../infra/utils/clsx";
+import { useMessages, useMarkAllMessagesAsRead } from "../../modules/users/hooks/messages.hook";
+import { formatDistanceToNow } from "date-fns";
+import { ptBR } from "date-fns/locale";
+function NotificationsPopover({
+  onViewAll,
+  side,
+  align,
+  contentClassName,
+  badgeClassName = "bg-pages-400"
+}) {
+  const [open, setOpen] = useState(false);
+  const { data: messagesData } = useMessages({ type: "notification", readed: true, limit: 5 });
+  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();
+  const messages = messagesData?.data ?? [];
+  const totalUnread = messagesData?.totalUnread ?? 0;
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen && totalUnread > 0) {
+      markAllAsRead();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-gray-500" }),
+          totalUnread > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute top-2 right-2 size-2.5 rounded-full",
+                badgeClassName
+              )
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+      PopoverPrimitive.Content,
+      {
+        className: cn(
+          "absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200",
+          contentClassName
+        ),
+        side,
+        align,
+        sideOffset: 8,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 px-4", children: "\xDAltimas notifica\xE7\xF5es" }),
+          messages.length > 0 ? messages.map((message, index) => /* @__PURE__ */ jsx(
+            NotificationCard,
+            {
+              icon: /* @__PURE__ */ jsx(Bell, { size: 16 }),
+              iconBgColor: "bg-gray-100",
+              title: message.subject,
+              time: formatDistanceToNow(new Date(message.datetime_add), {
+                addSuffix: true,
+                locale: ptBR
+              }),
+              gapPx: 6,
+              showBorder: index < messages.length - 1
+            },
+            message.id
+          )) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md p-2.5", children: /* @__PURE__ */ jsx(Bell, { size: 20, color: "var(--color-gray-950)" }) }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-950", children: "Sem notifica\xE7\xF5es por enquanto" })
+          ] }),
+          onViewAll && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              className: "h-8! mt-2 mb-4 mx-4 paragraph-small-semibold",
+              onClick: onViewAll,
+              children: "Todas as notifica\xE7\xF5es"
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  NotificationsPopover
+};
+//# sourceMappingURL=NotificationsPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport { Bell } from \"lucide-react\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport { Popover } from \"../ui/overlay/Popover\";\r\nimport { Button } from \"../ui/buttons/Button\";\r\nimport NotificationCard from \"../widgets/notifications/NotificationCard\";\r\nimport { cn } from \"../../infra/utils/clsx\";\r\nimport { useMessages, useMarkAllMessagesAsRead } from \"../../modules/users/hooks/messages.hook\";\r\nimport { formatDistanceToNow } from \"date-fns\";\r\nimport { ptBR } from \"date-fns/locale\";\r\n\r\nexport interface NotificationsPopoverProps {\r\n  onViewAll?: () => void;\r\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\r\n  align?: \"start\" | \"center\" | \"end\";\r\n  contentClassName?: string;\r\n  badgeClassName?: string;\r\n}\r\n\r\nfunction NotificationsPopover({\r\n  onViewAll,\r\n  side,\r\n  align,\r\n  contentClassName,\r\n  badgeClassName = \"bg-pages-400\",\r\n}: NotificationsPopoverProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });\r\n  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();\r\n\r\n  const messages = messagesData?.data ?? [];\r\n  const totalUnread = messagesData?.totalUnread ?? 0;\r\n\r\n  const handleOpenChange = (isOpen: boolean) => {\r\n    setOpen(isOpen);\r\n    if (isOpen && totalUnread > 0) {\r\n      markAllAsRead();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Popover open={open} onOpenChange={handleOpenChange}>\r\n      <PopoverPrimitive.Trigger className=\"cursor-pointer\">\r\n        <div\r\n          className={`relative rounded-full p-2.5 ${open ? \"bg-gray-100\" : \"hover:bg-gray-100\"}`}\r\n        >\r\n          <Bell size={20} className=\"text-gray-500\" />\r\n          {totalUnread > 0 && (\r\n            <span\r\n              className={cn(\r\n                \"absolute top-2 right-2 size-2.5 rounded-full\",\r\n                badgeClassName,\r\n              )}\r\n            />\r\n          )}\r\n        </div>\r\n      </PopoverPrimitive.Trigger>\r\n      <PopoverPrimitive.Portal>\r\n        <PopoverPrimitive.Content\r\n          className={cn(\r\n            \"absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200\",\r\n            contentClassName,\r\n          )}\r\n          side={side}\r\n          align={align}\r\n          sideOffset={8}\r\n        >\r\n          <span className=\"paragraph-small-semibold text-gray-950 px-4\">\r\n            Últimas notificações\r\n          </span>\r\n\r\n          {messages.length > 0 ? (\r\n            messages.map((message, index) => (\r\n              <NotificationCard\r\n                key={message.id}\r\n                icon={<Bell size={16} />}\r\n                iconBgColor=\"bg-gray-100\"\r\n                title={message.subject}\r\n                time={formatDistanceToNow(new Date(message.datetime_add), {\r\n                  addSuffix: true,\r\n                  locale: ptBR,\r\n                })}\r\n                gapPx={6}\r\n                showBorder={index < messages.length - 1}\r\n              />\r\n            ))\r\n          ) : (\r\n            <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\r\n              <div className=\"bg-gray-50 rounded-md p-2.5\">\r\n                <Bell size={20} color=\"var(--color-gray-950)\" />\r\n              </div>\r\n              <span className=\"paragraph-small-medium text-gray-950\">\r\n                Sem notificações por enquanto\r\n              </span>\r\n            </div>\r\n          )}\r\n\r\n          {onViewAll && (\r\n            <Button\r\n              variant=\"secondary\"\r\n              className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\r\n              onClick={onViewAll}\r\n            >\r\n              Todas as notificações\r\n            </Button>\r\n          )}\r\n        </PopoverPrimitive.Content>\r\n      </PopoverPrimitive.Portal>\r\n    </Popover>\r\n  );\r\n}\r\n\r\nexport { NotificationsPopover };\r\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,YAAY,sBAAsB;AAClC,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,OAAO,sBAAsB;AAC7B,SAAS,UAAU;AACnB,SAAS,aAAa,gCAAgC;AACtD,SAAS,2BAA2B;AACpC,SAAS,YAAY;AAUrB,SAAS,qBAAqB;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,EAAE,MAAM,aAAa,IAAI,YAAY,EAAE,MAAM,gBAAgB,QAAQ,MAAM,OAAO,EAAE,CAAC;AAC3F,QAAM,EAAE,QAAQ,cAAc,IAAI,yBAAyB;AAE3D,QAAM,WAAW,cAAc,QAAQ,CAAC;AACxC,QAAM,cAAc,cAAc,eAAe;AAEjD,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,UAAU,cAAc,GAAG;AAC7B,oBAAc;AAAA,IAChB;AAAA,EACF;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,iBAAiB,SAAjB,EAAyB,WAAU,kBAClC;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,iBAAgB;AAAA,UACzC,cAAc,KACb;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,IACA,oBAAC,iBAAiB,QAAjB,EACC;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAE9D;AAAA,UAEC,SAAS,SAAS,IACjB,SAAS,IAAI,CAAC,SAAS,UACrB;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,oBAAC,QAAK,MAAM,IAAI;AAAA,cACtB,aAAY;AAAA,cACZ,OAAO,QAAQ;AAAA,cACf,MAAM,oBAAoB,IAAI,KAAK,QAAQ,YAAY,GAAG;AAAA,gBACxD,WAAW;AAAA,gBACX,QAAQ;AAAA,cACV,CAAC;AAAA,cACD,OAAO;AAAA,cACP,YAAY,QAAQ,SAAS,SAAS;AAAA;AAAA,YATjC,QAAQ;AAAA,UAUf,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,QAAK,MAAM,IAAI,OAAM,yBAAwB,GAChD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAEvD;AAAA,aACF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/layouts/ProfilePopover.mjs

@@ -0,0 +1,149 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Popover } from "../ui/overlay/Popover";
+import { Progress } from "../ui/feedback/Progress";
+import { Separator } from "../ui/data-display/Separator";
+import { Settings } from "lucide-react";
+import { NavBarItem } from "./NavBarItem";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { LoadingOverlay } from "../ui/feedback/LoadingOverlay";
+import { useAuth } from "../../providers/auth.provider";
+import { cn } from "../../infra/utils/clsx";
+import { useIaCredits } from "../../modules/ia-credits/hooks/ia-credits.hook";
+function ProfilePopover({
+  side = "top",
+  align = "start",
+  contentClassName = "absolute bottom-2 left-[26px]",
+  onEditProfile,
+  onCreditsClick,
+  menuItems = [],
+  logoutRedirect = "/login"
+}) {
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } = useIaCredits();
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await logout();
+    } finally {
+      setIsLoggingOut(false);
+      if (logoutRedirect !== "/login") {
+        router.push(logoutRedirect);
+      }
+    }
+  };
+  const hasSubscription = !isSubscriptionLoading && subscription !== null;
+  const showCreditsSkeleton = hasSubscription && isCreditsLoading;
+  const showCredits = hasSubscription && !isCreditsLoading;
+  const creditsPercentage = showCredits && summary.totalCredits > 0 ? summary.usedCredits / summary.totalCredits * 100 : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(LoadingOverlay, { isLoading: isLoggingOut, message: "Saindo da sua conta..." }),
+    /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: user && /* @__PURE__ */ jsx(
+        UserAvatar,
+        {
+          photo: user.photo,
+          name: user.name,
+          size: 40
+        },
+        user.id
+      ) }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+        PopoverPrimitive.Content,
+        {
+          className: cn(
+            "w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99",
+            contentClassName
+          ),
+          side,
+          align,
+          sideOffset: 8,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full", children: [
+              user && /* @__PURE__ */ jsx(
+                UserAvatar,
+                {
+                  photo: user.photo,
+                  name: user.name,
+                  size: 32
+                },
+                user.id
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [
+                /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950 truncate", children: user?.name || "" }),
+                /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-gray-500 truncate", children: user?.email || "" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5", children: [
+              showCreditsSkeleton && /* @__PURE__ */ jsxs("div", { className: "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white truncate", children: "Cr\xE9ditos usados" }),
+                  /* @__PURE__ */ jsx("div", { className: "skeleton h-3.5 w-16 rounded" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "skeleton h-1.5 w-full rounded-full" })
+              ] }),
+              showCredits && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors",
+                    onCreditsClick && "cursor-pointer hover:bg-gray-900"
+                  ),
+                  onClick: onCreditsClick,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white truncate", children: "Cr\xE9ditos usados" }),
+                      /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-white/50", children: [
+                        summary.usedCredits.toLocaleString("pt-BR"),
+                        "/",
+                        summary.totalCredits.toLocaleString("pt-BR")
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Progress,
+                      {
+                        className: "bg-white/10",
+                        indicatorColor: "bg-white",
+                        value: creditsPercentage
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+                menuItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: menuItems.map((item, index) => /* @__PURE__ */ jsx(
+                  NavBarItem,
+                  {
+                    icon: item.icon,
+                    label: item.label,
+                    onClick: item.onClick
+                  },
+                  index
+                )) }),
+                onEditProfile && /* @__PURE__ */ jsx(
+                  NavBarItem,
+                  {
+                    icon: /* @__PURE__ */ jsx(Settings, { size: 16 }),
+                    label: "Configura\xE7\xF5es",
+                    onClick: onEditProfile
+                  }
+                ),
+                /* @__PURE__ */ jsx(Separator, {}),
+                /* @__PURE__ */ jsx(NavBarItem, { label: "Sair", onClick: handleLogout })
+              ] })
+            ] })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  ProfilePopover
+};
+//# sourceMappingURL=ProfilePopover.mjs.map