@nextelco/common-ui 2.1.105 → 2.1.107

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

@@ -0,0 +1,35 @@
+import React from 'react';
+/** Um nível do caminho por cima do título. */
+export interface BreadcrumbItem {
+    label: React.ReactNode;
+    /** Ligação normal. Para o router da app, usar `onClick` (ex: `() => navigate('/x')`). */
+    href?: string;
+    onClick?: () => void;
+}
+export interface PageHeaderProps {
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /**
+     * Caminho até à página (área › lista › registo). O último nível é a página
+     * atual e não leva ligação, mesmo que a traga.
+     */
+    breadcrumb?: BreadcrumbItem[];
+    /** Botões da página (ex: "Novo", "Editar"). Ficam à direita e descem em ecrã estreito. */
+    actions?: React.ReactNode;
+    /** Linha extra por baixo da descrição (etiquetas de estado, responsável…). */
+    extra?: React.ReactNode;
+    /** Nome da navegação do caminho, para leitores de ecrã. Por omissão: "Caminho". */
+    breadcrumbLabel?: string;
+}
+/**
+ * Cabeçalho comum a todas as páginas: caminho, título com a barra turquesa,
+ * descrição e ações.
+ *
+ * Existe para o título deixar de ser desenhado à mão em cada ecrã — com
+ * tamanhos, cores e posições diferentes de página para página. O nome no menu,
+ * o título e o último nível do caminho devem ser o mesmo texto.
+ *
+ * Normalmente usa-se através do `Page`, que também arruma os separadores e o
+ * conteúdo por baixo.
+ */
+export default function PageHeader({ title, description, breadcrumb, actions, extra, breadcrumbLabel }: PageHeaderProps): React.JSX.Element;

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

