xertica-ui 2.5.0 → 2.5.1

package/CHANGELOG.md

@@ -11,6 +11,28 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [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.1-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---
@@ -353,30 +353,71 @@ 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     │
+├────────────────────────────────────────────────────────────────────────────┤
+│  🟣 Xertica      xertica-original    #2C275B      #2C275B      #05050d     │
+│  ⚫ Zinc         zinc                #18181B      #18181B      #05050d     │
+│  🌑 Slate        slate               #0F172A      #0F172A      #05050d     │
+│  🔵 Blue         blue                #2563EB      #1E3A8A      #03050f     │
+│  🟣 Violet       violet              #7C3AED      #4C1D95      #07040f     │
+│  🌹 Rose         rose                #BE123C      #881337      #0f0305     │
+│  🟢 Emerald      emerald             #047857      #064E3B      #030f08     │
+│  🟡 Amber        amber               #B45309      #78350F      #0f0a03     │
+│  🟠 Orange       orange              #C2410C      #7C2D12      #0f0703     │
+└────────────────────────────────────────────────────────────────────────────┘
+```
+
+**CLI — Select at project creation:**
+
+```bash
+npx xertica-ui@latest init my-app
+# → "Select the default color theme" prompt appears during init
+```
 
-Select a theme via `XerticaProvider`:
+**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/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.');
         }

package/bin/generate-tokens.ts

@@ -232,10 +232,10 @@ export const generateTokensCss = (theme: ColorTheme): string => {
   --sidebar: ${rgba(colors.sidebarDark)};
   --sidebar-foreground: rgba(250, 250, 250, 1);
   --sidebar-primary: rgba(255, 255, 255, 1);
-  --sidebar-primary-foreground: ${rgba(colors.primary)}; /* Often primary brand color on dark background */
-  --sidebar-accent: rgba(63, 63, 70, 1);
+  --sidebar-primary-foreground: ${rgba(colors.primary)};
+  --sidebar-accent: rgba(255, 255, 255, 0.08);
   --sidebar-accent-foreground: rgba(250, 250, 250, 1);
-  --sidebar-border: rgba(65, 61, 107, 1); /* Keeping subtle border */
+  --sidebar-border: ${rgba(colors.darkBorder)};
   --sidebar-ring: ${rgba(colors.primaryDarkMode, 0.5)};
   
   /* Gradients */

package/dist/cli.js

@@ -537,10 +537,10 @@ var generateTokensCss = (theme) => {
   --sidebar: ${rgba(colors.sidebarDark)};
   --sidebar-foreground: rgba(250, 250, 250, 1);
   --sidebar-primary: rgba(255, 255, 255, 1);
-  --sidebar-primary-foreground: ${rgba(colors.primary)}; /* Often primary brand color on dark background */
-  --sidebar-accent: rgba(63, 63, 70, 1);
+  --sidebar-primary-foreground: ${rgba(colors.primary)};
+  --sidebar-accent: rgba(255, 255, 255, 0.08);
   --sidebar-accent-foreground: rgba(250, 250, 250, 1);
-  --sidebar-border: rgba(65, 61, 107, 1); /* Keeping subtle border */
+  --sidebar-border: ${rgba(colors.darkBorder)};
   --sidebar-ring: ${rgba(colors.primaryDarkMode, 0.5)};
   
   /* Gradients */
@@ -1133,7 +1133,7 @@ program.command("init").description("Initialize a new Xertica UI project").argum
     );
     await syncLocaleFiles(templatesDir, targetDir, selectedLanguages, { pruneOthers: true });
     await writeLanguagesConfig(targetDir, selectedLanguages);
-    await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode });
+    await writeXerticaConfig(targetDir, { hasAssistant, disableDarkMode, themeId: response.theme });
     await fs2.ensureDir(path2.join(targetDir, "src", "app", "context"));
     await fs2.copy(
       path2.join(templatesDir, "src", "app", "context", "AuthContext.tsx"),
@@ -1287,6 +1287,13 @@ program.command("update").alias("update-theme").description("Update theme or pro
   });
   if (!updateType) return;
   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",
@@ -1296,7 +1303,7 @@ program.command("update").alias("update-theme").description("Update theme or pro
         description: t.description,
         value: t.id
       })),
-      initial: 0
+      initial: currentThemeIndex
     });
     if (!theme) return;
     const spinner2 = ora("Updating theme...").start();
@@ -1306,7 +1313,9 @@ program.command("update").alias("update-theme").description("Update theme or pro
       if (selectedTheme) {
         await fs2.ensureDir(path2.dirname(tokensPath));
         await fs2.writeFile(tokensPath, generateTokensCss(selectedTheme));
+        await writeXerticaConfig(targetDir, { themeId: selectedTheme.id });
         spinner2.succeed(`Theme updated to "${selectedTheme.name}" successfully!`);
+        console.log(chalk.gray("  File updated: src/styles/xertica/tokens.css"));
       } else {
         spinner2.fail("Theme not found.");
       }

package/llms-compact.txt

@@ -1,6 +1,6 @@
 # Xertica UI — Compact Reference
 
-> 97-component React design system. Tailwind CSS v4 + Radix UI + Lucide Icons. v2.5.0
+> 97-component React design system. Tailwind CSS v4 + Radix UI + Lucide Icons. v2.5.1
 > Full docs: llms-full.txt | Component index: llms.txt | Decision guide: docs/decision-tree.md
 
 ---

package/llms.txt

@@ -1,6 +1,6 @@
 # Xertica UI
 
-> Enterprise-grade React design system — 97 components built on Tailwind CSS v4, Radix UI, and Lucide Icons. Designed to be consumed directly by AI coding agents (LLMs, Cursor, Claude Code, Copilot). v2.5.0
+> Enterprise-grade React design system — 97 components built on Tailwind CSS v4, Radix UI, and Lucide Icons. Designed to be consumed directly by AI coding agents (LLMs, Cursor, Claude Code, Copilot). v2.5.1
 
 Xertica UI ships with full source, typed declarations, Storybook stories, and structured documentation inside `node_modules/xertica-ui/`. AI agents should read this file first, then follow links for component-specific detail.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Xertica UI — Enterprise-grade React design system with Tailwind CSS v4, Radix UI, and AI-first documentation.",
   "type": "module",
   "main": "./dist/index.cjs.js",

package/templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui-template",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "private": true,
   "type": "module",
   "scripts": {
@@ -24,7 +24,7 @@
     "react-i18next": "^17.0.8",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.5.0",
+    "xertica-ui": "^2.5.1",
     "zustand": "^5.0.13"
   },
   "devDependencies": {