@greatapps/common 1.1.1 → 1.1.2

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\"\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":";AAcI,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/ProfilePopover.mjs

@@ -0,0 +1,141 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import { Progress } from "../ui/feedback/Progress";
+import { Separator } from "../ui/data-display/Separator";
+import { NavBarItem } from "./NavBarItem";
+import { UserAvatar } from "../ui/data-display/UserAvatar";
+import { useAuth } from "../../providers/auth.provider";
+import { cn } from "../../infra/utils/clsx";
+function ProfilePopover({
+  side = "top",
+  align = "start",
+  contentClassName,
+  onEditProfile,
+  credits,
+  onCreditsClick,
+  menuItems = [],
+  logoutRedirect = "/login",
+  storageUrl,
+  logoutOverlay
+}) {
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await logout();
+      router.push(logoutRedirect);
+    } catch (error) {
+      console.error("Erro ao fazer logout:", error);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+  const creditsPercentage = credits && credits.total > 0 ? credits.used / credits.total * 100 : 0;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isLoggingOut && logoutOverlay,
+    /* @__PURE__ */ jsxs(Popover, { children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { className: "cursor-pointer", children: user && /* @__PURE__ */ jsx(
+        UserAvatar,
+        {
+          photo: user.photo,
+          name: user.name,
+          size: 40,
+          storageUrl
+        },
+        user.id
+      ) }),
+      /* @__PURE__ */ jsxs(
+        PopoverContent,
+        {
+          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_auto] items-center gap-3 p-3 w-full", children: [
+              user && /* @__PURE__ */ jsx(
+                UserAvatar,
+                {
+                  photo: user.photo,
+                  name: user.name,
+                  size: 32,
+                  storageUrl
+                },
+                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 || "" })
+              ] }),
+              onEditProfile && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit",
+                  onClick: onEditProfile,
+                  children: "Editar Perfil"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5", children: [
+              credits && /* @__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: [
+                        credits.used.toLocaleString("pt-BR"),
+                        "/",
+                        credits.total.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
+                )) }),
+                /* @__PURE__ */ jsx(Separator, {}),
+                /* @__PURE__ */ jsx(NavBarItem, { label: "Sair", onClick: handleLogout })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ProfilePopover
+};
+//# sourceMappingURL=ProfilePopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/ProfilePopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { useState } from 'react';\r\nimport { useRouter } from 'next/navigation';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Progress } from '../ui/feedback/Progress';\r\nimport { Separator } from '../ui/data-display/Separator';\r\nimport { NavBarItem } from './NavBarItem';\r\nimport { UserAvatar } from '../ui/data-display/UserAvatar';\r\nimport { useAuth } from '../../providers/auth.provider';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface ProfileMenuItem {\r\n  icon?: React.ReactNode;\r\n  label: string;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface ProfilePopoverProps {\r\n  side?: 'top' | 'bottom' | 'left' | 'right';\r\n  align?: 'start' | 'center' | 'end';\r\n  contentClassName?: string;\r\n  onEditProfile?: () => void;\r\n  credits?: { used: number; total: number };\r\n  onCreditsClick?: () => void;\r\n  menuItems?: ProfileMenuItem[];\r\n  logoutRedirect?: string;\r\n  storageUrl?: string;\r\n  logoutOverlay?: React.ReactNode;\r\n}\r\n\r\nfunction ProfilePopover({\r\n  side = 'top',\r\n  align = 'start',\r\n  contentClassName,\r\n  onEditProfile,\r\n  credits,\r\n  onCreditsClick,\r\n  menuItems = [],\r\n  logoutRedirect = '/login',\r\n  storageUrl,\r\n  logoutOverlay,\r\n}: ProfilePopoverProps) {\r\n  const router = useRouter();\r\n  const { user, logout } = useAuth();\r\n  const [isLoggingOut, setIsLoggingOut] = useState(false);\r\n\r\n  const handleLogout = async () => {\r\n    try {\r\n      setIsLoggingOut(true);\r\n      await logout();\r\n      router.push(logoutRedirect);\r\n    } catch (error) {\r\n      console.error('Erro ao fazer logout:', error);\r\n    } finally {\r\n      setIsLoggingOut(false);\r\n    }\r\n  };\r\n\r\n  const creditsPercentage =\r\n    credits && credits.total > 0\r\n      ? (credits.used / credits.total) * 100\r\n      : 0;\r\n\r\n  return (\r\n    <>\r\n      {isLoggingOut && logoutOverlay}\r\n      <Popover>\r\n        <PopoverTrigger className=\"cursor-pointer\">\r\n          {user && (\r\n            <UserAvatar\r\n              key={user.id}\r\n              photo={user.photo}\r\n              name={user.name}\r\n              size={40}\r\n              storageUrl={storageUrl}\r\n            />\r\n          )}\r\n        </PopoverTrigger>\r\n\r\n        <PopoverContent\r\n          className={cn(\r\n            'w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99',\r\n            contentClassName\r\n          )}\r\n          side={side}\r\n          align={align}\r\n          sideOffset={8}\r\n        >\r\n          <div className=\"grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full\">\r\n            {user && (\r\n              <UserAvatar\r\n                key={user.id}\r\n                photo={user.photo}\r\n                name={user.name}\r\n                size={32}\r\n                storageUrl={storageUrl}\r\n              />\r\n            )}\r\n\r\n            <div className=\"flex flex-col gap-0.5 min-w-0\">\r\n              <span className=\"paragraph-small-semibold text-gray-950 truncate\">\r\n                {user?.name || ''}\r\n              </span>\r\n              <span className=\"paragraph-xsmall-medium text-gray-500 truncate\">\r\n                {user?.email || ''}\r\n              </span>\r\n            </div>\r\n\r\n            {onEditProfile && (\r\n              <Button\r\n                variant=\"secondary\"\r\n                className=\"paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit\"\r\n                onClick={onEditProfile}\r\n              >\r\n                Editar Perfil\r\n              </Button>\r\n            )}\r\n          </div>\r\n\r\n          <div className=\"flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5\">\r\n            {credits && (\r\n              <div\r\n                className={cn(\r\n                  'flex flex-col bg-gray-950 rounded-lg gap-4 w-full p-4 transition-colors',\r\n                  onCreditsClick && 'cursor-pointer hover:bg-gray-900'\r\n                )}\r\n                onClick={onCreditsClick}\r\n              >\r\n                <div className=\"flex items-center justify-between gap-2\">\r\n                  <span className=\"paragraph-xsmall-semibold text-white truncate\">\r\n                    Créditos usados\r\n                  </span>\r\n                  <span className=\"paragraph-xsmall-medium text-white/50\">\r\n                    {credits.used.toLocaleString('pt-BR')}/\r\n                    {credits.total.toLocaleString('pt-BR')}\r\n                  </span>\r\n                </div>\r\n                <Progress\r\n                  className=\"bg-white/10\"\r\n                  indicatorColor=\"bg-white\"\r\n                  value={creditsPercentage}\r\n                />\r\n              </div>\r\n            )}\r\n\r\n            <div className=\"flex flex-col gap-2\">\r\n              {menuItems.length > 0 && (\r\n                <div className=\"flex flex-col\">\r\n                  {menuItems.map((item, index) => (\r\n                    <NavBarItem\r\n                      key={index}\r\n                      icon={item.icon}\r\n                      label={item.label}\r\n                      onClick={item.onClick}\r\n                    />\r\n                  ))}\r\n                </div>\r\n              )}\r\n              <Separator />\r\n              <NavBarItem label=\"Sair\" onClick={handleLogout} />\r\n            </div>\r\n          </div>\r\n        </PopoverContent>\r\n      </Popover>\r\n    </>\r\n  );\r\n}\r\n\r\nexport { ProfilePopover };\r\n"],"mappings":"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","names":[]}

