xertica-ui 2.1.5 → 2.1.6

package/CHANGELOG.md

@@ -7,6 +7,20 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ---
 
+## [2.1.6] — 2026-05-19
+
+### Fixed
+
+- **`templates/HomeContent.tsx` — JSX malformado causava crash da página** — tags `</div>`, `</ScrollArea>` e `</main>` estavam faltando após refatoração para `<PageContent>`, fazendo a página Home quebrar completamente ao renderizar.
+- **`templates/DashboardTemplate.tsx` — `StatsCard.trend` com tipo errado** — `trend` recebia um `number` primitivo (`trend={20.1}`) mas o prop exige um objeto `{ value: number; label?: string }`. Corrigido para `trend={{ value: 20.1, label: 'vs mês anterior' }}` em todos os 4 cards.
+- **`templates/DashboardTemplate.tsx` — `DonutBreakdownChart` com chaves acentuadas** — o `channelConfig` usava chaves como `Orgânico` que falhavam no lookup interno do chart. Renomeadas para ASCII (`organico`, `pago`, `social`, `direto`) com labels legíveis mantidas via `label:`.
+- **`templates/DashboardTemplate.tsx` — cast de `Badge.variant` sem type safety** — `event.status as 'default' | ...` foi substituído por um mapa `EVENT_BADGE_VARIANT` com tipagem `EventStatus` explícita.
+- **`templates/SettingsContent.tsx` — imports duplicados de `xertica-ui/hooks`** — `useTheme` e `useLayout` eram importados em duas linhas separadas do mesmo módulo. Unificados em um único import.
+- **`templates/SettingsContent.tsx` — `Separator`, `Badge` e `useNavigate` importados mas nunca usados** — removidos para evitar erros de lint/build.
+- **`templates/SettingsContent.tsx` — `Switch.onCheckedChange` com tipo incompatível** — `toggleTheme` é `() => void` mas `onCheckedChange` exige `(checked: boolean) => void`. Corrigido com wrapper arrow `() => toggleTheme()`.
+
+---
+
 ## [2.1.5] — 2026-05-19
 
 ### Fixed

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.1.5-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.1.6-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/bin/cli.ts

@@ -18,7 +18,7 @@ const program = new Command();
 program
     .name('xertica-ui')
     .description('CLI to initialize Xertica UI projects')
-    .version('2.1.5');
+    .version('2.1.6');
 
 program
     .command('init')

package/dist/cli.js

