@nextelco/common-ui 2.1.106 → 2.1.107

package/dist/esm/v1/components/overlays/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,95 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback, useContext, createContext } from "react";
+import Dialog from "../Dialog/Dialog.js";
+import Button from "../../../primitives/buttons/Button/Button.js";
+import { WarningIcon } from "../../../foundations/icons/icons.js";
+function ConfirmDialog({
+  open,
+  title,
+  message,
+  detail,
+  tone = "default",
+  confirmLabel = "Confirmar",
+  cancelLabel = "Cancelar",
+  closeLabel = "Fechar",
+  loading = false,
+  secondaryAction,
+  onConfirm,
+  onCancel
+}) {
+  const danger = tone === "danger";
+  const confirmRef = useRef(null);
+  const cancelRef = useRef(null);
+  useEffect(() => {
+    if (open) (danger ? cancelRef : confirmRef).current?.focus();
+  }, [open, danger]);
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose: () => !loading && onCancel(),
+      title,
+      size: "sm",
+      closeLabel,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { ref: confirmRef, variant: danger ? "danger" : "primary", loading, onClick: onConfirm, children: confirmLabel }),
+        secondaryAction && /* @__PURE__ */ jsx(Button, { variant: "secondary", disabled: loading, onClick: secondaryAction.onClick, children: secondaryAction.label }),
+        /* @__PURE__ */ jsx(Button, { ref: cancelRef, variant: "secondary", disabled: loading, onClick: onCancel, children: cancelLabel })
+      ] }),
+      children: (message || detail) && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        danger && /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 flex-none items-center justify-center rounded-full bg-incumprido-bg text-incumprido", children: /* @__PURE__ */ jsx(WarningIcon, { size: 18 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 self-center", children: [
+          message && /* @__PURE__ */ jsx("div", { className: "m-0 text-control leading-relaxed text-foreground", children: message }),
+          detail && /* @__PURE__ */ jsx("div", { className: "m-0 mt-1 text-caption leading-relaxed text-muted-foreground", children: detail })
+        ] })
+      ] })
+    }
+  );
+}
+const ConfirmContext = createContext(null);
+function ConfirmProvider({ children, confirmLabel, cancelLabel, closeLabel }) {
+  const [pending, setPending] = useState(null);
+  const resolver = useRef(null);
+  const confirm = useCallback((options) => {
+    resolver.current?.(false);
+    setPending(options);
+    return new Promise((resolve) => {
+      resolver.current = resolve;
+    });
+  }, []);
+  const answer = (ok) => {
+    resolver.current?.(ok);
+    resolver.current = null;
+    setPending(null);
+  };
+  return /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: confirm, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: pending !== null,
+        title: pending?.title ?? "",
+        message: pending?.message,
+        detail: pending?.detail,
+        tone: pending?.tone,
+        secondaryAction: pending?.secondaryAction,
+        confirmLabel: pending?.confirmLabel ?? confirmLabel,
+        cancelLabel: pending?.cancelLabel ?? cancelLabel,
+        closeLabel: pending?.closeLabel ?? closeLabel,
+        onConfirm: () => answer(true),
+        onCancel: () => answer(false)
+      }
+    )
+  ] });
+}
+function useConfirm() {
+  const confirm = useContext(ConfirmContext);
+  if (!confirm) throw new Error("useConfirm: falta o <ConfirmProvider> à volta da app");
+  return confirm;
+}
+export {
+  ConfirmProvider,
+  ConfirmDialog as default,
+  useConfirm
+};
+//# sourceMappingURL=ConfirmDialog.js.map