package/dist/components/ui/data-display/UserAvatar.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Image from "next/image";
+import { cn } from "../../../infra/utils/clsx";
+function getInitials(name, maxLength = 2) {
+  return name.split(" ").map((n) => n[0]).join("").slice(0, maxLength).toUpperCase();
+}
+function UserAvatar({
+  photo,
+  name,
+  initials,
+  size = 32,
+  shape = "circle",
+  className,
+  storageUrl
+}) {
+  const shapeClass = shape === "circle" ? "rounded-full" : "rounded-lg";
+  const displayInitials = initials || (name ? getInitials(name) : "?");
+  const photoUrl = storageUrl && photo ? `${storageUrl}/${photo}` : photo;
+  if (photoUrl) {
+    return /* @__PURE__ */ jsx(
+      Image,
+      {
+        alt: name || "imagem do usuario",
+        src: photoUrl,
+        width: size,
+        height: size,
+        className: cn("object-cover shrink-0", shapeClass, className),
+        style: { width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center shrink-0 bg-gray-100",
+        shapeClass,
+        className
+      ),
+      style: { width: size, height: size },
+      children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-gray-700", children: displayInitials })
+    }
+  );
+}
+export {
+  UserAvatar
+};
+//# sourceMappingURL=UserAvatar.mjs.map

package/dist/components/ui/data-display/UserAvatar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ui/data-display/UserAvatar.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport Image from 'next/image';\r\nimport { cn } from '../../../infra/utils/clsx';\r\n\r\nfunction getInitials(name: string, maxLength: number = 2): string {\r\n  return name\r\n    .split(' ')\r\n    .map((n) => n[0])\r\n    .join('')\r\n    .slice(0, maxLength)\r\n    .toUpperCase();\r\n}\r\n\r\ninterface UserAvatarProps {\r\n  photo?: string | null;\r\n  name?: string;\r\n  initials?: string;\r\n  size?: number;\r\n  shape?: 'circle' | 'square';\r\n  className?: string;\r\n  storageUrl?: string;\r\n}\r\n\r\nfunction UserAvatar({\r\n  photo,\r\n  name,\r\n  initials,\r\n  size = 32,\r\n  shape = 'circle',\r\n  className,\r\n  storageUrl,\r\n}: UserAvatarProps) {\r\n  const shapeClass = shape === 'circle' ? 'rounded-full' : 'rounded-lg';\r\n  const displayInitials = initials || (name ? getInitials(name) : '?');\r\n\r\n  const photoUrl = storageUrl && photo ? `${storageUrl}/${photo}` : photo;\r\n\r\n  if (photoUrl) {\r\n    return (\r\n      <Image\r\n        alt={name || 'imagem do usuario'}\r\n        src={photoUrl}\r\n        width={size}\r\n        height={size}\r\n        className={cn('object-cover shrink-0', shapeClass, className)}\r\n        style={{ width: size, height: size }}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'flex items-center justify-center shrink-0 bg-gray-100',\r\n        shapeClass,\r\n        className\r\n      )}\r\n      style={{ width: size, height: size }}\r\n    >\r\n      <span className=\"text-xs font-semibold text-gray-700\">{displayInitials}</span>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport { UserAvatar };\r\nexport type { UserAvatarProps };\r\n"],"mappings":";AAwCM;AAtCN,OAAO,WAAW;AAClB,SAAS,UAAU;AAEnB,SAAS,YAAY,MAAc,YAAoB,GAAW;AAChE,SAAO,KACJ,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE,EACP,MAAM,GAAG,SAAS,EAClB,YAAY;AACjB;AAYA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,aAAa,UAAU,WAAW,iBAAiB;AACzD,QAAM,kBAAkB,aAAa,OAAO,YAAY,IAAI,IAAI;AAEhE,QAAM,WAAW,cAAc,QAAQ,GAAG,UAAU,IAAI,KAAK,KAAK;AAElE,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,QAAQ;AAAA,QACb,KAAK;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,WAAW,GAAG,yBAAyB,YAAY,SAAS;AAAA,QAC5D,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA;AAAA,IACrC;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,OAAO,MAAM,QAAQ,KAAK;AAAA,MAEnC,8BAAC,UAAK,WAAU,uCAAuC,2BAAgB;AAAA;AAAA,EACzE;AAEJ;","names":[]}