@@ -15,7 +15,7 @@ export interface ListFinderProps<T> {
     /** 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 SelectInput). */
+    /** Filtros ao lado do voltar, por cima da pesquisa (ex: um ou dois [SelectInput](?path=/docs/v1-primitives-forms-selectinput--docs)). */
     filters?: React.ReactNode;
     /** Com isto aparece um ‹ à esquerda, para fechar ou esconder a lista. */
     onBack?: () => void;

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

@@ -13,9 +13,10 @@ export interface DialogProps {
     open: boolean;
     /** Pedido para fechar (×, Esc ou clique fora): a app põe `open` a `false`. */
     onClose: () => void;
-    title: string;
+    /** Normalmente texto; aceita JSX (ex: um nome em negrito). */
+    title: React.ReactNode;
     /** Linha por baixo do título (ex: nome · departamento). */
-    subtitle?: string;
+    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. Nunca passa o ecrã. */
@@ -39,7 +40,7 @@ export interface DialogProps {
 }
 /**
  * Janela por cima da página: cabeçalho navy com título, corpo que faz scroll e
- * rodapé com os botões.
+ * rodapé com os botões ([Button](?path=/docs/v1-primitives-buttons-button--docs)).
  *
  * É a janela modal da V1 (substitui o `Modal` legacy).
  *
@@ -56,5 +57,7 @@ export interface DialogProps {
  * 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

@@ -23,7 +23,7 @@ export interface PaginatedTableProps<T> extends TableProps<T> {
     onPageSizeChange?: (pageSize: number) => void;
 }
 /**
- * A `Table` para listas de página inteira: a paginação fica EM CIMA, numa
+ * 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.
  *

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

@@ -245,6 +245,6 @@ export declare function TableBase<T>({ paginacaoNoTopo, columns: colunasBase, da
  * a si mesma, com a troca de páginas no fundo.
  *
  * Para a paginação EM CIMA, com a contagem e o tamanho de página (uma lista de
- * página inteira), ver o `PaginatedTable`.
+ * página inteira), ver o [PaginatedTable](?path=/docs/v1-components-tables-paginatedtable--docs).
  */
 export default function Table<T>(props: TableProps<T>): React.JSX.Element;

package/dist/types/v1/foundations/icons/icons.d.ts

@@ -33,9 +33,29 @@ export declare function ChevronsUpDownIcon(props: IconProps): React.JSX.Element;
 export declare function FilterIcon(props: IconProps): React.JSX.Element;
 /** Fechar, remover (×). */
 export declare function CloseIcon(props: IconProps): React.JSX.Element;
+/** Abrir o menu (gaveta em ecrãs pequenos). */
+export declare function MenuIcon(props: IconProps): React.JSX.Element;
 /** Agrupar (camadas). */
 export declare function LayersIcon(props: IconProps): React.JSX.Element;
+/** Expandir o menu lateral recolhido. */
+export declare function PanelOpenIcon(props: IconProps): React.JSX.Element;
 /** Lista de valores. */
 export declare function ListIcon(props: IconProps): React.JSX.Element;
+/** Tema claro. */
+export declare function SunIcon(props: IconProps): React.JSX.Element;
+/** Tema escuro. */
+export declare function MoonIcon(props: IconProps): React.JSX.Element;
+/** Tema do sistema. */
+export declare function MonitorIcon(props: IconProps): React.JSX.Element;
+/** Idioma. */
+export declare function GlobeIcon(props: IconProps): React.JSX.Element;
+/** Terminar sessão. */
+export declare function LogOutIcon(props: IconProps): React.JSX.Element;
+/** Abre fora da aplicação (separador novo). */
+export declare function ExternalLinkIcon(props: IconProps): React.JSX.Element;
+/** Atenção (avisos, confirmações perigosas). */
+export declare function WarningIcon(props: IconProps): React.JSX.Element;
+/** Erro. */
+export declare function ErrorIcon(props: IconProps): React.JSX.Element;
 /** Intervalo (mínimo e máximo). */
 export declare function SlidersIcon(props: IconProps): React.JSX.Element;

package/dist/types/v1/index.d.ts

@@ -5,7 +5,10 @@ export type { PdfPreviewProps } from './primitives/documents/PdfPreview/PdfPrevi
 export { configurePdfWorker } from './primitives/documents/PdfPreview/pdfjs';
 export { scanQRCodes, configureQRScanner } from './capabilities/documents/QRScanning/scanQRCodes';
 export type { ScanQRCodesOptions } from './capabilities/documents/QRScanning/scanQRCodes';
-export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, CloseIcon, LayersIcon, ListIcon, SlidersIcon, } from './foundations/icons/icons';
+export { useTheme, applyTheme, themeBootScript, THEME_STORAGE_KEY } from './capabilities/theme/useTheme';
+export type { Theme } from './capabilities/theme/useTheme';
+export { useIsDark } from './capabilities/theme/useIsDark';
+export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, MenuIcon, PanelOpenIcon, SunIcon, MoonIcon, MonitorIcon, GlobeIcon, LogOutIcon, ExternalLinkIcon, WarningIcon, ErrorIcon, ChevronUpIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, LayersIcon, ListIcon, SlidersIcon, } from './foundations/icons/icons';
 export type { IconProps } from './foundations/icons/icons';
 export { default as TextInput } from './primitives/forms/TextInput/TextInput';
 export type { TextInputProps } from './primitives/forms/TextInput/TextInput';
@@ -13,6 +16,10 @@ export { default as SelectInput } from './primitives/forms/SelectInput/SelectInp
 export type { SelectInputProps } from './primitives/forms/SelectInput/SelectInput';
 export { default as TextArea } from './primitives/forms/TextArea/TextArea';
 export type { TextAreaProps } from './primitives/forms/TextArea/TextArea';
+export { default as DateInput } from './primitives/forms/DateInput/DateInput';
+export type { DateInputProps } from './primitives/forms/DateInput/DateInput';
+export { default as SearchInput } from './primitives/forms/SearchInput/SearchInput';
+export type { SearchInputProps } from './primitives/forms/SearchInput/SearchInput';
 export { default as Checkbox } from './primitives/forms/Checkbox/Checkbox';
 export type { CheckboxProps } from './primitives/forms/Checkbox/Checkbox';
 export { default as LookupInput } from './primitives/forms/LookupInput/LookupInput';
