@greatapps/common 1.1.70 → 1.1.73

package/dist/components/account/TwoFactorAuthModal.mjs

@@ -0,0 +1,190 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft, X, Copy, RefreshCw } from "lucide-react";
+import { Button } from "../ui/buttons/Button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/overlay/Dialog";
+import { Separator } from "../ui/data-display/Separator";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "../ui/form/InputOtp";
+import useTwoFactorAuthForm from "./hooks/useTwoFactorAuthForm";
+function TwoFactorAuthModal({ open, onClose, onSuccess }) {
+  const {
+    code,
+    setCode,
+    isCodeComplete,
+    isGenerating,
+    isConfirming,
+    generateFailed,
+    retryGenerate,
+    qrcode,
+    backupCodes,
+    step,
+    handleSubmit,
+    handleFinalize,
+    handleCopyCodes,
+    resetForm
+  } = useTwoFactorAuthForm({ onSuccess, open });
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  if (step === "recovery") {
+    return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
+      DialogContent,
+      {
+        showCloseButton: false,
+        className: "flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!",
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "C\xF3digos de seguran\xE7a" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
+            /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: "C\xF3digos de seguran\xE7a" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                className: "size-8! p-0 absolute right-4",
+                onClick: handleClose,
+                children: /* @__PURE__ */ jsx(X, { size: 18 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsx("h3", { className: "paragraph-medium-semibold text-gray-950 max-w-[269px]", children: "Salve estes c\xF3digos de recupera\xE7\xE3o de emerg\xEAncia" }),
+              /* @__PURE__ */ jsxs("div", { className: "paragraph-small-regular text-gray-600", children: [
+                /* @__PURE__ */ jsx("p", { children: "Se voc\xEA perder acesso ao seu telefone, n\xE3o ser\xE1 poss\xEDvel fazer login em sua conta sem um c\xF3digo de dois fatores." }),
+                /* @__PURE__ */ jsx("br", {}),
+                /* @__PURE__ */ jsx("p", { children: "Imprima, copie ou escreva em um local seguro os c\xF3digos abaixo." })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "bg-gray-50 rounded-lg p-4 flex flex-col gap-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "paragraph-small-medium text-gray-950 whitespace-nowrap", children: backupCodes.map((backupCode, i) => /* @__PURE__ */ jsx("p", { children: backupCode }, i)) }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  className: "h-8! w-fit",
+                  onClick: handleCopyCodes,
+                  children: [
+                    /* @__PURE__ */ jsx(Copy, { size: 16 }),
+                    "Copiar c\xF3digos"
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
+            /* @__PURE__ */ jsx(Button, { className: "h-10!", type: "button", onClick: handleFinalize, children: "Finalizar" })
+          ] })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxs(
+    DialogContent,
+    {
+      showCloseButton: false,
+      className: "flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!",
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { className: "sr-only", children: /* @__PURE__ */ jsx(DialogTitle, { children: "Autentica\xE7\xE3o de dois fatores" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              className: "size-8! p-0 absolute left-4",
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsx(ArrowLeft, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "paragraph-medium-semibold text-gray-950 text-center", children: "Autentica\xE7\xE3o de dois fatores" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              className: "size-8! p-0 absolute right-4",
+              onClick: handleClose,
+              children: /* @__PURE__ */ jsx(X, { size: 18 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "form",
+          {
+            className: "flex-1 min-h-0 flex flex-col",
+            onSubmit: (e) => {
+              e.preventDefault();
+              if (isCodeComplete) handleSubmit();
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6", children: [
+                /* @__PURE__ */ jsxs("p", { className: "paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]", children: [
+                  "Instale um aplicativo autenticador no seu celular (ex.:",
+                  " ",
+                  /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: "https://support.google.com/accounts/answer/1066447",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "paragraph-small-medium underline",
+                      children: "Google Authenticator"
+                    }
+                  ),
+                  "), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o c\xF3digo de 6 d\xEDgitos gerado para continuar."
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]", children: generateFailed ? /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => retryGenerate(),
+                    className: "flex flex-col items-center gap-1.5 text-center",
+                    children: [
+                      /* @__PURE__ */ jsx(RefreshCw, { size: 20, className: "text-gray-400" }),
+                      /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-gray-500", children: "Tentar novamente" })
+                    ]
+                  }
+                ) : isGenerating || !qrcode ? /* @__PURE__ */ jsx("div", { className: "w-full h-full rounded bg-gray-100 animate-pulse" }) : (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  /* @__PURE__ */ jsx(
+                    "img",
+                    {
+                      src: qrcode,
+                      alt: "QR Code para autentica\xE7\xE3o de dois fatores",
+                      className: "w-full h-full"
+                    }
+                  )
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 w-full", children: [
+                  /* @__PURE__ */ jsx(Separator, { className: "flex-1" }),
+                  /* @__PURE__ */ jsx("span", { className: "paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap", children: "Cole os 6 d\xEDgitos abaixo" }),
+                  /* @__PURE__ */ jsx(Separator, { className: "flex-1" })
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "scroll-mt-20", children: /* @__PURE__ */ jsx(InputOTP, { maxLength: 6, value: code, onChange: setCode, children: /* @__PURE__ */ jsx(InputOTPGroup, { className: "gap-2", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsx(
+                  InputOTPSlot,
+                  {
+                    index: i,
+                    className: "w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200"
+                  },
+                  i
+                )) }) }) })
+              ] }) }),
+              /* @__PURE__ */ jsxs("div", { className: "shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white", children: [
+                /* @__PURE__ */ jsx(Button, { variant: "secondary", className: "h-10!", type: "button", onClick: handleClose, children: "Cancelar" }),
+                /* @__PURE__ */ jsx(Button, { type: "submit", className: "h-10!", disabled: !isCodeComplete || isConfirming, children: isConfirming ? "Ativando..." : "Ativar autentica\xE7\xE3o" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+export {
+  TwoFactorAuthModal as default
+};
+//# sourceMappingURL=TwoFactorAuthModal.mjs.map

package/dist/components/account/TwoFactorAuthModal.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/account/TwoFactorAuthModal.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ArrowLeft, X, Copy, RefreshCw } from 'lucide-react';\r\nimport { Button } from '../ui/buttons/Button';\r\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/overlay/Dialog';\r\nimport { Separator } from '../ui/data-display/Separator';\r\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from '../ui/form/InputOtp';\r\nimport useTwoFactorAuthForm from './hooks/useTwoFactorAuthForm';\r\n\r\ninterface TwoFactorAuthModalProps {\r\n  open: boolean;\r\n  onClose: () => void;\r\n  onSuccess?: () => void;\r\n}\r\n\r\nexport default function TwoFactorAuthModal({ open, onClose, onSuccess }: TwoFactorAuthModalProps) {\r\n  const {\r\n    code,\r\n    setCode,\r\n    isCodeComplete,\r\n    isGenerating,\r\n    isConfirming,\r\n    generateFailed,\r\n    retryGenerate,\r\n    qrcode,\r\n    backupCodes,\r\n    step,\r\n    handleSubmit,\r\n    handleFinalize,\r\n    handleCopyCodes,\r\n    resetForm,\r\n  } = useTwoFactorAuthForm({ onSuccess, open });\r\n\r\n  const handleClose = () => {\r\n    resetForm();\r\n    onClose();\r\n  };\r\n\r\n  if (step === 'recovery') {\r\n    return (\r\n      <Dialog open={open} onOpenChange={handleClose}>\r\n        <DialogContent\r\n          showCloseButton={false}\r\n          className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\"\r\n        >\r\n          <DialogHeader className=\"sr-only\">\r\n            <DialogTitle>Códigos de segurança</DialogTitle>\r\n          </DialogHeader>\r\n          <div className=\"flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\r\n            <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\r\n              Códigos de segurança\r\n            </span>\r\n            <Button\r\n              type=\"button\"\r\n              variant=\"ghost\"\r\n              className=\"size-8! p-0 absolute right-4\"\r\n              onClick={handleClose}\r\n            >\r\n              <X size={18} />\r\n            </Button>\r\n          </div>\r\n\r\n          <div className=\"flex flex-col gap-5 lg:gap-6 px-4 lg:px-5 py-5 lg:py-6 flex-1 lg:flex-none\">\r\n            <div className=\"flex flex-col gap-2\">\r\n              <h3 className=\"paragraph-medium-semibold text-gray-950 max-w-[269px]\">\r\n                Salve estes códigos de recuperação de emergência\r\n              </h3>\r\n              <div className=\"paragraph-small-regular text-gray-600\">\r\n                <p>\r\n                  Se você perder acesso ao seu telefone, não será possível fazer login em sua conta\r\n                  sem um código de dois fatores.\r\n                </p>\r\n                <br />\r\n                <p>Imprima, copie ou escreva em um local seguro os códigos abaixo.</p>\r\n              </div>\r\n            </div>\r\n\r\n            <div className=\"bg-gray-50 rounded-lg p-4 flex flex-col gap-4\">\r\n              <div className=\"paragraph-small-medium text-gray-950 whitespace-nowrap\">\r\n                {backupCodes.map((backupCode, i) => (\r\n                  <p key={i}>{backupCode}</p>\r\n                ))}\r\n              </div>\r\n              <Button\r\n                type=\"button\"\r\n                variant=\"secondary\"\r\n                className=\"h-8! w-fit\"\r\n                onClick={handleCopyCodes}\r\n              >\r\n                <Copy size={16} />\r\n                Copiar códigos\r\n              </Button>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between mt-auto lg:mt-0\">\r\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\r\n              Cancelar\r\n            </Button>\r\n            <Button className=\"h-10!\" type=\"button\" onClick={handleFinalize}>\r\n              Finalizar\r\n            </Button>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <Dialog open={open} onOpenChange={handleClose}>\r\n      <DialogContent\r\n        showCloseButton={false}\r\n        className=\"flex flex-col p-0 gap-0 max-w-full! border-0 rounded-t-2xl rounded-b-none h-[100dvh] top-0! bottom-0! left-0! right-0! translate-x-0! translate-y-0! lg:max-w-[470px]! lg:h-auto! lg:max-h-[90vh] lg:rounded-lg lg:border lg:top-[50%]! lg:left-[50%]! lg:right-auto! lg:bottom-auto! lg:translate-x-[-50%]! lg:translate-y-[-50%]!\"\r\n      >\r\n        <DialogHeader className=\"sr-only\">\r\n          <DialogTitle>Autenticação de dois fatores</DialogTitle>\r\n        </DialogHeader>\r\n        <div className=\"shrink-0 flex items-center justify-center px-4 py-3 relative border-b border-gray-200 lg:border-b-0\">\r\n          <Button\r\n            type=\"button\"\r\n            variant=\"ghost\"\r\n            className=\"size-8! p-0 absolute left-4\"\r\n            onClick={handleClose}\r\n          >\r\n            <ArrowLeft size={20} />\r\n          </Button>\r\n          <span className=\"paragraph-medium-semibold text-gray-950 text-center\">\r\n            Autenticação de dois fatores\r\n          </span>\r\n          <Button\r\n            type=\"button\"\r\n            variant=\"ghost\"\r\n            className=\"size-8! p-0 absolute right-4\"\r\n            onClick={handleClose}\r\n          >\r\n            <X size={18} />\r\n          </Button>\r\n        </div>\r\n\r\n        <form\r\n          className=\"flex-1 min-h-0 flex flex-col\"\r\n          onSubmit={(e) => {\r\n            e.preventDefault();\r\n            if (isCodeComplete) handleSubmit();\r\n          }}\r\n        >\r\n          <div className=\"flex-1 min-h-0 overflow-y-auto overscroll-contain lg:overflow-visible\">\r\n            <div className=\"flex flex-col items-center gap-4 lg:gap-8 px-4 lg:px-5 py-4 lg:py-6 pb-60 lg:pb-6\">\r\n              <p className=\"paragraph-small-regular text-gray-950 text-center max-w-full lg:max-w-[412px]\">\r\n                Instale um aplicativo autenticador no seu celular (ex.:{' '}\r\n                <a\r\n                  href=\"https://support.google.com/accounts/answer/1066447\"\r\n                  target=\"_blank\"\r\n                  rel=\"noopener noreferrer\"\r\n                  className=\"paragraph-small-medium underline\"\r\n                >\r\n                  Google Authenticator\r\n                </a>\r\n                ), escaneie o QR Code ao lado ou copie a chave no aplicativo e, em seguida, digite o\r\n                código de 6 dígitos gerado para continuar.\r\n              </p>\r\n\r\n              <div className=\"border border-gray-200 rounded-lg overflow-hidden p-2 lg:p-3 flex items-center justify-center w-[136px] h-[136px] lg:w-[203px] lg:h-[203px]\">\r\n                {generateFailed ? (\r\n                  <button\r\n                    type=\"button\"\r\n                    onClick={() => retryGenerate()}\r\n                    className=\"flex flex-col items-center gap-1.5 text-center\"\r\n                  >\r\n                    <RefreshCw size={20} className=\"text-gray-400\" />\r\n                    <span className=\"paragraph-xsmall-medium text-gray-500\">Tentar novamente</span>\r\n                  </button>\r\n                ) : isGenerating || !qrcode ? (\r\n                  <div className=\"w-full h-full rounded bg-gray-100 animate-pulse\" />\r\n                ) : (\r\n                  // eslint-disable-next-line @next/next/no-img-element\r\n                  <img\r\n                    src={qrcode}\r\n                    alt=\"QR Code para autenticação de dois fatores\"\r\n                    className=\"w-full h-full\"\r\n                  />\r\n                )}\r\n              </div>\r\n\r\n              <div className=\"flex items-center gap-3 w-full\">\r\n                <Separator className=\"flex-1\" />\r\n                <span className=\"paragraph-xsmall-medium text-gray-500 opacity-80 whitespace-nowrap\">\r\n                  Cole os 6 dígitos abaixo\r\n                </span>\r\n                <Separator className=\"flex-1\" />\r\n              </div>\r\n\r\n              <div className=\"scroll-mt-20\">\r\n                <InputOTP maxLength={6} value={code} onChange={setCode}>\r\n                  <InputOTPGroup className=\"gap-2\">\r\n                    {Array.from({ length: 6 }).map((_, i) => (\r\n                      <InputOTPSlot\r\n                        key={i}\r\n                        index={i}\r\n                        className=\"w-11! lg:w-12! h-13! lg:h-14! rounded-lg! text-lg border-gray-200\"\r\n                      />\r\n                    ))}\r\n                  </InputOTPGroup>\r\n                </InputOTP>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div className=\"shrink-0 flex items-center p-4 lg:p-5 border-t border-gray-200 justify-between gap-2 bg-white\">\r\n            <Button variant=\"secondary\" className=\"h-10!\" type=\"button\" onClick={handleClose}>\r\n              Cancelar\r\n            </Button>\r\n            <Button type=\"submit\" className=\"h-10!\" disabled={!isCodeComplete || isConfirming}>\r\n              {isConfirming ? 'Ativando...' : 'Ativar autenticação'}\r\n            </Button>\r\n          </div>\r\n        </form>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/account/constants.mjs

@@ -0,0 +1,29 @@
+import { buildLocaleOptions } from "../../utils/intl/locales";
+const GENDER_OPTIONS = [
+  { value: "masculino", label: "Masculino", apiValue: 1 },
+  { value: "feminino", label: "Feminino", apiValue: 0 }
+];
+const LANGUAGE_OPTIONS = buildLocaleOptions();
+const CURRENCY_OPTIONS = [
+  { value: "BRL", label: "BRL (R$)", displayValue: "BRL (R$)" },
+  { value: "USD", label: "USD ($)", displayValue: "USD ($)" },
+  { value: "EUR", label: "EUR (\u20AC)", displayValue: "EUR (\u20AC)" }
+];
+const TIME_FORMAT_OPTIONS = [
+  { value: "24h", label: "24 horas", displayValue: "24 horas" },
+  { value: "12h", label: "12 horas (AM/PM)", displayValue: "12 horas (AM/PM)" }
+];
+const NOTIFICATION_TYPES = [
+  "Atualiza\xE7\xF5es de projetos",
+  "Alertas de seguran\xE7a",
+  "Mudan\xE7as no plano ou faturamento",
+  "Manuten\xE7\xF5es programadas"
+];
+export {
+  CURRENCY_OPTIONS,
+  GENDER_OPTIONS,
+  LANGUAGE_OPTIONS,
+  NOTIFICATION_TYPES,
+  TIME_FORMAT_OPTIONS
+};
+//# sourceMappingURL=constants.mjs.map

package/dist/components/account/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/account/constants.ts"],"sourcesContent":["import { buildLocaleOptions } from '../../utils/intl/locales';\r\n\r\nexport const GENDER_OPTIONS = [\r\n  { value: 'masculino', label: 'Masculino', apiValue: 1 },\r\n  { value: 'feminino', label: 'Feminino', apiValue: 0 },\r\n];\r\n\r\nexport const LANGUAGE_OPTIONS = buildLocaleOptions();\r\n\r\nexport const CURRENCY_OPTIONS = [\r\n  { value: 'BRL', label: 'BRL (R$)', displayValue: 'BRL (R$)' },\r\n  { value: 'USD', label: 'USD ($)', displayValue: 'USD ($)' },\r\n  { value: 'EUR', label: 'EUR (€)', displayValue: 'EUR (€)' },\r\n];\r\n\r\nexport const TIME_FORMAT_OPTIONS = [\r\n  { value: '24h', label: '24 horas', displayValue: '24 horas' },\r\n  { value: '12h', label: '12 horas (AM/PM)', displayValue: '12 horas (AM/PM)' },\r\n];\r\n\r\nexport const NOTIFICATION_TYPES = [\r\n  'Atualizações de projetos',\r\n  'Alertas de segurança',\r\n  'Mudanças no plano ou faturamento',\r\n  'Manutenções programadas',\r\n];\r\n"],"mappings":"AAAA,SAAS,0BAA0B;AAE5B,MAAM,iBAAiB;AAAA,EAC5B,EAAE,OAAO,aAAa,OAAO,aAAa,UAAU,EAAE;AAAA,EACtD,EAAE,OAAO,YAAY,OAAO,YAAY,UAAU,EAAE;AACtD;AAEO,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB;AAAA,EAC9B,EAAE,OAAO,OAAO,OAAO,YAAY,cAAc,WAAW;AAAA,EAC5D,EAAE,OAAO,OAAO,OAAO,WAAW,cAAc,UAAU;AAAA,EAC1D,EAAE,OAAO,OAAO,OAAO,gBAAW,cAAc,eAAU;AAC5D;AAEO,MAAM,sBAAsB;AAAA,EACjC,EAAE,OAAO,OAAO,OAAO,YAAY,cAAc,WAAW;AAAA,EAC5D,EAAE,OAAO,OAAO,OAAO,oBAAoB,cAAc,mBAAmB;AAC9E;AAEO,MAAM,qBAAqB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;","names":[]}

package/dist/components/handlers/SearchParamsHandler.mjs

@@ -0,0 +1,24 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { Suspense, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+function SearchParamsHandler(options) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(SearchParamsHandlerChildren, { ...options }) });
+}
+function SearchParamsHandlerChildren(options) {
+  const searchParams = useSearchParams();
+  useEffect(() => {
+    Object.keys(options.handlers).forEach((key) => {
+      const value = searchParams.get(key);
+      if (value) {
+        options.handlers[key]();
+      }
+    });
+  }, [searchParams]);
+  return null;
+}
+export {
+  SearchParamsHandler,
+  SearchParamsHandlerChildren
+};
+//# sourceMappingURL=SearchParamsHandler.mjs.map

package/dist/components/handlers/SearchParamsHandler.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/handlers/SearchParamsHandler.tsx"],"sourcesContent":["\"use client\";\n\nimport { Suspense, useEffect } from \"react\";\nimport { useSearchParams } from \"next/navigation\";\n\ninterface SearchParamsHandlerProps {\n  handlers: {\n    [key: string]: () => void;\n  };\n}\n\n/**\n * SearchParamsHandler\n *\n * Este componente é responsável por ler os parâmetros da URL e executar callbacks\n * correspondentes a cada parâmetro encontrado.\n *\n * Por que precisamos deste componente?\n * - O Next.js 16 exige que useSearchParams() seja envolvido em um <Suspense> boundary\n * - Isso evita erros de prerendering durante o build\n * - Permite que URLs como \"/page?tab=performance\" naveguem diretamente para uma aba específica\n *\n * Exemplo de como funciona\n * 1. Usa useSearchParams() para ler o parâmetro \"tab\" da URL\n * 2. Monitora mudanças nos parâmetros com useEffect\n * 3. Quando encontra um parâmetro \"tab\", chama onTabChange com o valor\n * 4. Retorna null porque não renderiza nada na tela\n *\n * Exemplo de uso:\n * <Suspense fallback={null}>\n *   <SearchParamsHandler handlers={{ tab: () => console.log(\"Tab changed\") }} />\n * </Suspense>\n *\n * Exemplos de URL:\n * - /greatpages/123?tab=performance → abre a aba \"performance\"\n * - /greatpages/123?tab=leads → abre a aba \"leads\"\n */\nexport function SearchParamsHandler(options: SearchParamsHandlerProps) {\n  return (\n    <Suspense fallback={null}>\n      <SearchParamsHandlerChildren {...options} />\n    </Suspense>\n  );\n}\n\nexport function SearchParamsHandlerChildren(options: SearchParamsHandlerProps) {\n  const searchParams = useSearchParams();\n\n  useEffect(() => {\n    Object.keys(options.handlers).forEach((key) => {\n      const value = searchParams.get(key);\n\n      if (value) {\n        options.handlers[key]();\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [searchParams]);\n\n  return null;\n}\n"],"mappings":";AAwCM;AAtCN,SAAS,UAAU,iBAAiB;AACpC,SAAS,uBAAuB;AAkCzB,SAAS,oBAAoB,SAAmC;AACrE,SACE,oBAAC,YAAS,UAAU,MAClB,8BAAC,+BAA6B,GAAG,SAAS,GAC5C;AAEJ;AAEO,SAAS,4BAA4B,SAAmC;AAC7E,QAAM,eAAe,gBAAgB;AAErC,YAAU,MAAM;AACd,WAAO,KAAK,QAAQ,QAAQ,EAAE,QAAQ,CAAC,QAAQ;AAC7C,YAAM,QAAQ,aAAa,IAAI,GAAG;AAElC,UAAI,OAAO;AACT,gBAAQ,SAAS,GAAG,EAAE;AAAA,MACxB;AAAA,IACF,CAAC;AAAA,EAEH,GAAG,CAAC,YAAY,CAAC;AAEjB,SAAO;AACT;","names":[]}

package/dist/components/layouts/AppMobileNavBar.mjs

@@ -0,0 +1,53 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { ProfilePopover } from "./ProfilePopover";
+import { useAccountModals } from "../../store/useAccountModals";
+function AppMobileNavBar({
+  appIconActive = false,
+  appIconIndicator = false,
+  logoIndicator = false,
+  extraLeftSlot,
+  rightActionSlot,
+  menuItems = [],
+  onCreditsClick
+}) {
+  const { openConfigurations } = useAccountModals();
+  return /* @__PURE__ */ jsxs("div", { className: "fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative size-10 flex items-center justify-center", children: [
+        /* @__PURE__ */ jsx(Image, { src: "/icons/great-icon.svg", alt: "GreatApps", width: 28, height: 28 }),
+        logoIndicator && /* @__PURE__ */ jsx("div", { className: "absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"}`,
+            children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
+          }
+        ),
+        appIconIndicator && /* @__PURE__ */ jsx("div", { className: "absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl" })
+      ] }),
+      extraLeftSlot
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        ProfilePopover,
+        {
+          side: "bottom",
+          align: "end",
+          contentClassName: "",
+          onEditProfile: () => openConfigurations(),
+          onCreditsClick,
+          menuItems
+        }
+      ),
+      rightActionSlot
+    ] })
+  ] });
+}
+export {
+  AppMobileNavBar
+};
+//# sourceMappingURL=AppMobileNavBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/AppMobileNavBar.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode } from 'react';\nimport Image from 'next/image';\nimport { ProfilePopover } from './ProfilePopover';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppMobileNavBarProps {\n  appIconActive?: boolean;\n  /** Shows the colored indicator bar below the app icon */\n  appIconIndicator?: boolean;\n  /** Shows the gray indicator bar below the GreatApps logo */\n  logoIndicator?: boolean;\n  /** Extra slot rendered after the app icon (e.g. project selector) */\n  extraLeftSlot?: ReactNode;\n  /** Required: the right-side action element (toggle button, sheet button, etc.) */\n  rightActionSlot: ReactNode;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n}\n\nexport function AppMobileNavBar({\n  appIconActive = false,\n  appIconIndicator = false,\n  logoIndicator = false,\n  extraLeftSlot,\n  rightActionSlot,\n  menuItems = [],\n  onCreditsClick,\n}: AppMobileNavBarProps) {\n  const { openConfigurations } = useAccountModals();\n\n  return (\n    <div className=\"fixed top-0 left-0 right-0 flex md:hidden items-center justify-between p-4 bg-white z-50 border-b border-gray-200\">\n      <div className=\"flex items-center gap-1.5\">\n        <div className=\"relative size-10 flex items-center justify-center\">\n          <Image src=\"/icons/great-icon.svg\" alt=\"GreatApps\" width={28} height={28} />\n          {logoIndicator && (\n            <div className=\"absolute bottom-[-17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-gray-950 rounded-t-xl\" />\n          )}\n        </div>\n        <div className=\"relative\">\n          <div\n            className={`size-10 flex items-center justify-center rounded-lg transition-colors duration-300 ${\n              appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n            }`}\n          >\n            <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n          </div>\n          {appIconIndicator && (\n            <div className=\"absolute -bottom-[17px] left-1/2 -translate-x-1/2 w-5 h-[3px] bg-pages-300 rounded-t-xl\" />\n          )}\n        </div>\n        {extraLeftSlot}\n      </div>\n      <div className=\"flex items-center gap-1.5\">\n        <ProfilePopover\n          side=\"bottom\"\n          align=\"end\"\n          contentClassName=\"\"\n          onEditProfile={() => openConfigurations()}\n          onCreditsClick={onCreditsClick}\n          menuItems={menuItems}\n        />\n        {rightActionSlot}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAoCQ,SACE,KADF;AAjCR,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAC/B,SAAS,wBAAwB;AAiB1B,SAAS,gBAAgB;AAAA,EAC9B,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AACF,GAAyB;AACvB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,SACE,qBAAC,SAAI,WAAU,qHACb;AAAA,yBAAC,SAAI,WAAU,6BACb;AAAA,2BAAC,SAAI,WAAU,qDACb;AAAA,4BAAC,SAAM,KAAI,yBAAwB,KAAI,aAAY,OAAO,IAAI,QAAQ,IAAI;AAAA,QACzE,iBACC,oBAAC,SAAI,WAAU,0FAAyF;AAAA,SAE5G;AAAA,MACA,qBAAC,SAAI,WAAU,YACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,sFACT,gBAAgB,iBAAiB,aACnC;AAAA,YAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,QAC9E;AAAA,QACC,oBACC,oBAAC,SAAI,WAAU,2FAA0F;AAAA,SAE7G;AAAA,MACC;AAAA,OACH;AAAA,IACA,qBAAC,SAAI,WAAU,6BACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,eAAe,MAAM,mBAAmB;AAAA,UACxC;AAAA,UACA;AAAA;AAAA,MACF;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/layouts/AppNavBar.mjs

@@ -0,0 +1,73 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { NavBar } from "./NavBar";
+import { ProfilePopover } from "./ProfilePopover";
+import { NotificationsPopover } from "./NotificationsPopover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { useAccountModals } from "../../store/useAccountModals";
+function AppNavBar({
+  onLogoClick,
+  logoIndicatorClassName,
+  appIconHref = "/",
+  appIconActive = false,
+  appIconIndicator = false,
+  showExpandButton = false,
+  onExpandClick,
+  menuItems = [],
+  onCreditsClick,
+  onNotificationsViewAll
+}) {
+  const router = useRouter();
+  const { openConfigurations } = useAccountModals();
+  const handleLogoClick = onLogoClick ?? (() => router.push("/"));
+  const handleAppIconClick = () => router.push(appIconHref);
+  return /* @__PURE__ */ jsxs(
+    NavBar,
+    {
+      onLogoClick: handleLogoClick,
+      logoIndicatorClassName,
+      showExpandButton,
+      onExpandClick,
+      appIconSlot: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onClick: handleAppIconClick, children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `size-10 flex items-center justify-center rounded-lg hover:bg-pages-100 cursor-pointer transition-colors duration-300 ${appIconActive ? "bg-pages-300" : "bg-pages-50"}`,
+              children: /* @__PURE__ */ jsx(Image, { src: "/icons/icon-navbar.svg", alt: "GreatPages", width: 24, height: 24 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatPages" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-300 rounded-r-xl transition-opacity duration-300 ${appIconIndicator ? "opacity-100" : "opacity-0"}`
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx(
+          NotificationsPopover,
+          {
+            onViewAll: onNotificationsViewAll
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ProfilePopover,
+          {
+            onEditProfile: () => openConfigurations(),
+            onCreditsClick,
+            menuItems
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  AppNavBar
+};
+//# sourceMappingURL=AppNavBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/AppNavBar.tsx"],"sourcesContent":["'use client';\n\nimport Image from 'next/image';\nimport { useRouter } from 'next/navigation';\nimport { NavBar } from './NavBar';\nimport { ProfilePopover } from './ProfilePopover';\nimport { NotificationsPopover } from './NotificationsPopover';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '../ui/overlay/Tooltip';\nimport { useAccountModals } from '../../store/useAccountModals';\nimport type { ProfileMenuItem } from './ProfilePopover';\n\nexport interface AppNavBarProps {\n  onLogoClick?: () => void;\n  logoIndicatorClassName?: string;\n  appIconHref?: string;\n  appIconActive?: boolean;\n  /** Controls the left-side indicator bar on the app icon (opacity transition) */\n  appIconIndicator?: boolean;\n  showExpandButton?: boolean;\n  onExpandClick?: () => void;\n  menuItems?: ProfileMenuItem[];\n  onCreditsClick?: () => void;\n  onNotificationsViewAll?: () => void;\n}\n\nexport function AppNavBar({\n  onLogoClick,\n  logoIndicatorClassName,\n  appIconHref = '/',\n  appIconActive = false,\n  appIconIndicator = false,\n  showExpandButton = false,\n  onExpandClick,\n  menuItems = [],\n  onCreditsClick,\n  onNotificationsViewAll,\n}: AppNavBarProps) {\n  const router = useRouter();\n  const { openConfigurations } = useAccountModals();\n\n  const handleLogoClick = onLogoClick ?? (() => router.push('/'));\n  const handleAppIconClick = () => router.push(appIconHref);\n\n  return (\n    <NavBar\n      onLogoClick={handleLogoClick}\n      logoIndicatorClassName={logoIndicatorClassName}\n      showExpandButton={showExpandButton}\n      onExpandClick={onExpandClick}\n      appIconSlot={\n        <div className=\"relative\">\n          <Tooltip>\n            <TooltipTrigger asChild onClick={handleAppIconClick}>\n              <div\n                className={`size-10 flex items-center justify-center rounded-lg hover:bg-pages-100 cursor-pointer transition-colors duration-300 ${\n                  appIconActive ? 'bg-pages-300' : 'bg-pages-50'\n                }`}\n              >\n                <Image src=\"/icons/icon-navbar.svg\" alt=\"GreatPages\" width={24} height={24} />\n              </div>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">GreatPages</TooltipContent>\n          </Tooltip>\n          <div\n            className={`absolute -left-4 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-pages-300 rounded-r-xl transition-opacity duration-300 ${\n              appIconIndicator ? 'opacity-100' : 'opacity-0'\n            }`}\n          />\n        </div>\n      }\n    >\n      <NotificationsPopover\n        onViewAll={onNotificationsViewAll}\n      />\n      <ProfilePopover\n        onEditProfile={() => openConfigurations()}\n        onCreditsClick={onCreditsClick}\n        menuItems={menuItems}\n      />\n    </NavBar>\n  );\n}\n"],"mappings":";AAmDU,SAOM,KAPN;AAjDV,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,wBAAwB;AAiB1B,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,EACnB;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,SAAS,UAAU;AACzB,QAAM,EAAE,mBAAmB,IAAI,iBAAiB;AAEhD,QAAM,kBAAkB,gBAAgB,MAAM,OAAO,KAAK,GAAG;AAC7D,QAAM,qBAAqB,MAAM,OAAO,KAAK,WAAW;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,aACE,qBAAC,SAAI,WAAU,YACb;AAAA,6BAAC,WACC;AAAA,8BAAC,kBAAe,SAAO,MAAC,SAAS,oBAC/B;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,wHACT,gBAAgB,iBAAiB,aACnC;AAAA,cAEA,8BAAC,SAAM,KAAI,0BAAyB,KAAI,cAAa,OAAO,IAAI,QAAQ,IAAI;AAAA;AAAA,UAC9E,GACF;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,wBAAU;AAAA,WACzC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,mHACT,mBAAmB,gBAAgB,WACrC;AAAA;AAAA,QACF;AAAA,SACF;AAAA,MAGF;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA;AAAA,QACb;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,eAAe,MAAM,mBAAmB;AAAA,YACxC;AAAA,YACA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/layouts/MainLayout.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../infra/utils/clsx";
+function MainLayout({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "main-layout",
+      className: cn(
+        "h-dvh md:h-screen lg:h-screen flex flex-col md:flex-row lg:flex-row md:overflow-hidden lg:overflow-hidden",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function MainLayoutContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "main-layout-content",
+      className: cn("flex flex-col flex-1 min-h-0 md:overflow-hidden lg:overflow-hidden", className),
+      ...props,
+      children
+    }
+  );
+}
+function MainLayoutSpacer({ className, height, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "main-layout-spacer",
+      className: cn("md:hidden lg:hidden shrink-0", className),
+      style: { height },
+      ...props
+    }
+  );
+}
+function MainLayoutMain({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      "data-slot": "main-layout-main",
+      className: cn(
+        "flex-1 min-h-0 overflow-y-auto overscroll-none md:overscroll-auto lg:overscroll-auto bg-(--color-base-light)",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+export {
+  MainLayout,
+  MainLayoutContent,
+  MainLayoutMain,
+  MainLayoutSpacer
+};
+//# sourceMappingURL=MainLayout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/MainLayout.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\n\r\nfunction MainLayout({ className, children, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"main-layout\"\r\n            className={cn(\r\n                \"h-dvh md:h-screen lg:h-screen flex flex-col md:flex-row lg:flex-row md:overflow-hidden lg:overflow-hidden\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction MainLayoutContent({ className, children, ...props }: React.ComponentProps<\"div\">) {\r\n    return (\r\n        <div\r\n            data-slot=\"main-layout-content\"\r\n            className={cn(\"flex flex-col flex-1 min-h-0 md:overflow-hidden lg:overflow-hidden\", className)}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </div>\r\n    )\r\n}\r\n\r\nfunction MainLayoutSpacer({ className, height, ...props }: React.ComponentProps<\"div\"> & { height: string }) {\r\n    return (\r\n        <div\r\n            data-slot=\"main-layout-spacer\"\r\n            className={cn(\"md:hidden lg:hidden shrink-0\", className)}\r\n            style={{ height }}\r\n            {...props}\r\n        />\r\n    )\r\n}\r\n\r\nfunction MainLayoutMain({ className, children, ...props }: React.ComponentProps<\"main\">) {\r\n    return (\r\n        <main\r\n            data-slot=\"main-layout-main\"\r\n            className={cn(\r\n                \"flex-1 min-h-0 overflow-y-auto overscroll-none md:overscroll-auto lg:overscroll-auto bg-(--color-base-light)\",\r\n                className\r\n            )}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </main>\r\n    )\r\n}\r\n\r\nexport { MainLayout, MainLayoutContent, MainLayoutSpacer, MainLayoutMain }\r\n"],"mappings":";AAOQ;AAJR,SAAS,UAAU;AAEnB,SAAS,WAAW,EAAE,WAAW,UAAU,GAAG,MAAM,GAAgC;AAChF,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;AAEA,SAAS,kBAAkB,EAAE,WAAW,UAAU,GAAG,MAAM,GAAgC;AACvF,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW,GAAG,sEAAsE,SAAS;AAAA,MAC5F,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;AAEA,SAAS,iBAAiB,EAAE,WAAW,QAAQ,GAAG,MAAM,GAAqD;AACzG,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW,GAAG,gCAAgC,SAAS;AAAA,MACvD,OAAO,EAAE,OAAO;AAAA,MACf,GAAG;AAAA;AAAA,EACR;AAER;AAEA,SAAS,eAAe,EAAE,WAAW,UAAU,GAAG,MAAM,GAAiC;AACrF,SACI;AAAA,IAAC;AAAA;AAAA,MACG,aAAU;AAAA,MACV,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;","names":[]}

package/dist/components/layouts/MdSideBarNavigation.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMdSidebarStore } from "../../store/useMdSidebarStore";
+import { cn } from "../../infra/utils/clsx";
+function MdSideBarNavigation({
+  className,
+  children,
+  ...props
+}) {
+  const { isExpanded, collapse } = useMdSidebarStore();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${isExpanded ? "opacity-100" : "opacity-0 pointer-events-none"}`,
+        onClick: collapse
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${isExpanded ? "translate-x-0" : "-translate-x-full"}`,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "md-sidebar-navigation",
+            className: cn("w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200", className),
+            ...props,
+            children
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  MdSideBarNavigation
+};
+//# sourceMappingURL=MdSideBarNavigation.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/MdSideBarNavigation.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { useMdSidebarStore } from \"../../store/useMdSidebarStore\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\n\r\nfunction MdSideBarNavigation({\r\n    className,\r\n    children,\r\n    ...props\r\n}: React.ComponentProps<\"div\">) {\r\n    const { isExpanded, collapse } = useMdSidebarStore()\r\n\r\n    return (\r\n        <>\r\n            <div\r\n                className={`hidden md:block lg:hidden fixed inset-0 bg-black/50 z-20 transition-opacity duration-300 ${\r\n                    isExpanded ? \"opacity-100\" : \"opacity-0 pointer-events-none\"\r\n                }`}\r\n                onClick={collapse}\r\n            />\r\n            <div\r\n                className={`hidden md:flex lg:hidden fixed top-0 bottom-0 left-[73px] z-30 transition-transform duration-300 ease-in-out overflow-visible ${\r\n                    isExpanded ? \"translate-x-0\" : \"-translate-x-full\"\r\n                }`}\r\n            >\r\n                <div\r\n                    data-slot=\"md-sidebar-navigation\"\r\n                    className={cn(\"w-[273px] h-full flex flex-col p-4 bg-white border-r border-gray-200\", className)}\r\n                    {...props}\r\n                >\r\n                    {children}\r\n                </div>\r\n            </div>\r\n        </>\r\n    )\r\n}\r\n\r\nexport { MdSideBarNavigation };\r\n"],"mappings":";AAcQ,mBACI,KADJ;AAXR,SAAS,yBAAyB;AAClC,SAAS,UAAU;AAEnB,SAAS,oBAAoB;AAAA,EACzB;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAgC;AAC5B,QAAM,EAAE,YAAY,SAAS,IAAI,kBAAkB;AAEnD,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,4FACP,aAAa,gBAAgB,+BACjC;AAAA,QACA,SAAS;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACG,WAAW,iIACP,aAAa,kBAAkB,mBACnC;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACG,aAAU;AAAA,YACV,WAAW,GAAG,wEAAwE,SAAS;AAAA,YAC9F,GAAG;AAAA,YAEH;AAAA;AAAA,QACL;AAAA;AAAA,IACJ;AAAA,KACJ;AAER;","names":[]}

package/dist/components/layouts/NavBar.mjs

@@ -0,0 +1,64 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import { ChevronRight } from "lucide-react";
+import { Separator } from "../ui/data-display/Separator";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/overlay/Tooltip";
+import { cn } from "../../infra/utils/clsx";
+function NavBar({
+  onLogoClick,
+  logoIndicatorClassName,
+  showExpandButton = false,
+  onExpandClick,
+  appIconSlot,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 items-center mt-[6.5px]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { className: "cursor-pointer", asChild: true, onClick: onLogoClick, children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: "/icons/great-icon.svg",
+              alt: "Great Icon",
+              width: 28,
+              height: 28
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "GreatApps" })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300",
+              logoIndicatorClassName
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative w-full mt-[7.5px]", children: [
+        /* @__PURE__ */ jsx(Separator, {}),
+        showExpandButton && /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onExpandClick,
+              className: "lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10",
+              children: /* @__PURE__ */ jsx(ChevronRight, { size: 16, className: "text-gray-500" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { side: "right", children: "Expandir menu" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: appIconSlot })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-2", children })
+  ] });
+}
+export {
+  NavBar
+};
+//# sourceMappingURL=NavBar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/layouts/NavBar.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport Image from \"next/image\"\r\nimport { ChevronRight } from \"lucide-react\"\r\nimport { Separator } from \"../ui/data-display/Separator\"\r\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../ui/overlay/Tooltip\"\r\nimport { cn } from \"../../infra/utils/clsx\"\r\n\r\ntype NavBarProps = {\r\n    onLogoClick: () => void;\r\n    logoIndicatorClassName?: string;\r\n    showExpandButton?: boolean;\r\n    onExpandClick?: () => void;\r\n    appIconSlot: React.ReactNode;\r\n    children?: React.ReactNode;\r\n    className?: string;\r\n}\r\n\r\nfunction NavBar({\r\n    onLogoClick,\r\n    logoIndicatorClassName,\r\n    showExpandButton = false,\r\n    onExpandClick,\r\n    appIconSlot,\r\n    children,\r\n    className,\r\n}: NavBarProps) {\r\n    return (\r\n        <div className={cn(\"hidden md:flex flex-col justify-between h-screen p-4 border-r border-gray-200 overflow-visible z-40 bg-white\", className)}>\r\n            <div className=\"flex flex-col gap-4 items-center mt-[6.5px]\">\r\n                <div className=\"relative\">\r\n                    <Tooltip>\r\n                        <TooltipTrigger className=\"cursor-pointer\" asChild onClick={onLogoClick}>\r\n                            <Image\r\n                                src=\"/icons/great-icon.svg\"\r\n                                alt=\"Great Icon\"\r\n                                width={28}\r\n                                height={28}\r\n                            />\r\n                        </TooltipTrigger>\r\n                        <TooltipContent side=\"right\">GreatApps</TooltipContent>\r\n                    </Tooltip>\r\n                    <div\r\n                        className={cn(\r\n                            \"absolute -left-[22px] top-1/2 -translate-y-1/2 w-[3px] h-5 bg-gray-950 rounded-r-xl transition-opacity duration-300\",\r\n                            logoIndicatorClassName\r\n                        )}\r\n                    />\r\n                </div>\r\n                <div className=\"relative w-full mt-[7.5px]\">\r\n                    <Separator />\r\n                    {showExpandButton && (\r\n                        <Tooltip>\r\n                            <TooltipTrigger asChild>\r\n                                <button\r\n                                    onClick={onExpandClick}\r\n                                    className=\"lg:hidden absolute top-1/2 -translate-y-1/2 right-0 translate-x-[calc(50%+1rem)] size-8 flex items-center justify-center rounded-full border border-gray-200 bg-white hover:bg-gray-100 cursor-pointer transition-colors z-10\"\r\n                                >\r\n                                    <ChevronRight size={16} className=\"text-gray-500\" />\r\n                                </button>\r\n                            </TooltipTrigger>\r\n                            <TooltipContent side=\"right\">Expandir menu</TooltipContent>\r\n                        </Tooltip>\r\n                    )}\r\n                </div>\r\n                <div className=\"flex flex-col gap-2\">\r\n                    {appIconSlot}\r\n                </div>\r\n            </div>\r\n            <div className=\"flex flex-col items-center gap-2\">\r\n                {children}\r\n            </div>\r\n        </div>\r\n    )\r\n}\r\n\r\nexport { NavBar };\r\nexport type { NavBarProps };\r\n"],"mappings":";AAgCoB,SAEQ,KAFR;AA7BpB,OAAO,WAAW;AAClB,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAC1B,SAAS,SAAS,gBAAgB,sBAAsB;AACxD,SAAS,UAAU;AAYnB,SAAS,OAAO;AAAA,EACZ;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,GAAgB;AACZ,SACI,qBAAC,SAAI,WAAW,GAAG,gHAAgH,SAAS,GACxI;AAAA,yBAAC,SAAI,WAAU,+CACX;AAAA,2BAAC,SAAI,WAAU,YACX;AAAA,6BAAC,WACG;AAAA,8BAAC,kBAAe,WAAU,kBAAiB,SAAO,MAAC,SAAS,aACxD;AAAA,YAAC;AAAA;AAAA,cACG,KAAI;AAAA,cACJ,KAAI;AAAA,cACJ,OAAO;AAAA,cACP,QAAQ;AAAA;AAAA,UACZ,GACJ;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,uBAAS;AAAA,WAC1C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW;AAAA,cACP;AAAA,cACA;AAAA,YACJ;AAAA;AAAA,QACJ;AAAA,SACJ;AAAA,MACA,qBAAC,SAAI,WAAU,8BACX;AAAA,4BAAC,aAAU;AAAA,QACV,oBACG,qBAAC,WACG;AAAA,8BAAC,kBAAe,SAAO,MACnB;AAAA,YAAC;AAAA;AAAA,cACG,SAAS;AAAA,cACT,WAAU;AAAA,cAEV,8BAAC,gBAAa,MAAM,IAAI,WAAU,iBAAgB;AAAA;AAAA,UACtD,GACJ;AAAA,UACA,oBAAC,kBAAe,MAAK,SAAQ,2BAAa;AAAA,WAC9C;AAAA,SAER;AAAA,MACA,oBAAC,SAAI,WAAU,uBACV,uBACL;AAAA,OACJ;AAAA,IACA,oBAAC,SAAI,WAAU,oCACV,UACL;AAAA,KACJ;AAER;","names":[]}