@nextelco/common-ui 2.1.98 → 2.1.99

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

@@ -0,0 +1,360 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import Escolha from "./Escolha.js";
+function IconX({ className = "" }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function Card({ title, extra, children, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: `bg-white border border-slate-200 dark:bg-slate-900 dark:border-slate-700 rounded-xl p-4 sm:p-5 ${className}`, children: [
+    (title || extra) && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 mb-3.5", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold dark:text-slate-100", children: title }),
+      extra
+    ] }),
+    children
+  ] });
+}
+function SectionGroup({
+  title,
+  tone = "accent",
+  children
+}) {
+  const tones = {
+    accent: ["border-slate-200 dark:border-slate-700", "text-proef-navy dark:text-slate-100"],
+    ok: ["border-ok", "text-ok"],
+    blue: ["border-[#4FA8FF]", "text-[#2E8CE0]"],
+    red: ["border-incumprido", "text-incumprido"],
+    purple: ["border-[#8B5CF6]", "text-[#7C3AED]"],
+    yellow: ["border-[#D9A400]", "text-[#B78400]"]
+  };
+  const [borda, texto] = tones[tone];
+  return /* @__PURE__ */ jsxs("div", { className: `border-[1.5px] ${borda} rounded-2xl p-4 pb-1 mb-5 bg-[rgba(24,34,56,0.015)] dark:bg-slate-900/40`, children: [
+    /* @__PURE__ */ jsx("div", { className: `text-[15px] font-bold text-center tracking-wide mb-3.5 ${texto}`, children: title }),
+    children
+  ] });
+}
+function Kpi({
+  label,
+  value,
+  tone = "default",
+  delta,
+  onClick,
+  bgTint = false,
+  active = false,
+  hint,
+  dot,
+  barra,
+  rodape,
+  denso = false
+}) {
+  const cores = {
+    default: "text-slate-800 dark:text-slate-100",
+    brand: "text-proef-blue dark:text-sky-300",
+    ok: "text-ok",
+    risco: "text-risco",
+    incumprido: "text-incumprido"
+  };
+  const fundos = {
+    default: "bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700",
+    brand: "bg-proef-blue/10 border-transparent dark:bg-sky-500/15",
+    ok: "bg-ok-bg border-transparent",
+    risco: "bg-risco-bg border-transparent",
+    incumprido: "bg-incumprido-bg border-transparent"
+  };
+  const base = denso ? `relative border rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5 ${bgTint ? fundos[tone] : "bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700"}` : `relative border rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5 ${bgTint ? fundos[tone] : "bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700"}`;
+  const totalBarra = Array.isArray(barra) ? barra.reduce((s, x) => s + x.peso, 0) : 0;
+  const conteudo = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: `${denso ? "text-[10px] uppercase tracking-wide" : "text-xs"} text-slate-500 dark:text-slate-400 flex items-center gap-1.5`, children: [
+      dot && /* @__PURE__ */ jsx("i", { className: "w-2 h-2 rounded-full inline-block shrink-0", style: { background: dot } }),
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: denso ? "flex items-baseline gap-1.5" : "", children: [
+      /* @__PURE__ */ jsx("span", { className: `${denso ? "text-xl" : "text-2xl"} font-semibold ${cores[tone]}`, children: value }),
+      delta && /* @__PURE__ */ jsx("span", { className: `${denso ? "text-[11px]" : "hidden"} text-slate-400 truncate`, children: delta })
+    ] }),
+    delta && !denso && /* @__PURE__ */ jsx("div", { className: "text-[11.5px] text-slate-400", children: delta }),
+    barra != null && /* @__PURE__ */ jsx("div", { className: "w-full h-1 bg-slate-100 dark:bg-slate-800 rounded overflow-hidden flex", children: Array.isArray(barra) ? barra.map((x, i) => /* @__PURE__ */ jsx(
+      "i",
+      {
+        style: { width: totalBarra ? `${x.peso / totalBarra * 100}%` : 0, background: x.cor }
+      },
+      i
+    )) : /* @__PURE__ */ jsx("i", { style: { width: `${Math.min(100, Math.max(0, barra))}%`, background: "currentColor" }, className: cores[tone] }) }),
+    rodape && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: rodape })
+  ] });
+  if (!onClick) return /* @__PURE__ */ jsx("div", { className: base, children: conteudo });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      title: hint,
+      "aria-pressed": active,
+      className: `${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${active ? "ring-2 ring-proef-blue border-proef-blue" : ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": true,
+            viewBox: "0 0 24 24",
+            className: `absolute right-2.5 top-2.5 h-3.5 w-3.5 ${active ? "text-proef-blue dark:text-sky-300" : "text-slate-300 dark:text-slate-600"}`,
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ jsx("path", { d: "M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z" })
+          }
+        ),
+        conteudo
+      ]
+    }
+  );
+}
+function Badge({ tone = "neutral", children }) {
+  const cores = {
+    ok: "bg-ok-bg text-ok",
+    risco: "bg-risco-bg text-risco",
+    incumprido: "bg-incumprido-bg text-incumprido",
+    neutral: "bg-neutral-bg text-neutral",
+    accent: "bg-proef-blue/10 text-proef-navy dark:bg-sky-500/15 dark:text-sky-300"
+  };
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${cores[tone]}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-current" }),
+    children
+  ] });
+}
+function BadgeSla({ status, labels }) {
+  const tone = status === "ok" ? "ok" : status === "risco" ? "risco" : "incumprido";
+  const defaults = { ok: "On time", risco: "At risk", incumprido: "Breached" };
+  const label = labels?.[status] ?? defaults[status];
+  return /* @__PURE__ */ jsx(Badge, { tone, children: label });
+}
+const CORES_ESTADO_INTERNO = {
+  "Concluído": ["#1F8A55", "#E5F6EC"],
+  "Aferição": ["#2E6DA4", "#E5F0FA"],
+  "Para Tratamento": ["#1868B0", "#E5F0FA"],
+  "Aguarda Validação LS": ["#2E6DA4", "#E5F0FA"],
+  "Aguarda Produção LS": ["#6E8CAD", "#EDF2F7"],
+  "Incompleto/Devolvido": ["#C2255C", "#FBE5EF"],
+  "Falta de Documentação": ["#B96E00", "#FCF0DC"],
+  Ignorar: ["#767C88", "#EEF0F2"],
+  Cancelado: ["#767C88", "#EEF0F2"]
+};
+function ChipEstadoInterno({ estado }) {
+  if (!estado) return /* @__PURE__ */ jsx("span", { className: "text-slate-400", children: "—" });
+  const cor = CORES_ESTADO_INTERNO[estado];
+  if (!cor) return /* @__PURE__ */ jsx("span", { children: estado });
+  return /* @__PURE__ */ jsx("span", { className: "px-2 py-0.5 rounded text-[11px] font-medium inline-block", style: { color: cor[0], background: cor[1] }, children: estado });
+}
+function Btn({
+  children,
+  onClick,
+  variant = "default",
+  active = false,
+  disabled = false,
+  title,
+  type = "button"
+}) {
+  const base = "inline-flex items-center justify-center gap-1.5 h-8 px-3.5 rounded-lg text-[11px] font-black uppercase tracking-widest transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap";
+  const variantes = {
+    default: active ? "bg-proef-navy text-white border border-proef-navy dark:bg-proef-blue dark:border-proef-blue" : "bg-white text-slate-500 border 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",
+    accent: "bg-proef-navy text-white border border-proef-navy hover:bg-proef-blue dark:bg-proef-blue dark:border-proef-blue dark:hover:bg-sky-500",
+    danger: "bg-incumprido text-white border border-incumprido hover:opacity-90 dark:bg-red-600 dark:border-red-600",
+    ghost: "text-slate-500 hover:text-proef-navy dark:text-slate-400 dark:hover:text-white"
+  };
+  return /* @__PURE__ */ jsx("button", { type, onClick, disabled, title, className: `${base} ${variantes[variant]}`, children });
+}
+function BtnGroup({
+  value,
+  options,
+  onChange,
+  label
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
+    label && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase tracking-wider text-slate-400 shrink-0 whitespace-nowrap leading-normal", children: label }),
+    /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: options.map((o) => /* @__PURE__ */ jsx(Btn, { active: value === o.value, onClick: () => onChange(o.value), children: o.label }, o.value)) })
+  ] });
+}
+function Estado({
+  carregando,
+  erro,
+  vazio,
+  labels
+}) {
+  if (carregando) return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-slate-400", children: labels?.loading ?? "Loading…" });
+  if (erro) return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-incumprido", children: labels?.error ?? "Failed to load" });
+  if (vazio) return /* @__PURE__ */ jsx("div", { className: "py-10 text-center text-sm text-slate-400", children: labels?.empty ?? "No data" });
+  return null;
+}
+function Modal({ open, onClose, title, children, wide }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick: (e) => {
+        if (e.target === e.currentTarget) onClose();
+      },
+      className: "fixed inset-0 bg-[rgba(20,30,50,0.45)] z-50 flex items-center justify-center p-4",
+      children: /* @__PURE__ */ jsxs("div", { className: `bg-white dark:bg-slate-900 rounded-xl w-full ${wide ? "max-w-[min(1600px,95vw)]" : "max-w-[720px]"} max-h-[85vh] flex flex-col shadow-2xl`, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4 px-5 py-4 border-b border-slate-200 dark:border-slate-700", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[15px] font-bold text-proef-navy dark:text-slate-100", children: title }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", className: "text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100", children: /* @__PURE__ */ jsx(IconX, { className: "w-5 h-5" }) })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-auto thin-scroll px-5 py-4", children })
+      ] })
+    }
+  );
+}
+function Campo({ label, children, className = "" }) {
+  return /* @__PURE__ */ jsxs("label", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-black uppercase tracking-wider text-slate-400 leading-normal", children: label }),
+    children
+  ] });
+}
+function CampoSelect({
+  label,
+  value,
+  options,
+  onChange,
+  placeholderVazio,
+  disabled = false,
+  className = ""
+}) {
+  const normalizadas = options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
+  return /* @__PURE__ */ jsx(Campo, { label, className, children: /* @__PURE__ */ jsx(
+    Escolha,
+    {
+      valor: value,
+      opcoes: normalizadas.map((o) => ({ valor: o.value, rotulo: o.label })),
+      onMudar: onChange,
+      rotulo: label,
+      opcaoVazia: placeholderVazio,
+      placeholder: placeholderVazio,
+      disabled,
+      className: "min-w-[10rem] max-w-56"
+    }
+  ) });
+}
+function CampoPesquisa({
+  label,
+  valorInicial = "",
+  onConfirmar,
+  placeholder,
+  className = ""
+}) {
+  const confirmar = (v) => onConfirmar(v.trim() || void 0);
+  return /* @__PURE__ */ jsx(Campo, { label, className, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "search",
+      defaultValue: valorInicial,
+      placeholder,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") confirmar(e.target.value);
+      },
+      onBlur: (e) => confirmar(e.target.value),
+      className: "h-8 border border-slate-300 rounded-lg px-2.5 text-sm w-64 bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:placeholder:text-slate-500"
+    }
+  ) });
+}
+function CampoInterruptor({
+  label,
+  checked,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm pb-1.5 cursor-pointer select-none", children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", checked, onChange: (e) => onChange(e.target.checked) }),
+    label
+  ] });
+}
+function BarraFiltros({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "bg-white border border-slate-200 dark:bg-slate-900 dark:border-slate-700 rounded-xl px-4 py-3 flex flex-wrap items-end gap-3", children });
+}
+function LinhaAlerta({
+  severidade,
+  icone,
+  titulo,
+  detalhe,
+  referencia,
+  onReferenciaClick,
+  quando
+}) {
+  const barras = {
+    critico: "border-l-incumprido",
+    grave: "border-l-orange-500",
+    atencao: "border-l-risco",
+    info: "border-l-sky-400"
+  };
+  const textos = {
+    critico: "text-incumprido",
+    grave: "text-orange-600 dark:text-orange-400",
+    atencao: "text-risco",
+    info: "text-sky-600 dark:text-sky-400"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `bg-white border border-slate-200 dark:bg-slate-900 dark:border-y-slate-700 dark:border-r-slate-700 border-l-4 ${barras[severidade]} rounded-lg px-4 py-2.5 flex items-start gap-3`, children: [
+    icone && /* @__PURE__ */ jsx("span", { className: `${textos[severidade]} shrink-0 mt-0.5`, children: icone }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-slate-800 dark:text-slate-100", children: titulo }),
+      detalhe && /* @__PURE__ */ jsx("div", { className: "text-xs text-slate-500 dark:text-slate-400", children: detalhe })
+    ] }),
+    referencia && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onReferenciaClick,
+        className: "text-xs font-mono text-proef-navy dark:text-sky-300 hover:underline shrink-0",
+        children: referencia
+      }
+    ),
+    quando && /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-400 shrink-0 tabular-nums", children: quando })
+  ] });
+}
+function ListaCampos({
+  campos,
+  colunas = 2,
+  mostrarVazios = false
+}) {
+  const vazio = (v) => v == null || v === "" || v === "—";
+  const visiveis = mostrarVazios ? campos : campos.filter((c) => !vazio(c.valor));
+  if (!visiveis.length) return null;
+  const grelha = { 1: "", 2: "md:grid-cols-2", 3: "md:grid-cols-3" }[colunas];
+  return /* @__PURE__ */ jsx("dl", { className: `grid ${grelha} gap-x-6 gap-y-1`, children: visiveis.map((c) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-3 border-b border-slate-100 dark:border-slate-800 py-1", children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-xs text-slate-500 dark:text-slate-400", children: c.label }),
+    /* @__PURE__ */ jsx("dd", { className: "text-xs font-medium text-slate-800 dark:text-slate-100 text-right", children: c.valor })
+  ] }, c.label)) });
+}
+export {
+  Badge,
+  BadgeSla,
+  BarraFiltros,
+  Btn,
+  BtnGroup,
+  Campo,
+  CampoInterruptor,
+  CampoPesquisa,
+  CampoSelect,
+  Card,
+  ChipEstadoInterno,
+  Estado,
+  Kpi,
+  LinhaAlerta,
+  ListaCampos,
+  Modal,
+  SectionGroup
+};
+//# sourceMappingURL=Ui.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ui.js","sources":["../../../../../src/legacy/components/ui/Ui.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\nimport Escolha from './Escolha'\r\n\r\n/** Visual UI primitives (proef design system). Prefer these over repeating classes. */\r\n\r\n/**\r\n * SLA status accepted by BadgeSla.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport type StatusSla = 'ok' | 'risco' | 'incumprido'\r\n\r\nfunction IconX({ className = '' }: { className?: string }) {\r\n  return (\r\n    <svg\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      strokeWidth={2}\r\n      strokeLinecap=\"round\"\r\n      strokeLinejoin=\"round\"\r\n      className={className}\r\n      aria-hidden=\"true\"\r\n    >\r\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\r\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\r\n    </svg>\r\n  )\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Card({ title, extra, children, className = '' }: { title?: ReactNode; extra?: ReactNode; children: ReactNode; className?: string }) {\r\n  return (\r\n    <div className={`bg-white border border-slate-200 dark:bg-slate-900 dark:border-slate-700 rounded-xl p-4 sm:p-5 ${className}`}>\r\n      {(title || extra) && (\r\n        <div className=\"flex items-start justify-between gap-3 mb-3.5\">\r\n          {title && <div className=\"text-sm font-semibold dark:text-slate-100\">{title}</div>}\r\n          {extra}\r\n        </div>\r\n      )}\r\n      {children}\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Colour-bordered group — the overview sections in the prototype.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function SectionGroup({\r\n  title,\r\n  tone = 'accent',\r\n  children,\r\n}: {\r\n  title: string\r\n  tone?: 'accent' | 'ok' | 'blue' | 'red' | 'purple' | 'yellow'\r\n  children: ReactNode\r\n}) {\r\n  const tones: Record<string, [string, string]> = {\r\n    accent: ['border-slate-200 dark:border-slate-700', 'text-proef-navy dark:text-slate-100'],\r\n    ok: ['border-ok', 'text-ok'],\r\n    blue: ['border-[#4FA8FF]', 'text-[#2E8CE0]'],\r\n    red: ['border-incumprido', 'text-incumprido'],\r\n    purple: ['border-[#8B5CF6]', 'text-[#7C3AED]'],\r\n    yellow: ['border-[#D9A400]', 'text-[#B78400]'],\r\n  }\r\n  const [borda, texto] = tones[tone]!\r\n  return (\r\n    <div className={`border-[1.5px] ${borda} rounded-2xl p-4 pb-1 mb-5 bg-[rgba(24,34,56,0.015)] dark:bg-slate-900/40`}>\r\n      <div className={`text-[15px] font-bold text-center tracking-wide mb-3.5 ${texto}`}>{title}</div>\r\n      {children}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport type KpiTone = 'default' | 'brand' | 'ok' | 'risco' | 'incumprido'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Kpi({\r\n  label,\r\n  value,\r\n  tone = 'default',\r\n  delta,\r\n  onClick,\r\n  bgTint = false,\r\n  active = false,\r\n  hint,\r\n  dot,\r\n  barra,\r\n  rodape,\r\n  denso = false,\r\n}: {\r\n  label: string\r\n  value: ReactNode\r\n  tone?: KpiTone\r\n  delta?: ReactNode\r\n  onClick?: () => void\r\n  /** Ponto colorido antes do rótulo — liga o indicador à cor que ele tem no mapa ou na legenda. */\r\n  dot?: string\r\n  /**\r\n   * Barra por baixo do valor. Um número é uma percentagem; uma lista é uma\r\n   * barra repartida, com cada troço proporcional ao seu peso.\r\n   *\r\n   * Serve para o indicador dizer a PROPORÇÃO e não só o valor: \"253 concluídas\"\r\n   * não diz nada sem saber de quantas.\r\n   */\r\n  barra?: number | { peso: number; cor: string }[]\r\n  /** Linha pequena no fim, para um dado que acompanha mas não é o indicador. */\r\n  rodape?: ReactNode\r\n  /**\r\n   * Faixa fina em vez de cartão.\r\n   *\r\n   * Oito indicadores em cartões de 88px empurram o conteúdo para fora do ecrã,\r\n   * e o conteúdo é que é o trabalho. Denso alinha à esquerda e corta a altura\r\n   * para metade — os números continuam a ler-se, e o mapa fica acima da dobra.\r\n   */\r\n  denso?: boolean\r\n  /** Fundo colorido (tom claro) em vez de só o número — opt-in, sem quebrar o uso existente. */\r\n  bgTint?: boolean\r\n  /** Filtro ativo (KPI clicável selecionado): contorno azul. */\r\n  active?: boolean\r\n  /** Tooltip do KPI clicável (ex: \"Filtrar a tabela\"). */\r\n  hint?: string\r\n}) {\r\n  const cores: Record<KpiTone, string> = {\r\n    default: 'text-slate-800 dark:text-slate-100',\r\n    brand: 'text-proef-blue dark:text-sky-300',\r\n    ok: 'text-ok',\r\n    risco: 'text-risco',\r\n    incumprido: 'text-incumprido',\r\n  }\r\n  const fundos: Record<KpiTone, string> = {\r\n    default: 'bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700',\r\n    brand: 'bg-proef-blue/10 border-transparent dark:bg-sky-500/15',\r\n    ok: 'bg-ok-bg border-transparent',\r\n    risco: 'bg-risco-bg border-transparent',\r\n    incumprido: 'bg-incumprido-bg border-transparent',\r\n  }\r\n  const base = denso\r\n    ? `relative border rounded-lg px-2.5 py-1.5 flex flex-col justify-center text-left gap-0.5 ${\r\n        bgTint ? fundos[tone] : 'bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700'\r\n      }`\r\n    : `relative border rounded-xl px-4 py-3 min-h-[88px] flex flex-col items-center justify-center text-center gap-1.5 ${\r\n        bgTint ? fundos[tone] : 'bg-white border-slate-200 dark:bg-slate-900 dark:border-slate-700'\r\n      }`\r\n  const totalBarra = Array.isArray(barra) ? barra.reduce((s, x) => s + x.peso, 0) : 0\r\n  const conteudo = (\r\n    <>\r\n      <div className={`${denso ? 'text-[10px] uppercase tracking-wide' : 'text-xs'} text-slate-500 dark:text-slate-400 flex items-center gap-1.5`}>\r\n        {dot && <i className=\"w-2 h-2 rounded-full inline-block shrink-0\" style={{ background: dot }} />}\r\n        <span className=\"truncate\">{label}</span>\r\n      </div>\r\n      {/* Em denso o valor e o secundário partilham a linha: é o que poupa\r\n          altura sem tirar informação. */}\r\n      <div className={denso ? 'flex items-baseline gap-1.5' : ''}>\r\n        <span className={`${denso ? 'text-xl' : 'text-2xl'} font-semibold ${cores[tone]}`}>{value}</span>\r\n        {delta && (\r\n          <span className={`${denso ? 'text-[11px]' : 'hidden'} text-slate-400 truncate`}>{delta}</span>\r\n        )}\r\n      </div>\r\n      {delta && !denso && <div className=\"text-[11.5px] text-slate-400\">{delta}</div>}\r\n      {barra != null && (\r\n        <div className=\"w-full h-1 bg-slate-100 dark:bg-slate-800 rounded overflow-hidden flex\">\r\n          {Array.isArray(barra) ? (\r\n            barra.map((x, i) => (\r\n              <i\r\n                key={i}\r\n                style={{ width: totalBarra ? `${(x.peso / totalBarra) * 100}%` : 0, background: x.cor }}\r\n              />\r\n            ))\r\n          ) : (\r\n            <i style={{ width: `${Math.min(100, Math.max(0, barra))}%`, background: 'currentColor' }} className={cores[tone]} />\r\n          )}\r\n        </div>\r\n      )}\r\n      {rodape && <div className=\"text-[11px] text-slate-400\">{rodape}</div>}\r\n    </>\r\n  )\r\n  if (!onClick) return <div className={base}>{conteudo}</div>\r\n  return (\r\n    <button\r\n      type=\"button\"\r\n      onClick={onClick}\r\n      title={hint}\r\n      aria-pressed={active}\r\n      className={`${base} w-full cursor-pointer shadow-sm transition hover:-translate-y-0.5 hover:border-proef-blue dark:hover:border-sky-400 hover:shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue ${\r\n        active ? 'ring-2 ring-proef-blue border-proef-blue' : ''\r\n      }`}\r\n    >\r\n      <svg\r\n        aria-hidden\r\n        viewBox=\"0 0 24 24\"\r\n        className={`absolute right-2.5 top-2.5 h-3.5 w-3.5 ${active ? 'text-proef-blue dark:text-sky-300' : 'text-slate-300 dark:text-slate-600'}`}\r\n        fill=\"none\"\r\n        stroke=\"currentColor\"\r\n        strokeWidth={2}\r\n        strokeLinecap=\"round\"\r\n        strokeLinejoin=\"round\"\r\n      >\r\n        <path d=\"M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z\" />\r\n      </svg>\r\n      {conteudo}\r\n    </button>\r\n  )\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type BadgeTone = 'ok' | 'risco' | 'incumprido' | 'neutral' | 'accent'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Badge({ tone = 'neutral', children }: { tone?: BadgeTone; children: ReactNode }) {\r\n  const cores: Record<BadgeTone, string> = {\r\n    ok: 'bg-ok-bg text-ok',\r\n    risco: 'bg-risco-bg text-risco',\r\n    incumprido: 'bg-incumprido-bg text-incumprido',\r\n    neutral: 'bg-neutral-bg text-neutral',\r\n    accent: 'bg-proef-blue/10 text-proef-navy dark:bg-sky-500/15 dark:text-sky-300',\r\n  }\r\n  return (\r\n    <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium whitespace-nowrap ${cores[tone]}`}>\r\n      <span className=\"w-1.5 h-1.5 rounded-full bg-current\" />\r\n      {children}\r\n    </span>\r\n  )\r\n}\r\n\r\n/**\r\n * SLA badge — picks the tone and label from `status`. Labels overridable via `labels`.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function BadgeSla({ status, labels }: { status: StatusSla; labels?: { ok?: string; risco?: string; incumprido?: string } }) {\r\n  const tone: BadgeTone = status === 'ok' ? 'ok' : status === 'risco' ? 'risco' : 'incumprido'\r\n  const defaults: Record<StatusSla, string> = { ok: 'On time', risco: 'At risk', incumprido: 'Breached' }\r\n  const label = labels?.[status] ?? defaults[status]\r\n  return <Badge tone={tone}>{label}</Badge>\r\n}\r\n\r\n/** Internal-state chip — prototype colours (ESTADO_INTERNO_COLORS). */\r\nconst CORES_ESTADO_INTERNO: Record<string, [string, string]> = {\r\n  'Concluído': ['#1F8A55', '#E5F6EC'],\r\n  'Aferição': ['#2E6DA4', '#E5F0FA'],\r\n  'Para Tratamento': ['#1868B0', '#E5F0FA'],\r\n  'Aguarda Validação LS': ['#2E6DA4', '#E5F0FA'],\r\n  'Aguarda Produção LS': ['#6E8CAD', '#EDF2F7'],\r\n  'Incompleto/Devolvido': ['#C2255C', '#FBE5EF'],\r\n  'Falta de Documentação': ['#B96E00', '#FCF0DC'],\r\n  Ignorar: ['#767C88', '#EEF0F2'],\r\n  Cancelado: ['#767C88', '#EEF0F2'],\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function ChipEstadoInterno({ estado }: { estado: string | null }) {\r\n  if (!estado) return <span className=\"text-slate-400\">—</span>\r\n  const cor = CORES_ESTADO_INTERNO[estado]\r\n  if (!cor) return <span>{estado}</span>\r\n  return (\r\n    <span className=\"px-2 py-0.5 rounded text-[11px] font-medium inline-block\" style={{ color: cor[0], background: cor[1] }}>\r\n      {estado}\r\n    </span>\r\n  )\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Btn({\r\n  children,\r\n  onClick,\r\n  variant = 'default',\r\n  active = false,\r\n  disabled = false,\r\n  title,\r\n  type = 'button',\r\n}: {\r\n  children: ReactNode\r\n  onClick?: () => void\r\n  variant?: 'default' | 'accent' | 'danger' | 'ghost'\r\n  active?: boolean\r\n  disabled?: boolean\r\n  title?: string\r\n  type?: 'button' | 'submit'\r\n}) {\r\n  // Estilo do design system proef (Tickets): uppercase, font-black, tracking-widest; activo em navy.\r\n  // Mesma altura (h-8) e cantos (rounded-lg) de todos os controlos da biblioteca: Exportar, Colunas, selects, campos.\r\n  const base = 'inline-flex items-center justify-center gap-1.5 h-8 px-3.5 rounded-lg text-[11px] font-black uppercase tracking-widest transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap'\r\n  const variantes: Record<string, string> = {\r\n    default: active\r\n      ? 'bg-proef-navy text-white border border-proef-navy dark:bg-proef-blue dark:border-proef-blue'\r\n      : 'bg-white text-slate-500 border 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    accent: 'bg-proef-navy text-white border border-proef-navy hover:bg-proef-blue dark:bg-proef-blue dark:border-proef-blue dark:hover:bg-sky-500',\r\n    danger: 'bg-incumprido text-white border border-incumprido hover:opacity-90 dark:bg-red-600 dark:border-red-600',\r\n    ghost: 'text-slate-500 hover:text-proef-navy dark:text-slate-400 dark:hover:text-white',\r\n  }\r\n  return (\r\n    <button type={type} onClick={onClick} disabled={disabled} title={title} className={`${base} ${variantes[variant]}`}>\r\n      {children}\r\n    </button>\r\n  )\r\n}\r\n\r\n/**\r\n * Mutually exclusive button group (granularity, dimension…).\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function BtnGroup<T extends string>({\r\n  value,\r\n  options,\r\n  onChange,\r\n  label,\r\n}: {\r\n  value: T\r\n  options: { value: T; label: string }[]\r\n  onChange: (v: T) => void\r\n  /** Rótulo opcional à esquerda (ex: \"Situação\"), com espaçamento próprio. */\r\n  label?: string\r\n}) {\r\n  return (\r\n    <div className=\"flex items-center gap-3 flex-wrap\">\r\n      {label && (\r\n        <span className=\"text-[10px] font-black uppercase tracking-wider text-slate-400 shrink-0 whitespace-nowrap leading-normal\">{label}</span>\r\n      )}\r\n      <div className=\"flex gap-1.5 flex-wrap\">\r\n        {options.map((o) => (\r\n          <Btn key={o.value} active={value === o.value} onClick={() => onChange(o.value)}>\r\n            {o.label}\r\n          </Btn>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Estado({\r\n  carregando,\r\n  erro,\r\n  vazio,\r\n  labels,\r\n}: {\r\n  carregando?: boolean\r\n  erro?: boolean\r\n  vazio?: boolean\r\n  labels?: { loading?: string; error?: string; empty?: string }\r\n}) {\r\n  if (carregando) return <div className=\"py-10 text-center text-sm text-slate-400\">{labels?.loading ?? 'Loading…'}</div>\r\n  if (erro) return <div className=\"py-10 text-center text-sm text-incumprido\">{labels?.error ?? 'Failed to load'}</div>\r\n  if (vazio) return <div className=\"py-10 text-center text-sm text-slate-400\">{labels?.empty ?? 'No data'}</div>\r\n  return null\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport function Modal({ open, onClose, title, children, wide }: { open: boolean; onClose: () => void; title: ReactNode; children: ReactNode; wide?: boolean }) {\r\n  if (!open) return null\r\n  return (\r\n    <div\r\n      onClick={(e) => {\r\n        if (e.target === e.currentTarget) onClose()\r\n      }}\r\n      className=\"fixed inset-0 bg-[rgba(20,30,50,0.45)] z-50 flex items-center justify-center p-4\"\r\n    >\r\n      {/*\r\n        `wide` acompanha o ecrã em vez de parar num número fixo.\r\n\r\n        1200px era estreito num ecrã grande: um modal com mapa e tabela lado a\r\n        lado ficava com a tabela cortada e o mapa pequeno, enquanto meio ecrã\r\n        ficava vazio. O tecto de 1600px existe para o texto não ficar a\r\n        atravessar o monitor todo, e os 95vw para o modal nunca encostar às\r\n        margens.\r\n      */}\r\n      <div className={`bg-white dark:bg-slate-900 rounded-xl w-full ${wide ? 'max-w-[min(1600px,95vw)]' : 'max-w-[720px]'} max-h-[85vh] flex flex-col shadow-2xl`}>\r\n        <div className=\"flex items-center justify-between gap-4 px-5 py-4 border-b border-slate-200 dark:border-slate-700\">\r\n          <div className=\"text-[15px] font-bold text-proef-navy dark:text-slate-100\">{title}</div>\r\n          <button onClick={onClose} aria-label=\"Close\" className=\"text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-slate-100\">\r\n            <IconX className=\"w-5 h-5\" />\r\n          </button>\r\n        </div>\r\n        <div className=\"overflow-auto thin-scroll px-5 py-4\">{children}</div>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\n// ─── Filtros ────────────────────────────────────────────────────────────────\r\n// O kit não tinha campos de formulário, e cada ecrã acabava a repetir o mesmo\r\n// <label> com <select> e as mesmas classes. Estes três resolvem a barra de\r\n// filtros que praticamente todos os ecrãs de listagem têm.\r\n\r\n/**\r\n * Rótulo pequeno em maiúsculas por cima do campo.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function Campo({ label, children, className = '' }: { label: string; children: ReactNode; className?: string }) {\r\n  return (\r\n    <label className={`flex flex-col gap-1 ${className}`}>\r\n      <span className=\"text-[10px] font-black uppercase tracking-wider text-slate-400 leading-normal\">{label}</span>\r\n      {children}\r\n    </label>\r\n  )\r\n}\r\n\r\n/**\r\n * Select com opção vazia à cabeça.\r\n *\r\n * A opção vazia é obrigatória e não opcional: sem ela não há como desfazer uma\r\n * escolha, e o utilizador fica preso ao primeiro valor que carregou.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function CampoSelect({\r\n  label,\r\n  value,\r\n  options,\r\n  onChange,\r\n  placeholderVazio,\r\n  disabled = false,\r\n  className = '',\r\n}: {\r\n  label: string\r\n  value: string\r\n  options: readonly string[] | readonly { value: string; label: string }[]\r\n  onChange: (v: string) => void\r\n  placeholderVazio: string\r\n  disabled?: boolean\r\n  className?: string\r\n}) {\r\n  const normalizadas = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o))\r\n  return (\r\n    <Campo label={label} className={className}>\r\n      {/* Mesma lista suspensa em todos os portais (Escolha), em vez do <select> nativo. */}\r\n      <Escolha\r\n        valor={value}\r\n        opcoes={normalizadas.map((o) => ({ valor: o.value, rotulo: o.label }))}\r\n        onMudar={onChange}\r\n        rotulo={label}\r\n        opcaoVazia={placeholderVazio}\r\n        placeholder={placeholderVazio}\r\n        disabled={disabled}\r\n        className=\"min-w-[10rem] max-w-56\"\r\n      />\r\n    </Campo>\r\n  )\r\n}\r\n\r\n/**\r\n * Campo de pesquisa que só dispara ao confirmar.\r\n *\r\n * Deliberadamente NÃO pesquisa a cada tecla: sobre dezenas de milhares de\r\n * registos isso seria um pedido por letra. Confirma-se com Enter ou ao sair do\r\n * campo.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function CampoPesquisa({\r\n  label,\r\n  valorInicial = '',\r\n  onConfirmar,\r\n  placeholder,\r\n  className = '',\r\n}: {\r\n  label: string\r\n  valorInicial?: string\r\n  onConfirmar: (v: string | undefined) => void\r\n  placeholder?: string\r\n  className?: string\r\n}) {\r\n  const confirmar = (v: string): void => onConfirmar(v.trim() || undefined)\r\n  return (\r\n    <Campo label={label} className={className}>\r\n      <input\r\n        type=\"search\"\r\n        defaultValue={valorInicial}\r\n        placeholder={placeholder}\r\n        onKeyDown={(e) => {\r\n          if (e.key === 'Enter') confirmar((e.target as HTMLInputElement).value)\r\n        }}\r\n        onBlur={(e) => confirmar(e.target.value)}\r\n        className=\"h-8 border border-slate-300 rounded-lg px-2.5 text-sm w-64 bg-white dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100 dark:placeholder:text-slate-500\"\r\n      />\r\n    </Campo>\r\n  )\r\n}\r\n\r\n/**\r\n * Caixa de interruptor com rótulo à direita, alinhada com os campos ao lado.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function CampoInterruptor({\r\n  label,\r\n  checked,\r\n  onChange,\r\n}: {\r\n  label: string\r\n  checked: boolean\r\n  onChange: (v: boolean) => void\r\n}) {\r\n  return (\r\n    <label className=\"flex items-center gap-2 text-sm pb-1.5 cursor-pointer select-none\">\r\n      <input type=\"checkbox\" checked={checked} onChange={(e) => onChange(e.target.checked)} />\r\n      {label}\r\n    </label>\r\n  )\r\n}\r\n\r\n/**\r\n * Barra onde os campos de filtro assentam.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function BarraFiltros({ children }: { children: ReactNode }) {\r\n  return (\r\n    <div className=\"bg-white border border-slate-200 dark:bg-slate-900 dark:border-slate-700 rounded-xl px-4 py-3 flex flex-wrap items-end gap-3\">\r\n      {children}\r\n    </div>\r\n  )\r\n}\r\n\r\n// ─── Listas ─────────────────────────────────────────────────────────────────\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport type SeveridadeAlerta = 'critico' | 'grave' | 'atencao' | 'info'\r\n\r\n/**\r\n * Linha de uma lista de alertas.\r\n *\r\n * A severidade está na barra lateral colorida e não no fundo: uma lista de\r\n * cinquenta linhas com fundos saturados é ilegível, e o que se quer é poder\r\n * varrer a coluna da esquerda e saber onde parar.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function LinhaAlerta({\r\n  severidade,\r\n  icone,\r\n  titulo,\r\n  detalhe,\r\n  referencia,\r\n  onReferenciaClick,\r\n  quando,\r\n}: {\r\n  severidade: SeveridadeAlerta\r\n  icone?: ReactNode\r\n  titulo: ReactNode\r\n  detalhe?: ReactNode\r\n  /** Identificador clicável à direita (ex: número da ordem). */\r\n  referencia?: string\r\n  onReferenciaClick?: () => void\r\n  quando?: ReactNode\r\n}) {\r\n  const barras: Record<SeveridadeAlerta, string> = {\r\n    critico: 'border-l-incumprido',\r\n    grave: 'border-l-orange-500',\r\n    atencao: 'border-l-risco',\r\n    info: 'border-l-sky-400',\r\n  }\r\n  const textos: Record<SeveridadeAlerta, string> = {\r\n    critico: 'text-incumprido',\r\n    grave: 'text-orange-600 dark:text-orange-400',\r\n    atencao: 'text-risco',\r\n    info: 'text-sky-600 dark:text-sky-400',\r\n  }\r\n\r\n  return (\r\n    <div className={`bg-white border border-slate-200 dark:bg-slate-900 dark:border-y-slate-700 dark:border-r-slate-700 border-l-4 ${barras[severidade]} rounded-lg px-4 py-2.5 flex items-start gap-3`}>\r\n      {icone && <span className={`${textos[severidade]} shrink-0 mt-0.5`}>{icone}</span>}\r\n      <div className=\"min-w-0 flex-1\">\r\n        <div className=\"text-sm font-semibold text-slate-800 dark:text-slate-100\">{titulo}</div>\r\n        {detalhe && <div className=\"text-xs text-slate-500 dark:text-slate-400\">{detalhe}</div>}\r\n      </div>\r\n      {referencia && (\r\n        <button\r\n          type=\"button\"\r\n          onClick={onReferenciaClick}\r\n          className=\"text-xs font-mono text-proef-navy dark:text-sky-300 hover:underline shrink-0\"\r\n        >\r\n          {referencia}\r\n        </button>\r\n      )}\r\n      {quando && <span className=\"text-xs text-slate-400 shrink-0 tabular-nums\">{quando}</span>}\r\n    </div>\r\n  )\r\n}\r\n\r\n/**\r\n * Grelha de pares rótulo/valor, para painéis de detalhe.\r\n *\r\n * Os campos vazios são omitidos por omissão: num registo vindo de várias\r\n * origens, metade dos campos costuma não existir, e uma coluna de travessões\r\n * não informa ninguém. `mostrarVazios` repõe-os quando a ausência é o que\r\n * interessa ver.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport function ListaCampos({\r\n  campos,\r\n  colunas = 2,\r\n  mostrarVazios = false,\r\n}: {\r\n  campos: { label: string; valor: ReactNode }[]\r\n  colunas?: 1 | 2 | 3\r\n  mostrarVazios?: boolean\r\n}) {\r\n  const vazio = (v: ReactNode): boolean => v == null || v === '' || v === '—'\r\n  const visiveis = mostrarVazios ? campos : campos.filter((c) => !vazio(c.valor))\r\n  if (!visiveis.length) return null\r\n\r\n  const grelha = { 1: '', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3' }[colunas]\r\n\r\n  return (\r\n    <dl className={`grid ${grelha} gap-x-6 gap-y-1`}>\r\n      {visiveis.map((c) => (\r\n        <div key={c.label} className=\"flex justify-between gap-3 border-b border-slate-100 dark:border-slate-800 py-1\">\r\n          <dt className=\"text-xs text-slate-500 dark:text-slate-400\">{c.label}</dt>\r\n          <dd className=\"text-xs font-medium text-slate-800 dark:text-slate-100 text-right\">{c.valor}</dd>\r\n        </div>\r\n      ))}\r\n    </dl>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback, useLayoutEffect, useEffect } from "react";
+const CLS_PAINEL = "fixed z-[60] min-w-[10rem] max-h-72 overflow-auto rounded-xl border border-slate-200 bg-white py-1 text-sm shadow-lg dark:border-slate-700 dark:bg-slate-900";
+const clsItem = (ativo, perigo = false) => `w-full flex items-center gap-2.5 px-3 py-2 text-left cursor-pointer select-none ${perigo ? "text-red-600 dark:text-red-300" : "text-slate-700 dark:text-slate-200"} ${ativo ? "bg-slate-100 dark:bg-slate-800" : "bg-transparent hover:bg-slate-50 dark:hover:bg-slate-800"}`;
+function usePainelFlutuante(alinhar = "esquerda") {
+  const [aberto, setAberto] = useState(false);
+  const refBotao = useRef(null);
+  const refPainel = useRef(null);
+  const [pos, setPos] = useState(null);
+  const fechar = useCallback(() => setAberto(false), []);
+  useLayoutEffect(() => {
+    if (!aberto || !refBotao.current) {
+      setPos(null);
+      return;
+    }
+    const r = refBotao.current.getBoundingClientRect();
+    const altura = refPainel.current?.offsetHeight ?? 240;
+    const horizontal = alinhar === "direita" ? { right: window.innerWidth - r.right } : { left: r.left };
+    const cabeEmBaixo = r.bottom + 4 + altura <= window.innerHeight - 8;
+    setPos({
+      ...horizontal,
+      minWidth: r.width,
+      ...cabeEmBaixo || r.top < altura ? { top: r.bottom + 4 } : { bottom: window.innerHeight - r.top + 4 }
+    });
+  }, [aberto, alinhar]);
+  useEffect(() => {
+    if (!aberto) return;
+    const clique = (e) => {
+      const t = e.target;
+      if (!refBotao.current?.contains(t) && !refPainel.current?.contains(t)) setAberto(false);
+    };
+    const scroll = (e) => {
+      if (!refPainel.current?.contains(e.target)) setAberto(false);
+    };
+    const redimensionar = () => setAberto(false);
+    document.addEventListener("mousedown", clique);
+    window.addEventListener("scroll", scroll, true);
+    window.addEventListener("resize", redimensionar);
+    return () => {
+      document.removeEventListener("mousedown", clique);
+      window.removeEventListener("scroll", scroll, true);
+      window.removeEventListener("resize", redimensionar);
+    };
+  }, [aberto]);
+  const estilo = pos ?? { top: 0, left: 0, visibility: "hidden" };
+  return { aberto, setAberto, fechar, refBotao, refPainel, estilo };
+}
+export {
+  CLS_PAINEL,
+  clsItem,
+  usePainelFlutuante
+};
+//# sourceMappingURL=painelFlutuante.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"painelFlutuante.js","sources":["../../../../../src/legacy/components/ui/painelFlutuante.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react'\r\n\r\n/**\r\n * Aspeto comum das listas suspensas (Escolha e MenuAcoes): cartão arredondado com sombra, nos dois temas.\r\n * Um só sítio para as duas ficarem iguais.\r\n */\r\nexport const CLS_PAINEL =\r\n  'fixed z-[60] min-w-[10rem] max-h-72 overflow-auto rounded-xl border border-slate-200 bg-white py-1 text-sm shadow-lg dark:border-slate-700 dark:bg-slate-900'\r\n/** Item de uma lista suspensa; `ativo` = o que o teclado tem selecionado. */\r\nexport const clsItem = (ativo: boolean, perigo = false) =>\r\n  `w-full flex items-center gap-2.5 px-3 py-2 text-left cursor-pointer select-none ${\r\n    perigo ? 'text-red-600 dark:text-red-300' : 'text-slate-700 dark:text-slate-200'\r\n  } ${ativo ? 'bg-slate-100 dark:bg-slate-800' : 'bg-transparent hover:bg-slate-50 dark:hover:bg-slate-800'}`\r\n\r\n/**\r\n * Painel flutuante preso a um botão: posição fixa (não é cortado por tabelas ou modais com scroll), abre para\r\n * cima quando não cabe por baixo, fecha ao clicar fora, com Esc, ao fazer scroll fora dele ou ao redimensionar.\r\n */\r\nexport function usePainelFlutuante(alinhar: 'esquerda' | 'direita' = 'esquerda') {\r\n  const [aberto, setAberto] = useState(false)\r\n  const refBotao = useRef<HTMLButtonElement>(null)\r\n  const refPainel = useRef<HTMLDivElement>(null)\r\n  const [pos, setPos] = useState<CSSProperties | null>(null)\r\n\r\n  const fechar = useCallback(() => setAberto(false), [])\r\n\r\n  useLayoutEffect(() => {\r\n    if (!aberto || !refBotao.current) {\r\n      setPos(null)\r\n      return\r\n    }\r\n    const r = refBotao.current.getBoundingClientRect()\r\n    const altura = refPainel.current?.offsetHeight ?? 240\r\n    const horizontal = alinhar === 'direita' ? { right: window.innerWidth - r.right } : { left: r.left }\r\n    const cabeEmBaixo = r.bottom + 4 + altura <= window.innerHeight - 8\r\n    setPos({\r\n      ...horizontal,\r\n      minWidth: r.width,\r\n      ...(cabeEmBaixo || r.top < altura ? { top: r.bottom + 4 } : { bottom: window.innerHeight - r.top + 4 }),\r\n    })\r\n  }, [aberto, alinhar])\r\n\r\n  useEffect(() => {\r\n    if (!aberto) return\r\n    const clique = (e: MouseEvent) => {\r\n      const t = e.target as Node\r\n      if (!refBotao.current?.contains(t) && !refPainel.current?.contains(t)) setAberto(false)\r\n    }\r\n    const scroll = (e: Event) => {\r\n      if (!refPainel.current?.contains(e.target as Node)) setAberto(false)\r\n    }\r\n    const redimensionar = () => setAberto(false)\r\n    document.addEventListener('mousedown', clique)\r\n    window.addEventListener('scroll', scroll, true)\r\n    window.addEventListener('resize', redimensionar)\r\n    return () => {\r\n      document.removeEventListener('mousedown', clique)\r\n      window.removeEventListener('scroll', scroll, true)\r\n      window.removeEventListener('resize', redimensionar)\r\n    }\r\n  }, [aberto])\r\n\r\n  // Antes de medir, o painel desenha-se invisível (para se saber a altura).\r\n  const estilo: CSSProperties = pos ?? { top: 0, left: 0, visibility: 'hidden' }\r\n  return { aberto, setAberto, fechar, refBotao, refPainel, estilo }\r\n}\r\n"],"names":[],"mappings":";AAMO,MAAM,aACX;AAEK,MAAM,UAAU,CAAC,OAAgB,SAAS,UAC/C,mFACE,SAAS,mCAAmC,oCAC9C,IAAI,QAAQ,mCAAmC,0DAA0D;AAMpG,SAAS,mBAAmB,UAAkC,YAAY;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,WAAW,OAA0B,IAAI;AAC/C,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,CAAC,KAAK,MAAM,IAAI,SAA+B,IAAI;AAEzD,QAAM,SAAS,YAAY,MAAM,UAAU,KAAK,GAAG,CAAA,CAAE;AAErD,kBAAgB,MAAM;AACpB,QAAI,CAAC,UAAU,CAAC,SAAS,SAAS;AAChC,aAAO,IAAI;AACX;AAAA,IACF;AACA,UAAM,IAAI,SAAS,QAAQ,sBAAA;AAC3B,UAAM,SAAS,UAAU,SAAS,gBAAgB;AAClD,UAAM,aAAa,YAAY,YAAY,EAAE,OAAO,OAAO,aAAa,EAAE,MAAA,IAAU,EAAE,MAAM,EAAE,KAAA;AAC9F,UAAM,cAAc,EAAE,SAAS,IAAI,UAAU,OAAO,cAAc;AAClE,WAAO;AAAA,MACL,GAAG;AAAA,MACH,UAAU,EAAE;AAAA,MACZ,GAAI,eAAe,EAAE,MAAM,SAAS,EAAE,KAAK,EAAE,SAAS,EAAA,IAAM,EAAE,QAAQ,OAAO,cAAc,EAAE,MAAM,EAAA;AAAA,IAAE,CACtG;AAAA,EACH,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,UAAM,SAAS,CAAC,MAAkB;AAChC,YAAM,IAAI,EAAE;AACZ,UAAI,CAAC,SAAS,SAAS,SAAS,CAAC,KAAK,CAAC,UAAU,SAAS,SAAS,CAAC,aAAa,KAAK;AAAA,IACxF;AACA,UAAM,SAAS,CAAC,MAAa;AAC3B,UAAI,CAAC,UAAU,SAAS,SAAS,EAAE,MAAc,aAAa,KAAK;AAAA,IACrE;AACA,UAAM,gBAAgB,MAAM,UAAU,KAAK;AAC3C,aAAS,iBAAiB,aAAa,MAAM;AAC7C,WAAO,iBAAiB,UAAU,QAAQ,IAAI;AAC9C,WAAO,iBAAiB,UAAU,aAAa;AAC/C,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,MAAM;AAChD,aAAO,oBAAoB,UAAU,QAAQ,IAAI;AACjD,aAAO,oBAAoB,UAAU,aAAa;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,SAAwB,OAAO,EAAE,KAAK,GAAG,MAAM,GAAG,YAAY,SAAA;AACpE,SAAO,EAAE,QAAQ,WAAW,QAAQ,UAAU,WAAW,OAAA;AAC3D;"}