@@ -25,6 +32,41 @@ export { default as Button } from './primitives/buttons/Button/Button';
 export type { ButtonProps } from './primitives/buttons/Button/Button';
 export { default as Dialog, useDialogContainer } from './components/overlays/Dialog/Dialog';
 export type { DialogProps } from './components/overlays/Dialog/Dialog';
+export { default as ConfirmDialog, ConfirmProvider, useConfirm } from './components/overlays/ConfirmDialog/ConfirmDialog';
+export type { ConfirmDialogProps, ConfirmOptions, ConfirmProviderProps } from './components/overlays/ConfirmDialog/ConfirmDialog';
+export { default as Tooltip } from './components/overlays/Tooltip/Tooltip';
+export type { TooltipProps } from './components/overlays/Tooltip/Tooltip';
+export { default as TooltipLayer } from './components/overlays/Tooltip/TooltipLayer';
+export { default as ToastProvider, useToast } from './components/feedback/Toast/Toast';
+export type { ToastApi, ToastOptions, ToastProviderProps, ToastTone } from './components/feedback/Toast/Toast';
+export { default as AppShell } from './components/layout/AppShell/AppShell';
+export type { AppShellProps, AppShellLabels } from './components/layout/AppShell/AppShell';
+export { default as Page } from './components/layout/Page/Page';
+export type { PageProps } from './components/layout/Page/Page';
+export { default as PageHeader } from './components/layout/PageHeader/PageHeader';
+export type { PageHeaderProps, BreadcrumbItem } from './components/layout/PageHeader/PageHeader';
+export { default as SideNav } from './components/layout/SideNav/SideNav';
+export type { SideNavProps, SideNavItem, SideNavBadge, SideNavLabels, SideNavTheme } from './components/layout/SideNav/SideNav';
+export { Badge } from './primitives/display/Badge/Badge';
+export type { BadgeProps, BadgeTone } from './primitives/display/Badge/Badge';
+export { Notice } from './primitives/display/Notice/Notice';
+export type { NoticeProps, NoticeTone } from './primitives/display/Notice/Notice';
+export { Avatar, initials } from './primitives/display/Avatar/Avatar';
+export type { AvatarProps, AvatarSize } from './primitives/display/Avatar/Avatar';
+export { Person } from './primitives/display/Person/Person';
+export type { PersonProps } from './primitives/display/Person/Person';
+export { Pagination } from './components/data/Pagination/Pagination';
+export type { PaginationProps, PaginationLabels } from './components/data/Pagination/Pagination';
+export { FilterChips } from './primitives/display/FilterChips/FilterChips';
+export type { FilterChipsProps, FilterChipItem } from './primitives/display/FilterChips/FilterChips';
+export { Card } from './primitives/display/Card/Card';
+export type { CardProps } from './primitives/display/Card/Card';
+export { Kpi } from './primitives/display/Kpi/Kpi';
+export type { KpiProps, KpiTone } from './primitives/display/Kpi/Kpi';
+export { default as Tabs } from './primitives/navigation/Tabs/Tabs';
+export type { TabsProps, TabsSingleProps, TabsMultipleProps, TabItem } from './primitives/navigation/Tabs/Tabs';
+export { default as SegmentedControl } from './primitives/buttons/SegmentedControl/SegmentedControl';
+export type { SegmentedControlProps, SegmentedOption } from './primitives/buttons/SegmentedControl/SegmentedControl';
 export { default as Table } from './components/tables/Table/Table';
 export type { TableProps, TableColumn, TableView, TableState } from './components/tables/Table/Table';
 export { default as PaginatedTable } from './components/tables/PaginatedTable/PaginatedTable';

package/dist/types/v1/primitives/buttons/Button/Button.d.ts