package/dist/esm/v1/components/overlays/ConfirmDialog/ConfirmDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.js","sources":["../../../../../../src/v1/components/overlays/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'\r\nimport Dialog from '../Dialog/Dialog'\r\nimport Button from '../../../primitives/buttons/Button/Button'\r\nimport { WarningIcon } from '../../../foundations/icons/icons'\r\n\r\nexport interface ConfirmDialogProps {\r\n  open: boolean\r\n  /** Curto: a ação ou a pergunta (ex: \"Apagar despesa\"). */\r\n  title: React.ReactNode\r\n  /** A pergunta ou o que vai acontecer (ex: \"Tem a certeza que pretende apagar esta despesa?\"). */\r\n  message?: React.ReactNode\r\n  /** Consequência que a pessoa não adivinha sozinha (ex: \"Não se pode desfazer.\"). Em letra mais pequena. */\r\n  detail?: React.ReactNode\r\n  /** `danger`: apaga ou não se pode desfazer. O botão fica vermelho e aparece o sinal de atenção. */\r\n  tone?: 'default' | 'danger'\r\n  /** Por omissão: \"Confirmar\". */\r\n  confirmLabel?: string\r\n  /** Por omissão: \"Cancelar\". */\r\n  cancelLabel?: string\r\n  /** Nome do botão ×, para leitores de ecrã. Por omissão: \"Fechar\". */\r\n  closeLabel?: string\r\n  /** A confirmar (ex: à espera do servidor): o botão mostra a roda e a janela não fecha. */\r\n  loading?: boolean\r\n  /** Uma segunda saída (ex: \"Desativar\" em vez de apagar). Não fecha a janela sozinha. */\r\n  secondaryAction?: { label: string; onClick: () => void }\r\n  onConfirm: () => void\r\n  /** Cancelar, ×, Esc ou clique fora. */\r\n  onCancel: () => void\r\n}\r\n\r\n/**\r\n * Pergunta de sim/não antes de uma ação (ex: apagar, enviar, fechar sem\r\n * guardar). Substitui o `window.confirm` do browser, que mostra o endereço do\r\n * servidor, não diz que registo é e só tem \"OK\".\r\n *\r\n * Com `tone=\"danger\"` o foco começa em Cancelar: um Enter por engano não apaga\r\n * nada. Nos outros casos começa em Confirmar.\r\n *\r\n * Para não ter de guardar o estado em cada ecrã, usar `useConfirm()` (com o\r\n * `ConfirmProvider` à volta da app).\r\n */\r\nexport default function ConfirmDialog({\r\n  open,\r\n  title,\r\n  message,\r\n  detail,\r\n  tone = 'default',\r\n  confirmLabel = 'Confirmar',\r\n  cancelLabel = 'Cancelar',\r\n  closeLabel = 'Fechar',\r\n  loading = false,\r\n  secondaryAction,\r\n  onConfirm,\r\n  onCancel,\r\n}: ConfirmDialogProps) {\r\n  const danger = tone === 'danger'\r\n  const confirmRef = useRef<HTMLButtonElement>(null)\r\n  const cancelRef = useRef<HTMLButtonElement>(null)\r\n\r\n  // Depois de a janela abrir (o efeito do Dialog corre antes deste): o browser\r\n  // poria o foco no ×, o primeiro botão da janela.\r\n  useEffect(() => {\r\n    if (open) (danger ? cancelRef : confirmRef).current?.focus()\r\n  }, [open, danger])\r\n\r\n  return (\r\n    <Dialog\r\n      open={open}\r\n      onClose={() => !loading && onCancel()}\r\n      title={title}\r\n      size=\"sm\"\r\n      closeLabel={closeLabel}\r\n      footer={\r\n        <>\r\n          <Button ref={confirmRef} variant={danger ? 'danger' : 'primary'} loading={loading} onClick={onConfirm}>\r\n            {confirmLabel}\r\n          </Button>\r\n          {secondaryAction && (\r\n            <Button variant=\"secondary\" disabled={loading} onClick={secondaryAction.onClick}>\r\n              {secondaryAction.label}\r\n            </Button>\r\n          )}\r\n          <Button ref={cancelRef} variant=\"secondary\" disabled={loading} onClick={onCancel}>\r\n            {cancelLabel}\r\n          </Button>\r\n        </>\r\n      }\r\n    >\r\n      {/* Sem texto não há corpo: o sinal de atenção sozinho ficava a flutuar. */}\r\n      {(message || detail) && (\r\n        <div className=\"flex items-start gap-3\">\r\n          {danger && (\r\n            <span className=\"flex h-9 w-9 flex-none items-center justify-center rounded-full bg-incumprido-bg text-incumprido\">\r\n              <WarningIcon size={18} />\r\n            </span>\r\n          )}\r\n          <div className=\"min-w-0 flex-1 self-center\">\r\n            {message && <div className=\"m-0 text-control leading-relaxed text-foreground\">{message}</div>}\r\n            {detail && <div className=\"m-0 mt-1 text-caption leading-relaxed text-muted-foreground\">{detail}</div>}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </Dialog>\r\n  )\r\n}\r\n\r\nexport type ConfirmOptions = Omit<ConfirmDialogProps, 'open' | 'onConfirm' | 'onCancel' | 'loading'>\r\n\r\nconst ConfirmContext = createContext<((options: ConfirmOptions) => Promise<boolean>) | null>(null)\r\n\r\nexport interface ConfirmProviderProps {\r\n  children: React.ReactNode\r\n  /** Textos por omissão dos botões, para a app os traduzir. */\r\n  confirmLabel?: string\r\n  cancelLabel?: string\r\n  closeLabel?: string\r\n}\r\n\r\n/**\r\n * Dá o `useConfirm()` a toda a app. Monta-se uma vez, à volta da app.\r\n */\r\nexport function ConfirmProvider({ children, confirmLabel, cancelLabel, closeLabel }: ConfirmProviderProps) {\r\n  const [pending, setPending] = useState<ConfirmOptions | null>(null)\r\n  const resolver = useRef<((ok: boolean) => void) | null>(null)\r\n\r\n  const confirm = useCallback((options: ConfirmOptions) => {\r\n    // Uma pergunta nova responde \"não\" à anterior que ainda estivesse aberta.\r\n    resolver.current?.(false)\r\n    setPending(options)\r\n    return new Promise<boolean>((resolve) => {\r\n      resolver.current = resolve\r\n    })\r\n  }, [])\r\n\r\n  const answer = (ok: boolean) => {\r\n    resolver.current?.(ok)\r\n    resolver.current = null\r\n    setPending(null)\r\n  }\r\n\r\n  return (\r\n    <ConfirmContext.Provider value={confirm}>\r\n      {children}\r\n      <ConfirmDialog\r\n        open={pending !== null}\r\n        title={pending?.title ?? ''}\r\n        message={pending?.message}\r\n        detail={pending?.detail}\r\n        tone={pending?.tone}\r\n        secondaryAction={pending?.secondaryAction}\r\n        confirmLabel={pending?.confirmLabel ?? confirmLabel}\r\n        cancelLabel={pending?.cancelLabel ?? cancelLabel}\r\n        closeLabel={pending?.closeLabel ?? closeLabel}\r\n        onConfirm={() => answer(true)}\r\n        onCancel={() => answer(false)}\r\n      />\r\n    </ConfirmContext.Provider>\r\n  )\r\n}\r\n\r\n/**\r\n * Pergunta e espera pela resposta: `true` se confirmou, `false` se cancelou.\r\n *\r\n *   const confirm = useConfirm()\r\n *   if (await confirm({ title: 'Apagar despesa', message: 'Tem a certeza?', tone: 'danger', confirmLabel: 'Apagar' })) apagar()\r\n */\r\nexport function useConfirm() {\r\n  const confirm = useContext(ConfirmContext)\r\n  if (!confirm) throw new Error('useConfirm: falta o <ConfirmProvider> à volta da app')\r\n  return confirm\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/components/overlays/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../../src/v1/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useId, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\n\r\nconst DialogContainerContext = createContext<HTMLElement | null>(null)\r\nconst DialogDepthContext = createContext(0)\r\n\r\n/**\r\n * O elemento da janela, para usar como destino de `createPortal` (ex: avisos,\r\n * confirmações, sobreposições) quando o conteúdo deve ficar junto dela. Um\r\n * portal para `document.body` também funciona, desde que fique por cima\r\n * (`z-index` acima de 200). Fora de um Dialog devolve `null`.\r\n *\r\n * `createPortal(conteudo, useDialogContainer() ?? document.body)`\r\n */\r\nexport const useDialogContainer = () => useContext(DialogContainerContext)\r\n\r\nexport interface DialogProps {\r\n  /** Aberta ou fechada. A app guarda este estado. */\r\n  open: boolean\r\n  /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */\r\n  onClose: () => void\r\n  title: string\r\n  /** Linha por baixo do título (ex: nome · departamento). */\r\n  subtitle?: string\r\n  /** Botões no rodapé, sempre visíveis (ex: Confirmar, Fechar). */\r\n  footer?: React.ReactNode\r\n  /** Largura máxima: `sm` 480px, `md` 720px, `lg` 1000px. Nunca passa o ecrã. */\r\n  size?: 'sm' | 'md' | 'lg'\r\n  /**\r\n   * Altura: `auto` (por omissão) cresce com o conteúdo; `full` ocupa sempre a\r\n   * altura disponível (útil quando o conteúdo muda de tamanho e a janela não\r\n   * deve saltar). Em ambos, se o conteúdo não couber, o corpo faz scroll.\r\n   */\r\n  height?: 'auto' | 'full'\r\n  /** Fechar ao clicar fora da janela. Por omissão sim; num formulário longo pode valer a pena desligar. */\r\n  closeOnBackdrop?: boolean\r\n  /** Nome do botão ×, para leitores de ecrã. Por omissão: \"Fechar\". */\r\n  closeLabel?: string\r\n  /**\r\n   * Corpo sem margens e sem scroll: o conteúdo ocupa-o todo e gere o seu próprio\r\n   * scroll (ex: passos que deslizam, rodapé próprio de cada passo).\r\n   */\r\n  flush?: boolean\r\n  children: React.ReactNode\r\n}\r\n\r\nconst WIDTHS = { sm: 'max-w-dialog-sm', md: 'max-w-dialog-md', lg: 'max-w-dialog-lg' }\r\n\r\ninterface Aberta {\r\n  root: HTMLElement\r\n  janela: HTMLElement | null\r\n  depth: number\r\n}\r\n\r\nconst abertas: Aberta[] = []\r\nconst silenciados = new Set<Element>()\r\n\r\nconst doTopo = () => abertas[abertas.length - 1]\r\n\r\nfunction silenciar() {\r\n  for (const el of silenciados) el.removeAttribute('inert')\r\n  silenciados.clear()\r\n  const topo = doTopo()\r\n  if (!topo) return\r\n  for (const el of Array.from(document.body.children)) {\r\n    if (el === topo.root || el.hasAttribute('inert')) continue\r\n    el.setAttribute('inert', '')\r\n    silenciados.add(el)\r\n  }\r\n}\r\n\r\n// Uma janela aberta dentro de outra fica sempre por cima dela, mesmo que abram juntas.\r\nfunction empilhar(aberta: Aberta) {\r\n  const acima = abertas.findIndex((a) => a.depth > aberta.depth)\r\n  if (acima === -1) abertas.push(aberta)\r\n  else abertas.splice(acima, 0, aberta)\r\n}\r\n\r\n/**\r\n * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e\r\n * rodapé com os botões ([Button](?path=/docs/v1-primitives-buttons-button--docs)).\r\n *\r\n * É a janela modal da V1 (substitui o `Modal` legacy).\r\n *\r\n * Fundo escurecido, Esc para fechar e, ao fechar, o foco volta ao sítio onde\r\n * estava. Enquanto está aberta, o resto da página fica\r\n * [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert):\r\n * nem rato, nem teclado, nem leitores de ecrã lhe chegam. Os portais abertos\r\n * depois dela (seletores, confirmações) continuam a responder.\r\n *\r\n * O conteúdo fica montado mesmo com a janela fechada, para poder carregar antes\r\n * de ela abrir.\r\n *\r\n * O tamanho adapta-se ao ecrã só com CSS: nunca passa a largura nem a altura\r\n * da janela do browser (com uma margem), e acompanha-a quando é\r\n * redimensionada. O que não couber faz scroll no corpo; o cabeçalho e o\r\n * rodapé ficam sempre visíveis.\r\n *\r\n * **Exemplo completo:** [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs).\r\n */\r\nexport default function Dialog({\r\n  open,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  footer,\r\n  size = 'md',\r\n  height = 'auto',\r\n  closeOnBackdrop = true,\r\n  closeLabel = 'Fechar',\r\n  flush = false,\r\n  children,\r\n}: DialogProps) {\r\n  const [root, setRoot] = useState<HTMLDivElement | null>(null)\r\n  const janela = useRef<HTMLDivElement>(null)\r\n  const fundo = useRef<HTMLDivElement>(null)\r\n  const titleId = useId()\r\n  const depth = useContext(DialogDepthContext)\r\n  const fechar = useRef(onClose)\r\n  fechar.current = onClose\r\n  // Clique fora: só conta se começou e acabou no fundo (arrastar a partir de um\r\n  // campo para fora não fecha a janela).\r\n  const pressedBackdrop = useRef(false)\r\n\r\n  useEffect(() => {\r\n    if (!open || !root) return\r\n    const anterior = document.activeElement as HTMLElement | null\r\n    const aberta = { root, janela: janela.current, depth }\r\n    empilhar(aberta)\r\n    silenciar()\r\n    const topo = doTopo()\r\n    const dentro = topo.janela?.contains(document.activeElement)\r\n    if (!dentro) topo.janela?.focus()\r\n\r\n    const onKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key !== 'Escape' || e.defaultPrevented) return\r\n      if (doTopo() !== aberta) return\r\n      fechar.current()\r\n    }\r\n    document.addEventListener('keydown', onKeyDown)\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', onKeyDown)\r\n      abertas.splice(abertas.indexOf(aberta), 1)\r\n      silenciar()\r\n      const voltar = anterior && !anterior.closest('[inert]')\r\n      if (voltar) anterior.focus()\r\n      else doTopo()?.janela?.focus()\r\n    }\r\n  }, [open, root, depth])\r\n\r\n  // A página por trás não faz scroll enquanto a janela está aberta.\r\n  useEffect(() => {\r\n    if (!open) return\r\n    const html = document.documentElement\r\n    const before = html.style.overflow\r\n    html.style.overflow = 'hidden'\r\n    return () => {\r\n      html.style.overflow = before\r\n    }\r\n  }, [open])\r\n\r\n  const noFundo = (e: React.SyntheticEvent) => e.target === fundo.current || e.target === e.currentTarget\r\n\r\n  return createPortal(\r\n    <div\r\n      ref={setRoot}\r\n      hidden={!open}\r\n      onPointerDown={(e) => {\r\n        pressedBackdrop.current = noFundo(e)\r\n      }}\r\n      onClick={(e) => {\r\n        if (closeOnBackdrop && pressedBackdrop.current && noFundo(e)) onClose()\r\n      }}\r\n      className={`fixed inset-0 z-[200] items-center justify-center p-dialog-margin ${open ? 'flex' : 'hidden'}`}\r\n    >\r\n      <div ref={fundo} className=\"absolute inset-0 bg-black/40 motion-safe:animate-backdrop-in\" />\r\n      <div\r\n        ref={janela}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={titleId}\r\n        tabIndex={-1}\r\n        className={\r\n          `relative flex max-h-full w-full ${WIDTHS[size]} flex-col overflow-hidden rounded-2xl bg-card text-foreground shadow-modal outline-none ` +\r\n          `motion-safe:animate-dialog-in ${height === 'full' ? 'h-full' : ''}`\r\n        }\r\n      >\r\n        <header className=\"flex flex-none items-center justify-between gap-3 bg-gradient-to-br from-primary to-primary-strong px-5 py-3.5\">\r\n          <div className=\"min-w-0\">\r\n            <h2 id={titleId} className=\"m-0 truncate text-title font-bold text-primary-foreground\">\r\n              {title}\r\n            </h2>\r\n            {subtitle && <p className=\"m-0 mt-0.5 truncate text-caption text-primary-foreground/75\">{subtitle}</p>}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            aria-label={closeLabel}\r\n            title={closeLabel}\r\n            onClick={onClose}\r\n            className=\"flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-md border border-primary-foreground/25 bg-primary-foreground/15 text-base leading-none text-primary-foreground transition-colors hover:bg-primary-foreground/25 focus-visible:ring-2 focus-visible:ring-primary-foreground/60 focus-visible:outline-none\"\r\n          >\r\n            ×\r\n          </button>\r\n        </header>\r\n\r\n        <DialogContainerContext.Provider value={root}>\r\n          <DialogDepthContext.Provider value={depth + 1}>\r\n            <div className={flush ? 'flex min-h-0 flex-1 flex-col overflow-hidden bg-canvas' : 'min-h-0 flex-1 overflow-y-auto bg-canvas px-5 py-4'}>{children}</div>\r\n\r\n            {footer && <footer className=\"flex flex-none flex-wrap justify-end gap-2 border-t border-border bg-muted/40 px-5 py-[18px]\">{footer}</footer>}\r\n          </DialogDepthContext.Provider>\r\n        </DialogContainerContext.Provider>\r\n      </div>\r\n    </div>,\r\n    document.body,\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../../src/v1/components/overlays/Dialog/Dialog.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useId, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\n\r\nconst DialogContainerContext = createContext<HTMLElement | null>(null)\r\nconst DialogDepthContext = createContext(0)\r\n\r\n/**\r\n * O elemento da janela, para usar como destino de `createPortal` (ex: avisos,\r\n * confirmações, sobreposições) quando o conteúdo deve ficar junto dela. Um\r\n * portal para `document.body` também funciona, desde que fique por cima\r\n * (`z-index` acima de 200). Fora de um Dialog devolve `null`.\r\n *\r\n * `createPortal(conteudo, useDialogContainer() ?? document.body)`\r\n */\r\nexport const useDialogContainer = () => useContext(DialogContainerContext)\r\n\r\nexport interface DialogProps {\r\n  /** Aberta ou fechada. A app guarda este estado. */\r\n  open: boolean\r\n  /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */\r\n  onClose: () => void\r\n  /** Normalmente texto; aceita JSX (ex: um nome em negrito). */\r\n  title: React.ReactNode\r\n  /** Linha por baixo do título (ex: nome · departamento). */\r\n  subtitle?: React.ReactNode\r\n  /** Botões no rodapé, sempre visíveis (ex: Confirmar, Fechar). */\r\n  footer?: React.ReactNode\r\n  /** Largura máxima: `sm` 480px, `md` 720px, `lg` 1000px. Nunca passa o ecrã. */\r\n  size?: 'sm' | 'md' | 'lg'\r\n  /**\r\n   * Altura: `auto` (por omissão) cresce com o conteúdo; `full` ocupa sempre a\r\n   * altura disponível (útil quando o conteúdo muda de tamanho e a janela não\r\n   * deve saltar). Em ambos, se o conteúdo não couber, o corpo faz scroll.\r\n   */\r\n  height?: 'auto' | 'full'\r\n  /** Fechar ao clicar fora da janela. Por omissão sim; num formulário longo pode valer a pena desligar. */\r\n  closeOnBackdrop?: boolean\r\n  /** Nome do botão ×, para leitores de ecrã. Por omissão: \"Fechar\". */\r\n  closeLabel?: string\r\n  /**\r\n   * Corpo sem margens e sem scroll: o conteúdo ocupa-o todo e gere o seu próprio\r\n   * scroll (ex: passos que deslizam, rodapé próprio de cada passo).\r\n   */\r\n  flush?: boolean\r\n  children: React.ReactNode\r\n}\r\n\r\nconst WIDTHS = { sm: 'max-w-dialog-sm', md: 'max-w-dialog-md', lg: 'max-w-dialog-lg' }\r\n\r\ninterface Aberta {\r\n  root: HTMLElement\r\n  janela: HTMLElement | null\r\n  depth: number\r\n}\r\n\r\nconst abertas: Aberta[] = []\r\nconst silenciados = new Set<Element>()\r\n\r\nconst doTopo = () => abertas[abertas.length - 1]\r\n\r\nfunction silenciar() {\r\n  for (const el of silenciados) el.removeAttribute('inert')\r\n  silenciados.clear()\r\n  const topo = doTopo()\r\n  if (!topo) return\r\n  for (const el of Array.from(document.body.children)) {\r\n    if (el === topo.root || el.hasAttribute('inert')) continue\r\n    el.setAttribute('inert', '')\r\n    silenciados.add(el)\r\n  }\r\n}\r\n\r\n// Uma janela aberta dentro de outra fica sempre por cima dela, mesmo que abram juntas.\r\nfunction empilhar(aberta: Aberta) {\r\n  const acima = abertas.findIndex((a) => a.depth > aberta.depth)\r\n  if (acima === -1) abertas.push(aberta)\r\n  else abertas.splice(acima, 0, aberta)\r\n}\r\n\r\n/**\r\n * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e\r\n * rodapé com os botões ([Button](?path=/docs/v1-primitives-buttons-button--docs)).\r\n *\r\n * É a janela modal da V1 (substitui o `Modal` legacy).\r\n *\r\n * Fundo escurecido, Esc para fechar e, ao fechar, o foco volta ao sítio onde\r\n * estava. Enquanto está aberta, o resto da página fica\r\n * [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert):\r\n * nem rato, nem teclado, nem leitores de ecrã lhe chegam. Os portais abertos\r\n * depois dela (seletores, confirmações) continuam a responder.\r\n *\r\n * O conteúdo fica montado mesmo com a janela fechada, para poder carregar antes\r\n * de ela abrir.\r\n *\r\n * O tamanho adapta-se ao ecrã só com CSS: nunca passa a largura nem a altura\r\n * da janela do browser (com uma margem), e acompanha-a quando é\r\n * redimensionada. O que não couber faz scroll no corpo; o cabeçalho e o\r\n * rodapé ficam sempre visíveis.\r\n *\r\n * **Exemplo completo:** [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs).\r\n */\r\nexport default function Dialog({\r\n  open,\r\n  onClose,\r\n  title,\r\n  subtitle,\r\n  footer,\r\n  size = 'md',\r\n  height = 'auto',\r\n  closeOnBackdrop = true,\r\n  closeLabel = 'Fechar',\r\n  flush = false,\r\n  children,\r\n}: DialogProps) {\r\n  const [root, setRoot] = useState<HTMLDivElement | null>(null)\r\n  const janela = useRef<HTMLDivElement>(null)\r\n  const fundo = useRef<HTMLDivElement>(null)\r\n  const titleId = useId()\r\n  const depth = useContext(DialogDepthContext)\r\n  const fechar = useRef(onClose)\r\n  fechar.current = onClose\r\n  // Clique fora: só conta se começou e acabou no fundo (arrastar a partir de um\r\n  // campo para fora não fecha a janela).\r\n  const pressedBackdrop = useRef(false)\r\n\r\n  useEffect(() => {\r\n    if (!open || !root) return\r\n    const anterior = document.activeElement as HTMLElement | null\r\n    const aberta = { root, janela: janela.current, depth }\r\n    empilhar(aberta)\r\n    silenciar()\r\n    const topo = doTopo()\r\n    const dentro = topo.janela?.contains(document.activeElement)\r\n    if (!dentro) topo.janela?.focus()\r\n\r\n    const onKeyDown = (e: KeyboardEvent) => {\r\n      if (e.key !== 'Escape' || e.defaultPrevented) return\r\n      if (doTopo() !== aberta) return\r\n      fechar.current()\r\n    }\r\n    document.addEventListener('keydown', onKeyDown)\r\n\r\n    return () => {\r\n      document.removeEventListener('keydown', onKeyDown)\r\n      abertas.splice(abertas.indexOf(aberta), 1)\r\n      silenciar()\r\n      const voltar = anterior && !anterior.closest('[inert]')\r\n      if (voltar) anterior.focus()\r\n      else doTopo()?.janela?.focus()\r\n    }\r\n  }, [open, root, depth])\r\n\r\n  // A página por trás não faz scroll enquanto a janela está aberta.\r\n  useEffect(() => {\r\n    if (!open) return\r\n    const html = document.documentElement\r\n    const before = html.style.overflow\r\n    html.style.overflow = 'hidden'\r\n    return () => {\r\n      html.style.overflow = before\r\n    }\r\n  }, [open])\r\n\r\n  const noFundo = (e: React.SyntheticEvent) => e.target === fundo.current || e.target === e.currentTarget\r\n\r\n  return createPortal(\r\n    <div\r\n      ref={setRoot}\r\n      hidden={!open}\r\n      onPointerDown={(e) => {\r\n        pressedBackdrop.current = noFundo(e)\r\n      }}\r\n      onClick={(e) => {\r\n        if (closeOnBackdrop && pressedBackdrop.current && noFundo(e)) onClose()\r\n      }}\r\n      className={`fixed inset-0 z-[200] items-center justify-center p-dialog-margin ${open ? 'flex' : 'hidden'}`}\r\n    >\r\n      <div ref={fundo} className=\"absolute inset-0 bg-black/40 motion-safe:animate-backdrop-in\" />\r\n      <div\r\n        ref={janela}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        aria-labelledby={titleId}\r\n        tabIndex={-1}\r\n        className={\r\n          `relative flex max-h-full w-full ${WIDTHS[size]} flex-col overflow-hidden rounded-2xl bg-card text-foreground shadow-modal outline-none ` +\r\n          `motion-safe:animate-dialog-in ${height === 'full' ? 'h-full' : ''}`\r\n        }\r\n      >\r\n        <header className=\"flex flex-none items-center justify-between gap-3 bg-gradient-to-br from-primary to-primary-strong px-5 py-3.5\">\r\n          <div className=\"min-w-0\">\r\n            <h2 id={titleId} className=\"m-0 truncate text-title font-bold text-primary-foreground\">\r\n              {title}\r\n            </h2>\r\n            {subtitle && <p className=\"m-0 mt-0.5 truncate text-caption text-primary-foreground/75\">{subtitle}</p>}\r\n          </div>\r\n          <button\r\n            type=\"button\"\r\n            aria-label={closeLabel}\r\n            title={closeLabel}\r\n            onClick={onClose}\r\n            className=\"flex h-7 w-7 flex-none cursor-pointer items-center justify-center rounded-md border border-primary-foreground/25 bg-primary-foreground/15 text-base leading-none text-primary-foreground transition-colors hover:bg-primary-foreground/25 focus-visible:ring-2 focus-visible:ring-primary-foreground/60 focus-visible:outline-none\"\r\n          >\r\n            ×\r\n          </button>\r\n        </header>\r\n\r\n        <DialogContainerContext.Provider value={root}>\r\n          <DialogDepthContext.Provider value={depth + 1}>\r\n            <div className={flush ? 'flex min-h-0 flex-1 flex-col overflow-hidden bg-canvas' : 'min-h-0 flex-1 overflow-y-auto bg-canvas px-5 py-4'}>{children}</div>\r\n\r\n            {footer && <footer className=\"flex flex-none flex-wrap justify-end gap-2 border-t border-border bg-muted/40 px-5 py-[18px]\">{footer}</footer>}\r\n          </DialogDepthContext.Provider>\r\n        </DialogContainerContext.Provider>\r\n      </div>\r\n    </div>,\r\n    document.body,\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/components/overlays/Tooltip/Tooltip.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useId, useEffect, useLayoutEffect } from "react";
+import { useTopLayer } from "../topLayer.js";
+import TooltipPanel, { MARGIN, OFFSET, clamp } from "./TooltipPanel.js";
+const SHOW_DELAY = 120;
+const HIDE_DELAY_INTERACTIVE = 200;
+const CURSOR_OFFSET = 14;
+function Tooltip({
+  content: contentProp,
+  tip,
+  title,
+  children,
+  interactive = false,
+  followCursor = false,
+  disabled = false,
+  className = ""
+}) {
+  const content = contentProp ?? tip;
+  const [open, setOpen] = useState(false);
+  const [cursor, setCursor] = useState(null);
+  const anchorRef = useRef(null);
+  const panelRef = useRef(null);
+  const timer = useRef(null);
+  const id = useId();
+  useTopLayer(panelRef, open);
+  const clear = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  };
+  const show = () => {
+    clear();
+    timer.current = setTimeout(() => setOpen(true), SHOW_DELAY);
+  };
+  const hide = () => {
+    clear();
+    if (interactive) timer.current = setTimeout(() => setOpen(false), HIDE_DELAY_INTERACTIVE);
+    else setOpen(false);
+  };
+  useEffect(() => clear, []);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  const [pos, setPos] = useState({ left: 0, top: 0 });
+  useLayoutEffect(() => {
+    if (!open || !anchorRef.current || !panelRef.current) return;
+    const p = panelRef.current.getBoundingClientRect();
+    if (followCursor && cursor) {
+      const left = cursor.x + CURSOR_OFFSET + p.width > window.innerWidth - MARGIN ? Math.max(MARGIN, cursor.x - CURSOR_OFFSET - p.width) : cursor.x + CURSOR_OFFSET;
+      const top2 = cursor.y + CURSOR_OFFSET + p.height > window.innerHeight - MARGIN ? Math.max(MARGIN, cursor.y - CURSOR_OFFSET - p.height) : cursor.y + CURSOR_OFFSET;
+      setPos({ left, top: top2 });
+      return;
+    }
+    const a = anchorRef.current.getBoundingClientRect();
+    const above = a.top - OFFSET - p.height;
+    const top = above >= 0 ? above : a.bottom + OFFSET;
+    setPos({ left: clamp(a.left + a.width / 2 - p.width / 2, p.width, window.innerWidth), top });
+  }, [open, followCursor, cursor]);
+  if (disabled || !content) return /* @__PURE__ */ jsx("span", { className: className || void 0, children });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref: anchorRef,
+      onMouseEnter: show,
+      onMouseMove: followCursor ? (e) => setCursor({ x: e.clientX, y: e.clientY }) : void 0,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      "aria-describedby": open ? id : void 0,
+      className: className || void 0,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          TooltipPanel,
+          {
+            ref: panelRef,
+            id,
+            visible: open,
+            title,
+            interactive,
+            style: { left: pos.left, top: pos.top },
+            onMouseEnter: interactive ? clear : void 0,
+            onMouseLeave: interactive ? hide : void 0,
+            children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-line", children: content })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Tooltip as default
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/v1/components/overlays/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../../../../src/v1/components/overlays/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, { useEffect, useId, useLayoutEffect, useRef, useState } from 'react'\r\nimport { useTopLayer } from '../topLayer'\r\nimport TooltipPanel, { MARGIN, OFFSET, clamp } from './TooltipPanel'\r\n\r\nexport interface TooltipProps {\r\n  /** O que aparece no painel. Aceita JSX (ex: uma lista, um link com `interactive`). Vazio: sem tooltip. */\r\n  content?: React.ReactNode\r\n  /** @deprecated Nome antigo de `content` (Tooltip legacy). */\r\n  tip?: React.ReactNode\r\n  /** @deprecated Já não é preciso (o id é gerado); fica para não partir o código legacy. */\r\n  id?: string\r\n  /** Cabeçalho opcional, separado por uma linha. */\r\n  title?: React.ReactNode\r\n  /** O elemento que mostra o tooltip ao passar o rato ou com o foco. */\r\n  children: React.ReactNode\r\n  /** O painel aceita o rato (para clicar em links lá dentro) e fecha com um pequeno atraso. */\r\n  interactive?: boolean\r\n  /**\r\n   * O painel segue o rato, em vez de ficar por cima do elemento. Para elementos\r\n   * grandes ou células de grelhas (ex: um cronograma), onde o centro do\r\n   * elemento fica longe do rato.\r\n   */\r\n  followCursor?: boolean\r\n  /** Desliga o tooltip (o elemento aparece na mesma). */\r\n  disabled?: boolean\r\n  /** Classes do invólucro (um `<span>`), ex: `cursor-help` ou `block`. */\r\n  className?: string\r\n}\r\n\r\nconst SHOW_DELAY = 120\r\nconst HIDE_DELAY_INTERACTIVE = 200\r\n/** Distância do cursor ao painel, com `followCursor`. */\r\nconst CURSOR_OFFSET = 14\r\n\r\n/**\r\n * Tooltip com conteúdo rico à volta de um elemento: aparece por cima dele (ou\r\n * por baixo, se não couber) ao passar o rato ou com o foco do teclado; Esc\r\n * fecha. As quebras de linha (`\\n`) do texto mantêm-se.\r\n *\r\n * Para texto simples, basta o atributo `data-tip` com o `TooltipLayer`\r\n * montado na raiz, sem embrulhar nada. O painel é o mesmo.\r\n */\r\nexport default function Tooltip({\r\n  content: contentProp,\r\n  tip,\r\n  title,\r\n  children,\r\n  interactive = false,\r\n  followCursor = false,\r\n  disabled = false,\r\n  className = '',\r\n}: TooltipProps) {\r\n  const content = contentProp ?? tip\r\n  const [open, setOpen] = useState(false)\r\n  const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null)\r\n  const anchorRef = useRef<HTMLSpanElement>(null)\r\n  const panelRef = useRef<HTMLDivElement>(null)\r\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)\r\n  const id = useId()\r\n\r\n  useTopLayer(panelRef, open)\r\n\r\n  const clear = () => {\r\n    if (timer.current) clearTimeout(timer.current)\r\n    timer.current = null\r\n  }\r\n  const show = () => {\r\n    clear()\r\n    timer.current = setTimeout(() => setOpen(true), SHOW_DELAY)\r\n  }\r\n  const hide = () => {\r\n    clear()\r\n    if (interactive) timer.current = setTimeout(() => setOpen(false), HIDE_DELAY_INTERACTIVE)\r\n    else setOpen(false)\r\n  }\r\n\r\n  useEffect(() => clear, [])\r\n\r\n  useEffect(() => {\r\n    if (!open) return\r\n    const onKey = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') setOpen(false)\r\n    }\r\n    document.addEventListener('keydown', onKey)\r\n    return () => document.removeEventListener('keydown', onKey)\r\n  }, [open])\r\n\r\n  // Por cima do elemento, centrado (por baixo se não couber em cima); ou, com\r\n  // `followCursor`, à direita e abaixo do rato, virando quando não cabe.\r\n  const [pos, setPos] = useState({ left: 0, top: 0 })\r\n  useLayoutEffect(() => {\r\n    if (!open || !anchorRef.current || !panelRef.current) return\r\n    const p = panelRef.current.getBoundingClientRect()\r\n    if (followCursor && cursor) {\r\n      const left = cursor.x + CURSOR_OFFSET + p.width > window.innerWidth - MARGIN ? Math.max(MARGIN, cursor.x - CURSOR_OFFSET - p.width) : cursor.x + CURSOR_OFFSET\r\n      const top = cursor.y + CURSOR_OFFSET + p.height > window.innerHeight - MARGIN ? Math.max(MARGIN, cursor.y - CURSOR_OFFSET - p.height) : cursor.y + CURSOR_OFFSET\r\n      setPos({ left, top })\r\n      return\r\n    }\r\n    const a = anchorRef.current.getBoundingClientRect()\r\n    const above = a.top - OFFSET - p.height\r\n    const top = above >= 0 ? above : a.bottom + OFFSET\r\n    setPos({ left: clamp(a.left + a.width / 2 - p.width / 2, p.width, window.innerWidth), top })\r\n  }, [open, followCursor, cursor])\r\n\r\n  if (disabled || !content) return <span className={className || undefined}>{children}</span>\r\n\r\n  return (\r\n    <span\r\n      ref={anchorRef}\r\n      onMouseEnter={show}\r\n      onMouseMove={followCursor ? (e) => setCursor({ x: e.clientX, y: e.clientY }) : undefined}\r\n      onMouseLeave={hide}\r\n      onFocus={show}\r\n      onBlur={hide}\r\n      aria-describedby={open ? id : undefined}\r\n      className={className || undefined}\r\n    >\r\n      {children}\r\n      <TooltipPanel\r\n        ref={panelRef}\r\n        id={id}\r\n        visible={open}\r\n        title={title}\r\n        interactive={interactive}\r\n        style={{ left: pos.left, top: pos.top }}\r\n        onMouseEnter={interactive ? clear : undefined}\r\n        onMouseLeave={interactive ? hide : undefined}\r\n      >\r\n        <div className=\"whitespace-pre-line\">{content}</div>\r\n      </TooltipPanel>\r\n    </span>\r\n  )\r\n}\r\n"],"names":["top"],"mappings":"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"}

package/dist/esm/v1/components/overlays/Tooltip/TooltipLayer.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { useTopLayer } from "../topLayer.js";
+import TooltipPanel, { MARGIN } from "./TooltipPanel.js";
+const CURSOR_OFFSET = 14;
+const DELAY_MS = 120;
+const tipOf = (el) => {
+  const target = el?.closest("[data-tip]") ?? null;
+  const text = target?.getAttribute("data-tip");
+  return target && text ? { target, text, title: target.getAttribute("data-tip-title") } : null;
+};
+function TooltipLayer() {
+  const [tip, setTip] = useState(null);
+  const panelRef = useRef(null);
+  const sourceRef = useRef(null);
+  const timerRef = useRef(null);
+  useTopLayer(panelRef, tip !== null);
+  useEffect(() => {
+    const clearTimer = () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = null;
+    };
+    const hide = () => {
+      clearTimer();
+      sourceRef.current = null;
+      setTip((prev) => prev ? null : prev);
+    };
+    const show = (target, next) => {
+      if (sourceRef.current === target) {
+        setTip(next);
+        return;
+      }
+      clearTimer();
+      sourceRef.current = target;
+      timerRef.current = setTimeout(() => setTip(next), DELAY_MS);
+    };
+    const onMove = (e) => {
+      const found = tipOf(e.target instanceof Element ? e.target : null);
+      if (!found) return hide();
+      show(found.target, { text: found.text, title: found.title, x: e.clientX, y: e.clientY });
+    };
+    const onFocus = (e) => {
+      const el = e.target instanceof Element ? e.target : null;
+      if (!el?.matches(":focus-visible")) return;
+      const found = tipOf(el);
+      if (!found) return hide();
+      const r = found.target.getBoundingClientRect();
+      show(found.target, { text: found.text, title: found.title, x: r.left, y: r.bottom - CURSOR_OFFSET + 6 });
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    document.addEventListener("mousemove", onMove, { passive: true });
+    document.addEventListener("focusin", onFocus);
+    document.addEventListener("focusout", hide);
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("mousedown", hide, true);
+    document.addEventListener("wheel", hide, { passive: true, capture: true });
+    window.addEventListener("blur", hide);
+    return () => {
+      clearTimer();
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("focusin", onFocus);
+      document.removeEventListener("focusout", hide);
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("mousedown", hide, true);
+      document.removeEventListener("wheel", hide, true);
+      window.removeEventListener("blur", hide);
+    };
+  }, []);
+  const [pos, setPos] = useState({ left: 0, top: 0 });
+  useLayoutEffect(() => {
+    if (!tip || !panelRef.current) return;
+    const r = panelRef.current.getBoundingClientRect();
+    const left = tip.x + CURSOR_OFFSET + r.width > window.innerWidth - MARGIN ? Math.max(MARGIN, tip.x - CURSOR_OFFSET - r.width) : tip.x + CURSOR_OFFSET;
+    const top = tip.y + CURSOR_OFFSET + r.height > window.innerHeight - MARGIN ? Math.max(MARGIN, tip.y - CURSOR_OFFSET - r.height) : tip.y + CURSOR_OFFSET;
+    setPos({ left, top });
+  }, [tip]);
+  return /* @__PURE__ */ jsx(TooltipPanel, { ref: panelRef, visible: tip !== null, title: tip?.title, style: { left: pos.left, top: pos.top }, children: /* @__PURE__ */ jsx("p", { className: "m-0 whitespace-pre-line", children: tip?.text }) });
+}
+export {
+  TooltipLayer as default
+};
+//# sourceMappingURL=TooltipLayer.js.map

package/dist/esm/v1/components/overlays/Tooltip/TooltipLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipLayer.js","sources":["../../../../../../src/v1/components/overlays/Tooltip/TooltipLayer.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'\r\nimport { useTopLayer } from '../topLayer'\r\nimport TooltipPanel, { MARGIN } from './TooltipPanel'\r\n\r\n/** Distância do cursor ao painel. */\r\nconst CURSOR_OFFSET = 14\r\n/** Atraso curto: evita painéis a piscar ao atravessar uma barra de botões. */\r\nconst DELAY_MS = 120\r\n\r\ninterface Tip {\r\n  text: string\r\n  title: string | null\r\n  x: number\r\n  y: number\r\n}\r\n\r\nconst tipOf = (el: Element | null) => {\r\n  const target = el?.closest('[data-tip]') ?? null\r\n  const text = target?.getAttribute('data-tip')\r\n  // `data-tip` vazio é o mesmo que não ter (o React omite o atributo quando o valor é undefined).\r\n  return target && text ? { target, text, title: target.getAttribute('data-tip-title') } : null\r\n}\r\n\r\n/**\r\n * Tooltips de toda a app, por atributo: qualquer elemento com `data-tip` mostra\r\n * o texto num painel escuro ao passar o rato ou ao receber o foco do teclado.\r\n * Monta-se uma vez na raiz.\r\n *\r\n *   <button data-tip=\"Registar horas\" aria-label=\"Registar horas\">…</button>\r\n *   <span data-tip={nome} data-tip-title=\"Requisitante\">…</span>\r\n *\r\n * - `data-tip-title`: cabeçalho opcional, separado por uma linha.\r\n * - Texto com `\\n` aparece em várias linhas.\r\n * - Para conteúdo rico (JSX, links), usar o `Tooltip`.\r\n * - Substitui o `title` do browser (lento, sem tema, corta texto longo). O\r\n *   tooltip não é lido pelos leitores de ecrã: o elemento continua a precisar\r\n *   do seu nome (`aria-label` ou texto).\r\n * - Aparece por cima de uma janela (Dialog) aberta.\r\n */\r\nexport default function TooltipLayer() {\r\n  const [tip, setTip] = useState<Tip | null>(null)\r\n  const panelRef = useRef<HTMLDivElement>(null)\r\n  /** Elemento que originou o tooltip visível, para não recalcular a cada pixel. */\r\n  const sourceRef = useRef<Element | null>(null)\r\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)\r\n\r\n  useTopLayer(panelRef, tip !== null)\r\n\r\n  useEffect(() => {\r\n    const clearTimer = () => {\r\n      if (timerRef.current) clearTimeout(timerRef.current)\r\n      timerRef.current = null\r\n    }\r\n    const hide = () => {\r\n      clearTimer()\r\n      sourceRef.current = null\r\n      setTip((prev) => (prev ? null : prev))\r\n    }\r\n    const show = (target: Element, next: Tip) => {\r\n      // Já visível sobre o mesmo elemento: só segue o cursor, sem atraso.\r\n      if (sourceRef.current === target) {\r\n        setTip(next)\r\n        return\r\n      }\r\n      clearTimer()\r\n      sourceRef.current = target\r\n      timerRef.current = setTimeout(() => setTip(next), DELAY_MS)\r\n    }\r\n\r\n    const onMove = (e: MouseEvent) => {\r\n      const found = tipOf(e.target instanceof Element ? e.target : null)\r\n      if (!found) return hide()\r\n      show(found.target, { text: found.text, title: found.title, x: e.clientX, y: e.clientY })\r\n    }\r\n\r\n    // Teclado: o painel aparece por baixo do elemento focado.\r\n    const onFocus = (e: FocusEvent) => {\r\n      const el = e.target instanceof Element ? e.target : null\r\n      if (!el?.matches(':focus-visible')) return\r\n      const found = tipOf(el)\r\n      if (!found) return hide()\r\n      const r = found.target.getBoundingClientRect()\r\n      show(found.target, { text: found.text, title: found.title, x: r.left, y: r.bottom - CURSOR_OFFSET + 6 })\r\n    }\r\n\r\n    const onKey = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') hide()\r\n    }\r\n\r\n    // Fechar em qualquer interação: um painel a pairar sobre um menu que acabou\r\n    // de abrir é pior do que não haver tooltip.\r\n    document.addEventListener('mousemove', onMove, { passive: true })\r\n    document.addEventListener('focusin', onFocus)\r\n    document.addEventListener('focusout', hide)\r\n    document.addEventListener('keydown', onKey)\r\n    document.addEventListener('mousedown', hide, true)\r\n    document.addEventListener('wheel', hide, { passive: true, capture: true })\r\n    window.addEventListener('blur', hide)\r\n    return () => {\r\n      clearTimer()\r\n      document.removeEventListener('mousemove', onMove)\r\n      document.removeEventListener('focusin', onFocus)\r\n      document.removeEventListener('focusout', hide)\r\n      document.removeEventListener('keydown', onKey)\r\n      document.removeEventListener('mousedown', hide, true)\r\n      document.removeEventListener('wheel', hide, true)\r\n      window.removeEventListener('blur', hide)\r\n    }\r\n  }, [])\r\n\r\n  // À direita e abaixo do cursor, virando para o lado oposto quando não cabe.\r\n  // Medido antes de pintar, com as dimensões reais do painel.\r\n  const [pos, setPos] = useState({ left: 0, top: 0 })\r\n  useLayoutEffect(() => {\r\n    if (!tip || !panelRef.current) return\r\n    const r = panelRef.current.getBoundingClientRect()\r\n    const left =\r\n      tip.x + CURSOR_OFFSET + r.width > window.innerWidth - MARGIN ? Math.max(MARGIN, tip.x - CURSOR_OFFSET - r.width) : tip.x + CURSOR_OFFSET\r\n    const top =\r\n      tip.y + CURSOR_OFFSET + r.height > window.innerHeight - MARGIN ? Math.max(MARGIN, tip.y - CURSOR_OFFSET - r.height) : tip.y + CURSOR_OFFSET\r\n    setPos({ left, top })\r\n  }, [tip])\r\n\r\n  return (\r\n    <TooltipPanel ref={panelRef} visible={tip !== null} title={tip?.title} style={{ left: pos.left, top: pos.top }}>\r\n      <p className=\"m-0 whitespace-pre-line\">{tip?.text}</p>\r\n    </TooltipPanel>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/components/overlays/Tooltip/TooltipPanel.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { popoverReset } from "../topLayer.js";
+const TooltipPanel = forwardRef(function TooltipPanel2({ id, title, children, visible, interactive = false, style, onMouseEnter, onMouseLeave }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      id,
+      popover: "manual",
+      role: "tooltip",
+      hidden: !visible,
+      style,
+      onMouseEnter,
+      onMouseLeave,
+      className: `${popoverReset} fixed inset-auto z-[400] max-w-[380px] rounded-xl bg-slate-900 px-3 py-2 text-caption leading-relaxed text-white shadow-modal dark:bg-slate-950 dark:ring-1 dark:ring-slate-700 ${interactive ? "" : "pointer-events-none"}`,
+      children: [
+        title && /* @__PURE__ */ jsx("div", { className: "mb-1.5 border-b border-slate-700 pb-1.5 text-xs font-bold", children: title }),
+        children
+      ]
+    }
+  );
+});
+const OFFSET = 10;
+const MARGIN = 12;
+const clamp = (value, size, max) => Math.min(Math.max(MARGIN, value), Math.max(MARGIN, max - MARGIN - size));
+export {
+  MARGIN,
+  OFFSET,
+  clamp,
+  TooltipPanel as default
+};
+//# sourceMappingURL=TooltipPanel.js.map