package/dist/index.mjs

@@ -17,6 +17,9 @@ import { NavBar } from "./components/layouts/NavBar";
 import { SideBarNavigation } from "./components/layouts/SideBarNavigation";
 import { MdSideBarNavigation } from "./components/layouts/MdSideBarNavigation";
 import { NotificationItem } from "./components/layouts/NotificationItem";
+import { ProfilePopover } from "./components/layouts/ProfilePopover";
+import { NavBarItem } from "./components/layouts/NavBarItem";
+import { UserAvatar } from "./components/ui/data-display/UserAvatar";
 import { useMdSidebarStore } from "./store/useMdSidebarStore";
 export {
   MainLayout,
@@ -25,10 +28,13 @@ export {
   MainLayoutSpacer,
   MdSideBarNavigation,
   NavBar,
+  NavBarItem,
   NotificationItem,
+  ProfilePopover,
   QueryProvider,
   SideBarNavigation,
   USER_QUERY_KEY,
+  UserAvatar,
   buildQueryParams,
   cn,
   continueChain,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Types\nexport * from './modules/auth/schema';\nexport * from './modules/users/schema';\nexport * from './modules/whitelabel/schema';\nexport * from './infra/api/types';\n\n// Contexts\nexport * from './providers/query.provider';\nexport * from './providers/auth.provider';\nexport * from './providers/whitelabel.provider';\n\n// Hooks\nexport { useUserQuery, useUserValidateSession, useInvalidateUser, useSetUserData, USER_QUERY_KEY } from './modules/auth/hooks/useUserQuery';\n\n// Providers\nexport { QueryProvider } from './providers/query.provider';\n\n// Middleware\nexport { createAuthMiddleware } from './middlewares/create-auth-middleware';\nexport { createMiddlewareChain } from './middlewares/chain';\nexport { continueChain, stopChain } from './middlewares/types';\nexport type { MiddlewareFunction, MiddlewareConfig, MiddlewareResult } from './middlewares/types';\n\n// Utils\nexport { cn } from './infra/utils/clsx';\nexport { buildQueryParams } from './infra/utils/params';\n\n// Layout\nexport { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain } from './components/layouts/MainLayout';\nexport { NavBar } from './components/layouts/NavBar';\nexport type { NavBarProps } from './components/layouts/NavBar';\nexport { SideBarNavigation } from './components/layouts/SideBarNavigation';\nexport { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';\nexport { NotificationItem } from './components/layouts/NotificationItem';\nexport type { NotificationItemProps } from './components/layouts/NotificationItem';\n\n// Store\nexport { useMdSidebarStore } from './store/useMdSidebarStore';\n"],"mappings":"AACA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,SAAS,cAAc,wBAAwB,mBAAmB,gBAAgB,sBAAsB;AAGxG,SAAS,qBAAqB;AAG9B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AAIzC,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAGjC,SAAS,YAAY,mBAAmB,kBAAkB,sBAAsB;AAChF,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAIjC,SAAS,yBAAyB;","names":[]}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// Types\nexport * from './modules/auth/schema';\nexport * from './modules/users/schema';\nexport * from './modules/whitelabel/schema';\nexport * from './infra/api/types';\n\n// Contexts\nexport * from './providers/query.provider';\nexport * from './providers/auth.provider';\nexport * from './providers/whitelabel.provider';\n\n// Hooks\nexport { useUserQuery, useUserValidateSession, useInvalidateUser, useSetUserData, USER_QUERY_KEY } from './modules/auth/hooks/useUserQuery';\n\n// Providers\nexport { QueryProvider } from './providers/query.provider';\n\n// Middleware\nexport { createAuthMiddleware } from './middlewares/create-auth-middleware';\nexport { createMiddlewareChain } from './middlewares/chain';\nexport { continueChain, stopChain } from './middlewares/types';\nexport type { MiddlewareFunction, MiddlewareConfig, MiddlewareResult } from './middlewares/types';\n\n// Utils\nexport { cn } from './infra/utils/clsx';\nexport { buildQueryParams } from './infra/utils/params';\n\n// Layout\nexport { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain } from './components/layouts/MainLayout';\nexport { NavBar } from './components/layouts/NavBar';\nexport type { NavBarProps } from './components/layouts/NavBar';\nexport { SideBarNavigation } from './components/layouts/SideBarNavigation';\nexport { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';\nexport { NotificationItem } from './components/layouts/NotificationItem';\nexport type { NotificationItemProps } from './components/layouts/NotificationItem';\nexport { ProfilePopover } from './components/layouts/ProfilePopover';\nexport type { ProfilePopoverProps, ProfileMenuItem } from './components/layouts/ProfilePopover';\nexport { NavBarItem } from './components/layouts/NavBarItem';\nexport type { NavBarItemProps } from './components/layouts/NavBarItem';\nexport { UserAvatar } from './components/ui/data-display/UserAvatar';\nexport type { UserAvatarProps } from './components/ui/data-display/UserAvatar';\n\n// Store\nexport { useMdSidebarStore } from './store/useMdSidebarStore';\n"],"mappings":"AACA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,SAAS,cAAc,wBAAwB,mBAAmB,gBAAgB,sBAAsB;AAGxG,SAAS,qBAAqB;AAG9B,SAAS,4BAA4B;AACrC,SAAS,6BAA6B;AACtC,SAAS,eAAe,iBAAiB;AAIzC,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAGjC,SAAS,YAAY,mBAAmB,kBAAkB,sBAAsB;AAChF,SAAS,cAAc;AAEvB,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAEjC,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAE3B,SAAS,kBAAkB;AAI3B,SAAS,yBAAyB;","names":[]}

package/package.json

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

package/src/components/layouts/NavBarItem.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { cn } from '../../infra/utils/clsx';
+
+type NavBarItemProps = {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+  className?: string;
+  labelClassName?: string;
+}
+
+function NavBarItem({ icon, label, onClick, className, labelClassName }: NavBarItemProps) {
+  return (
+    <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={onClick}
+    >
+      {icon}
+      <span className={cn('text-sm font-medium text-gray-950', labelClassName)}>{label}</span>
+    </div>
+  );
+}
+
+export { NavBarItem };
+export type { NavBarItemProps };

package/src/components/layouts/ProfilePopover.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';
+import { Button } from '../ui/buttons/Button';
+import { Progress } from '../ui/feedback/Progress';
+import { Separator } from '../ui/data-display/Separator';
+import { NavBarItem } from './NavBarItem';
+import { UserAvatar } from '../ui/data-display/UserAvatar';
+import { useAuth } from '../../providers/auth.provider';
+import { cn } from '../../infra/utils/clsx';
+
+export interface ProfileMenuItem {
+  icon?: React.ReactNode;
+  label: string;
+  onClick: () => void;
+}
+
+export interface ProfilePopoverProps {
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
+  contentClassName?: string;
+  onEditProfile?: () => void;
+  credits?: { used: number; total: number };
+  onCreditsClick?: () => void;
+  menuItems?: ProfileMenuItem[];
+  logoutRedirect?: string;
+  storageUrl?: string;
+  logoutOverlay?: React.ReactNode;
+}
+
+function ProfilePopover({
+  side = 'top',
+  align = 'start',
+  contentClassName,
+  onEditProfile,
+  credits,
+  onCreditsClick,
+  menuItems = [],
+  logoutRedirect = '/login',
+  storageUrl,
+  logoutOverlay,
+}: ProfilePopoverProps) {
+  const router = useRouter();
+  const { user, logout } = useAuth();
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  const handleLogout = async () => {
+    try {
+      setIsLoggingOut(true);
+      await logout();
+      router.push(logoutRedirect);
+    } catch (error) {
+      console.error('Erro ao fazer logout:', error);
+    } finally {
+      setIsLoggingOut(false);
+    }
+  };
+
+  const creditsPercentage =
+    credits && credits.total > 0
+      ? (credits.used / credits.total) * 100
+      : 0;
+
+  return (
+    <>
+      {isLoggingOut && logoutOverlay}
+      <Popover>
+        <PopoverTrigger className="cursor-pointer">
+          {user && (
+            <UserAvatar
+              key={user.id}
+              photo={user.photo}
+              name={user.name}
+              size={40}
+              storageUrl={storageUrl}
+            />
+          )}
+        </PopoverTrigger>
+
+        <PopoverContent
+          className={cn(
+            'w-64.75 p-0 bg-white rounded-2xl shadow-md border border-gray-200 z-99',
+            contentClassName
+          )}
+          side={side}
+          align={align}
+          sideOffset={8}
+        >
+          <div className="grid grid-cols-[32px_1fr_auto] items-center gap-3 p-3 w-full">
+            {user && (
+              <UserAvatar
+                key={user.id}
+                photo={user.photo}
+                name={user.name}
+                size={32}
+                storageUrl={storageUrl}
+              />
+            )}
+
+            <div className="flex flex-col gap-0.5 min-w-0">
+              <span className="paragraph-small-semibold text-gray-950 truncate">
+                {user?.name || ''}
+              </span>
+              <span className="paragraph-xsmall-medium text-gray-500 truncate">
+                {user?.email || ''}
+              </span>
+            </div>
+
+            {onEditProfile && (
+              <Button
+                variant="secondary"
+                className="paragraph-small-semibold h-8! whitespace-nowrap px-3 w-fit"
+                onClick={onEditProfile}
+              >
+                Editar Perfil
+              </Button>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-2 border-t border-gray-200 rounded-2xl p-1.5">
+            {credits && (
+              <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}
+              >
+                <div className="flex items-center justify-between gap-2">
+                  <span className="paragraph-xsmall-semibold text-white truncate">
+                    Créditos usados
+                  </span>
+                  <span className="paragraph-xsmall-medium text-white/50">
+                    {credits.used.toLocaleString('pt-BR')}/
+                    {credits.total.toLocaleString('pt-BR')}
+                  </span>
+                </div>
+                <Progress
+                  className="bg-white/10"
+                  indicatorColor="bg-white"
+                  value={creditsPercentage}
+                />
+              </div>
+            )}
+
+            <div className="flex flex-col gap-2">
+              {menuItems.length > 0 && (
+                <div className="flex flex-col">
+                  {menuItems.map((item, index) => (
+                    <NavBarItem
+                      key={index}
+                      icon={item.icon}
+                      label={item.label}
+                      onClick={item.onClick}
+                    />
+                  ))}
+                </div>
+              )}
+              <Separator />
+              <NavBarItem label="Sair" onClick={handleLogout} />
+            </div>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}
+
+export { ProfilePopover };

package/src/components/ui/data-display/UserAvatar.tsx

@@ -0,0 +1,67 @@
+"use client"
+
+import Image from 'next/image';
+import { cn } from '../../../infra/utils/clsx';
+
+function getInitials(name: string, maxLength: number = 2): string {
+  return name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .slice(0, maxLength)
+    .toUpperCase();
+}
+
+interface UserAvatarProps {
+  photo?: string | null;
+  name?: string;
+  initials?: string;
+  size?: number;
+  shape?: 'circle' | 'square';
+  className?: string;
+  storageUrl?: string;
+}
+
+function UserAvatar({
+  photo,
+  name,
+  initials,
+  size = 32,
+  shape = 'circle',
+  className,
+  storageUrl,
+}: UserAvatarProps) {
+  const shapeClass = shape === 'circle' ? 'rounded-full' : 'rounded-lg';
+  const displayInitials = initials || (name ? getInitials(name) : '?');
+
+  const photoUrl = storageUrl && photo ? `${storageUrl}/${photo}` : photo;
+
+  if (photoUrl) {
+    return (
+      <Image
+        alt={name || 'imagem do usuario'}
+        src={photoUrl}
+        width={size}
+        height={size}
+        className={cn('object-cover shrink-0', shapeClass, className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center shrink-0 bg-gray-100',
+        shapeClass,
+        className
+      )}
+      style={{ width: size, height: size }}
+    >
+      <span className="text-xs font-semibold text-gray-700">{displayInitials}</span>
+    </div>
+  );
+}
+
+export { UserAvatar };
+export type { UserAvatarProps };

package/src/index.ts

@@ -33,6 +33,12 @@ export { SideBarNavigation } from './components/layouts/SideBarNavigation';
 export { MdSideBarNavigation } from './components/layouts/MdSideBarNavigation';
 export { NotificationItem } from './components/layouts/NotificationItem';
 export type { NotificationItemProps } from './components/layouts/NotificationItem';
+export { ProfilePopover } from './components/layouts/ProfilePopover';
+export type { ProfilePopoverProps, ProfileMenuItem } from './components/layouts/ProfilePopover';
+export { NavBarItem } from './components/layouts/NavBarItem';
+export type { NavBarItemProps } from './components/layouts/NavBarItem';
+export { UserAvatar } from './components/ui/data-display/UserAvatar';
+export type { UserAvatarProps } from './components/ui/data-display/UserAvatar';
 
 // Store
 export { useMdSidebarStore } from './store/useMdSidebarStore';