@@ -534,7 +534,7 @@ var generateTokensCss = (theme) => {
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
-program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.1.5");
+program.name("xertica-ui").description("CLI to initialize Xertica UI projects").version("2.1.6");
 program.command("init").description("Initialize a new Xertica UI project").argument("[directory]", "Directory to initialize in", ".").action(async (directory) => {
   const targetDir = path.resolve(process.cwd(), directory);
   const templatesDir = path.resolve(__dirname, "../templates");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "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.1.5",
+  "version": "2.1.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -19,7 +19,7 @@
     "react-hook-form": "^7.54.2",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.1.5",
+    "xertica-ui": "^2.1.6",
     "zod": "^3.24.1"
   },
   "devDependencies": {

package/templates/src/features/home/ui/HomeContent.tsx

@@ -108,7 +108,12 @@ export function HomeContent({ user }: HomeContentProps) {
                     </Button>
                   </CardFooter>
                 </Card>
-      </div>
+
+              </div>
+            </div>
+          </div>
+        </ScrollArea>
+      </main>
     </PageContent>
   );
 }

package/templates/src/features/settings/ui/SettingsContent.tsx

@@ -9,9 +9,8 @@ import {
   Button,
   Input,
   Label,
-  Separator,
   Switch,
-  Badge,
+  ScrollArea,
   Form,
   FormField,
   FormItem,
@@ -20,15 +19,12 @@ import {
   FormDescription,
   FormMessage,
 } from 'xertica-ui/ui';
-import { useTheme } from 'xertica-ui/hooks';
+import { Header } from 'xertica-ui/layout';
+import { useLayout, useTheme } from 'xertica-ui/hooks';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
 import { toast } from 'sonner';
-import { useNavigate } from 'react-router-dom';
-import { useLayout } from 'xertica-ui/hooks';
-import { Header } from 'xertica-ui/layout';
-import { ScrollArea } from 'xertica-ui/ui';
 import { Link } from 'react-router-dom';
 import type { User } from '../../../shared/types/auth';
 
@@ -53,7 +49,6 @@ interface SettingsContentProps {
 export function SettingsContent({ user, onLogout }: SettingsContentProps) {
   const { sidebarExpanded, sidebarWidth } = useLayout();
   const { theme, toggleTheme } = useTheme();
-  const navigate = useNavigate();
   const [notificationsEnabled, setNotificationsEnabled] = useState(true);
 
   const form = useForm<ProfileValues>({
@@ -157,9 +152,10 @@ export function SettingsContent({ user, onLogout }: SettingsContentProps) {
                       Alterna entre tema claro e escuro.
                     </p>
                   </div>
+                  {/* toggleTheme is () => void; Switch.onCheckedChange expects (checked: boolean) => void */}
                   <Switch
                     checked={theme === 'dark'}
-                    onCheckedChange={toggleTheme}
+                    onCheckedChange={() => toggleTheme()}
                   />
                 </div>
               </CardContent>

package/templates/src/features/template/ui/DashboardTemplate.tsx

@@ -45,18 +45,28 @@ const accessConfig = {
   acessos: { label: 'Acessos', color: 'var(--chart-2)' },
 };
 
+// Keys without accents so the chart's internal config lookup is reliable
 const channelData = [
-  { name: 'Orgânico', value: 42 },
-  { name: 'Pago',     value: 28 },
-  { name: 'Social',   value: 18 },
-  { name: 'Direto',   value: 12 },
+  { name: 'organico', value: 42 },
+  { name: 'pago',     value: 28 },
+  { name: 'social',   value: 18 },
+  { name: 'direto',   value: 12 },
 ];
 
 const channelConfig = {
-  Orgânico: { label: 'Orgânico', color: 'var(--chart-1)' },
-  Pago:     { label: 'Pago',     color: 'var(--chart-2)' },
-  Social:   { label: 'Social',   color: 'var(--chart-3)' },
-  Direto:   { label: 'Direto',   color: 'var(--chart-4)' },
+  organico: { label: 'Orgânico', color: 'var(--chart-1)' },
+  pago:     { label: 'Pago',     color: 'var(--chart-2)' },
+  social:   { label: 'Social',   color: 'var(--chart-3)' },
+  direto:   { label: 'Direto',   color: 'var(--chart-4)' },
+};
+
+// Explicit Badge variant map — avoids unsafe string casts
+type EventStatus = 'info' | 'success' | 'destructive' | 'default';
+const EVENT_BADGE_VARIANT: Record<EventStatus, EventStatus> = {
+  info:        'info',
+  success:     'success',
+  destructive: 'destructive',
+  default:     'default',
 };
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -75,30 +85,30 @@ export function DashboardTemplate() {
         }
       />
 
-      {/* ── KPI cards — use StatsCard from xertica-ui/ui ── */}
+      {/* ── KPI cards — StatsCard.trend expects { value: number } not a raw number ── */}
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
         <StatsCard
           title="Receita Total"
           value="R$ 45.231,89"
-          trend={20.1}
+          trend={{ value: 20.1, label: 'vs mês anterior' }}
           icon={<DollarSign className="size-4" />}
         />
         <StatsCard
           title="Usuários Ativos"
           value="2.350"
-          trend={8.4}
+          trend={{ value: 8.4, label: 'vs mês anterior' }}
           icon={<Users className="size-4" />}
         />
         <StatsCard
           title="Vendas"
           value="12.234"
-          trend={19.2}
+          trend={{ value: 19.2, label: 'vs mês anterior' }}
           icon={<Activity className="size-4" />}
         />
         <StatsCard
           title="Taxa de Retenção"
           value="89,3%"
-          trend={1.2}
+          trend={{ value: 1.2, label: 'vs mês anterior' }}
           icon={<TrendingUp className="size-4" />}
         />
       </div>
@@ -165,17 +175,19 @@ export function DashboardTemplate() {
           </CardHeader>
           <CardContent>
             <div className="space-y-4">
-              {[
-                { time: '09:00', label: 'Login de João Silva',   status: 'info'    },
-                { time: '10:45', label: 'Fatura #INV004 paga',   status: 'success' },
-                { time: '11:30', label: 'Usuário bloqueado',     status: 'destructive' },
-                { time: '13:15', label: 'Relatório gerado',      status: 'default' },
-                { time: '15:00', label: 'Deploy v2.1.5',         status: 'success' },
-              ].map(event => (
+              {(
+                [
+                  { time: '09:00', label: 'Login de João Silva', status: 'info'        },
+                  { time: '10:45', label: 'Fatura #INV004 paga', status: 'success'     },
+                  { time: '11:30', label: 'Usuário bloqueado',   status: 'destructive' },
+                  { time: '13:15', label: 'Relatório gerado',    status: 'default'     },
+                  { time: '15:00', label: 'Deploy v2.1.5',       status: 'success'     },
+                ] as Array<{ time: string; label: string; status: EventStatus }>
+              ).map(event => (
                 <div key={event.time} className="flex items-center gap-3 text-sm">
                   <Badge variant="outline" className="font-mono shrink-0">{event.time}</Badge>
                   <span className="flex-1 text-muted-foreground">{event.label}</span>
-                  <Badge variant={event.status as 'default' | 'success' | 'info' | 'destructive'} className="text-[10px]">
+                  <Badge variant={EVENT_BADGE_VARIANT[event.status]} className="text-[10px]">
                     {event.status}
                   </Badge>
                 </div>