@greatapps/common 1.1.429 → 1.1.430

package/dist/components/navigation/ProjectSelectorPopover.mjs

@@ -0,0 +1,147 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import {
+  Button,
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  UserAvatar
+} from "../../index";
+import { IconCheck, IconChevronDown, IconFolderOpen } from "@tabler/icons-react";
+function ProjectItemSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-2 gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "skeleton size-9 rounded-lg shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "skeleton h-4 w-36 rounded" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "skeleton size-4 rounded-full shrink-0" })
+  ] });
+}
+function ProjectSelectorPopover({
+  open,
+  setOpen,
+  titleRef,
+  projects,
+  selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
+  onSelectProject,
+  onAddProject,
+  onManageProjects,
+  children
+}) {
+  const handleListScroll = useCallback((event) => {
+    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+    const target = event.currentTarget;
+    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+    if (distanceToBottom <= 80) {
+      onLoadMore();
+    }
+  }, [hasNextPage, isFetchingNextPage, onLoadMore]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsx("button", { className: "cursor-pointer", children: /* @__PURE__ */ jsx(
+      IconChevronDown,
+      {
+        size: 20,
+        className: `transition-transform duration-200 ${open ? "rotate-180 text-gray-950" : "text-gray-400"}`
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
+        align: "start",
+        sideOffset: 8,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (event) => {
+          if (titleRef?.current?.contains(event.target)) {
+            event.preventDefault();
+          }
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }) }),
+          /* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
+            /* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
+            /* @__PURE__ */ jsx(
+              CommandList,
+              {
+                className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]",
+                onScroll: handleListScroll,
+                children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                  /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+                ] }) : projects.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4", children: [
+                  /* @__PURE__ */ jsx(IconFolderOpen, { size: 28, className: "text-gray-300" }),
+                  /* @__PURE__ */ jsxs("span", { className: "paragraph-small-medium text-center text-gray-500", children: [
+                    "Nenhum projeto encontrado.",
+                    /* @__PURE__ */ jsx("br", {}),
+                    "Crie um projeto para come\xE7ar."
+                  ] })
+                ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
+                  projects.map((project) => {
+                    const isSelected = selectedProject?.id === project.id;
+                    return /* @__PURE__ */ jsx(
+                      CommandItem,
+                      {
+                        value: `${project.title}-${project.id}`,
+                        keywords: [project.title],
+                        className: isSelected ? "bg-gray-50 min-h-[39px]" : "min-h-[39px]",
+                        onSelect: () => onSelectProject(project),
+                        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full cursor-pointer", children: [
+                          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full", children: [
+                            /* @__PURE__ */ jsx(
+                              UserAvatar,
+                              {
+                                photo: project.photo,
+                                name: project.title,
+                                size: 36
+                              }
+                            ),
+                            project.title
+                          ] }),
+                          isSelected && /* @__PURE__ */ jsx(IconCheck, { className: "size-4 text-gray-950" })
+                        ] })
+                      },
+                      project.id
+                    );
+                  }),
+                  isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                    /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+                  ] })
+                ] })
+              }
+            )
+          ] }),
+          onManageProjects && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "border-t border-gray-200" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                className: "h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center",
+                onClick: onManageProjects,
+                children: "Gerenciar projetos"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  ProjectSelectorPopover
+};
+//# sourceMappingURL=ProjectSelectorPopover.mjs.map

