@proef/common-ui 0.0.0-stage → 2.2.1

package/dist/types/v1/components/layout/SideNav/SideNav.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+export type SideNavTheme = 'light' | 'dark' | 'system';
+export interface SideNavBadge {
+    count: number;
+    /** `attention` (amarelo, por omissão): coisas à espera da pessoa. `alert` (laranja): à espera de outro circuito (ex: CAB). */
+    tone?: 'attention' | 'alert';
+    /** O que o número conta, para o tooltip e leitores de ecrã (ex: "Aprovações pendentes"). */
+    label?: string;
+}
+export interface SideNavItem {
+    /** Rota da app, ou URL completo com `external`. */
+    to: string;
+    label: string;
+    /** Componente de ícone que aceita `size` e `className` (ex: um ícone do lucide-react). */
+    icon: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Chave do grupo. Os itens do mesmo grupo aparecem juntos, por baixo do título do grupo. */
+    group?: string;
+    /** Só fica ativo na rota exata (como o `end` do NavLink). */
+    end?: boolean;
+    /** Abre num separador novo, fora da app. */
+    external?: boolean;
+    /** Contadores ao lado do texto. Os que têm `count` 0 não aparecem. */
+    badges?: SideNavBadge[];
+}
+export interface SideNavLabels {
+    closeMenu: string;
+    expandMenu: string;
+    collapseMenu: string;
+    /** Antes do nome do grupo, no botão que o abre/fecha (ex: "Abrir Recursos"). */
+    openGroup: string;
+    closeGroup: string;
+    theme: string;
+    light: string;
+    dark: string;
+    system: string;
+    language: string;
+    logout: string;
+    deployedAt: string;
+}
+export declare const SIDENAV_LABELS: SideNavLabels;
+export interface SideNavProps {
+    menu: SideNavItem[];
+    /** Título de cada grupo do menu, pela chave (`group`). Sem título, aparece a chave. */
+    groupLabels?: Record<string, string>;
+    /** Por baixo do logótipo (ex: "IT Portal"). */
+    appTitle?: string;
+    /** Foto ou iniciais da pessoa, no topo do menu. */
+    avatar?: React.ReactNode;
+    /** Sem isto, não há botão de terminar sessão. */
+    onLogout?: () => void;
+    /** Escolha de idioma no rodapé. Só aparece com `languages` e `onLanguageChange`. */
+    languages?: {
+        code: string;
+        label: string;
+    }[];
+    currentLanguage?: string;
+    onLanguageChange?: (code: string) => void;
+    /**
+     * Escolha de tema no rodapé. Só aparece com `onThemeChange`. O menu só
+     * mostra a escolha: pôr a classe `.dark` no `<html>` é da app.
+     */
+    theme?: SideNavTheme;
+    onThemeChange?: (theme: SideNavTheme) => void;
+    /** Quando foi feito o build, no fundo do menu. A app decide a quem o mostra (ex: só administradores). */
+    deployedAt?: string | number | Date;
+    /** Conteúdo extra no rodapé, por cima do tema (ex: um filtro global). Recebe se o menu está expandido. */
+    footer?: (expanded: boolean) => React.ReactNode;
+    labels?: Partial<SideNavLabels>;
+    /** Aberto (256px) ou fechado (só ícones; em ecrãs pequenos, escondido). A app guarda este estado. */
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}
+/** Abaixo desta largura o menu é uma gaveta por cima da página; acima ocupa espaço (aberto ou só ícones). */
+export declare const DRAWER_MAX = 1024;
+export declare const isDrawer: () => boolean;
+/**
+ * Menu lateral navy da app, fixo à esquerda. Normalmente usa-se através do
+ * `AppShell`, que também trata da página ao lado.
+ *
+ * - **Ecrãs grandes** (≥ 1024px): aberto ocupa 256px; fechado fica só com os
+ *   ícones (80px) e abre por cima da página ao passar o rato.
+ * - **Ecrãs pequenos**: escondido quando fechado; aberto fica por cima da
+ *   página e fecha ao escolher uma página.
+ * - **Grupos**: abertos por omissão, fecham com um clique no título. Só com os
+ *   ícones, fica aberto apenas o grupo da página atual.
+ *
+ * Precisa de estar dentro de um Router do react-router.
+ */
+export default function SideNav({ menu, groupLabels, appTitle, avatar, onLogout, languages, currentLanguage, onLanguageChange, theme, onThemeChange, deployedAt, footer, labels: labelsProp, open, onOpenChange, }: SideNavProps): React.JSX.Element;

