@greatapps/common 1.1.1 → 1.1.3

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/NotificationsPopover.mjs

@@ -0,0 +1,77 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Bell } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import { NotificationItem } from "./NotificationItem";
+import { cn } from "../../infra/utils/clsx";
+function NotificationsPopover({
+  notifications = [],
+  onViewAll,
+  side,
+  align,
+  contentClassName,
+  badgeClassName = "bg-pages-400"
+}) {
+  const [open, setOpen] = useState(false);
+  const [hasNewNotifications, setHasNewNotifications] = useState(true);
+  const handleOpenChange = (isOpen) => {
+    setOpen(isOpen);
+    if (isOpen) setHasNewNotifications(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative rounded-full p-2.5 ${open ? "bg-gray-100" : "hover:bg-gray-100"}`,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { size: 20, className: "text-gray-500" }),
+          hasNewNotifications && /* @__PURE__ */ jsx("span", { className: cn("absolute top-2 right-2 size-2.5 rounded-full", badgeClassName) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        className: cn(
+          "absolute bottom-2 left-[26px] 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" }),
+          notifications.length > 0 ? notifications.map((notification, index) => /* @__PURE__ */ jsx(
+            NotificationItem,
+            {
+              icon: notification.icon,
+              iconBgColor: notification.iconBgColor,
+              title: notification.title,
+              time: notification.time,
+              showBorder: index < notifications.length - 1
+            },
+            index
+          )) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]", children: [
+            /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md p-2.5", children: /* @__PURE__ */ jsx(Bell, { size: 20, color: "var(--color-gray-950)" }) }),
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-950", children: "Sem notifica\xE7\xF5es por enquanto" })
+          ] }),
+          onViewAll && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "secondary",
+              className: "h-8! mt-2 mb-4 mx-4 paragraph-small-semibold",
+              onClick: onViewAll,
+              children: "Todas as notifica\xE7\xF5es"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  NotificationsPopover
+};
+//# sourceMappingURL=NotificationsPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/NotificationsPopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { ReactNode, useState } from 'react';\r\nimport { Bell } from 'lucide-react';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { NotificationItem } from './NotificationItem';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface NotificationData {\r\n  icon: ReactNode;\r\n  iconBgColor: string;\r\n  title: string;\r\n  time: string;\r\n}\r\n\r\nexport interface NotificationsPopoverProps {\r\n  notifications?: NotificationData[];\r\n  onViewAll?: () => void;\r\n  side?: 'top' | 'bottom' | 'left' | 'right';\r\n  align?: 'start' | 'center' | 'end';\r\n  contentClassName?: string;\r\n  badgeClassName?: string;\r\n}\r\n\r\nfunction NotificationsPopover({\r\n  notifications = [],\r\n  onViewAll,\r\n  side,\r\n  align,\r\n  contentClassName,\r\n  badgeClassName = 'bg-pages-400',\r\n}: NotificationsPopoverProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const [hasNewNotifications, setHasNewNotifications] = useState(true);\r\n\r\n  const handleOpenChange = (isOpen: boolean) => {\r\n    setOpen(isOpen);\r\n    if (isOpen) setHasNewNotifications(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={open} onOpenChange={handleOpenChange}>\r\n      <PopoverTrigger className=\"cursor-pointer\">\r\n        <div\r\n          className={`relative rounded-full p-2.5 ${open ? 'bg-gray-100' : 'hover:bg-gray-100'}`}\r\n        >\r\n          <Bell size={20} className=\"text-gray-500\" />\r\n          {hasNewNotifications && (\r\n            <span className={cn('absolute top-2 right-2 size-2.5 rounded-full', badgeClassName)} />\r\n          )}\r\n        </div>\r\n      </PopoverTrigger>\r\n      <PopoverContent\r\n        className={cn(\r\n          'absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200',\r\n          contentClassName\r\n        )}\r\n        side={side}\r\n        align={align}\r\n        sideOffset={8}\r\n      >\r\n        <span className=\"paragraph-small-semibold text-gray-950 px-4\">Últimas notificações</span>\r\n\r\n        {notifications.length > 0 ? (\r\n          notifications.map((notification, index) => (\r\n            <NotificationItem\r\n              key={index}\r\n              icon={notification.icon}\r\n              iconBgColor={notification.iconBgColor}\r\n              title={notification.title}\r\n              time={notification.time}\r\n              showBorder={index < notifications.length - 1}\r\n            />\r\n          ))\r\n        ) : (\r\n          <div className=\"flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]\">\r\n            <div className=\"bg-gray-50 rounded-md p-2.5\">\r\n              <Bell size={20} color=\"var(--color-gray-950)\" />\r\n            </div>\r\n            <span className=\"paragraph-small-medium text-gray-950\">Sem notificações por enquanto</span>\r\n          </div>\r\n        )}\r\n\r\n        {onViewAll && (\r\n          <Button\r\n            variant=\"secondary\"\r\n            className=\"h-8! mt-2 mb-4 mx-4 paragraph-small-semibold\"\r\n            onClick={onViewAll}\r\n          >\r\n            Todas as notificações\r\n          </Button>\r\n        )}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n\r\nexport { NotificationsPopover };\r\n"],"mappings":";AA4CQ,SAGE,KAHF;AA1CR,SAAoB,gBAAgB;AACpC,SAAS,YAAY;AACrB,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAkBnB,SAAS,qBAAqB;AAAA,EAC5B,gBAAgB,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,GAA8B;AAC5B,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,IAAI;AAEnE,QAAM,mBAAmB,CAAC,WAAoB;AAC5C,YAAQ,MAAM;AACd,QAAI,OAAQ,wBAAuB,KAAK;AAAA,EAC1C;AAEA,SACE,qBAAC,WAAQ,MAAY,cAAc,kBACjC;AAAA,wBAAC,kBAAe,WAAU,kBACxB;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,+BAA+B,OAAO,gBAAgB,mBAAmB;AAAA,QAEpF;AAAA,8BAAC,QAAK,MAAM,IAAI,WAAU,iBAAgB;AAAA,UACzC,uBACC,oBAAC,UAAK,WAAW,GAAG,gDAAgD,cAAc,GAAG;AAAA;AAAA;AAAA,IAEzF,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY;AAAA,QAEZ;AAAA,8BAAC,UAAK,WAAU,+CAA8C,2CAAoB;AAAA,UAEjF,cAAc,SAAS,IACtB,cAAc,IAAI,CAAC,cAAc,UAC/B;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,aAAa;AAAA,cACnB,aAAa,aAAa;AAAA,cAC1B,OAAO,aAAa;AAAA,cACpB,MAAM,aAAa;AAAA,cACnB,YAAY,QAAQ,cAAc,SAAS;AAAA;AAAA,YALtC;AAAA,UAMP,CACD,IAED,qBAAC,SAAI,WAAU,4DACb;AAAA,gCAAC,SAAI,WAAU,+BACb,8BAAC,QAAK,MAAM,IAAI,OAAM,yBAAwB,GAChD;AAAA,YACA,oBAAC,UAAK,WAAU,wCAAuC,iDAA6B;AAAA,aACtF;AAAA,UAGD,aACC;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,WAAU;AAAA,cACV,SAAS;AAAA,cACV;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;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/layouts/UsersSelectorPopover.mjs

@@ -0,0 +1,142 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Plus, Settings, User } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/overlay/Popover";
+import { Button } from "../ui/buttons/Button";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../ui/overlay/Command";
+import { Checkbox } from "../ui/form/Checkbox";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+function UsersSelectorPopover({
+  users: externalUsers,
+  onToggleUser,
+  addRoute = "/my-teams?createNew=true",
+  manageRoute = "/my-teams",
+  userCount = 5,
+  side,
+  align,
+  contentClassName
+}) {
+  const route = useRouter();
+  const [open, setOpen] = useState(false);
+  const [internalUsers, setInternalUsers] = useState(externalUsers ?? []);
+  const [hoveredId, setHoveredId] = useState(null);
+  const users = externalUsers ?? internalUsers;
+  const toggleUser = (id) => {
+    if (onToggleUser) {
+      onToggleUser(id);
+    } else {
+      setInternalUsers(
+        (prev) => prev.map((u) => u.id === id ? { ...u, checked: !u.checked } : u)
+      );
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: userCount }),
+      /* @__PURE__ */ jsx(User, { size: 16 })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: cn(
+          "absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
+          contentClassName
+        ),
+        side,
+        align,
+        sideOffset: 8,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Usu\xE1rios" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "secondary",
+                  className: "h-8 paragraph-small-semibold text-gray-950",
+                  onClick: () => route.push(addRoute),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { size: 16 }),
+                    "Adicionar"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    className: "p-0 size-8",
+                    onClick: () => route.push(manageRoute),
+                    children: /* @__PURE__ */ jsx(Settings, { size: 18 })
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: "Visualizar todos usu\xE1rios" })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Command, { className: "gap-2", value: "", children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
+            /* @__PURE__ */ jsxs(CommandList, { className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]", children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: "No results found." }),
+              users.map((user) => /* @__PURE__ */ jsx(
+                CommandItem,
+                {
+                  autoFocus: false,
+                  onPointerEnter: () => setHoveredId(user.id),
+                  onPointerLeave: () => setHoveredId(null),
+                  onFocus: () => setHoveredId(user.id),
+                  onBlur: () => setHoveredId(null),
+                  onSelect: () => toggleUser(user.id),
+                  className: "cursor-pointer",
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          alt: "Avatar",
+                          src: user.avatar,
+                          width: 32,
+                          height: 32,
+                          className: "rounded-full"
+                        }
+                      ),
+                      user.name
+                    ] }),
+                    /* @__PURE__ */ jsxs(Tooltip, { open: hoveredId === user.id, children: [
+                      /* @__PURE__ */ jsx(
+                        TooltipTrigger,
+                        {
+                          onClick: (e) => e.stopPropagation(),
+                          onPointerDown: (e) => e.stopPropagation(),
+                          children: /* @__PURE__ */ jsx(
+                            Checkbox,
+                            {
+                              checked: user.checked,
+                              onCheckedChange: () => toggleUser(user.id),
+                              className: hoveredId === user.id ? "border-gray-950" : ""
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(TooltipContent, { children: user.checked ? "Remover do projeto" : "Adicionar ao projeto" })
+                    ] })
+                  ] })
+                },
+                user.id
+              ))
+            ] })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  UsersSelectorPopover
+};
+//# sourceMappingURL=UsersSelectorPopover.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/UsersSelectorPopover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport { useState } from 'react';\r\nimport { Plus, Settings, User } from 'lucide-react';\r\nimport Image from 'next/image';\r\nimport { useRouter } from 'next/navigation';\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';\r\nimport { Checkbox } from '../ui/form/Checkbox';\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\r\nimport { cn } from '../../infra/utils/clsx';\r\n\r\nexport interface UserSelectorItem {\r\n  id: number;\r\n  name: string;\r\n  avatar: string;\r\n  checked: boolean;\r\n}\r\n\r\nexport interface UsersSelectorPopoverProps {\r\n  users?: UserSelectorItem[];\r\n  onToggleUser?: (id: number) => void;\r\n  addRoute?: string;\r\n  manageRoute?: string;\r\n  userCount?: number;\r\n  side?: 'top' | 'bottom' | 'left' | 'right';\r\n  align?: 'start' | 'center' | 'end';\r\n  contentClassName?: string;\r\n}\r\n\r\nfunction UsersSelectorPopover({\r\n  users: externalUsers,\r\n  onToggleUser,\r\n  addRoute = '/my-teams?createNew=true',\r\n  manageRoute = '/my-teams',\r\n  userCount = 5,\r\n  side,\r\n  align,\r\n  contentClassName,\r\n}: UsersSelectorPopoverProps) {\r\n  const route = useRouter();\r\n  const [open, setOpen] = useState(false);\r\n  const [internalUsers, setInternalUsers] = useState<UserSelectorItem[]>(externalUsers ?? []);\r\n  const [hoveredId, setHoveredId] = useState<number | null>(null);\r\n\r\n  const users = externalUsers ?? internalUsers;\r\n\r\n  const toggleUser = (id: number) => {\r\n    if (onToggleUser) {\r\n      onToggleUser(id);\r\n    } else {\r\n      setInternalUsers((prev) =>\r\n        prev.map((u) => (u.id === id ? { ...u, checked: !u.checked } : u))\r\n      );\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Popover open={open} onOpenChange={setOpen}>\r\n      <PopoverTrigger className=\"cursor-pointer\">\r\n        <div className=\"flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950\">\r\n          <span className=\"paragraph-small-semibold\">{userCount}</span>\r\n          <User size={16} />\r\n        </div>\r\n      </PopoverTrigger>\r\n\r\n      <PopoverContent\r\n        className={cn(\r\n          'absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200',\r\n          contentClassName\r\n        )}\r\n        side={side}\r\n        align={align}\r\n        sideOffset={8}\r\n      >\r\n        <div className=\"flex flex-col p-3 gap-2\">\r\n          <div className=\"flex items-center justify-between\">\r\n            <span className=\"paragraph-small-semibold\">Usuários</span>\r\n            <div className=\"flex items-center gap-1.5\">\r\n              <Button\r\n                variant=\"secondary\"\r\n                className=\"h-8 paragraph-small-semibold text-gray-950\"\r\n                onClick={() => route.push(addRoute)}\r\n              >\r\n                <Plus size={16} />\r\n                Adicionar\r\n              </Button>\r\n\r\n              <Tooltip>\r\n                <TooltipTrigger asChild>\r\n                  <Button\r\n                    variant=\"secondary\"\r\n                    className=\"p-0 size-8\"\r\n                    onClick={() => route.push(manageRoute)}\r\n                  >\r\n                    <Settings size={18} />\r\n                  </Button>\r\n                </TooltipTrigger>\r\n                <TooltipContent>Visualizar todos usuários</TooltipContent>\r\n              </Tooltip>\r\n            </div>\r\n          </div>\r\n\r\n          <Command className=\"gap-2\" value=\"\">\r\n            <CommandInput placeholder=\"Busque aqui\" />\r\n            <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n              <CommandEmpty>No results found.</CommandEmpty>\r\n              {users.map((user) => (\r\n                <CommandItem\r\n                  key={user.id}\r\n                  autoFocus={false}\r\n                  onPointerEnter={() => setHoveredId(user.id)}\r\n                  onPointerLeave={() => setHoveredId(null)}\r\n                  onFocus={() => setHoveredId(user.id)}\r\n                  onBlur={() => setHoveredId(null)}\r\n                  onSelect={() => toggleUser(user.id)}\r\n                  className=\"cursor-pointer\"\r\n                >\r\n                  <div className=\"flex items-center justify-between w-full\">\r\n                    <div className=\"flex items-center gap-2\">\r\n                      <Image\r\n                        alt=\"Avatar\"\r\n                        src={user.avatar}\r\n                        width={32}\r\n                        height={32}\r\n                        className=\"rounded-full\"\r\n                      />\r\n                      {user.name}\r\n                    </div>\r\n\r\n                    <Tooltip open={hoveredId === user.id}>\r\n                      <TooltipTrigger\r\n                        onClick={(e) => e.stopPropagation()}\r\n                        onPointerDown={(e) => e.stopPropagation()}\r\n                      >\r\n                        <Checkbox\r\n                          checked={user.checked}\r\n                          onCheckedChange={() => toggleUser(user.id)}\r\n                          className={hoveredId === user.id ? 'border-gray-950' : ''}\r\n                        />\r\n                      </TooltipTrigger>\r\n                      <TooltipContent>\r\n                        {user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}\r\n                      </TooltipContent>\r\n                    </Tooltip>\r\n                  </div>\r\n                </CommandItem>\r\n              ))}\r\n            </CommandList>\r\n          </Command>\r\n        </div>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n\r\nexport { UsersSelectorPopover };\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,24 +17,168 @@ 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 { NotificationsPopover } from "./components/layouts/NotificationsPopover";
+import { UsersSelectorPopover } from "./components/layouts/UsersSelectorPopover";
+import { ProfilePopover } from "./components/layouts/ProfilePopover";
+import { NavBarItem } from "./components/layouts/NavBarItem";
+import { Button, buttonVariants } from "./components/ui/buttons/Button";
+import { CopyButton } from "./components/ui/buttons/CopyButton";
+import { default as default2 } from "./components/ui/buttons/CancelButton";
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./components/ui/data-display/Accordion";
+import { Badge, badgeVariants } from "./components/ui/data-display/Badge";
+import { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from "./components/ui/data-display/Card";
+import { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from "./components/ui/data-display/Pagination";
+import { ScrollArea, ScrollBar } from "./components/ui/data-display/ScrollArea";
+import { Separator } from "./components/ui/data-display/Separator";
+import { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from "./components/ui/data-display/Table";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "./components/ui/data-display/Tabs";
+import { UserAvatar } from "./components/ui/data-display/UserAvatar";
+import { default as default3 } from "./components/ui/feedback/CircularProgress";
+import { default as default4 } from "./components/ui/feedback/DefaultCircularProgress";
+import { Progress } from "./components/ui/feedback/Progress";
+import { Toast, toastVariants, toastIconContainerVariants } from "./components/ui/feedback/Toast";
+import { Calendar, CalendarDayButton } from "./components/ui/form/Calendar";
+import { Checkbox } from "./components/ui/form/Checkbox";
+import { DatePicker } from "./components/ui/form/DatePicker";
+import { DateRangePicker } from "./components/ui/form/DateRangePicker";
+import { Input } from "./components/ui/form/Input";
+import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "./components/ui/form/InputOtp";
+import { RadioGroup, RadioGroupItem } from "./components/ui/form/RadioGroup";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./components/ui/form/Select";
+import { Switch } from "./components/ui/form/Switch";
+import { Textarea } from "./components/ui/form/Textarea";
+import { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from "./components/ui/overlay/Command";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/overlay/Dialog";
+import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from "./components/ui/overlay/Popover";
+import { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from "./components/ui/overlay/Sheet";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./components/ui/overlay/Tooltip";
 import { useMdSidebarStore } from "./store/useMdSidebarStore";
 export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Badge,
+  Button,
+  Calendar,
+  CalendarDayButton,
+  default2 as CancelButton,
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  default3 as CircularProgress,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  CopyButton,
+  DatePicker,
+  DateRangePicker,
+  default4 as DefaultCircularProgress,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
   MainLayout,
   MainLayoutContent,
   MainLayoutMain,
   MainLayoutSpacer,
   MdSideBarNavigation,
   NavBar,
+  NavBarItem,
   NotificationItem,
+  NotificationsPopover,
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  ProfilePopover,
+  Progress,
   QueryProvider,
+  RadioGroup,
+  RadioGroupItem,
+  ScrollArea,
+  ScrollBar,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
   SideBarNavigation,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Toast,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   USER_QUERY_KEY,
+  UserAvatar,
+  UsersSelectorPopover,
+  badgeVariants,
   buildQueryParams,
+  buttonVariants,
   cn,
   continueChain,
   createAuthMiddleware,
   createMiddlewareChain,
   stopChain,
+  toastIconContainerVariants,
+  toastVariants,
   useInvalidateUser,
   useMdSidebarStore,
   useSetUserData,

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 { NotificationsPopover } from './components/layouts/NotificationsPopover';\nexport type { NotificationsPopoverProps, NotificationData } from './components/layouts/NotificationsPopover';\nexport { UsersSelectorPopover } from './components/layouts/UsersSelectorPopover';\nexport type { UsersSelectorPopoverProps, UserSelectorItem } from './components/layouts/UsersSelectorPopover';\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';\n\n// UI - Buttons\nexport { Button, buttonVariants } from './components/ui/buttons/Button';\nexport { CopyButton } from './components/ui/buttons/CopyButton';\nexport { default as CancelButton } from './components/ui/buttons/CancelButton';\n\n// UI - Data Display\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/ui/data-display/Accordion';\nexport { Badge, badgeVariants } from './components/ui/data-display/Badge';\nexport { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from './components/ui/data-display/Card';\nexport { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from './components/ui/data-display/Pagination';\nexport { ScrollArea, ScrollBar } from './components/ui/data-display/ScrollArea';\nexport { Separator } from './components/ui/data-display/Separator';\nexport { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './components/ui/data-display/Table';\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/data-display/Tabs';\nexport { UserAvatar } from './components/ui/data-display/UserAvatar';\nexport type { UserAvatarProps } from './components/ui/data-display/UserAvatar';\n\n// UI - Feedback\nexport { default as CircularProgress } from './components/ui/feedback/CircularProgress';\nexport { default as DefaultCircularProgress } from './components/ui/feedback/DefaultCircularProgress';\nexport { Progress } from './components/ui/feedback/Progress';\nexport { Toast, toastVariants, toastIconContainerVariants } from './components/ui/feedback/Toast';\nexport type { ToastProps } from './components/ui/feedback/Toast';\n\n// UI - Form\nexport { Calendar, CalendarDayButton } from './components/ui/form/Calendar';\nexport { Checkbox } from './components/ui/form/Checkbox';\nexport { DatePicker } from './components/ui/form/DatePicker';\nexport { DateRangePicker } from './components/ui/form/DateRangePicker';\nexport { Input } from './components/ui/form/Input';\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './components/ui/form/InputOtp';\nexport { RadioGroup, RadioGroupItem } from './components/ui/form/RadioGroup';\nexport { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/form/Select';\nexport { Switch } from './components/ui/form/Switch';\nexport { Textarea } from './components/ui/form/Textarea';\n\n// UI - Overlay\nexport { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './components/ui/overlay/Command';\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/overlay/Dialog';\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './components/ui/overlay/Popover';\nexport { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './components/ui/overlay/Sheet';\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/ui/overlay/Tooltip';\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,4BAA4B;AAErC,SAAS,4BAA4B;AAErC,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAI3B,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAC3B,SAAoB,WAAXA,gBAA+B;AAGxC,SAAS,WAAW,eAAe,kBAAkB,wBAAwB;AAC7E,SAAS,OAAO,qBAAqB;AACrC,SAAS,MAAM,YAAY,YAAY,WAAW,YAAY,iBAAiB,mBAAmB;AAClG,SAAS,YAAY,mBAAmB,gBAAgB,gBAAgB,oBAAoB,gBAAgB,0BAA0B;AACtI,SAAS,YAAY,iBAAiB;AACtC,SAAS,iBAAiB;AAC1B,SAAS,OAAO,aAAa,WAAW,aAAa,WAAW,UAAU,WAAW,oBAAoB;AACzG,SAAS,MAAM,UAAU,aAAa,mBAAmB;AACzD,SAAS,kBAAkB;AAI3B,SAAoB,WAAXA,gBAAmC;AAC5C,SAAoB,WAAXA,gBAA0C;AACnD,SAAS,gBAAgB;AACzB,SAAS,OAAO,eAAe,kCAAkC;AAIjE,SAAS,UAAU,yBAAyB;AAC5C,SAAS,gBAAgB;AACzB,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,SAAS,UAAU,eAAe,cAAc,yBAAyB;AACzE,SAAS,YAAY,sBAAsB;AAC3C,SAAS,QAAQ,eAAe,aAAa,YAAY,aAAa,wBAAwB,sBAAsB,iBAAiB,eAAe,mBAAmB;AACvK,SAAS,cAAc;AACvB,SAAS,gBAAgB;AAGzB,SAAS,SAAS,eAAe,cAAc,aAAa,cAAc,cAAc,aAAa,iBAAiB,wBAAwB;AAC9I,SAAS,QAAQ,aAAa,eAAe,mBAAmB,cAAc,cAAc,eAAe,cAAc,aAAa,qBAAqB;AAC3J,SAAS,SAAS,gBAAgB,gBAAgB,qBAAqB;AACvE,SAAS,OAAO,cAAc,YAAY,cAAc,aAAa,aAAa,YAAY,wBAAwB;AACtH,SAAS,SAAS,gBAAgB,gBAAgB,uBAAuB;AAGzE,SAAS,yBAAyB;","names":["default"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greatapps/common",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "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/NotificationsPopover.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { ReactNode, useState } from 'react';
+import { Bell } from 'lucide-react';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';
+import { Button } from '../ui/buttons/Button';
+import { NotificationItem } from './NotificationItem';
+import { cn } from '../../infra/utils/clsx';
+
+export interface NotificationData {
+  icon: ReactNode;
+  iconBgColor: string;
+  title: string;
+  time: string;
+}
+
+export interface NotificationsPopoverProps {
+  notifications?: NotificationData[];
+  onViewAll?: () => void;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
+  contentClassName?: string;
+  badgeClassName?: string;
+}
+
+function NotificationsPopover({
+  notifications = [],
+  onViewAll,
+  side,
+  align,
+  contentClassName,
+  badgeClassName = 'bg-pages-400',
+}: NotificationsPopoverProps) {
+  const [open, setOpen] = useState(false);
+  const [hasNewNotifications, setHasNewNotifications] = useState(true);
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (isOpen) setHasNewNotifications(false);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger className="cursor-pointer">
+        <div
+          className={`relative rounded-full p-2.5 ${open ? 'bg-gray-100' : 'hover:bg-gray-100'}`}
+        >
+          <Bell size={20} className="text-gray-500" />
+          {hasNewNotifications && (
+            <span className={cn('absolute top-2 right-2 size-2.5 rounded-full', badgeClassName)} />
+          )}
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        className={cn(
+          'absolute bottom-2 left-[26px] w-[308px] p-0 pt-4 bg-white rounded-2xl shadow-md border border-gray-200',
+          contentClassName
+        )}
+        side={side}
+        align={align}
+        sideOffset={8}
+      >
+        <span className="paragraph-small-semibold text-gray-950 px-4">Últimas notificações</span>
+
+        {notifications.length > 0 ? (
+          notifications.map((notification, index) => (
+            <NotificationItem
+              key={index}
+              icon={notification.icon}
+              iconBgColor={notification.iconBgColor}
+              title={notification.title}
+              time={notification.time}
+              showBorder={index < notifications.length - 1}
+            />
+          ))
+        ) : (
+          <div className="flex flex-col items-center gap-4 pt-[41.5px] pb-[33.5px]">
+            <div className="bg-gray-50 rounded-md p-2.5">
+              <Bell size={20} color="var(--color-gray-950)" />
+            </div>
+            <span className="paragraph-small-medium text-gray-950">Sem notificações por enquanto</span>
+          </div>
+        )}
+
+        {onViewAll && (
+          <Button
+            variant="secondary"
+            className="h-8! mt-2 mb-4 mx-4 paragraph-small-semibold"
+            onClick={onViewAll}
+          >
+            Todas as notificações
+          </Button>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { NotificationsPopover };

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/layouts/UsersSelectorPopover.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import { useState } from 'react';
+import { Plus, Settings, User } from 'lucide-react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/overlay/Popover';
+import { Button } from '../ui/buttons/Button';
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../ui/overlay/Command';
+import { Checkbox } from '../ui/form/Checkbox';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';
+import { cn } from '../../infra/utils/clsx';
+
+export interface UserSelectorItem {
+  id: number;
+  name: string;
+  avatar: string;
+  checked: boolean;
+}
+
+export interface UsersSelectorPopoverProps {
+  users?: UserSelectorItem[];
+  onToggleUser?: (id: number) => void;
+  addRoute?: string;
+  manageRoute?: string;
+  userCount?: number;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+  align?: 'start' | 'center' | 'end';
+  contentClassName?: string;
+}
+
+function UsersSelectorPopover({
+  users: externalUsers,
+  onToggleUser,
+  addRoute = '/my-teams?createNew=true',
+  manageRoute = '/my-teams',
+  userCount = 5,
+  side,
+  align,
+  contentClassName,
+}: UsersSelectorPopoverProps) {
+  const route = useRouter();
+  const [open, setOpen] = useState(false);
+  const [internalUsers, setInternalUsers] = useState<UserSelectorItem[]>(externalUsers ?? []);
+  const [hoveredId, setHoveredId] = useState<number | null>(null);
+
+  const users = externalUsers ?? internalUsers;
+
+  const toggleUser = (id: number) => {
+    if (onToggleUser) {
+      onToggleUser(id);
+    } else {
+      setInternalUsers((prev) =>
+        prev.map((u) => (u.id === id ? { ...u, checked: !u.checked } : u))
+      );
+    }
+  };
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger className="cursor-pointer">
+        <div className="flex items-center gap-2 text-gray-950 px-3 py-2 border border-gray-200 rounded-full hover:border-gray-950">
+          <span className="paragraph-small-semibold">{userCount}</span>
+          <User size={16} />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent
+        className={cn(
+          'absolute right-[-88px] w-[273px] p-0 bg-white rounded-2xl shadow-md border border-gray-200',
+          contentClassName
+        )}
+        side={side}
+        align={align}
+        sideOffset={8}
+      >
+        <div className="flex flex-col p-3 gap-2">
+          <div className="flex items-center justify-between">
+            <span className="paragraph-small-semibold">Usuários</span>
+            <div className="flex items-center gap-1.5">
+              <Button
+                variant="secondary"
+                className="h-8 paragraph-small-semibold text-gray-950"
+                onClick={() => route.push(addRoute)}
+              >
+                <Plus size={16} />
+                Adicionar
+              </Button>
+
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="secondary"
+                    className="p-0 size-8"
+                    onClick={() => route.push(manageRoute)}
+                  >
+                    <Settings size={18} />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>Visualizar todos usuários</TooltipContent>
+              </Tooltip>
+            </div>
+          </div>
+
+          <Command className="gap-2" value="">
+            <CommandInput placeholder="Busque aqui" />
+            <CommandList className="custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]">
+              <CommandEmpty>No results found.</CommandEmpty>
+              {users.map((user) => (
+                <CommandItem
+                  key={user.id}
+                  autoFocus={false}
+                  onPointerEnter={() => setHoveredId(user.id)}
+                  onPointerLeave={() => setHoveredId(null)}
+                  onFocus={() => setHoveredId(user.id)}
+                  onBlur={() => setHoveredId(null)}
+                  onSelect={() => toggleUser(user.id)}
+                  className="cursor-pointer"
+                >
+                  <div className="flex items-center justify-between w-full">
+                    <div className="flex items-center gap-2">
+                      <Image
+                        alt="Avatar"
+                        src={user.avatar}
+                        width={32}
+                        height={32}
+                        className="rounded-full"
+                      />
+                      {user.name}
+                    </div>
+
+                    <Tooltip open={hoveredId === user.id}>
+                      <TooltipTrigger
+                        onClick={(e) => e.stopPropagation()}
+                        onPointerDown={(e) => e.stopPropagation()}
+                      >
+                        <Checkbox
+                          checked={user.checked}
+                          onCheckedChange={() => toggleUser(user.id)}
+                          className={hoveredId === user.id ? 'border-gray-950' : ''}
+                        />
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {user.checked ? 'Remover do projeto' : 'Adicionar ao projeto'}
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandList>
+          </Command>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export { UsersSelectorPopover };

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,57 @@ 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 { NotificationsPopover } from './components/layouts/NotificationsPopover';
+export type { NotificationsPopoverProps, NotificationData } from './components/layouts/NotificationsPopover';
+export { UsersSelectorPopover } from './components/layouts/UsersSelectorPopover';
+export type { UsersSelectorPopoverProps, UserSelectorItem } from './components/layouts/UsersSelectorPopover';
+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';
+
+// UI - Buttons
+export { Button, buttonVariants } from './components/ui/buttons/Button';
+export { CopyButton } from './components/ui/buttons/CopyButton';
+export { default as CancelButton } from './components/ui/buttons/CancelButton';
+
+// UI - Data Display
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/ui/data-display/Accordion';
+export { Badge, badgeVariants } from './components/ui/data-display/Badge';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent } from './components/ui/data-display/Card';
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis } from './components/ui/data-display/Pagination';
+export { ScrollArea, ScrollBar } from './components/ui/data-display/ScrollArea';
+export { Separator } from './components/ui/data-display/Separator';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './components/ui/data-display/Table';
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/ui/data-display/Tabs';
+export { UserAvatar } from './components/ui/data-display/UserAvatar';
+export type { UserAvatarProps } from './components/ui/data-display/UserAvatar';
+
+// UI - Feedback
+export { default as CircularProgress } from './components/ui/feedback/CircularProgress';
+export { default as DefaultCircularProgress } from './components/ui/feedback/DefaultCircularProgress';
+export { Progress } from './components/ui/feedback/Progress';
+export { Toast, toastVariants, toastIconContainerVariants } from './components/ui/feedback/Toast';
+export type { ToastProps } from './components/ui/feedback/Toast';
+
+// UI - Form
+export { Calendar, CalendarDayButton } from './components/ui/form/Calendar';
+export { Checkbox } from './components/ui/form/Checkbox';
+export { DatePicker } from './components/ui/form/DatePicker';
+export { DateRangePicker } from './components/ui/form/DateRangePicker';
+export { Input } from './components/ui/form/Input';
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from './components/ui/form/InputOtp';
+export { RadioGroup, RadioGroupItem } from './components/ui/form/RadioGroup';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from './components/ui/form/Select';
+export { Switch } from './components/ui/form/Switch';
+export { Textarea } from './components/ui/form/Textarea';
+
+// UI - Overlay
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator } from './components/ui/overlay/Command';
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/ui/overlay/Dialog';
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './components/ui/overlay/Popover';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription } from './components/ui/overlay/Sheet';
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './components/ui/overlay/Tooltip';
 
 // Store
 export { useMdSidebarStore } from './store/useMdSidebarStore';