package/dist/components/navigation/ProjectSelectorPopover.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/ProjectSelectorPopover.tsx"],"sourcesContent":["'use client';\n\nimport { Dispatch, RefObject, SetStateAction, UIEvent, useCallback } from 'react';\nimport {\n  Button,\n  Command,\n  CommandEmpty,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  UserAvatar,\n} from '../../index';\nimport { IconCheck, IconChevronDown, IconFolderOpen } from '@tabler/icons-react';\nimport type { NavigationProject } from './types';\n\ninterface ProjectSelectorPopoverProps {\n  open: boolean;\n  setOpen: Dispatch<SetStateAction<boolean>>;\n  titleRef?: RefObject<HTMLSpanElement | null>;\n  projects: NavigationProject[];\n  selectedProject: NavigationProject | null;\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  onLoadMore?: () => void | Promise<unknown>;\n  onSelectProject: (project: NavigationProject) => void;\n  onAddProject?: () => void;\n  onManageProjects?: () => void;\n  children?: React.ReactNode;\n}\n\nfunction ProjectItemSkeleton() {\n  return (\n    <div className=\"flex items-center justify-between px-2 py-2 gap-2\">\n      <div className=\"flex items-center gap-2 flex-1\">\n        <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n        <div className=\"skeleton h-4 w-36 rounded\" />\n      </div>\n      <div className=\"skeleton size-4 rounded-full shrink-0\" />\n    </div>\n  );\n}\n\nexport function ProjectSelectorPopover({\n  open,\n  setOpen,\n  titleRef,\n  projects,\n  selectedProject,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  onLoadMore,\n  onSelectProject,\n  onAddProject,\n  onManageProjects,\n  children,\n}: ProjectSelectorPopoverProps) {\n  const handleListScroll = useCallback((event: UIEvent<HTMLDivElement>) => {\n    if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n    const target = event.currentTarget;\n    const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n    if (distanceToBottom <= 80) {\n      onLoadMore();\n    }\n  }, [hasNextPage, isFetchingNextPage, onLoadMore]);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        {children ?? (\n          <button className=\"cursor-pointer\">\n            <IconChevronDown\n              size={20}\n              className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n            />\n          </button>\n        )}\n      </PopoverTrigger>\n      <PopoverContent\n        className=\"w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\n        align=\"start\"\n        sideOffset={8}\n        onOpenAutoFocus={(e: Event) => e.preventDefault()}\n        onInteractOutside={(event: Event) => {\n          if (titleRef?.current?.contains(event.target as Node)) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <div className=\"flex flex-col p-3 gap-2\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Projetos</span>\n          </div>\n          <Command className=\"gap-2\">\n            <CommandInput placeholder=\"Busque aqui\" />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n              onScroll={handleListScroll}\n            >\n              {isLoading ? (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              ) : projects.length === 0 ? (\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\n                  <IconFolderOpen size={28} className=\"text-gray-300\" />\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\n                    Nenhum projeto encontrado.\n                    <br />\n                    Crie um projeto para começar.\n                  </span>\n                </div>\n              ) : (\n                <>\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n                  {projects.map((project) => {\n                    const isSelected = selectedProject?.id === project.id;\n                    return (\n                      <CommandItem\n                        key={project.id}\n                        value={`${project.title}-${project.id}`}\n                        keywords={[project.title]}\n                        className={isSelected ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n                        onSelect={() => onSelectProject(project)}\n                      >\n                        <div className=\"flex items-center justify-between w-full cursor-pointer\">\n                          <div className=\"flex items-center gap-2 w-full\">\n                            <UserAvatar\n                              photo={project.photo}\n                              name={project.title}\n                              size={36}\n                            />\n                            {project.title}\n                          </div>\n                          {isSelected && (\n                            <IconCheck className=\"size-4 text-gray-950\" />\n                          )}\n                        </div>\n                      </CommandItem>\n                    );\n                  })}\n                  {isFetchingNextPage && (\n                    <>\n                      <ProjectItemSkeleton />\n                      <ProjectItemSkeleton />\n                    </>\n                  )}\n                </>\n              )}\n            </CommandList>\n          </Command>\n          {onManageProjects && (\n            <>\n              <div className=\"border-t border-gray-200\" />\n              <Button\n                variant=\"ghost\"\n                className=\"h-10! paragraph-small-medium text-gray-600 hover:text-gray-950 hover:bg-zinc-50 w-full justify-center\"\n                onClick={onManageProjects}\n              >\n                Gerenciar projetos\n              </Button>\n            </>\n          )}\n        </div>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/navigation/shells/DesktopShell.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { SideBarNavigation } from "../../layouts/SideBarNavigation";
+import { AppNavigationContext } from "../AppNavigationContext";
+function DesktopShell({ children }) {
+  return /* @__PURE__ */ jsx(AppNavigationContext.Provider, { value: { breakpoint: "desktop" }, children: /* @__PURE__ */ jsx(SideBarNavigation, { className: "justify-between gap-5", children }) });
+}
+export {
+  DesktopShell
+};
+//# sourceMappingURL=DesktopShell.mjs.map

package/dist/components/navigation/shells/DesktopShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/shells/DesktopShell.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode } from 'react';\r\nimport { SideBarNavigation } from '../../layouts/SideBarNavigation';\r\nimport { AppNavigationContext } from '../AppNavigationContext';\r\n\r\nexport function DesktopShell({ children }: { children: ReactNode }) {\r\n  return (\r\n    <AppNavigationContext.Provider value={{ breakpoint: 'desktop' }}>\r\n      <SideBarNavigation className=\"justify-between gap-5\">\r\n        {children}\r\n      </SideBarNavigation>\r\n    </AppNavigationContext.Provider>\r\n  );\r\n}\r\n"],"mappings":";AASM;AANN,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AAE9B,SAAS,aAAa,EAAE,SAAS,GAA4B;AAClE,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,UAAU,GAC5D,8BAAC,qBAAkB,WAAU,yBAC1B,UACH,GACF;AAEJ;","names":[]}

package/dist/components/navigation/shells/MdShell.mjs

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { MdSideBarNavigation } from "../../layouts/MdSideBarNavigation";
+import { AppNavigationContext } from "../AppNavigationContext";
+function MdShell({ children }) {
+  return /* @__PURE__ */ jsx(AppNavigationContext.Provider, { value: { breakpoint: "md" }, children: /* @__PURE__ */ jsx(MdSideBarNavigation, { className: "justify-between gap-5", children }) });
+}
+export {
+  MdShell
+};
+//# sourceMappingURL=MdShell.mjs.map

package/dist/components/navigation/shells/MdShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/shells/MdShell.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode } from 'react';\r\nimport Image from 'next/image';\r\nimport { MdSideBarNavigation } from '../../layouts/MdSideBarNavigation';\r\nimport { AppNavigationContext } from '../AppNavigationContext';\r\n\r\nexport function MdShell({ children }: { children: ReactNode }) {\r\n  return (\r\n    <AppNavigationContext.Provider value={{ breakpoint: 'md' }}>\r\n      <MdSideBarNavigation className=\"justify-between gap-5\">\r\n        {children}\r\n      </MdSideBarNavigation>\r\n    </AppNavigationContext.Provider>\r\n  );\r\n}\r\n"],"mappings":";AAUM;AANN,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAE9B,SAAS,QAAQ,EAAE,SAAS,GAA4B;AAC7D,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,KAAK,GACvD,8BAAC,uBAAoB,WAAU,yBAC5B,UACH,GACF;AAEJ;","names":[]}

