@nextelco/common-ui 2.1.103 → 2.1.105

package/dist/esm/v1/components/lists/ListFinder/ListFinder.js

@@ -0,0 +1,214 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useMemo, useEffect } from "react";
+import { ChevronLeftIcon, SearchIcon } from "../../../foundations/icons/icons.js";
+import ListItem from "../../../primitives/lists/ListItem/ListItem.js";
+import { ListCheckbox } from "../../../primitives/lists/ListItem/ListCheckbox.js";
+import { OverlayScrollbar } from "../../tables/Table/OverlayScrollbar.js";
+import { DEFAULT_LIST_FINDER_LABELS } from "./labels.js";
+const semAcentos = (s) => s.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+function numerosPagina(atual, total) {
+  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);
+  if (atual <= 2) return [1, 2, 3, "…", total];
+  if (atual >= total - 1) return [1, "…", total - 2, total - 1, total];
+  return [1, "…", atual, "…", total];
+}
+function ListFinder({
+  items,
+  itemKey,
+  itemContent,
+  activeKey,
+  onItemClick,
+  selectedKeys,
+  onSelectionChange,
+  filters,
+  onBack,
+  search: pesquisaDeFora,
+  onSearchChange,
+  searchText,
+  total,
+  page,
+  onPageChange,
+  pageSize = 50,
+  loading = false,
+  labels,
+  className = ""
+}) {
+  const L = { ...DEFAULT_LIST_FINDER_LABELS, ...labels };
+  const [pesquisaPropria, setPesquisaPropria] = useState("");
+  const pesquisa = pesquisaDeFora ?? pesquisaPropria;
+  const pesquisar = (s) => {
+    setPesquisaPropria(s);
+    onSearchChange?.(s);
+  };
+  const colar = (e) => {
+    const texto = e.clipboardData.getData("text");
+    if (!/\r?\n/.test(texto.trim())) return;
+    e.preventDefault();
+    const lista = texto.split(/\r?\n/).map((t) => t.trim()).filter(Boolean).join(", ");
+    const el = e.currentTarget;
+    pesquisar(el.value.slice(0, el.selectionStart ?? el.value.length) + lista + el.value.slice(el.selectionEnd ?? el.value.length));
+  };
+  const filtradas = useMemo(() => {
+    if (!searchText || !pesquisa.trim()) return items;
+    const termos = pesquisa.split(/[\n,;\t]+/).map((t) => semAcentos(t.trim())).filter(Boolean);
+    return items.filter((it) => {
+      const texto = semAcentos(searchText(it));
+      return termos.some((t) => texto.includes(t));
+    });
+  }, [items, pesquisa, searchText]);
+  const peloServidor = total !== void 0;
+  const [paginaPropria, setPaginaPropria] = useState(1);
+  const totalLinhas = peloServidor ? total : filtradas.length;
+  const totalPaginas = Math.max(1, Math.ceil(totalLinhas / pageSize));
+  const pagina = Math.min(peloServidor ? page ?? 1 : paginaPropria, totalPaginas);
+  useEffect(() => {
+    if (!peloServidor) setPaginaPropria(1);
+  }, [pesquisa, peloServidor]);
+  const irPara = (p) => {
+    if (peloServidor) onPageChange?.(p);
+    else setPaginaPropria(p);
+  };
+  const visiveis = peloServidor ? filtradas : filtradas.slice((pagina - 1) * pageSize, pagina * pageSize);
+  const [caixa, setCaixa] = useState(null);
+  useEffect(() => {
+    caixa?.scrollTo?.({ top: 0 });
+  }, [pagina, caixa]);
+  const marcadas = selectedKeys ?? /* @__PURE__ */ new Set();
+  const marcaveis = !!onSelectionChange;
+  const nMarcadasVisiveis = visiveis.filter((it) => marcadas.has(itemKey(it))).length;
+  const todasMarcadas = visiveis.length > 0 && nMarcadasVisiveis === visiveis.length;
+  const marcar = (key, sim) => {
+    const n = new Set(marcadas);
+    if (sim) n.add(key);
+    else n.delete(key);
+    onSelectionChange?.(n);
+  };
+  const marcarVisiveis = () => {
+    const n = new Set(marcadas);
+    for (const it of visiveis) {
+      if (todasMarcadas) n.delete(itemKey(it));
+      else n.add(itemKey(it));
+    }
+    onSelectionChange?.(n);
+  };
+  const aCarregar = loading && visiveis.length === 0;
+  const esqueleto = /* @__PURE__ */ jsx("span", { className: "inline-block h-2 w-20 rounded-sm bg-slate-200 animate-pulse motion-reduce:animate-none", "aria-hidden": true });
+  return /* @__PURE__ */ jsxs("div", { className: `v1-reset flex h-full min-h-0 flex-col border border-slate-200 bg-white text-control text-slate-800 ${className}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-b border-slate-100 px-3 py-2.5", children: [
+      (onBack || filters) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        onBack && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            "aria-label": L.back,
+            title: L.back,
+            className: "-ml-1 flex h-7 w-6 shrink-0 items-center justify-center rounded text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700",
+            children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-1.5", children: filters })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-slate-400" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "search",
+            value: pesquisa,
+            onChange: (e) => pesquisar(e.target.value),
+            onPaste: colar,
+            placeholder: L.searchPlaceholder,
+            "aria-label": L.search,
+            className: "block h-control w-full min-w-0 rounded-lg border border-border bg-card pr-2.5 pl-8 text-control text-foreground outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 focus:border-primary/40 focus:ring-3 focus:ring-primary/10"
+          }
+        )
+      ] })
+    ] }),
+    marcaveis && visiveis.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 border-b border-slate-100 bg-slate-50 px-3 py-1.5 text-caption text-slate-500", children: [
+      /* @__PURE__ */ jsx(
+        ListCheckbox,
+        {
+          checked: todasMarcadas,
+          indeterminate: nMarcadasVisiveis > 0,
+          onChange: marcarVisiveis,
+          label: L.selectVisible(visiveis.length)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: nMarcadasVisiveis > 0 ? L.selectedCount(nMarcadasVisiveis, visiveis.length) : L.selectVisible(visiveis.length) }),
+      marcadas.size > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelectionChange?.(/* @__PURE__ */ new Set()),
+          className: "ml-auto font-medium text-proef-blue hover:underline",
+          children: L.clearSelection
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx("div", { ref: setCaixa, className: "min-h-0 flex-1 overflow-y-auto scrollbar-none", children: aCarregar ? (
+        // A forma das linhas já diz que vem ali a lista. Mais do que cabem,
+        // cortadas pela caixa: chega ao fundo em qualquer altura.
+        /* @__PURE__ */ jsxs("div", { role: "status", "aria-busy": "true", className: "h-full overflow-hidden", children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: L.loading }),
+          ["w-11/12", "w-3/4", "w-5/6", "w-2/3", "w-4/5", "w-7/12"].flatMap((l) => [l, l, l, l]).map((largura, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 border-b border-slate-100 px-3 py-2.5 animate-pulse motion-reduce:animate-none", children: [
+            marcaveis && /* @__PURE__ */ jsx("div", { className: "mt-0.5 h-4 w-4 shrink-0 border border-slate-200 bg-slate-100" }),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "h-3 w-12 bg-slate-200" }),
+              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-16 bg-slate-100" }),
+              /* @__PURE__ */ jsx("div", { className: `h-2.5 ${largura} bg-slate-200` }),
+              /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1/3 bg-slate-100" })
+            ] })
+          ] }, i))
+        ] })
+      ) : visiveis.length === 0 ? /* @__PURE__ */ jsx("p", { className: "m-0 px-3 py-6 text-center text-caption text-slate-400", children: L.empty }) : /* @__PURE__ */ jsx("ul", { className: "m-0 list-none p-0", children: visiveis.map((it) => {
+        const key = itemKey(it);
+        return /* @__PURE__ */ jsx(
+          ListItem,
+          {
+            ...itemContent(it),
+            active: activeKey === key,
+            onClick: onItemClick ? () => onItemClick(it) : void 0,
+            checked: marcadas.has(key),
+            onCheckedChange: marcaveis ? (sim) => marcar(key, sim) : void 0,
+            checkboxLabel: L.checkItem(key)
+          },
+          key
+        );
+      }) }) }),
+      /* @__PURE__ */ jsx(OverlayScrollbar, { alvo: caixa, borda: 0 })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex h-11 shrink-0 items-center justify-between gap-2 border-t border-slate-100 bg-slate-50 px-3 text-caption text-slate-500", children: [
+      /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap", children: aCarregar ? esqueleto : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "font-semibold text-slate-800 tabular-nums", children: totalLinhas.toLocaleString("pt-PT") }),
+        " ",
+        L.itemsNoun(totalLinhas)
+      ] }) }),
+      !aCarregar && totalPaginas > 1 && /* @__PURE__ */ jsxs("nav", { "aria-label": L.pagination, className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          L.page,
+          " ",
+          pagina,
+          " / ",
+          totalPaginas
+        ] }),
+        numerosPagina(pagina, totalPaginas).map((p, i) => p === "…" ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "flex h-7 min-w-4 items-center justify-center text-slate-300", children: "…" }, `r${i}`) : /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => irPara(p),
+            "aria-current": p === pagina ? "page" : void 0,
+            className: `h-7 min-w-7 rounded-md px-1.5 font-semibold tabular-nums transition-colors ${p === pagina ? "cursor-default bg-primary text-white" : "text-slate-500 hover:bg-slate-200/70 hover:text-slate-800"}`,
+            children: p.toLocaleString("pt-PT")
+          },
+          p
+        ))
+      ] })
+    ] })
+  ] });
+}
+export {
+  ListFinder as default
+};
+//# sourceMappingURL=ListFinder.js.map

package/dist/esm/v1/components/lists/ListFinder/ListFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListFinder.js","sources":["../../../../../../src/v1/components/lists/ListFinder/ListFinder.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\r\nimport { ChevronLeftIcon, SearchIcon } from '../../../foundations/icons/icons'\r\nimport ListItem, { type ListItemContent } from '../../../primitives/lists/ListItem/ListItem'\r\nimport { ListCheckbox } from '../../../primitives/lists/ListItem/ListCheckbox'\r\nimport { OverlayScrollbar } from '../../tables/Table/OverlayScrollbar'\r\nimport { DEFAULT_LIST_FINDER_LABELS, type ListFinderLabels } from './labels'\r\n\r\nexport interface ListFinderProps<T> {\r\n  /** As linhas: todas, ou só a página atual quando o servidor pagina (com `total`). */\r\n  items: T[]\r\n  /** Uma chave única por linha (ex: o id). */\r\n  itemKey: (item: T) => string\r\n  /** O que cada linha mostra: as partes do [ListItem](?path=/docs/v1-primitives-lists-listitem--docs). */\r\n  itemContent: (item: T) => ListItemContent\r\n  /** A linha aberta (fica realçada). */\r\n  activeKey?: string | null\r\n  /** Ao clicar numa linha: normalmente, abri-la ao lado. */\r\n  onItemClick?: (item: T) => void\r\n  /** As marcadas. Só há caixas de marcar com `onSelectionChange`. */\r\n  selectedKeys?: ReadonlySet<string>\r\n  onSelectionChange?: (keys: Set<string>) => void\r\n  /** Filtros ao lado do voltar, por cima da pesquisa (ex: um ou dois SelectInput). */\r\n  filters?: React.ReactNode\r\n  /** Com isto aparece um ‹ à esquerda, para fechar ou esconder a lista. */\r\n  onBack?: () => void\r\n  /** O texto da pesquisa. Sem ele, a pesquisa guarda o seu. */\r\n  search?: string\r\n  onSearchChange?: (search: string) => void\r\n  /**\r\n   * O texto onde a pesquisa procura, em cada linha. Com isto, a lista filtra-se\r\n   * sozinha (sem acentos nem maiúsculas); sem isto, quem filtra é a app (ex: o\r\n   * servidor, com `onSearchChange`). Uma lista colada (uma por linha, ou\r\n   * separadas por vírgulas) mostra as que tiverem qualquer uma delas.\r\n   */\r\n  searchText?: (item: T) => string\r\n  /** O servidor pagina: quantas linhas há lá ao todo. `items` é só a página atual. */\r\n  total?: number\r\n  /** A página atual (1, 2, ...), quando o servidor pagina. */\r\n  page?: number\r\n  onPageChange?: (page: number) => void\r\n  /** Quantas linhas por página. Com o servidor a paginar, quantas ele manda. */\r\n  pageSize?: number\r\n  /** A carregar: sem linhas ainda, mostra o esqueleto delas. */\r\n  loading?: boolean\r\n  labels?: Partial<ListFinderLabels>\r\n  className?: string\r\n}\r\n\r\nconst semAcentos = (s: string) => s.normalize('NFD').replace(/[̀-ͯ]/g, '').toLowerCase()\r\n\r\n/** Os números das páginas numa coluna estreita: no máximo cinco lugares. */\r\nfunction numerosPagina(atual: number, total: number): (number | '…')[] {\r\n  if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1)\r\n  if (atual <= 2) return [1, 2, 3, '…', total]\r\n  if (atual >= total - 1) return [1, '…', total - 2, total - 1, total]\r\n  return [1, '…', atual, '…', total]\r\n}\r\n\r\n/**\r\n * Uma lista para encontrar e escolher: filtros e pesquisa em cima, as linhas\r\n * ([ListItem](?path=/docs/v1-primitives-lists-listitem--docs)) a rolar no meio e\r\n * as páginas em baixo. Pensada para a coluna ao lado do que se abre (a lista à\r\n * esquerda, o detalhe da linha escolhida à direita).\r\n *\r\n * Enche a altura do pai. O topo, a barra de \"selecionar todos\" e o rodapé\r\n * ficam sempre no sítio: só as linhas rolam.\r\n *\r\n * - **Pesquisa**: com `searchText` filtra sozinha; sem ele, a app filtra\r\n *   (`search`/`onSearchChange`).\r\n * - **Páginas**: pagina sozinha (`pageSize`), ou é o servidor (`total`, `page`,\r\n *   `onPageChange`).\r\n * - **Marcar vários**: com `onSelectionChange`. O \"selecionar todos\" só marca\r\n *   as linhas à vista, nunca as que não se veem.\r\n */\r\nexport default function ListFinder<T>({\r\n  items, itemKey, itemContent, activeKey, onItemClick, selectedKeys, onSelectionChange, filters, onBack,\r\n  search: pesquisaDeFora, onSearchChange, searchText, total, page, onPageChange, pageSize = 50, loading = false,\r\n  labels, className = '',\r\n}: ListFinderProps<T>) {\r\n  const L = { ...DEFAULT_LIST_FINDER_LABELS, ...labels }\r\n  const [pesquisaPropria, setPesquisaPropria] = useState('')\r\n  const pesquisa = pesquisaDeFora ?? pesquisaPropria\r\n  const pesquisar = (s: string) => { setPesquisaPropria(s); onSearchChange?.(s) }\r\n  // Uma caixa de uma linha deita fora as quebras de linha: uma coluna colada\r\n  // de uma folha de cálculo chegava como um número só, colado. Passam a vírgulas.\r\n  const colar = (e: React.ClipboardEvent<HTMLInputElement>) => {\r\n    const texto = e.clipboardData.getData('text')\r\n    if (!/\\r?\\n/.test(texto.trim())) return\r\n    e.preventDefault()\r\n    const lista = texto.split(/\\r?\\n/).map(t => t.trim()).filter(Boolean).join(', ')\r\n    const el = e.currentTarget\r\n    pesquisar(el.value.slice(0, el.selectionStart ?? el.value.length) + lista + el.value.slice(el.selectionEnd ?? el.value.length))\r\n  }\r\n\r\n  const filtradas = useMemo(() => {\r\n    if (!searchText || !pesquisa.trim()) return items\r\n    const termos = pesquisa.split(/[\\n,;\\t]+/).map(t => semAcentos(t.trim())).filter(Boolean)\r\n    return items.filter(it => {\r\n      const texto = semAcentos(searchText(it))\r\n      return termos.some(t => texto.includes(t))\r\n    })\r\n  }, [items, pesquisa, searchText])\r\n\r\n  // Paginação: do servidor (com `total`), ou feita aqui.\r\n  const peloServidor = total !== undefined\r\n  const [paginaPropria, setPaginaPropria] = useState(1)\r\n  const totalLinhas = peloServidor ? total : filtradas.length\r\n  const totalPaginas = Math.max(1, Math.ceil(totalLinhas / pageSize))\r\n  const pagina = Math.min(peloServidor ? (page ?? 1) : paginaPropria, totalPaginas)\r\n  // Uma pesquisa nova volta à primeira página: a terceira de antes já não é a mesma lista.\r\n  useEffect(() => { if (!peloServidor) setPaginaPropria(1) }, [pesquisa, peloServidor])\r\n  const irPara = (p: number) => { if (peloServidor) onPageChange?.(p); else setPaginaPropria(p) }\r\n  const visiveis = peloServidor ? filtradas : filtradas.slice((pagina - 1) * pageSize, pagina * pageSize)\r\n\r\n  // Ao mudar de página, a lista volta ao topo.\r\n  const [caixa, setCaixa] = useState<HTMLDivElement | null>(null)\r\n  useEffect(() => { caixa?.scrollTo?.({ top: 0 }) }, [pagina, caixa])\r\n\r\n  const marcadas = selectedKeys ?? new Set<string>()\r\n  const marcaveis = !!onSelectionChange\r\n  const nMarcadasVisiveis = visiveis.filter(it => marcadas.has(itemKey(it))).length\r\n  const todasMarcadas = visiveis.length > 0 && nMarcadasVisiveis === visiveis.length\r\n  const marcar = (key: string, sim: boolean) => {\r\n    const n = new Set(marcadas)\r\n    if (sim) n.add(key); else n.delete(key)\r\n    onSelectionChange?.(n)\r\n  }\r\n  const marcarVisiveis = () => {\r\n    const n = new Set(marcadas)\r\n    for (const it of visiveis) { if (todasMarcadas) n.delete(itemKey(it)); else n.add(itemKey(it)) }\r\n    onSelectionChange?.(n)\r\n  }\r\n\r\n  const aCarregar = loading && visiveis.length === 0\r\n  const esqueleto = <span className=\"inline-block h-2 w-20 rounded-sm bg-slate-200 animate-pulse motion-reduce:animate-none\" aria-hidden />\r\n\r\n  return (\r\n    <div className={`v1-reset flex h-full min-h-0 flex-col border border-slate-200 bg-white text-control text-slate-800 ${className}`}>\r\n      <div className=\"space-y-2 border-b border-slate-100 px-3 py-2.5\">\r\n        {(onBack || filters) && (\r\n          <div className=\"flex items-center gap-1.5\">\r\n            {onBack && (\r\n              <button type=\"button\" onClick={onBack} aria-label={L.back} title={L.back}\r\n                className=\"-ml-1 flex h-7 w-6 shrink-0 items-center justify-center rounded text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700\">\r\n                <ChevronLeftIcon size={14} />\r\n              </button>\r\n            )}\r\n            <div className=\"flex min-w-0 flex-1 items-center gap-1.5\">{filters}</div>\r\n          </div>\r\n        )}\r\n        <div className=\"relative\">\r\n          <SearchIcon size={13} className=\"pointer-events-none absolute top-1/2 left-2.5 -translate-y-1/2 text-slate-400\" />\r\n          <input\r\n            type=\"search\"\r\n            value={pesquisa}\r\n            onChange={e => pesquisar(e.target.value)}\r\n            onPaste={colar}\r\n            placeholder={L.searchPlaceholder}\r\n            aria-label={L.search}\r\n            className=\"block h-control w-full min-w-0 rounded-lg border border-border bg-card pr-2.5 pl-8 text-control text-foreground outline-none transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/70 focus:border-primary/40 focus:ring-3 focus:ring-primary/10\"\r\n          />\r\n        </div>\r\n      </div>\r\n\r\n      {/* Fora da área que rola: é a cabeça da lista, e é a descer a lista que\r\n          se decide marcá-la toda. */}\r\n      {marcaveis && visiveis.length > 0 && (\r\n        <div className=\"flex items-center gap-2.5 border-b border-slate-100 bg-slate-50 px-3 py-1.5 text-caption text-slate-500\">\r\n          <ListCheckbox\r\n            checked={todasMarcadas}\r\n            indeterminate={nMarcadasVisiveis > 0}\r\n            onChange={marcarVisiveis}\r\n            label={L.selectVisible(visiveis.length)}\r\n          />\r\n          <span aria-hidden>{nMarcadasVisiveis > 0 ? L.selectedCount(nMarcadasVisiveis, visiveis.length) : L.selectVisible(visiveis.length)}</span>\r\n          {marcadas.size > 0 && (\r\n            <button type=\"button\" onClick={() => onSelectionChange?.(new Set())}\r\n              className=\"ml-auto font-medium text-proef-blue hover:underline\">\r\n              {L.clearSelection}\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n\r\n      <div className=\"relative flex min-h-0 flex-1 flex-col\">\r\n        <div ref={setCaixa} className=\"min-h-0 flex-1 overflow-y-auto scrollbar-none\">\r\n          {aCarregar ? (\r\n            // A forma das linhas já diz que vem ali a lista. Mais do que cabem,\r\n            // cortadas pela caixa: chega ao fundo em qualquer altura.\r\n            <div role=\"status\" aria-busy=\"true\" className=\"h-full overflow-hidden\">\r\n              <span className=\"sr-only\">{L.loading}</span>\r\n              {['w-11/12', 'w-3/4', 'w-5/6', 'w-2/3', 'w-4/5', 'w-7/12'].flatMap(l => [l, l, l, l]).map((largura, i) => (\r\n                <div key={i} className=\"flex items-start gap-2.5 border-b border-slate-100 px-3 py-2.5 animate-pulse motion-reduce:animate-none\">\r\n                  {marcaveis && <div className=\"mt-0.5 h-4 w-4 shrink-0 border border-slate-200 bg-slate-100\" />}\r\n                  <div className=\"min-w-0 flex-1 space-y-1.5\">\r\n                    <div className=\"h-3 w-12 bg-slate-200\" />\r\n                    <div className=\"h-1.5 w-16 bg-slate-100\" />\r\n                    <div className={`h-2.5 ${largura} bg-slate-200`} />\r\n                    <div className=\"h-1.5 w-1/3 bg-slate-100\" />\r\n                  </div>\r\n                </div>\r\n              ))}\r\n            </div>\r\n          ) : visiveis.length === 0 ? (\r\n            <p className=\"m-0 px-3 py-6 text-center text-caption text-slate-400\">{L.empty}</p>\r\n          ) : (\r\n            <ul className=\"m-0 list-none p-0\">\r\n              {visiveis.map(it => {\r\n                const key = itemKey(it)\r\n                return (\r\n                  <ListItem\r\n                    key={key}\r\n                    {...itemContent(it)}\r\n                    active={activeKey === key}\r\n                    onClick={onItemClick ? () => onItemClick(it) : undefined}\r\n                    checked={marcadas.has(key)}\r\n                    onCheckedChange={marcaveis ? sim => marcar(key, sim) : undefined}\r\n                    checkboxLabel={L.checkItem(key)}\r\n                  />\r\n                )\r\n              })}\r\n            </ul>\r\n          )}\r\n        </div>\r\n        <OverlayScrollbar alvo={caixa} borda={0} />\r\n      </div>\r\n\r\n      {/* Sempre à vista e com a mesma altura, carregada ou não: aparecer do\r\n          nada fazia saltar o fundo do painel. */}\r\n      <div className=\"flex h-11 shrink-0 items-center justify-between gap-2 border-t border-slate-100 bg-slate-50 px-3 text-caption text-slate-500\">\r\n        <span className=\"whitespace-nowrap\">\r\n          {aCarregar ? esqueleto : <><span className=\"font-semibold text-slate-800 tabular-nums\">{totalLinhas.toLocaleString('pt-PT')}</span> {L.itemsNoun(totalLinhas)}</>}\r\n        </span>\r\n        {!aCarregar && totalPaginas > 1 && (\r\n          <nav aria-label={L.pagination} className=\"flex items-center gap-0.5\">\r\n            <span className=\"sr-only\">{L.page} {pagina} / {totalPaginas}</span>\r\n            {numerosPagina(pagina, totalPaginas).map((p, i) => p === '…' ? (\r\n              <span key={`r${i}`} aria-hidden className=\"flex h-7 min-w-4 items-center justify-center text-slate-300\">…</span>\r\n            ) : (\r\n              <button\r\n                key={p}\r\n                type=\"button\"\r\n                onClick={() => irPara(p)}\r\n                aria-current={p === pagina ? 'page' : undefined}\r\n                className={`h-7 min-w-7 rounded-md px-1.5 font-semibold tabular-nums transition-colors ${\r\n                  p === pagina ? 'cursor-default bg-primary text-white' : 'text-slate-500 hover:bg-slate-200/70 hover:text-slate-800'}`}\r\n              >\r\n                {p.toLocaleString('pt-PT')}\r\n              </button>\r\n            ))}\r\n          </nav>\r\n        )}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/v1/components/lists/ListFinder/labels.js

@@ -0,0 +1,18 @@
+const DEFAULT_LIST_FINDER_LABELS = {
+  searchPlaceholder: "Pesquisar",
+  search: "Pesquisar",
+  back: "Fechar a lista",
+  itemsNoun: (count) => count === 1 ? "item" : "itens",
+  selectVisible: (count) => `Selecionar ${count === 1 ? "o" : `os ${count}`} à vista`,
+  selectedCount: (selected, visible) => `${selected} de ${visible} marcados`,
+  clearSelection: "Limpar",
+  checkItem: (key) => `Marcar ${key}`,
+  empty: "Sem resultados",
+  loading: "A carregar",
+  pagination: "Páginas",
+  page: "Página"
+};
+export {
+  DEFAULT_LIST_FINDER_LABELS
+};
+//# sourceMappingURL=labels.js.map

package/dist/esm/v1/components/lists/ListFinder/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","sources":["../../../../../../src/v1/components/lists/ListFinder/labels.ts"],"sourcesContent":["/** Os textos do ListFinder. A app troca os que quiser pela prop `labels`. */\r\nexport interface ListFinderLabels {\r\n  /** Dentro da caixa de pesquisa. */\r\n  searchPlaceholder: string\r\n  /** O nome da caixa de pesquisa, para leitores de ecrã. */\r\n  search: string\r\n  /** O botão de voltar (só com `onBack`). */\r\n  back: string\r\n  /** O nome do que a lista tem, no singular ou plural (ex: \"1 ordem\", \"20 ordens\"). */\r\n  itemsNoun: (count: number) => string\r\n  /** A caixa de cima, sem nenhuma marcada. */\r\n  selectVisible: (count: number) => string\r\n  /** A caixa de cima, com algumas marcadas. */\r\n  selectedCount: (selected: number, visible: number) => string\r\n  clearSelection: string\r\n  /** A caixa de marcar de cada linha (ex: \"Marcar P-020000\"). */\r\n  checkItem: (key: string) => string\r\n  /** Sem nada para mostrar. */\r\n  empty: string\r\n  loading: string\r\n  pagination: string\r\n  page: string\r\n}\r\n\r\nexport const DEFAULT_LIST_FINDER_LABELS: ListFinderLabels = {\r\n  searchPlaceholder: 'Pesquisar',\r\n  search: 'Pesquisar',\r\n  back: 'Fechar a lista',\r\n  itemsNoun: (count) => (count === 1 ? 'item' : 'itens'),\r\n  selectVisible: (count) => `Selecionar ${count === 1 ? 'o' : `os ${count}`} à vista`,\r\n  selectedCount: (selected, visible) => `${selected} de ${visible} marcados`,\r\n  clearSelection: 'Limpar',\r\n  checkItem: (key) => `Marcar ${key}`,\r\n  empty: 'Sem resultados',\r\n  loading: 'A carregar',\r\n  pagination: 'Páginas',\r\n  page: 'Página',\r\n}\r\n"],"names":[],"mappings":"AAwBO,MAAM,6BAA+C;AAAA,EAC1D,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,WAAW,CAAC,UAAW,UAAU,IAAI,SAAS;AAAA,EAC9C,eAAe,CAAC,UAAU,cAAc,UAAU,IAAI,MAAM,MAAM,KAAK,EAAE;AAAA,EACzE,eAAe,CAAC,UAAU,YAAY,GAAG,QAAQ,OAAO,OAAO;AAAA,EAC/D,gBAAgB;AAAA,EAChB,WAAW,CAAC,QAAQ,UAAU,GAAG;AAAA,EACjC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AACR;"}

package/dist/esm/v1/components/tables/PaginatedTable/PaginatedTable.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { TableBase } from "../Table/Table.js";
+function PaginatedTable({
+  total,
+  page,
+  onPageChange,
+  pageSizeOptions,
+  onPageSizeChange,
+  pageSize,
+  data,
+  allData,
+  alwaysClient,
+  fillHeight = true,
+  overlayScrollbars = true,
+  horizontalScrollbarBelow = true,
+  skeleton = true,
+  fadeRight = true,
+  ...resto
+}) {
+  const [tamanhoProprio, setTamanhoProprio] = useState(pageSize ?? pageSizeOptions?.[0] ?? 50);
+  const tamanho = onPageSizeChange ? pageSize ?? pageSizeOptions?.[0] ?? 50 : tamanhoProprio;
+  const peloServidor = !!onPageChange && page !== void 0;
+  return /* @__PURE__ */ jsx(
+    TableBase,
+    {
+      ...resto,
+      data,
+      allData: peloServidor ? allData : allData ?? data,
+      alwaysClient: peloServidor ? alwaysClient : true,
+      pageSize: tamanho,
+      fillHeight,
+      overlayScrollbars,
+      horizontalScrollbarBelow,
+      skeleton,
+      fadeRight,
+      paginacaoNoTopo: {
+        total,
+        page,
+        onPageChange,
+        pageSizeOptions,
+        onPageSizeChange: onPageSizeChange ?? (pageSizeOptions ? setTamanhoProprio : void 0)
+      }
+    }
+  );
+}
+export {
+  PaginatedTable as default
+};
+//# sourceMappingURL=PaginatedTable.js.map

package/dist/esm/v1/components/tables/PaginatedTable/PaginatedTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginatedTable.js","sources":["../../../../../../src/v1/components/tables/PaginatedTable/PaginatedTable.tsx"],"sourcesContent":["import React, { useState } from 'react'\r\nimport { TableBase, type TableProps } from '../Table/Table'\r\n\r\nexport interface PaginatedTableProps<T> extends TableProps<T> {\r\n  /**\r\n   * Total de linhas no servidor, quando é ele que pagina (`page` e\r\n   * `onPageChange`). É o número da contagem e dá o número de páginas.\r\n   */\r\n  total?: number\r\n  /**\r\n   * Página atual (a contar de 1), quando é o servidor que pagina: a app pede a\r\n   * página e dá-a em `data`. Sem isto, a tabela pagina-se a si mesma com todas\r\n   * as linhas de `data`.\r\n   */\r\n  page?: number\r\n  onPageChange?: (page: number) => void\r\n  /** Tamanhos de página à escolha (ex: `[60, 120, 250, 500]`). Sem isto não há escolha. */\r\n  pageSizeOptions?: number[]\r\n  /**\r\n   * A pessoa escolheu outro tamanho de página. Quando é o servidor que pagina,\r\n   * a app volta à página 1 (ficar na 7.ª com 500 por página caía fora da lista).\r\n   * Sem isto, a tabela guarda a escolha ela própria.\r\n   */\r\n  onPageSizeChange?: (pageSize: number) => void\r\n}\r\n\r\n/**\r\n * A `Table` para listas de página inteira: a paginação fica EM CIMA, numa\r\n * barra com a contagem de linhas, o tamanho de página e os números de página,\r\n * em vez de no fundo.\r\n *\r\n * Funciona de duas maneiras:\r\n *  - **O servidor pagina** (`page`, `onPageChange`, `total`): `data` é a\r\n *    página atual. Com filtros, ordenação ou agrupamento no cabeçalho, a tabela\r\n *    passa a paginar o conjunto completo (`allData`) e a barra mostra as\r\n *    páginas dela.\r\n *  - **Todas as linhas de uma vez** (só `data`): a tabela pagina-se a si mesma.\r\n *\r\n * Por omissão ocupa a altura do pai (`fillHeight`), com as barras de scroll\r\n * por cima das linhas, linhas-esqueleto a carregar e a aresta direita\r\n * esbatida. Qualquer uma pode ser desligada.\r\n */\r\nexport default function PaginatedTable<T>({\r\n  total,\r\n  page,\r\n  onPageChange,\r\n  pageSizeOptions,\r\n  onPageSizeChange,\r\n  pageSize,\r\n  data,\r\n  allData,\r\n  alwaysClient,\r\n  fillHeight = true,\r\n  overlayScrollbars = true,\r\n  horizontalScrollbarBelow = true,\r\n  skeleton = true,\r\n  fadeRight = true,\r\n  ...resto\r\n}: PaginatedTableProps<T>) {\r\n  const [tamanhoProprio, setTamanhoProprio] = useState(pageSize ?? pageSizeOptions?.[0] ?? 50)\r\n  const tamanho = onPageSizeChange ? (pageSize ?? pageSizeOptions?.[0] ?? 50) : tamanhoProprio\r\n  // Sem paginação do servidor, todas as linhas são o conjunto completo e a tabela pagina-as.\r\n  const peloServidor = !!onPageChange && page !== undefined\r\n  return (\r\n    <TableBase\r\n      {...resto}\r\n      data={data}\r\n      allData={peloServidor ? allData : (allData ?? data)}\r\n      alwaysClient={peloServidor ? alwaysClient : true}\r\n      pageSize={tamanho}\r\n      fillHeight={fillHeight}\r\n      overlayScrollbars={overlayScrollbars}\r\n      horizontalScrollbarBelow={horizontalScrollbarBelow}\r\n      skeleton={skeleton}\r\n      fadeRight={fadeRight}\r\n      paginacaoNoTopo={{\r\n        total,\r\n        page,\r\n        onPageChange,\r\n        pageSizeOptions,\r\n        onPageSizeChange: onPageSizeChange ?? (pageSizeOptions ? setTamanhoProprio : undefined),\r\n      }}\r\n    />\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA0CA,SAAwB,eAAkB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,2BAA2B;AAAA,EAC3B,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,GAA2B;AACzB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,YAAY,kBAAkB,CAAC,KAAK,EAAE;AAC3F,QAAM,UAAU,mBAAoB,YAAY,kBAAkB,CAAC,KAAK,KAAM;AAE9E,QAAM,eAAe,CAAC,CAAC,gBAAgB,SAAS;AAChD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,SAAS,eAAe,UAAW,WAAW;AAAA,MAC9C,cAAc,eAAe,eAAe;AAAA,MAC5C,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBAAkB,qBAAqB,kBAAkB,oBAAoB;AAAA,MAAA;AAAA,IAC/E;AAAA,EAAA;AAGN;"}

package/dist/esm/v1/components/tables/Table/ColumnFilter.js

@@ -0,0 +1,292 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useId, useState, useMemo, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { SlidersIcon, ListIcon, ChevronUpIcon, ChevronDownIcon, CheckIcon } from "../../../foundations/icons/icons.js";
+const ALTURA = 420;
+const LARGURA = 320;
+function ColumnFilter({
+  labels: L,
+  label,
+  canSort,
+  tipo,
+  valores,
+  seleccionados,
+  intervalo,
+  numero,
+  ordenadaPor,
+  aCarregar,
+  ancora,
+  onOrdenar,
+  onAplicar,
+  onAplicarDatas,
+  onAplicarNumeros,
+  onLimpar,
+  onFechar
+}) {
+  const caixa = useRef(null);
+  const idMin = useId();
+  const [busca, setBusca] = useState("");
+  const [rascunho, setRascunho] = useState(() => new Set(seleccionados));
+  const [de, setDe] = useState(intervalo.from ?? "");
+  const [ate, setAte] = useState(intervalo.to ?? "");
+  const [min, setMin] = useState(numero?.min ?? "");
+  const [max, setMax] = useState(numero?.max ?? "");
+  const [modoLista, setModoLista] = useState(tipo === "numero" && !numero?.min && !numero?.max);
+  const lista = tipo === "texto" || tipo === "numero" && modoLista;
+  const visiveis = useMemo(() => {
+    const achados = valores.filter((v) => v.toLowerCase().includes(busca.toLowerCase()));
+    if (tipo !== "numero") return achados;
+    return [...achados].sort((a, b) => {
+      const na = Number(a), nb = Number(b);
+      const va = a !== "—" && Number.isFinite(na), vb = b !== "—" && Number.isFinite(nb);
+      if (va && vb) return na - nb;
+      return va ? -1 : vb ? 1 : a.localeCompare(b);
+    });
+  }, [valores, busca, tipo]);
+  const todosVisiveis = visiveis.length > 0 && visiveis.every((v) => rascunho.has(v));
+  const algunsVisiveis = visiveis.some((v) => rascunho.has(v)) && !todosVisiveis;
+  const alternarTodos = () => setRascunho((prev) => {
+    const n = new Set(prev);
+    if (todosVisiveis) for (const v of visiveis) n.delete(v);
+    else for (const v of visiveis) n.add(v);
+    return n;
+  });
+  const alternar = (v) => setRascunho((prev) => {
+    const n = new Set(prev);
+    if (n.has(v)) n.delete(v);
+    else n.add(v);
+    return n;
+  });
+  const mesmoConjunto = (a, b) => a.size === b.size && [...a].every((v) => b.has(v));
+  const sujo = tipo === "data" ? de !== (intervalo.from ?? "") || ate !== (intervalo.to ?? "") : tipo === "numero" && !modoLista ? min !== (numero?.min ?? "") || max !== (numero?.max ?? "") : !mesmoConjunto(rascunho, seleccionados);
+  const temFiltro = seleccionados.size > 0 || !!intervalo.from || !!intervalo.to || !!numero?.min || !!numero?.max;
+  useEffect(() => {
+    const fora = (e) => {
+      if (caixa.current && !caixa.current.contains(e.target)) onFechar();
+    };
+    const tecla = (e) => {
+      if (e.key === "Escape") onFechar();
+    };
+    const aoRolar = (e) => {
+      if (caixa.current && e.target instanceof Node && caixa.current.contains(e.target)) return;
+      onFechar();
+    };
+    document.addEventListener("mousedown", fora);
+    document.addEventListener("keydown", tecla);
+    window.addEventListener("scroll", aoRolar, true);
+    window.addEventListener("resize", onFechar);
+    return () => {
+      document.removeEventListener("mousedown", fora);
+      document.removeEventListener("keydown", tecla);
+      window.removeEventListener("scroll", aoRolar, true);
+      window.removeEventListener("resize", onFechar);
+    };
+  }, [onFechar]);
+  const botaoModo = tipo === "numero" && /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: (e) => {
+        e.preventDefault();
+        setModoLista((m) => !m);
+      },
+      title: modoLista ? L.showRange : L.showList,
+      className: "inline-flex items-center gap-1 text-[9px] font-black uppercase tracking-widest text-slate-400 hover:text-proef-blue flex-shrink-0 whitespace-nowrap",
+      children: [
+        modoLista ? /* @__PURE__ */ jsx(SlidersIcon, { size: 10 }) : /* @__PURE__ */ jsx(ListIcon, { size: 10 }),
+        modoLista ? L.showRange : L.showList
+      ]
+    }
+  );
+  const paraCima = window.innerHeight - ancora.bottom < ALTURA && ancora.top > ALTURA;
+  return createPortal(
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: caixa,
+        style: {
+          position: "fixed",
+          left: Math.max(4, Math.min(ancora.left, window.innerWidth - LARGURA - 4)),
+          ...paraCima ? { bottom: window.innerHeight - ancora.top + 2 } : { top: ancora.bottom + 2 },
+          width: LARGURA,
+          maxHeight: ALTURA
+        },
+        className: "v1-reset z-[250] flex flex-col bg-white border border-slate-200 shadow-lg",
+        children: [
+          label && /* @__PURE__ */ jsx("div", { className: "px-3 pt-2.5 pb-2 border-b border-slate-100 flex-shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-proef-blue", children: label }) }),
+          aCarregar && /* @__PURE__ */ jsxs("div", { className: "px-3 py-1.5 bg-amber-50 border-b border-amber-100 flex items-center gap-1.5 text-micro text-amber-700 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "inline-block h-2.5 w-2.5 animate-spin rounded-full border-2 border-current border-t-transparent " }),
+            L.loadingOptions
+          ] }),
+          canSort && onOrdenar && /* @__PURE__ */ jsxs("div", { className: "border-b border-slate-100 p-1.5 space-y-0.5 flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onOrdenar("asc"),
+                className: `w-full flex items-center gap-2 px-2.5 py-1.5 text-caption font-semibold text-left hover:bg-slate-50 transition-colors ${ordenadaPor === "asc" ? "text-proef-blue bg-slate-50" : "text-slate-600"}`,
+                children: [
+                  /* @__PURE__ */ jsx(ChevronUpIcon, { size: 11 }),
+                  " ",
+                  tipo === "data" ? L.sortDateAsc : tipo === "numero" ? L.sortNumAsc : L.sortAsc
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => onOrdenar("desc"),
+                className: `w-full flex items-center gap-2 px-2.5 py-1.5 text-caption font-semibold text-left hover:bg-slate-50 transition-colors ${ordenadaPor === "desc" ? "text-proef-blue bg-slate-50" : "text-slate-600"}`,
+                children: [
+                  /* @__PURE__ */ jsx(ChevronDownIcon, { size: 11 }),
+                  " ",
+                  tipo === "data" ? L.sortDateDesc : tipo === "numero" ? L.sortNumDesc : L.sortDesc
+                ]
+              }
+            )
+          ] }),
+          tipo === "data" ? /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2", children: [
+            /* @__PURE__ */ jsxs("label", { className: "block", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-slate-400", children: L.dateFrom }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "date",
+                  value: de,
+                  onChange: (e) => setDe(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") onAplicarDatas?.(de, ate);
+                  },
+                  className: "w-full mt-0.5 bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("label", { className: "block", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-slate-400", children: L.dateTo }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "date",
+                  value: ate,
+                  onChange: (e) => setAte(e.target.value),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter") onAplicarDatas?.(de, ate);
+                  },
+                  className: "w-full mt-0.5 bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue"
+                }
+              )
+            ] })
+          ] }) : !lista ? (
+            /* Mín/Máx em vez da lista: numa coluna de dinheiro ou de contagem há
+               tantos valores distintos quantas as linhas, e ninguém procura "10.04".
+               Vazio de um dos lados vale "sem limite desse lado". */
+            /* @__PURE__ */ jsxs("div", { className: "p-3 space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: idMin, className: "text-[9px] font-black uppercase tracking-widest text-slate-400", children: L.min }),
+                  botaoModo
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    id: idMin,
+                    type: "number",
+                    value: min,
+                    onChange: (e) => setMin(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") onAplicarNumeros?.(min, max);
+                    },
+                    className: "w-full mt-0.5 bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("label", { className: "block", children: [
+                /* @__PURE__ */ jsx("span", { className: "text-[9px] font-black uppercase tracking-widest text-slate-400", children: L.max }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "number",
+                    value: max,
+                    onChange: (e) => setMax(e.target.value),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") onAplicarNumeros?.(min, max);
+                    },
+                    className: "w-full mt-0.5 bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue"
+                  }
+                )
+              ] })
+            ] })
+          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "p-1.5 flex-shrink-0 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  autoFocus: true,
+                  type: "text",
+                  value: busca,
+                  onChange: (e) => setBusca(e.target.value),
+                  placeholder: L.search,
+                  className: "flex-1 min-w-0 bg-slate-50 border border-slate-100 px-2.5 py-1.5 text-xs outline-none focus:border-proef-blue"
+                }
+              ),
+              botaoModo && /* @__PURE__ */ jsx("span", { className: "pr-1.5", children: botaoModo })
+            ] }),
+            visiveis.length > 0 && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: alternarTodos,
+                className: "flex items-center gap-2 px-3 py-1.5 border-y border-slate-100 hover:bg-slate-50 text-left flex-shrink-0",
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: `w-3.5 h-3.5 flex items-center justify-center border flex-shrink-0 transition-colors ${todosVisiveis ? "bg-primary border-primary" : algunsVisiveis ? "bg-primary/30 border-primary" : "border-slate-300"}`, children: todosVisiveis && /* @__PURE__ */ jsx(CheckIcon, { size: 9, strokeWidth: 3, className: "text-white" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-caption font-semibold text-slate-600", children: busca ? L.selectAllFound(visiveis.length) : L.selectAll })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-1.5 space-y-0.5 min-h-0", children: visiveis.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-caption text-slate-400 text-center py-3", children: L.noResults }) : visiveis.map((v) => {
+              const escolhido = rascunho.has(v);
+              return /* @__PURE__ */ jsxs("button", { onClick: () => alternar(v), className: "w-full flex items-center gap-2 px-2 py-1.5 hover:bg-slate-50 text-left", children: [
+                /* @__PURE__ */ jsx("div", { className: `w-3.5 h-3.5 flex items-center justify-center border flex-shrink-0 transition-colors ${escolhido ? "bg-primary border-primary" : "border-slate-300"}`, children: escolhido && /* @__PURE__ */ jsx(CheckIcon, { size: 9, strokeWidth: 3, className: "text-white" }) }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-700 whitespace-normal break-words leading-snug", children: v })
+              ] }, v);
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 p-1.5 border-t border-slate-100 flex-shrink-0 bg-white", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => {
+                  if (tipo === "data") onAplicarDatas?.(de, ate);
+                  else if (tipo === "numero" && !modoLista) onAplicarNumeros?.(min, max);
+                  else onAplicar(rascunho);
+                },
+                disabled: !sujo,
+                className: "flex-1 text-micro font-black uppercase tracking-wider text-white bg-primary hover:bg-primary/90 py-1.5 disabled:opacity-30",
+                children: L.apply
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onFechar,
+                className: "text-micro font-black uppercase tracking-wider text-slate-500 hover:text-slate-700 px-2 py-1.5",
+                children: L.cancel
+              }
+            ),
+            temFiltro && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onLimpar,
+                className: "text-micro font-black uppercase tracking-wider text-red-400 hover:text-red-500 px-2 py-1.5",
+                children: L.clearFilter
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    document.body
+  );
+}
+export {
+  ColumnFilter
+};
+//# sourceMappingURL=ColumnFilter.js.map