xertica-ui 2.5.0 → 2.5.2

package/CHANGELOG.md

@@ -11,6 +11,41 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [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<typeof Tooltip>` (que omite `payload`/`label` no recharts 3) para tipos explícitos usando `RechartsPrimitive.TooltipPayload` e `DefaultTooltipContentProps['formatter']`
+  - `ChartLegendContent`: substituído `Pick<LegendProps, 'payload' | 'verticalAlign'>` por `{ payload?: LegendPayload[]; verticalAlign?: ... }` (recharts 3 removeu `payload` de `LegendProps`)
+  - `DonutBreakdownChart`: removida prop `activeIndex` do `<Pie>` (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

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.5.0-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.5.2-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---
@@ -353,30 +353,69 @@ Xertica UI uses semantic CSS tokens. **Never use raw colors or generic Tailwind
 
 ### Color Themes
 
-Nine built-in color themes, each with a hue-tinted dark mode:
+Nine built-in themes — each sets the primary color, sidebar, chart palette, and dark-mode surface hue. Select at `init` time or change later with `npx xertica-ui update → Theme only`.
 
-| ID                  | Name            | Dark background |
-| ------------------- | --------------- | --------------- |
-| `xertica-original`  | Xertica         | `#05050d` (indigo) |
-| `zinc`              | Zinc            | `#05050d` (indigo) |
-| `slate`             | Slate           | `#05050d` (indigo) |
-| `blue`              | Blue            | `#03050f` (blue)   |
-| `violet`            | Violet          | `#07040f` (violet) |
-| `rose`              | Rose            | `#0f0305` (rose)   |
-| `emerald`           | Emerald         | `#030f08` (green)  |
-| `amber`             | Amber           | `#0f0a03` (amber)  |
-| `orange`            | Orange          | `#0f0703` (orange) |
+| Theme | ID | Primary | Sidebar | Dark bg |
+|---|---|---|---|---|
+| ![#2C275B](https://img.shields.io/badge/-%232C275B-2C275B?style=flat-square) Xertica | `xertica-original` | `#2C275B` | `#2C275B` | `#05050d` |
+| ![#18181B](https://img.shields.io/badge/-%2318181B-18181B?style=flat-square) Zinc | `zinc` | `#18181B` | `#18181B` | `#05050d` |
+| ![#0F172A](https://img.shields.io/badge/-%230F172A-0F172A?style=flat-square) Slate | `slate` | `#0F172A` | `#0F172A` | `#05050d` |
+| ![#2563EB](https://img.shields.io/badge/-%232563EB-2563EB?style=flat-square) Blue | `blue` | `#2563EB` | `#1E3A8A` | `#03050f` |
+| ![#7C3AED](https://img.shields.io/badge/-%237C3AED-7C3AED?style=flat-square) Violet | `violet` | `#7C3AED` | `#4C1D95` | `#07040f` |
+| ![#BE123C](https://img.shields.io/badge/-%23BE123C-BE123C?style=flat-square) Rose | `rose` | `#BE123C` | `#881337` | `#0f0305` |
+| ![#047857](https://img.shields.io/badge/-%23047857-047857?style=flat-square) Emerald | `emerald` | `#047857` | `#064E3B` | `#030f08` |
+| ![#B45309](https://img.shields.io/badge/-%23B45309-B45309?style=flat-square) Amber | `amber` | `#B45309` | `#78350F` | `#0f0a03` |
+| ![#C2410C](https://img.shields.io/badge/-%23C2410C-C2410C?style=flat-square) Orange | `orange` | `#C2410C` | `#7C2D12` | `#0f0703` |
 
-Select a theme via `XerticaProvider`:
+> Each badge renders the **exact primary color** of that theme as a filled swatch. Generated by the CLI and stored in `src/styles/xertica/tokens.css`.
+
+**CLI — Select at project creation:**
+
+```bash
+npx xertica-ui@latest init my-app
+# → "Select the default color theme" prompt appears during init
+```
+
+**CLI — Change theme in an existing project:**
+
+```bash
+npx xertica-ui update
+# → choose "Theme only"
+# → select any of the 9 themes
+# → src/styles/xertica/tokens.css is fully regenerated
+# → .xertica.json is updated with the new themeId for future updates
+```
+
+**Code — Select theme in `XerticaProvider`:**
 
 ```tsx
-// Full theme preset — correct primary, sidebar, charts AND dark surfaces
+// Full preset — sets primary, sidebar, charts AND hue-tinted dark surfaces
 <XerticaProvider defaultColorTheme="blue">
-
-// Custom hex primary only (dark surfaces stay neutral)
+<XerticaProvider defaultColorTheme="rose">
+<XerticaProvider defaultColorTheme="emerald">
+<XerticaProvider defaultColorTheme="violet">
+<XerticaProvider defaultColorTheme="amber">
+<XerticaProvider defaultColorTheme="orange">
+<XerticaProvider defaultColorTheme="xertica-original"> {/* default */}
+
+// Custom hex — sets primary only; dark surfaces use the neutral default
 <XerticaProvider primaryColor="#7C3AED">
 ```
 
+**What each theme changes:**
+
+| Token category       | Controlled by theme |
+| -------------------- | ------------------- |
+| `--primary`          | ✅ Light + dark variant |
+| `--sidebar`          | ✅ Light + dark variant |
+| `--chart-1..5`       | ✅ Brand-matched palette |
+| `--gradient-diagonal`| ✅ Brand-matched gradient |
+| `--background`       | ✅ Dark mode only (hue-tinted) |
+| `--card`, `--popover`| ✅ Dark mode only (hue-tinted) |
+| `--muted`, `--accent`| ✅ Dark mode only (hue-tinted) |
+| `--border`, `--input`| ✅ Dark mode only (hue-tinted) |
+| Light mode surfaces  | ❌ Always white/zinc (unchanged) |
+
 ### Mobile Content Padding
 
 The CSS token `--mobile-content-padding` (default `1.25rem`) controls the horizontal padding of content areas on small screens (`< 768px`). To adjust it globally, override it in your project's `src/styles/xertica/tokens.css`:

package/assets/xertica-logo.svg

@@ -1,38 +1,38 @@
-<svg
-  fill="none"
-  preserveAspectRatio="xMidYMid meet"
-  viewBox="0 0 1543 289"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="Xertica.ai">
-    <path d="M1352.82 239.808V285.425H1304.73V239.808H1352.82Z" fill="#00BEFF" />
-    <path d="M814.8 284.848H766.711V77.4971H814.8V284.848Z" fill="#00BEFF" />
-    <path d="M1543 284.438H1514.2V160.28H1543V284.438Z" fill="#00BEFF" />
-    <path 
-      clip-rule="evenodd"
-      d="M1432.83 157.796C1446.98 157.796 1459.14 162.515 1468.58 170.709V160.28H1497.38V284.438H1468.58V274.01C1459.14 282.451 1446.98 286.921 1432.83 286.921C1395.1 286.921 1368.29 260.352 1368.29 222.359C1368.29 184.616 1395.1 157.796 1432.83 157.796ZM1432.83 183.778C1410.79 183.778 1396.27 199.061 1396.27 222.359C1396.27 245.658 1410.79 260.94 1432.83 260.94C1454.63 260.94 1468.9 245.658 1468.9 222.359C1468.9 199.06 1454.63 183.778 1432.83 183.778Z"
-      fill="#00BEFF"
-      fill-rule="evenodd"
-    />
-    <path d="M947.87 73.3516C1002.88 73.3516 1044.42 107.647 1053.57 159.234H1004.68C997.221 132.988 976.34 117.308 947.87 117.308C911.387 117.308 887.337 142.612 887.337 181.176C887.337 219.739 911.387 245.036 947.87 245.036C976.34 245.036 997.221 229.356 1004.68 203.109H1053.57C1044.47 254.701 1003.26 289 947.87 289C884.853 289 840.078 244.626 840.078 181.176C840.078 118.142 884.854 73.3516 947.87 73.3516Z" fill="#00BEFF" />
-    <path d="M88.4971 39.8242L157.353 142.191L83.5371 251.524L60.9277 284.854H0L96.3154 142.191L5.37695 7H66.3047L88.4971 39.8242Z" fill="#00BEFF" />
-    <path d="M254.314 284.855H193.387L151.914 223.71L182.548 178.551L254.314 284.855Z" fill="#00BEFF" />
-    <path 
-      clip-rule="evenodd"
-      d="M1179.14 73.3477C1202.77 73.3477 1223.08 81.2286 1238.84 94.9121V77.4971H1286.94V284.847H1238.84V267.431C1223.09 281.528 1202.77 288.992 1179.14 288.992C1116.12 288.992 1071.35 244.622 1071.35 181.172C1071.35 118.139 1116.12 73.3478 1179.14 73.3477ZM1179.14 117.308C1142.66 117.308 1118.61 142.604 1118.61 181.172C1118.61 219.739 1142.66 245.035 1179.14 245.035C1215.21 245.035 1238.84 219.739 1238.84 181.172C1238.84 142.605 1215.21 117.308 1179.14 117.308Z"
-      fill="#00BEFF"
-      fill-rule="evenodd"
-    />
-    <path d="M1543 145.383H1514.2V118.067H1543V145.383Z" fill="#00BEFF" />
-    <path d="M672.466 77.501H736.31V121.457H672.466V211.448C672.466 230.939 682.415 240.891 702.313 240.891H736.309V284.852H698.999C649.246 284.851 625.203 259.968 625.203 211.449V7H672.466V77.501Z" fill="#00BEFF" />
-    <path d="M814.8 52.6172H766.711V7H814.8V52.6172Z" fill="#00BEFF" />
-    <path 
-      clip-rule="evenodd"
-      d="M354.069 73.3516C417.086 73.3517 461.864 118.143 461.864 181.176C461.864 187.396 461.031 193.615 460.204 199.422H295.197C301.829 228.864 323.392 246.696 354.069 246.696C372.724 246.696 389.309 241.721 399.675 226.376H452.742C441.132 265.774 400.501 288.996 354.069 288.996C291.053 288.996 246.274 244.626 246.273 181.176C246.273 118.142 291.053 73.3516 354.069 73.3516ZM354.068 115.65C325.044 115.65 303.902 131.826 296.44 158.78H410.863C403.819 131.826 382.672 115.65 354.068 115.65Z"
-      fill="#00BEFF"
-      fill-rule="evenodd"
-    />
-    <path d="M596.957 121.453H562.962C543.064 121.453 533.114 131.409 533.114 150.899V284.847H485.852V150.899C485.852 102.38 509.894 77.4972 559.647 77.4971H596.957V121.453Z" fill="#00BEFF" />
-    <path d="M182.552 98.6992L151.922 53.3906L188.014 0H248.941L182.552 98.6992Z" fill="#00BEFF" />
-  </g>
+<svg
+  fill="none"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 1543 289"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Xertica.ai">
+    <path d="M1352.82 239.808V285.425H1304.73V239.808H1352.82Z" fill="#00BEFF" />
+    <path d="M814.8 284.848H766.711V77.4971H814.8V284.848Z" fill="#00BEFF" />
+    <path d="M1543 284.438H1514.2V160.28H1543V284.438Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M1432.83 157.796C1446.98 157.796 1459.14 162.515 1468.58 170.709V160.28H1497.38V284.438H1468.58V274.01C1459.14 282.451 1446.98 286.921 1432.83 286.921C1395.1 286.921 1368.29 260.352 1368.29 222.359C1368.29 184.616 1395.1 157.796 1432.83 157.796ZM1432.83 183.778C1410.79 183.778 1396.27 199.061 1396.27 222.359C1396.27 245.658 1410.79 260.94 1432.83 260.94C1454.63 260.94 1468.9 245.658 1468.9 222.359C1468.9 199.06 1454.63 183.778 1432.83 183.778Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M947.87 73.3516C1002.88 73.3516 1044.42 107.647 1053.57 159.234H1004.68C997.221 132.988 976.34 117.308 947.87 117.308C911.387 117.308 887.337 142.612 887.337 181.176C887.337 219.739 911.387 245.036 947.87 245.036C976.34 245.036 997.221 229.356 1004.68 203.109H1053.57C1044.47 254.701 1003.26 289 947.87 289C884.853 289 840.078 244.626 840.078 181.176C840.078 118.142 884.854 73.3516 947.87 73.3516Z" fill="#00BEFF" />
+    <path d="M88.4971 39.8242L157.353 142.191L83.5371 251.524L60.9277 284.854H0L96.3154 142.191L5.37695 7H66.3047L88.4971 39.8242Z" fill="#00BEFF" />
+    <path d="M254.314 284.855H193.387L151.914 223.71L182.548 178.551L254.314 284.855Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M1179.14 73.3477C1202.77 73.3477 1223.08 81.2286 1238.84 94.9121V77.4971H1286.94V284.847H1238.84V267.431C1223.09 281.528 1202.77 288.992 1179.14 288.992C1116.12 288.992 1071.35 244.622 1071.35 181.172C1071.35 118.139 1116.12 73.3478 1179.14 73.3477ZM1179.14 117.308C1142.66 117.308 1118.61 142.604 1118.61 181.172C1118.61 219.739 1142.66 245.035 1179.14 245.035C1215.21 245.035 1238.84 219.739 1238.84 181.172C1238.84 142.605 1215.21 117.308 1179.14 117.308Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M1543 145.383H1514.2V118.067H1543V145.383Z" fill="#00BEFF" />
+    <path d="M672.466 77.501H736.31V121.457H672.466V211.448C672.466 230.939 682.415 240.891 702.313 240.891H736.309V284.852H698.999C649.246 284.851 625.203 259.968 625.203 211.449V7H672.466V77.501Z" fill="#00BEFF" />
+    <path d="M814.8 52.6172H766.711V7H814.8V52.6172Z" fill="#00BEFF" />
+    <path 
+      clip-rule="evenodd"
+      d="M354.069 73.3516C417.086 73.3517 461.864 118.143 461.864 181.176C461.864 187.396 461.031 193.615 460.204 199.422H295.197C301.829 228.864 323.392 246.696 354.069 246.696C372.724 246.696 389.309 241.721 399.675 226.376H452.742C441.132 265.774 400.501 288.996 354.069 288.996C291.053 288.996 246.274 244.626 246.273 181.176C246.273 118.142 291.053 73.3516 354.069 73.3516ZM354.068 115.65C325.044 115.65 303.902 131.826 296.44 158.78H410.863C403.819 131.826 382.672 115.65 354.068 115.65Z"
+      fill="#00BEFF"
+      fill-rule="evenodd"
+    />
+    <path d="M596.957 121.453H562.962C543.064 121.453 533.114 131.409 533.114 150.899V284.847H485.852V150.899C485.852 102.38 509.894 77.4972 559.647 77.4971H596.957V121.453Z" fill="#00BEFF" />
+    <path d="M182.552 98.6992L151.922 53.3906L188.014 0H248.941L182.552 98.6992Z" fill="#00BEFF" />
+  </g>
 </svg>

package/assets/xertica-x-logo.svg

@@ -1,21 +1,21 @@
-<svg
-  fill="none"
-  preserveAspectRatio="xMidYMid meet"
-  viewBox="0 0 258 282"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <g id="Xertica X">
-    <path 
-      d="M67.2666 0.0361328L89.7793 33.3447L159.63 137.228L84.7471 248.178L61.8115 282H0L97.7109 137.228L5.45508 0.0361328H67.2666Z" 
-      fill="#00BEFF" 
-    />
-    <path 
-      d="M258 282H196.185L154.114 219.951L185.192 174.123L258 282Z" 
-      fill="#00BEFF" 
-    />
-    <path 
-      d="M252.696 0.186523L185.042 100.142L154.106 54.0693L190.884 0L252.696 0.186523Z" 
-      fill="#00BEFF" 
-    />
-  </g>
+<svg
+  fill="none"
+  preserveAspectRatio="xMidYMid meet"
+  viewBox="0 0 258 282"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g id="Xertica X">
+    <path 
+      d="M67.2666 0.0361328L89.7793 33.3447L159.63 137.228L84.7471 248.178L61.8115 282H0L97.7109 137.228L5.45508 0.0361328H67.2666Z" 
+      fill="#00BEFF" 
+    />
+    <path 
+      d="M258 282H196.185L154.114 219.951L185.192 174.123L258 282Z" 
+      fill="#00BEFF" 
+    />
+    <path 
+      d="M252.696 0.186523L185.042 100.142L154.106 54.0693L190.884 0L252.696 0.186523Z" 
+      fill="#00BEFF" 
+    />
+  </g>
 </svg>

package/bin/cli.ts

@@ -30,6 +30,7 @@ interface XerticaConfig {
   version: 1;
   hasAssistant: boolean;
   disableDarkMode?: boolean;
+  themeId?: string;
 }
 
 async function readXerticaConfig(targetDir: string): Promise<XerticaConfig | null> {
@@ -453,7 +454,7 @@ program
       await writeLanguagesConfig(targetDir, selectedLanguages);
 
       // 6.5 Persist project feature flags (.xertica.json)
-      await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode });
+      await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode, themeId: response.theme });
 
       // 6.4 Copy context
       await fs.ensureDir(path.join(targetDir, 'src', 'app', 'context'));
@@ -641,6 +642,15 @@ program
 
     // ── Theme update ─────────────────────────────────────────────────────────
     if (updateType === 'theme') {
+      const currentThemeId = currentConfig?.themeId ?? 'xertica-original';
+      const currentThemeIndex = Math.max(
+        0,
+        colorThemes.findIndex(t => t.id === currentThemeId)
+      );
+
+      const currentThemeName = colorThemes[currentThemeIndex]?.name ?? 'Xertica';
+      console.log(chalk.gray(`  Current theme: ${currentThemeName}`));
+
       const { theme } = await prompts({
         type: 'select',
         name: 'theme',
@@ -650,7 +660,7 @@ program
           description: t.description,
           value: t.id,
         })),
-        initial: 0,
+        initial: currentThemeIndex,
       });
 
       if (!theme) return;
@@ -662,7 +672,9 @@ program
         if (selectedTheme) {
           await fs.ensureDir(path.dirname(tokensPath));
           await fs.writeFile(tokensPath, generateTokensCss(selectedTheme));
+          await writeXerticaConfig(targetDir, { themeId: selectedTheme.id });
           spinner.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
+          console.log(chalk.gray('  File updated: src/styles/xertica/tokens.css'));
         } else {
           spinner.fail('Theme not found.');
         }