package/dist/components/navigation/shells/MobileShell.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
+import { AppNavigationContext } from "../AppNavigationContext";
+function MobileShell({ children }) {
+  const { isOpen, close } = useMobileNavbarSheet();
+  return /* @__PURE__ */ jsxs(AppNavigationContext.Provider, { value: { breakpoint: "mobile" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `md:hidden fixed inset-0 top-[72px] bg-black/50 z-30 transition-opacity duration-300 ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+        onClick: close
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white rounded-b-xl shadow-[0px_6px_12px_0px_rgba(26,26,26,0.12)] border-b border-gray-200 p-4 flex flex-col gap-5 transition-all duration-300 overflow-y-auto max-h-[calc(100dvh-72px)] ${isOpen ? "translate-y-0 opacity-100" : "-translate-y-full opacity-0 pointer-events-none"}`,
+        children
+      }
+    )
+  ] });
+}
+export {
+  MobileShell
+};
+//# sourceMappingURL=MobileShell.mjs.map

package/dist/components/navigation/shells/MobileShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/shells/MobileShell.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport { AppNavigationContext } from '../AppNavigationContext';\r\n\r\nexport function MobileShell({ children }: { children: ReactNode }) {\r\n  const { isOpen, close } = useMobileNavbarSheet();\r\n\r\n  return (\r\n    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>\r\n      {/* Backdrop overlay */}\r\n      <div\r\n        className={`md:hidden fixed inset-0 top-[72px] bg-black/50 z-30 transition-opacity duration-300 ${\r\n          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'\r\n        }`}\r\n        onClick={close}\r\n      />\r\n      {/* Menu panel */}\r\n      <div\r\n        className={`md:hidden fixed top-[72px] left-0 right-0 z-40 bg-white rounded-b-xl shadow-[0px_6px_12px_0px_rgba(26,26,26,0.12)] border-b border-gray-200 p-4 flex flex-col gap-5 transition-all duration-300 overflow-y-auto max-h-[calc(100dvh-72px)] ${\r\n          isOpen ? 'translate-y-0 opacity-100' : '-translate-y-full opacity-0 pointer-events-none'\r\n        }`}\r\n      >\r\n        {children}\r\n      </div>\r\n    </AppNavigationContext.Provider>\r\n  );\r\n}\r\n"],"mappings":";AAUI,SAEE,KAFF;AAPJ,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAE9B,SAAS,YAAY,EAAE,SAAS,GAA4B;AACjE,QAAM,EAAE,QAAQ,MAAM,IAAI,qBAAqB;AAE/C,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,SAAS,GAE3D;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,uFACT,SAAS,gBAAgB,+BAC3B;AAAA,QACA,SAAS;AAAA;AAAA,IACX;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,6OACT,SAAS,8BAA8B,iDACzC;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/navigation/shells/TabsMobileShell.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import Link from "next/link";
+import { AppNavigationContext } from "../AppNavigationContext";
+import { useNavItemsContext } from "../NavItemsContext";
+function InternalTabsBar({ topOffset = "72px" }) {
+  const { navItems } = useNavItemsContext();
+  const tabsListRef = useRef(null);
+  const activeTabRef = useRef(null);
+  const activeLabel = navItems.find((i) => i.isActive)?.label;
+  useEffect(() => {
+    if (activeTabRef.current && tabsListRef.current) {
+      const tabsList = tabsListRef.current;
+      const activeTabElement = activeTabRef.current;
+      const tabsListRect = tabsList.getBoundingClientRect();
+      const activeTabRect = activeTabElement.getBoundingClientRect();
+      const scrollLeft = activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;
+      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: "smooth" });
+    }
+  }, [activeLabel]);
+  if (!navItems.length) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: tabsListRef,
+      className: "md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide",
+      style: { top: topOffset },
+      children: navItems.map((item) => /* @__PURE__ */ jsxs(
+        Link,
+        {
+          ref: item.isActive ? activeTabRef : void 0,
+          href: item.href,
+          prefetch: true,
+          className: `flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${item.isActive ? "border-gray-950 text-gray-950" : "border-transparent text-gray-500 hover:text-gray-900"}`,
+          children: [
+            item.icon && /* @__PURE__ */ jsx(item.icon, { size: 16, className: "shrink-0" }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: item.isActive ? "paragraph-small-semibold" : "paragraph-small-medium",
+                children: item.label
+              }
+            )
+          ]
+        },
+        item.label
+      ))
+    }
+  );
+}
+function TabsMobileShell({ children, topOffset }) {
+  return /* @__PURE__ */ jsxs(AppNavigationContext.Provider, { value: { breakpoint: "mobile" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "hidden", children }),
+    /* @__PURE__ */ jsx(InternalTabsBar, { topOffset })
+  ] });
+}
+export {
+  TabsMobileShell
+};
+//# sourceMappingURL=TabsMobileShell.mjs.map

