@nextelco/common-ui 2.1.103 → 2.1.105

package/dist/theme.css

@@ -0,0 +1,256 @@
+/* Tokens do V1: tamanhos, tipos de letra, sombras e cores partilhados pelos
+ * componentes. Mudar um valor aqui muda-o em todos os componentes que o usam.
+ *
+ * Cada token gera as classes do Tailwind com o seu nome (ex: --spacing-control
+ * → h-control, w-control; --text-control → text-control; --shadow-card →
+ * shadow-card). Uma app pode sobrepor qualquer um no seu próprio CSS
+ * (ex: `:root { --spacing-control: 38px }`).
+ *
+ * `static`: os tokens vão sempre para o CSS, mesmo os que só são usados
+ * dentro de outros valores (ex: a largura das etiquetas no FormGrid).
+ * Importado por tailwind.css e tailwind.layered.css. */
+@theme static {
+  /* Cores */
+  --color-primary-strong: #00124a; /* navy mais escuro, para gradientes */
+  --color-scrollbar: #c1c1c1;
+  --color-scrollbar-hover: #a8a8a8;
+
+  /* Tipos de letra */
+  --text-title: 15px; /* títulos de caixas e janelas */
+  --text-control: 13px; /* texto dos campos e botões */
+  --text-caption: 11px; /* contadores, avisos, tamanhos de ficheiro */
+  --text-micro: 10px; /* dicas por baixo das etiquetas */
+
+  /* Tamanhos */
+  --spacing-control: 34px; /* altura dos campos e dos botões quadrados ao lado deles */
+  --spacing-form-label: 172px; /* coluna das etiquetas no FormGrid */
+  --spacing-form-label-narrow: 112px; /* a mesma coluna, em sítios estreitos */
+
+  /* Larguras a partir das quais o FormGrid muda (container queries: @max-form-md, @max-form-sm) */
+  --container-form-md: 680px; /* etiquetas mais estreitas */
+  --container-form-sm: 500px; /* etiquetas por cima dos campos */
+
+  /* Larguras máximas das janelas (Dialog): max-w-dialog-sm, -md, -lg */
+  --container-dialog-sm: 480px;
+  --container-dialog-md: 720px;
+  --container-dialog-lg: 1000px;
+  /* Espaço mínimo entre a janela e as bordas do ecrã */
+  --spacing-dialog-margin: 24px;
+
+  /* Animações de entrada das janelas */
+  --animate-dialog-in: dialog-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
+  --animate-backdrop-in: backdrop-in 0.2s ease-out both;
+
+  @keyframes dialog-in {
+    from { opacity: 0; transform: translateY(10px) scale(0.97); }
+  }
+  @keyframes backdrop-in {
+    from { opacity: 0; }
+  }
+
+  /* Sombras (na cor primária, para seguirem a paleta) */
+  --shadow-card: 0 10px 30px color-mix(in srgb, var(--color-primary) 8%, transparent);
+  --shadow-card-hover: 0 14px 36px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  --shadow-card-active: 0 16px 40px color-mix(in srgb, var(--color-primary) 16%, transparent);
+  --shadow-popover: 0 6px 18px color-mix(in srgb, var(--color-primary) 12%, transparent);
+  --shadow-tile: 0 10px 24px color-mix(in srgb, var(--color-primary) 18%, transparent);
+  --shadow-page: 0 1px 5px color-mix(in srgb, var(--color-primary) 10%, transparent);
+  --shadow-modal: 0 24px 60px color-mix(in srgb, var(--color-primary) 25%, transparent);
+}
+
+/* Fundo do corpo das janelas: um brilho navy que desce do cabeçalho e
+   desvanece para branco. Na cor primária, para seguir a paleta. */
+@utility bg-canvas {
+  background-image:
+    radial-gradient(125% 70% at 50% -12%, color-mix(in srgb, var(--color-primary) 7%, transparent) 0%, transparent 55%),
+    linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 5%, white) 0%, color-mix(in srgb, var(--color-primary) 2%, white) 55%, white 100%);
+}
+
+/* Esconde a barra de scroll do browser, mantendo o scroll (ex: quando há uma
+   barra desenhada por cima, como nas tabelas com `overlayScrollbars`). */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Sem o aspeto do browser dentro de `v1-reset` (ex: a Table): botões sem fundo,
+   borda nem margens, e com a letra de quem os rodeia; tabelas sem espaço entre
+   células. A biblioteca não traz o preflight do Tailwind, para não mexer nas
+   páginas da app; isto só toca no que está dentro da classe.
+   Em `@layer base` e com especificidade zero (`:where`): qualquer classe do
+   componente ganha-lhe. */
+@layer base {
+  :where(.v1-reset) :where(button) {
+    appearance: none;
+    background: none;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: inherit;
+    letter-spacing: inherit;
+    text-transform: inherit;
+    cursor: pointer;
+  }
+  :where(.v1-reset) :where(button:disabled) {
+    cursor: default;
+  }
+  :where(.v1-reset) :where(input, select) {
+    font: inherit;
+    color: inherit;
+    margin: 0;
+  }
+  :where(.v1-reset) :where(table) {
+    border-collapse: collapse;
+  }
+  :where(.v1-reset) :where(th) {
+    font-weight: inherit;
+    text-align: inherit;
+  }
+}
+
+/* Tema do common-ui: tokens de cor (claro e escuro), raios, estados e a variante `dark:`.
+ *
+ * Fonte única. É importado por tailwind.css e tailwind.layered.css (o CSS compilado da
+ * biblioteca) e, junto com tokens.css, é publicado como `dist/theme.css` para as apps
+ * com Tailwind próprio: importado uma vez, o Tailwind da app passa a gerar, sob pedido,
+ * todas as classes dos tokens (border-foreground, bg-primary/80, ring-primary, ...),
+ * sem depender das que a biblioteca por acaso usa. */
+/* `dark:` passa a reagir a classe `.dark` no <html> (o que o useTheme aplica),
+   e nao ao prefers-color-scheme (default do Tailwind v4). */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* Design system proef (fonte de verdade: Tickets/frontend/src/index.css).
+   Os --color-* do @theme geram as utilities (bg-card, text-muted-foreground,
+   border-border, bg-primary, ...). Os que referenciam hsl(var(--x)) buscam o
+   valor ao :where(:root) abaixo (ou ao :root do consumidor, que ganha). */
+@theme {
+  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-proef-navy: #001b63;
+  --color-proef-turquoise: #00d28d;
+  --color-proef-blue: #0076ce;
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: #001b63;
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: #00d28d;
+  --color-secondary-foreground: #001b63;
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: #0076ce;
+
+  /* Status semânticos (universais) — geram bg-ok/text-ok/bg-ok-bg, etc. */
+  --color-ok: #1f8a55;
+  --color-ok-bg: #e5f6ec;
+  --color-risco: #b96e00;
+  --color-risco-bg: #fcf0dc;
+  --color-incumprido: #c23b34;
+  --color-incumprido-bg: #fbeae9;
+  --color-neutral: #767c88;
+  --color-neutral-bg: #eeeff2;
+
+  /* Base do espacamento das utilities (calc com var(--spacing)). Explicito
+     aqui p/ garantir que resolve no consumidor (senao spacing fica a 0). */
+  --spacing: 0.25rem;
+
+  /* Cantos arredondados em todos os portais (decisao 15/10/2026): botoes,
+     campos e itens de menu 8px. Cartoes (rounded-xl), pop-ups (rounded-2xl) e
+     etiquetas (rounded-full) nao dependem destes tokens. */
+  --radius-lg: 0.5rem;
+  --radius-md: 0.375rem;
+  --radius-sm: 0.25rem;
+}
+
+/* Valores default dos tokens (light). `:where(:root)` = specificity 0 → o
+   :root do consumidor (RC/Landing/...) sobrepoe sem esforco; apps novos usam
+   estes. Valores canonicos do Tickets. */
+:where(:root) {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96.1%;
+  --accent-foreground: 222.2 47.4% 11.2%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+/* Cantos quadrados, so para um portal que ainda precise deles durante a
+   transicao: data-cantos="quadrados" no <html>. Unlayered e com atributo:
+   ganha ao @theme (layer). */
+:root[data-cantos="quadrados"] {
+  --radius-sm: 0px;
+  --radius-md: 0px;
+  --radius-lg: 0px;
+  --radius: 0px;
+}
+
+/* Tema escuro (classe .dark no <html>). Valores do portal de Tickets: superfícies slate e estados com fundo
+   translúcido (500/15) e texto claro (300). Os tokens de estado mudam aqui, por isso Badge, Kpi com tom e tudo o
+   que use text-ok/bg-ok-bg (etc.) acompanha o tema sem classes dark: em cada componente. */
+:where(.dark) {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 47.4% 11.2%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 48%;
+}
+
+.dark {
+  --color-ok: #6ee7b7;
+  --color-ok-bg: rgb(16 185 129 / 0.15);
+  --color-risco: #fcd34d;
+  --color-risco-bg: rgb(245 158 11 / 0.15);
+  --color-incumprido: #fca5a5;
+  --color-incumprido-bg: rgb(239 68 68 / 0.15);
+  --color-neutral: #cbd5e1;
+  --color-neutral-bg: rgb(148 163 184 / 0.15);
+}

package/dist/types/legacy/components/molecules/PhotoAvatar/PhotoAvatar.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+export declare const SCOPE_PROPRIO: string[];
+export declare const SCOPE_OUTROS: string[];
 export interface GraphProfile {
     name?: string | null;
     email?: string | null;

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

@@ -0,0 +1,60 @@
+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 SelectInput). */
+    filters?: React.ReactNode;
+    /** Com isto aparece um ‹ à esquerda, para fechar ou esconder a lista. */
+    onBack?: () => void;
+    /** 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;
+    /** O servidor pagina: quantas linhas há lá ao todo. `items` é só a página atual. */
+    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. */
+    loading?: boolean;
+    labels?: Partial<ListFinderLabels>;
+    className?: 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 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`).
+ * - **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, search: pesquisaDeFora, onSearchChange, searchText, total, page, onPageChange, pageSize, loading, labels, 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/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` 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;