@nextelco/common-ui 2.1.97 → 2.1.99

package/dist/esm/legacy/components/ui/Confirmacao.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useEffect } from "react";
+function Confirmacao({
+  aberto,
+  titulo,
+  children,
+  onConfirmar,
+  onCancelar,
+  textoConfirmar = "Confirmar",
+  textoCancelar = "Cancelar",
+  variante = "normal",
+  aConfirmar = false,
+  acaoSecundaria
+}) {
+  const idTitulo = useId();
+  const refCancelar = useRef(null);
+  const refConfirmar = useRef(null);
+  useEffect(() => {
+    if (!aberto) return;
+    (variante === "perigo" ? refCancelar : refConfirmar).current?.focus();
+    const esc = (e) => {
+      if (e.key === "Escape" && !aConfirmar) onCancelar();
+    };
+    window.addEventListener("keydown", esc);
+    return () => window.removeEventListener("keydown", esc);
+  }, [aberto, variante, aConfirmar, onCancelar]);
+  if (!aberto) return null;
+  const btn = "rounded-md px-4 py-2.5 text-[11px] font-black uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed";
+  const principal = variante === "perigo" ? "bg-incumprido text-white border border-incumprido hover:opacity-90" : "bg-proef-navy text-white border border-proef-navy hover:bg-proef-blue";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: (e) => {
+        if (e.target === e.currentTarget && !aConfirmar) onCancelar();
+      },
+      className: "fixed inset-0 z-[60] flex items-center justify-center bg-[rgba(20,30,50,0.45)] p-4",
+      children: /* @__PURE__ */ jsxs("div", { role: "alertdialog", "aria-modal": "true", "aria-labelledby": idTitulo, className: "w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl dark:bg-slate-900", children: [
+        /* @__PURE__ */ jsx("h2", { id: idTitulo, className: "m-0 text-base font-black uppercase tracking-tight text-proef-navy dark:text-slate-100", children: titulo }),
+        children && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300", children }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap justify-end gap-2", children: [
+          /* @__PURE__ */ jsx("button", { ref: refCancelar, type: "button", onClick: onCancelar, disabled: aConfirmar, className: `${btn} border border-slate-200 bg-white text-slate-600 hover:border-slate-400 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:border-slate-400`, children: textoCancelar }),
+          acaoSecundaria && /* @__PURE__ */ jsx("button", { type: "button", onClick: acaoSecundaria.onClick, disabled: aConfirmar, className: `${btn} border border-proef-navy bg-white text-proef-navy hover:bg-slate-50 dark:bg-slate-800 dark:border-sky-400 dark:text-sky-300 dark:hover:bg-slate-700`, children: acaoSecundaria.rotulo }),
+          /* @__PURE__ */ jsx("button", { ref: refConfirmar, type: "button", onClick: onConfirmar, disabled: aConfirmar, "aria-busy": aConfirmar, className: `${btn} ${principal}`, children: textoConfirmar })
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  Confirmacao as default
+};
+//# sourceMappingURL=Confirmacao.js.map

package/dist/esm/legacy/components/ui/Confirmacao.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confirmacao.js","sources":["../../../../../src/legacy/components/ui/Confirmacao.tsx"],"sourcesContent":["import React, { useEffect, useId, useRef, type ReactNode } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface ConfirmacaoProps {\r\n  aberto: boolean\r\n  titulo: ReactNode\r\n  /** Explicação: o que vai acontecer, a que registo, se é reversível. */\r\n  children?: ReactNode\r\n  onConfirmar: () => void\r\n  onCancelar: () => void\r\n  /** Texto do botão — o verbo da ação (\"Eliminar\", \"Submeter\"), não \"OK\". */\r\n  textoConfirmar?: string\r\n  textoCancelar?: string\r\n  /** `perigo` pinta a ação a vermelho e põe o foco em Cancelar. */\r\n  variante?: 'normal' | 'perigo'\r\n  /** A ação está a correr: botões desativados. */\r\n  aConfirmar?: boolean\r\n  /** Uma segunda saída (ex: \"Desativar\" em vez de eliminar, \"Eliminar só o contrato\"). */\r\n  acaoSecundaria?: { rotulo: string; onClick: () => void }\r\n}\r\n\r\n/**\r\n * Pedido de confirmação antes de uma ação. Substitui o `window.confirm()` do\r\n * browser, que mostra o endereço do servidor, não diz que registo é e só tem\r\n * \"OK\".\r\n *\r\n * Esc e clicar fora cancelam (exceto enquanto `aConfirmar`).\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function Confirmacao({\r\n  aberto,\r\n  titulo,\r\n  children,\r\n  onConfirmar,\r\n  onCancelar,\r\n  textoConfirmar = 'Confirmar',\r\n  textoCancelar = 'Cancelar',\r\n  variante = 'normal',\r\n  aConfirmar = false,\r\n  acaoSecundaria,\r\n}: ConfirmacaoProps) {\r\n  const idTitulo = useId()\r\n  const refCancelar = useRef<HTMLButtonElement>(null)\r\n  const refConfirmar = useRef<HTMLButtonElement>(null)\r\n\r\n  useEffect(() => {\r\n    if (!aberto) return\r\n    // Numa ação destrutiva o Enter por engano não deve apagar nada.\r\n    ;(variante === 'perigo' ? refCancelar : refConfirmar).current?.focus()\r\n    const esc = (e: KeyboardEvent): void => {\r\n      if (e.key === 'Escape' && !aConfirmar) onCancelar()\r\n    }\r\n    window.addEventListener('keydown', esc)\r\n    return () => window.removeEventListener('keydown', esc)\r\n  }, [aberto, variante, aConfirmar, onCancelar])\r\n\r\n  if (!aberto) return null\r\n\r\n  const btn = 'rounded-md px-4 py-2.5 text-[11px] font-black uppercase tracking-widest disabled:opacity-50 disabled:cursor-not-allowed'\r\n  const principal =\r\n    variante === 'perigo'\r\n      ? 'bg-incumprido text-white border border-incumprido hover:opacity-90'\r\n      : 'bg-proef-navy text-white border border-proef-navy hover:bg-proef-blue'\r\n\r\n  return (\r\n    <div\r\n      onClick={(e) => {\r\n        if (e.target === e.currentTarget && !aConfirmar) onCancelar()\r\n      }}\r\n      className=\"fixed inset-0 z-[60] flex items-center justify-center bg-[rgba(20,30,50,0.45)] p-4\"\r\n    >\r\n      <div role=\"alertdialog\" aria-modal=\"true\" aria-labelledby={idTitulo} className=\"w-full max-w-md rounded-2xl bg-white p-6 shadow-2xl dark:bg-slate-900\">\r\n        <h2 id={idTitulo} className=\"m-0 text-base font-black uppercase tracking-tight text-proef-navy dark:text-slate-100\">\r\n          {titulo}\r\n        </h2>\r\n        {children && <div className=\"mt-2 text-sm leading-relaxed text-slate-600 dark:text-slate-300\">{children}</div>}\r\n        <div className=\"mt-6 flex flex-wrap justify-end gap-2\">\r\n          <button ref={refCancelar} type=\"button\" onClick={onCancelar} disabled={aConfirmar} className={`${btn} border border-slate-200 bg-white text-slate-600 hover:border-slate-400 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300 dark:hover:border-slate-400`}>\r\n            {textoCancelar}\r\n          </button>\r\n          {acaoSecundaria && (\r\n            <button type=\"button\" onClick={acaoSecundaria.onClick} disabled={aConfirmar} className={`${btn} border border-proef-navy bg-white text-proef-navy hover:bg-slate-50 dark:bg-slate-800 dark:border-sky-400 dark:text-sky-300 dark:hover:bg-slate-700`}>\r\n              {acaoSecundaria.rotulo}\r\n            </button>\r\n          )}\r\n          <button ref={refConfirmar} type=\"button\" onClick={onConfirmar} disabled={aConfirmar} aria-busy={aConfirmar} className={`${btn} ${principal}`}>\r\n            {textoConfirmar}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AA6BA,SAAwB,YAAY;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AACF,GAAqB;AACnB,QAAM,WAAW,MAAA;AACjB,QAAM,cAAc,OAA0B,IAAI;AAClD,QAAM,eAAe,OAA0B,IAAI;AAEnD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEZ,KAAC,aAAa,WAAW,cAAc,cAAc,SAAS,MAAA;AAC/D,UAAM,MAAM,CAAC,MAA2B;AACtC,UAAI,EAAE,QAAQ,YAAY,CAAC,WAAY,YAAA;AAAA,IACzC;AACA,WAAO,iBAAiB,WAAW,GAAG;AACtC,WAAO,MAAM,OAAO,oBAAoB,WAAW,GAAG;AAAA,EACxD,GAAG,CAAC,QAAQ,UAAU,YAAY,UAAU,CAAC;AAE7C,MAAI,CAAC,OAAQ,QAAO;AAEpB,QAAM,MAAM;AACZ,QAAM,YACJ,aAAa,WACT,uEACA;AAEN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,CAAC,MAAM;AACd,YAAI,EAAE,WAAW,EAAE,iBAAiB,CAAC,WAAY,YAAA;AAAA,MACnD;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,qBAAC,SAAI,MAAK,eAAc,cAAW,QAAO,mBAAiB,UAAU,WAAU,yEAC7E,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,IAAI,UAAU,WAAU,yFACzB,UAAA,QACH;AAAA,QACC,YAAY,oBAAC,OAAA,EAAI,WAAU,mEAAmE,UAAS;AAAA,QACxG,qBAAC,OAAA,EAAI,WAAU,yCACb,UAAA;AAAA,UAAA,oBAAC,UAAA,EAAO,KAAK,aAAa,MAAK,UAAS,SAAS,YAAY,UAAU,YAAY,WAAW,GAAG,GAAG,mKACjG,UAAA,eACH;AAAA,UACC,kBACC,oBAAC,UAAA,EAAO,MAAK,UAAS,SAAS,eAAe,SAAS,UAAU,YAAY,WAAW,GAAG,GAAG,wJAC3F,yBAAe,QAClB;AAAA,8BAED,UAAA,EAAO,KAAK,cAAc,MAAK,UAAS,SAAS,aAAa,UAAU,YAAY,aAAW,YAAY,WAAW,GAAG,GAAG,IAAI,SAAS,IACvI,UAAA,eAAA,CACH;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/legacy/components/ui/Escolha.js

@@ -0,0 +1,157 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { usePainelFlutuante, CLS_PAINEL, clsItem } from "./painelFlutuante.js";
+const Chevron = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-3.5 w-3.5 shrink-0 text-slate-400", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+const Visto = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function Escolha({
+  valor,
+  opcoes,
+  onMudar,
+  rotulo,
+  placeholder = "Escolher…",
+  opcaoVazia,
+  disabled = false,
+  pesquisa,
+  className,
+  tamanho = "barra",
+  aspeto = "campo",
+  corEtiqueta = "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200"
+}) {
+  const etiqueta = aspeto === "etiqueta";
+  const p = usePainelFlutuante("esquerda");
+  const lista = useMemo(() => {
+    const base = opcoes.map((o) => typeof o === "string" ? { valor: o, rotulo: o } : o);
+    return opcaoVazia !== void 0 ? [{ valor: "", rotulo: opcaoVazia }, ...base] : base;
+  }, [opcoes, opcaoVazia]);
+  const [q, setQ] = useState("");
+  const comPesquisa = pesquisa ?? lista.length > 10;
+  const visiveis = useMemo(() => {
+    const t = q.trim().toLowerCase();
+    return t ? lista.filter((o) => o.rotulo.toLowerCase().includes(t) || o.descricao?.toLowerCase().includes(t)) : lista;
+  }, [lista, q]);
+  const [ativo, setAtivo] = useState(0);
+  const refPesquisa = useRef(null);
+  const escolhida = lista.find((o) => o.valor === valor);
+  useEffect(() => {
+    if (!p.aberto) return;
+    setQ("");
+    setAtivo(Math.max(0, lista.findIndex((o) => o.valor === valor)));
+    if (comPesquisa) setTimeout(() => refPesquisa.current?.focus(), 0);
+  }, [p.aberto]);
+  useEffect(() => {
+    if (p.aberto) p.refPainel.current?.querySelector(`[data-indice="${ativo}"]`)?.scrollIntoView?.({ block: "nearest" });
+  }, [ativo, p.aberto, p.refPainel]);
+  const escolher = (o) => {
+    p.fechar();
+    p.refBotao.current?.focus();
+    if (o.valor !== valor) onMudar(o.valor);
+  };
+  const teclado = (e) => {
+    if (!p.aberto) {
+      if (["ArrowDown", "ArrowUp", "Enter", " "].includes(e.key)) {
+        e.preventDefault();
+        p.setAberto(true);
+      }
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      p.fechar();
+      p.refBotao.current?.focus();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setAtivo((i) => Math.min(visiveis.length - 1, i + 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setAtivo((i) => Math.max(0, i - 1));
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      setAtivo(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      setAtivo(visiveis.length - 1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const o = visiveis[ativo];
+      if (o) escolher(o);
+    } else if (e.key === "Tab") {
+      p.fechar();
+    } else if (!comPesquisa && e.key.length === 1) {
+      const i = visiveis.findIndex((o) => o.rotulo.toLowerCase().startsWith(e.key.toLowerCase()));
+      if (i >= 0) setAtivo(i);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `relative inline-block ${className ?? (etiqueta ? "" : "min-w-[10rem] max-w-[18rem]")}`, onKeyDown: teclado, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: p.refBotao,
+        type: "button",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": p.aberto,
+        "aria-label": rotulo,
+        onClick: (e) => {
+          e.stopPropagation();
+          p.setAberto((a) => !a);
+        },
+        className: etiqueta ? `appearance-none cursor-pointer border-0 inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${corEtiqueta}` : `appearance-none cursor-pointer w-full ${tamanho === "formulario" ? "h-[38px] px-3" : "h-8 px-2.5"} inline-flex items-center justify-between gap-2 rounded-lg border border-slate-300 bg-white text-sm text-slate-800 transition hover:border-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:hover:border-slate-500`,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: `truncate ${escolhida || etiqueta ? "" : "text-slate-400 dark:text-slate-500"}`, children: escolhida?.rotulo ?? placeholder }),
+          etiqueta ? /* @__PURE__ */ jsx("span", { className: "opacity-60", children: /* @__PURE__ */ jsx(Chevron, {}) }) : /* @__PURE__ */ jsx(Chevron, {})
+        ]
+      }
+    ),
+    p.aberto && createPortal(
+      /* @__PURE__ */ jsxs("div", { ref: p.refPainel, style: p.estilo, className: CLS_PAINEL, onClick: (e) => e.stopPropagation(), onKeyDown: teclado, children: [
+        comPesquisa && /* @__PURE__ */ jsx("div", { className: "px-2 pb-1 pt-0.5", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: refPesquisa,
+            type: "search",
+            value: q,
+            onChange: (e) => {
+              setQ(e.target.value);
+              setAtivo(0);
+            },
+            placeholder: "Pesquisar…",
+            "aria-label": `Pesquisar em ${rotulo}`,
+            className: "h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("ul", { role: "listbox", "aria-label": rotulo, children: [
+          visiveis.length === 0 && /* @__PURE__ */ jsx("li", { className: "px-3 py-2 text-slate-400", children: "Sem resultados" }),
+          visiveis.map((o, i) => {
+            const sel = o.valor === valor;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                role: "option",
+                "aria-selected": sel,
+                "data-indice": i,
+                onMouseEnter: () => setAtivo(i),
+                onClick: () => escolher(o),
+                className: clsItem(i === ativo),
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx("span", { className: `block truncate ${sel ? "font-semibold" : ""} ${o.valor === "" && opcaoVazia !== void 0 ? "text-slate-500 dark:text-slate-400" : ""}`, children: o.rotulo }),
+                    o.descricao && /* @__PURE__ */ jsx("span", { className: "block truncate text-[11px] text-slate-500 dark:text-slate-400", children: o.descricao })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "w-4 shrink-0", children: sel && /* @__PURE__ */ jsx(Visto, {}) })
+                ]
+              },
+              o.valor || "__vazia"
+            );
+          })
+        ] })
+      ] }),
+      document.body
+    )
+  ] });
+}
+export {
+  Escolha as default
+};
+//# sourceMappingURL=Escolha.js.map

