@greatapps/common 1.1.322 → 1.1.323

package/dist/components/layouts/ProfilePopover.mjs

@@ -20,10 +20,12 @@ function ProfilePopover({
 }) {
   const { user, logout } = useAuth();
   const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
   const { summary, subscription, isSubscriptionLoading, isCreditsLoading } = useIaCredits();
   const { openModal: openBuyCreditsModal } = useBuyCreditsModal();
   const handleLogout = async () => {
     try {
+      setPopoverOpen(false);
       setIsLoggingOut(true);
       await logout();
     } finally {
@@ -41,7 +43,7 @@ function ProfilePopover({
         message: "Saindo da sua conta..."
       }
     ),
-    /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
       /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { className: "cursor-pointer", children: user && /* @__PURE__ */ jsx(
         UserAvatar,
         {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Progress } from \"../ui/feedback/Progress\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { NavBarItem } from \"./NavBarItem\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\nimport { useAuth } from \"../../providers/auth.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\n\nexport interface ProfileMenuItem {\n  icon?: React.ReactNode;\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ProfilePopoverProps {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  menuItems?: ProfileMenuItem[];\n}\n\nfunction ProfilePopover({\n  side = \"top\",\n  align = \"start\",\n  contentClassName = \"absolute bottom-2 left-[26px]\",\n  menuItems = [],\n}: ProfilePopoverProps) {\n  const { user, logout } = useAuth();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n\n  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\n    useIaCredits();\n  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();\n\n  const handleLogout = async () => {\n    try {\n      setIsLoggingOut(true);\n      await logout();\n    } finally {\n      setIsLoggingOut(false);\n    }\n  };\n\n  const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n  const shouldShowCredits = hasSubscription && subscription.id_wl === 1;\n  const creditsPercentage =\n    shouldShowCredits && summary.totalCredits > 0\n      ? (summary.usedCredits / summary.totalCredits) * 100\n      : 0;\n\n  return (\n    <>\n      <LoadingOverlay\n        isLoading={isLoggingOut}\n        message=\"Saindo da sua conta...\"\n      />\n      <Popover>\n        <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n          {user && (\n            <UserAvatar\n              key={user.id}\n              photo={user.photo}\n              name={user.name}\n              size={40}\n            />\n          )}\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99\",\n              contentClassName,\n            )}\n            side={side}\n            align={align}\n            sideOffset={8}\n          >\n            <div className=\"grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full\">\n              {user && (\n                <UserAvatar\n                  key={user.id}\n                  photo={user.photo}\n                  name={user.name}\n                  size={32}\n                />\n              )}\n\n              <div className=\"flex flex-col gap-0.5 min-w-0\">\n                <span className=\"paragraph-small-semibold text-gray-950 truncate\">\n                  {user?.name || \"\"}\n                </span>\n                <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\n                  {user?.email || \"\"}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\n              {shouldShowCredits && (\n                <div\n                  className={cn(\n                    \"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors\",\n                    \"cursor-pointer hover:bg-gray-900\",\n                  )}\n                  onClick={() => openBuyCreditsModal()}\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"paragraph-xsmall-semibold text-white truncate\">\n                      Créditos usados\n                    </span>\n                    <span className=\"paragraph-xsmall-medium text-white/50\">\n                      {summary.usedCredits.toLocaleString(\"pt-BR\")}/\n                      {summary.totalCredits.toLocaleString(\"pt-BR\")}\n                    </span>\n                  </div>\n                  <Progress\n                    className=\"bg-white/10\"\n                    indicatorColor=\"bg-white\"\n                    value={creditsPercentage}\n                  />\n                </div>\n              )}\n\n              <div className=\"flex flex-col gap-2\">\n                {menuItems.length > 0 && (\n                  <div className=\"flex flex-col\">\n                    {menuItems.map((item, index) => (\n                      <NavBarItem\n                        key={index}\n                        icon={item.icon}\n                        label={item.label}\n                        onClick={item.onClick}\n                      />\n                    ))}\n                  </div>\n                )}\n                <Separator />\n                <NavBarItem label=\"Sair\" onClick={handleLogout} />\n              </div>\n            </div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </Popover>\n    </>\n  );\n}\n\nexport { ProfilePopover };\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { Popover } from \"../ui/overlay/Popover\";\nimport { Progress } from \"../ui/feedback/Progress\";\nimport { Separator } from \"../ui/data-display/Separator\";\nimport { NavBarItem } from \"./NavBarItem\";\nimport { UserAvatar } from \"../ui/data-display/UserAvatar\";\nimport { LoadingOverlay } from \"../ui/feedback/LoadingOverlay\";\nimport { useAuth } from \"../../providers/auth.provider\";\nimport { cn } from \"../../infra/utils/clsx\";\nimport { useIaCredits } from \"../../modules/ia-credits/hooks/ia-credits.hook\";\nimport { useBuyCreditsModal } from \"../../store/useBuyCreditsModal\";\n\nexport interface ProfileMenuItem {\n  icon?: React.ReactNode;\n  label: string;\n  onClick: () => void;\n}\n\nexport interface ProfilePopoverProps {\n  side?: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align?: \"start\" | \"center\" | \"end\";\n  contentClassName?: string;\n  menuItems?: ProfileMenuItem[];\n}\n\nfunction ProfilePopover({\n  side = \"top\",\n  align = \"start\",\n  contentClassName = \"absolute bottom-2 left-[26px]\",\n  menuItems = [],\n}: ProfilePopoverProps) {\n  const { user, logout } = useAuth();\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\n  const [popoverOpen, setPopoverOpen] = useState(false);\n\n  const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =\n    useIaCredits();\n  const { openModal: openBuyCreditsModal } = useBuyCreditsModal();\n\n  const handleLogout = async () => {\n    try {\n      setPopoverOpen(false);\n      setIsLoggingOut(true);\n      await logout();\n    } finally {\n      setIsLoggingOut(false);\n    }\n  };\n\n  const hasSubscription = !isSubscriptionLoading && subscription !== null;\n\n  const shouldShowCredits = hasSubscription && subscription.id_wl === 1;\n  const creditsPercentage =\n    shouldShowCredits && summary.totalCredits > 0\n      ? (summary.usedCredits / summary.totalCredits) * 100\n      : 0;\n\n  return (\n    <>\n      <LoadingOverlay\n        isLoading={isLoggingOut}\n        message=\"Saindo da sua conta...\"\n      />\n      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>\n        <PopoverPrimitive.Trigger className=\"cursor-pointer\">\n          {user && (\n            <UserAvatar\n              key={user.id}\n              photo={user.photo}\n              name={user.name}\n              size={40}\n            />\n          )}\n        </PopoverPrimitive.Trigger>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            className={cn(\n              \"w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99\",\n              contentClassName,\n            )}\n            side={side}\n            align={align}\n            sideOffset={8}\n          >\n            <div className=\"grid grid-cols-[32px_1fr] items-center gap-3 p-3 w-full\">\n              {user && (\n                <UserAvatar\n                  key={user.id}\n                  photo={user.photo}\n                  name={user.name}\n                  size={32}\n                />\n              )}\n\n              <div className=\"flex flex-col gap-0.5 min-w-0\">\n                <span className=\"paragraph-small-semibold text-gray-950 truncate\">\n                  {user?.name || \"\"}\n                </span>\n                <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\n                  {user?.email || \"\"}\n                </span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\n              {shouldShowCredits && (\n                <div\n                  className={cn(\n                    \"flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors\",\n                    \"cursor-pointer hover:bg-gray-900\",\n                  )}\n                  onClick={() => openBuyCreditsModal()}\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className=\"paragraph-xsmall-semibold text-white truncate\">\n                      Créditos usados\n                    </span>\n                    <span className=\"paragraph-xsmall-medium text-white/50\">\n                      {summary.usedCredits.toLocaleString(\"pt-BR\")}/\n                      {summary.totalCredits.toLocaleString(\"pt-BR\")}\n                    </span>\n                  </div>\n                  <Progress\n                    className=\"bg-white/10\"\n                    indicatorColor=\"bg-white\"\n                    value={creditsPercentage}\n                  />\n                </div>\n              )}\n\n              <div className=\"flex flex-col gap-2\">\n                {menuItems.length > 0 && (\n                  <div className=\"flex flex-col\">\n                    {menuItems.map((item, index) => (\n                      <NavBarItem\n                        key={index}\n                        icon={item.icon}\n                        label={item.label}\n                        onClick={item.onClick}\n                      />\n                    ))}\n                  </div>\n                )}\n                <Separator />\n                <NavBarItem label=\"Sair\" onClick={handleLogout} />\n              </div>\n            </div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </Popover>\n    </>\n  );\n}\n\nexport { ProfilePopover };\n"],"mappings":"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","names":[]}

package/dist/components/layouts/SideBarNavigation.mjs

@@ -39,7 +39,7 @@ function SideBarNavigation({
             {
               onClick: collapse,
               className: cn(
-                "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-all duration-300 z-50",
+                "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-all duration-300 z-10",
                 isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none"
               ),
               children: /* @__PURE__ */ jsx(IconChevronLeft, { size: 16, className: "text-gray-500" })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\">) {\n    const { isExpanded, collapse } = useDesktopSidebarStore()\n    const collapseMd = useMdSidebarStore((s) => s.collapse)\n\n    React.useEffect(() => {\n        const mql = window.matchMedia('(min-width: 1351px)')\n        const handler = (e: MediaQueryListEvent) => {\n            if (e.matches) collapseMd()\n        }\n        if (mql.matches) collapseMd()\n        mql.addEventListener('change', handler)\n        return () => mql.removeEventListener('change', handler)\n    }, [collapseMd])\n\n    return (\n        <div\n            data-slot=\"sidebar-navigation\"\n            className={cn(\n                \"relative hidden lg:flex flex-col h-screen border-r border-gray-200 transition-all duration-300 ease-in-out\",\n                isExpanded ? \"w-[273px] p-4\" : \"w-0 p-0 border-r-0 overflow-hidden\",\n                className,\n            )}\n            {...props}\n        >\n            <Tooltip>\n                <TooltipTrigger asChild>\n                    <button\n                        onClick={collapse}\n                        className={cn(\n                            \"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-all duration-300 z-50\",\n                            isExpanded ? \"opacity-100 scale-100\" : \"opacity-0 scale-0 pointer-events-none\",\n                        )}\n                    >\n                        <IconChevronLeft size={16} className=\"text-gray-500\" />\n                    </button>\n                </TooltipTrigger>\n                {isExpanded && <TooltipContent side=\"right\">Recolher menu</TooltipContent>}\n            </Tooltip>\n            {children}\n        </div>\n    )\n}\n\nexport { SideBarNavigation };\n"],"mappings":";AAqCY,SASY,KATZ;AAnCZ,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,kBAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,uBAAuB;AACxD,QAAM,aAAa,kBAAkB,CAAC,MAAM,EAAE,QAAQ;AAEtD,QAAM,UAAU,MAAM;AAClB,UAAM,MAAM,OAAO,WAAW,qBAAqB;AACnD,UAAM,UAAU,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAS,YAAW;AAAA,IAC9B;AACA,QAAI,IAAI,QAAS,YAAW;AAC5B,QAAI,iBAAiB,UAAU,OAAO;AACtC,WAAO,MAAM,IAAI,oBAAoB,UAAU,OAAO;AAAA,EAC1D,GAAG,CAAC,UAAU,CAAC;AAEf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA,aAAa,kBAAkB;AAAA,QAC/B;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAW;AAAA,gBACP;AAAA,gBACA,aAAa,0BAA0B;AAAA,cAC3C;AAAA,cAEA,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACzD,GACJ;AAAA,UACC,cAAc,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC7D;AAAA,QACC;AAAA;AAAA;AAAA,EACL;AAER;","names":[]}
+{"version":3,"sources":["../../../src/components/layouts/SideBarNavigation.tsx"],"sourcesContent":["'use client';\n\nimport * as React from \"react\"\nimport { IconChevronLeft } from '@tabler/icons-react'\nimport { useDesktopSidebarStore } from \"../../store/useDesktopSidebarStore\"\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\nimport { cn } from \"../../infra/utils/clsx\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\n\nfunction SideBarNavigation({\n    className,\n    children,\n    ...props\n}: React.ComponentProps<\"div\">) {\n    const { isExpanded, collapse } = useDesktopSidebarStore()\n    const collapseMd = useMdSidebarStore((s) => s.collapse)\n\n    React.useEffect(() => {\n        const mql = window.matchMedia('(min-width: 1351px)')\n        const handler = (e: MediaQueryListEvent) => {\n            if (e.matches) collapseMd()\n        }\n        if (mql.matches) collapseMd()\n        mql.addEventListener('change', handler)\n        return () => mql.removeEventListener('change', handler)\n    }, [collapseMd])\n\n    return (\n        <div\n            data-slot=\"sidebar-navigation\"\n            className={cn(\n                \"relative hidden lg:flex flex-col h-screen border-r border-gray-200 transition-all duration-300 ease-in-out\",\n                isExpanded ? \"w-[273px] p-4\" : \"w-0 p-0 border-r-0 overflow-hidden\",\n                className,\n            )}\n            {...props}\n        >\n            <Tooltip>\n                <TooltipTrigger asChild>\n                    <button\n                        onClick={collapse}\n                        className={cn(\n                            \"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-all duration-300 z-10\",\n                            isExpanded ? \"opacity-100 scale-100\" : \"opacity-0 scale-0 pointer-events-none\",\n                        )}\n                    >\n                        <IconChevronLeft size={16} className=\"text-gray-500\" />\n                    </button>\n                </TooltipTrigger>\n                {isExpanded && <TooltipContent side=\"right\">Recolher menu</TooltipContent>}\n            </Tooltip>\n            {children}\n        </div>\n    )\n}\n\nexport { SideBarNavigation };\n"],"mappings":";AAqCY,SASY,KATZ;AAnCZ,YAAY,WAAW;AACvB,SAAS,uBAAuB;AAChC,SAAS,8BAA8B;AACvC,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,SAAS,gBAAgB,sBAAsB;AAExD,SAAS,kBAAkB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,uBAAuB;AACxD,QAAM,aAAa,kBAAkB,CAAC,MAAM,EAAE,QAAQ;AAEtD,QAAM,UAAU,MAAM;AAClB,UAAM,MAAM,OAAO,WAAW,qBAAqB;AACnD,UAAM,UAAU,CAAC,MAA2B;AACxC,UAAI,EAAE,QAAS,YAAW;AAAA,IAC9B;AACA,QAAI,IAAI,QAAS,YAAW;AAC5B,QAAI,iBAAiB,UAAU,OAAO;AACtC,WAAO,MAAM,IAAI,oBAAoB,UAAU,OAAO;AAAA,EAC1D,GAAG,CAAC,UAAU,CAAC;AAEf,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA,aAAa,kBAAkB;AAAA,QAC/B;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAW;AAAA,gBACP;AAAA,gBACA,aAAa,0BAA0B;AAAA,cAC3C;AAAA,cAEA,8BAAC,mBAAgB,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACzD,GACJ;AAAA,UACC,cAAc,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC7D;AAAA,QACC;AAAA;AAAA;AAAA,EACL;AAER;","names":[]}

package/dist/components/ui/feedback/LoadingOverlay.mjs

@@ -4,7 +4,7 @@ import Image from "next/image";
 function LoadingOverlay({ isLoading, message, icon }) {
   if (!isLoading) return null;
   const defaultIcon = /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "Great Icon", width: 20, height: 20 });
-  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]", children: [
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-[2px]", children: /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]", children: [
     /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-20 h-20", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-[5px] border-gray-100 rounded-full" }),
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 border-[5px] border-transparent border-t-black rounded-full animate-spin" }),

package/dist/components/ui/feedback/LoadingOverlay.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ui/feedback/LoadingOverlay.tsx"],"sourcesContent":["'use client';\n\nimport Image from 'next/image';\nimport { ReactNode } from 'react';\n\ninterface LoadingOverlayProps {\n  isLoading: boolean;\n  message?: string;\n  icon?: ReactNode;\n}\n\nexport function LoadingOverlay({ isLoading, message, icon }: LoadingOverlayProps) {\n  if (!isLoading) return null;\n\n  const defaultIcon = <Image src=\"/icons/great-icon.svg\" alt=\"Great Icon\" width={20} height={20} />;\n\n  return (\n    <div className=\"fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-[2px]\">\n      <div className=\"bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]\">\n        <div className=\"relative flex items-center justify-center w-20 h-20\">\n          <div className=\"absolute inset-0 border-[5px] border-gray-100 rounded-full\" />\n          <div className=\"absolute inset-0 border-[5px] border-transparent border-t-black rounded-full animate-spin\" />\n          <div className=\"relative z-20 flex items-center justify-center w-14 h-14 bg-gray-100 rounded-full\">\n            {icon ?? defaultIcon}\n          </div>\n        </div>\n        <span className=\"font-bold text-gray-900 text-lg\">{message}</span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAcsB,cAKd,YALc;AAZtB,OAAO,WAAW;AASX,SAAS,eAAe,EAAE,WAAW,SAAS,KAAK,GAAwB;AAChF,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,cAAc,oBAAC,SAAM,KAAI,yBAAwB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAE/F,SACE,oBAAC,SAAI,WAAU,0FACb,+BAAC,SAAI,WAAU,6FACb;AAAA,yBAAC,SAAI,WAAU,uDACb;AAAA,0BAAC,SAAI,WAAU,8DAA6D;AAAA,MAC5E,oBAAC,SAAI,WAAU,6FAA4F;AAAA,MAC3G,oBAAC,SAAI,WAAU,qFACZ,kBAAQ,aACX;AAAA,OACF;AAAA,IACA,oBAAC,UAAK,WAAU,mCAAmC,mBAAQ;AAAA,KAC7D,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/ui/feedback/LoadingOverlay.tsx"],"sourcesContent":["'use client';\n\nimport Image from 'next/image';\nimport { ReactNode } from 'react';\n\ninterface LoadingOverlayProps {\n  isLoading: boolean;\n  message?: string;\n  icon?: ReactNode;\n}\n\nexport function LoadingOverlay({ isLoading, message, icon }: LoadingOverlayProps) {\n  if (!isLoading) return null;\n\n  const defaultIcon = <Image src=\"/icons/great-icon.svg\" alt=\"Great Icon\" width={20} height={20} />;\n\n  return (\n    <div className=\"fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-[2px]\">\n      <div className=\"bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]\">\n        <div className=\"relative flex items-center justify-center w-20 h-20\">\n          <div className=\"absolute inset-0 border-[5px] border-gray-100 rounded-full\" />\n          <div className=\"absolute inset-0 border-[5px] border-transparent border-t-black rounded-full animate-spin\" />\n          <div className=\"relative z-20 flex items-center justify-center w-14 h-14 bg-gray-100 rounded-full\">\n            {icon ?? defaultIcon}\n          </div>\n        </div>\n        <span className=\"font-bold text-gray-900 text-lg\">{message}</span>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAcsB,cAKd,YALc;AAZtB,OAAO,WAAW;AASX,SAAS,eAAe,EAAE,WAAW,SAAS,KAAK,GAAwB;AAChF,MAAI,CAAC,UAAW,QAAO;AAEvB,QAAM,cAAc,oBAAC,SAAM,KAAI,yBAAwB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAE/F,SACE,oBAAC,SAAI,WAAU,2FACb,+BAAC,SAAI,WAAU,6FACb;AAAA,yBAAC,SAAI,WAAU,uDACb;AAAA,0BAAC,SAAI,WAAU,8DAA6D;AAAA,MAC5E,oBAAC,SAAI,WAAU,6FAA4F;AAAA,MAC3G,oBAAC,SAAI,WAAU,qFACZ,kBAAQ,aACX;AAAA,OACF;AAAA,IACA,oBAAC,UAAK,WAAU,mCAAmC,mBAAQ;AAAA,KAC7D,GACF;AAEJ;","names":[]}

package/package.json

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

package/src/components/layouts/ProfilePopover.tsx

@@ -34,6 +34,7 @@ function ProfilePopover({
 }: ProfilePopoverProps) {
   const { user, logout } = useAuth();
   const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const [popoverOpen, setPopoverOpen] = useState(false);
 
   const { summary, subscription, isSubscriptionLoading, isCreditsLoading } =
     useIaCredits();
@@ -41,6 +42,7 @@ function ProfilePopover({
 
   const handleLogout = async () => {
     try {
+      setPopoverOpen(false);
       setIsLoggingOut(true);
       await logout();
     } finally {
@@ -62,7 +64,7 @@ function ProfilePopover({
         isLoading={isLoggingOut}
         message="Saindo da sua conta..."
       />
-      <Popover>
+      <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
         <PopoverPrimitive.Trigger className="cursor-pointer">
           {user && (
             <UserAvatar

package/src/components/layouts/SideBarNavigation.tsx

@@ -40,7 +40,7 @@ function SideBarNavigation({
                     <button
                         onClick={collapse}
                         className={cn(
-                            "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-all duration-300 z-50",
+                            "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-all duration-300 z-10",
                             isExpanded ? "opacity-100 scale-100" : "opacity-0 scale-0 pointer-events-none",
                         )}
                     >

package/src/components/ui/feedback/LoadingOverlay.tsx

@@ -15,7 +15,7 @@ export function LoadingOverlay({ isLoading, message, icon }: LoadingOverlayProps
   const defaultIcon = <Image src="/icons/great-icon.svg" alt="Great Icon" width={20} height={20} />;
 
   return (
-    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-[2px]">
+    <div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/60 backdrop-blur-[2px]">
       <div className="bg-white rounded-2xl shadow-xl px-16 py-12 flex flex-col items-center gap-6 min-w-[380px]">
         <div className="relative flex items-center justify-center w-20 h-20">
           <div className="absolute inset-0 border-[5px] border-gray-100 rounded-full" />