@greatapps/common 1.1.2 → 1.1.3

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

@@ -17,11 +17,89 @@ 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,
@@ -30,17 +108,77 @@ export {
   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';\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":[]}
+{"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.2",
+  "version": "1.1.3",
   "description": "Shared library for GreatApps frontend applications",
   "main": "./dist/index.mjs",
   "types": "./src/index.ts",

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/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/index.ts

@@ -33,12 +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';