package/dist/esm/legacy/constants/Colors.js

@@ -0,0 +1,33 @@
+var Color = /* @__PURE__ */ ((Color2) => {
+  Color2["BRIGHT_BLUE"] = "#006fff";
+  Color2["BRIGHT_GREEN"] = "#17daa4";
+  Color2["DARK_BLUE"] = "#010060";
+  Color2["LIGHT_GRAY_01"] = "#dddddd";
+  Color2["ALMOST_WHITE"] = "#f8f8f8";
+  Color2["ALMOST_BLACK"] = "#1f1f1f";
+  Color2["MEDIUM_BLUE"] = "#87a9ff";
+  Color2["MEDIUM_GREEN"] = "#b0ebdb";
+  Color2["MEDIUM_DARK_BLUE"] = "#7d7dab";
+  Color2["MEDIUM_GRAY_01"] = "#c2c2c2";
+  Color2["LIGHT_GRAY_02"] = "#ededed";
+  Color2["LIGHT_BLUE"] = "#cedcff";
+  Color2["DARK_GRAY"] = "#6c6c6c";
+  Color2["WARM_YELLOW"] = "#ebc25a";
+  Color2["WARM_ORANGE"] = "#eb745a";
+  Color2["LIGHT_YELLOW"] = "#ffedbf";
+  Color2["BRIGHT_PURPLE"] = "#801de2";
+  Color2["REJECTED"] = "#de4321";
+  Color2["APPROVED"] = "#1dc88a";
+  Color2["STAND_BY"] = "#ffcc4a";
+  Color2["BG_LIGHT_YELLOW"] = "#ffedbf";
+  Color2["DARK_YELLOW"] = "#856404";
+  Color2["BG_LIGHT_RED"] = "#ffbdae";
+  Color2["DARK_RED"] = "#842029";
+  Color2["BG_SUCCESS"] = "#8ef8d2";
+  Color2["DARK_green"] = "#0f5132";
+  return Color2;
+})(Color || {});
+export {
+  Color
+};
+//# sourceMappingURL=Colors.js.map