package/dist/types/v1/components/layout/navTrail.d.ts

@@ -0,0 +1,15 @@
+import type { SideNavItem } from './SideNav/SideNav';
+/** Onde a página atual está no menu: o grupo (se tiver) e o nome da entrada. Uso interno. */
+export interface NavTrail {
+    group?: string;
+    page: string;
+}
+export declare const NavTrailContext: import("react").Context<NavTrail | null>;
+/** O lugar da página atual no menu do `AppShell`; `null` fora de um `AppShell` ou fora do menu. */
+export declare const useNavTrail: () => NavTrail | null;
+/**
+ * A entrada do menu da rota atual: a de caminho mais comprido que é o início da
+ * rota (ex: `/equipamentos/rececao` antes de `/equipamentos`). Ligações
+ * externas não contam.
+ */
+export declare function findNavTrail(menu: SideNavItem[], groupLabels: Record<string, string>, pathname: string): NavTrail | null;

package/dist/types/v1/components/lists/ListFinder/ListFinder.d.ts

@@ -0,0 +1,86 @@
+import React from 'react';
+import { type ListItemContent } from '../../../primitives/lists/ListItem/ListItem';
+import { type ListFinderLabels } from './labels';
+export interface ListFinderProps<T> {
+    /** As linhas: todas, ou só a página atual quando o servidor pagina (com `total`). */
+    items: T[];
+    /** Uma chave única por linha (ex: o id). */
+    itemKey: (item: T) => string;
+    /** O que cada linha mostra: as partes do [ListItem](?path=/docs/v1-primitives-lists-listitem--docs). */
+    itemContent: (item: T) => ListItemContent;
+    /** A linha aberta (fica realçada). */
+    activeKey?: string | null;
+    /** Ao clicar numa linha: normalmente, abri-la ao lado. */
+    onItemClick?: (item: T) => void;
+    /** As marcadas. Só há caixas de marcar com `onSelectionChange`. */
+    selectedKeys?: ReadonlySet<string>;
+    onSelectionChange?: (keys: Set<string>) => void;
+    /** Filtros ao lado do voltar, por cima da pesquisa (ex: um ou dois selects, no traço fino da pesquisa). */
+    filters?: React.ReactNode;
+    /** Com isto aparece um ‹ à esquerda, para fechar ou esconder a lista. */
+    onBack?: () => void;
+    /** Com a caixa de pesquisa (o normal). Sem ela, a lista mostra tudo o que recebe. */
+    searchable?: boolean;
+    /** O texto da pesquisa. Sem ele, a pesquisa guarda o seu. */
+    search?: string;
+    onSearchChange?: (search: string) => void;
+    /**
+     * O texto onde a pesquisa procura, em cada linha. Com isto, a lista filtra-se
+     * sozinha (sem acentos nem maiúsculas); sem isto, quem filtra é a app (ex: o
+     * servidor, com `onSearchChange`). Uma lista colada (uma por linha, ou
+     * separadas por vírgulas) mostra as que tiverem qualquer uma delas.
+     */
+    searchText?: (item: T) => string;
+    /**
+     * Como se chega ao resto da lista:
+     * - `'pages'` (o normal): páginas numeradas no rodapé;
+     * - `'scroll'`: uma lista só, que vai mostrando mais `pageSize` linhas ao
+     *   chegar ao fundo. Com o servidor a paginar, `items` são as que já vieram e
+     *   pede-se o lote seguinte com `onLoadMore`.
+     */
+    mode?: 'pages' | 'scroll';
+    /** Com `mode="scroll"` e o servidor a paginar: buscar o lote seguinte (junta-o a `items`). */
+    onLoadMore?: () => void;
+    /** O servidor pagina: quantas linhas há lá ao todo. `items` é só a página atual (ou, a rolar, as que já vieram). */
+    total?: number;
+    /** A página atual (1, 2, ...), quando o servidor pagina. */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Quantas linhas por página. Com o servidor a paginar, quantas ele manda. */
+    pageSize?: number;
+    /** A carregar: sem linhas ainda, mostra o esqueleto delas. A rolar, com linhas, é o lote seguinte a chegar. */
+    loading?: boolean;
+    labels?: Partial<ListFinderLabels>;
+    /** No rodapé, a seguir à contagem: algo pequeno da app (ex: um ícone de ajuda com as regras da lista). */
+    footerExtra?: React.ReactNode;
+    /** Com a moldura à volta (o normal). Sem ela, para ir dentro de um painel que já tem a sua. */
+    bordered?: boolean;
+    className?: string;
+}
+/**
+ * Parte o texto da pesquisa nos termos a procurar: vírgula, ponto e vírgula,
+ * tab e mudança de linha. O espaço só separa quando tudo o que lá está são
+ * números de 6 ou mais dígitos (uma coluna colada de uma folha de cálculo);
+ * fora disso "vila real" é uma coisa só, e não "vila" ou "real".
+ */
+export declare function termosDaPesquisa(texto: string): string[];
+/**
+ * Uma lista para encontrar e escolher: filtros e pesquisa em cima, as linhas
+ * ([ListItem](?path=/docs/v1-primitives-lists-listitem--docs)) a rolar no meio e
+ * as páginas (ou a contagem, a rolar) em baixo. Pensada para a coluna ao lado do que se abre (a lista à
+ * esquerda, o detalhe da linha escolhida à direita).
+ *
+ * Enche a altura do pai. O topo, a barra de "selecionar todos" e o rodapé
+ * ficam sempre no sítio: só as linhas rolam.
+ *
+ * - **Pesquisa**: com `searchText` filtra sozinha; sem ele, a app filtra
+ *   (`search`/`onSearchChange`).
+ * - **Páginas**: pagina sozinha (`pageSize`), ou é o servidor (`total`, `page`,
+ *   `onPageChange`).
+ * - **A rolar** (`mode="scroll"`): sem páginas, vai mostrando mais ao descer;
+ *   com o servidor, `items` são as que já vieram e `onLoadMore` pede mais.
+ * - **Realce**: o que se procurou realça-se no código e no título das linhas.
+ * - **Marcar vários**: com `onSelectionChange`. O "selecionar todos" só marca
+ *   as linhas à vista, nunca as que não se veem.
+ */
+export default function ListFinder<T>({ items, itemKey, itemContent, activeKey, onItemClick, selectedKeys, onSelectionChange, filters, onBack, searchable, search: pesquisaDeFora, onSearchChange, searchText, mode, onLoadMore, total, page, onPageChange, pageSize, loading, labels, footerExtra, bordered, className, }: ListFinderProps<T>): React.JSX.Element;