package/dist/components/navigation/shells/TabsMobileShell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/shells/TabsMobileShell.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useRef, useEffect } from 'react';\nimport Link from 'next/link';\nimport { AppNavigationContext } from '../AppNavigationContext';\nimport { useNavItemsContext } from '../NavItemsContext';\n\nfunction InternalTabsBar({ topOffset = '72px' }: { topOffset?: string }) {\n  const { navItems } = useNavItemsContext();\n  const tabsListRef = useRef<HTMLDivElement>(null);\n  const activeTabRef = useRef<HTMLAnchorElement>(null);\n\n  const activeLabel = navItems.find((i) => i.isActive)?.label;\n\n  // Scroll active tab into center when active item changes\n  useEffect(() => {\n    if (activeTabRef.current && tabsListRef.current) {\n      const tabsList = tabsListRef.current;\n      const activeTabElement = activeTabRef.current;\n      const tabsListRect = tabsList.getBoundingClientRect();\n      const activeTabRect = activeTabElement.getBoundingClientRect();\n      const scrollLeft =\n        activeTabElement.offsetLeft - tabsListRect.width / 2 + activeTabRect.width / 2;\n      tabsList.scrollTo({ left: Math.max(0, scrollLeft), behavior: 'smooth' });\n    }\n  }, [activeLabel]);\n\n  if (!navItems.length) return null;\n\n  return (\n    <div\n      ref={tabsListRef}\n      className=\"md:hidden fixed left-0 right-0 z-40 bg-white border-b border-gray-200 flex overflow-x-auto scrollbar-hide\"\n      style={{ top: topOffset }}\n    >\n      {navItems.map((item) => (\n        <Link\n          key={item.label}\n          ref={item.isActive ? activeTabRef : undefined}\n          href={item.href}\n          prefetch\n          className={`flex items-center gap-2 px-4 py-3 shrink-0 border-b-2 transition-colors ${\n            item.isActive\n              ? 'border-gray-950 text-gray-950'\n              : 'border-transparent text-gray-500 hover:text-gray-900'\n          }`}\n        >\n          {item.icon && <item.icon size={16} className=\"shrink-0\" />}\n          <span\n            className={\n              item.isActive ? 'paragraph-small-semibold' : 'paragraph-small-medium'\n            }\n          >\n            {item.label}\n          </span>\n        </Link>\n      ))}\n    </div>\n  );\n}\n\nexport function TabsMobileShell({ children, topOffset }: { children: ReactNode; topOffset?: string }) {\n  return (\n    <AppNavigationContext.Provider value={{ breakpoint: 'mobile' }}>\n      {/*\n        Children are hidden visually, but NavItems' useEffect still fires inside\n        display:none — React effects are tied to commit phase, not layout visibility.\n        This registers navItems in NavItemsContext so InternalTabsBar can read them.\n      */}\n      <div className=\"hidden\">{children}</div>\n      <InternalTabsBar topOffset={topOffset} />\n    </AppNavigationContext.Provider>\n  );\n}\n"],"mappings":";AAoCQ,SAWgB,KAXhB;AAlCR,SAAoB,QAAQ,iBAAiB;AAC7C,OAAO,UAAU;AACjB,SAAS,4BAA4B;AACrC,SAAS,0BAA0B;AAEnC,SAAS,gBAAgB,EAAE,YAAY,OAAO,GAA2B;AACvE,QAAM,EAAE,SAAS,IAAI,mBAAmB;AACxC,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,eAAe,OAA0B,IAAI;AAEnD,QAAM,cAAc,SAAS,KAAK,CAAC,MAAM,EAAE,QAAQ,GAAG;AAGtD,YAAU,MAAM;AACd,QAAI,aAAa,WAAW,YAAY,SAAS;AAC/C,YAAM,WAAW,YAAY;AAC7B,YAAM,mBAAmB,aAAa;AACtC,YAAM,eAAe,SAAS,sBAAsB;AACpD,YAAM,gBAAgB,iBAAiB,sBAAsB;AAC7D,YAAM,aACJ,iBAAiB,aAAa,aAAa,QAAQ,IAAI,cAAc,QAAQ;AAC/E,eAAS,SAAS,EAAE,MAAM,KAAK,IAAI,GAAG,UAAU,GAAG,UAAU,SAAS,CAAC;AAAA,IACzE;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,MAAI,CAAC,SAAS,OAAQ,QAAO;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO,EAAE,KAAK,UAAU;AAAA,MAEvB,mBAAS,IAAI,CAAC,SACb;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,KAAK,WAAW,eAAe;AAAA,UACpC,MAAM,KAAK;AAAA,UACX,UAAQ;AAAA,UACR,WAAW,2EACT,KAAK,WACD,kCACA,sDACN;AAAA,UAEC;AAAA,iBAAK,QAAQ,oBAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,YAAW;AAAA,YACxD;AAAA,cAAC;AAAA;AAAA,gBACC,WACE,KAAK,WAAW,6BAA6B;AAAA,gBAG9C,eAAK;AAAA;AAAA,YACR;AAAA;AAAA;AAAA,QAjBK,KAAK;AAAA,MAkBZ,CACD;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,gBAAgB,EAAE,UAAU,UAAU,GAAgD;AACpG,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,SAAS,GAM3D;AAAA,wBAAC,SAAI,WAAU,UAAU,UAAS;AAAA,IAClC,oBAAC,mBAAgB,WAAsB;AAAA,KACzC;AAEJ;","names":[]}

package/dist/components/navigation/subcomponents/BottomLinks.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconHelp, IconBulb } from "@tabler/icons-react";
+const LINKS = [
+  {
+    label: "Ajuda",
+    icon: IconHelp,
+    href: "https://ajuda.greatsoftwares.com.br/pt-br/"
+  },
+  {
+    label: "Sugest\xF5es",
+    icon: IconBulb,
+    href: "https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas"
+  }
+];
+function BottomLinks() {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: LINKS.map((link) => /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: link.href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline bg-white hover:bg-gray-100 active:bg-gray-50",
+      children: [
+        /* @__PURE__ */ jsx(link.icon, { size: 20, className: "text-gray-400" }),
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-medium text-gray-500", children: link.label })
+      ]
+    },
+    link.label
+  )) });
+}
+export {
+  BottomLinks
+};
+//# sourceMappingURL=BottomLinks.mjs.map

