@cnc-ti/layout-basic 8.4.0 → 8.5.0

package/dist/index.mjs

@@ -135,6 +135,28 @@ var createLucideIcon = (iconName, iconNode) => {
   return Component;
 };
 
+// ../../node_modules/lucide-react/dist/esm/icons/bell-off.js
+var BellOff = createLucideIcon("BellOff", [
+  ["path", { d: "M8.7 3A6 6 0 0 1 18 8a21.3 21.3 0 0 0 .6 5", key: "o7mx20" }],
+  ["path", { d: "M17 17H3s3-2 3-9a4.67 4.67 0 0 1 .3-1.7", key: "16f1lm" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }],
+  ["path", { d: "m2 2 20 20", key: "1ooewy" }]
+]);
+
+// ../../node_modules/lucide-react/dist/esm/icons/bell-ring.js
+var BellRing = createLucideIcon("BellRing", [
+  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }],
+  ["path", { d: "M4 2C2.8 3.7 2 5.7 2 8", key: "tap9e0" }],
+  ["path", { d: "M22 8c0-2.3-.8-4.3-2-6", key: "5bb3ad" }]
+]);
+
+// ../../node_modules/lucide-react/dist/esm/icons/bell.js
+var Bell = createLucideIcon("Bell", [
+  ["path", { d: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9", key: "1qo2s2" }],
+  ["path", { d: "M10.3 21a1.94 1.94 0 0 0 3.4 0", key: "qgo35s" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/check.js
 var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
 
@@ -192,12 +214,39 @@ var LoaderCircle = createLucideIcon("LoaderCircle", [
   ["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/mail-open.js
+var MailOpen = createLucideIcon("MailOpen", [
+  [
+    "path",
+    {
+      d: "M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z",
+      key: "1jhwl8"
+    }
+  ],
+  ["path", { d: "m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10", key: "1qfld7" }]
+]);
+
+// ../../node_modules/lucide-react/dist/esm/icons/mail.js
+var Mail = createLucideIcon("Mail", [
+  ["rect", { width: "20", height: "16", x: "2", y: "4", rx: "2", key: "18n3k1" }],
+  ["path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7", key: "1ocrg3" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/search.js
 var Search = createLucideIcon("Search", [
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }],
   ["path", { d: "m21 21-4.3-4.3", key: "1qie3q" }]
 ]);
 
+// ../../node_modules/lucide-react/dist/esm/icons/trash-2.js
+var Trash2 = createLucideIcon("Trash2", [
+  ["path", { d: "M3 6h18", key: "d0wm0j" }],
+  ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
+  ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
+  ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
+  ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
+]);
+
 // ../../node_modules/lucide-react/dist/esm/icons/x.js
 var X = createLucideIcon("X", [
   ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
@@ -2927,6 +2976,7 @@ var HeaderContainer = ({
   container = false,
   logo,
   logoLink,
+  notifications,
   children,
   ...props
 }) => {
@@ -2976,7 +3026,10 @@ var HeaderContainer = ({
             )
           }
         ) : !hasSidebar && renderLogo() }),
-        /* @__PURE__ */ jsx3("div", { className: "cnc-flex", children })
+        /* @__PURE__ */ jsxs3("div", { className: "cnc-flex", children: [
+          notifications && /* @__PURE__ */ jsx3("div", { className: "cnc-flex cnc-items-center cnc-pr-3", children: notifications }),
+          children
+        ] })
       ]
     }
   );
@@ -4621,6 +4674,725 @@ function CardList({
     }
   );
 }
+
+// src/components/organisms/header-notifications/index.tsx
+import * as React18 from "react";
+
+// src/components/organisms/header-notifications/cliente.ts
+var URL_PADRAO_NOTIFICACOES = "https://dev-apinotificacoes-b5feekb4bdfyb7c2.eastus2-01.azurewebsites.net/v1";
+var ErroNotificacoes = class _ErroNotificacoes extends Error {
+  status;
+  constructor(mensagem, status) {
+    super(mensagem);
+    this.name = "ErroNotificacoes";
+    this.status = status;
+    Object.setPrototypeOf(this, _ErroNotificacoes.prototype);
+  }
+};
+function normalizarBaseUrl(baseUrl) {
+  return baseUrl.replace(/\/+$/, "");
+}
+function extrairLista(payload) {
+  if (Array.isArray(payload)) return payload;
+  if (payload && typeof payload === "object") {
+    const registro = payload;
+    const chaves = ["dados", "data", "notificacoes", "items", "content"];
+    for (const chave of chaves) {
+      if (Array.isArray(registro[chave])) return registro[chave];
+    }
+  }
+  return [];
+}
+async function buscarNotificacoes({
+  baseUrl,
+  email,
+  sistema,
+  filtros,
+  signal
+}) {
+  const parametros = new URLSearchParams({ email, sistema });
+  for (const [chave, valor] of Object.entries(filtros ?? {})) {
+    if (valor !== void 0 && valor !== null) parametros.set(chave, String(valor));
+  }
+  const resposta = await fetch(
+    `${normalizarBaseUrl(baseUrl)}/notificacoes?${parametros.toString()}`,
+    { method: "GET", headers: { Accept: "application/json" }, signal }
+  );
+  if (!resposta.ok) {
+    throw new ErroNotificacoes(
+      `Falha ao buscar notifica\xE7\xF5es de ${sistema}`,
+      resposta.status
+    );
+  }
+  return extrairLista(await resposta.json());
+}
+async function definirStatusLeitura({ baseUrl, id, signal }, statusLeitura) {
+  const resposta = await fetch(
+    `${normalizarBaseUrl(baseUrl)}/notificacoes/${encodeURIComponent(String(id))}`,
+    {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ statusLeitura }),
+      signal
+    }
+  );
+  if (!resposta.ok) {
+    throw new ErroNotificacoes(
+      `Falha ao definir a notifica\xE7\xE3o ${id} como ${statusLeitura}`,
+      resposta.status
+    );
+  }
+}
+function marcarComoLida(parametros) {
+  return definirStatusLeitura(parametros, "LIDO");
+}
+function marcarComoNaoLida(parametros) {
+  return definirStatusLeitura(parametros, "NAO_LIDO");
+}
+async function excluirNotificacao({
+  baseUrl,
+  id,
+  signal
+}) {
+  const resposta = await fetch(
+    `${normalizarBaseUrl(baseUrl)}/notificacoes/${encodeURIComponent(String(id))}`,
+    { method: "DELETE", signal }
+  );
+  if (!resposta.ok) {
+    throw new ErroNotificacoes(
+      `Falha ao excluir a notifica\xE7\xE3o ${id}`,
+      resposta.status
+    );
+  }
+}
+function normalizarId(id) {
+  if (typeof id === "number") return id;
+  return /^\d+$/.test(id) ? Number(id) : id;
+}
+async function marcarVariasComoLidas({
+  baseUrl,
+  ids,
+  signal
+}) {
+  if (ids.length === 0) return;
+  const resposta = await fetch(`${normalizarBaseUrl(baseUrl)}/notificacoes/lote`, {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      notificacoes: ids.map((id) => ({
+        id: normalizarId(id),
+        statusLeitura: "LIDO"
+      }))
+    }),
+    signal
+  });
+  if (!resposta.ok) {
+    throw new ErroNotificacoes(
+      `Falha ao marcar ${ids.length} notifica\xE7\xF5es como lidas`,
+      resposta.status
+    );
+  }
+}
+
+// src/components/organisms/header-notifications/mapear.ts
+var UM_MINUTO = 6e4;
+var UMA_HORA = 60 * UM_MINUTO;
+var UM_DIA = 24 * UMA_HORA;
+var SETE_DIAS = 7 * UM_DIA;
+function formatarDataRelativa(valor, agora = Date.now()) {
+  if (!valor) return void 0;
+  const data = new Date(valor);
+  const instante = data.getTime();
+  if (Number.isNaN(instante)) return void 0;
+  const diferenca = agora - instante;
+  const modulo = Math.abs(diferenca);
+  if (diferenca >= SETE_DIAS) {
+    return new Intl.DateTimeFormat("pt-BR", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "2-digit"
+    }).format(data);
+  }
+  if (modulo < UM_MINUTO) return "agora";
+  const formatador = new Intl.RelativeTimeFormat("pt-BR", { numeric: "auto" });
+  const sinal = diferenca < 0 ? 1 : -1;
+  if (modulo < UMA_HORA) {
+    return formatador.format(sinal * Math.trunc(modulo / UM_MINUTO), "minute");
+  }
+  if (modulo < UM_DIA) {
+    return formatador.format(sinal * Math.trunc(modulo / UMA_HORA), "hour");
+  }
+  return formatador.format(sinal * Math.trunc(modulo / UM_DIA), "day");
+}
+function instanteDe(notificacao) {
+  const bruto = notificacao.disparadoEm ?? notificacao.dataReferencia;
+  const instante = bruto ? new Date(bruto).getTime() : Number.NaN;
+  return Number.isNaN(instante) ? 0 : instante;
+}
+var STATUS_OCULTOS = ["CANCELADO", "FALHOU"];
+function jaAconteceu(notificacao, agora) {
+  if (notificacao.disparadoEm) return true;
+  const referencia = notificacao.dataReferencia ? new Date(notificacao.dataReferencia).getTime() : Number.NaN;
+  return !Number.isNaN(referencia) && referencia <= agora;
+}
+function selecionarVisiveis(notificacoes, limite = Number.POSITIVE_INFINITY, agora = Date.now()) {
+  return notificacoes.filter(
+    (notificacao) => Boolean(notificacao) && jaAconteceu(notificacao, agora) && !STATUS_OCULTOS.includes(notificacao.status)
+  ).sort((a, b) => instanteDe(b) - instanteDe(a)).slice(0, limite);
+}
+function selecionarLembretesVencidos(notificacoes, agora = Date.now()) {
+  return notificacoes.filter((notificacao) => {
+    if (!notificacao?.lembrarNoDia) return false;
+    if (notificacao.statusLeitura === "LIDO") return false;
+    if (STATUS_OCULTOS.includes(notificacao.status)) return false;
+    const lembrete = notificacao.dataLembrete ? new Date(notificacao.dataLembrete).getTime() : Number.NaN;
+    return !Number.isNaN(lembrete) && lembrete <= agora;
+  }).sort(
+    (a, b) => new Date(b.dataLembrete ?? 0).getTime() - new Date(a.dataLembrete ?? 0).getTime()
+  );
+}
+function contarNaoLidas(notificacoes) {
+  return notificacoes.filter(
+    (notificacao) => notificacao.statusLeitura !== "LIDO"
+  ).length;
+}
+function mapearParaItem(notificacao, getHref, agora) {
+  return {
+    id: notificacao.id,
+    title: notificacao.titulo,
+    message: notificacao.mensagem ?? void 0,
+    date: formatarDataRelativa(
+      notificacao.disparadoEm ?? notificacao.dataReferencia,
+      agora
+    ),
+    read: notificacao.statusLeitura === "LIDO",
+    href: getHref?.(notificacao)
+  };
+}
+
+// src/components/organisms/header-notifications/modal-lembretes.tsx
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function ModalLembretes({
+  lembretes,
+  aberto,
+  onDispensar,
+  titulo,
+  rotuloDispensar = "Entendi"
+}) {
+  const visivel = aberto && lembretes.length > 0;
+  const tituloExibido = titulo ?? (lembretes.length === 1 ? "Voc\xEA tem um lembrete" : "Voc\xEA tem lembretes");
+  return /* @__PURE__ */ jsx25(
+    Dialog,
+    {
+      open: visivel,
+      onOpenChange: (proximoEstado) => {
+        if (!proximoEstado) onDispensar();
+      },
+      children: /* @__PURE__ */ jsxs19(
+        DialogContent,
+        {
+          className: "cnc-max-w-[440px] cnc-rounded-lg cnc-bg-white cnc-p-0",
+          onOpenAutoFocus: (evento) => evento.preventDefault(),
+          children: [
+            /* @__PURE__ */ jsxs19("div", { className: "cnc-flex cnc-items-center cnc-gap-3 cnc-border-b cnc-border-brand-gray-50 cnc-px-5 cnc-py-4", children: [
+              /* @__PURE__ */ jsx25("span", { className: "cnc-flex cnc-h-9 cnc-w-9 cnc-shrink-0 cnc-items-center cnc-justify-center cnc-rounded-full cnc-bg-brand-blue-60", children: /* @__PURE__ */ jsx25(
+                BellRing,
+                {
+                  className: "cnc-h-[18px] cnc-w-[18px] cnc-text-brand-blue-400",
+                  "aria-hidden": "true"
+                }
+              ) }),
+              /* @__PURE__ */ jsx25(DialogTitle, { className: "cnc-m-0 cnc-text-base cnc-font-extrabold cnc-text-brand-blue-900", children: tituloExibido })
+            ] }),
+            /* @__PURE__ */ jsx25("ul", { className: "cnc-m-0 cnc-max-h-[320px] cnc-list-none cnc-overflow-y-auto cnc-p-0", children: lembretes.map((lembrete) => /* @__PURE__ */ jsxs19(
+              "li",
+              {
+                className: "cnc-flex cnc-flex-col cnc-gap-1 cnc-border-b cnc-border-brand-gray-50 cnc-px-5 cnc-py-4 last:cnc-border-b-0",
+                children: [
+                  /* @__PURE__ */ jsxs19("div", { className: "cnc-flex cnc-items-baseline cnc-justify-between cnc-gap-3", children: [
+                    /* @__PURE__ */ jsx25("span", { className: "cnc-text-sm cnc-font-bold cnc-text-brand-blue-900", children: lembrete.titulo }),
+                    /* @__PURE__ */ jsx25("span", { className: "cnc-shrink-0 cnc-text-[11px] cnc-text-brand-gray-600", children: formatarDataRelativa(lembrete.dataLembrete) })
+                  ] }),
+                  lembrete.mensagem && /* @__PURE__ */ jsx25("span", { className: "cnc-text-xs cnc-leading-relaxed cnc-text-brand-gray-600", children: lembrete.mensagem })
+                ]
+              },
+              lembrete.id
+            )) }),
+            /* @__PURE__ */ jsxs19("div", { className: "cnc-flex cnc-flex-col cnc-gap-2 cnc-border-t cnc-border-brand-gray-50 cnc-px-5 cnc-py-4", children: [
+              /* @__PURE__ */ jsx25(Button, { variant: "confirm", className: "cnc-w-full", onClick: onDispensar, children: rotuloDispensar }),
+              /* @__PURE__ */ jsx25("p", { className: "cnc-m-0 cnc-text-center cnc-text-[11px] cnc-text-brand-gray-600", children: lembretes.length === 1 ? "Ao fechar, este lembrete \xE9 marcado como lido." : `Ao fechar, os ${lembretes.length} lembretes s\xE3o marcados como lidos.` })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/organisms/header-notifications/usar-notificacoes.ts
+import * as React17 from "react";
+function foiAbortado(erro) {
+  return erro?.name === "AbortError";
+}
+function usarNotificacoes({
+  email,
+  sistema,
+  baseUrl,
+  filtros,
+  intervaloAtualizacao = 6e4,
+  habilitado = true,
+  onErro
+}) {
+  const [notificacoes, setNotificacoes] = React17.useState([]);
+  const [carregando, setCarregando] = React17.useState(habilitado);
+  const notificacoesRef = React17.useRef(notificacoes);
+  const controladorRef = React17.useRef(null);
+  const jaCarregouRef = React17.useRef(false);
+  const onErroRef = React17.useRef(onErro);
+  React17.useEffect(() => {
+    notificacoesRef.current = notificacoes;
+  }, [notificacoes]);
+  React17.useEffect(() => {
+    onErroRef.current = onErro;
+  }, [onErro]);
+  const chaveFiltros = JSON.stringify(filtros ?? {});
+  const atualizar = React17.useCallback(() => {
+    if (!habilitado) return;
+    controladorRef.current?.abort();
+    const controlador = new AbortController();
+    controladorRef.current = controlador;
+    void (async () => {
+      try {
+        const lista = await buscarNotificacoes({
+          baseUrl,
+          email,
+          sistema,
+          filtros: JSON.parse(chaveFiltros),
+          signal: controlador.signal
+        });
+        if (controlador.signal.aborted) return;
+        setNotificacoes(lista);
+      } catch (erro) {
+        if (controlador.signal.aborted || foiAbortado(erro)) return;
+        onErroRef.current?.(erro);
+      } finally {
+        if (!controlador.signal.aborted) {
+          jaCarregouRef.current = true;
+          setCarregando(false);
+        }
+      }
+    })();
+  }, [baseUrl, email, sistema, chaveFiltros, habilitado]);
+  React17.useEffect(() => {
+    if (!habilitado) {
+      setCarregando(false);
+      return;
+    }
+    if (!jaCarregouRef.current) setCarregando(true);
+    atualizar();
+    return () => controladorRef.current?.abort();
+  }, [atualizar, habilitado]);
+  React17.useEffect(() => {
+    if (!habilitado || !intervaloAtualizacao) return;
+    const temporizador = window.setInterval(() => {
+      if (typeof document !== "undefined" && document.hidden) return;
+      atualizar();
+    }, intervaloAtualizacao);
+    return () => window.clearInterval(temporizador);
+  }, [atualizar, habilitado, intervaloAtualizacao]);
+  const aplicarLeitura = React17.useCallback((ids) => {
+    const alvos = new Set(ids.map(String));
+    setNotificacoes(
+      (atuais) => atuais.map(
+        (notificacao) => alvos.has(String(notificacao.id)) ? { ...notificacao, statusLeitura: "LIDO" } : notificacao
+      )
+    );
+  }, []);
+  const reverterLeitura = React17.useCallback((anteriores) => {
+    const original = new Map(
+      anteriores.map((notificacao) => [String(notificacao.id), notificacao])
+    );
+    setNotificacoes(
+      (atuais) => atuais.map((notificacao) => {
+        const anterior = original.get(String(notificacao.id));
+        return anterior ? {
+          ...notificacao,
+          statusLeitura: anterior.statusLeitura,
+          lidoEm: anterior.lidoEm
+        } : notificacao;
+      })
+    );
+  }, []);
+  const marcarUmaComoLida = React17.useCallback(
+    (id) => {
+      const alvo = notificacoesRef.current.find(
+        (notificacao) => String(notificacao.id) === String(id)
+      );
+      if (!alvo || alvo.statusLeitura === "LIDO") return;
+      aplicarLeitura([id]);
+      void marcarComoLida({ baseUrl, id }).catch((erro) => {
+        reverterLeitura([alvo]);
+        onErroRef.current?.(erro);
+      });
+    },
+    [baseUrl, aplicarLeitura, reverterLeitura]
+  );
+  const marcarComoLidas = React17.useCallback(
+    (ids) => {
+      const alvos = new Set(ids.map(String));
+      const naoLidas = notificacoesRef.current.filter(
+        (notificacao) => alvos.has(String(notificacao.id)) && notificacao.statusLeitura !== "LIDO"
+      );
+      if (naoLidas.length === 0) return;
+      aplicarLeitura(naoLidas.map((notificacao) => notificacao.id));
+      void marcarVariasComoLidas({
+        baseUrl,
+        ids: naoLidas.map((notificacao) => notificacao.id)
+      }).catch((erro) => {
+        reverterLeitura(naoLidas);
+        onErroRef.current?.(erro);
+      });
+    },
+    [baseUrl, aplicarLeitura, reverterLeitura]
+  );
+  const marcarTodasComoLidas = React17.useCallback(() => {
+    marcarComoLidas(notificacoesRef.current.map((notificacao) => notificacao.id));
+  }, [marcarComoLidas]);
+  const marcarUmaComoNaoLida = React17.useCallback(
+    (id) => {
+      const alvo = notificacoesRef.current.find(
+        (notificacao) => String(notificacao.id) === String(id)
+      );
+      if (!alvo || alvo.statusLeitura === "NAO_LIDO") return;
+      setNotificacoes(
+        (atuais) => atuais.map(
+          (notificacao) => String(notificacao.id) === String(id) ? { ...notificacao, statusLeitura: "NAO_LIDO" } : notificacao
+        )
+      );
+      void marcarComoNaoLida({ baseUrl, id }).catch((erro) => {
+        reverterLeitura([alvo]);
+        onErroRef.current?.(erro);
+      });
+    },
+    [baseUrl, reverterLeitura]
+  );
+  const excluir = React17.useCallback(
+    (id) => {
+      const alvo = notificacoesRef.current.find(
+        (notificacao) => String(notificacao.id) === String(id)
+      );
+      if (!alvo) return;
+      setNotificacoes(
+        (atuais) => atuais.filter((notificacao) => String(notificacao.id) !== String(id))
+      );
+      void excluirNotificacao({ baseUrl, id }).catch((erro) => {
+        onErroRef.current?.(erro);
+        atualizar();
+      });
+    },
+    [baseUrl, atualizar]
+  );
+  return {
+    notificacoes,
+    carregando,
+    atualizar,
+    marcarUmaComoLida,
+    marcarUmaComoNaoLida,
+    marcarComoLidas,
+    marcarTodasComoLidas,
+    excluir
+  };
+}
+
+// src/components/organisms/header-notifications/index.tsx
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+function HeaderNotifications(props) {
+  const {
+    items = [],
+    isLoading = false,
+    skeletonCount = 3,
+    title = "Notifica\xE7\xF5es",
+    emptyMessage = "Nenhuma notifica\xE7\xE3o",
+    unreadCount,
+    maxCount = 9,
+    onSelect,
+    onMarkAsRead,
+    onMarkAsUnread,
+    onDelete,
+    onMarkAllAsRead,
+    onOpenChange,
+    footer,
+    align = "end",
+    className,
+    contentClassName,
+    email,
+    sistema,
+    baseUrl = URL_PADRAO_NOTIFICACOES,
+    getHref,
+    filtros,
+    intervaloAtualizacao,
+    limite = 20,
+    onErro,
+    alertarLembretes = false,
+    tituloLembretes,
+    rotuloDispensarLembretes
+  } = props;
+  const [aberto, setAberto] = React18.useState(false);
+  const [lembretesEmAlerta, setLembretesEmAlerta] = React18.useState(
+    []
+  );
+  const avaliouLembretesRef = React18.useRef(false);
+  const conectado = Boolean(email && sistema);
+  const remoto = usarNotificacoes({
+    email: email ?? "",
+    sistema: sistema ?? "",
+    baseUrl,
+    filtros,
+    intervaloAtualizacao,
+    habilitado: conectado,
+    onErro
+  });
+  const elegiveis = React18.useMemo(
+    () => conectado ? selecionarVisiveis(remoto.notificacoes) : [],
+    [conectado, remoto.notificacoes]
+  );
+  const itensRemotos = React18.useMemo(
+    () => elegiveis.slice(0, limite).map((notificacao) => mapearParaItem(notificacao, getHref)),
+    [elegiveis, limite, getHref]
+  );
+  const itens = conectado ? itensRemotos : items;
+  const carregandoLista = conectado ? remoto.carregando : isLoading;
+  React18.useEffect(() => {
+    if (!conectado || !alertarLembretes) return;
+    if (remoto.carregando || avaliouLembretesRef.current) return;
+    avaliouLembretesRef.current = true;
+    setLembretesEmAlerta(selecionarLembretesVencidos(remoto.notificacoes));
+  }, [conectado, alertarLembretes, remoto.carregando, remoto.notificacoes]);
+  const dispensarLembretes = () => {
+    remoto.marcarComoLidas(lembretesEmAlerta.map((lembrete) => lembrete.id));
+    setLembretesEmAlerta([]);
+  };
+  const naoLidas = conectado ? contarNaoLidas(elegiveis) : unreadCount ?? items.filter((item) => !item.read).length;
+  const rotuloContagem = naoLidas > maxCount ? `${maxCount}+` : `${naoLidas}`;
+  const alterarAbertura = (proximoEstado) => {
+    setAberto(proximoEstado);
+    if (proximoEstado && conectado) remoto.atualizar();
+    onOpenChange?.(proximoEstado);
+  };
+  const selecionar = (item) => {
+    if (!item.read) {
+      if (conectado) remoto.marcarUmaComoLida(item.id);
+      onMarkAsRead?.(item);
+    }
+    if (!onSelect) return;
+    onSelect(item);
+    alterarAbertura(false);
+  };
+  const marcarTodas = () => {
+    if (conectado) remoto.marcarTodasComoLidas();
+    onMarkAllAsRead?.();
+  };
+  const alternarLeitura = (item) => {
+    if (item.read) {
+      if (conectado) remoto.marcarUmaComoNaoLida(item.id);
+      onMarkAsUnread?.(item);
+      return;
+    }
+    if (conectado) remoto.marcarUmaComoLida(item.id);
+    onMarkAsRead?.(item);
+  };
+  const excluirItem = (item) => {
+    if (conectado) remoto.excluir(item.id);
+    onDelete?.(item);
+  };
+  const podeMarcarTodas = conectado || Boolean(onMarkAllAsRead);
+  const podeAlternarLeitura = conectado || Boolean(onMarkAsUnread);
+  const podeExcluir = conectado || Boolean(onDelete);
+  const alvoClicavel = conectado || Boolean(onSelect) || Boolean(onMarkAsRead);
+  const anelDeFoco = "focus-visible:cnc-ring-2 focus-visible:cnc-ring-inset focus-visible:cnc-ring-brand-gray-500/50";
+  const renderarConteudo = () => {
+    if (carregandoLista) {
+      return /* @__PURE__ */ jsx26("div", { "aria-busy": "true", children: Array.from({ length: skeletonCount }).map((_, indice) => /* @__PURE__ */ jsx26(
+        "div",
+        {
+          className: "cnc-flex cnc-border-b cnc-border-l-[3px] cnc-border-brand-gray-50 cnc-border-l-transparent cnc-py-3 cnc-pl-3 cnc-pr-4 last:cnc-border-b-0",
+          children: /* @__PURE__ */ jsxs20("div", { className: "cnc-flex cnc-w-full cnc-flex-col cnc-gap-2", children: [
+            /* @__PURE__ */ jsx26("div", { className: "cnc-h-3 cnc-w-1/2 cnc-animate-pulse cnc-rounded cnc-bg-brand-gray-20" }),
+            /* @__PURE__ */ jsx26("div", { className: "cnc-h-3 cnc-w-3/4 cnc-animate-pulse cnc-rounded cnc-bg-brand-gray-20" })
+          ] })
+        },
+        indice
+      )) });
+    }
+    if (itens.length === 0) {
+      return /* @__PURE__ */ jsxs20("div", { className: "cnc-flex cnc-flex-col cnc-items-center cnc-justify-center cnc-px-4 cnc-py-12 cnc-text-brand-gray-200", children: [
+        /* @__PURE__ */ jsx26(BellOff, { className: "cnc-mb-2 cnc-h-7 cnc-w-7", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx26("p", { className: "cnc-text-sm", children: emptyMessage })
+      ] });
+    }
+    return /* @__PURE__ */ jsx26("ul", { className: "cnc-m-0 cnc-list-none cnc-p-0", children: itens.map((item) => {
+      const conteudo = /* @__PURE__ */ jsxs20("span", { className: "cnc-flex cnc-min-w-0 cnc-flex-1 cnc-flex-col cnc-gap-0.5", children: [
+        /* @__PURE__ */ jsxs20("span", { className: "cnc-flex cnc-items-baseline cnc-justify-between cnc-gap-2", children: [
+          /* @__PURE__ */ jsx26(
+            "span",
+            {
+              className: cn(
+                "cnc-truncate cnc-text-sm cnc-text-brand-blue-900",
+                item.read ? "cnc-font-medium" : "cnc-font-bold"
+              ),
+              children: item.title
+            }
+          ),
+          item.date && /* @__PURE__ */ jsx26("span", { className: "cnc-shrink-0 cnc-text-[11px] cnc-text-brand-gray-600", children: item.date })
+        ] }),
+        item.message && /* @__PURE__ */ jsx26("span", { className: "cnc-line-clamp-2 cnc-text-xs cnc-text-brand-gray-600", children: item.message }),
+        !item.read && /* @__PURE__ */ jsx26("span", { className: "cnc-sr-only", children: "N\xE3o lida" })
+      ] });
+      const classesLinha = cn(
+        "cnc-flex cnc-w-full cnc-items-start cnc-border-l-[3px] cnc-transition cnc-duration-200",
+        item.read ? "cnc-border-l-transparent hover:cnc-bg-brand-blue-50" : "cnc-border-l-brand-blue-400 cnc-bg-brand-blue-50 hover:cnc-bg-brand-blue-60"
+      );
+      const classesAlvo = cn(
+        "cnc-flex cnc-min-w-0 cnc-flex-1 cnc-bg-transparent cnc-py-3 cnc-pl-3 cnc-pr-2 cnc-text-left cnc-no-underline cnc-outline-none",
+        alvoClicavel && "cnc-cursor-pointer",
+        anelDeFoco
+      );
+      const classesAcao = cn(
+        "cnc-flex cnc-h-7 cnc-w-7 cnc-shrink-0 cnc-cursor-pointer cnc-items-center cnc-justify-center cnc-rounded cnc-border-0 cnc-bg-transparent cnc-p-0 cnc-text-brand-gray-200 cnc-outline-none cnc-transition cnc-duration-200 hover:cnc-bg-white",
+        anelDeFoco
+      );
+      const renderarAlvo = () => alvoClicavel ? /* @__PURE__ */ jsx26(
+        "button",
+        {
+          type: "button",
+          onClick: () => selecionar(item),
+          className: classesAlvo,
+          children: conteudo
+        }
+      ) : /* @__PURE__ */ jsx26("div", { className: classesAlvo, children: conteudo });
+      const rotuloLeitura = item.read ? "Marcar como n\xE3o lida" : "Marcar como lida";
+      return /* @__PURE__ */ jsx26(
+        "li",
+        {
+          className: "cnc-border-b cnc-border-brand-gray-50 last:cnc-border-b-0",
+          children: /* @__PURE__ */ jsxs20("div", { className: classesLinha, children: [
+            renderarAlvo(),
+            (podeAlternarLeitura || podeExcluir) && /* @__PURE__ */ jsxs20("div", { className: "cnc-flex cnc-shrink-0 cnc-items-center cnc-gap-1 cnc-py-3 cnc-pr-2", children: [
+              podeAlternarLeitura && /* @__PURE__ */ jsx26(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": rotuloLeitura,
+                  title: rotuloLeitura,
+                  onClick: () => alternarLeitura(item),
+                  className: cn(
+                    classesAcao,
+                    "hover:cnc-text-brand-blue-400"
+                  ),
+                  children: item.read ? /* @__PURE__ */ jsx26(Mail, { className: "cnc-h-4 cnc-w-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx26(
+                    MailOpen,
+                    {
+                      className: "cnc-h-4 cnc-w-4",
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              podeExcluir && /* @__PURE__ */ jsx26(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Excluir notifica\xE7\xE3o",
+                  title: "Excluir notifica\xE7\xE3o",
+                  onClick: () => excluirItem(item),
+                  className: cn(classesAcao, "hover:cnc-text-brand-red-600"),
+                  children: /* @__PURE__ */ jsx26(Trash2, { className: "cnc-h-4 cnc-w-4", "aria-hidden": "true" })
+                }
+              )
+            ] })
+          ] })
+        },
+        item.id
+      );
+    }) });
+  };
+  const temRodapePadrao = podeMarcarTodas && naoLidas > 0;
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    alertarLembretes && /* @__PURE__ */ jsx26(
+      ModalLembretes,
+      {
+        lembretes: lembretesEmAlerta,
+        aberto: lembretesEmAlerta.length > 0,
+        onDispensar: dispensarLembretes,
+        titulo: tituloLembretes,
+        rotuloDispensar: rotuloDispensarLembretes
+      }
+    ),
+    /* @__PURE__ */ jsxs20(Popover, { open: aberto, onOpenChange: alterarAbertura, children: [
+      /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs20(
+        "button",
+        {
+          type: "button",
+          "aria-label": naoLidas > 0 ? `${title}, ${naoLidas} n\xE3o ${naoLidas === 1 ? "lida" : "lidas"}` : title,
+          className: cn(
+            "cnc-relative cnc-flex cnc-h-10 cnc-w-10 cnc-items-center cnc-justify-center cnc-rounded-full cnc-transition cnc-duration-300 cnc-ease-in-out hover:cnc-bg-brand-blue-60 data-[state=open]:cnc-bg-brand-blue-60 cnc-cursor-pointer cnc-outline-none cnc-header-item",
+            anelDeFoco,
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx26(
+              Bell,
+              {
+                className: "cnc-h-5 cnc-w-5 cnc-text-brand-blue-900 cnc-header-item",
+                "aria-hidden": "true"
+              }
+            ),
+            naoLidas > 0 && /* @__PURE__ */ jsx26(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "cnc-absolute -cnc-right-0.5 -cnc-top-0.5 cnc-flex cnc-h-[18px] cnc-min-w-[18px] cnc-items-center cnc-justify-center cnc-rounded-full cnc-border-2 cnc-border-white cnc-bg-brand-red-500 cnc-px-1 cnc-text-[10px] cnc-font-bold cnc-leading-none cnc-text-white",
+                children: rotuloContagem
+              }
+            )
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs20(
+        PopoverContent,
+        {
+          align,
+          sideOffset: 20,
+          "aria-label": title,
+          style: { width: "min(380px, calc(100vw - 2rem))", padding: 0 },
+          className: cn(
+            "cnc-overflow-hidden cnc-rounded-lg cnc-border cnc-border-brand-gray-50 cnc-bg-white cnc-shadow-custom",
+            contentClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxs20("div", { className: "cnc-flex cnc-items-center cnc-justify-between cnc-gap-2 cnc-border-b cnc-border-brand-gray-50 cnc-px-4 cnc-py-3", children: [
+              /* @__PURE__ */ jsx26("h2", { className: "cnc-m-0 cnc-text-base cnc-font-extrabold cnc-text-brand-blue-900", children: title }),
+              naoLidas > 0 && /* @__PURE__ */ jsx26("span", { className: "cnc-rounded-md cnc-bg-brand-blue-60 cnc-px-2 cnc-py-1 cnc-text-xs cnc-font-semibold cnc-text-brand-blue-400", children: naoLidas === 1 ? "1 nova" : `${naoLidas} novas` })
+            ] }),
+            /* @__PURE__ */ jsx26("div", { className: "cnc-max-h-[360px] cnc-overflow-y-auto", children: renderarConteudo() }),
+            footer ? /* @__PURE__ */ jsx26("div", { className: "cnc-border-t cnc-border-brand-gray-50 cnc-px-4 cnc-py-3", children: footer }) : temRodapePadrao && /* @__PURE__ */ jsx26("div", { className: "cnc-flex cnc-justify-end cnc-border-t cnc-border-brand-gray-50 cnc-px-4 cnc-py-3", children: /* @__PURE__ */ jsx26(
+              "button",
+              {
+                type: "button",
+                onClick: marcarTodas,
+                className: cn(
+                  "cnc-cursor-pointer cnc-rounded cnc-bg-transparent cnc-p-0 cnc-text-xs cnc-font-semibold cnc-text-brand-blue-100 cnc-outline-none hover:cnc-underline",
+                  anelDeFoco
+                ),
+                children: "Marcar todas como lidas"
+              }
+            ) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
 export {
   AplicationsHeader,
   AppsMenu,
@@ -4671,9 +5443,11 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  ErroNotificacoes,
   Filter,
   Header,
   HeaderContainer,
+  HeaderNotifications,
   HeaderProfileHeader,
   HeaderProfileItem,
   Input,
@@ -4710,6 +5484,7 @@ export {
   TabsList,
   TabsTrigger,
   Title2 as Title,
+  URL_PADRAO_NOTIFICACOES,
   availableApps,
   buttonVariants
 };
@@ -4747,6 +5522,30 @@ lucide-react/dist/esm/createLucideIcon.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/bell-off.js:
+  (**
+   * @license lucide-react v0.453.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/bell-ring.js:
+  (**
+   * @license lucide-react v0.453.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/bell.js:
+  (**
+   * @license lucide-react v0.453.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/icons/check.js:
   (**
    * @license lucide-react v0.453.0 - ISC
@@ -4827,6 +5626,22 @@ lucide-react/dist/esm/icons/loader-circle.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/mail-open.js:
+  (**
+   * @license lucide-react v0.453.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
+lucide-react/dist/esm/icons/mail.js:
+  (**
+   * @license lucide-react v0.453.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/icons/search.js:
   (**
    * @license lucide-react v0.453.0 - ISC
@@ -4835,6 +5650,14 @@ lucide-react/dist/esm/icons/search.js:
    * See the LICENSE file in the root directory of this source tree.
    *)
 
+lucide-react/dist/esm/icons/trash-2.js:
+  (**
+   * @license lucide-react v0.453.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
+
 lucide-react/dist/esm/icons/x.js:
   (**
    * @license lucide-react v0.453.0 - ISC