package/dist/esm/v1/components/overlays/Tooltip/TooltipPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipPanel.js","sources":["../../../../../../src/v1/components/overlays/Tooltip/TooltipPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\r\nimport { popoverReset } from '../topLayer'\r\n\r\n/**\r\n * O painel escuro das tooltips (uso interno): o mesmo para a camada `data-tip`\r\n * (TooltipLayer) e para o `Tooltip` com conteúdo rico. Fica na camada de cima\r\n * do browser (`popover`), por cima de uma janela aberta.\r\n */\r\nconst TooltipPanel = forwardRef<\r\n  HTMLDivElement,\r\n  {\r\n    id?: string\r\n    title?: React.ReactNode\r\n    children: React.ReactNode\r\n    visible: boolean\r\n    /** Aceita o rato (para se poder clicar em links lá dentro). */\r\n    interactive?: boolean\r\n    style?: React.CSSProperties\r\n    onMouseEnter?: () => void\r\n    onMouseLeave?: () => void\r\n  }\r\n>(function TooltipPanel({ id, title, children, visible, interactive = false, style, onMouseEnter, onMouseLeave }, ref) {\r\n  return (\r\n    <div\r\n      ref={ref}\r\n      id={id}\r\n      popover=\"manual\"\r\n      role=\"tooltip\"\r\n      hidden={!visible}\r\n      style={style}\r\n      onMouseEnter={onMouseEnter}\r\n      onMouseLeave={onMouseLeave}\r\n      className={\r\n        `${popoverReset} fixed inset-auto z-[400] max-w-[380px] rounded-xl bg-slate-900 px-3 py-2 text-caption leading-relaxed text-white shadow-modal ` +\r\n        `dark:bg-slate-950 dark:ring-1 dark:ring-slate-700 ${interactive ? '' : 'pointer-events-none'}`\r\n      }\r\n    >\r\n      {title && <div className=\"mb-1.5 border-b border-slate-700 pb-1.5 text-xs font-bold\">{title}</div>}\r\n      {children}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default TooltipPanel\r\n\r\n/** Distância ao cursor/elemento e margem mínima ao bordo da janela. */\r\nexport const OFFSET = 10\r\nexport const MARGIN = 12\r\n\r\n/** Encosta o painel dentro da janela. */\r\nexport const clamp = (value: number, size: number, max: number) => Math.min(Math.max(MARGIN, value), Math.max(MARGIN, max - MARGIN - size))\r\n"],"names":["TooltipPanel"],"mappings":";;;AAQA,MAAM,eAAe,WAanB,SAASA,cAAa,EAAE,IAAI,OAAO,UAAU,SAAS,cAAc,OAAO,OAAO,cAAc,aAAA,GAAgB,KAAK;AACrH,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,QAAQ,CAAC;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,WACE,GAAG,YAAY,oLACsC,cAAc,KAAK,qBAAqB;AAAA,MAG9F,UAAA;AAAA,QAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,6DAA6D,UAAA,OAAM;AAAA,QAC3F;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AAKM,MAAM,SAAS;AACf,MAAM,SAAS;AAGf,MAAM,QAAQ,CAAC,OAAe,MAAc,QAAgB,KAAK,IAAI,KAAK,IAAI,QAAQ,KAAK,GAAG,KAAK,IAAI,QAAQ,MAAM,SAAS,IAAI,CAAC;"}

package/dist/esm/v1/components/overlays/topLayer.js

@@ -0,0 +1,28 @@
+import { useCallback, useLayoutEffect } from "react";
+function useTopLayer(ref, visible) {
+  const raise = useCallback(() => {
+    const el = ref.current;
+    if (!el || typeof el.showPopover !== "function") return;
+    try {
+      if (el.matches(":popover-open")) el.hidePopover();
+      el.showPopover();
+    } catch {
+    }
+  }, [ref]);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el || typeof el.showPopover !== "function") return;
+    try {
+      if (visible) raise();
+      else if (el.matches(":popover-open")) el.hidePopover();
+    } catch {
+    }
+  }, [visible, raise, ref]);
+  return raise;
+}
+const popoverReset = "m-0 border-0 overflow-visible";
+export {
+  popoverReset,
+  useTopLayer
+};
+//# sourceMappingURL=topLayer.js.map