package/dist/components/navigation/subcomponents/BottomLinks.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/BottomLinks.tsx"],"sourcesContent":["'use client';\n\nimport { IconHelp, IconBulb } from '@tabler/icons-react';\n\nconst LINKS = [\n  {\n    label: 'Ajuda',\n    icon: IconHelp,\n    href: 'https://ajuda.greatsoftwares.com.br/pt-br/',\n  },\n  {\n    label: 'Sugestões',\n    icon: IconBulb,\n    href: 'https://ideias.greatpages.com.br/b/y0geg1ve/feature-ideas',\n  },\n] as const;\n\nexport function BottomLinks() {\n  return (\n    <div className=\"flex flex-col\">\n      {LINKS.map((link) => (\n        <a\n          key={link.label}\n          href={link.href}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className=\"rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors no-underline bg-white hover:bg-gray-100 active:bg-gray-50\"\n        >\n          <link.icon size={20} className=\"text-gray-400\" />\n          <span className=\"paragraph-small-medium text-gray-500\">\n            {link.label}\n          </span>\n        </a>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAqBQ,SAOE,KAPF;AAnBR,SAAS,UAAU,gBAAgB;AAEnC,MAAM,QAAQ;AAAA,EACZ;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAEO,SAAS,cAAc;AAC5B,SACE,oBAAC,SAAI,WAAU,iBACZ,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MAEC,MAAM,KAAK;AAAA,MACX,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAU;AAAA,MAEV;AAAA,4BAAC,KAAK,MAAL,EAAU,MAAM,IAAI,WAAU,iBAAgB;AAAA,QAC/C,oBAAC,UAAK,WAAU,wCACb,eAAK,OACR;AAAA;AAAA;AAAA,IATK,KAAK;AAAA,EAUZ,CACD,GACH;AAEJ;","names":[]}

package/dist/components/navigation/subcomponents/CreditsCard.mjs

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAppNavigationContext } from "../AppNavigationContext";
+import { Progress } from "../../../index";
+import { useBuyCreditsModal } from "../../../store/useBuyCreditsModal";
+function CreditsCard({ used, total, onClick }) {
+  const { breakpoint } = useAppNavigationContext();
+  const { openModal } = useBuyCreditsModal();
+  const handleClick = onClick ?? (() => openModal());
+  if (breakpoint !== "mobile") return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex flex-col bg-gray-950 rounded-lg gap-4 w-full px-4 pt-4 pb-[18px] cursor-pointer",
+      onClick: handleClick,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-semibold text-white", children: "Cr\xE9ditos usados" }),
+          /* @__PURE__ */ jsxs("span", { className: "paragraph-xsmall-medium text-white/50", children: [
+            used,
+            " / ",
+            total
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(Progress, { className: "bg-white/10 h-[6px]", indicatorColor: "bg-white", value: Math.round(used / total * 100) })
+      ]
+    }
+  );
+}
+export {
+  CreditsCard
+};
+//# sourceMappingURL=CreditsCard.mjs.map