package/dist/esm/legacy/components/ui/Escolha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Escolha.js","sources":["../../../../../src/legacy/components/ui/Escolha.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { CLS_PAINEL, clsItem, usePainelFlutuante } from './painelFlutuante'\r\n\r\nexport interface OpcaoEscolha {\r\n  valor: string\r\n  rotulo: string\r\n  /** Texto pequeno por baixo do rótulo, na lista. */\r\n  descricao?: string\r\n}\r\n\r\nexport interface EscolhaProps {\r\n  valor: string\r\n  /** Opções: texto simples (valor = rótulo) ou { valor, rotulo, descricao }. */\r\n  opcoes: readonly string[] | readonly OpcaoEscolha[]\r\n  onMudar: (valor: string) => void\r\n  /** Nome acessível (leitores de ecrã). */\r\n  rotulo: string\r\n  /** Texto do botão sem nada escolhido. */\r\n  placeholder?: string\r\n  /**\r\n   * Primeira opção \"vazia\" (valor ''), para desfazer a escolha (ex.: \"Todas\"). Sem isto não há como voltar atrás\r\n   * depois de escolher.\r\n   */\r\n  opcaoVazia?: string\r\n  disabled?: boolean\r\n  /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n  pesquisa?: boolean\r\n  /** Largura (classes tailwind). Por omissão a do conteúdo, entre 10rem e 18rem (etiqueta: a do texto). */\r\n  className?: string\r\n  /**\r\n   * 'barra' (omissão): h-8, como os botões e filtros das barras. 'formulario': a altura dos campos de texto dos\r\n   * formulários (px-3 py-2), para alinhar com eles.\r\n   */\r\n  tamanho?: 'barra' | 'formulario'\r\n  /**\r\n   * 'campo' (omissão) ou 'etiqueta': o botão é uma etiqueta arredondada (ex.: o estado numa linha de tabela), com\r\n   * as cores de `corEtiqueta`. A lista é a mesma.\r\n   */\r\n  aspeto?: 'campo' | 'etiqueta'\r\n  /** Classes de cor da etiqueta (fundo, texto e variante dark:), normalmente conforme o valor escolhido. */\r\n  corEtiqueta?: string\r\n}\r\n\r\nconst Chevron = () => (\r\n  <svg viewBox=\"0 0 24 24\" className=\"h-3.5 w-3.5 shrink-0 text-slate-400\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n    <path d=\"m6 9 6 6 6-6\" />\r\n  </svg>\r\n)\r\nconst Visto = () => (\r\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n    <path d=\"M20 6 9 17l-5-5\" />\r\n  </svg>\r\n)\r\n\r\n/**\r\n * Lista suspensa para escolher um valor (substitui o `<select>` nativo, que abre com o aspeto do sistema e não\r\n * segue o tema). Mesma altura e cantos dos botões e campos (h-8, rounded-lg); a lista tem o mesmo aspeto do\r\n * MenuAcoes. Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; ao escrever com a lista aberta salta para a opção.\r\n */\r\nexport default function Escolha({\r\n  valor,\r\n  opcoes,\r\n  onMudar,\r\n  rotulo,\r\n  placeholder = 'Escolher…',\r\n  opcaoVazia,\r\n  disabled = false,\r\n  pesquisa,\r\n  className,\r\n  tamanho = 'barra',\r\n  aspeto = 'campo',\r\n  corEtiqueta = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n}: EscolhaProps) {\r\n  const etiqueta = aspeto === 'etiqueta'\r\n  const p = usePainelFlutuante('esquerda')\r\n  const lista = useMemo<OpcaoEscolha[]>(() => {\r\n    const base = opcoes.map((o) => (typeof o === 'string' ? { valor: o, rotulo: o } : o))\r\n    return opcaoVazia !== undefined ? [{ valor: '', rotulo: opcaoVazia }, ...base] : base\r\n  }, [opcoes, opcaoVazia])\r\n  const [q, setQ] = useState('')\r\n  const comPesquisa = pesquisa ?? lista.length > 10\r\n  const visiveis = useMemo(() => {\r\n    const t = q.trim().toLowerCase()\r\n    return t ? lista.filter((o) => o.rotulo.toLowerCase().includes(t) || o.descricao?.toLowerCase().includes(t)) : lista\r\n  }, [lista, q])\r\n  const [ativo, setAtivo] = useState(0)\r\n  const refPesquisa = useRef<HTMLInputElement>(null)\r\n  const escolhida = lista.find((o) => o.valor === valor)\r\n\r\n  // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n  useEffect(() => {\r\n    if (!p.aberto) return\r\n    setQ('')\r\n    setAtivo(Math.max(0, lista.findIndex((o) => o.valor === valor)))\r\n    if (comPesquisa) setTimeout(() => refPesquisa.current?.focus(), 0)\r\n  }, [p.aberto]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  // O item ativo fica sempre à vista ao navegar com o teclado.\r\n  useEffect(() => {\r\n    if (p.aberto) p.refPainel.current?.querySelector<HTMLElement>(`[data-indice=\"${ativo}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n  }, [ativo, p.aberto, p.refPainel])\r\n\r\n  const escolher = (o: OpcaoEscolha) => {\r\n    p.fechar()\r\n    p.refBotao.current?.focus()\r\n    if (o.valor !== valor) onMudar(o.valor)\r\n  }\r\n\r\n  const teclado = (e: React.KeyboardEvent) => {\r\n    if (!p.aberto) {\r\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n        e.preventDefault()\r\n        p.setAberto(true)\r\n      }\r\n      return\r\n    }\r\n    if (e.key === 'Escape') {\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      p.fechar()\r\n      p.refBotao.current?.focus()\r\n    } else if (e.key === 'ArrowDown') {\r\n      e.preventDefault()\r\n      setAtivo((i) => Math.min(visiveis.length - 1, i + 1))\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault()\r\n      setAtivo((i) => Math.max(0, i - 1))\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault()\r\n      setAtivo(0)\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault()\r\n      setAtivo(visiveis.length - 1)\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault()\r\n      const o = visiveis[ativo]\r\n      if (o) escolher(o)\r\n    } else if (e.key === 'Tab') {\r\n      p.fechar()\r\n    } else if (!comPesquisa && e.key.length === 1) {\r\n      // Sem caixa de pesquisa: a letra salta para a primeira opção que começa por ela.\r\n      const i = visiveis.findIndex((o) => o.rotulo.toLowerCase().startsWith(e.key.toLowerCase()))\r\n      if (i >= 0) setAtivo(i)\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div className={`relative inline-block ${className ?? (etiqueta ? '' : 'min-w-[10rem] max-w-[18rem]')}`} onKeyDown={teclado}>\r\n      <button\r\n        ref={p.refBotao}\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={p.aberto}\r\n        aria-label={rotulo}\r\n        onClick={(e) => {\r\n          // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n          e.stopPropagation()\r\n          p.setAberto((a) => !a)\r\n        }}\r\n        className={\r\n          etiqueta\r\n            ? `appearance-none cursor-pointer border-0 inline-flex items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${corEtiqueta}`\r\n            : `appearance-none cursor-pointer w-full ${tamanho === 'formulario' ? 'h-[38px] px-3' : 'h-8 px-2.5'} inline-flex items-center justify-between gap-2 rounded-lg border border-slate-300 bg-white text-sm text-slate-800 transition hover:border-slate-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100 dark:hover:border-slate-500`\r\n        }\r\n      >\r\n        <span className={`truncate ${escolhida || etiqueta ? '' : 'text-slate-400 dark:text-slate-500'}`}>{escolhida?.rotulo ?? placeholder}</span>\r\n        {etiqueta ? <span className=\"opacity-60\"><Chevron /></span> : <Chevron />}\r\n      </button>\r\n      {p.aberto &&\r\n        createPortal(\r\n          <div ref={p.refPainel} style={p.estilo} className={CLS_PAINEL} onClick={(e) => e.stopPropagation()} onKeyDown={teclado}>\r\n            {comPesquisa && (\r\n              <div className=\"px-2 pb-1 pt-0.5\">\r\n                <input\r\n                  ref={refPesquisa}\r\n                  type=\"search\"\r\n                  value={q}\r\n                  onChange={(e) => {\r\n                    setQ(e.target.value)\r\n                    setAtivo(0)\r\n                  }}\r\n                  placeholder=\"Pesquisar…\"\r\n                  aria-label={`Pesquisar em ${rotulo}`}\r\n                  className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n                />\r\n              </div>\r\n            )}\r\n            <ul role=\"listbox\" aria-label={rotulo}>\r\n              {visiveis.length === 0 && <li className=\"px-3 py-2 text-slate-400\">Sem resultados</li>}\r\n              {visiveis.map((o, i) => {\r\n                const sel = o.valor === valor\r\n                return (\r\n                  <li\r\n                    key={o.valor || '__vazia'}\r\n                    role=\"option\"\r\n                    aria-selected={sel}\r\n                    data-indice={i}\r\n                    onMouseEnter={() => setAtivo(i)}\r\n                    onClick={() => escolher(o)}\r\n                    className={clsItem(i === ativo)}\r\n                  >\r\n                    <span className=\"min-w-0 flex-1\">\r\n                      <span className={`block truncate ${sel ? 'font-semibold' : ''} ${o.valor === '' && opcaoVazia !== undefined ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.rotulo}</span>\r\n                      {o.descricao && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.descricao}</span>}\r\n                    </span>\r\n                    <span className=\"w-4 shrink-0\">{sel && <Visto />}</span>\r\n                  </li>\r\n                )\r\n              })}\r\n            </ul>\r\n          </div>,\r\n          document.body\r\n        )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/legacy/components/ui/FaixaAviso.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function FaixaAviso({ children, tom = "aviso", acao, icone }) {
+  const cores = {
+    aviso: "bg-amber-100 text-amber-950 border-amber-300",
+    info: "bg-sky-50 text-sky-900 border-sky-200",
+    erro: "bg-incumprido-bg text-incumprido border-incumprido/30"
+  };
+  return /* @__PURE__ */ jsxs("div", { role: tom === "erro" ? "alert" : "status", className: `flex flex-wrap items-center gap-x-3 gap-y-1 border-b px-4 py-2 text-xs font-bold ${cores[tom]}`, children: [
+    icone && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icone }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children }),
+    acao && /* @__PURE__ */ jsx("button", { type: "button", onClick: acao.onClick, className: "shrink-0 rounded-md uppercase tracking-widest underline underline-offset-2 hover:no-underline", children: acao.rotulo })
+  ] });
+}
+export {
+  FaixaAviso as default
+};
+//# sourceMappingURL=FaixaAviso.js.map