package/dist/types/v1/components/lists/ListFinder/labels.d.ts

@@ -0,0 +1,24 @@
+/** Os textos do ListFinder. A app troca os que quiser pela prop `labels`. */
+export interface ListFinderLabels {
+    /** Dentro da caixa de pesquisa. */
+    searchPlaceholder: string;
+    /** O nome da caixa de pesquisa, para leitores de ecrã. */
+    search: string;
+    /** O botão de voltar (só com `onBack`). */
+    back: string;
+    /** O nome do que a lista tem, no singular ou plural (ex: "1 ordem", "20 ordens"). */
+    itemsNoun: (count: number) => string;
+    /** A caixa de cima, sem nenhuma marcada. */
+    selectVisible: (count: number) => string;
+    /** A caixa de cima, com algumas marcadas. */
+    selectedCount: (selected: number, visible: number) => string;
+    clearSelection: string;
+    /** A caixa de marcar de cada linha (ex: "Marcar P-020000"). */
+    checkItem: (key: string) => string;
+    /** Sem nada para mostrar. */
+    empty: string;
+    loading: string;
+    pagination: string;
+    page: string;
+}
+export declare const DEFAULT_LIST_FINDER_LABELS: ListFinderLabels;

package/dist/types/v1/components/overlays/ConfirmDialog/ConfirmDialog.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+export interface ConfirmDialogProps {
+    open: boolean;
+    /** Curto: a ação ou a pergunta (ex: "Apagar despesa"). */
+    title: React.ReactNode;
+    /** A pergunta ou o que vai acontecer (ex: "Tem a certeza que pretende apagar esta despesa?"). */
+    message?: React.ReactNode;
+    /** Consequência que a pessoa não adivinha sozinha (ex: "Não se pode desfazer."). Em letra mais pequena. */
+    detail?: React.ReactNode;
+    /** `danger`: apaga ou não se pode desfazer. O botão fica vermelho e aparece o sinal de atenção. */
+    tone?: 'default' | 'danger';
+    /** Por omissão: "Confirmar". */
+    confirmLabel?: string;
+    /** Por omissão: "Cancelar". */
+    cancelLabel?: string;
+    /** Nome do botão ×, para leitores de ecrã. Por omissão: "Fechar". */
+    closeLabel?: string;
+    /** A confirmar (ex: à espera do servidor): o botão mostra a roda e a janela não fecha. */
+    loading?: boolean;
+    /** Uma segunda saída (ex: "Desativar" em vez de apagar). Não fecha a janela sozinha. */
+    secondaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    onConfirm: () => void;
+    /** Cancelar, ×, Esc ou clique fora. */
+    onCancel: () => void;
+}
+/**
+ * Pergunta de sim/não antes de uma ação (ex: apagar, enviar, fechar sem
+ * guardar). Substitui o `window.confirm` do browser, que mostra o endereço do
+ * servidor, não diz que registo é e só tem "OK".
+ *
+ * Com `tone="danger"` o foco começa em Cancelar: um Enter por engano não apaga
+ * nada. Nos outros casos começa em Confirmar.
+ *
+ * Para não ter de guardar o estado em cada ecrã, usar `useConfirm()` (com o
+ * `ConfirmProvider` à volta da app).
+ */
+export default function ConfirmDialog({ open, title, message, detail, tone, confirmLabel, cancelLabel, closeLabel, loading, secondaryAction, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+export type ConfirmOptions = Omit<ConfirmDialogProps, 'open' | 'onConfirm' | 'onCancel' | 'loading'>;
+export interface ConfirmProviderProps {
+    children: React.ReactNode;
+    /** Textos por omissão dos botões, para a app os traduzir. */
+    confirmLabel?: string;
+    cancelLabel?: string;
+    closeLabel?: string;
+}
+/**
+ * Dá o `useConfirm()` a toda a app. Monta-se uma vez, à volta da app.
+ */
+export declare function ConfirmProvider({ children, confirmLabel, cancelLabel, closeLabel }: ConfirmProviderProps): React.JSX.Element;
+/**
+ * Pergunta e espera pela resposta: `true` se confirmou, `false` se cancelou.
+ *
+ *   const confirm = useConfirm()
+ *   if (await confirm({ title: 'Apagar despesa', message: 'Tem a certeza?', tone: 'danger', confirmLabel: 'Apagar' })) apagar()
+ */
+export declare function useConfirm(): (options: ConfirmOptions) => Promise<boolean>;

package/dist/types/v1/components/overlays/Dialog/Dialog.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+/**
+ * O elemento da janela, para usar como destino de `createPortal` (ex: avisos,
+ * confirmações, sobreposições) quando o conteúdo deve ficar junto dela. Um
+ * portal para `document.body` também funciona, desde que fique por cima
+ * (`z-index` acima de 200). Fora de um Dialog devolve `null`.
+ *
+ * `createPortal(conteudo, useDialogContainer() ?? document.body)`
+ */
+export declare const useDialogContainer: () => HTMLElement | null;
+export interface DialogProps {
+    /** Aberta ou fechada. A app guarda este estado. */
+    open: boolean;
+    /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */
+    onClose: () => void;
+    /** Normalmente texto; aceita JSX (ex: um nome em negrito). */
+    title: React.ReactNode;
+    /** Linha por baixo do título (ex: nome · departamento). */
+    subtitle?: React.ReactNode;
+    /** Botões no rodapé, sempre visíveis (ex: Confirmar, Fechar). */
+    footer?: React.ReactNode;
+    /**
+     * Largura máxima: `sm` 480px, `md` 720px, `lg` 1000px, `xl` até 1600px (95% do ecrã, para janelas com
+     * mapa e tabela lado a lado). Nunca passa o ecrã.
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Altura: `auto` (por omissão) cresce com o conteúdo; `full` ocupa sempre a
+     * altura disponível (útil quando o conteúdo muda de tamanho e a janela não
+     * deve saltar). Em ambos, se o conteúdo não couber, o corpo faz scroll.
+     */
+    height?: 'auto' | 'full';
+    /** Fechar ao clicar fora da janela. Por omissão sim; num formulário longo pode valer a pena desligar. */
+    closeOnBackdrop?: boolean;
+    /** Nome do botão ×, para leitores de ecrã. Por omissão: "Fechar". */
+    closeLabel?: string;
+    /**
+     * Corpo sem margens e sem scroll: o conteúdo ocupa-o todo e gere o seu próprio
+     * scroll (ex: passos que deslizam, rodapé próprio de cada passo).
+     */
+    flush?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e
+ * rodapé com os botões ([Button](?path=/docs/v1-primitives-buttons-button--docs)).
+ *
+ * É a janela modal da V1 (substitui o `Modal` legacy).
+ *
+ * Fundo escurecido, Esc para fechar e, ao fechar, o foco volta ao sítio onde
+ * estava. Enquanto está aberta, o resto da página fica
+ * [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert):
+ * nem rato, nem teclado, nem leitores de ecrã lhe chegam. Os portais abertos
+ * depois dela (seletores, confirmações) continuam a responder.
+ *
+ * O conteúdo fica montado mesmo com a janela fechada, para poder carregar antes
+ * de ela abrir.
+ *
+ * O tamanho adapta-se ao ecrã só com CSS: nunca passa a largura nem a altura
+ * da janela do browser (com uma margem), e acompanha-a quando é
+ * redimensionada. O que não couber faz scroll no corpo; o cabeçalho e o
+ * rodapé ficam sempre visíveis.
+ *
+ * **Exemplo completo:** [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs).
+ */
+export default function Dialog({ open, onClose, title, subtitle, footer, size, height, closeOnBackdrop, closeLabel, flush, children, }: DialogProps): React.ReactPortal;

package/dist/types/v1/components/overlays/Tooltip/Tooltip.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export interface TooltipProps {
+    /** O que aparece no painel. Aceita JSX (ex: uma lista, um link com `interactive`). Vazio: sem tooltip. */
+    content?: React.ReactNode;
+    /** @deprecated Nome antigo de `content` (Tooltip legacy). */
+    tip?: React.ReactNode;
+    /** @deprecated Já não é preciso (o id é gerado); fica para não partir o código legacy. */
+    id?: string;
+    /** Cabeçalho opcional, separado por uma linha. */
+    title?: React.ReactNode;
+    /** O elemento que mostra o tooltip ao passar o rato ou com o foco. */
+    children: React.ReactNode;
+    /** O painel aceita o rato (para clicar em links lá dentro) e fecha com um pequeno atraso. */
+    interactive?: boolean;
+    /**
+     * O painel segue o rato, em vez de ficar por cima do elemento. Para elementos
+     * grandes ou células de grelhas (ex: um cronograma), onde o centro do
+     * elemento fica longe do rato.
+     */
+    followCursor?: boolean;
+    /** Desliga o tooltip (o elemento aparece na mesma). */
+    disabled?: boolean;
+    /** Classes do invólucro (um `<span>`), ex: `cursor-help` ou `block`. */
+    className?: string;
+}
+/**
+ * Tooltip com conteúdo rico à volta de um elemento: aparece por cima dele (ou
+ * por baixo, se não couber) ao passar o rato ou com o foco do teclado; Esc
+ * fecha. As quebras de linha (`\n`) do texto mantêm-se.
+ *
+ * Para texto simples, basta o atributo `data-tip` com o `TooltipLayer`
+ * montado na raiz, sem embrulhar nada. O painel é o mesmo.
+ */
+export default function Tooltip({ content: contentProp, tip, title, children, interactive, followCursor, disabled, className, }: TooltipProps): React.JSX.Element;

package/dist/types/v1/components/overlays/Tooltip/TooltipLayer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+/**
+ * Tooltips de toda a app, por atributo: qualquer elemento com `data-tip` mostra
+ * o texto num painel escuro ao passar o rato ou ao receber o foco do teclado.
+ * Monta-se uma vez na raiz.
+ *
+ *   <button data-tip="Registar horas" aria-label="Registar horas">…</button>
+ *   <span data-tip={nome} data-tip-title="Requisitante">…</span>
+ *
+ * - `data-tip-title`: cabeçalho opcional, separado por uma linha.
+ * - Texto com `\n` aparece em várias linhas.
+ * - Para conteúdo rico (JSX, links), usar o `Tooltip`.
+ * - Substitui o `title` do browser (lento, sem tema, corta texto longo). O
+ *   tooltip não é lido pelos leitores de ecrã: o elemento continua a precisar
+ *   do seu nome (`aria-label` ou texto).
+ * - Aparece por cima de uma janela (Dialog) aberta.
+ */
+export default function TooltipLayer(): React.JSX.Element;

package/dist/types/v1/components/overlays/Tooltip/TooltipPanel.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * O painel escuro das tooltips (uso interno): o mesmo para a camada `data-tip`
+ * (TooltipLayer) e para o `Tooltip` com conteúdo rico. Fica na camada de cima
+ * do browser (`popover`), por cima de uma janela aberta.
+ */
+declare const TooltipPanel: React.ForwardRefExoticComponent<{
+    id?: string;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    visible: boolean;
+    /** Aceita o rato (para se poder clicar em links lá dentro). */
+    interactive?: boolean;
+    style?: React.CSSProperties;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export default TooltipPanel;
+/** Distância ao cursor/elemento e margem mínima ao bordo da janela. */
+export declare const OFFSET = 10;
+export declare const MARGIN = 12;
+/** Encosta o painel dentro da janela. */
+export declare const clamp: (value: number, size: number, max: number) => number;

package/dist/types/v1/components/overlays/topLayer.d.ts

@@ -0,0 +1,23 @@
+import { type RefObject } from 'react';
+/**
+ * Põe um elemento na camada de cima do browser (top layer), por cima de um
+ * Dialog aberto. Só para uso interno (avisos, tooltips): o elemento tem de ter
+ * `popover="manual"`.
+ *
+ * Um `<dialog>` aberto com `showModal()` fica por cima de tudo o que está na
+ * página, incluindo `position: fixed` com `z-index` alto. Um popover também vai
+ * para essa camada, e fica por cima de quem lá entrou antes: por isso `raise()`
+ * volta a mostrá-lo quando é preciso que apareça à frente de uma janela que
+ * abriu depois.
+ *
+ * Em browsers sem popover (e no jsdom dos testes) não faz nada: o elemento
+ * continua com o seu `z-index`.
+ */
+export declare function useTopLayer(ref: RefObject<HTMLElement | null>, visible: boolean): () => void;
+/**
+ * Anula a margem, a borda e o scroll que o browser dá aos popovers. O fundo e o
+ * espaçamento ficam com cada componente: pôr aqui `bg-transparent`/`p-0` junto
+ * com o `bg-…`/`px-…` do componente deixava o resultado à mercê da ordem do CSS
+ * (numa app com Tailwind próprio, a tooltip ficava transparente).
+ */
+export declare const popoverReset = "m-0 border-0 overflow-visible";

package/dist/types/v1/components/tables/PaginatedTable/PaginatedTable.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type TableProps } from '../Table/Table';
+export interface PaginatedTableProps<T> extends TableProps<T> {
+    /**
+     * Total de linhas no servidor, quando é ele que pagina (`page` e
+     * `onPageChange`). É o número da contagem e dá o número de páginas.
+     */
+    total?: number;
+    /**
+     * Página atual (a contar de 1), quando é o servidor que pagina: a app pede a
+     * página e dá-a em `data`. Sem isto, a tabela pagina-se a si mesma com todas
+     * as linhas de `data`.
+     */
+    page?: number;
+    onPageChange?: (page: number) => void;
+    /** Tamanhos de página à escolha (ex: `[60, 120, 250, 500]`). Sem isto não há escolha. */
+    pageSizeOptions?: number[];
+    /**
+     * A pessoa escolheu outro tamanho de página. Quando é o servidor que pagina,
+     * a app volta à página 1 (ficar na 7.ª com 500 por página caía fora da lista).
+     * Sem isto, a tabela guarda a escolha ela própria.
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+}
+/**
+ * A [Table](?path=/docs/v1-components-tables-table--docs) para listas de página inteira: a paginação fica EM CIMA, numa
+ * barra com a contagem de linhas, o tamanho de página e os números de página,
+ * em vez de no fundo.
+ *
+ * Funciona de duas maneiras:
+ *  - **O servidor pagina** (`page`, `onPageChange`, `total`): `data` é a
+ *    página atual. Com filtros, ordenação ou agrupamento no cabeçalho, a tabela
+ *    passa a paginar o conjunto completo (`allData`) e a barra mostra as
+ *    páginas dela.
+ *  - **Todas as linhas de uma vez** (só `data`): a tabela pagina-se a si mesma.
+ *
+ * Por omissão ocupa a altura do pai (`fillHeight`), com as barras de scroll
+ * por cima das linhas, linhas-esqueleto a carregar e a aresta direita
+ * esbatida. Qualquer uma pode ser desligada.
+ */
+export default function PaginatedTable<T>({ total, page, onPageChange, pageSizeOptions, onPageSizeChange, pageSize, data, allData, alwaysClient, fillHeight, overlayScrollbars, horizontalScrollbarBelow, skeleton, fadeRight, ...resto }: PaginatedTableProps<T>): React.JSX.Element;

package/dist/types/v1/components/tables/Table/ColumnFilter.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { TableLabels } from './labels';
+/**
+ * O filtro de uma coluna: ordenar, procurar, escolher valores, aplicar.
+ *
+ * Vive fora do `Table` de propósito. Lá dentro era uma função declarada no
+ * corpo do componente, logo uma função NOVA a cada render — e o React
+ * desmontava e remontava o popup a cada tecla escrita e a cada opção marcada.
+ * Era isso que devolvia a lista de valores ao topo a meio de uma escolha.
+ *
+ * Nada se aplica até ao "Aplicar". Com a aplicação imediata, cada visto refazia
+ * a tabela por baixo: mudava-lhe o tamanho e o conteúdo enquanto se escolhia, e
+ * a lista de onde se estava a escolher encolhia à medida que se escolhia.
+ *
+ * `position: fixed` no `<body>`: como filho da célula, o `overflow` da tabela
+ * cortava-o — e era por isso que a caixa da tabela tinha de perder o tecto de
+ * altura enquanto um filtro estivesse aberto, o que empurrava a página inteira.
+ */
+export declare function ColumnFilter({ labels: L, label, canSort, tipo, valores, seleccionados, intervalo, numero, ordenadaPor, aCarregar, ancora, onOrdenar, onAplicar, onAplicarDatas, onAplicarNumeros, onLimpar, onFechar, }: {
+    labels: TableLabels;
+    label?: string;
+    canSort?: boolean;
+    /** `texto` = lista de valores; `data` = De/Até; `numero` = Mín/Máx, ou a lista (botão no topo). */
+    tipo: 'texto' | 'data' | 'numero';
+    /** Valores distintos da coluna, já contados com os outros filtros activos. */
+    valores: string[];
+    /** O que está aplicado neste momento — o ponto de partida do rascunho. */
+    seleccionados: Set<string>;
+    intervalo: {
+        from?: string;
+        to?: string;
+    };
+    /** Intervalo numérico aplicado, quando `tipo` é `numero`. */
+    numero?: {
+        min?: string;
+        max?: string;
+    };
+    ordenadaPor: 'asc' | 'desc' | null;
+    aCarregar: boolean;
+    /** Rect do botão que abriu isto. */
+    ancora: DOMRect;
+    onOrdenar?: (dir: 'asc' | 'desc') => void;
+    onAplicar: (vals: Set<string>) => void;
+    onAplicarDatas?: (de: string, ate: string) => void;
+    onAplicarNumeros?: (min: string, max: string) => void;
+    onLimpar: () => void;
+    onFechar: () => void;
+}): React.ReactPortal;

package/dist/types/v1/components/tables/Table/OverlayScrollbar.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type Eixo = 'vertical' | 'horizontal';
+/**
+ * Barra de scroll desenhada POR CIMA do conteúdo (a da Table com
+ * `overlayScrollbars`, nos dois eixos).
+ *
+ * A barra do browser ocupa espaço: numa grelha de colunas `1fr` nascia ao
+ * expandir uma secção e a grelha inteira reflowia de lado; na tabela obrigava
+ * o cabeçalho a reservar-lhe uma goteira, e a horizontal punha uma faixa
+ * cinzenta por baixo das linhas. Guardar-lhe o espaço de véspera
+ * (scrollbar-gutter) deixava uma faixa vazia. Por cima não ocupa nada, e não
+ * há nem salto nem faixa.
+ *
+ * A caixa que rola tem de estar num pai `relative`, e a barra do browser tem
+ * de estar escondida (classe `scrollbar-none`). Onde o browser não a souber
+ * esconder, fica também a dele — pior, mas não partido.
+ *
+ * Cinzento médio de propósito: passa por cima de linhas escuras e de linhas
+ * brancas, e tem de se ver nas duas.
+ */
+export declare function OverlayScrollbar({ alvo, eixo, borda, canto, naBorda }: {
+    alvo: HTMLElement | null;
+    eixo?: Eixo;
+    /** Espessura da borda da caixa do lado onde a pista começa — o cursor começa depois dela. */
+    borda?: number;
+    /** A outra barra também é sobreposta: deixar-lhe o canto livre. */
+    canto?: boolean;
+    /**
+     * Horizontal: centrada na aresta de baixo da caixa em vez de 3px acima dela —
+     * meio por cima das linhas, meio por cima do que vem a seguir (ex: o rodapé da
+     * tabela). Tira menos altura visível às linhas.
+     */
+    naBorda?: boolean;
+}): React.JSX.Element | null;