package/dist/components/navigation/subcomponents/CreditsCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/CreditsCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { Progress } from '../../../index';\r\nimport { useBuyCreditsModal } from '../../../store/useBuyCreditsModal';\r\n\r\nexport interface CreditsCardProps {\r\n  used: number;\r\n  total: number;\r\n  onClick?: () => void;\r\n}\r\n\r\nexport function CreditsCard({ used, total, onClick }: CreditsCardProps) {\r\n  const { breakpoint } = useAppNavigationContext();\r\n  const { openModal } = useBuyCreditsModal();\r\n  const handleClick = onClick ?? (() => openModal());\r\n\r\n  // Only renders in mobile overlay\r\n  if (breakpoint !== 'mobile') return null;\r\n\r\n  return (\r\n    <div\r\n      className=\"flex flex-col bg-gray-950 rounded-lg gap-4 w-full px-4 pt-4 pb-[18px] cursor-pointer\"\r\n      onClick={handleClick}\r\n    >\r\n      <div className=\"flex items-center justify-between\">\r\n        <span className=\"paragraph-xsmall-semibold text-white\">Créditos usados</span>\r\n        <span className=\"paragraph-xsmall-medium text-white/50\">{used} / {total}</span>\r\n      </div>\r\n      <Progress className=\"bg-white/10 h-[6px]\" indicatorColor=\"bg-white\" value={Math.round((used / total) * 100)} />\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AA0BQ,cACA,YADA;AAxBR,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AACzB,SAAS,0BAA0B;AAQ5B,SAAS,YAAY,EAAE,MAAM,OAAO,QAAQ,GAAqB;AACtE,QAAM,EAAE,WAAW,IAAI,wBAAwB;AAC/C,QAAM,EAAE,UAAU,IAAI,mBAAmB;AACzC,QAAM,cAAc,YAAY,MAAM,UAAU;AAGhD,MAAI,eAAe,SAAU,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAS;AAAA,MAET;AAAA,6BAAC,SAAI,WAAU,qCACb;AAAA,8BAAC,UAAK,WAAU,wCAAuC,gCAAe;AAAA,UACtE,qBAAC,UAAK,WAAU,yCAAyC;AAAA;AAAA,YAAK;AAAA,YAAI;AAAA,aAAM;AAAA,WAC1E;AAAA,QACA,oBAAC,YAAS,WAAU,uBAAsB,gBAAe,YAAW,OAAO,KAAK,MAAO,OAAO,QAAS,GAAG,GAAG;AAAA;AAAA;AAAA,EAC/G;AAEJ;","names":[]}

package/dist/components/navigation/subcomponents/NavItems.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { NavItem } from "../NavItem";
+import { useNavItemsContext } from "../NavItemsContext";
+function NavItems({ items }) {
+  const { setNavItems } = useNavItemsContext();
+  useEffect(() => {
+    setNavItems(items);
+  }, [items, setNavItems]);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item) => /* @__PURE__ */ jsx(
+    NavItem,
+    {
+      label: item.label,
+      icon: item.icon,
+      href: item.href,
+      isActive: item.isActive
+    },
+    item.label
+  )) });
+}
+export {
+  NavItems
+};
+//# sourceMappingURL=NavItems.mjs.map

package/dist/components/navigation/subcomponents/NavItems.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/NavItems.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType, useEffect } from 'react';\r\nimport { NavItem } from '../NavItem';\r\nimport { useNavItemsContext } from '../NavItemsContext';\r\nimport { useRouter } from 'next/navigation';\r\n\r\nexport interface NavItemConfig {\r\n  label: string;\r\n  isActive: boolean;\r\n  icon: ElementType;\r\n  href: string;\r\n}\r\n\r\ninterface NavItemsProps {\r\n  items: NavItemConfig[];\r\n}\r\n\r\nexport function NavItems({ items }: NavItemsProps) {\r\n  const { setNavItems } = useNavItemsContext();\r\n\r\n  useEffect(() => {\r\n    setNavItems(items);\r\n  }, [items, setNavItems]);\r\n\r\n  return (\r\n    <div className=\"flex flex-col\">\r\n      {items.map((item) => (\r\n        <NavItem\r\n          key={item.label}\r\n          label={item.label}\r\n          icon={item.icon}\r\n          href={item.href}\r\n          isActive={item.isActive}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AA4BQ;AA1BR,SAAsB,iBAAiB;AACvC,SAAS,eAAe;AACxB,SAAS,0BAA0B;AAc5B,SAAS,SAAS,EAAE,MAAM,GAAkB;AACjD,QAAM,EAAE,YAAY,IAAI,mBAAmB;AAE3C,YAAU,MAAM;AACd,gBAAY,KAAK;AAAA,EACnB,GAAG,CAAC,OAAO,WAAW,CAAC;AAEvB,SACE,oBAAC,SAAI,WAAU,iBACZ,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA;AAAA,IAJV,KAAK;AAAA,EAKZ,CACD,GACH;AAEJ;","names":[]}

package/dist/components/navigation/subcomponents/PlanCard.mjs

@@ -0,0 +1,25 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Progress } from "../../../index";
+function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col rounded-md p-4 gap-4 bg-gray-50", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold text-gray-950", children: planName }),
+      /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-gray-600", children: trialLabel })
+    ] }),
+    /* @__PURE__ */ jsx(Progress, { value: progressValue, className: "bg-(--color-progress-track)" }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        className: "paragraph-small-semibold text-gray-950",
+        onClick: onKnowPlans,
+        children: "Conhe\xE7a os planos"
+      }
+    )
+  ] });
+}
+export {
+  PlanCard
+};
+//# sourceMappingURL=PlanCard.mjs.map

