@proef/common-ui 0.0.0-stage → 2.2.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/v1/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](?path=/docs/v1-components-tables-table--docs) 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