@greatapps/common 1.1.429 → 1.1.430

package/dist/components/layouts/AppNavBar.mjs

@@ -0,0 +1,37 @@
+"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";
+function AppNavBar({
+  onLogoClick,
+  activeApp,
+  appIconHref = "/",
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onNotificationsViewAll
+}) {
+  const router = useRouter();
+  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, { menuItems })
+      ]
+    }
+  );
+}
+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 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  onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  activeApp,\n  appIconHref = \"/\",\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onNotificationsViewAll,\n}: AppNavBarProps) {\n  const router = useRouter();\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 menuItems={menuItems} />\n    </NavBar>\n  );\n}\n"],"mappings":";AAkCI,SAOE,KAPF;AAhCJ,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AAc9B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AAEzB,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,oBAAC,kBAAe,WAAsB;AAAA;AAAA;AAAA,EACxC;AAEJ;","names":[]}

package/dist/components/layouts/CollapsibleSidebar.mjs

@@ -0,0 +1,65 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconChevronLeft } from "@tabler/icons-react";
+import { useMdSidebarStore } from "../../store/useMdSidebarStore";
+import { cn } from "../../infra/utils/clsx";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+function CollapsibleSidebar({
+  backdropClassName,
+  panelClassName,
+  dataSlot,
+  className,
+  children,
+  ...props
+}) {
+  const { isExpanded, collapse } = useMdSidebarStore();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 bg-black/50 z-20 transition-opacity duration-300",
+          isExpanded ? "opacity-100" : "opacity-0 pointer-events-none",
+          backdropClassName
+        ),
+        onClick: collapse
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "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",
+          panelClassName
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": dataSlot,
+            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(IconChevronLeft, { size: 16, className: "text-gray-500" })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Recolher menu" })
+              ] }),
+              children
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  CollapsibleSidebar
+};
+//# sourceMappingURL=CollapsibleSidebar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/CollapsibleSidebar.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\ninterface CollapsibleSidebarProps extends React.ComponentProps<\"div\"> {\n    backdropClassName: string;\n    panelClassName: string;\n    dataSlot: string;\n}\n\nfunction CollapsibleSidebar({\n    backdropClassName,\n    panelClassName,\n    dataSlot,\n    className,\n    children,\n    ...props\n}: CollapsibleSidebarProps) {\n    const { isExpanded, collapse } = useMdSidebarStore()\n\n    return (\n        <>\n            <div\n                className={cn(\n                    \"fixed inset-0 bg-black/50 z-20 transition-opacity duration-300\",\n                    isExpanded ? \"opacity-100\" : \"opacity-0 pointer-events-none\",\n                    backdropClassName,\n                )}\n                onClick={collapse}\n            />\n            <div\n                className={cn(\n                    \"fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible\",\n                    isExpanded ? \"translate-x-0\" : \"-translate-x-full\",\n                    panelClassName,\n                )}\n            >\n                <div\n                    data-slot={dataSlot}\n                    className={cn(\"relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200\", className)}\n                    {...props}\n                >\n                    {isExpanded && (\n                        <Tooltip>\n                            <TooltipTrigger asChild>\n                                <button\n                                    onClick={collapse}\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\"\n                                >\n                                    <IconChevronLeft size={16} className=\"text-gray-500\" />\n                                </button>\n                            </TooltipTrigger>\n                            <TooltipContent side=\"right\">Recolher menu</TooltipContent>\n                        </Tooltip>\n                    )}\n                    {children}\n                </div>\n            </div>\n        </>\n    )\n}\n\nexport { CollapsibleSidebar };\n"],"mappings":";AAyBQ,mBACI,KAqBY,YAtBhB;AAtBR,SAAS,uBAAuB;AAChC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AAQxD,SAAS,mBAAmB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAA4B;AACxB,QAAM,EAAE,YAAY,SAAS,IAAI,kBAAkB;AAEnD,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,aAAa,gBAAgB;AAAA,UAC7B;AAAA,QACJ;AAAA,QACA,SAAS;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW;AAAA,UACP;AAAA,UACA,aAAa,kBAAkB;AAAA,UAC/B;AAAA,QACJ;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,aAAW;AAAA,YACX,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,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,gBACzD,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/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 { IconChevronLeft } from "@tabler/icons-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-[60px] -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(IconChevronLeft, { 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\"\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction MdSideBarNavigation({\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\">) {\n    const { isExpanded, collapse } = useMdSidebarStore()\n\n    return (\n        <>\n            <div\n                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${\n                    isExpanded ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\n                }`}\n                onClick={collapse}\n            />\n            <div\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 ${\n                    isExpanded ? \"translate-x-0\" : \"-translate-x-full\"\n                }`}\n            >\n                <div\n                    data-slot=\"md-sidebar-navigation\"\n                    className={cn(\"relative w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200\", className)}\n                    {...props}\n                >\n                    {isExpanded && (\n                        <Tooltip>\n                            <TooltipTrigger asChild>\n                                <button\n                                    onClick={collapse}\n                                    className=\"absolute top-[60px] -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\"\n                                >\n                                    <IconChevronLeft size={16} className=\"text-gray-500\" />\n                                </button>\n                            </TooltipTrigger>\n                            <TooltipContent side=\"right\">Recolher menu</TooltipContent>\n                        </Tooltip>\n                    )}\n                    {children}\n                </div>\n            </div>\n        </>\n    )\n}\n\nexport { MdSideBarNavigation };\n"],"mappings":";AAkBQ,mBACI,KAiBY,YAlBhB;AAbR,SAAS,uBAAuB;AAChC,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,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,gBACzD,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,152 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { useDesktopSidebarStore, useDesktopSidebarHydration } from "../../store/useDesktopSidebarStore";
+import { useWhitelabel } from "../../providers/whitelabel.provider";
+import { cn } from "../../infra/utils/clsx";
+function NavBar({
+  onLogoClick,
+  onAppIconClick,
+  activeApp,
+  showExpandButton = false,
+  onExpandClick,
+  children,
+  className
+}) {
+  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } = useDesktopSidebarStore();
+  useDesktopSidebarHydration();
+  const { whitelabel } = useWhitelabel();
+  const isDefaultWl = !whitelabel || whitelabel.id === 1;
+  const primaryColor = whitelabel?.general?.primary_color;
+  const wlName = whitelabel?.name || "Great";
+  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: isDefaultWl ? /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: "/icons/great-icon.svg",
+                      alt: "Great Icon",
+                      width: 28,
+                      height: 28
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn("size-10 rounded-lg flex items-center justify-center transition-opacity duration-300", activeApp !== "gapps" && "opacity-20"),
+                      style: { backgroundColor: primaryColor },
+                      children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                        /* @__PURE__ */ jsx("path", { d: "M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" }),
+                        /* @__PURE__ */ jsx("path", { d: "M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" }),
+                        /* @__PURE__ */ jsx("path", { d: "M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" }),
+                        /* @__PURE__ */ jsx("path", { d: "M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4" })
+                      ] })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: wlName })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                  isDefaultWl ? "bg-gray-950" : "",
+                  activeApp === "gapps" ? "opacity-100" : "opacity-0"
+                ),
+                style: !isDefaultWl ? { backgroundColor: primaryColor } : void 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: "hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 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(IconChevronRight, { size: 16, className: "text-gray-500" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+            ] }),
+            !isDesktopExpanded && /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: toggleDesktop,
+                  className: "hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 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(IconChevronRight, { size: 16, className: "text-gray-500" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: onAppIconClick, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300",
+                    activeApp === "gpages" ? isDefaultWl ? "bg-cyan-100 border-white ring-cyan-300" : "border-white ring-transparent" : isDefaultWl ? "hover:bg-gray-100 border-transparent ring-transparent" : "border-transparent ring-transparent"
+                  ),
+                  style: !isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === "gpages" ? `0 0 0 2px ${primaryColor}40` : void 0, opacity: activeApp !== "gpages" ? 0.2 : void 0 } : void 0,
+                  children: isDefaultWl ? /* @__PURE__ */ jsx(
+                    Image,
+                    {
+                      src: "/icons/icon-navbar.svg",
+                      alt: "GreatPages",
+                      width: 24,
+                      height: 24
+                    }
+                  ) : /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M4 8h16" }),
+                    /* @__PURE__ */ jsx("path", { d: "M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" }),
+                    /* @__PURE__ */ jsx("path", { d: "M8 4v4" })
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: isDefaultWl ? "GreatPages" : "P\xE1ginas" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300",
+                  isDefaultWl ? "bg-cyan-300" : "",
+                  activeApp === "gpages" ? "opacity-100" : "opacity-0"
+                ),
+                style: !isDefaultWl ? { backgroundColor: primaryColor } : void 0
+              }
+            )
+          ] })
+        ] }),
+        /* @__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 { IconChevronRight } from \"@tabler/icons-react\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\";\nimport { useDesktopSidebarStore, useDesktopSidebarHydration } from \"../../store/useDesktopSidebarStore\";\nimport { useWhitelabel } from \"../../providers/whitelabel.provider\";\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  const { isExpanded: isDesktopExpanded, toggle: toggleDesktop } =\n    useDesktopSidebarStore();\n  useDesktopSidebarHydration();\n  const { whitelabel } = useWhitelabel();\n  const isDefaultWl = !whitelabel || whitelabel.id === 1;\n  const primaryColor = whitelabel?.general?.primary_color;\n  const wlName = whitelabel?.name || 'Great';\n\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              {isDefaultWl ? (\n                <Image\n                  src=\"/icons/great-icon.svg\"\n                  alt=\"Great Icon\"\n                  width={28}\n                  height={28}\n                />\n              ) : (\n                <div\n                  className={cn(\"size-10 rounded-lg flex items-center justify-center transition-opacity duration-300\", activeApp !== \"gapps\" && \"opacity-20\")}\n                  style={{ backgroundColor: primaryColor }}\n                >\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M4 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                    <path d=\"M14 15a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1l0 -4\" />\n                  </svg>\n                </div>\n              )}\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{wlName}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-[22px] top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-gray-950\" : \"\",\n              activeApp === \"gapps\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\n        </div>\n\n        <div className=\"relative w-full mt-[7.5px]\">\n          <Separator />\n          {/* Md expand button */}\n          {showExpandButton && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={onExpandClick}\n                  className=\"hidden md:flex lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight size={16} className=\"text-gray-500\" />\n                </button>\n              </TooltipTrigger>\n              <TooltipContent side=\"right\">Expandir menu</TooltipContent>\n            </Tooltip>\n          )}\n          {/* Desktop expand button */}\n          {!isDesktopExpanded && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <button\n                  onClick={toggleDesktop}\n                  className=\"hidden lg:flex absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\n                >\n                  <IconChevronRight 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=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={onAppIconClick}>\n              <div\n                className={cn(\n                  \"size-10 rounded-lg cursor-pointer flex items-center justify-center border-2 ring-2 transition-colors duration-300\",\n                  activeApp === \"gpages\"\n                    ? isDefaultWl\n                      ? \"bg-cyan-100 border-white ring-cyan-300\"\n                      : \"border-white ring-transparent\"\n                    : isDefaultWl\n                      ? \"hover:bg-gray-100 border-transparent ring-transparent\"\n                      : \"border-transparent ring-transparent\",\n                )}\n                style={!isDefaultWl ? { backgroundColor: primaryColor, boxShadow: activeApp === \"gpages\" ? `0 0 0 2px ${primaryColor}40` : undefined, opacity: activeApp !== \"gpages\" ? 0.2 : undefined } : undefined}\n              >\n                {isDefaultWl ? (\n                  <Image\n                    src=\"/icons/icon-navbar.svg\"\n                    alt=\"GreatPages\"\n                    width={24}\n                    height={24}\n                  />\n                ) : (\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                    <path d=\"M4 8h16\" />\n                    <path d=\"M4 6a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12\" />\n                    <path d=\"M8 4v4\" />\n                  </svg>\n                )}\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">{isDefaultWl ? 'GreatPages' : 'Páginas'}</TooltipContent>\n          </Tooltip>\n          <div\n            className={cn(\n              \"absolute -left-4 top-1/2 -translate-y-1/2 z-10 w-[3px] h-5 rounded-r-xl transition-opacity duration-300\",\n              isDefaultWl ? \"bg-cyan-300\" : \"\",\n              activeApp === \"gpages\" ? \"opacity-100\" : \"opacity-0\",\n            )}\n            style={!isDefaultWl ? { backgroundColor: primaryColor } : undefined}\n          />\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":"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","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 { IconBell } from "@tabler/icons-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-cyan-300"
+}) {
+  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(IconBell, { size: 20, className: "text-gray-500" }),
+          totalUnread > 0 && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white",
+                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(IconBell, { 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(IconBell, { 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\";\n\nimport { useState } from \"react\";\nimport { IconBell } from '@tabler/icons-react';\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Button } from \"../ui/buttons/Button\";\nimport NotificationCard from \"../widgets/notifications/NotificationCard\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useMessages, useMarkAllMessagesAsRead } from \"../../modules/users/hooks/messages.hook\";\nimport { formatDistanceToNow } from \"date-fns\";\nimport { ptBR } from \"date-fns/locale\";\n\nexport interface NotificationsPopoverProps {\n  onViewAll?: () => void;\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  badgeClassName?: string;\n}\n\nfunction NotificationsPopover({\n  onViewAll,\n  side,\n  align,\n  contentClassName,\n  badgeClassName = \"bg-cyan-300\",\n}: NotificationsPopoverProps) {\n  const [open, setOpen] = useState(false);\n  const { data: messagesData } = useMessages({ type: 'notification', readed: true, limit: 5 });\n  const { mutate: markAllAsRead } = useMarkAllMessagesAsRead();\n\n  const messages = messagesData?.data ?? [];\n  const totalUnread = messagesData?.totalUnread ?? 0;\n\n  const handleOpenChange = (isOpen: boolean) => {\n    setOpen(isOpen);\n    if (isOpen && totalUnread > 0) {\n      markAllAsRead();\n    }\n  };\n\n  return (\n    <Popover open={open} onOpenChange={handleOpenChange}>\n      <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n        <div\n          className={`relative rounded-full p-2.5 ${open ? \"bg-gray-100\" : \"hover:bg-gray-100\"}`}\n        >\n          <IconBell size={20} className=\"text-gray-500\" />\n          {totalUnread > 0 && (\n            <span\n              className={cn(\n                \"absolute top-0.5 right-0.5 size-3.5 rounded-full border-2 border-white\",\n                badgeClassName,\n              )}\n            />\n          )}\n        </div>\n      </PopoverPrimitive.Trigger>\n      <PopoverPrimitive.Portal>\n        <PopoverPrimitive.Content\n          className={cn(\n            \"absolute bottom-2 left-[26px] z-[9999] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200\",\n            contentClassName,\n          )}\n          side={side}\n          align={align}\n          sideOffset={8}\n        >\n          <span className=\"paragraph-small-semibold text-gray-950 px-4\">\n            Últimas notificações\n          </span>\n\n          {messages.length > 0 ? (\n            messages.map((message, index) => (\n              <NotificationCard\n                key={message.id}\n                icon={<IconBell size={16} />}\n                iconBgColor=\"bg-gray-100\"\n                title={message.subject}\n                time={formatDistanceToNow(new Date(message.datetime_add), {\n                  addSuffix: true,\n                  locale: ptBR,\n                })}\n                gapPx={6}\n                showBorder={index < messages.length - 1}\n              />\n            ))\n          ) : (\n            <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\n              <div className=\"bg-gray-50 rounded-md p-2.5\">\n                <IconBell size={20} color=\"var(--color-gray-950)\" />\n              </div>\n              <span className=\"paragraph-small-medium text-gray-950\">\n                Sem notificações por enquanto\n              </span>\n            </div>\n          )}\n\n          {onViewAll && (\n            <Button\n              variant=\"secondary\"\n              className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\n              onClick={onViewAll}\n            >\n              Todas as notificações\n            </Button>\n          )}\n        </PopoverPrimitive.Content>\n      </PopoverPrimitive.Portal>\n    </Popover>\n  );\n}\n\nexport { NotificationsPopover };\n"],"mappings":";AA6CQ,SAGE,KAHF;AA3CR,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AACzB,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,YAAS,MAAM,IAAI,WAAU,iBAAgB;AAAA,UAC7C,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,YAAS,MAAM,IAAI;AAAA,cAC1B,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,YAAS,MAAM,IAAI,OAAM,yBAAwB,GACpD;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":[]}