@@ -1,18 +1,35 @@
 import React from 'react';
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** `primary`: a ação principal (navy, uma por ecrã). `secondary`: as outras (ex: Fechar). */
-    variant?: 'primary' | 'secondary';
-    /** Ícone antes do texto (ex: `<CheckIcon size={13} />`). */
+    /**
+     * `primary`: a ação principal (navy, uma por ecrã). `secondary` (contorno): as
+     * outras (ex: Fechar, Exportar). `success` (verde): aprovar, aceitar, concluir.
+     * `danger`: apaga ou não se pode desfazer (ex: Apagar). `ghost`: sem contorno,
+     * para ações discretas.
+     *
+     * Sobre fundo escuro (ex: uma barra navy): `inverse` (contorno branco) para as
+     * ações normais e `accent` (turquesa) para a principal.
+     */
+    variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'ghost' | 'inverse' | 'accent';
+    /** `sm`: mais pequeno (28px), para ícones dentro de linhas de tabelas e cartões. */
+    size?: 'md' | 'sm';
+    /** Ligado (ex: um filtro ativo): o `secondary` fica navy. Dá `aria-pressed`. */
+    active?: boolean;
+    /** Ícone antes do texto (ex: `<CheckIcon size={13} />`). Sem texto, o botão fica quadrado (dar `aria-label`). */
     icon?: React.ReactNode;
     /** A guardar/enviar: mostra uma roda no lugar do ícone e fica desativado. */
     loading?: boolean;
 }
 /**
- * Botão de ação (ex: Confirmar, Fechar). Por omissão não submete formulários
- * (`type="button"`); para submeter, passar `type="submit"`.
+ * Botão de ação (ex: Confirmar, Novo projeto). Por omissão não submete
+ * formulários (`type="button"`); para submeter, passar `type="submit"`.
+ *
+ * O aspeto dos portais proef: MAIÚSCULAS, letra grossa e espaçada, a mesma
+ * altura dos outros controlos (32px).
  *
  * **Aceita os atributos HTML do [&lt;button&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button)**, com o mesmo comportamento: `onClick`, `disabled`, `type`, `name`, `form`, `ref`, ...
  * Só os próprios do V1 aparecem na tabela abaixo.
+ *
+ * **Onde aparece:** no rodapé de um [Dialog](?path=/docs/v1-components-overlays-dialog--docs) (ver [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs)).
  */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default Button;

