@greatapps/common 1.1.90 → 1.1.92

package/dist/components/navigation/AppNavigation.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { DesktopShell } from "./shells/DesktopShell";
+import { MdShell } from "./shells/MdShell";
+import { MobileShell } from "./shells/MobileShell";
+import { NavItems } from "./subcomponents/NavItems";
+import { ProjectSelector } from "./subcomponents/ProjectSelector";
+import { PlanCard } from "./subcomponents/PlanCard";
+import { CreditsCard } from "./subcomponents/CreditsCard";
+function AppNavigationRoot({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DesktopShell, { children }),
+    /* @__PURE__ */ jsx(MdShell, { children }),
+    /* @__PURE__ */ jsx(MobileShell, { children })
+  ] });
+}
+const AppNavigation = Object.assign(AppNavigationRoot, {
+  NavItems,
+  ProjectSelector,
+  PlanCard,
+  CreditsCard
+});
+export {
+  AppNavigation
+};
+//# sourceMappingURL=AppNavigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/AppNavigation.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ReactNode } from 'react';\r\nimport { DesktopShell } from './shells/DesktopShell';\r\nimport { MdShell } from './shells/MdShell';\r\nimport { MobileShell } from './shells/MobileShell';\r\nimport { NavItems } from './subcomponents/NavItems';\r\nimport { ProjectSelector } from './subcomponents/ProjectSelector';\r\nimport { PlanCard } from './subcomponents/PlanCard';\r\nimport { CreditsCard } from './subcomponents/CreditsCard';\r\n\r\nexport type { NavItemConfig } from './subcomponents/NavItems';\r\nexport type { ProjectSelectorProps } from './subcomponents/ProjectSelector';\r\nexport type { PlanCardProps } from './subcomponents/PlanCard';\r\nexport type { CreditsCardProps } from './subcomponents/CreditsCard';\r\n\r\ninterface AppNavigationProps {\r\n  children: ReactNode;\r\n}\r\n\r\nfunction AppNavigationRoot({ children }: AppNavigationProps) {\r\n  return (\r\n    <>\r\n      <DesktopShell>{children}</DesktopShell>\r\n      <MdShell>{children}</MdShell>\r\n      <MobileShell>{children}</MobileShell>\r\n    </>\r\n  );\r\n}\r\n\r\nexport const AppNavigation = Object.assign(AppNavigationRoot, {\r\n  NavItems,\r\n  ProjectSelector,\r\n  PlanCard,\r\n  CreditsCard,\r\n});\r\n"],"mappings":";AAsBI,mBACE,KADF;AAnBJ,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAW5B,SAAS,kBAAkB,EAAE,SAAS,GAAuB;AAC3D,SACE,iCACE;AAAA,wBAAC,gBAAc,UAAS;AAAA,IACxB,oBAAC,WAAS,UAAS;AAAA,IACnB,oBAAC,eAAa,UAAS;AAAA,KACzB;AAEJ;AAEO,MAAM,gBAAgB,OAAO,OAAO,mBAAmB;AAAA,EAC5D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;","names":[]}

package/dist/components/navigation/AppNavigationContext.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, useContext } from "react";
+const AppNavigationContext = createContext(void 0);
+function useAppNavigationContext() {
+  const ctx = useContext(AppNavigationContext);
+  if (!ctx) throw new Error("useAppNavigationContext must be used inside AppNavigation");
+  return ctx;
+}
+export {
+  AppNavigationContext,
+  useAppNavigationContext
+};
+//# sourceMappingURL=AppNavigationContext.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/AppNavigationContext.ts"],"sourcesContent":["'use client';\r\n\r\nimport { createContext, useContext } from 'react';\r\n\r\nexport type Breakpoint = 'desktop' | 'md' | 'mobile';\r\n\r\ninterface AppNavigationContextValue {\r\n  breakpoint: Breakpoint;\r\n}\r\n\r\nexport const AppNavigationContext = createContext<AppNavigationContextValue | undefined>(undefined);\r\n\r\nexport function useAppNavigationContext(): AppNavigationContextValue {\r\n  const ctx = useContext(AppNavigationContext);\r\n  if (!ctx) throw new Error('useAppNavigationContext must be used inside AppNavigation');\r\n  return ctx;\r\n}\r\n"],"mappings":";AAEA,SAAS,eAAe,kBAAkB;AAQnC,MAAM,uBAAuB,cAAqD,MAAS;AAE3F,SAAS,0BAAqD;AACnE,QAAM,MAAM,WAAW,oBAAoB;AAC3C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,2DAA2D;AACrF,SAAO;AACT;","names":[]}

