forlogic-core 3.0.11 → 4.0.0

package/dist/components/insights/insight-phases.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @module InsightPhases
+ * Hierarquia de estados e fases dos infográficos de composição de fluxo.
+ *
+ * Uma **fase** agrupa **estados**. Cada fase pode ser colapsada (uma série
+ * agregada) ou expandida (uma série por estado). A fase ativa usa o tom do
+ * tema; as demais usam a escada de cinzas (ver `phaseColors`).
+ */
+import * as React from 'react';
+import type { InsightPoint, InsightSeries } from './insight-primitives';
+/** Estado (sub-nível) de uma fase. */
+export interface InsightState {
+    key: string;
+    label: string;
+}
+/** Fase do fluxo, com seus estados internos. */
+export interface InsightPhase {
+    /** Chave da fase nos dados (`InsightPoint[key]`). */
+    key: string;
+    label: string;
+    /** Estados que compõem a fase. Sem estados, a fase não expande. */
+    states?: InsightState[];
+}
+/** Fases padrão de um fluxo de trabalho (backlog → execução → conclusão). */
+export declare const DEFAULT_PHASES: InsightPhase[];
+/** Resultado da resolução de fases: séries e dados prontos para a primitiva. */
+export interface PhaseResolution {
+    series: InsightSeries[];
+    data: InsightPoint[];
+    expanded: Record<string, boolean>;
+    toggle: (key: string) => void;
+    expandAll: () => void;
+    collapseAll: () => void;
+    phases: InsightPhase[];
+}
+/**
+ * Deriva séries/dados a partir das fases e do estado de expansão. Fases
+ * colapsadas viram uma série; expandidas viram uma série por estado, com o
+ * total da fase distribuído entre os estados.
+ */
+export declare function usePhaseHierarchy(phases: InsightPhase[], data: InsightPoint[], { activeIndex }?: {
+    activeIndex?: number;
+}): PhaseResolution;
+/** Botões de expandir/colapsar por fase (hierarquia estados > fases). */
+export declare function PhaseControls({ phases, expanded, onToggle, onExpandAll, onCollapseAll, className, }: {
+    phases: InsightPhase[];
+    expanded: Record<string, boolean>;
+    onToggle: (key: string) => void;
+    onExpandAll?: () => void;
+    onCollapseAll?: () => void;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/insights/insight-primitives.d.ts

@@ -0,0 +1,289 @@
+/**
+ * @module InsightPrimitives
+ * Primitivas de gráfico dos infográficos (Insight Charts).
+ *
+ * Todas são responsivas (largura fluida + altura configurável), dinâmicas
+ * (dados via props) e temáticas: as cores vêm sempre da escada derivada do tom
+ * ativo do card (`--insight-tone`) ou de tokens do tema.
+ *
+ * Padrão único de comportamento (ver `insight-motion`):
+ * - entrada animada com a mesma curva orgânica e cascata por índice;
+ * - hover/foco com realce e tooltip na mesma bolha, em CSS, SVG ou Recharts;
+ * - raios de canto vindos do token `R`;
+ * - geometria alinhada ao pixel (`snap`) e SVG com `shapeRendering` explícito.
+ */
+import * as React from 'react';
+export { TXT as INSIGHT_TEXT, TYPO as INSIGHT_TYPO, AXIS_TICK as INSIGHT_AXIS_TICK, ChartTipBubble, R as INSIGHT_RADIUS, SHADOW as INSIGHT_SHADOW, EASE as INSIGHT_EASE, useChartReveal, useChartTip, } from './insight-motion';
+/** Tooltip padrão dos infográficos (mesma anatomia do StatCard). */
+export declare function InsightTooltip({ active, payload, label, unit, }: {
+    active?: boolean;
+    payload?: Array<{
+        name?: string;
+        value?: number | string;
+        color?: string;
+        payload?: Record<string, unknown>;
+    }>;
+    label?: string | number;
+    unit?: string;
+}): React.JSX.Element;
+/**
+ * Degradê vertical padrão de toda área preenchida do catálogo.
+ *
+ * Quatro paradas com queda progressiva até transparente: elimina o "corte"
+ * grosseiro do fim do preenchimento e mantém o mesmo peso visual em claro/escuro.
+ */
+export declare function AreaFill({ id, color, top }: {
+    id: string;
+    color: string;
+    top?: number;
+}): React.JSX.Element;
+/**
+ * Caminho suave (Catmull-Rom → Bézier cúbica).
+ *
+ * Usado nas sparklines SVG: substitui os segmentos retos por curva contínua,
+ * dando a leitura orgânica das linhas Recharts (`type="monotone"`).
+ */
+export declare function smoothPath(pts: Array<{
+    x: number;
+    y: number;
+}>, tension?: number): string;
+/** Ponto genérico das séries. */
+export interface InsightPoint {
+    label: string;
+    [key: string]: string | number;
+}
+/** Série nomeada. */
+export interface InsightSeries {
+    key: string;
+    label: string;
+    /** Sobrescreve a cor derivada do tom. */
+    color?: string;
+}
+/** Barras verticais sobre trilho (bullet). Valor relativo ao máximo da série. */
+export declare function TrackBars({ data, height: heightProp, max, showLabels, highlight, unit, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    max?: number;
+    showLabels?: boolean;
+    /** Índice destacado (usa o tom cheio; os demais ficam suaves). */
+    highlight?: number;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Barras empilhadas (2+ séries) com cantos arredondados. */
+export declare function StackedBars({ data, series, height: heightProp, showLabels, rounded, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    showLabels?: boolean;
+    rounded?: 'full' | 'md';
+    className?: string;
+}): React.JSX.Element;
+/** Barras agrupadas lado a lado (comparação de períodos). */
+export declare function GroupedBars({ data, series, height: heightProp, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    className?: string;
+}): React.JSX.Element;
+/** Barras flutuantes (faixa de mínimo/máximo por período). */
+export declare function FloatingBars({ data, height: heightProp, ticks, unit, className, }: {
+    data: Array<{
+        label: string;
+        from: number;
+        to: number;
+    }>;
+    height?: number;
+    ticks?: number;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Colunas segmentadas (cada coluna divide o total em segmentos por série). */
+export declare function BulletStack({ data, series, height: heightProp, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    className?: string;
+}): React.JSX.Element;
+/** Barras com linha de referência (MAX) e um período em destaque. */
+export declare function BarsWithMax({ data, height: heightProp, highlight, maxLabel, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    highlight?: number;
+    maxLabel?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Ranking horizontal (largura proporcional + escada de tons). */
+export declare function RankingBars({ data, className, showValue, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    className?: string;
+    showValue?: boolean;
+}): React.JSX.Element;
+/** Pares horizontais: progresso sobre trilho, uma linha por item. */
+export declare function HorizontalBarPairs({ data, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        total: number;
+    }>;
+    className?: string;
+}): React.JSX.Element;
+/** Heatmap de contribuições (grade semanal). */
+export declare function ContributionHeatmap({ weeks, rows, values, columnLabels, className, }: {
+    weeks?: number;
+    rows?: number;
+    /** Valores de 0 a 4 (intensidade). Gerados de forma estável quando ausentes. */
+    values?: number[][];
+    columnLabels?: string[];
+    className?: string;
+}): React.JSX.Element;
+/** Escala "Menos → Mais" do heatmap. */
+export declare function HeatmapScale({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/** Linha suavizada com eixos, pontos e grade vertical. */
+export declare function Spline({ data, height: heightProp, orientation, dots, unit, yUnit, dashed, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    /** `vertical` inverte os eixos (curva em S, estilo altitude). */
+    orientation?: 'horizontal' | 'vertical';
+    dots?: boolean;
+    unit?: string;
+    yUnit?: string;
+    dashed?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/** Área com gradiente (sparkline expressiva). */
+export declare function AreaSpark({ data, height: heightProp, axis, dots, unit, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+    }>;
+    height?: number;
+    axis?: boolean;
+    dots?: boolean;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Duas ou mais linhas comparadas, com halo opcional (banda de dispersão). */
+export declare function MultiLine({ data, series, height: heightProp, axis, halo, unit, yUnit, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    axis?: boolean;
+    halo?: boolean;
+    unit?: string;
+    yUnit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Áreas empilhadas (composição por categoria ao longo do tempo). */
+export declare function StackedArea({ data, series, height: heightProp, axis, mirrored, unit, className, }: {
+    data: InsightPoint[];
+    series: InsightSeries[];
+    height?: number;
+    axis?: boolean;
+    /** Espelha o gráfico (fluxo/intensidade). */
+    mirrored?: boolean;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Linha com faixa de variação (mín/máx) ao fundo. */
+export declare function RangeAreaLine({ data, height: heightProp, yUnit, unit, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        min: number;
+        max: number;
+    }>;
+    height?: number;
+    yUnit?: string;
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/**
+ * Sparkline compacta para cabeçalhos, células e rodapés.
+ *
+ * Traço desenhado progressivamente na entrada, guide dots alinhados a cada
+ * ponto e tooltip na bolha canônica ao passar o ponteiro.
+ */
+export declare function MiniSparkline({ data, width, height: heightProp, tone, dots, interactive, labels, unit, className, }: {
+    data: number[];
+    width?: number;
+    height?: number;
+    tone?: string;
+    /** Exibe os guide dots em cada ponto da série. */
+    dots?: boolean;
+    /** Hover com tooltip. Default: `true`. */
+    interactive?: boolean;
+    /** Rótulos opcionais por ponto (eixo x do tooltip). */
+    labels?: string[];
+    unit?: string;
+    className?: string;
+}): React.JSX.Element;
+/** Donut de progresso com rótulo central. */
+export declare function DonutGauge({ value, total, size, thickness, label, caption, segments, className, }: {
+    value: number;
+    total?: number;
+    size?: number;
+    thickness?: number;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    /** Divide o anel em segmentos categóricos (soma = value). */
+    segments?: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    className?: string;
+}): React.JSX.Element;
+/** Anéis concêntricos (comparação de múltiplas séries em progresso). */
+export declare function ConcentricRings({ data, size, thickness, gap, label, caption, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        total?: number;
+        color?: string;
+    }>;
+    size?: number;
+    thickness?: number;
+    gap?: number;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** Pizza categórica (participação). */
+export declare function SharePie({ data, height: heightProp, donut, className, }: {
+    data: Array<{
+        label: string;
+        value: number;
+        color?: string;
+    }>;
+    height?: number;
+    donut?: boolean;
+    className?: string;
+}): React.JSX.Element;
+/** Barra de progresso rotulada (uso/limite) com marcador MAX. */
+export declare function ProgressMeter({ value, total, caption, maxLabel, className, }: {
+    value: number;
+    total?: number;
+    caption?: React.ReactNode;
+    maxLabel?: React.ReactNode;
+    className?: string;
+}): React.JSX.Element;
+/** Pontos de intensidade (escada de tons) usada em rodapés. */
+export declare function IntensityDots({ steps, className }: {
+    steps?: number;
+    className?: string;
+}): React.JSX.Element;

package/dist/components/insights/insight-tokens.d.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties } from 'react';
+/**
+ * @module InsightTokens
+ * Paleta e helpers de cor dos infográficos (Insight Charts).
+ *
+ * Regra canônica: **nenhuma cor fixa**. Toda a escada de séries é derivada dos
+ * tokens do tema ativo (`--primary`, `--card`, `--control-*`) via `color-mix`,
+ * garantindo que o mesmo chart funcione em todos os temas e nos modos claro/escuro.
+ */
+/** Tons semânticos suportados pelos infográficos (mesma família do StatCard). */
+export type InsightTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
+/** Variável CSS base de cada tom. */
+export declare const INSIGHT_TONE_VAR: Record<InsightTone, string>;
+/** Cor do tom ativo do card (usa a variável local `--insight-tone`). */
+export declare const TONE = "hsl(var(--insight-tone))";
+/** Cor do tom ativo com alpha. */
+export declare const toneAlpha: (a: number) => string;
+/**
+ * Escada de série derivada do tom ativo: 0 = mais saturado/escuro,
+ * 1 = mais claro (misturado com a superfície do card).
+ */
+export declare const toneStep: (step: number) => string;
+/**
+ * Paleta **monocromática** única de TODOS os charts.
+ *
+ * Regra: nenhuma cor semântica (verde/amarelo/vermelho) é usada para
+ * discriminar categorias. A escada parte do tom do tema (marca) e **desce até
+ * o cinza** do tema, seguindo a proporção visual 60/30/10:
+ * 60% do peso na marca (índices 0–1), 30% em tons intermediários (2–3),
+ * 10% em cinzas residuais (4–5).
+ */
+export declare const CHART_PALETTE: string[];
+/** Cor da n-ésima série na paleta única (cicla depois de 6). */
+export declare const paletteColor: (index: number) => string;
+/**
+ * Sequência monocromática para `count` séries: distribui a escada
+ * marca → cinza de forma proporcional, mantendo o contraste entre vizinhos
+ * mesmo quando há mais séries do que passos na paleta.
+ */
+export declare const seriesColors: (count: number) => string[];
+/**
+ * Passo contínuo da escada monocromática: `0` = marca profunda,
+ * `5` = cinza claro. Usado quando há mais séries do que passos discretos.
+ */
+export declare const monoStep: (step: number) => string;
+/**
+ * Escada neutra do tema (cinzas) usada para discriminar **estados e fases**:
+ * 0 = cinza mais forte (fase concluída/atual em leitura neutra),
+ * 4 = quase superfície (fase futura/inativa).
+ */
+export declare const grayStep: (step: number) => string;
+/**
+ * Cores de fases: a fase ativa (e as anteriores, quando `cumulative`) usa a
+ * escada do tom; as demais caem nos cinzas do tema — mesmo padrão dos prints
+ * de referência, onde o gráfico separa fases por tom vs. cinza.
+ */
+export declare const phaseColors: (count: number, activeIndex?: number, { cumulative }?: {
+    cumulative?: boolean;
+}) => string[];
+/** Cor do trilho/fundo das barras e anéis. */
+export declare const TRACK = "color-mix(in oklab, hsl(var(--muted)) 88%, hsl(var(--card)) 12%)";
+/** Cor das linhas de grade. */
+export declare const GRID = "hsl(var(--surface-border))";
+/** Estilo inline que injeta o tom ativo no card. */
+export declare const insightToneStyle: (tone?: InsightTone) => CSSProperties;
+/** Formata número no padrão pt-BR. */
+export declare const fmt: (value: number, digits?: number) => string;
+/** Formata variação percentual com sinal. */
+export declare const fmtDelta: (delta: number) => string;
+/** Abrevia números grandes (1.2K, 3,4M). */
+export declare const fmtCompact: (value: number) => string;

package/dist/components/insights/insight-variants.d.ts

@@ -0,0 +1,153 @@
+/**
+ * @module InsightVariants
+ * As 35 variantes canônicas de infográfico (Insight Charts) do Design System.
+ *
+ * Cada variante é um **componente reutilizável**: recebe dados por prop, cai em
+ * um conjunto de dados de demonstração quando nada é passado e compõe sempre
+ * `InsightCard` (shell) + uma primitiva de gráfico. Nenhuma cor fixa — tudo é
+ * derivado do tom ativo do tema (ver `insight-tokens`).
+ */
+import * as React from 'react';
+import { type InsightPoint, type InsightSeries } from './insight-primitives';
+import { type InsightTone } from './insight-tokens';
+import { type InsightPhase } from './insight-phases';
+/** Ponto simples de série (rótulo + valor) usado pela maioria das variantes. */
+export interface InsightDatum {
+    label: string;
+    value: number;
+}
+/** Props comuns a todas as variantes de infográfico. */
+export interface InsightChartProps {
+    /** Título do card. */
+    title?: React.ReactNode;
+    /** Linha de apoio acima do título. */
+    kicker?: React.ReactNode;
+    /** Descrição curta. */
+    description?: React.ReactNode;
+    /** Tom semântico (brand, success, warning, danger, neutral). */
+    tone?: InsightTone;
+    /** Série principal. Quando ausente, usa os dados de demonstração. */
+    data?: InsightDatum[];
+    /** Valor destacado. Quando ausente, é calculado a partir da série. */
+    value?: React.ReactNode;
+    /** Unidade do valor. */
+    unit?: string;
+    /** Variação percentual. */
+    delta?: number;
+    /** Texto de comparação do delta. */
+    comparison?: React.ReactNode;
+    /** Rodapé livre do card. */
+    footer?: React.ReactNode;
+    /** Altura útil do gráfico. */
+    height?: number;
+    className?: string;
+}
+/** Props das variantes com mais de uma série. */
+export interface InsightMultiChartProps extends Omit<InsightChartProps, 'data'> {
+    /** Pontos com uma chave por série. */
+    data?: InsightPoint[];
+    /** Definição das séries exibidas. */
+    series?: InsightSeries[];
+}
+/** Props das variantes de composição de fluxo (hierarquia estados > fases). */
+export interface InsightPhaseChartProps extends Omit<InsightChartProps, 'data'> {
+    /** Pontos com uma chave por fase. */
+    data?: InsightPoint[];
+    /** Fases do fluxo e seus estados internos. */
+    phases?: InsightPhase[];
+}
+/** 01 · Barras sobre trilho, com o período mais recente em destaque. */
+export declare function ChartTrackBars({ title, data, value, unit, delta, comparison, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 02 · Barras com linha de referência no pico da série. */
+export declare function ChartBarsWithMax({ title, data, value, unit, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 03 · Barras empilhadas por composição de status. */
+export declare function ChartStackedBars({ title, data, phases, height, ...rest }: InsightPhaseChartProps): React.JSX.Element;
+/** 04 · Barras agrupadas comparando dois períodos. */
+export declare function ChartGroupedBars({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 05 · Barras flutuantes com faixa de mínimo e máximo. */
+export declare function ChartFloatingBars({ title, height, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 06 · Colunas segmentadas (cada coluna divide o total por série). */
+export declare function ChartBulletColumns({ title, data, phases, height, ...rest }: InsightPhaseChartProps): React.JSX.Element;
+/** 07 · Ranking horizontal com valor à direita. */
+export declare function ChartRankingBars({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 08 · Barras horizontais com meta (valor sobre total). */
+export declare function ChartBarPairs({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 09 · Barras com total consolidado no cabeçalho. */
+export declare function ChartTotalBars({ title, data, unit, delta, ...rest }: InsightChartProps): React.JSX.Element;
+/** 10 · Barras compactas com sparkline de apoio. */
+export declare function ChartBarsWithSparkline({ title, data, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 11 · Linha suavizada com eixos e pontos. */
+export declare function ChartSpline({ title, data, unit, delta, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 12 · Linha tracejada (projeção / cenário previsto). */
+export declare function ChartProjectionSpline({ title, data, unit, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 13 · Curva vertical (perfil em S, estilo altitude). */
+export declare function ChartVerticalSpline({ title, data, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 14 · Área simples (sparkline preenchido, sem eixos). */
+export declare function ChartAreaSpark({ title, data, unit, delta, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 15 · Área com eixos e pontos marcados. */
+export declare function ChartAreaAxis({ title, data, unit, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 16 · Duas linhas comparando séries. */
+export declare function ChartMultiLine({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 17 · Linhas com halo (destaque do ponto mais recente). */
+export declare function ChartHaloLines({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 18 · Áreas empilhadas (composição ao longo do tempo). */
+export declare function ChartStackedArea({ title, data, phases, height, ...rest }: InsightPhaseChartProps): React.JSX.Element;
+/** 19 · Área espelhada (fluxo/intensidade). */
+export declare function ChartMirroredFlow({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 20 · Linha com banda de confiança (mín./máx.). */
+export declare function ChartRangeBand({ title, height, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 21 · Área dupla com filtro segmentado (estilo "população estimada"). */
+export declare function ChartSegmentedArea({ title, data, series, height, ...rest }: InsightMultiChartProps): React.JSX.Element;
+/** 22 · Grade de sparklines (vários indicadores lado a lado). */
+export declare function ChartSparklineTiles({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 23 · Linha em card "chart-first" (gráfico acima do texto). */
+export declare function ChartChartFirstLine({ title, data, unit, delta, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 24 · Anel de progresso com valor central. */
+export declare function ChartDonutGauge({ title, value, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 25 · Anel dividido em segmentos categóricos. */
+export declare function ChartDonutSegments({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 26 · Anéis concêntricos (vários indicadores no mesmo alvo). */
+export declare function ChartConcentricRings({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 27 · Pizza de participação. */
+export declare function ChartSharePie({ title, data, height, ...rest }: InsightChartProps): React.JSX.Element;
+/** 28 · Rosca de participação com valor destacado. */
+export declare function ChartDonutShare({ title, data, height, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 29 · Medidor linear de progresso com marcador de máximo. */
+export declare function ChartProgressMeter({ title, value, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** 30 · Score em anel com variação e leitura qualitativa. */
+export declare function ChartScoreDial({ title, value, delta, ...rest }: InsightChartProps): React.JSX.Element;
+/** 31 · Mapa de contribuição (calor por dia). */
+export declare function ChartContributionHeatmap({ title, ...rest }: InsightChartProps): React.JSX.Element;
+/** 32 · Intensidade por faixa (pontos graduados). */
+export declare function ChartIntensityScale({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 33 · Card com pessoa responsável no rodapé. */
+export declare function ChartOwnerSpotlight({ title, data, unit, delta, ...rest }: InsightChartProps): React.JSX.Element;
+/** 34 · Placar de equipe (ranking + avatar do líder). */
+export declare function ChartTeamScoreboard({ title, data, ...rest }: InsightChartProps): React.JSX.Element;
+/** 35 · Resumo comparativo (barras + leitura lado a lado). */
+export declare function ChartComparisonSummary({ title, data, unit, ...rest }: InsightChartProps): React.JSX.Element;
+/** Famílias de infográficos usadas na navegação da área de Charts. */
+export declare const INSIGHT_FAMILIES: readonly ["Barras", "Linhas & Áreas", "Radiais", "Matriz & Pessoas"];
+export type InsightFamily = (typeof INSIGHT_FAMILIES)[number];
+/** Entrada do catálogo de variantes (usada nos docs e no seletor de widgets). */
+export interface InsightChartEntry {
+    id: string;
+    label: string;
+    family: InsightFamily;
+    description: string;
+    /** Componente da variante. Todos aceitam `InsightChartProps`. */
+    Component: React.ComponentType<InsightChartProps & InsightMultiChartProps>;
+    /** A variante consome séries simples (`data: {label, value}[]`). */
+    simple: boolean;
+}
+/** Catálogo canônico das 35 variantes de infográfico. */
+export declare const INSIGHT_CHARTS: InsightChartEntry[];
+/** Busca uma variante do catálogo pelo id. */
+export declare const findInsightChart: (id: string) => InsightChartEntry;
+/** Agrupa o catálogo por família (ordem de `INSIGHT_FAMILIES`). */
+export declare const insightChartsByFamily: () => {
+    family: "Barras" | "Linhas & Áreas" | "Radiais" | "Matriz & Pessoas";
+    charts: InsightChartEntry[];
+}[];
+/** Grade responsiva padrão para exibir infográficos. */
+export declare const INSIGHT_GRID: string;