package/dist/types/v1/primitives/buttons/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export interface SegmentedOption<V extends string = string> {
+    value: V;
+    label: React.ReactNode;
+    /** Ícone antes do texto (ex: um ícone do lucide com `size={12}`). */
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps<V extends string = string> {
+    /** A opção escolhida. A app guarda este estado. */
+    value: V;
+    options: SegmentedOption<V>[];
+    onChange: (value: V) => void;
+    /** Rótulo visível à esquerda (ex: "Situação"). Também é o nome do grupo para leitores de ecrã. */
+    label?: string;
+    /** Nome do grupo para leitores de ecrã, quando não há `label` visível. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Escolha de uma opção entre poucas, em botões lado a lado (ex: Dia · Semana ·
+ * Mês, ou Todos · Atribuição · Devolução). Para filtros e modos de vista numa
+ * barra; para trocar de vista com conteúdo próprio, usar `Tabs`.
+ *
+ * Mesmo aspeto dos `Tabs` segmentados: botões juntos numa caixa, o escolhido
+ * a navy. Setas ← → mudam de opção.
+ */
+export default function SegmentedControl<V extends string = string>({ value, options, onChange, label, ariaLabel, className, }: SegmentedControlProps<V>): React.JSX.Element;

package/dist/types/v1/primitives/buttons/SegmentedControl/segmentedStyles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Aspeto "segmentado": botões juntos numa caixa, o escolhido a navy.
+ *
+ * Partilhado pelo `SegmentedControl` (escolher um valor, ex: 7D · 30D) e pelos
+ * `Tabs` com `variant="segmented"` (trocar de vista): fazem coisas diferentes
+ * mas têm de parecer o mesmo controlo.
+ *
+ * A caixa tem a altura dos outros controlos (`--spacing-control`), para ficar
+ * alinhada com botões, pesquisa e campos na mesma barra.
+ */
+export declare const SEGMENTED: {
+    list: string;
+    item: string;
+    active: string;
+    idle: string;
+};

package/dist/types/v1/primitives/display/Avatar/Avatar.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+/** Iniciais a partir do nome completo (primeira + última). Sem nome: "?". */
+export declare function initials(fullName?: string | null): string;
+/** `none`: sem tamanho nem cores das iniciais — quem usa põe as classes (ex: o UserAvatar da Legacy). */
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'none';
+export interface AvatarProps {
+    name?: string | null;
+    /** URL da fotografia. Sem ela (ou se falhar) ficam as iniciais. */
+    photo?: string | null;
+    /** Fotografia maior para o cartão (por omissão, a mesma). */
+    photoLarge?: string | null;
+    email?: string | null;
+    company?: string | null;
+    department?: string | null;
+    jobTitle?: string | null;
+    /** `sm` 24px (tabelas e listas), `md` 28px, `lg` 32px (formulários, cabeçalhos). */
+    size?: AvatarSize;
+    /** Cartão com a fotografia grande e os dados ao passar o rato (no toque, ao tocar). */
+    card?: boolean;
+    className?: string;
+}
+/**
+ * A fotografia de uma pessoa (ou as iniciais), redonda. Com `card`, mostra a
+ * fotografia grande, o email, a empresa, o departamento e a função ao passar o rato;
+ * no toque abre e fecha ao tocar, sem passar o toque à linha por baixo.
+ *
+ * Para uma pessoa com o nome ao lado (ex: numa tabela), usar o `Person`.
+ */
+export default function Avatar({ name, photo, photoLarge, email, company, department, jobTitle, size, card, className, }: AvatarProps): React.JSX.Element;
+export { Avatar };

package/dist/types/v1/primitives/display/Badge/Badge.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * Estados com significado: `ok` (verde), `risco` (âmbar), `incumprido` (vermelho).
+ * Sem estado: `neutral` (cinzento) e `accent` (azul).
+ * Classificações (distinguir valores que não são bons nem maus, ex: origem, tipo,
+ * área): `blue`, `violet`, `cyan`, `orange`, `pink` — sem significado, só para os
+ * valores se reconhecerem de relance. Não usar verde/âmbar/vermelho para isto.
+ */
+export type BadgeTone = 'ok' | 'risco' | 'incumprido' | 'neutral' | 'accent' | 'blue' | 'violet' | 'cyan' | 'orange' | 'pink';
+/** Aceita os atributos do `<span>` (ex: `data-tip`, `title`, `aria-label`). */
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    tone?: BadgeTone;
+    /** Ponto à esquerda. Por omissão sim; sem ponto para etiquetas que não são um estado (ex: categoria). */
+    dot?: boolean;
+    /** Ícone no lugar do ponto (ex: `<Eye size={11} />`). */
+    icon?: React.ReactNode;
+    children: React.ReactNode;
+}
+/**
+ * Etiqueta em pílula: o estado de um registo (ex: "Publicado", "Em atraso") ou
+ * uma classificação (ex: a categoria, a origem). As cores dos estados vêm dos
+ * tokens, por isso acompanham o tema escuro.
+ */
+export default function Badge({ tone, dot, icon, children, className, ...props }: BadgeProps): React.JSX.Element;
+export { Badge };

package/dist/types/v1/primitives/display/Card/Card.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Título no topo (ex: "Por estado"). */
+    title?: React.ReactNode;
+    /** Ações à direita do título (ex: um botão, um seletor). */
+    actions?: React.ReactNode;
+    /** `none`: sem margem interior, para tabelas ou listas que vão até à borda. */
+    padding?: 'md' | 'none';
+    /** @deprecated Nome antigo (Legacy) de `actions`. */
+    extra?: React.ReactNode;
+}
+/**
+ * Cartão: agrupa um bloco de conteúdo (um gráfico, uma lista, um resumo) num
+ * fundo próprio com cantos redondos, com título opcional.
+ *
+ * Os indicadores soltos usam o `Kpi`; as tabelas da biblioteca já trazem o seu
+ * contorno e não vão dentro de um cartão.
+ *
+ * **Aceita os atributos HTML do `<div>`** (ex: `id`, `data-*`, `onClick`).
+ */
+export default function Card({ title, actions, extra, padding, className, children, ...props }: CardProps): React.JSX.Element;
+export { Card };