package/dist/esm/v1/components/overlays/topLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"topLayer.js","sources":["../../../../../src/v1/components/overlays/topLayer.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, type RefObject } from 'react'\r\n\r\n/**\r\n * Põe um elemento na camada de cima do browser (top layer), por cima de um\r\n * Dialog aberto. Só para uso interno (avisos, tooltips): o elemento tem de ter\r\n * `popover=\"manual\"`.\r\n *\r\n * Um `<dialog>` aberto com `showModal()` fica por cima de tudo o que está na\r\n * página, incluindo `position: fixed` com `z-index` alto. Um popover também vai\r\n * para essa camada, e fica por cima de quem lá entrou antes: por isso `raise()`\r\n * volta a mostrá-lo quando é preciso que apareça à frente de uma janela que\r\n * abriu depois.\r\n *\r\n * Em browsers sem popover (e no jsdom dos testes) não faz nada: o elemento\r\n * continua com o seu `z-index`.\r\n */\r\nexport function useTopLayer(ref: RefObject<HTMLElement | null>, visible: boolean) {\r\n  const raise = useCallback(() => {\r\n    const el = ref.current\r\n    if (!el || typeof el.showPopover !== 'function') return\r\n    try {\r\n      if (el.matches(':popover-open')) el.hidePopover()\r\n      el.showPopover()\r\n    } catch {\r\n      // Elemento desligado do documento entretanto: ignora.\r\n    }\r\n  }, [ref])\r\n\r\n  useLayoutEffect(() => {\r\n    const el = ref.current\r\n    if (!el || typeof el.showPopover !== 'function') return\r\n    try {\r\n      if (visible) raise()\r\n      else if (el.matches(':popover-open')) el.hidePopover()\r\n    } catch {\r\n      // idem\r\n    }\r\n  }, [visible, raise, ref])\r\n\r\n  return raise\r\n}\r\n\r\n/**\r\n * Anula a margem, a borda e o scroll que o browser dá aos popovers. O fundo e o\r\n * espaçamento ficam com cada componente: pôr aqui `bg-transparent`/`p-0` junto\r\n * com o `bg-…`/`px-…` do componente deixava o resultado à mercê da ordem do CSS\r\n * (numa app com Tailwind próprio, a tooltip ficava transparente).\r\n */\r\nexport const popoverReset = 'm-0 border-0 overflow-visible'\r\n"],"names":[],"mappings":";AAgBO,SAAS,YAAY,KAAoC,SAAkB;AAChF,QAAM,QAAQ,YAAY,MAAM;AAC9B,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,GAAG,gBAAgB,WAAY;AACjD,QAAI;AACF,UAAI,GAAG,QAAQ,eAAe,MAAM,YAAA;AACpC,SAAG,YAAA;AAAA,IACL,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AAER,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,MAAM,OAAO,GAAG,gBAAgB,WAAY;AACjD,QAAI;AACF,UAAI,QAAS,OAAA;AAAA,eACJ,GAAG,QAAQ,eAAe,MAAM,YAAA;AAAA,IAC3C,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,SAAS,OAAO,GAAG,CAAC;AAExB,SAAO;AACT;AAQO,MAAM,eAAe;"}