package/dist/esm/legacy/components/ui/FaixaAviso.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FaixaAviso.js","sources":["../../../../../src/legacy/components/ui/FaixaAviso.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type TomFaixa = 'aviso' | 'info' | 'erro'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface FaixaAvisoProps {\r\n  children: ReactNode\r\n  tom?: TomFaixa\r\n  /** Ação à direita (ex: \"Voltar ao meu perfil\" no \"Ver como\"). */\r\n  acao?: { rotulo: ReactNode; onClick: () => void }\r\n  icone?: ReactNode\r\n}\r\n\r\n/**\r\n * Faixa no topo do conteúdo para um estado que afeta a página inteira: \"Ver\r\n * como\" outro perfil, um serviço externo em baixo, dados possivelmente\r\n * incompletos. Não é para resultados de ações — esses são avisos (`useAvisos`).\r\n *\r\n * Fica bem no slot `topBar` do Layout.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function FaixaAviso({ children, tom = 'aviso', acao, icone }: FaixaAvisoProps) {\r\n  const cores: Record<TomFaixa, string> = {\r\n    aviso: 'bg-amber-100 text-amber-950 border-amber-300',\r\n    info: 'bg-sky-50 text-sky-900 border-sky-200',\r\n    erro: 'bg-incumprido-bg text-incumprido border-incumprido/30',\r\n  }\r\n  return (\r\n    <div role={tom === 'erro' ? 'alert' : 'status'} className={`flex flex-wrap items-center gap-x-3 gap-y-1 border-b px-4 py-2 text-xs font-bold ${cores[tom]}`}>\r\n      {icone && <span className=\"shrink-0\">{icone}</span>}\r\n      <span className=\"min-w-0 flex-1\">{children}</span>\r\n      {acao && (\r\n        <button type=\"button\" onClick={acao.onClick} className=\"shrink-0 rounded-md uppercase tracking-widest underline underline-offset-2 hover:no-underline\">\r\n          {acao.rotulo}\r\n        </button>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";AAsBA,SAAwB,WAAW,EAAE,UAAU,MAAM,SAAS,MAAM,SAA0B;AAC5F,QAAM,QAAkC;AAAA,IACtC,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAER,SACE,qBAAC,OAAA,EAAI,MAAM,QAAQ,SAAS,UAAU,UAAU,WAAW,oFAAoF,MAAM,GAAG,CAAC,IACtJ,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,OAAM;AAAA,IAC5C,oBAAC,QAAA,EAAK,WAAU,kBAAkB,SAAA,CAAS;AAAA,IAC1C,QACC,oBAAC,UAAA,EAAO,MAAK,UAAS,SAAS,KAAK,SAAS,WAAU,iGACpD,UAAA,KAAK,OAAA,CACR;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/esm/legacy/components/ui/MenuAcoes.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useMemo, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { usePainelFlutuante, CLS_PAINEL, clsItem } from "./painelFlutuante.js";
+function MenuAcoes({ acoes, rotulo, titulo, alinhar = "direita", disabled = false }) {
+  const p = usePainelFlutuante(alinhar);
+  const itens = useMemo(() => acoes.filter((a) => !!a), [acoes]);
+  const ativas = itens.map((a, i) => a.desativado ? -1 : i).filter((i) => i >= 0);
+  const [ativo, setAtivo] = useState(-1);
+  useEffect(() => {
+    if (p.aberto) setAtivo(ativas[0] ?? -1);
+  }, [p.aberto]);
+  const executar = (a) => {
+    if (a.desativado) return;
+    p.fechar();
+    a.onClick();
+  };
+  const teclado = (e) => {
+    if (!p.aberto) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        p.setAberto(true);
+      }
+      return;
+    }
+    const pos = ativas.indexOf(ativo);
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      p.fechar();
+      p.refBotao.current?.focus();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setAtivo(ativas[Math.min(ativas.length - 1, pos + 1)] ?? -1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setAtivo(ativas[Math.max(0, pos - 1)] ?? -1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      const a = itens[ativo];
+      if (a) executar(a);
+    } else if (e.key === "Tab") {
+      p.fechar();
+    }
+  };
+  if (itens.length === 0) return null;
+  const botao = rotulo ? /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: p.refBotao,
+      type: "button",
+      disabled,
+      title: titulo,
+      "aria-haspopup": "menu",
+      "aria-expanded": p.aberto,
+      onClick: (e) => {
+        e.stopPropagation();
+        p.setAberto((a) => !a);
+      },
+      className: `inline-flex items-center gap-1 px-3.5 py-1.5 rounded-md text-[11px] font-black uppercase tracking-widest transition-colors whitespace-nowrap border disabled:opacity-50 disabled:cursor-not-allowed ${p.aberto ? "bg-proef-navy text-white border-proef-navy dark:bg-proef-blue dark:border-proef-blue" : "bg-white text-slate-500 border-slate-200 hover:border-proef-navy hover:text-proef-navy dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700 dark:hover:border-slate-400 dark:hover:text-white"}`,
+      children: [
+        rotulo,
+        /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: `h-3.5 w-3.5 transition-transform ${p.aberto ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+      ]
+    }
+  ) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: p.refBotao,
+      type: "button",
+      disabled,
+      title: titulo,
+      "aria-label": titulo ?? "Ações",
+      "aria-haspopup": "menu",
+      "aria-expanded": p.aberto,
+      onClick: (e) => {
+        e.stopPropagation();
+        p.setAberto((a) => !a);
+      },
+      className: `appearance-none cursor-pointer border-0 p-1.5 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white disabled:opacity-50 ${p.aberto ? "bg-slate-100 dark:bg-slate-700" : "bg-transparent"}`,
+      children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "currentColor", "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.8" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.8" }),
+        /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.8" })
+      ] })
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-block", onKeyDown: teclado, children: [
+    botao,
+    p.aberto && createPortal(
+      /* @__PURE__ */ jsx("div", { ref: p.refPainel, style: p.estilo, className: CLS_PAINEL, role: "menu", onClick: (e) => e.stopPropagation(), onKeyDown: teclado, children: itens.map((a, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        a.separador && i > 0 && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-slate-100 dark:border-slate-800" }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            disabled: a.desativado,
+            onMouseEnter: () => !a.desativado && setAtivo(i),
+            onClick: () => executar(a),
+            className: `appearance-none border-0 ${clsItem(i === ativo, a.perigo)} disabled:opacity-40 disabled:cursor-not-allowed`,
+            children: [
+              a.icone && /* @__PURE__ */ jsx("span", { className: "shrink-0 [&>svg]:h-4 [&>svg]:w-4", children: a.icone }),
+              /* @__PURE__ */ jsx("span", { className: "truncate", children: a.rotulo })
+            ]
+          }
+        )
+      ] }, i)) }),
+      document.body
+    )
+  ] });
+}
+export {
+  MenuAcoes as default
+};
+//# sourceMappingURL=MenuAcoes.js.map