package/dist/esm/legacy/constants/Colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Colors.js","sources":["../../../../src/legacy/constants/Colors.ts"],"sourcesContent":["export enum Color {\r\n\r\n    BRIGHT_BLUE = '#006fff',\r\n    BRIGHT_GREEN = '#17daa4',\r\n    DARK_BLUE = '#010060',\r\n    LIGHT_GRAY_01 = '#dddddd',\r\n    ALMOST_WHITE = '#f8f8f8',\r\n    ALMOST_BLACK = '#1f1f1f',\r\n  \r\n    /* Secundary */\r\n    MEDIUM_BLUE = '#87a9ff',\r\n    MEDIUM_GREEN = '#b0ebdb',\r\n    MEDIUM_DARK_BLUE = '#7d7dab',\r\n    MEDIUM_GRAY_01 = '#c2c2c2',\r\n    LIGHT_GRAY_02 = '#ededed',\r\n    LIGHT_BLUE = '#cedcff',\r\n    DARK_GRAY = '#6c6c6c',\r\n  \r\n    /* Tertiary */\r\n    WARM_YELLOW = '#ebc25a',\r\n    WARM_ORANGE = '#eb745a',\r\n    LIGHT_YELLOW = '#ffedbf',\r\n    BRIGHT_PURPLE = '#801de2',\r\n  \r\n    /* Alert */\r\n    REJECTED = '#de4321',\r\n    APPROVED = '#1dc88a',\r\n    STAND_BY = '#ffcc4a',\r\n  \r\n    /* Notifications */\r\n    BG_LIGHT_YELLOW = '#ffedbf',\r\n    DARK_YELLOW = '#856404',\r\n    BG_LIGHT_RED = '#ffbdae',\r\n    DARK_RED = '#842029',\r\n    BG_SUCCESS = '#8ef8d2',\r\n    DARK_green = '#0f5132',\r\n\r\n}"],"names":["Color"],"mappings":"AAAO,IAAK,0BAAAA,WAAL;AAEHA,SAAA,aAAA,IAAc;AACdA,SAAA,cAAA,IAAe;AACfA,SAAA,WAAA,IAAY;AACZA,SAAA,eAAA,IAAgB;AAChBA,SAAA,cAAA,IAAe;AACfA,SAAA,cAAA,IAAe;AAGfA,SAAA,aAAA,IAAc;AACdA,SAAA,cAAA,IAAe;AACfA,SAAA,kBAAA,IAAmB;AACnBA,SAAA,gBAAA,IAAiB;AACjBA,SAAA,eAAA,IAAgB;AAChBA,SAAA,YAAA,IAAa;AACbA,SAAA,WAAA,IAAY;AAGZA,SAAA,aAAA,IAAc;AACdA,SAAA,aAAA,IAAc;AACdA,SAAA,cAAA,IAAe;AACfA,SAAA,eAAA,IAAgB;AAGhBA,SAAA,UAAA,IAAW;AACXA,SAAA,UAAA,IAAW;AACXA,SAAA,UAAA,IAAW;AAGXA,SAAA,iBAAA,IAAkB;AAClBA,SAAA,aAAA,IAAc;AACdA,SAAA,cAAA,IAAe;AACfA,SAAA,UAAA,IAAW;AACXA,SAAA,YAAA,IAAa;AACbA,SAAA,YAAA,IAAa;AAnCL,SAAAA;AAAA,GAAA,SAAA,CAAA,CAAA;"}

