@proef/common-ui 0.0.0-stage → 2.2.1

package/dist/types/legacy/pages/Error/ErrorPage.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './ErrorPage.scss';
+interface ErrorProps {
+    title?: string;
+    messages: string[];
+    /**
+     * clientId MSAL da app. Passa-o sempre que várias apps partilhem o origin
+     * (ex: todas as do proefai): o "Repor sessão" passa a apagar só as chaves
+     * desta app em vez de `localStorage.clear()`, que derruba a sessão de todas
+     * as vizinhas. Sem ele mantém-se o comportamento antigo (limpeza total).
+     */
+    clientId?: string;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const ErrorPage: React.FC<ErrorProps>;
+export default ErrorPage;

package/dist/types/legacy/pages/Loading/Loading.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './Loading.scss';
+type Props = {
+    logo?: string;
+};
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const LoadingPage: ({ logo }: Props) => React.JSX.Element;
+export default LoadingPage;

package/dist/types/legacy/pages/Login/LoginScreen.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface LoginScreenProps {
+    /** Título da app (ex: nome do portal). */
+    appTitle?: string;
+    /** Subtítulo/descrição curta. */
+    subtitle?: string;
+    /** Ação do botão de entrar (ex: MSAL loginRedirect). */
+    onSignIn: () => void;
+    signInLabel?: string;
+    /** Rodapé — empresa. O ano é acrescentado automaticamente. */
+    companyLabel?: string;
+    /** Logo custom. Sem isto mostra a marca "proef" + ponto turquesa. */
+    logo?: React.ReactNode;
+    /** Mensagem de erro opcional (ex: falha de login). */
+    error?: string;
+    /**
+     * Canto superior direito — tipicamente o seletor de idioma.
+     *
+     * Existe porque quem ainda não entrou pode não perceber a língua em que o
+     * ecrã está, e é precisamente aí que mais precisa de a poder trocar.
+     */
+    topoDireita?: React.ReactNode;
+    /**
+     * Dois quadrados rodados em marca-d'água nos cantos opostos.
+     *
+     * A maioria dos portais tinha-os no seu ecrã de login próprio, e sem isto a
+     * passagem para o componente partilhado tirava-lhos. Default `false` para
+     * não mexer em quem já usa o componente.
+     *
+     * Herdam `--color-proef-turquoise` e `--color-proef-blue`, por isso um
+     * portal que redefina essas variáveis vê os acentos acompanharem.
+     */
+    acentos?: boolean;
+}
+/**
+ * Ecrã de login partilhado (design system proef): fundo navy, marca "proef",
+ * título/subtítulo da app e botão de entrar. Agnóstico ao provider — a app passa
+ * `onSignIn` (MSAL/Keycloak/…). Requer o CSS do common-ui.
+ * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
+ */
+export default function LoginScreen({ appTitle, subtitle, onSignIn, signInLabel, companyLabel, logo, error, topoDireita, acentos, }: LoginScreenProps): React.JSX.Element;

package/dist/types/legacy/pages/NotFound/NotFound.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './NotFound.scss';
+interface NotFoundProps {
+    handleHome: () => void;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+declare const NotFound: React.FC<NotFoundProps>;
+export default NotFound;

package/dist/types/legacy/styles/themes/ButtonThemes.d.ts

@@ -0,0 +1,6 @@
+import { IconTextTheme } from '../../exports/types';
+import { ActionButtonTheme, IconButtonTheme } from '../../types/themes/ButtonThemes';
+export declare const ActionButtonThemeStyled: ActionButtonTheme;
+export declare const IconButtonThemeStyled: IconButtonTheme;
+export declare const IconTextDarkThemeStyled: IconTextTheme;
+export declare const IconTextLightThemeStyled: IconTextTheme;

package/dist/types/legacy/styles/utils/utils.d.ts

@@ -0,0 +1,2 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export declare const getCSSVariable: (variable: string) => string;

package/dist/types/legacy/types/Fetcher.d.ts

@@ -0,0 +1,5 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface Fetcher {
+    endpoint: string;
+    params?: Record<string, unknown>;
+}

package/dist/types/legacy/types/LoggedUser.d.ts

@@ -0,0 +1,10 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export type LoggedUser = {
+    id: string;
+    name: string;
+    code?: string;
+    azure?: string;
+    company?: string;
+    email?: string;
+    roles?: string[];
+};

package/dist/types/legacy/types/SelectableElement.d.ts

@@ -0,0 +1,6 @@
+export type SelectableElement = {
+    id: string;
+    name: string;
+    code?: string;
+    disabled?: boolean;
+};

package/dist/types/legacy/types/SidebarMenu.d.ts

@@ -0,0 +1,12 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface Submenu {
+    name: string;
+    path: string;
+    external: boolean;
+    icon?: string;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface Menu {
+    name: string;
+    submenus: Submenu[];
+}

package/dist/types/legacy/types/themes/AcronymThemes.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface AcronymTheme {
+    mode: 'dark' | 'light';
+}

package/dist/types/legacy/types/themes/ButtonThemes.d.ts

@@ -0,0 +1,21 @@
+import { FontWeight } from '../../constants/FontWeight';
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface ActionButtonTheme {
+    backgroundColor: string;
+    fontColor: string;
+    iconColor: string;
+    fontWeight?: FontWeight;
+    hoverBackgroundColor?: string;
+    size: 'default' | 'compact' | 'large';
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface IconButtonTheme {
+    backgroundColor: string;
+    iconColor: string;
+    size: 'default' | 'compact' | 'large' | 'ultra-compact';
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface MainButtonTheme {
+    backgroundColor: string;
+    color: string;
+}

package/dist/types/legacy/types/themes/CustomSwitchThemes.d.ts

@@ -0,0 +1,4 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface CustomSwitchTheme {
+    size: 'default' | 'compact' | 'large';
+}

package/dist/types/legacy/types/themes/IconTextThemes.d.ts

@@ -0,0 +1,6 @@
+import { FontWeight } from '../../constants/FontWeight';
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface IconTextTheme {
+    color: string;
+    fontWeight?: FontWeight;
+}

package/dist/types/legacy/utils/stringUtils.d.ts

@@ -0,0 +1,6 @@
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export declare function getAcronym(str: string): string;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export declare function getFirstAndLastName(str: string): string;
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export declare function partialMatchWithUsername(search: string, username: string): boolean;

package/dist/types/v1/capabilities/documents/QRScanning/scanQRCodes.d.ts

@@ -0,0 +1,25 @@
+export interface ScanQRCodesOptions {
+    /**
+     * Continuar a procurar até um código satisfazer esta condição (ex: ser o QR
+     * de uma fatura). Um documento pode ter vários QR codes e o primeiro a ser
+     * lido é arbitrário. Por omissão, pára no primeiro código encontrado.
+     */
+    until?: (code: string) => boolean;
+}
+/**
+ * Indica onde está o `zxing_reader.wasm` servido pela app. Chamar uma vez no
+ * arranque, antes da primeira leitura. Sem isto, o ficheiro é descarregado da
+ * CDN jsDelivr (pode ser bloqueado por redes ou políticas de segurança).
+ */
+export declare function configureQRScanner(options: {
+    wasmUrl: string;
+}): void;
+/**
+ * Lê os QR codes de uma imagem ou PDF (1.ª página).
+ *
+ * Devolve o texto de cada código encontrado, sem repetidos, pela ordem em que
+ * foram lidos; vazio se não houver nenhum ou se o ficheiro não se puder ler.
+ * Depois de encontrar o que procura, faz ainda uma passagem para recolher os
+ * outros códigos da página (ex: QR do banco ao lado do QR fiscal).
+ */
+export declare function scanQRCodes(file: File, options?: ScanQRCodesOptions): Promise<string[]>;

package/dist/types/v1/capabilities/overlay/useFloatingPanel.d.ts

@@ -0,0 +1,20 @@
+import { type CSSProperties } from 'react';
+/**
+ * Aspeto comum das listas suspensas (SelectInput, MenuAcoes): cartão arredondado com sombra, nos dois temas.
+ * Um só sítio para ficarem iguais.
+ */
+export declare const PANEL_CLASS = "fixed z-[60] min-w-[10rem] max-h-72 overflow-auto rounded-xl border border-slate-200 bg-white py-1 text-sm shadow-lg dark:border-slate-700 dark:bg-slate-900";
+/** Item de uma lista suspensa; `active` = o que o teclado tem selecionado. */
+export declare const itemClass: (active: boolean, danger?: boolean) => string;
+/**
+ * Painel flutuante preso a um botão: posição fixa (não é cortado por tabelas ou janelas com scroll), abre para
+ * cima quando não cabe por baixo, fecha ao clicar fora, ao fazer scroll fora dele ou ao redimensionar.
+ */
+export declare function useFloatingPanel(align?: 'left' | 'right'): {
+    open: boolean;
+    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    close: () => void;
+    triggerRef: import("react").RefObject<HTMLButtonElement | null>;
+    panelRef: import("react").RefObject<HTMLDivElement | null>;
+    style: CSSProperties;
+};

package/dist/types/v1/capabilities/theme/useIsDark.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Se a app está em escuro agora (a classe `.dark` no `<html>`), e muda quando o
+ * tema muda.
+ *
+ * Para o que não pode usar o `dark:` do Tailwind e precisa das cores em
+ * JavaScript: gráficos, `<iframe>`, SVG com cores por props. O componente volta
+ * a desenhar quando o tema muda.
+ */
+export declare function useIsDark(): boolean;
+export default useIsDark;

package/dist/types/v1/capabilities/theme/useTheme.d.ts

@@ -0,0 +1,29 @@
+export type Theme = 'light' | 'dark' | 'system';
+/** Chave da escolha no localStorage. A mesma nos portais (Tickets, AuditoriasIT). */
+export declare const THEME_STORAGE_KEY = "theme";
+/** Põe ou tira a classe `.dark` no `<html>`: é a ela que os componentes e os tokens reagem. */
+export declare function applyTheme(theme: Theme): void;
+/**
+ * Script para pôr no `<head>` do `index.html`, antes do CSS: aplica o tema
+ * guardado antes da primeira pintura (sem o clarão branco ao abrir em escuro).
+ *
+ * O build também o põe em `dist/theme-boot.js`, para a app o injetar no
+ * `index.html` sem o copiar (ex: num plugin `transformIndexHtml` do Vite).
+ */
+export declare const themeBootScript = "(function(){try{var k='theme',o='proef-theme',v=localStorage.getItem(k)||localStorage.getItem(o)||'system';if(v==='dark'||(v==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark')}catch(e){}})();";
+/**
+ * Tema da app: claro, escuro ou o do sistema. Guarda a escolha (sozinho, a cada
+ * mudança), aplica a classe `.dark` no `<html>`, segue o sistema em `system` e
+ * acompanha a escolha feita noutro separador.
+ *
+ *   const { theme, setTheme } = useTheme()
+ *   <AppShell theme={theme} onThemeChange={setTheme} …/>
+ *
+ * Para não haver clarão ao abrir, pôr o `themeBootScript` no `index.html`.
+ */
+export declare function useTheme(): {
+    theme: Theme;
+    setTheme: (t: Theme) => void;
+    cycle: () => void;
+};
+export default useTheme;

package/dist/types/v1/components/data/Pagination/Pagination.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+export interface PaginationLabels {
+    /** "{page}" e "{pages}" são substituídos (ex: "Página {page} de {pages}"). */
+    page: string;
+    /** "{count}" é substituído pelo total de registos (ex: "{count} resultados"). */
+    total: string;
+    perPage: string;
+    prev: string;
+    next: string;
+}
+export declare const DEFAULT_PAGINATION_LABELS: PaginationLabels;
+export interface PaginationProps {
+    /** Página atual, a contar de 1. */
+    page: number;
+    /** Número de páginas. */
+    pages: number;
+    onPageChange: (page: number) => void;
+    /** Total de registos (mostrado à esquerda). */
+    total?: number;
+    /** Registos por página e as opções do seletor (sem opções, não há seletor). */
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    labels?: Partial<PaginationLabels>;
+    className?: string;
+}
+/**
+ * Paginação por baixo de uma lista: "Página 1 de 4", o total, quantos por página e
+ * Anterior/Seguinte. É a mesma que a `DataTable` mostra; usar esta quando a app pagina
+ * no servidor (a tabela recebe só a página atual).
+ */
+export default function Pagination({ page, pages, onPageChange, total, pageSize, pageSizeOptions, onPageSizeChange, labels, className, }: PaginationProps): React.JSX.Element;
+export { Pagination };

package/dist/types/v1/components/documents/DocumentDropzone/DocumentDropzone.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+export interface DocumentDropzoneLabels {
+    title: string;
+    hint?: string;
+    change: string;
+    remove: string;
+    /** Texto enquanto procura QR codes (só com `onQRCodes`), ex: "A procurar QR codes…". */
+    scanningQR?: string;
+    /**
+     * Mensagem quando um ficheiro não é permitido pelo `accept`, ex: "Formato não
+     * permitido. Aceita PDF, JPG ou PNG." Aparece logo ao arrastar e depois de largar.
+     */
+    rejected: string;
+}
+export interface DocumentDropzoneProps {
+    file: File | null;
+    onFileChange: (file: File | null) => void;
+    /**
+     * Tipos permitidos: extensões e/ou tipos MIME, separados por vírgulas, ex:
+     * ".pdf,.jpg,.jpeg,.png". Os restantes são recusados (ver `labels.rejected` e
+     * `onReject`). Sem `accept`, aceita qualquer ficheiro.
+     *
+     * - `image/*` inclui SVG (que pode conter código) e HEIC (sem pré-visualização
+     *   na maioria dos browsers). Para documentos, prefira uma lista explícita.
+     * - Só se verificam o nome e o tipo declarado, não o conteúdo: um ficheiro
+     *   renomeado passa. O servidor deve validar o que recebe.
+     */
+    accept?: string;
+    disabled?: boolean;
+    labels: DocumentDropzoneLabels;
+    /** Pré-visualização própria. Se devolver null/undefined, usa a de omissão (imagem, PDF ou ícone). */
+    renderPreview?: (file: File, url: string) => React.ReactNode;
+    /**
+     * Procura QR codes em cada ficheiro escolhido (imagem ou 1.ª página do PDF) e
+     * entrega o texto de todos os encontrados (vazio se nenhum). Sem esta prop não
+     * se procura nada. Usa a capacidade [QR Scanning](?path=/docs/v1-capabilities-documents-qr-scanning--docs).
+     */
+    onQRCodes?: (codes: string[], file: File) => void;
+    /** Chamado com os ficheiros recusados pelo `accept` (quando nenhum dos largados/escolhidos serve). */
+    onReject?: (files: File[]) => void;
+    /** Continuar a procurar até um QR code satisfazer isto (ex: ser o QR de uma fatura). Por omissão, pára no primeiro. */
+    qrCodeWanted?: (code: string) => boolean;
+    className?: string;
+}
+/**
+ * Se um ficheiro deste tipo é permitido, sabendo só o tipo (durante o arrastar).
+ * `null` quando não dá para saber (tipo desconhecido, ou extensão fora da tabela).
+ */
+export declare function acceptsType(type: string, accept?: string): boolean | null;
+export declare function accepts(file: File, accept?: string): boolean;
+/** Folhas de cálculo (Excel, CSV): pela extensão ou pelo tipo, que o browser às vezes não conhece. */
+export declare const isSpreadsheet: (file: File) => boolean;
+/**
+ * Caixa para anexar um ficheiro a um formulário: arrastar ou clicar para
+ * escolher. Mostra o nome, o tamanho e uma pré-visualização do ficheiro.
+ *
+ * **Usa:** [PdfPreview](?path=/docs/v1-primitives-documents-pdfpreview--docs) para mostrar PDFs; imagens com `<img>`.
+ * Com `onQRCodes`, a capacidade [QR Scanning](?path=/docs/v1-capabilities-documents-qr-scanning--docs).
+ */
+export default function DocumentDropzone({ file, onFileChange, accept, disabled, labels, renderPreview, onQRCodes, qrCodeWanted, onReject, className, }: DocumentDropzoneProps): React.JSX.Element;

package/dist/types/v1/components/feedback/Toast/Toast.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+export type ToastTone = 'success' | 'error' | 'warning' | 'info';
+export interface ToastOptions {
+    /** Linha em negrito por cima da mensagem. */
+    title?: string;
+    /** Botão no aviso (ex: Desfazer, Tentar de novo). Fecha o aviso depois de correr. */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Quanto tempo fica visível, em ms. `0`: fica até ser fechado. Por omissão
+     * depende do tipo: ler um erro demora mais do que um "Guardado".
+     */
+    duration?: number;
+}
+export interface ToastApi {
+    success: (message: React.ReactNode, options?: ToastOptions) => number;
+    error: (message: React.ReactNode, options?: ToastOptions) => number;
+    warning: (message: React.ReactNode, options?: ToastOptions) => number;
+    info: (message: React.ReactNode, options?: ToastOptions) => number;
+    /** Fecha um aviso pelo número que as funções acima devolvem. */
+    dismiss: (id: number) => void;
+}
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    /** Nome do botão × de cada aviso, para leitores de ecrã. Por omissão: "Fechar aviso". */
+    closeLabel?: string;
+    /** Nome da zona dos avisos, para leitores de ecrã. Por omissão: "Avisos". */
+    regionLabel?: string;
+    /** Máximo de avisos visíveis ao mesmo tempo; os mais antigos saem. Por omissão 4. */
+    max?: number;
+}
+/**
+ * Avisos da app. Fora de um ToastProvider dá erro, para não se perderem
+ * avisos sem ninguém reparar.
+ */
+export declare function useToast(): ToastApi;
+/**
+ * Avisos do resultado de uma ação, no canto inferior direito (ex: "Ticket
+ * guardado", "Não foi possível apagar").
+ *
+ * Monta-se uma vez à volta da app; em qualquer ecrã, `useToast()` dá
+ * `success`, `error`, `warning` e `info`. Desaparecem sozinhos (os erros
+ * ficam mais tempo); com o rato por cima ficam até ele sair. Aparecem por cima
+ * de uma janela (Dialog) aberta.
+ *
+ * Substituem o `alert()` do browser. Erros de validação de um formulário não
+ * vão aqui: ficam junto aos campos.
+ */
+export default function ToastProvider({ children, closeLabel, regionLabel, max }: ToastProviderProps): React.JSX.Element;

package/dist/types/v1/components/forms/FormField/FormField.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+export interface FormFieldProps {
+    label: string;
+    /** Asterisco vermelho na etiqueta; o campo lá dentro fica `required`. */
+    required?: boolean;
+    /** Texto pequeno por baixo da etiqueta. */
+    hint?: string;
+    /**
+     * Marcas antes da etiqueta, a dizer de onde veio o valor (ex: lido do QR,
+     * identificado pela IA). Usar [FieldMark](#fieldmark).
+     */
+    marks?: React.ReactNode;
+    /**
+     * Lugares reservados para marcas, mesmo sem nenhuma. Assim a etiqueta não
+     * salta quando uma marca aparece depois (ex: ao ler o QR).
+     */
+    markSlots?: number;
+    /** Algo junto à etiqueta, depois das marcas (ex: o valor máximo permitido). */
+    aside?: React.ReactNode;
+    /** Depois do campo, na mesma linha (ex: cadeado, ícone de informação). */
+    end?: React.ReactNode;
+    /** Ocupa a linha toda (ex: observações, anexo). */
+    wide?: boolean;
+    /** Etiqueta alinhada ao topo em vez de ao meio (campos altos, como o [TextArea](?path=/docs/v1-primitives-forms-textarea--docs)). */
+    alignTop?: boolean;
+    /** O campo: [TextInput](?path=/docs/v1-primitives-forms-textinput--docs), [SelectInput](?path=/docs/v1-primitives-forms-selectinput--docs), [TextArea](?path=/docs/v1-primitives-forms-textarea--docs), [LookupInput](?path=/docs/v1-primitives-forms-lookupinput--docs) ou outro. */
+    children: React.ReactNode;
+}
+/**
+ * Uma linha do formulário: etiqueta e campo. Vai dentro de um
+ * [FormGrid](?path=/docs/v1-components-forms-formgrid--docs).
+ *
+ * Liga a etiqueta ao campo (clicar na etiqueta foca o campo) e passa-lhe o
+ * `required`, se o campo for [TextInput](?path=/docs/v1-primitives-forms-textinput--docs), [SelectInput](?path=/docs/v1-primitives-forms-selectinput--docs), [TextArea](?path=/docs/v1-primitives-forms-textarea--docs) ou [LookupInput](?path=/docs/v1-primitives-forms-lookupinput--docs).
+ */
+export default function FormField({ label, required, hint, marks, markSlots, aside, end, wide, alignTop, children }: FormFieldProps): React.JSX.Element;
+export interface FieldMarkProps {
+    /** De onde veio o valor (ex: "Lido do QR Code"). Mostrado ao passar o rato e lido pelos leitores de ecrã. */
+    title: string;
+    /** O ícone, a 11 px (ex: `<QrCodeIcon size={11} />`). */
+    icon: React.ReactNode;
+}
+/** Marca pequena antes da etiqueta de um FormField, a dizer de onde veio o valor. */
+export declare function FieldMark({ title, icon }: FieldMarkProps): React.JSX.Element;

package/dist/types/v1/components/forms/FormGrid/FormGrid.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface FormGridProps {
+    /** Campos por linha: 2 (etiqueta · campo · etiqueta · campo) ou 1. */
+    columns?: 1 | 2;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const useFormGrid: () => {
+    columns: 1 | 2;
+};
+/**
+ * Grelha de um formulário: etiquetas à esquerda, alinhadas à direita, e os
+ * campos ao lado. Os filhos são [FormField](?path=/docs/v1-components-forms-formfield--docs)
+ * e, entre grupos, `FormDivider`.
+ *
+ * Adapta-se à largura do sítio onde está (não à do ecrã): abaixo de 680 px as
+ * etiquetas estreitam; abaixo de 500 px cada etiqueta fica por cima do campo.
+ *
+ * **Exemplo completo:** [Formulário em modal](?path=/docs/v1-patterns-forms-formulário-em-modal--docs).
+ */
+export default function FormGrid({ columns, className, children }: FormGridProps): React.JSX.Element;
+/** Linha de separação entre grupos de campos, a toda a largura. */
+export declare function FormDivider(): React.JSX.Element;

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type SideNavLabels, type SideNavProps } from '../SideNav/SideNav';
+export interface AppShellLabels extends SideNavLabels {
+    openMenu: string;
+}
+export interface AppShellProps extends Omit<SideNavProps, 'open' | 'onOpenChange' | 'footer' | 'labels'> {
+    children: React.ReactNode;
+    /** Conteúdo extra no rodapé do menu, por cima do tema (ex: um filtro global). */
+    sidebarFooter?: (expanded: boolean) => React.ReactNode;
+    /** Barras no topo, com a largura toda (ex: "A ver como…", "A sincronizar…"). Empurram o menu e a página para baixo. */
+    banners?: React.ReactNode;
+    /** Barra fixa por cima da página, à direita do menu (ex: título e alertas). Traz o seu próprio fundo. */
+    topBar?: React.ReactNode;
+    /**
+     * A página ocupa a altura que sobra do ecrã, sem scroll da página (ex:
+     * quadros e listas que fazem scroll por dentro, com o `Page` em `fill`).
+     * As margens são as mesmas das outras páginas.
+     */
+    fullHeight?: boolean;
+    /** Menu aberto ao entrar (ecrãs grandes). Por omissão sim; fechado fica só com os ícones. */
+    defaultOpen?: boolean;
+    /** A pessoa abriu ou fechou o menu (para a app guardar a escolha, se quiser). */
+    onOpenChange?: (open: boolean) => void;
+    labels?: Partial<AppShellLabels>;
+}
+/**
+ * A moldura da app: o menu lateral (`SideNav`) à esquerda e a página à
+ * direita, com barras opcionais no topo.
+ *
+ * Em ecrãs pequenos (< 1024px) o menu é uma gaveta, aberta pelo botão no canto,
+ * que fecha ao mudar de página.
+ *
+ * Precisa de estar dentro de um Router do react-router.
+ */
+export default function AppShell({ children, sidebarFooter, banners, topBar, fullHeight, defaultOpen, onOpenChange, labels, ...sideNav }: AppShellProps): React.JSX.Element;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type PageHeaderProps } from '../PageHeader/PageHeader';
+export interface PageProps extends PageHeaderProps {
+    /** Separadores da página (ex: `<Tabs …/>`), entre o cabeçalho e o conteúdo. */
+    tabs?: React.ReactNode;
+    /**
+     * A página ocupa a altura que sobra e o conteúdo faz scroll por dentro (ex:
+     * quadros e listas compridas). Usar com o `fullHeight` do `AppShell`.
+     */
+    fill?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * Uma página da app: cabeçalho (`PageHeader`), separadores opcionais e o
+ * conteúdo, sempre com os mesmos espaços entre eles. As margens à volta vêm do
+ * `AppShell`; a página não põe as suas.
+ *
+ * **Caminho automático**: dentro do `AppShell`, numa página que está num grupo
+ * do menu, o caminho por cima do título é "grupo › página" (ex: "App & Dev ›
+ * Sprints"), com os nomes do menu. Passar `breadcrumb` substitui-o (ex: no
+ * detalhe de um registo); `breadcrumb={[]}` tira-o.
+ */
+export default function Page({ tabs, fill, children, breadcrumb, ...header }: PageProps): React.JSX.Element;

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;