package/dist/components/navigation/subcomponents/PlanCard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/PlanCard.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { Button, Progress } from '../../../index';\r\n\r\nexport interface PlanCardProps {\r\n  planName: string;\r\n  trialLabel: string;\r\n  progressValue: number;\r\n  onKnowPlans: () => void;\r\n}\r\n\r\nexport function PlanCard({ planName, trialLabel, progressValue, onKnowPlans }: PlanCardProps) {\r\n  return (\r\n    <div className=\"flex flex-col rounded-md p-4 gap-4 bg-gray-50\">\r\n      <div className=\"flex flex-col gap-1\">\r\n        <span className=\"paragraph-small-semibold text-gray-950\">{planName}</span>\r\n        <span className=\"paragraph-xsmall-medium text-gray-600\">{trialLabel}</span>\r\n      </div>\r\n      <Progress value={progressValue} className=\"bg-(--color-progress-track)\" />\r\n      <Button\r\n        variant=\"secondary\"\r\n        className=\"paragraph-small-semibold text-gray-950\"\r\n        onClick={onKnowPlans}\r\n      >\r\n        Conheça os planos\r\n      </Button>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAcM,SACE,KADF;AAZN,SAAS,QAAQ,gBAAgB;AAS1B,SAAS,SAAS,EAAE,UAAU,YAAY,eAAe,YAAY,GAAkB;AAC5F,SACE,qBAAC,SAAI,WAAU,iDACb;AAAA,yBAAC,SAAI,WAAU,uBACb;AAAA,0BAAC,UAAK,WAAU,0CAA0C,oBAAS;AAAA,MACnE,oBAAC,UAAK,WAAU,yCAAyC,sBAAW;AAAA,OACtE;AAAA,IACA,oBAAC,YAAS,OAAO,eAAe,WAAU,+BAA8B;AAAA,IACxE;AAAA,MAAC;AAAA;AAAA,QACC,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,SAAS;AAAA,QACV;AAAA;AAAA,IAED;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/navigation/subcomponents/ProjectSelector.mjs

@@ -0,0 +1,145 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
+import { useAppNavigationContext } from "../AppNavigationContext";
+import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
+import { Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from "../../../index";
+import { IconChevronDown } from "@tabler/icons-react";
+function ProjectItemSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-[8.8px]", children: [
+    /* @__PURE__ */ jsx("div", { className: "skeleton size-9 rounded-lg shrink-0" }),
+    /* @__PURE__ */ jsx("div", { className: "skeleton h-4 w-36 rounded" })
+  ] });
+}
+function ProjectSelector({
+  projects,
+  selectedProject,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  onLoadMore,
+  onSelectProject,
+  onAddProject,
+  onManageProjects
+}) {
+  const { breakpoint } = useAppNavigationContext();
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [activeSection, setActiveSection] = useState(null);
+  const titleRef = useRef(null);
+  const { openProjectList, clearProjectList } = useMobileNavbarSheet();
+  useEffect(() => {
+    if (openProjectList && breakpoint === "mobile") {
+      setActiveSection("projects");
+      clearProjectList();
+    }
+  }, [openProjectList, breakpoint, clearProjectList]);
+  if (breakpoint === "desktop" || breakpoint === "md") {
+    return /* @__PURE__ */ jsx("div", { className: "mt-[6.5px] mb-[3px]", children: /* @__PURE__ */ jsx("div", { className: "flex items-center h-7", children: /* @__PURE__ */ jsx(
+      ProjectSelectorPopover,
+      {
+        open: isPopoverOpen,
+        setOpen: setIsPopoverOpen,
+        titleRef,
+        projects,
+        selectedProject,
+        isLoading,
+        isFetchingNextPage,
+        hasNextPage,
+        onLoadMore,
+        onSelectProject,
+        onAddProject,
+        onManageProjects,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate select-none cursor-pointer", ref: titleRef, children: [
+          isLoading ? /* @__PURE__ */ jsx("div", { className: "skeleton h-4 w-32 rounded" }) : /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block", children: selectedProject?.title }),
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 20,
+              className: `transition-transform duration-200 ${isPopoverOpen ? "rotate-180 text-gray-950" : "text-gray-400"}`
+            }
+          )
+        ] })
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex items-center gap-1 cursor-pointer",
+        onClick: () => setActiveSection(activeSection === "projects" ? null : "projects"),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600", children: selectedProject?.title }),
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 20,
+              className: `transition-transform duration-200 ${activeSection === "projects" ? "rotate-180 text-gray-950" : "text-gray-400"}`
+            }
+          )
+        ]
+      }
+    ) }),
+    activeSection === "projects" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }) }),
+      /* @__PURE__ */ jsxs(Command, { className: "gap-2", children: [
+        /* @__PURE__ */ jsx(CommandInput, { placeholder: "Busque aqui" }),
+        /* @__PURE__ */ jsxs(
+          CommandList,
+          {
+            className: "custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]",
+            onScroll: (event) => {
+              if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;
+              const target = event.currentTarget;
+              const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+              if (distanceToBottom <= 80) {
+                onLoadMore();
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
+              isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+              ] }) : projects.map((project) => /* @__PURE__ */ jsxs(
+                CommandItem,
+                {
+                  value: `${project.title}-${project.id}`,
+                  keywords: [project.title],
+                  className: selectedProject?.id === project.id ? "bg-gray-50 min-h-[39px]" : "min-h-[39px]",
+                  onSelect: () => {
+                    onSelectProject(project);
+                    setActiveSection(null);
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      UserAvatar,
+                      {
+                        photo: project.photo,
+                        name: project.title,
+                        size: 36
+                      }
+                    ),
+                    project.title
+                  ]
+                },
+                project.id
+              )),
+              isFetchingNextPage && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+                /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+              ] })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+export {
+  ProjectSelector
+};
+//# sourceMappingURL=ProjectSelector.mjs.map