package/dist/esm/legacy/constants/FontWeight.js

@@ -0,0 +1,35 @@
+var FontWeight = /* @__PURE__ */ ((FontWeight2) => {
+  FontWeight2["LIGHT"] = "light";
+  FontWeight2["MEDIUM"] = "medium";
+  FontWeight2["REGULAR"] = "regular";
+  FontWeight2["SEMIBOLD"] = "semibold";
+  FontWeight2["BOLD"] = "bold";
+  return FontWeight2;
+})(FontWeight || {});
+const WeightValue = {
+  [
+    "light"
+    /* LIGHT */
+  ]: 300,
+  [
+    "medium"
+    /* MEDIUM */
+  ]: 400,
+  [
+    "regular"
+    /* REGULAR */
+  ]: 500,
+  [
+    "semibold"
+    /* SEMIBOLD */
+  ]: 600,
+  [
+    "bold"
+    /* BOLD */
+  ]: 700
+};
+export {
+  FontWeight,
+  WeightValue
+};
+//# sourceMappingURL=FontWeight.js.map

package/dist/esm/legacy/constants/FontWeight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontWeight.js","sources":["../../../../src/legacy/constants/FontWeight.ts"],"sourcesContent":["/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport enum FontWeight {\r\n  LIGHT = 'light',\r\n  MEDIUM = 'medium',\r\n  REGULAR = 'regular',\r\n  SEMIBOLD = 'semibold',\r\n  BOLD = 'bold',\r\n}\r\n\r\nexport const WeightValue: Record<FontWeight, number> = {\r\n  [FontWeight.LIGHT]: 300,\r\n  [FontWeight.MEDIUM]: 400,\r\n  [FontWeight.REGULAR]: 500,\r\n  [FontWeight.SEMIBOLD]: 600,\r\n  [FontWeight.BOLD]: 700,\r\n}\r\n"],"names":["FontWeight"],"mappings":"AACO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,OAAA,IAAQ;AACRA,cAAA,QAAA,IAAS;AACTA,cAAA,SAAA,IAAU;AACVA,cAAA,UAAA,IAAW;AACXA,cAAA,MAAA,IAAO;AALG,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAQL,MAAM,cAA0C;AAAA,EACrD;AAAA,IAAC;AAAA;AAAA,KAAmB;AAAA,EACpB;AAAA,IAAC;AAAA;AAAA,KAAoB;AAAA,EACrB;AAAA,IAAC;AAAA;AAAA,KAAqB;AAAA,EACtB;AAAA,IAAC;AAAA;AAAA,KAAsB;AAAA,EACvB;AAAA,IAAC;AAAA;AAAA,KAAkB;AACrB;"}

