@nextelco/common-ui 2.1.105 → 2.1.107

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

@@ -1,9 +1,5 @@
-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" }) });
+import { jsx } from "react/jsx-runtime";
+import { SelectInput } from "../../../v1/primitives/forms/SelectInput/SelectInput.js";
 function Escolha({
   valor,
   opcoes,
@@ -16,140 +12,28 @@ function Escolha({
   className,
   tamanho = "barra",
   aspeto = "campo",
-  corEtiqueta = "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200"
+  corEtiqueta
 }) {
   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;
+  return /* @__PURE__ */ jsx(
+    SelectInput,
+    {
+      "aria-label": rotulo,
+      value: valor,
+      onValueChange: onMudar,
+      options: opcoes.map((o) => typeof o === "string" ? o : { value: o.valor, label: o.rotulo, description: o.descricao }),
+      placeholder,
+      placeholderOption: false,
+      emptyOption: opcaoVazia,
+      disabled,
+      searchable: pesquisa,
+      variant: etiqueta ? "pill" : "field",
+      pillClassName: corEtiqueta,
+      tall: tamanho === "formulario",
+      labels: { search: "Pesquisar…", searchIn: "Pesquisar em {label}", noResults: "Sem resultados" },
+      className: `inline-block ${className ?? (etiqueta ? "" : "min-w-[10rem] max-w-[18rem]")}`
     }
-    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

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

@@ -1 +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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"}
+{"version":3,"file":"Escolha.js","sources":["../../../../../src/legacy/components/ui/Escolha.tsx"],"sourcesContent":["import React from 'react'\r\nimport SelectInput from '../../../v1/primitives/forms/SelectInput/SelectInput'\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  /** Primeira opção \"vazia\" (valor ''), para desfazer a escolha (ex.: \"Todas\"). */\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  /** 'barra' (omissão): a altura dos botões e filtros. 'formulario': a altura dos campos dos formulários legacy (38px). */\r\n  tamanho?: 'barra' | 'formulario'\r\n  /** 'campo' (omissão) ou 'etiqueta': o botão é uma etiqueta arredondada, com as cores de `corEtiqueta`. */\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\n/**\r\n * Migrado para o V1: adaptador do `SelectInput` (a mesma lista desenhada, nomes antigos e textos em português).\r\n * @deprecated Legacy — usar o `SelectInput` do V1. Ver Storybook › Legacy.\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,\r\n}: EscolhaProps) {\r\n  const etiqueta = aspeto === 'etiqueta'\r\n  return (\r\n    <SelectInput\r\n      aria-label={rotulo}\r\n      value={valor}\r\n      onValueChange={onMudar}\r\n      options={opcoes.map((o) => (typeof o === 'string' ? o : { value: o.valor, label: o.rotulo, description: o.descricao }))}\r\n      placeholder={placeholder}\r\n      placeholderOption={false}\r\n      emptyOption={opcaoVazia}\r\n      disabled={disabled}\r\n      searchable={pesquisa}\r\n      variant={etiqueta ? 'pill' : 'field'}\r\n      pillClassName={corEtiqueta}\r\n      tall={tamanho === 'formulario'}\r\n      labels={{ search: 'Pesquisar…', searchIn: 'Pesquisar em {label}', noResults: 'Sem resultados' }}\r\n      className={`inline-block ${className ?? (etiqueta ? '' : 'min-w-[10rem] max-w-[18rem]')}`}\r\n    />\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AAsCA,SAAwB,QAAQ;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AACF,GAAiB;AACf,QAAM,WAAW,WAAW;AAC5B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,eAAe;AAAA,MACf,SAAS,OAAO,IAAI,CAAC,MAAO,OAAO,MAAM,WAAW,IAAI,EAAE,OAAO,EAAE,OAAO,OAAO,EAAE,QAAQ,aAAa,EAAE,WAAY;AAAA,MACtH;AAAA,MACA,mBAAmB;AAAA,MACnB,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,WAAW,SAAS;AAAA,MAC7B,eAAe;AAAA,MACf,MAAM,YAAY;AAAA,MAClB,QAAQ,EAAE,QAAQ,cAAc,UAAU,wBAAwB,WAAW,iBAAA;AAAA,MAC7E,WAAW,gBAAgB,cAAc,WAAW,KAAK,8BAA8B;AAAA,IAAA;AAAA,EAAA;AAG7F;"}

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

@@ -1,15 +1,17 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Notice } from "../../../v1/primitives/display/Notice/Notice.js";
+const TOM = { aviso: "warning", info: "info", erro: "error" };
 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 })
-  ] });
+  return /* @__PURE__ */ jsx(
+    Notice,
+    {
+      variant: "banner",
+      tone: TOM[tom],
+      icon: icone ?? null,
+      action: acao ? { label: acao.rotulo, onClick: acao.onClick } : void 0,
+      children
+    }
+  );
 }
 export {
   FaixaAviso as default

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

@@ -1 +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;"}
+{"version":3,"file":"FaixaAviso.js","sources":["../../../../../src/legacy/components/ui/FaixaAviso.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\nimport Notice from '../../../v1/primitives/display/Notice/Notice'\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\nconst TOM: Record<TomFaixa, 'warning' | 'info' | 'error'> = { aviso: 'warning', info: 'info', erro: 'error' }\r\n\r\n/**\r\n * Migrado para o V1: adaptador do `Notice` com `variant=\"banner\"` (faixa no topo da página).\r\n * @deprecated Legacy — usar o `Notice` do V1. Ver Storybook › Legacy.\r\n */\r\nexport default function FaixaAviso({ children, tom = 'aviso', acao, icone }: FaixaAvisoProps) {\r\n  return (\r\n    <Notice\r\n      variant=\"banner\"\r\n      tone={TOM[tom]}\r\n      icon={icone ?? null}\r\n      action={acao ? { label: acao.rotulo, onClick: acao.onClick } : undefined}\r\n    >\r\n      {children}\r\n    </Notice>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AAeA,MAAM,MAAsD,EAAE,OAAO,WAAW,MAAM,QAAQ,MAAM,QAAA;AAMpG,SAAwB,WAAW,EAAE,UAAU,MAAM,SAAS,MAAM,SAA0B;AAC5F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAM,IAAI,GAAG;AAAA,MACb,MAAM,SAAS;AAAA,MACf,QAAQ,OAAO,EAAE,OAAO,KAAK,QAAQ,SAAS,KAAK,QAAA,IAAY;AAAA,MAE9D;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,50 +1,15 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import Tabs from "../../../v1/primitives/navigation/Tabs/Tabs.js";
 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
-    );
-  }) });
+  return /* @__PURE__ */ jsx(
+    Tabs,
+    {
+      items: itens.map((it) => ({ id: it.id, label: it.rotulo, count: it.contagem ?? void 0, disabled: it.desativado })),
+      value: ativo,
+      onChange: onMudar,
+      label: rotulo
+    }
+  );
 }
 export {
   Separadores as default

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

@@ -1 +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;"}
+{"version":3,"file":"Separadores.js","sources":["../../../../../src/legacy/components/ui/Separadores.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\r\nimport Tabs from '../../../v1/primitives/navigation/Tabs/Tabs'\r\n\r\n/*\r\n * Migrado para o V1: os separadores são o `Tabs` do V1. Este ficheiro só\r\n * traduz a API antiga (em português) para a nova, para as apps que ainda a\r\n * usam continuarem a funcionar sem mudanças.\r\n */\r\n\r\n/** @deprecated Legacy — usar `TabItem` do V1. */\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 — usar `TabsProps` do V1. */\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/** @deprecated Legacy — usar `Tabs` do V1. */\r\nexport default function Separadores<T extends string>({ itens, ativo, onMudar, rotulo }: SeparadoresProps<T>) {\r\n  return (\r\n    <Tabs<T>\r\n      items={itens.map((it) => ({ id: it.id, label: it.rotulo, count: it.contagem ?? undefined, disabled: it.desativado }))}\r\n      value={ativo}\r\n      onChange={onMudar}\r\n      label={rotulo}\r\n    />\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AA4BA,SAAwB,YAA8B,EAAE,OAAO,OAAO,SAAS,UAA+B;AAC5G,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,OAAO,GAAG,QAAQ,OAAO,GAAG,YAAY,QAAW,UAAU,GAAG,aAAa;AAAA,MACpH,OAAO;AAAA,MACP,UAAU;AAAA,MACV,OAAO;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -1,5 +1,8 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import Escolha from "./Escolha.js";
+import SegmentedControl from "../../../v1/primitives/buttons/SegmentedControl/SegmentedControl.js";
+import Button from "../../../v1/primitives/buttons/Button/Button.js";
+import { Badge } from "../../../v1/primitives/display/Badge/Badge.js";
 function IconX({ className = "" }) {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -19,15 +22,6 @@ function IconX({ className = "" }) {
     }
   );
 }
-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",
@@ -47,97 +41,6 @@ function SectionGroup({
     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" };
@@ -161,6 +64,7 @@ function ChipEstadoInterno({ 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 });
 }
+const VARIANTE_V1 = { default: "secondary", accent: "primary", danger: "danger", ghost: "ghost" };
 function Btn({
   children,
   onClick,
@@ -170,14 +74,18 @@ function Btn({
   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 });
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type,
+      onClick,
+      disabled,
+      title,
+      variant: VARIANTE_V1[variant],
+      active: variant === "default" && active ? true : void 0,
+      children
+    }
+  );
 }
 function BtnGroup({
   value,
@@ -185,10 +93,7 @@ function BtnGroup({
   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)) })
-  ] });
+  return /* @__PURE__ */ jsx(SegmentedControl, { value, options, onChange, label });
 }
 function Estado({
   carregando,
@@ -348,10 +253,8 @@ export {
   CampoInterruptor,
   CampoPesquisa,
   CampoSelect,
-  Card,
   ChipEstadoInterno,
   Estado,
-  Kpi,
   LinhaAlerta,
   ListaCampos,
   Modal,