` nativa com `style={{ overflowY: 'auto', overflowX: 'hidden' }}`. O import de `ScrollArea` foi removido do arquivo. --- ## [2.5.2] — 2026-06-23 ### Fixed - **TypeScript — erros de tipos `recharts` 3.x no `chart.tsx`** — `TooltipPayload`, `LegendPayload` e `DefaultTooltipContentProps` foram removidos do namespace raiz do recharts 3. Corrigido importando os tipos diretamente de `recharts/types/component/DefaultTooltipContent` e `recharts/types/component/DefaultLegendContent`, anotando explicitamente os parâmetros `item`, `index` e `v` nos callbacks de `payload.map` e `formatter`. ### Added - **Sidebar — Overflow de `navigationGroups` no variant `default`** — quando a lista de grupos de navegação excede a altura disponível da sidebar, os grupos excedentes são movidos para um botão "mais opções" (`MoreVertical`). No **desktop** abre um `Popover` lateral direito com todos os grupos e itens restantes. No **mobile** expande um accordion inline (abaixo do botão, com animação Framer Motion) e a área de navegação passa a usar `ScrollArea` do design system para scroll, evitando que o conteúdo fique fora da área visível. - **Storybook — Sidebar `WithSubitemsDesktop` e `WithSubitemsMobile`** — exemplos expandidos com 4 grupos (Principal, Comercial, Comunicação, Administração) e ~18 itens raiz com múltiplos subitens, suficientes para ultrapassar a altura da tela e demonstrar o comportamento de overflow em qualquer resolução. --- ## [2.5.1] — 2026-06-22 ### Fixed - **CLI `update → Theme` — tema atual não era pré-selecionado** — o prompt de seleção de tema sempre iniciava no índice 0 (`xertica-original`), independente do tema instalado. Corrigido lendo `themeId` do `.xertica.json` e calculando o índice inicial correspondente. O nome do tema atual é exibido antes da seleção. - **CLI `update → Theme` — `themeId` não era persistido** — após trocar o tema, o `.xertica.json` não era atualizado com o novo `themeId`, fazendo com que execuções futuras continuassem sem memória da escolha. Corrigido com `writeXerticaConfig(targetDir, { themeId: selectedTheme.id })` após a escrita do `tokens.css`. - **CLI `init` — `themeId` não era salvo em `.xertica.json`** — o tema escolhido durante `init` não era persistido no arquivo de configuração do projeto. Corrigido passando `themeId: response.theme` ao `writeXerticaConfig`. - **`generate-tokens.ts` — `--sidebar-border` no dark mode estava hardcoded** — o valor `rgba(65, 61, 107, 1)` (indigo fixo) era usado para todos os temas. Corrigido usando `colors.darkBorder` para que cada tema utilize sua própria cor de borda tingida. - **`XerticaConfig` — campo `themeId` faltando na interface** — adicionado campo opcional `themeId?: string` à interface `XerticaConfig` em `bin/cli.ts`. - **Erros de TypeScript do `recharts` 3.x** — atualização da biblioteca quebrou os tipos de `ChartTooltipContent` e `ChartLegendContent`. Corrigido: - `ChartTooltipContent`: migrado de `React.ComponentProps` (que omite `payload`/`label` no recharts 3) para tipos explícitos usando `RechartsPrimitive.TooltipPayload` e `DefaultTooltipContentProps['formatter']` - `ChartLegendContent`: substituído `Pick` por `{ payload?: LegendPayload[]; verticalAlign?: ... }` (recharts 3 removeu `payload` de `LegendProps`) - `DonutBreakdownChart`: removida prop `activeIndex` do `` (não existe mais no recharts 3) - `PieMetricChart`: adicionado guard `if (midAngle == null || percent == null) return null` no callback de label - `chart.test.tsx`: adicionado `graphicalItemId` obrigatório ao mock de payload ### Changed - **CLI `update → Theme`** — exibe o tema atual antes do prompt de seleção com `chalk.gray('Current theme: ...')`. --- ## [2.5.0] — 2026-06-22 ### Added - **Sidebar — Subitens inline no mobile** — em viewports mobile (< 768 px) os itens com `children` agora expandem/colapsam de forma inline (accordion) abaixo do item pai, em vez de abrir um `DropdownMenu` lateral que ficava invisível fora dos limites do container. O botão `ChevronRight` rotaciona 90° ao abrir e os filhos surgem com animação via Framer Motion. No desktop o comportamento de dropdown lateral permanece inalterado. - **Storybook — Stories de sidebar com subitens (desktop e mobile)** — adicionadas duas novas stories na documentação da `Sidebar`: - `WithSubitemsDesktop` — sidebar iniciada expandida mostrando o botão `ChevronRight` nos itens com filhos e o dropdown lateral ao clicar. - `WithSubitemsMobile` — simula um viewport de 375 px com header de app mobile (botão hambúrguer). Ao abrir, a sidebar cobre a tela inteira e os subitens expandem inline, permitindo inspeção e ajuste do visual mobile. - **Tema de cores — Dark mode tingido por hue** — todos os tokens de superfície do dark mode (`--background`, `--card`, `--popover`, `--muted`, `--secondary`, `--accent`, `--border`, `--input`) agora são tingidos com a hue da cor primária do tema ativo, em vez de cinza-zinc neutro para todos os temas: - **primary / xertica-original**: fundo `#05050d` (azul-índigo muito sutil) - **blue**: fundo `#03050f` (azul marinho profundo) - **violet**: fundo `#07040f` (violeta escuro) - **rose**: fundo `#0f0305` (rosa/vermelho escuro) - **emerald**: fundo `#030f08` (verde escuro) - **amber**: fundo `#0f0a03` (âmbar escuro) - **orange**: fundo `#0f0703` (laranja escuro) - **zinc / slate**: mantêm o azul-índigo sutil (alinhado com o tema default) - **`BrandColorsContext` — novos campos `darkBackground`, `darkCard`, `darkMuted`, `darkBorder`** — a interface `BrandColors` em `contexts/theme-data.ts` ganhou 4 novos campos que definem as cores de superfície específicas de cada tema no dark mode. Todos os 9 temas foram atualizados com valores correspondentes. - **`XerticaProvider` — nova prop `defaultColorTheme`** — aceita o ID de um `ColorTheme` (ex: `'blue'`, `'rose'`, `'emerald'`) para selecionar o tema de cor completo via props, sem a limitação de passar apenas um hex isolado via `primaryColor`. - **Storybook — troca de temas de cor funcional** — o toolbar `Brand Color` agora troca o tema completo (primary, sidebar, charts **e** superfícies dark) com total fidelidade. Os valores do toolbar foram migrados de hex brutos para IDs de tema (`xertica-original`, `blue`, `violet`, etc.). ### Fixed - **`BrandColorsContext` — tokens de superfície dark não refletiam no Storybook** — o `applyColors()` injetava o style tag com `document.head.prepend()`, colocando-o antes de todos os outros estilos. Como os tokens de cor do `tokens.css` apareciam depois (e com seletores de maior especificidade como `:root[data-mode='dark']`), sobrescreviam os valores injetados. Corrigido com três ajustes: 1. `prepend` → `appendChild` para que o style injetado sempre apareça por último no `` e vença na cascata de mesma especificidade. 2. Os tokens de primary/sidebar/charts/semantic passaram a ser aplicados via `root.style.setProperty()` (inline style no ``), que tem especificidade máxima e sempre vence qualquer regra de stylesheet. 3. O bloco dark de superfícies usa o seletor `:root[data-mode='dark'], .dark` para igualar a especificidade do `tokens.css` e ser decidido pela ordem de aparição. - **`TemplatePage.stories.tsx` — erro ao renderizar no Storybook** — o componente `TemplatePage` usa `useAuth()` internamente, mas o decorator das stories não incluía `AuthProvider`. Ao carregar a página de documentação, o hook lançava `"useAuth must be used within "`. Corrigido adicionando `AuthProvider` dentro do `MemoryRouter` no decorator. - **Sidebar — `isMobileViewport` não consumido em `SidebarNav`** — o valor já existia no `SidebarContext` mas não era lido pelo `SidebarNav`, impedindo a bifurcação entre accordion (mobile) e dropdown (desktop). ### Changed - **`BrandColorsContext.applyColors` — estratégia de injeção de CSS** — tokens de primary aplicados via inline style (máxima prioridade); tokens de superfície dark injetados via `