@proef/common-ui 2.2.6 → 2.5.0

package/dist/types/legacy/components/charts/Charts.d.ts

@@ -61,11 +61,14 @@ export interface BarrasProps {
     /** Clique numa barra: devolve a etiqueta, a posição e a série. */
     onClick?: CliqueGrafico;
 }
-/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
-export declare function Barras({ labels: todas, series: todasSeries, horizontal, empilhado, altura, limite, cores, formatar, valores, percentagem, legenda, formatarEtiqueta, onClick, }: BarrasProps): React.JSX.Element;
+/**
+ * Migrado para o V1: adaptador do `BarChart` (mesmas props de sempre).
+ * @deprecated Legacy — usar o `BarChart` do V1. Ver Storybook › Legacy.
+ */
+export declare function Barras({ labels, series, horizontal, empilhado, altura, limite, cores, formatar, valores, percentagem, legenda, formatarEtiqueta, onClick, }: BarrasProps): React.JSX.Element;
 /**
  * Stacked bars for a dimension over time.
- * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
+ * @deprecated Legacy — usar o `BarChart` do V1 com `stacked`. Ver Storybook › Legacy.
  */
 export declare function BarrasEmpilhadas({ serie, altura, onClick }: {
     serie: SerieEmpilhada;
@@ -74,7 +77,7 @@ export declare function BarrasEmpilhadas({ serie, altura, onClick }: {
 }): React.JSX.Element;
 /**
  * Horizontal bars of a distribution (top N).
- * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
+ * @deprecated Legacy — usar o `BarChart` do V1 com `horizontal`. Ver Storybook › Legacy.
  */
 export declare function BarrasHorizontais({ dados, altura, limite, onClick, }: {
     dados: Distribuicao;
@@ -82,7 +85,10 @@ export declare function BarrasHorizontais({ dados, altura, limite, onClick, }: {
     limite?: number;
     onClick?: CliqueGrafico;
 }): React.JSX.Element;
-/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+/**
+ * Migrado para o V1: adaptador do `DonutChart`.
+ * @deprecated Legacy — usar o `DonutChart` do V1. Ver Storybook › Legacy.
+ */
 export declare function Anel({ dados, altura, cores, formatar, onClick, }: {
     dados: Distribuicao;
     altura?: number;
@@ -94,7 +100,7 @@ export declare function Anel({ dados, altura, cores, formatar, onClick, }: {
 }): React.JSX.Element;
 /**
  * Simple line chart — optionally formats values as currency.
- * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
+ * @deprecated Legacy — usar o `LineChart` do V1. Ver Storybook › Legacy.
  */
 export declare function Linha({ dados, altura, euros: emEuros, onClick, }: {
     dados: Distribuicao;
@@ -104,11 +110,8 @@ export declare function Linha({ dados, altura, euros: emEuros, onClick, }: {
 }): React.JSX.Element;
 /**
  * Several lines over the same labels — NOT stacked.
- *
- * Separate from `BarrasEmpilhadas` on purpose: two series that measure the same
- * thing at two moments (created vs closed) must be read against each other, and
- * stacking them would draw their sum, which means nothing.
- * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
+ * Migrado para o V1: adaptador do `LineChart` (com a legenda sempre, como antes).
+ * @deprecated Legacy — usar o `LineChart` do V1. Ver Storybook › Legacy.
  */
 export declare function Linhas({ serie, altura, area, cores, formatar, formatarEtiqueta, onClick, }: {
     serie: SerieEmpilhada;

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

@@ -162,6 +162,9 @@ export interface DataTableLabels {
     total: string;
     /** Nome acessível da zona com scroll horizontal (só com `scrollAffordance`). */
     scrollRegion?: string;
+    /** Botões do popup de filtro: a escolha da lista só filtra ao confirmar (default 'Cancel'/'Confirm'). */
+    cancel?: string;
+    confirm?: string;
 }
 interface DataTableProps<T> {
     columns: DataTableColumn<T>[];
@@ -306,6 +309,14 @@ interface DataTableProps<T> {
      * deslizá-la com ←/→/Home/End. Default desligado.
      */
     scrollAffordance?: boolean;
+    /**
+     * No telemóvel (< 640px) cada linha é um cartão: a 1.ª coluna em destaque e as outras como
+     * "rótulo: valor", uma por linha, sem as vazias (as colunas sem rótulo, como as ações, ficam à direita do
+     * título). Com muitas
+     * colunas a tabela só mostrava duas ou três e o resto ficava escondido a deslizar para o lado.
+     * Ordenar e filtrar fazem-se no ecrã largo; os filtros ativos continuam nas etiquetas. Default ligado.
+     */
+    mobileCards?: boolean;
 }
 /**
  * Timestamp de um valor de coluna de data. As apps passam a data já formatada (`value:
@@ -340,5 +351,5 @@ export declare function pesquisaCuringa(q: string): (v: string) => boolean;
  * filtrar, ordenar e agrupar só olhariam para a página à vista.
  * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.
  */
-export default function DataTable<T>({ columns, data, allData, onDataNeeded, isAllDataLoading, alwaysClient, totalCount, onClientModeChange, rowKey, onRowClick, onRowDoubleClick, rowClassName, onVisibleRowsChange, isLoading, isError, maxHeight, pageSize, pageSizeOptions, selectable, onSelectionChange, isRowSelectable, initialSelectedKeys, clearSelectionTrigger, storageKey, defaultMaxColumnWidth, resizableColumns, sortFromFilter, filterMode, defaultSortKey, defaultSortDir, viewRef, exportFileName, onExport, extraToolbar, emptySubLabel, emptyIcon, labels, totalRow, defaultGroupBy, groupBy, onGroupByChange, onSortChange, onColumnFiltersChange, scrollAffordance, }: DataTableProps<T>): React.JSX.Element;
+export default function DataTable<T>({ columns, data, allData, onDataNeeded, isAllDataLoading, alwaysClient, totalCount, onClientModeChange, rowKey, onRowClick, onRowDoubleClick, rowClassName, onVisibleRowsChange, isLoading, isError, maxHeight, pageSize, pageSizeOptions, selectable, onSelectionChange, isRowSelectable, initialSelectedKeys, clearSelectionTrigger, storageKey, defaultMaxColumnWidth, resizableColumns, sortFromFilter, filterMode, defaultSortKey, defaultSortDir, viewRef, exportFileName, onExport, extraToolbar, emptySubLabel, emptyIcon, labels, totalRow, defaultGroupBy, groupBy, onGroupByChange, onSortChange, onColumnFiltersChange, scrollAffordance, mobileCards, }: DataTableProps<T>): React.JSX.Element;
 export {};

package/dist/types/legacy/components/organisms/GanttChart/GanttChart.d.ts

@@ -26,6 +26,14 @@ export interface GanttLegendItem {
     kind?: 'block' | 'marker';
 }
 /** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
+export interface GanttClickInfo {
+    row: GanttRow;
+    /** Dia clicado (ISO yyyy-mm-dd) — só nos losangos. */
+    day?: string;
+    /** Linha-pai quando `row` é uma linha-filho. */
+    parent?: GanttRow;
+}
+/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
 export interface GanttChartProps {
     rows: GanttRow[];
     /** Início e fim do eixo (ISO). */
@@ -48,13 +56,19 @@ export interface GanttChartProps {
         count?: number;
         parent?: GanttRow;
     }) => React.ReactNode;
+    /** Clique num losango (marker). Torna-o clicável. */
+    onMarkerClick?: (info: GanttClickInfo & {
+        day: string;
+    }) => void;
+    /** Clique no rótulo de uma linha-filho (as linhas-pai continuam a expandir/recolher). */
+    onRowClick?: (info: GanttClickInfo) => void;
     /** Nomes dos meses (i18n). Default PT. */
     monthNames?: string[];
     emptyText?: string;
     className?: string;
 }
 /** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */
-export default function GanttChart({ rows, start, end, dayWidth, labelWidth, labelHeader, legend, expanded: expandedProp, onExpandedChange, renderTooltip, monthNames, emptyText, className, }: GanttChartProps): React.JSX.Element;
+export default function GanttChart({ rows, start, end, dayWidth, labelWidth, labelHeader, legend, expanded: expandedProp, onExpandedChange, renderTooltip, onMarkerClick, onRowClick, monthNames, emptyText, className, }: GanttChartProps): React.JSX.Element;
 /**
  * Utilitário: ISO de um dia do eixo (para quem precisa de formatar tooltips).
  * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.

package/dist/types/legacy/exports/organisms.d.ts

@@ -2,7 +2,7 @@ export { default as Profile } from '../components/organisms/Profile/Profile';
 export { LazyLoader } from '../components/organisms/LazyLoader/LazyLoader';
 export { Selector } from '../components/organisms/Selector/Selector';
 export { default as GanttChart, ganttDiaIso } from '../components/organisms/GanttChart/GanttChart';
-export type { GanttRow, GanttLegendItem, GanttChartProps } from '../components/organisms/GanttChart/GanttChart';
+export type { GanttRow, GanttLegendItem, GanttChartProps, GanttClickInfo } from '../components/organisms/GanttChart/GanttChart';
 export { default as StatusMatrix } from '../components/organisms/StatusMatrix/StatusMatrix';
 export type { StatusMatrixProps, StatusMatrixRow, StatusMatrixColumn, StatusMatrixStatus, StatusMatrixCell } from '../components/organisms/StatusMatrix/StatusMatrix';
 export { default as MapaPontos } from '../components/organisms/MapaPontos/MapaPontos';

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

@@ -0,0 +1,103 @@
+import React from 'react';
+/** Uma série: nome (legenda e tooltip), um valor por etiqueta e, opcionalmente, a cor. */
+export interface ChartSeries {
+    name: string;
+    values: number[];
+    color?: string;
+}
+/** Clique num elemento: a etiqueta (ex: "Incidente"), a posição e a série (quando há várias). */
+export type ChartClick = (label: string, index: number, series?: string) => void;
+interface ChartBaseProps {
+    /** Altura em px. */
+    height?: number;
+    /** A carregar: mostra um bloco a pulsar com a altura do gráfico (a página não salta). */
+    loading?: boolean;
+    /** Texto quando não há dados ou é tudo zero. */
+    emptyLabel?: string;
+    /** Descrição para leitores de ecrã (ex: "Tickets por estado"). */
+    ariaLabel?: string;
+    /** Clique num elemento — tipicamente filtra a página. */
+    onClick?: ChartClick;
+    /**
+     * Etiqueta selecionada (ex: o filtro ativo): as outras ficam esbatidas. Com `onClick`,
+     * mostra o que o clique filtrou sem precisar de outra legenda.
+     */
+    activeLabel?: string | null;
+    className?: string;
+}
+/**
+ * A paleta dos gráficos no tema atual (lida dos tokens `--color-chart-N`). Para legendas
+ * ou indicadores fora do gráfico com as mesmas cores das séries.
+ */
+export declare function useChartPalette(): string[];
+/** 'YYYY-Sxx' / 'YYYY-MM' / 'YYYY-MM-DD' → etiqueta curta no eixo; o resto fica igual. */
+export declare function shortDateLabel(b: string): string;
+export interface BarChartProps extends ChartBaseProps {
+    labels: string[];
+    /** Uma ou várias séries (ex: "Atribuídos" e "Resolvidos"), lado a lado ou empilhadas. */
+    series: ChartSeries[];
+    /** Barras deitadas, com as etiquetas à esquerda (bom para nomes compridos e rankings). */
+    horizontal?: boolean;
+    /** Séries empilhadas em vez de lado a lado. */
+    stacked?: boolean;
+    /** Só as primeiras N (ex: top 10). */
+    limit?: number;
+    /** Cor de cada barra, quando há uma só série (ex: a cor de cada estado). */
+    colors?: string[];
+    /** Formato dos valores no tooltip, nas etiquetas e no eixo (ex: minutos → "7h30"). */
+    format?: (v: number) => string;
+    /** Valor na ponta de cada barra (não nas empilhadas). */
+    showValues?: boolean;
+    /** Junta a percentagem do total ao valor (ex: "12 (34%)"); só com uma série. */
+    showPercent?: boolean;
+    /** Legenda das séries. Por omissão, só quando há mais do que uma. */
+    legend?: boolean;
+    /** Formato das etiquetas do eixo. Por omissão, datas ISO ficam curtas (`shortDateLabel`). */
+    formatLabel?: (label: string) => string;
+}
+/**
+ * Barras verticais ou deitadas, de uma ou várias séries, lado a lado ou empilhadas.
+ *
+ * Clique numa barra com `onClick`; com `activeLabel`, as outras ficam esbatidas (o filtro
+ * aplicado lê-se no próprio gráfico). Sem dados, mostra `emptyLabel`; a carregar, um bloco.
+ */
+export declare function BarChart({ labels: allLabels, series: allSeries, horizontal, stacked, height, limit, colors, format, showValues, showPercent, legend, formatLabel, onClick, activeLabel, loading, emptyLabel, ariaLabel, className, }: BarChartProps): React.JSX.Element;
+export interface DonutChartProps extends ChartBaseProps {
+    labels: string[];
+    values: number[];
+    /** Cor de cada fatia (ex: a cor de cada estado). Por omissão, a paleta. */
+    colors?: string[];
+    /** Formato dos valores no tooltip e nas fatias. */
+    format?: (v: number) => string;
+    /**
+     * Texto no centro do anel. `true` mostra o total (com `format`); um texto mostra esse
+     * texto (ex: "128 tickets").
+     */
+    centerLabel?: boolean | string;
+}
+/**
+ * Anel de uma distribuição (ex: tickets por estado). Percentagem no tooltip, valor nas
+ * fatias com espaço para ele e, com `centerLabel`, o total no meio.
+ */
+export declare function DonutChart({ labels, values, height, colors, format, centerLabel, onClick, activeLabel, loading, emptyLabel, ariaLabel, className, }: DonutChartProps): React.JSX.Element;
+export interface LineChartProps extends ChartBaseProps {
+    labels: string[];
+    /**
+     * Uma ou várias linhas sobre as mesmas etiquetas — NÃO empilhadas: duas séries que medem
+     * o mesmo em dois momentos (criados vs fechados) leem-se uma contra a outra.
+     */
+    series: ChartSeries[];
+    /** Área por baixo de cada linha. Só se lê bem com uma ou duas séries. */
+    area?: boolean;
+    /** Cor de cada série, pela ordem (ou `color` na série). */
+    colors?: string[];
+    /** Formato dos valores no tooltip e no eixo. */
+    format?: (v: number) => string;
+    /** Formato das etiquetas do eixo. Por omissão, datas ISO ficam curtas. */
+    formatLabel?: (label: string) => string;
+    /** Legenda das séries. Por omissão, só quando há mais do que uma. */
+    legend?: boolean;
+}
+/** Linhas sobre o tempo (ou outra sequência), com o tooltip de todas as séries no mesmo ponto. */
+export declare function LineChart({ labels, series, height, area, colors, format, formatLabel, legend, onClick, loading, emptyLabel, ariaLabel, className, }: LineChartProps): React.JSX.Element;
+export {};

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

@@ -70,6 +70,8 @@ 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 { BarChart, DonutChart, LineChart, useChartPalette, shortDateLabel } from './components/data/Charts/Charts';
+export type { BarChartProps, DonutChartProps, LineChartProps, ChartSeries, ChartClick } from './components/data/Charts/Charts';
 export { Card } from './primitives/display/Card/Card';
 export type { CardProps } from './primitives/display/Card/Card';
 export { Kpi } from './primitives/display/Kpi/Kpi';

package/dist/types/v1/primitives/forms/SelectInput/SelectInput.d.ts

@@ -52,6 +52,18 @@ export interface SelectInputProps {
     labels?: Partial<SelectInputLabels>;
     /** Classes da caixa à volta (ex: a largura). */
     className?: string;
+    /**
+     * Escolha múltipla: cada opção leva ✓ e a lista fica aberta a marcar e desmarcar.
+     * Usa `values` / `onValuesChange` em vez de `value` / `onValueChange`.
+     */
+    multiple?: boolean;
+    /** As escolhidas, com `multiple` (controlado). */
+    values?: string[];
+    defaultValues?: string[];
+    /** Recebe as escolhidas, com `multiple`, pela ordem das opções. */
+    onValuesChange?: (values: string[]) => void;
+    /** Com `multiple`: o texto do botão quando estão todas escolhidas (ex: "Todos os tipos"). */
+    allLabel?: string;
 }
 /**
  * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o

package/dist/types/v1/primitives/lists/ListItem/ListItem.d.ts

@@ -40,7 +40,7 @@ export interface ListItemProps extends ListItemContent {
  * fechava cada linha numa caixa. Desenhada como fundo (e não com um ::after,
  * que o botão da linha já usa); a última linha não a leva.
  */
-export declare const LINHA_ESBATIDA = "bg-[linear-gradient(to_right,transparent,var(--color-slate-200)_15%,var(--color-slate-200)_85%,transparent)] bg-[length:100%_1px] bg-bottom bg-no-repeat last:bg-none";
+export declare const LINHA_ESBATIDA = "bg-[linear-gradient(to_right,transparent,var(--color-slate-200)_15%,var(--color-slate-200)_85%,transparent)] dark:bg-[linear-gradient(to_right,transparent,var(--color-slate-800)_15%,var(--color-slate-800)_85%,transparent)] bg-[length:100%_1px] bg-bottom bg-no-repeat last:bg-none";
 /**
  * Texto com os pedaços que batem com a pesquisa realçados: numa descrição
  * comprida, ou num número de dez dígitos, não se via onde é que o que se

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proef/common-ui",
-  "version": "2.2.6",
+  "version": "2.5.0",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",