package/dist/components/navigation/NavItem.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAppNavigationContext } from "./AppNavigationContext";
+import { useMobileNavbarSheet } from "../../store/useMobileNavbarSheet";
+function NavItem({ icon: Icon, label, onClick, isActive = false }) {
+  const { breakpoint } = useAppNavigationContext();
+  const { close } = useMobileNavbarSheet();
+  const handleClick = () => {
+    onClick();
+    if (breakpoint === "mobile") {
+      close();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors ${isActive ? "bg-gray-50" : "bg-white hover:bg-gray-100"} active:bg-gray-50`,
+      onClick: handleClick,
+      children: [
+        Icon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            size: 20,
+            className: isActive ? "text-gray-950" : "text-gray-400"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `paragraph-small-medium ${isActive ? "text-gray-950" : "text-gray-500"}`, children: label })
+      ]
+    }
+  );
+}
+export {
+  NavItem
+};
+//# sourceMappingURL=NavItem.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/navigation/NavItem.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ElementType } from 'react';\r\nimport { useAppNavigationContext } from './AppNavigationContext';\r\nimport { useMobileNavbarSheet } from '../../store/useMobileNavbarSheet';\r\n\r\ninterface NavItemProps {\r\n  icon?: ElementType;\r\n  label: string;\r\n  onClick: () => void;\r\n  isActive?: boolean;\r\n}\r\n\r\nexport function NavItem({ icon: Icon, label, onClick, isActive = false }: NavItemProps) {\r\n  const { breakpoint } = useAppNavigationContext();\r\n  const { close } = useMobileNavbarSheet();\r\n\r\n  const handleClick = () => {\r\n    onClick();\r\n    if (breakpoint === 'mobile') {\r\n      close();\r\n    }\r\n  };\r\n\r\n  return (\r\n    <div\r\n      className={`rounded-md flex items-center gap-2 p-3 cursor-pointer transition-colors ${\r\n        isActive ? 'bg-gray-50' : 'bg-white hover:bg-gray-100'\r\n      } active:bg-gray-50`}\r\n      onClick={handleClick}\r\n    >\r\n      {Icon && (\r\n        <Icon\r\n          size={20}\r\n          className={isActive ? 'text-gray-950' : 'text-gray-400'}\r\n        />\r\n      )}\r\n      <span className={`paragraph-small-medium ${isActive ? 'text-gray-950' : 'text-gray-500'}`}>\r\n        {label}\r\n      </span>\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAyBI,SAOI,KAPJ;AAtBJ,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AAS9B,SAAS,QAAQ,EAAE,MAAM,MAAM,OAAO,SAAS,WAAW,MAAM,GAAiB;AACtF,QAAM,EAAE,WAAW,IAAI,wBAAwB;AAC/C,QAAM,EAAE,MAAM,IAAI,qBAAqB;AAEvC,QAAM,cAAc,MAAM;AACxB,YAAQ;AACR,QAAI,eAAe,UAAU;AAC3B,YAAM;AAAA,IACR;AAAA,EACF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,2EACT,WAAW,eAAe,4BAC5B;AAAA,MACA,SAAS;AAAA,MAER;AAAA,gBACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAW,WAAW,kBAAkB;AAAA;AAAA,QAC1C;AAAA,QAEF,oBAAC,UAAK,WAAW,0BAA0B,WAAW,kBAAkB,eAAe,IACpF,iBACH;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/navigation/ProjectSelectorPopover.mjs

@@ -0,0 +1,136 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import {
+  Button,
+  Checkbox,
+  Command,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "../../index";
+import { ChevronDown, FolderOpen, Plus, Settings } from "lucide-react";
+function ProjectItemSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-2 py-1.5 gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-gray-100 animate-pulse shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "h-3.5 w-32 rounded bg-gray-100 animate-pulse" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "size-4 rounded-full bg-gray-100 animate-pulse shrink-0" })
+  ] });
+}
+function ProjectSelectorPopover({
+  open,
+  setOpen,
+  titleRef,
+  projects,
+  selectedProject,
+  onSelectProject,
+  onAddProject,
+  onManageProjects
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { className: "cursor-pointer", children: /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        size: 20,
+        className: `transition-transform duration-200 ${open ? "rotate-180 text-gray-950" : "text-gray-400"}`
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "absolute right-[-158px] top-2.5 w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200",
+        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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }),
+            /* @__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: onAddProject,
+                  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: onManageProjects, children: /* @__PURE__ */ jsx(Settings, { size: 18 }) }) }),
+                /* @__PURE__ */ jsx(TooltipContent, { children: "Visualizar todos 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-[162px]", children: 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(FolderOpen, { 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,
+                    className: isSelected ? "bg-gray-50" : "",
+                    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(
+                          Image,
+                          {
+                            alt: "Icon Project",
+                            src: project.photo ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}` : "/images/Logomark.png",
+                            width: 32,
+                            height: 32,
+                            className: "rounded-lg"
+                          }
+                        ),
+                        project.title
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Checkbox,
+                        {
+                          checked: isSelected,
+                          onCheckedChange: () => onSelectProject(project),
+                          className: "rounded-full border-0 data-[state=checked]:bg-white data-[state=checked]:border! data-[state=checked]:border-gray-200! text-gray-950!"
+                        }
+                      )
+                    ] })
+                  },
+                  project.id
+                );
+              })
+            ] }) })
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+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';\r\n\r\nimport { Dispatch, RefObject, SetStateAction } from 'react';\r\nimport Image from 'next/image';\r\nimport {\r\n  Button,\r\n  Checkbox,\r\n  Command,\r\n  CommandEmpty,\r\n  CommandInput,\r\n  CommandItem,\r\n  CommandList,\r\n  Popover,\r\n  PopoverContent,\r\n  PopoverTrigger,\r\n  Tooltip,\r\n  TooltipContent,\r\n  TooltipTrigger,\r\n} from '../../index';\r\nimport { ChevronDown, FolderOpen, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from './types';\r\n\r\ninterface ProjectSelectorPopoverProps {\r\n  open: boolean;\r\n  setOpen: Dispatch<SetStateAction<boolean>>;\r\n  titleRef?: RefObject<HTMLSpanElement | null>;\r\n  projects: NavigationProject[];\r\n  selectedProject: NavigationProject | null;\r\n  onSelectProject: (project: NavigationProject) => void;\r\n  onAddProject: () => void;\r\n  onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n  return (\r\n    <div className=\"flex items-center justify-between px-2 py-1.5 gap-2\">\r\n      <div className=\"flex items-center gap-2 flex-1\">\r\n        <div className=\"size-8 rounded-lg bg-gray-100 animate-pulse shrink-0\" />\r\n        <div className=\"h-3.5 w-32 rounded bg-gray-100 animate-pulse\" />\r\n      </div>\r\n      <div className=\"size-4 rounded-full bg-gray-100 animate-pulse shrink-0\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function ProjectSelectorPopover({\r\n  open,\r\n  setOpen,\r\n  titleRef,\r\n  projects,\r\n  selectedProject,\r\n  onSelectProject,\r\n  onAddProject,\r\n  onManageProjects,\r\n}: ProjectSelectorPopoverProps) {\r\n  return (\r\n    <Popover open={open} onOpenChange={setOpen}>\r\n      <PopoverTrigger className=\"cursor-pointer\">\r\n        <ChevronDown\r\n          size={20}\r\n          className={`transition-transform duration-200 ${open ? 'rotate-180 text-gray-950' : 'text-gray-400'}`}\r\n        />\r\n      </PopoverTrigger>\r\n      <PopoverContent\r\n        className=\"absolute right-[-158px] top-2.5 w-[296px] p-0 bg-white rounded-2xl shadow-md border border-gray-200\"\r\n        sideOffset={8}\r\n        onOpenAutoFocus={(e: Event) => e.preventDefault()}\r\n        onInteractOutside={(event: Event) => {\r\n          if (titleRef?.current?.contains(event.target as Node)) {\r\n            event.preventDefault();\r\n          }\r\n        }}\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\">Projetos</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={onAddProject}\r\n              >\r\n                <Plus size={16} />\r\n                Adicionar\r\n              </Button>\r\n              <Tooltip>\r\n                <TooltipTrigger asChild>\r\n                  <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n                    <Settings size={18} />\r\n                  </Button>\r\n                </TooltipTrigger>\r\n                <TooltipContent>Visualizar todos projetos</TooltipContent>\r\n              </Tooltip>\r\n            </div>\r\n          </div>\r\n          <Command className=\"gap-2\">\r\n            <CommandInput placeholder=\"Busque aqui\" />\r\n            <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n              {projects.length === 0 ? (\r\n                <div className=\"flex flex-col items-center justify-center gap-2 h-full text-gray-400 py-4\">\r\n                  <FolderOpen size={28} className=\"text-gray-300\" />\r\n                  <span className=\"paragraph-small-medium text-center text-gray-500\">\r\n                    Nenhum projeto encontrado.\r\n                    <br />\r\n                    Crie um projeto para começar.\r\n                  </span>\r\n                </div>\r\n              ) : (\r\n                <>\r\n                  <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n                  {projects.map((project) => {\r\n                    const isSelected = selectedProject?.id === project.id;\r\n                    return (\r\n                      <CommandItem\r\n                        key={project.id}\r\n                        value={project.title}\r\n                        className={isSelected ? 'bg-gray-50' : ''}\r\n                        onSelect={() => onSelectProject(project)}\r\n                      >\r\n                        <div className=\"flex items-center justify-between w-full cursor-pointer\">\r\n                          <div className=\"flex items-center gap-2 w-full\">\r\n                            <Image\r\n                              alt=\"Icon Project\"\r\n                              src={\r\n                                project.photo\r\n                                  ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`\r\n                                  : '/images/Logomark.png'\r\n                              }\r\n                              width={32}\r\n                              height={32}\r\n                              className=\"rounded-lg\"\r\n                            />\r\n                            {project.title}\r\n                          </div>\r\n                          <Checkbox\r\n                            checked={isSelected}\r\n                            onCheckedChange={() => onSelectProject(project)}\r\n                            className=\"rounded-full border-0 data-[state=checked]:bg-white data-[state=checked]:border! data-[state=checked]:border-gray-200! text-gray-950!\"\r\n                          />\r\n                        </div>\r\n                      </CommandItem>\r\n                    );\r\n                  })}\r\n                </>\r\n              )}\r\n            </CommandList>\r\n          </Command>\r\n        </div>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"],"mappings":";AAoCM,SAwEU,UAvER,KADF;AAjCN,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,YAAY,MAAM,gBAAgB;AAcxD,SAAS,sBAAsB;AAC7B,SACE,qBAAC,SAAI,WAAU,uDACb;AAAA,yBAAC,SAAI,WAAU,kCACb;AAAA,0BAAC,SAAI,WAAU,wDAAuD;AAAA,MACtE,oBAAC,SAAI,WAAU,gDAA+C;AAAA,OAChE;AAAA,IACA,oBAAC,SAAI,WAAU,0DAAyD;AAAA,KAC1E;AAEJ;AAEO,SAAS,uBAAuB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAC9B,SACE,qBAAC,WAAQ,MAAY,cAAc,SACjC;AAAA,wBAAC,kBAAe,WAAU,kBACxB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW,qCAAqC,OAAO,6BAA6B,eAAe;AAAA;AAAA,IACrG,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,YAAY;AAAA,QACZ,iBAAiB,CAAC,MAAa,EAAE,eAAe;AAAA,QAChD,mBAAmB,CAAC,UAAiB;AACnC,cAAI,UAAU,SAAS,SAAS,MAAM,MAAc,GAAG;AACrD,kBAAM,eAAe;AAAA,UACvB;AAAA,QACF;AAAA,QAEA,+BAAC,SAAI,WAAU,2BACb;AAAA,+BAAC,SAAI,WAAU,qCACb;AAAA,gCAAC,UAAK,WAAU,4BAA2B,sBAAQ;AAAA,YACnD,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,WAAU;AAAA,kBACV,SAAS;AAAA,kBAET;AAAA,wCAAC,QAAK,MAAM,IAAI;AAAA,oBAAE;AAAA;AAAA;AAAA,cAEpB;AAAA,cACA,qBAAC,WACC;AAAA,oCAAC,kBAAe,SAAO,MACrB,8BAAC,UAAO,SAAQ,aAAY,WAAU,cAAa,SAAS,kBAC1D,8BAAC,YAAS,MAAM,IAAI,GACtB,GACF;AAAA,gBACA,oBAAC,kBAAe,uCAAyB;AAAA,iBAC3C;AAAA,eACF;AAAA,aACF;AAAA,UACA,qBAAC,WAAQ,WAAU,SACjB;AAAA,gCAAC,gBAAa,aAAY,eAAc;AAAA,YACxC,oBAAC,eAAY,WAAU,mEACpB,mBAAS,WAAW,IACnB,qBAAC,SAAI,WAAU,6EACb;AAAA,kCAAC,cAAW,MAAM,IAAI,WAAU,iBAAgB;AAAA,cAChD,qBAAC,UAAK,WAAU,oDAAmD;AAAA;AAAA,gBAEjE,oBAAC,QAAG;AAAA,gBAAE;AAAA,iBAER;AAAA,eACF,IAEA,iCACE;AAAA,kCAAC,gBAAa,0CAA4B;AAAA,cACzC,SAAS,IAAI,CAAC,YAAY;AACzB,sBAAM,aAAa,iBAAiB,OAAO,QAAQ;AACnD,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,OAAO,QAAQ;AAAA,oBACf,WAAW,aAAa,eAAe;AAAA,oBACvC,UAAU,MAAM,gBAAgB,OAAO;AAAA,oBAEvC,+BAAC,SAAI,WAAU,2DACb;AAAA,2CAAC,SAAI,WAAU,kCACb;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,KAAI;AAAA,4BACJ,KACE,QAAQ,QACJ,GAAG,QAAQ,IAAI,uBAAuB,IAAI,QAAQ,KAAK,KACvD;AAAA,4BAEN,OAAO;AAAA,4BACP,QAAQ;AAAA,4BACR,WAAU;AAAA;AAAA,wBACZ;AAAA,wBACC,QAAQ;AAAA,yBACX;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,SAAS;AAAA,0BACT,iBAAiB,MAAM,gBAAgB,OAAO;AAAA,0BAC9C,WAAU;AAAA;AAAA,sBACZ;AAAA,uBACF;AAAA;AAAA,kBAzBK,QAAQ;AAAA,gBA0Bf;AAAA,cAEJ,CAAC;AAAA,eACH,GAEJ;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","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 { 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":";AASM;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/subcomponents/CreditsCard.mjs

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useAppNavigationContext } from "../AppNavigationContext";
+import { Progress } from "../../../index";
+function CreditsCard({ used, total, onClick }) {
+  const { breakpoint } = useAppNavigationContext();
+  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] ${onClick ? "cursor-pointer" : ""}`,
+      onClick,
+      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\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\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] ${onClick ? 'cursor-pointer' : ''}`}\r\n      onClick={onClick}\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":";AAuBQ,cACA,YADA;AArBR,SAAS,+BAA+B;AACxC,SAAS,gBAAgB;AAQlB,SAAS,YAAY,EAAE,MAAM,OAAO,QAAQ,GAAqB;AACtE,QAAM,EAAE,WAAW,IAAI,wBAAwB;AAG/C,MAAI,eAAe,SAAU,QAAO;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,yEAAyE,UAAU,mBAAmB,EAAE;AAAA,MACnH;AAAA,MAEA;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,19 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { NavItem } from "../NavItem";
+function NavItems({ items }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item) => /* @__PURE__ */ jsx(
+    NavItem,
+    {
+      label: item.label,
+      icon: item.icon,
+      isActive: item.isActive,
+      onClick: item.onClick
+    },
+    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 } from 'react';\r\nimport { NavItem } from '../NavItem';\r\n\r\nexport interface NavItemConfig {\r\n  label: string;\r\n  isActive: boolean;\r\n  icon: ElementType;\r\n  onClick: () => void;\r\n}\r\n\r\ninterface NavItemsProps {\r\n  items: NavItemConfig[];\r\n}\r\n\r\nexport function NavItems({ items }: NavItemsProps) {\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          isActive={item.isActive}\r\n          onClick={item.onClick}\r\n        />\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n"],"mappings":";AAoBQ;AAjBR,SAAS,eAAe;AAajB,SAAS,SAAS,EAAE,MAAM,GAAkB;AACjD,SACE,oBAAC,SAAI,WAAU,iBACZ,gBAAM,IAAI,CAAC,SACV;AAAA,IAAC;AAAA;AAAA,MAEC,OAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,MACX,UAAU,KAAK;AAAA,MACf,SAAS,KAAK;AAAA;AAAA,IAJT,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,130 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { useMobileNavbarSheet } from "../../../store/useMobileNavbarSheet";
+import Image from "next/image";
+import { useAppNavigationContext } from "../AppNavigationContext";
+import { ProjectSelectorPopover } from "../ProjectSelectorPopover";
+import { UsersSelectorPopover } from "../../layouts/UsersSelectorPopover";
+import { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from "../../../index";
+import { ChevronDown, Plus, Settings } from "lucide-react";
+function ProjectItemSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "size-8 rounded-lg bg-gray-100 animate-pulse shrink-0" }),
+    /* @__PURE__ */ jsx("div", { className: "h-3.5 w-32 rounded bg-gray-100 animate-pulse" })
+  ] });
+}
+function ProjectSelector({
+  projects,
+  selectedProject,
+  isLoading,
+  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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 truncate select-none", ref: titleRef, children: [
+        isLoading ? /* @__PURE__ */ jsx("div", { className: "h-4 w-32 rounded bg-gray-100 animate-pulse" }) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "cursor-pointer paragraph-medium-semibold text-gray-600 truncate",
+            onClick: () => setIsPopoverOpen((v) => !v),
+            children: selectedProject?.title && selectedProject.title.length > 15 ? `${selectedProject.title.slice(0, 15)}\u2026` : selectedProject?.title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ProjectSelectorPopover,
+          {
+            open: isPopoverOpen,
+            setOpen: setIsPopoverOpen,
+            titleRef,
+            projects,
+            selectedProject,
+            onSelectProject,
+            onAddProject,
+            onManageProjects
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(UsersSelectorPopover, { projectId: selectedProject?.id }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-600", children: selectedProject?.title }),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: 20,
+            onClick: () => setActiveSection(activeSection === "projects" ? null : "projects"),
+            className: `transition-transform duration-200 cursor-pointer ${activeSection === "projects" ? "rotate-180 text-gray-950" : "text-gray-400"}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(UsersSelectorPopover, { projectId: selectedProject?.id })
+    ] }),
+    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__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("span", { className: "paragraph-small-semibold", children: "Projetos" }),
+        /* @__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: onAddProject, children: [
+            /* @__PURE__ */ jsx(Plus, { size: 16 }),
+            "Adicionar"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "p-0 size-8", onClick: onManageProjects, children: /* @__PURE__ */ jsx(Settings, { size: 18 }) })
+        ] })
+      ] }),
+      /* @__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-[162px]", children: [
+          /* @__PURE__ */ jsx(CommandEmpty, { children: "Nenhum resultado encontrado." }),
+          isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ProjectItemSkeleton, {}),
+            /* @__PURE__ */ jsx(ProjectItemSkeleton, {})
+          ] }) : projects.map((project) => /* @__PURE__ */ jsxs(
+            CommandItem,
+            {
+              value: project.title,
+              className: selectedProject?.id === project.id ? "bg-gray-50" : "",
+              onSelect: () => {
+                onSelectProject(project);
+                setActiveSection(null);
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    alt: "Icon Project",
+                    src: project.photo ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}` : "/images/Logomark.png",
+                    width: 32,
+                    height: 32,
+                    className: "rounded-lg"
+                  }
+                ),
+                project.title
+              ]
+            },
+            project.id
+          ))
+        ] })
+      ] })
+    ] })
+  ] });
+}
+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';\r\n\r\nimport { useState, useRef, useEffect, RefObject } from 'react';\r\nimport { useMobileNavbarSheet } from '../../../store/useMobileNavbarSheet';\r\nimport Image from 'next/image';\r\nimport { useAppNavigationContext } from '../AppNavigationContext';\r\nimport { ProjectSelectorPopover } from '../ProjectSelectorPopover';\r\nimport { UsersSelectorPopover } from '../../layouts/UsersSelectorPopover';\r\nimport { Button, Command, CommandEmpty, CommandInput, CommandItem, CommandList } from '../../../index';\r\nimport { ChevronDown, Plus, Settings } from 'lucide-react';\r\nimport type { NavigationProject } from '../types';\r\n\r\nexport interface ProjectSelectorProps {\r\n  projects: NavigationProject[];\r\n  selectedProject: NavigationProject | null;\r\n  isLoading?: boolean;\r\n  onSelectProject: (project: NavigationProject) => void;\r\n  onAddProject: () => void;\r\n  onManageProjects: () => void;\r\n}\r\n\r\nfunction ProjectItemSkeleton() {\r\n  return (\r\n    <div className=\"flex items-center gap-2 p-2\">\r\n      <div className=\"size-8 rounded-lg bg-gray-100 animate-pulse shrink-0\" />\r\n      <div className=\"h-3.5 w-32 rounded bg-gray-100 animate-pulse\" />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport function ProjectSelector({\r\n  projects,\r\n  selectedProject,\r\n  isLoading,\r\n  onSelectProject,\r\n  onAddProject,\r\n  onManageProjects,\r\n}: ProjectSelectorProps) {\r\n  const { breakpoint } = useAppNavigationContext();\r\n  const [isPopoverOpen, setIsPopoverOpen] = useState(false);\r\n  const [activeSection, setActiveSection] = useState<'projects' | null>(null);\r\n  const titleRef = useRef<HTMLDivElement>(null);\r\n  const { openProjectList, clearProjectList } = useMobileNavbarSheet();\r\n\r\n  useEffect(() => {\r\n    if (openProjectList && breakpoint === 'mobile') {\r\n      setActiveSection('projects');\r\n      clearProjectList();\r\n    }\r\n  }, [openProjectList, breakpoint, clearProjectList]);\r\n\r\n  // Desktop and md: title + popover + users selector (same visual as current gpages sidebars)\r\n  if (breakpoint === 'desktop' || breakpoint === 'md') {\r\n    return (\r\n      <div className=\"flex items-center justify-between\">\r\n        <div className=\"flex items-center gap-2 truncate select-none\" ref={titleRef}>\r\n          {isLoading ? (\r\n            <div className=\"h-4 w-32 rounded bg-gray-100 animate-pulse\" />\r\n          ) : (\r\n            <span\r\n              className=\"cursor-pointer paragraph-medium-semibold text-gray-600 truncate\"\r\n              onClick={() => setIsPopoverOpen((v) => !v)}\r\n            >\r\n              {selectedProject?.title && selectedProject.title.length > 15\r\n                ? `${selectedProject.title.slice(0, 15)}…`\r\n                : selectedProject?.title}\r\n            </span>\r\n          )}\r\n          <ProjectSelectorPopover\r\n            open={isPopoverOpen}\r\n            setOpen={setIsPopoverOpen}\r\n            titleRef={titleRef as unknown as RefObject<HTMLSpanElement | null>}\r\n            projects={projects}\r\n            selectedProject={selectedProject}\r\n            onSelectProject={onSelectProject}\r\n            onAddProject={onAddProject}\r\n            onManageProjects={onManageProjects}\r\n          />\r\n        </div>\r\n        <div className=\"flex items-center gap-2\">\r\n          <UsersSelectorPopover projectId={selectedProject?.id} />\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  // Mobile: inline collapsible accordion\r\n  return (\r\n    <div className=\"flex flex-col gap-2.5\">\r\n      <div className=\"flex items-center justify-between\">\r\n        <div className=\"flex items-center gap-1\">\r\n          <span className=\"paragraph-medium-semibold text-gray-600\">{selectedProject?.title}</span>\r\n          <ChevronDown\r\n            size={20}\r\n            onClick={() => setActiveSection(activeSection === 'projects' ? null : 'projects')}\r\n            className={`transition-transform duration-200 cursor-pointer ${\r\n              activeSection === 'projects' ? 'rotate-180 text-gray-950' : 'text-gray-400'\r\n            }`}\r\n          />\r\n        </div>\r\n        <UsersSelectorPopover projectId={selectedProject?.id} />\r\n      </div>\r\n      {activeSection === 'projects' && (\r\n        <div className=\"flex flex-col p-3 gap-2 border border-gray-200 rounded-lg animate-in fade-in duration-400\">\r\n          <div className=\"flex items-center justify-between\">\r\n            <span className=\"paragraph-small-semibold\">Projetos</span>\r\n            <div className=\"flex items-center gap-1.5\">\r\n              <Button variant=\"secondary\" className=\"h-8! paragraph-small-semibold text-gray-950\" onClick={onAddProject}>\r\n                <Plus size={16} />\r\n                Adicionar\r\n              </Button>\r\n              <Button variant=\"secondary\" className=\"p-0 size-8\" onClick={onManageProjects}>\r\n                <Settings size={18} />\r\n              </Button>\r\n            </div>\r\n          </div>\r\n          <Command className=\"gap-2\">\r\n            <CommandInput placeholder=\"Busque aqui\" />\r\n            <CommandList className=\"custom-scrollbar paragraph-small-medium text-gray-600 h-[162px]\">\r\n              <CommandEmpty>Nenhum resultado encontrado.</CommandEmpty>\r\n              {isLoading ? (\r\n                <>\r\n                  <ProjectItemSkeleton />\r\n                  <ProjectItemSkeleton />\r\n                </>\r\n              ) : (\r\n                projects.map((project) => (\r\n                  <CommandItem\r\n                    key={project.id}\r\n                    value={project.title}\r\n                    className={selectedProject?.id === project.id ? 'bg-gray-50' : ''}\r\n                    onSelect={() => { onSelectProject(project); setActiveSection(null); }}\r\n                  >\r\n                    <Image\r\n                      alt=\"Icon Project\"\r\n                      src={\r\n                        project.photo\r\n                          ? `${process.env.NEXT_PUBLIC_STORAGE_URL}/${project.photo}`\r\n                          : '/images/Logomark.png'\r\n                      }\r\n                      width={32}\r\n                      height={32}\r\n                      className=\"rounded-lg\"\r\n                    />\r\n                    {project.title}\r\n                  </CommandItem>\r\n                ))\r\n              )}\r\n            </CommandList>\r\n          </Command>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\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":[]}

package/dist/index.mjs

@@ -58,6 +58,8 @@ import { NotificationPageContent } from "./components/pages/notifications/Notifi
 import { UsersSelectorPopover } from "./components/layouts/UsersSelectorPopover";
 import { ProfilePopover } from "./components/layouts/ProfilePopover";
 import { NavBarItem } from "./components/layouts/NavBarItem";
+import { AppNavigation } from "./components/navigation/AppNavigation";
+import { useMobileNavbarSheet } from "./store/useMobileNavbarSheet";
 import { Button, buttonVariants } from "./components/ui/buttons/Button";
 import { CopyButton } from "./components/ui/buttons/CopyButton";
 import { default as default3 } from "./components/ui/buttons/CancelButton";
@@ -250,6 +252,7 @@ export {
   AccountSectionType,
   AppMobileNavBar,
   AppNavBar,
+  AppNavigation,
   Badge,
   Button,
   CURRENCY_OPTIONS,
@@ -428,6 +431,7 @@ export {
   useListAvailableUsers,
   useListProjectUsers,
   useMdSidebarStore,
+  useMobileNavbarSheet,
   useModalManager,
   default6 as usePasswordVisibility,
   useSetUserData,