package/dist/esm/legacy/components/ui/MenuAcoes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuAcoes.js","sources":["../../../../../src/legacy/components/ui/MenuAcoes.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState, type ReactNode } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { CLS_PAINEL, clsItem, usePainelFlutuante } from './painelFlutuante'\r\n\r\nexport interface AcaoMenu {\r\n  rotulo: ReactNode\r\n  onClick: () => void\r\n  /** Ícone à esquerda (ex.: um ícone do lucide-react com className=\"h-4 w-4\"). */\r\n  icone?: ReactNode\r\n  /** Ação destrutiva (eliminar, fechar…): a vermelho. */\r\n  perigo?: boolean\r\n  desativado?: boolean\r\n  /** Linha separadora antes deste item. */\r\n  separador?: boolean\r\n}\r\n\r\nexport interface MenuAcoesProps {\r\n  /** Itens; `false`/`null`/`undefined` são ignorados (para `cond && {...}`). */\r\n  acoes: (AcaoMenu | false | null | undefined)[]\r\n  /**\r\n   * Conteúdo do botão. Sem rótulo, o botão é o ícone \"⋯\" (ações de uma linha de tabela).\r\n   * Com rótulo, é um botão como o Btn, com uma seta.\r\n   */\r\n  rotulo?: ReactNode\r\n  /** Nome acessível / tooltip do botão. */\r\n  titulo?: string\r\n  /** Lado para onde a lista abre, a partir do botão. Por omissão, alinhada à direita do botão. */\r\n  alinhar?: 'esquerda' | 'direita'\r\n  disabled?: boolean\r\n}\r\n\r\n/**\r\n * Botão que abre uma lista de ações (ex.: \"Ações do ano\", o \"⋯\" de cada linha). Mesmo aspeto da lista da\r\n * Escolha. Teclado: ↑/↓ percorrem, Enter executa, Esc fecha. Os cliques não chegam à linha da tabela.\r\n */\r\nexport default function MenuAcoes({ acoes, rotulo, titulo, alinhar = 'direita', disabled = false }: MenuAcoesProps) {\r\n  const p = usePainelFlutuante(alinhar)\r\n  const itens = useMemo(() => acoes.filter((a): a is AcaoMenu => !!a), [acoes])\r\n  const ativas = itens.map((a, i) => (a.desativado ? -1 : i)).filter((i) => i >= 0)\r\n  const [ativo, setAtivo] = useState(-1)\r\n\r\n  useEffect(() => {\r\n    if (p.aberto) setAtivo(ativas[0] ?? -1)\r\n  }, [p.aberto]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  const executar = (a: AcaoMenu) => {\r\n    if (a.desativado) return\r\n    p.fechar()\r\n    a.onClick()\r\n  }\r\n\r\n  const teclado = (e: React.KeyboardEvent) => {\r\n    if (!p.aberto) {\r\n      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\r\n        e.preventDefault()\r\n        p.setAberto(true)\r\n      }\r\n      return\r\n    }\r\n    const pos = ativas.indexOf(ativo)\r\n    if (e.key === 'Escape') {\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      p.fechar()\r\n      p.refBotao.current?.focus()\r\n    } else if (e.key === 'ArrowDown') {\r\n      e.preventDefault()\r\n      setAtivo(ativas[Math.min(ativas.length - 1, pos + 1)] ?? -1)\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault()\r\n      setAtivo(ativas[Math.max(0, pos - 1)] ?? -1)\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault()\r\n      const a = itens[ativo]\r\n      if (a) executar(a)\r\n    } else if (e.key === 'Tab') {\r\n      p.fechar()\r\n    }\r\n  }\r\n\r\n  if (itens.length === 0) return null\r\n\r\n  const botao = rotulo ? (\r\n    <button\r\n      ref={p.refBotao}\r\n      type=\"button\"\r\n      disabled={disabled}\r\n      title={titulo}\r\n      aria-haspopup=\"menu\"\r\n      aria-expanded={p.aberto}\r\n      onClick={(e) => {\r\n        e.stopPropagation()\r\n        p.setAberto((a) => !a)\r\n      }}\r\n      className={`inline-flex items-center gap-1 px-3.5 py-1.5 rounded-md text-[11px] font-black uppercase tracking-widest transition-colors whitespace-nowrap border disabled:opacity-50 disabled:cursor-not-allowed ${\r\n        p.aberto\r\n          ? 'bg-proef-navy text-white border-proef-navy dark:bg-proef-blue dark:border-proef-blue'\r\n          : 'bg-white text-slate-500 border-slate-200 hover:border-proef-navy hover:text-proef-navy dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700 dark:hover:border-slate-400 dark:hover:text-white'\r\n      }`}\r\n    >\r\n      {rotulo}\r\n      <svg viewBox=\"0 0 24 24\" className={`h-3.5 w-3.5 transition-transform ${p.aberto ? 'rotate-180' : ''}`} fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n        <path d=\"m6 9 6 6 6-6\" />\r\n      </svg>\r\n    </button>\r\n  ) : (\r\n    <button\r\n      ref={p.refBotao}\r\n      type=\"button\"\r\n      disabled={disabled}\r\n      title={titulo}\r\n      aria-label={titulo ?? 'Ações'}\r\n      aria-haspopup=\"menu\"\r\n      aria-expanded={p.aberto}\r\n      onClick={(e) => {\r\n        e.stopPropagation()\r\n        p.setAberto((a) => !a)\r\n      }}\r\n      className={`appearance-none cursor-pointer border-0 p-1.5 rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white disabled:opacity-50 ${\r\n        p.aberto ? 'bg-slate-100 dark:bg-slate-700' : 'bg-transparent'\r\n      }`}\r\n    >\r\n      <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"currentColor\" aria-hidden>\r\n        <circle cx=\"5\" cy=\"12\" r=\"1.8\" />\r\n        <circle cx=\"12\" cy=\"12\" r=\"1.8\" />\r\n        <circle cx=\"19\" cy=\"12\" r=\"1.8\" />\r\n      </svg>\r\n    </button>\r\n  )\r\n\r\n  return (\r\n    <div className=\"relative inline-block\" onKeyDown={teclado}>\r\n      {botao}\r\n      {p.aberto &&\r\n        createPortal(\r\n          <div ref={p.refPainel} style={p.estilo} className={CLS_PAINEL} role=\"menu\" onClick={(e) => e.stopPropagation()} onKeyDown={teclado}>\r\n            {itens.map((a, i) => (\r\n              <React.Fragment key={i}>\r\n                {a.separador && i > 0 && <div className=\"my-1 border-t border-slate-100 dark:border-slate-800\" />}\r\n                <button\r\n                  type=\"button\"\r\n                  role=\"menuitem\"\r\n                  disabled={a.desativado}\r\n                  onMouseEnter={() => !a.desativado && setAtivo(i)}\r\n                  onClick={() => executar(a)}\r\n                  className={`appearance-none border-0 ${clsItem(i === ativo, a.perigo)} disabled:opacity-40 disabled:cursor-not-allowed`}\r\n                >\r\n                  {a.icone && <span className=\"shrink-0 [&>svg]:h-4 [&>svg]:w-4\">{a.icone}</span>}\r\n                  <span className=\"truncate\">{a.rotulo}</span>\r\n                </button>\r\n              </React.Fragment>\r\n            ))}\r\n          </div>,\r\n          document.body\r\n        )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/legacy/components/ui/Passos.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function Passos({ passos, atual, onMudar, livre = false, rotulo = "Passos" }) {
+  const iAtual = passos.findIndex((p) => p.id === atual);
+  return /* @__PURE__ */ jsx("nav", { "aria-label": rotulo, className: "bg-white border border-slate-200 rounded-xl px-4 py-3 dark:bg-slate-900 dark:border-slate-700", children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-2", children: passos.map((p, i) => {
+    const eAtual = i === iAtual;
+    const clicavel = !!onMudar && !eAtual && (livre || p.concluido);
+    const circulo = p.erro ? "bg-incumprido border-incumprido text-white" : eAtual ? "bg-proef-navy border-proef-navy text-white" : p.concluido ? "bg-proef-turquoise border-proef-turquoise text-proef-navy" : "bg-white border-slate-300 text-slate-500 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-400";
+    const conteudo = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: `inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 text-xs font-extrabold ${circulo}`,
+          children: p.erro ? "!" : p.concluido && !eAtual ? "✓" : i + 1
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: `text-xs font-bold whitespace-nowrap ${eAtual ? "text-proef-navy dark:text-slate-100" : "text-slate-500"}`, children: [
+        p.rotulo,
+        p.erro && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (com erros)" }),
+        p.concluido && !p.erro && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (concluído)" })
+      ] })
+    ] });
+    return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2 flex-1 min-w-fit", "aria-current": eAtual ? "step" : void 0, children: [
+      clicavel ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onMudar(p.id), className: "flex items-center gap-2 rounded-md hover:underline", children: conteudo }) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: conteudo }),
+      i < passos.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: `h-0.5 flex-1 min-w-4 ${p.concluido ? "bg-proef-turquoise" : "bg-slate-200"}` })
+    ] }, p.id);
+  }) }) });
+}
+export {
+  Passos as default
+};
+//# sourceMappingURL=Passos.js.map