package/dist/esm/legacy/contexts/apiContext.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import axios from "axios";
+const ApiContext = createContext(void 0);
+const ApiProvider = ({ children, baseURL, token, withCredentials }) => {
+  const axiosInstance = axios.create({
+    baseURL,
+    timeout: 1e4,
+    withCredentials: withCredentials !== void 0 ? withCredentials : true,
+    headers: token ? { Authorization: `Bearer ${token}` } : void 0
+  });
+  return /* @__PURE__ */ jsx(ApiContext.Provider, { value: axiosInstance, children });
+};
+const useAxiosInstance = () => {
+  const axiosInstance = useContext(ApiContext);
+  if (!axiosInstance) {
+    throw new Error("useAxiosInstance must be used within an ApiProvider");
+  }
+  return axiosInstance;
+};
+export {
+  ApiProvider,
+  useAxiosInstance
+};
+//# sourceMappingURL=apiContext.js.map

package/dist/esm/legacy/contexts/apiContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiContext.js","sources":["../../../../src/legacy/contexts/apiContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react'\r\nimport axios, { AxiosInstance } from 'axios'\r\n\r\n// Create context for the Axios instance\r\nconst ApiContext = createContext<AxiosInstance | undefined>(undefined)\r\n\r\n// Provider to set the Axios instance with baseURL and optional token\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport const ApiProvider: React.FC<{\r\n  children: React.ReactNode\r\n  baseURL: string\r\n  token?: string\r\n  withCredentials?: boolean\r\n}> = ({ children, baseURL, token, withCredentials }) => {\r\n  const axiosInstance = axios.create({\r\n    baseURL,\r\n    timeout: 10000,\r\n    withCredentials: withCredentials !== undefined ? withCredentials : true,\r\n    headers: token ? { Authorization: `Bearer ${token}` } : undefined,\r\n  })\r\n\r\n  return (\r\n    <ApiContext.Provider value={axiosInstance}>{children}</ApiContext.Provider>\r\n  )\r\n}\r\n\r\n// Hook to access the Axios instance\r\nexport const useAxiosInstance = () => {\r\n  const axiosInstance = useContext(ApiContext)\r\n  if (!axiosInstance) {\r\n    throw new Error('useAxiosInstance must be used within an ApiProvider')\r\n  }\r\n  return axiosInstance\r\n}\r\n"],"names":[],"mappings":";;;AAIA,MAAM,aAAa,cAAyC,MAAS;AAI9D,MAAM,cAKR,CAAC,EAAE,UAAU,SAAS,OAAO,sBAAsB;AACtD,QAAM,gBAAgB,MAAM,OAAO;AAAA,IACjC;AAAA,IACA,SAAS;AAAA,IACT,iBAAiB,oBAAoB,SAAY,kBAAkB;AAAA,IACnE,SAAS,QAAQ,EAAE,eAAe,UAAU,KAAK,OAAO;AAAA,EAAA,CACzD;AAED,6BACG,WAAW,UAAX,EAAoB,OAAO,eAAgB,UAAS;AAEzD;AAGO,MAAM,mBAAmB,MAAM;AACpC,QAAM,gBAAgB,WAAW,UAAU;AAC3C,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;"}