package/dist/components/navigation/subcomponents/ProjectSelector.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/navigation/subcomponents/ProjectSelector.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useRef, useEffect, RefObject } from 'react';\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\nimport { useAppNavigationContext } from '../AppNavigationContext';\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\nimport { Command, CommandEmpty, CommandInput, CommandItem, CommandList, UserAvatar } from '../../../index';\nimport { IconChevronDown } from '@tabler/icons-react';\nimport type { NavigationProject } from '../types';\n\nexport interface ProjectSelectorProps {\n  projects: NavigationProject[];\n  selectedProject: NavigationProject | null;\n  isLoading?: boolean;\n  isFetchingNextPage?: boolean;\n  hasNextPage?: boolean;\n  onLoadMore?: () => void | Promise<unknown>;\n  onSelectProject: (project: NavigationProject) => void;\n  onAddProject?: () => void;\n  onManageProjects?: () => void;\n}\n\nfunction ProjectItemSkeleton() {\n  return (\n    <div className=\"flex items-center gap-2 p-[8.8px]\">\n      <div className=\"skeleton size-9 rounded-lg shrink-0\" />\n      <div className=\"skeleton h-4 w-36 rounded\" />\n    </div>\n  );\n}\n\nexport function ProjectSelector({\n  projects,\n  selectedProject,\n  isLoading,\n  isFetchingNextPage,\n  hasNextPage,\n  onLoadMore,\n  onSelectProject,\n  onAddProject,\n  onManageProjects,\n}: ProjectSelectorProps) {\n  const { breakpoint } = useAppNavigationContext();\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\n  const [activeSection, setActiveSection] = useState<'projects' | null>(null);\n  const titleRef = useRef<HTMLDivElement>(null);\n  const { openProjectList, clearProjectList } = useMobileNavbarSheet();\n\n  useEffect(() => {\n    if (openProjectList && breakpoint === 'mobile') {\n      setActiveSection('projects');\n      clearProjectList();\n    }\n  }, [openProjectList, breakpoint, clearProjectList]);\n\n  // Desktop and md: title + popover (aligned with NavBar logo + separator)\n  if (breakpoint === 'desktop' || breakpoint === 'md') {\n    return (\n      <div className=\"mt-[6.5px] mb-[3px]\">\n        <div className=\"flex items-center h-7\">\n          <ProjectSelectorPopover\n            open={isPopoverOpen}\n            setOpen={setIsPopoverOpen}\n            titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\n            projects={projects}\n            selectedProject={selectedProject}\n            isLoading={isLoading}\n            isFetchingNextPage={isFetchingNextPage}\n            hasNextPage={hasNextPage}\n            onLoadMore={onLoadMore}\n            onSelectProject={onSelectProject}\n            onAddProject={onAddProject}\n            onManageProjects={onManageProjects}\n          >\n            <div className=\"flex items-center gap-2 truncate select-none cursor-pointer\" ref={titleRef}>\n              {isLoading ? (\n                <div className=\"skeleton h-4 w-32 rounded\" />\n              ) : (\n                <span className=\"paragraph-medium-semibold text-gray-600 truncate max-w-[120px] inline-block\">\n                  {selectedProject?.title}\n                </span>\n              )}\n              <IconChevronDown\n                size={20}\n                className={`transition-transform duration-200 ${isPopoverOpen ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\n              />\n            </div>\n          </ProjectSelectorPopover>\n        </div>\n      </div>\n    );\n  }\n\n  // Mobile: inline collapsible accordion\n  return (\n    <div className=\"flex flex-col gap-2.5\">\n      <div className=\"flex items-center justify-between\">\n        <div\n          className=\"flex items-center gap-1 cursor-pointer\"\n          onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\n        >\n          <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\n          <IconChevronDown\n            size={20}\n            className={`transition-transform duration-200 ${\n              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\n            }`}\n          />\n        </div>\n      </div>\n      {activeSection === 'projects' && (\n        <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\n          <div className=\"flex items-center justify-between\">\n            <span className=\"paragraph-small-semibold\">Projetos</span>\n          </div>\n          <Command className=\"gap-2\">\n            <CommandInput placeholder=\"Busque aqui\" />\n            <CommandList\n              className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[227px]\"\n              onScroll={(event) => {\n                if (!hasNextPage || isFetchingNextPage || !onLoadMore) return;\n\n                const target = event.currentTarget;\n                const distanceToBottom = target.scrollHeight - target.scrollTop - target.clientHeight;\n\n                if (distanceToBottom <= 80) {\n                  onLoadMore();\n                }\n              }}\n            >\n              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\n              {isLoading ? (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              ) : (\n                projects.map((project) => (\n                  <CommandItem\n                    key={project.id}\n                    value={`${project.title}-${project.id}`}\n                    keywords={[project.title]}\n                    className={selectedProject?.id === project.id ? 'bg-gray-50 min-h-[39px]' : 'min-h-[39px]'}\n                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}\n                  >\n                    <UserAvatar\n                      photo={project.photo}\n                      name={project.title}\n                      size={36}\n                    />\n                    {project.title}\n                  </CommandItem>\n                ))\n              )}\n              {isFetchingNextPage && (\n                <>\n                  <ProjectItemSkeleton />\n                  <ProjectItemSkeleton />\n                </>\n              )}\n            </CommandList>\n          </Command>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/navigation/types.mjs

@@ -0,0 +1 @@
+//# sourceMappingURL=types.mjs.map

package/dist/components/navigation/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}