package/dist/esm/legacy/components/ui/Passos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Passos.js","sources":["../../../../../src/legacy/components/ui/Passos.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface Passo<T extends string> {\r\n  id: T\r\n  rotulo: ReactNode\r\n  /** Passo já preenchido e válido (✓). */\r\n  concluido?: boolean\r\n  /** Passo com erros por corrigir. */\r\n  erro?: boolean\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface PassosProps<T extends string> {\r\n  passos: Passo<T>[]\r\n  atual: T\r\n  /** Sem isto, os passos são só indicação (não se clica). */\r\n  onMudar?: (id: T) => void\r\n  /**\r\n   * Todos os passos clicáveis. Num registo já existente (editar/visualizar)\r\n   * pode-se saltar para qualquer passo; num novo, só para os já concluídos.\r\n   */\r\n  livre?: boolean\r\n  rotulo?: string\r\n}\r\n\r\n/**\r\n * Barra de passos para formulários longos (página própria, não pop-up).\r\n *\r\n * Mostra onde se está, o que já está feito e onde há erros — o que um\r\n * formulário de seis secções seguidas não diz.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function Passos<T extends string>({ passos, atual, onMudar, livre = false, rotulo = 'Passos' }: PassosProps<T>) {\r\n  const iAtual = passos.findIndex((p) => p.id === atual)\r\n  return (\r\n    <nav aria-label={rotulo} className=\"bg-white border border-slate-200 rounded-xl px-4 py-3 dark:bg-slate-900 dark:border-slate-700\">\r\n      <ol className=\"flex flex-wrap items-center gap-2\">\r\n        {passos.map((p, i) => {\r\n          const eAtual = i === iAtual\r\n          const clicavel = !!onMudar && !eAtual && (livre || p.concluido)\r\n          const circulo = p.erro\r\n            ? 'bg-incumprido border-incumprido text-white'\r\n            : eAtual\r\n              ? 'bg-proef-navy border-proef-navy text-white'\r\n              : p.concluido\r\n                ? 'bg-proef-turquoise border-proef-turquoise text-proef-navy'\r\n                : 'bg-white border-slate-300 text-slate-500 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-400'\r\n          const conteudo = (\r\n            <>\r\n              <span\r\n                aria-hidden=\"true\"\r\n                className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 text-xs font-extrabold ${circulo}`}\r\n              >\r\n                {p.erro ? '!' : p.concluido && !eAtual ? '✓' : i + 1}\r\n              </span>\r\n              <span className={`text-xs font-bold whitespace-nowrap ${eAtual ? 'text-proef-navy dark:text-slate-100' : 'text-slate-500'}`}>\r\n                {p.rotulo}\r\n                {p.erro && <span className=\"sr-only\"> (com erros)</span>}\r\n                {p.concluido && !p.erro && <span className=\"sr-only\"> (concluído)</span>}\r\n              </span>\r\n            </>\r\n          )\r\n          return (\r\n            <li key={p.id} className=\"flex items-center gap-2 flex-1 min-w-fit\" aria-current={eAtual ? 'step' : undefined}>\r\n              {clicavel ? (\r\n                <button type=\"button\" onClick={() => onMudar!(p.id)} className=\"flex items-center gap-2 rounded-md hover:underline\">\r\n                  {conteudo}\r\n                </button>\r\n              ) : (\r\n                <span className=\"flex items-center gap-2\">{conteudo}</span>\r\n              )}\r\n              {i < passos.length - 1 && (\r\n                <span aria-hidden=\"true\" className={`h-0.5 flex-1 min-w-4 ${p.concluido ? 'bg-proef-turquoise' : 'bg-slate-200'}`} />\r\n              )}\r\n            </li>\r\n          )\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  )\r\n}\r\n"],"names":[],"mappings":";AAiCA,SAAwB,OAAyB,EAAE,QAAQ,OAAO,SAAS,QAAQ,OAAO,SAAS,YAA4B;AAC7H,QAAM,SAAS,OAAO,UAAU,CAAC,MAAM,EAAE,OAAO,KAAK;AACrD,SACE,oBAAC,OAAA,EAAI,cAAY,QAAQ,WAAU,iGACjC,UAAA,oBAAC,MAAA,EAAG,WAAU,qCACX,UAAA,OAAO,IAAI,CAAC,GAAG,MAAM;AACpB,UAAM,SAAS,MAAM;AACrB,UAAM,WAAW,CAAC,CAAC,WAAW,CAAC,WAAW,SAAS,EAAE;AACrD,UAAM,UAAU,EAAE,OACd,+CACA,SACE,+CACA,EAAE,YACA,8DACA;AACR,UAAM,WACJ,qBAAA,UAAA,EACE,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAW,yGAAyG,OAAO;AAAA,UAE1H,UAAA,EAAE,OAAO,MAAM,EAAE,aAAa,CAAC,SAAS,MAAM,IAAI;AAAA,QAAA;AAAA,MAAA;AAAA,2BAEpD,QAAA,EAAK,WAAW,uCAAuC,SAAS,wCAAwC,gBAAgB,IACtH,UAAA;AAAA,QAAA,EAAE;AAAA,QACF,EAAE,QAAQ,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,gBAAY;AAAA,QAChD,EAAE,aAAa,CAAC,EAAE,QAAQ,oBAAC,QAAA,EAAK,WAAU,WAAU,UAAA,eAAA,CAAY;AAAA,MAAA,EAAA,CACnE;AAAA,IAAA,GACF;AAEF,gCACG,MAAA,EAAc,WAAU,4CAA2C,gBAAc,SAAS,SAAS,QACjG,UAAA;AAAA,MAAA,+BACE,UAAA,EAAO,MAAK,UAAS,SAAS,MAAM,QAAS,EAAE,EAAE,GAAG,WAAU,sDAC5D,UAAA,UACH,wBAEC,QAAA,EAAK,WAAU,2BAA2B,UAAA,UAAS;AAAA,MAErD,IAAI,OAAO,SAAS,yBAClB,QAAA,EAAK,eAAY,QAAO,WAAW,wBAAwB,EAAE,YAAY,uBAAuB,cAAc,GAAA,CAAI;AAAA,IAAA,EAAA,GAT9G,EAAE,EAWX;AAAA,EAEJ,CAAC,GACH,GACF;AAEJ;"}

package/dist/esm/legacy/components/ui/Separadores.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+function Separadores({ itens, ativo, onMudar, rotulo }) {
+  const refs = useRef([]);
+  const ativos = itens.map((it, i) => ({ it, i })).filter((x) => !x.it.desativado);
+  const teclas = (e, indice) => {
+    const pos = ativos.findIndex((x) => x.i === indice);
+    let destino = null;
+    if (e.key === "ArrowRight") destino = ativos[(pos + 1) % ativos.length].i;
+    else if (e.key === "ArrowLeft") destino = ativos[(pos - 1 + ativos.length) % ativos.length].i;
+    else if (e.key === "Home") destino = ativos[0].i;
+    else if (e.key === "End") destino = ativos[ativos.length - 1].i;
+    if (destino === null) return;
+    e.preventDefault();
+    onMudar(itens[destino].id);
+    refs.current[destino]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { role: "tablist", "aria-label": rotulo, className: "flex flex-wrap border-b border-slate-200 dark:border-slate-700", children: itens.map((it, i) => {
+    const sel = it.id === ativo;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "button",
+        role: "tab",
+        "aria-selected": sel,
+        tabIndex: sel ? 0 : -1,
+        disabled: it.desativado,
+        onClick: () => onMudar(it.id),
+        onKeyDown: (e) => teclas(e, i),
+        className: `-mb-px inline-flex items-center gap-2 border-b-[3px] px-4 py-3 text-xs font-black uppercase tracking-wider transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${sel ? "border-proef-navy text-proef-navy dark:border-slate-100 dark:text-slate-100" : "border-transparent text-slate-500 hover:text-proef-navy dark:text-slate-400 dark:hover:text-slate-100"}`,
+        children: [
+          it.rotulo,
+          it.contagem != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `rounded-full px-2 py-px text-[11px] font-extrabold tracking-normal ${sel ? "bg-proef-navy text-white dark:bg-proef-blue" : "bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200"}`,
+              children: it.contagem
+            }
+          )
+        ]
+      },
+      it.id
+    );
+  }) });
+}
+export {
+  Separadores as default
+};
+//# sourceMappingURL=Separadores.js.map

package/dist/esm/legacy/components/ui/Separadores.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separadores.js","sources":["../../../../../src/legacy/components/ui/Separadores.tsx"],"sourcesContent":["import React, { useRef, type ReactNode, type KeyboardEvent } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface Separador<T extends string> {\r\n  id: T\r\n  rotulo: ReactNode\r\n  /** Número à frente do rótulo (ex: faturas por mapear). Omitir quando não interessa. */\r\n  contagem?: number\r\n  desativado?: boolean\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface SeparadoresProps<T extends string> {\r\n  itens: Separador<T>[]\r\n  ativo: T\r\n  onMudar: (id: T) => void\r\n  /** Rótulo acessível do conjunto (ex: \"Estado das faturas\"). */\r\n  rotulo?: string\r\n}\r\n\r\n/**\r\n * Separadores de uma página, iguais em todo o portal.\r\n *\r\n * O ativo fica a navy com sublinhado (não turquesa: turquesa sobre branco não\r\n * tem contraste para texto). Setas esquerda/direita, Home e End mudam de\r\n * separador, como num tablist normal.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function Separadores<T extends string>({ itens, ativo, onMudar, rotulo }: SeparadoresProps<T>) {\r\n  const refs = useRef<(HTMLButtonElement | null)[]>([])\r\n  const ativos = itens.map((it, i) => ({ it, i })).filter((x) => !x.it.desativado)\r\n\r\n  const teclas = (e: KeyboardEvent<HTMLButtonElement>, indice: number): void => {\r\n    const pos = ativos.findIndex((x) => x.i === indice)\r\n    let destino: number | null = null\r\n    if (e.key === 'ArrowRight') destino = ativos[(pos + 1) % ativos.length]!.i\r\n    else if (e.key === 'ArrowLeft') destino = ativos[(pos - 1 + ativos.length) % ativos.length]!.i\r\n    else if (e.key === 'Home') destino = ativos[0]!.i\r\n    else if (e.key === 'End') destino = ativos[ativos.length - 1]!.i\r\n    if (destino === null) return\r\n    e.preventDefault()\r\n    onMudar(itens[destino]!.id)\r\n    refs.current[destino]?.focus()\r\n  }\r\n\r\n  return (\r\n    <div role=\"tablist\" aria-label={rotulo} className=\"flex flex-wrap border-b border-slate-200 dark:border-slate-700\">\r\n      {itens.map((it, i) => {\r\n        const sel = it.id === ativo\r\n        return (\r\n          <button\r\n            key={it.id}\r\n            ref={(el) => {\r\n              refs.current[i] = el\r\n            }}\r\n            type=\"button\"\r\n            role=\"tab\"\r\n            aria-selected={sel}\r\n            tabIndex={sel ? 0 : -1}\r\n            disabled={it.desativado}\r\n            onClick={() => onMudar(it.id)}\r\n            onKeyDown={(e) => teclas(e, i)}\r\n            className={`-mb-px inline-flex items-center gap-2 border-b-[3px] px-4 py-3 text-xs font-black uppercase tracking-wider transition-colors disabled:cursor-not-allowed disabled:opacity-40 ${\r\n              sel\r\n                ? 'border-proef-navy text-proef-navy dark:border-slate-100 dark:text-slate-100'\r\n                : 'border-transparent text-slate-500 hover:text-proef-navy dark:text-slate-400 dark:hover:text-slate-100'\r\n            }`}\r\n          >\r\n            {it.rotulo}\r\n            {it.contagem != null && (\r\n              <span\r\n                className={`rounded-full px-2 py-px text-[11px] font-extrabold tracking-normal ${\r\n                  sel ? 'bg-proef-navy text-white dark:bg-proef-blue' : 'bg-slate-200 text-slate-700 dark:bg-slate-700 dark:text-slate-200'\r\n                }`}\r\n              >\r\n                {it.contagem}\r\n              </span>\r\n            )}\r\n          </button>\r\n        )\r\n      })}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AA4BA,SAAwB,YAA8B,EAAE,OAAO,OAAO,SAAS,UAA+B;AAC5G,QAAM,OAAO,OAAqC,EAAE;AACpD,QAAM,SAAS,MAAM,IAAI,CAAC,IAAI,OAAO,EAAE,IAAI,EAAA,EAAI,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,GAAG,UAAU;AAE/E,QAAM,SAAS,CAAC,GAAqC,WAAyB;AAC5E,UAAM,MAAM,OAAO,UAAU,CAAC,MAAM,EAAE,MAAM,MAAM;AAClD,QAAI,UAAyB;AAC7B,QAAI,EAAE,QAAQ,aAAc,WAAU,QAAQ,MAAM,KAAK,OAAO,MAAM,EAAG;AAAA,aAChE,EAAE,QAAQ,YAAa,WAAU,QAAQ,MAAM,IAAI,OAAO,UAAU,OAAO,MAAM,EAAG;AAAA,aACpF,EAAE,QAAQ,OAAQ,WAAU,OAAO,CAAC,EAAG;AAAA,aACvC,EAAE,QAAQ,MAAO,WAAU,OAAO,OAAO,SAAS,CAAC,EAAG;AAC/D,QAAI,YAAY,KAAM;AACtB,MAAE,eAAA;AACF,YAAQ,MAAM,OAAO,EAAG,EAAE;AAC1B,SAAK,QAAQ,OAAO,GAAG,MAAA;AAAA,EACzB;AAEA,SACE,oBAAC,OAAA,EAAI,MAAK,WAAU,cAAY,QAAQ,WAAU,kEAC/C,UAAA,MAAM,IAAI,CAAC,IAAI,MAAM;AACpB,UAAM,MAAM,GAAG,OAAO;AACtB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,KAAK,CAAC,OAAO;AACX,eAAK,QAAQ,CAAC,IAAI;AAAA,QACpB;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,UAAU,MAAM,IAAI;AAAA,QACpB,UAAU,GAAG;AAAA,QACb,SAAS,MAAM,QAAQ,GAAG,EAAE;AAAA,QAC5B,WAAW,CAAC,MAAM,OAAO,GAAG,CAAC;AAAA,QAC7B,WAAW,gLACT,MACI,gFACA,uGACN;AAAA,QAEC,UAAA;AAAA,UAAA,GAAG;AAAA,UACH,GAAG,YAAY,QACd;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,sEACT,MAAM,gDAAgD,mEACxD;AAAA,cAEC,UAAA,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,MAzBG,GAAG;AAAA,IAAA;AAAA,EA6Bd,CAAC,EAAA,CACH;AAEJ;"}

package/dist/esm/legacy/components/ui/TextoAuto.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useLayoutEffect } from "react";
+const TextoAuto = forwardRef(function TextoAuto2({ minLinhas = 1, maxLinhas = 15, value, style, className = "", ...resto }, refExterna) {
+  const ref = useRef(null);
+  useImperativeHandle(refExterna, () => ref.current);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const cs = getComputedStyle(el);
+    el.style.height = "auto";
+    const linha = parseFloat(cs.lineHeight) || 20;
+    const bordas = el.offsetHeight - el.clientHeight;
+    const max = linha * maxLinhas + parseFloat(cs.paddingTop || "0") + parseFloat(cs.paddingBottom || "0") + bordas;
+    const pedido = el.scrollHeight + bordas;
+    el.style.height = `${Math.min(pedido, max)}px`;
+    el.style.overflowY = pedido > max ? "auto" : "hidden";
+  }, [value, maxLinhas]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref,
+      rows: minLinhas,
+      value,
+      style: { resize: "none", ...style },
+      className: `w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 focus:border-proef-blue focus:outline-none focus:ring-1 focus:ring-proef-blue ${className}`,
+      ...resto
+    }
+  );
+});
+export {
+  TextoAuto as default
+};
+//# sourceMappingURL=TextoAuto.js.map

package/dist/esm/legacy/components/ui/TextoAuto.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextoAuto.js","sources":["../../../../../src/legacy/components/ui/TextoAuto.tsx"],"sourcesContent":["import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, type TextareaHTMLAttributes } from 'react'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type TextoAutoProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows'> & {\r\n  /** Altura mínima, em linhas. */\r\n  minLinhas?: number\r\n  /** A partir daqui deixa de crescer e passa a ter scroll. */\r\n  maxLinhas?: number\r\n}\r\n\r\n/**\r\n * Caixa de texto que cresce com o conteúdo até `maxLinhas`; a partir daí tem\r\n * scroll. Enter muda de linha (não submete).\r\n *\r\n * Vinda do Auditorias IT (comentários e descrições), onde uma textarea fixa ou\r\n * cortava o texto ou ocupava meio ecrã vazia.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nconst TextoAuto = forwardRef<HTMLTextAreaElement, TextoAutoProps>(function TextoAuto(\r\n  { minLinhas = 1, maxLinhas = 15, value, style, className = '', ...resto },\r\n  refExterna\r\n) {\r\n  const ref = useRef<HTMLTextAreaElement>(null)\r\n  useImperativeHandle(refExterna, () => ref.current as HTMLTextAreaElement)\r\n\r\n  useLayoutEffect(() => {\r\n    const el = ref.current\r\n    if (!el) return\r\n    const cs = getComputedStyle(el)\r\n    el.style.height = 'auto'\r\n    const linha = parseFloat(cs.lineHeight) || 20\r\n    const bordas = el.offsetHeight - el.clientHeight\r\n    const max = linha * maxLinhas + parseFloat(cs.paddingTop || '0') + parseFloat(cs.paddingBottom || '0') + bordas\r\n    const pedido = el.scrollHeight + bordas\r\n    el.style.height = `${Math.min(pedido, max)}px`\r\n    el.style.overflowY = pedido > max ? 'auto' : 'hidden'\r\n  }, [value, maxLinhas])\r\n\r\n  return (\r\n    <textarea\r\n      ref={ref}\r\n      rows={minLinhas}\r\n      value={value}\r\n      style={{ resize: 'none', ...style }}\r\n      className={`w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 focus:border-proef-blue focus:outline-none focus:ring-1 focus:ring-proef-blue ${className}`}\r\n      {...resto}\r\n    />\r\n  )\r\n})\r\n\r\nexport default TextoAuto\r\n"],"names":["TextoAuto"],"mappings":";;AAkBA,MAAM,YAAY,WAAgD,SAASA,WACzE,EAAE,YAAY,GAAG,YAAY,IAAI,OAAO,OAAO,YAAY,IAAI,GAAG,MAAA,GAClE,YACA;AACA,QAAM,MAAM,OAA4B,IAAI;AAC5C,sBAAoB,YAAY,MAAM,IAAI,OAA8B;AAExE,kBAAgB,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,KAAK,iBAAiB,EAAE;AAC9B,OAAG,MAAM,SAAS;AAClB,UAAM,QAAQ,WAAW,GAAG,UAAU,KAAK;AAC3C,UAAM,SAAS,GAAG,eAAe,GAAG;AACpC,UAAM,MAAM,QAAQ,YAAY,WAAW,GAAG,cAAc,GAAG,IAAI,WAAW,GAAG,iBAAiB,GAAG,IAAI;AACzG,UAAM,SAAS,GAAG,eAAe;AACjC,OAAG,MAAM,SAAS,GAAG,KAAK,IAAI,QAAQ,GAAG,CAAC;AAC1C,OAAG,MAAM,YAAY,SAAS,MAAM,SAAS;AAAA,EAC/C,GAAG,CAAC,OAAO,SAAS,CAAC;AAErB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA,OAAO,EAAE,QAAQ,QAAQ,GAAG,MAAA;AAAA,MAC5B,WAAW,kNAAkN,SAAS;AAAA,MACrO,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}