package/dist/esm/v1/foundations/icons/icons.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 function Svg({ size = 16, className, strokeWidth = 1.8, children, fill = "none" }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -81,15 +81,64 @@ function FilterIcon(props) {
 function CloseIcon(props) {
   return /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M6.5 6.5l11 11M17.5 6.5l-11 11" }) });
 }
+function MenuIcon(props) {
+  return /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
+}
 function LayersIcon(props) {
   return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
     /* @__PURE__ */ jsx("path", { d: "M12 3.5l8.5 4.5-8.5 4.5L3.5 8z" }),
     /* @__PURE__ */ jsx("path", { d: "M3.5 12l8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5" })
   ] });
 }
+function PanelOpenIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3.5", y: "4", width: "17", height: "16", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 4v16M13 10l2 2-2 2" })
+  ] });
+}
 function ListIcon(props) {
   return /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01" }) });
 }
+function SunIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2.5v2M12 19.5v2M4.6 4.6L6 6M18 18l1.4 1.4M2.5 12h2M19.5 12h2M4.6 19.4L6 18M18 6l1.4-1.4" })
+  ] });
+}
+function MoonIcon(props) {
+  return /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" }) });
+}
+function MonitorIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "12.5", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "M8.5 20.5h7M12 16.5v4" })
+  ] });
+}
+function GlobeIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+    /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
+  ] });
+}
+function LogOutIcon(props) {
+  return /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M9.5 20.5H6a2 2 0 0 1-2-2v-13a2 2 0 0 1 2-2h3.5M15.5 16.5L20 12l-4.5-4.5M20 12H9.5" }) });
+}
+function ExternalLinkIcon(props) {
+  return /* @__PURE__ */ jsx(Svg, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M14 4h6v6M20 4l-9 9M18 13.5V18a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4.5" }) });
+}
+function WarningIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx("path", { d: "M10.3 4.3L2.8 17.5A2 2 0 0 0 4.5 20.5h15a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0z" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 9.5v4.5" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "17", r: "1.1", fill: "currentColor", stroke: "none" })
+  ] });
+}
+function ErrorIcon(props) {
+  return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9.5" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 9l6 6M15 9l-6 6" })
+  ] });
+}
 function SlidersIcon(props) {
   return /* @__PURE__ */ jsxs(Svg, { ...props, children: [
     /* @__PURE__ */ jsx("path", { d: "M4 7h10M18 7h2M4 17h2M10 17h10" }),
@@ -105,15 +154,25 @@ export {
   ChevronUpIcon,
   ChevronsUpDownIcon,
   CloseIcon,
+  ErrorIcon,
+  ExternalLinkIcon,
   FilterIcon,
+  GlobeIcon,
   InfoIcon,
   LayersIcon,
   ListIcon,
   LockIcon,
+  LogOutIcon,
+  MenuIcon,
+  MonitorIcon,
+  MoonIcon,
+  PanelOpenIcon,
   PrefilledIcon,
   QrCodeIcon,
   SearchIcon,
   SlidersIcon,
-  SparklesIcon
+  SparklesIcon,
+  SunIcon,
+  WarningIcon
 };
 //# sourceMappingURL=icons.js.map