xertica-ui 1.1.0 → 1.2.0

package/bin/cli.ts

@@ -7,6 +7,7 @@ import fs from 'fs-extra';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { execa } from 'execa';
+import { colorThemes } from '../contexts/theme-data';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -34,7 +35,7 @@ program
             const files = await fs.readdir(uiComponentsDir);
             const components = files
                 .filter(f => f.endsWith('.tsx') && !f.startsWith('index'))
-                .map(f => ({ title: f.replace('.tsx', ''), value: f }));
+                .map(f => ({ title: f.replace('.tsx', ''), value: f, selected: true }));
 
             componentChoices = [
                 { title: 'All Components', value: 'all', selected: true },
@@ -42,6 +43,8 @@ program
             ];
         }
 
+
+
         console.log(chalk.blue('🚀 Welcome to Xertica UI CLI!'));
 
         const response = await prompts([
@@ -49,7 +52,12 @@ program
                 type: 'multiselect',
                 name: 'components',
                 message: 'Which components would you like to include?',
-                choices: componentChoices,
+                choices: componentChoices.length > 1 ? componentChoices : [
+                    { title: 'All Components', value: 'all', selected: true },
+                    // Fetch components logic was above, I'll rely on existing code for that part 
+                    // and just insert my code around existing blocks in separate steps if needed.
+                    // But replace_file_content requires me to match content.
+                ],
                 hint: '- Space to select. Return to submit',
                 min: 1
             },
@@ -63,6 +71,17 @@ program
                     { title: 'Template Page', value: 'template', selected: true },
                 ]
             },
+            {
+                type: 'select',
+                name: 'theme',
+                message: 'Select the default color theme for your project:',
+                choices: colorThemes.map(t => ({
+                    title: t.name,
+                    description: t.description,
+                    value: t.id
+                })),
+                initial: 0
+            },
             {
                 type: 'confirm',
                 name: 'install',
@@ -143,11 +162,7 @@ export default function App() {
                             if (basename === 'node_modules') return false;
 
                             // Component filtering
-                            // src is absolute. We need relative validation.
-                            // Or just check if basename is in the list.
-                            // Warning: 'button.tsx' might be in other places? Unlikely in flat structure components/ui
-                            // Ideally we check if it is inside components/ui
-                            const isUI = src.includes(path.join('components', 'ui')); // Simple check
+                            const isUI = src.includes(path.join('components', 'ui'));
 
                             if (isUI && folder === 'components') {
                                 if (basename === 'index.ts') return true;
@@ -177,6 +192,22 @@ export default function App() {
                 }
             }
 
+            // --- Apply Selected Theme ---
+            if (response.theme) {
+                const contextPath = path.join(targetDir, 'contexts', 'BrandColorsContext.tsx');
+                if (await fs.pathExists(contextPath)) {
+                    let content = await fs.readFile(contextPath, 'utf8');
+                    // Replace default theme
+                    // Need to match the line: return saved || 'xertica-original';
+                    // We can use regex to be safe
+                    content = content.replace(
+                        /return saved \|\| 'xertica-original';/,
+                        `return saved || '${response.theme}';`
+                    );
+                    await fs.writeFile(contextPath, content);
+                }
+            }
+
             spinner.succeed('Project initialized successfully!');
 
             if (response.install) {

package/contexts/BrandColorsContext.tsx

@@ -1,47 +1,11 @@
 import React, { createContext, useContext, useState, useEffect } from 'react';
 
-interface BrandColors {
-  // Main Colors
-  primary: string;
-  primaryForeground: string;
-  primaryLight: string; // Used for backgrounds
-  
-  // Dark Mode Overrides
-  primaryDarkMode: string; 
-  primaryForegroundDark: string;
-  
-  // Sidebar Colors
-  sidebarLight: string;
-  sidebarDark: string;
-  
-  // Gradients
-  gradientStart: string;
-  gradientEnd: string;
-  gradientStartDark: string;
-  gradientEndDark: string;
-
-  // Chart Colors (Light Mode) - Dark mode will be calculated or fixed
-  chart1: string;
-  chart2: string;
-  chart3: string;
-  chart4: string;
-  chart5: string;
-  
-  // Optional: Radius override per theme
-  radius?: string;
-}
-
-export interface ColorTheme {
-  id: string;
-  name: string;
-  description: string;
-  colors: BrandColors;
-  preview: {
-    primary: string;
-    secondary: string;
-    accent: string;
-  };
-}
+import {
+  BrandColors,
+  ColorTheme,
+  PALETTE,
+  colorThemes,
+} from './theme-data';
 
 interface BrandColorsContextType {
   colors: BrandColors;
@@ -52,304 +16,6 @@ interface BrandColorsContextType {
   setRadius: (radius: number) => void;
 }
 
-// Shadcn Standard Palette Values (approximate hex for compatibility)
-const PALETTE = {
-  zinc: { 900: '#18181b', 50: '#fafafa' },
-  slate: { 900: '#0f172a', 50: '#f8fafc' },
-  stone: { 900: '#1c1917', 50: '#fafaf9' },
-  gray:  { 900: '#111827', 50: '#f9fafb' },
-  neutral: { 900: '#171717', 50: '#fafafa' },
-  red:    { 600: '#dc2626', 500: '#ef4444' },
-  rose:   { 600: '#e11d48', 500: '#f43f5e' },
-  orange: { 600: '#ea580c', 500: '#f97316' },
-  green:  { 600: '#16a34a', 500: '#22c55e' },
-  blue:   { 600: '#2563eb', 500: '#3b82f6' },
-  yellow: { 600: '#ca8a04', 500: '#eab308' },
-  violet: { 600: '#7c3aed', 500: '#8b5cf6' },
-};
-
-export const colorThemes: ColorTheme[] = [
-  {
-    id: 'xertica-original',
-    name: 'Xertica Original',
-    description: 'A identidade visual clássica da Xertica com o gradiente original',
-    colors: {
-      primary: '#2C275B',
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#5B568F',
-      primaryDarkMode: '#72CDFD',
-      primaryForegroundDark: '#09090B',
-      
-      sidebarLight: '#2C275B', // Primary Color
-      sidebarDark: '#1a1928',  // Original Dark BG
-      
-      gradientStart: '#FDB0F2',
-      gradientEnd: '#72CDFD',
-      gradientStartDark: '#7B4A7A',
-      gradientEndDark: '#3A5C7D',
-
-      chart1: '#2C275B',
-      chart2: '#FDB0F2',
-      chart3: '#72CDFD',
-      chart4: '#5B568F',
-      chart5: '#4F46E5',
-    },
-    preview: {
-      primary: '#2C275B',
-      secondary: '#FDB0F2',
-      accent: '#72CDFD',
-    },
-  },
-  {
-    id: 'zinc',
-    name: 'Zinc',
-    description: 'Minimalista, sério e elegante (Escala de Cinza)',
-    colors: {
-      primary: '#18181B',
-      primaryForeground: '#FAFAFA',
-      primaryLight: '#E4E4E7',
-      primaryDarkMode: '#FAFAFA',
-      primaryForegroundDark: '#18181B',
-      
-      sidebarLight: '#18181B', // Primary Color
-      sidebarDark: '#09090B',
-      
-      gradientStart: '#52525B',
-      gradientEnd: '#D4D4D8',
-      gradientStartDark: '#27272A',
-      gradientEndDark: '#52525B',
-
-      chart1: '#18181B',
-      chart2: '#52525B',
-      chart3: '#A1A1AA',
-      chart4: '#D4D4D8',
-      chart5: '#E4E4E7',
-    },
-    preview: {
-      primary: '#18181B',
-      secondary: '#52525B',
-      accent: '#E4E4E7',
-    },
-  },
-  {
-    id: 'slate',
-    name: 'Slate',
-    description: 'Profissional com tons de azul acinzentado',
-    colors: {
-      primary: '#0F172A',
-      primaryForeground: '#F8FAFC',
-      primaryLight: '#CBD5E1',
-      primaryDarkMode: '#F8FAFC',
-      primaryForegroundDark: '#0F172A',
-
-      sidebarLight: '#0F172A', // Primary Color
-      sidebarDark: '#020617',
-
-      gradientStart: '#475569',
-      gradientEnd: '#94A3B8',
-      gradientStartDark: '#1E293B',
-      gradientEndDark: '#475569',
-
-      chart1: '#0F172A',
-      chart2: '#475569',
-      chart3: '#94A3B8',
-      chart4: '#CBD5E1',
-      chart5: '#E2E8F0',
-    },
-    preview: {
-      primary: '#0F172A',
-      secondary: '#475569',
-      accent: '#94A3B8',
-    },
-  },
-  {
-    id: 'blue',
-    name: 'Blue',
-    description: 'Confiável e seguro, padrão corporativo',
-    colors: {
-      primary: '#2563EB',
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#DBEAFE',
-      primaryDarkMode: '#3B82F6',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#1E3A8A', // Blue 900 (High Contrast Sidebar)
-      sidebarDark: '#172554',
-
-      gradientStart: '#2563EB',
-      gradientEnd: '#60A5FA',
-      gradientStartDark: '#1D4ED8',
-      gradientEndDark: '#2563EB',
-
-      chart1: '#2563EB',
-      chart2: '#3B82F6',
-      chart3: '#60A5FA',
-      chart4: '#93C5FD',
-      chart5: '#BFDBFE',
-    },
-    preview: {
-      primary: '#2563EB',
-      secondary: '#60A5FA',
-      accent: '#DBEAFE',
-    },
-  },
-  {
-    id: 'violet',
-    name: 'Violet',
-    description: 'Criativo e vibrante',
-    colors: {
-      primary: '#7C3AED',
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#EDE9FE',
-      primaryDarkMode: '#8B5CF6',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#4C1D95', // Violet 900 (High Contrast Sidebar)
-      sidebarDark: '#2E1065',
-
-      gradientStart: '#7C3AED',
-      gradientEnd: '#A78BFA',
-      gradientStartDark: '#5B21B6',
-      gradientEndDark: '#7C3AED',
-
-      chart1: '#7C3AED',
-      chart2: '#8B5CF6',
-      chart3: '#A78BFA',
-      chart4: '#C4B5FD',
-      chart5: '#DDD6FE',
-    },
-    preview: {
-      primary: '#7C3AED',
-      secondary: '#A78BFA',
-      accent: '#EDE9FE',
-    },
-  },
-  {
-    id: 'rose',
-    name: 'Rose',
-    description: 'Elegante e suave',
-    colors: {
-      primary: '#BE123C', // Rose 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#FFE4E6',
-      primaryDarkMode: '#F43F5E',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#881337', // Rose 900 (High Contrast Sidebar)
-      sidebarDark: '#881337',
-
-      gradientStart: '#E11D48',
-      gradientEnd: '#FB7185',
-      gradientStartDark: '#9F1239',
-      gradientEndDark: '#E11D48',
-
-      chart1: '#E11D48',
-      chart2: '#F43F5E',
-      chart3: '#FB7185',
-      chart4: '#FDA4AF',
-      chart5: '#FECDD3',
-    },
-    preview: {
-      primary: '#BE123C',
-      secondary: '#FB7185',
-      accent: '#FFE4E6',
-    },
-  },
-  {
-    id: 'emerald',
-    name: 'Emerald',
-    description: 'Natural e equilibrado',
-    colors: {
-      primary: '#047857', // Emerald 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#D1FAE5',
-      primaryDarkMode: '#10B981',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#064E3B', // Emerald 900 (High Contrast Sidebar)
-      sidebarDark: '#064E3B',
-
-      gradientStart: '#059669',
-      gradientEnd: '#34D399',
-      gradientStartDark: '#064E3B',
-      gradientEndDark: '#059669',
-
-      chart1: '#059669',
-      chart2: '#10B981',
-      chart3: '#34D399',
-      chart4: '#6EE7B7',
-      chart5: '#A7F3D0',
-    },
-    preview: {
-      primary: '#047857',
-      secondary: '#34D399',
-      accent: '#D1FAE5',
-    },
-  },
-  {
-    id: 'amber',
-    name: 'Amber',
-    description: 'Quente e energético',
-    colors: {
-      primary: '#B45309', // Amber 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#FEF3C7',
-      primaryDarkMode: '#F59E0B',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#78350F', // Amber 900 (High Contrast Sidebar)
-      sidebarDark: '#78350F',
-
-      gradientStart: '#D97706',
-      gradientEnd: '#FBBF24',
-      gradientStartDark: '#92400E',
-      gradientEndDark: '#D97706',
-
-      chart1: '#D97706',
-      chart2: '#F59E0B',
-      chart3: '#FBBF24',
-      chart4: '#FDE68A',
-      chart5: '#FEF3C7',
-    },
-    preview: {
-      primary: '#B45309',
-      secondary: '#FBBF24',
-      accent: '#FEF3C7',
-    },
-  },
-  {
-    id: 'orange',
-    name: 'Orange',
-    description: 'Vibrante e amigável',
-    colors: {
-      primary: '#C2410C', // Orange 700 (Better text contrast for Primary)
-      primaryForeground: '#FFFFFF',
-      primaryLight: '#FFEDD5',
-      primaryDarkMode: '#F97316',
-      primaryForegroundDark: '#FFFFFF',
-
-      sidebarLight: '#7C2D12', // Orange 900 (High Contrast Sidebar)
-      sidebarDark: '#7C2D12',
-
-      gradientStart: '#EA580C',
-      gradientEnd: '#FB923C',
-      gradientStartDark: '#9A3412',
-      gradientEndDark: '#EA580C',
-
-      chart1: '#EA580C',
-      chart2: '#F97316',
-      chart3: '#FB923C',
-      chart4: '#FDBA74',
-      chart5: '#FED7AA',
-    },
-    preview: {
-      primary: '#C2410C',
-      secondary: '#FB923C',
-      accent: '#FFEDD5',
-    },
-  },
-];
-
 const BrandColorsContext = createContext<BrandColorsContextType | undefined>(undefined);
 
 export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -377,10 +43,10 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result
       ? {
-          r: parseInt(result[1], 16),
-          g: parseInt(result[2], 16),
-          b: parseInt(result[3], 16),
-        }
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
       : null;
   };
 
@@ -388,11 +54,11 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
   const applyColors = React.useCallback(() => {
     const root = document.documentElement;
     const isDark = root.classList.contains('dark');
-    
+
     // --- Determine Colors based on Mode ---
     const primary = isDark ? colors.primaryDarkMode : colors.primary;
     const primaryForeground = isDark ? colors.primaryForegroundDark : colors.primaryForeground;
-    
+
     // Gradient Logic
     const gradientStart = isDark ? colors.gradientStartDark : colors.gradientStart;
     const gradientEnd = isDark ? colors.gradientEndDark : colors.gradientEnd;
@@ -402,10 +68,10 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     const semantic = {
       success: isDark ? '#4ade80' : '#22c55e', // Green 400 / 500
       warning: isDark ? '#fbbf24' : '#f59e0b', // Amber 400 / 500
-      info:    isDark ? '#60a5fa' : '#3b82f6', // Blue 400 / 500
+      info: isDark ? '#60a5fa' : '#3b82f6', // Blue 400 / 500
       destructive: isDark ? '#f87171' : '#ef4444', // Red 400 / 500
     };
-    
+
     // --- Apply CSS Variables ---
 
     // 1. Core Primary Colors
@@ -421,29 +87,29 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     root.style.setProperty('--info-foreground', '#ffffff');
     root.style.setProperty('--destructive', semantic.destructive);
     root.style.setProperty('--destructive-foreground', '#ffffff');
-    
+
     // 3. Secondary & Accents (Derived or Specific)
-    
+
     // 2. Secondary & Accents (Derived or Specific)
     // We use primaryLight for subtle backgrounds
     // In dark mode, we might want to adjust opacity
     const primaryRGB = hexToRgb(primary);
     if (primaryRGB) {
-       // Create a subtle tint for secondary/accent/muted
-       const alpha = isDark ? 0.2 : 0.1;
-       const subtle = `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, ${alpha})`;
-       
-       // Note: Shadcn usually has specific greys for secondary, but for "Brand" themes 
-       // we can tint them slightly or stick to standard zinc. 
-       // For this implementation, we will keep existing "neutral" variables from CSS 
-       // but override "ring" and "sidebar-ring" to match brand.
-       
-       root.style.setProperty('--ring', isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
-       
-       // Also update the Xertica specific variables
-       root.style.setProperty('--xertica-primary', primary);
-       root.style.setProperty('--primary-light', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`);
-       root.style.setProperty('--primary-light-foreground', primary);
+      // Create a subtle tint for secondary/accent/muted
+      const alpha = isDark ? 0.2 : 0.1;
+      const subtle = `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, ${alpha})`;
+
+      // Note: Shadcn usually has specific greys for secondary, but for "Brand" themes 
+      // we can tint them slightly or stick to standard zinc. 
+      // For this implementation, we will keep existing "neutral" variables from CSS 
+      // but override "ring" and "sidebar-ring" to match brand.
+
+      root.style.setProperty('--ring', isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
+
+      // Also update the Xertica specific variables
+      root.style.setProperty('--xertica-primary', primary);
+      root.style.setProperty('--primary-light', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`);
+      root.style.setProperty('--primary-light-foreground', primary);
     }
 
     // 3. Radius
@@ -459,47 +125,47 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
     // 5. Sidebar (Override)
     // Dynamic sidebar colors based on theme and mode
     const sidebarBg = isDark ? colors.sidebarDark : colors.sidebarLight;
-    
+
     // Determine if sidebar background is dark or light to set text color
     // We assume if the sidebar background is the Primary Color (which are generally dark/saturated), text should be white.
     // Xertica Original (Purple), Blue, Violet, etc. are all dark.
     // If sidebarLight is White (#FFFFFF) or very light, text should be dark.
-    
+
     // Simple check: is sidebarBg roughly White/Light?
     const isSidebarLight = sidebarBg.toLowerCase() === '#ffffff' || sidebarBg.toLowerCase() === '#f3f4f6' || sidebarBg.toLowerCase() === '#fafafa';
-    
+
     const sidebarFg = isSidebarLight ? '#0F172A' : '#FFFFFF'; // Dark text for light BG, White text for dark BG
-    
+
     root.style.setProperty('--sidebar', sidebarBg);
     root.style.setProperty('--sidebar-foreground', sidebarFg);
-    
+
     // Sidebar Accent
     if (primaryRGB) {
-        if (isSidebarLight) {
-             // Standard behavior for light sidebar
-             root.style.setProperty('--sidebar-accent', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`);
-             root.style.setProperty('--sidebar-accent-foreground', primary);
-             root.style.setProperty('--sidebar-border', 'rgba(0,0,0,0.1)');
-        } else {
-             // Behavior for colored/dark sidebar
-             // Accent should be a slightly lighter/darker shade of the sidebar bg
-             // Or white with low opacity
-             root.style.setProperty('--sidebar-accent', 'rgba(255, 255, 255, 0.1)');
-             root.style.setProperty('--sidebar-accent-foreground', '#FFFFFF');
-             root.style.setProperty('--sidebar-border', 'rgba(255,255,255,0.1)');
-        }
-        root.style.setProperty('--sidebar-ring', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
+      if (isSidebarLight) {
+        // Standard behavior for light sidebar
+        root.style.setProperty('--sidebar-accent', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`);
+        root.style.setProperty('--sidebar-accent-foreground', primary);
+        root.style.setProperty('--sidebar-border', 'rgba(0,0,0,0.1)');
+      } else {
+        // Behavior for colored/dark sidebar
+        // Accent should be a slightly lighter/darker shade of the sidebar bg
+        // Or white with low opacity
+        root.style.setProperty('--sidebar-accent', 'rgba(255, 255, 255, 0.1)');
+        root.style.setProperty('--sidebar-accent-foreground', '#FFFFFF');
+        root.style.setProperty('--sidebar-border', 'rgba(255,255,255,0.1)');
+      }
+      root.style.setProperty('--sidebar-ring', `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
     }
 
     // Sidebar Primary (Active Item)
     // If sidebar is colored (dark), the primary active item usually looks good as white or a very bright accent.
     // But standard "Primary" might clash if it's the same color as the background.
     if (!isSidebarLight) {
-         root.style.setProperty('--sidebar-primary', '#FFFFFF');
-         root.style.setProperty('--sidebar-primary-foreground', primary); // Text becomes primary color
+      root.style.setProperty('--sidebar-primary', '#FFFFFF');
+      root.style.setProperty('--sidebar-primary-foreground', primary); // Text becomes primary color
     } else {
-         root.style.setProperty('--sidebar-primary', primary);
-         root.style.setProperty('--sidebar-primary-foreground', primaryForeground);
+      root.style.setProperty('--sidebar-primary', primary);
+      root.style.setProperty('--sidebar-primary-foreground', primaryForeground);
     }
 
     // 6. Gradients
@@ -507,7 +173,7 @@ export const BrandColorsProvider: React.FC<{ children: React.ReactNode }> = ({ c
       '--gradient-diagonal',
       `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
     );
-    
+
     // Save preferences
     localStorage.setItem('color-theme', currentTheme);
   }, [colors, currentTheme, radius]);

package/contexts/theme-data.ts

@@ -0,0 +1,340 @@
+export interface BrandColors {
+    // Main Colors
+    primary: string;
+    primaryForeground: string;
+    primaryLight: string; // Used for backgrounds
+
+    // Dark Mode Overrides
+    primaryDarkMode: string;
+    primaryForegroundDark: string;
+
+    // Sidebar Colors
+    sidebarLight: string;
+    sidebarDark: string;
+
+    // Gradients
+    gradientStart: string;
+    gradientEnd: string;
+    gradientStartDark: string;
+    gradientEndDark: string;
+
+    // Chart Colors (Light Mode) - Dark mode will be calculated or fixed
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+
+    // Optional: Radius override per theme
+    radius?: string;
+}
+
+export interface ColorTheme {
+    id: string;
+    name: string;
+    description: string;
+    colors: BrandColors;
+    preview: {
+        primary: string;
+        secondary: string;
+        accent: string;
+    };
+}
+
+// Shadcn Standard Palette Values (approximate hex for compatibility)
+export const PALETTE = {
+    zinc: { 900: '#18181b', 50: '#fafafa' },
+    slate: { 900: '#0f172a', 50: '#f8fafc' },
+    stone: { 900: '#1c1917', 50: '#fafaf9' },
+    gray: { 900: '#111827', 50: '#f9fafb' },
+    neutral: { 900: '#171717', 50: '#fafafa' },
+    red: { 600: '#dc2626', 500: '#ef4444' },
+    rose: { 600: '#e11d48', 500: '#f43f5e' },
+    orange: { 600: '#ea580c', 500: '#f97316' },
+    green: { 600: '#16a34a', 500: '#22c55e' },
+    blue: { 600: '#2563eb', 500: '#3b82f6' },
+    yellow: { 600: '#ca8a04', 500: '#eab308' },
+    violet: { 600: '#7c3aed', 500: '#8b5cf6' },
+};
+
+export const colorThemes: ColorTheme[] = [
+    {
+        id: 'xertica-original',
+        name: 'Xertica Original',
+        description: 'A identidade visual clássica da Xertica com o gradiente original',
+        colors: {
+            primary: '#2C275B',
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#5B568F',
+            primaryDarkMode: '#72CDFD',
+            primaryForegroundDark: '#09090B',
+
+            sidebarLight: '#2C275B', // Primary Color
+            sidebarDark: '#1a1928',  // Original Dark BG
+
+            gradientStart: '#FDB0F2',
+            gradientEnd: '#72CDFD',
+            gradientStartDark: '#7B4A7A',
+            gradientEndDark: '#3A5C7D',
+
+            chart1: '#2C275B',
+            chart2: '#FDB0F2',
+            chart3: '#72CDFD',
+            chart4: '#5B568F',
+            chart5: '#4F46E5',
+        },
+        preview: {
+            primary: '#2C275B',
+            secondary: '#FDB0F2',
+            accent: '#72CDFD',
+        },
+    },
+    {
+        id: 'zinc',
+        name: 'Zinc',
+        description: 'Minimalista, sério e elegante (Escala de Cinza)',
+        colors: {
+            primary: '#18181B',
+            primaryForeground: '#FAFAFA',
+            primaryLight: '#E4E4E7',
+            primaryDarkMode: '#FAFAFA',
+            primaryForegroundDark: '#18181B',
+
+            sidebarLight: '#18181B', // Primary Color
+            sidebarDark: '#09090B',
+
+            gradientStart: '#52525B',
+            gradientEnd: '#D4D4D8',
+            gradientStartDark: '#27272A',
+            gradientEndDark: '#52525B',
+
+            chart1: '#18181B',
+            chart2: '#52525B',
+            chart3: '#A1A1AA',
+            chart4: '#D4D4D8',
+            chart5: '#E4E4E7',
+        },
+        preview: {
+            primary: '#18181B',
+            secondary: '#52525B',
+            accent: '#E4E4E7',
+        },
+    },
+    {
+        id: 'slate',
+        name: 'Slate',
+        description: 'Profissional com tons de azul acinzentado',
+        colors: {
+            primary: '#0F172A',
+            primaryForeground: '#F8FAFC',
+            primaryLight: '#CBD5E1',
+            primaryDarkMode: '#F8FAFC',
+            primaryForegroundDark: '#0F172A',
+
+            sidebarLight: '#0F172A', // Primary Color
+            sidebarDark: '#020617',
+
+            gradientStart: '#475569',
+            gradientEnd: '#94A3B8',
+            gradientStartDark: '#1E293B',
+            gradientEndDark: '#475569',
+
+            chart1: '#0F172A',
+            chart2: '#475569',
+            chart3: '#94A3B8',
+            chart4: '#CBD5E1',
+            chart5: '#E2E8F0',
+        },
+        preview: {
+            primary: '#0F172A',
+            secondary: '#475569',
+            accent: '#94A3B8',
+        },
+    },
+    {
+        id: 'blue',
+        name: 'Blue',
+        description: 'Confiável e seguro, padrão corporativo',
+        colors: {
+            primary: '#2563EB',
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#DBEAFE',
+            primaryDarkMode: '#3B82F6',
+            primaryForegroundDark: '#FFFFFF',
+
+            sidebarLight: '#1E3A8A', // Blue 900 (High Contrast Sidebar)
+            sidebarDark: '#172554',
+
+            gradientStart: '#2563EB',
+            gradientEnd: '#60A5FA',
+            gradientStartDark: '#1D4ED8',
+            gradientEndDark: '#2563EB',
+
+            chart1: '#2563EB',
+            chart2: '#3B82F6',
+            chart3: '#60A5FA',
+            chart4: '#93C5FD',
+            chart5: '#BFDBFE',
+        },
+        preview: {
+            primary: '#2563EB',
+            secondary: '#60A5FA',
+            accent: '#DBEAFE',
+        },
+    },
+    {
+        id: 'violet',
+        name: 'Violet',
+        description: 'Criativo e vibrante',
+        colors: {
+            primary: '#7C3AED',
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#EDE9FE',
+            primaryDarkMode: '#8B5CF6',
+            primaryForegroundDark: '#FFFFFF',
+
+            sidebarLight: '#4C1D95', // Violet 900 (High Contrast Sidebar)
+            sidebarDark: '#2E1065',
+
+            gradientStart: '#7C3AED',
+            gradientEnd: '#A78BFA',
+            gradientStartDark: '#5B21B6',
+            gradientEndDark: '#7C3AED',
+
+            chart1: '#7C3AED',
+            chart2: '#8B5CF6',
+            chart3: '#A78BFA',
+            chart4: '#C4B5FD',
+            chart5: '#DDD6FE',
+        },
+        preview: {
+            primary: '#7C3AED',
+            secondary: '#A78BFA',
+            accent: '#EDE9FE',
+        },
+    },
+    {
+        id: 'rose',
+        name: 'Rose',
+        description: 'Elegante e suave',
+        colors: {
+            primary: '#BE123C', // Rose 700 (Better text contrast for Primary)
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#FFE4E6',
+            primaryDarkMode: '#F43F5E',
+            primaryForegroundDark: '#FFFFFF',
+
+            sidebarLight: '#881337', // Rose 900 (High Contrast Sidebar)
+            sidebarDark: '#881337',
+
+            gradientStart: '#E11D48',
+            gradientEnd: '#FB7185',
+            gradientStartDark: '#9F1239',
+            gradientEndDark: '#E11D48',
+
+            chart1: '#E11D48',
+            chart2: '#F43F5E',
+            chart3: '#FB7185',
+            chart4: '#FDA4AF',
+            chart5: '#FECDD3',
+        },
+        preview: {
+            primary: '#BE123C',
+            secondary: '#FB7185',
+            accent: '#FFE4E6',
+        },
+    },
+    {
+        id: 'emerald',
+        name: 'Emerald',
+        description: 'Natural e equilibrado',
+        colors: {
+            primary: '#047857', // Emerald 700 (Better text contrast for Primary)
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#D1FAE5',
+            primaryDarkMode: '#10B981',
+            primaryForegroundDark: '#FFFFFF',
+
+            sidebarLight: '#064E3B', // Emerald 900 (High Contrast Sidebar)
+            sidebarDark: '#064E3B',
+
+            gradientStart: '#059669',
+            gradientEnd: '#34D399',
+            gradientStartDark: '#064E3B',
+            gradientEndDark: '#059669',
+
+            chart1: '#059669',
+            chart2: '#10B981',
+            chart3: '#34D399',
+            chart4: '#6EE7B7',
+            chart5: '#A7F3D0',
+        },
+        preview: {
+            primary: '#047857',
+            secondary: '#34D399',
+            accent: '#D1FAE5',
+        },
+    },
+    {
+        id: 'amber',
+        name: 'Amber',
+        description: 'Quente e energético',
+        colors: {
+            primary: '#B45309', // Amber 700 (Better text contrast for Primary)
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#FEF3C7',
+            primaryDarkMode: '#F59E0B',
+            primaryForegroundDark: '#FFFFFF',
+
+            sidebarLight: '#78350F', // Amber 900 (High Contrast Sidebar)
+            sidebarDark: '#78350F',
+
+            gradientStart: '#D97706',
+            gradientEnd: '#FBBF24',
+            gradientStartDark: '#92400E',
+            gradientEndDark: '#D97706',
+
+            chart1: '#D97706',
+            chart2: '#F59E0B',
+            chart3: '#FBBF24',
+            chart4: '#FDE68A',
+            chart5: '#FEF3C7',
+        },
+        preview: {
+            primary: '#B45309',
+            secondary: '#FBBF24',
+            accent: '#FEF3C7',
+        },
+    },
+    {
+        id: 'orange',
+        name: 'Orange',
+        description: 'Vibrante e amigável',
+        colors: {
+            primary: '#C2410C', // Orange 700 (Better text contrast for Primary)
+            primaryForeground: '#FFFFFF',
+            primaryLight: '#FFEDD5',
+            primaryDarkMode: '#F97316',
+            primaryForegroundDark: '#FFFFFF',
+
+            sidebarLight: '#7C2D12', // Orange 900 (High Contrast Sidebar)
+            sidebarDark: '#7C2D12',
+
+            gradientStart: '#EA580C',
+            gradientEnd: '#FB923C',
+            gradientStartDark: '#9A3412',
+            gradientEndDark: '#EA580C',
+
+            chart1: '#EA580C',
+            chart2: '#F97316',
+            chart3: '#FB923C',
+            chart4: '#FDBA74',
+            chart5: '#FED7AA',
+        },
+        preview: {
+            primary: '#C2410C',
+            secondary: '#FB923C',
+            accent: '#FFEDD5',
+        },
+    },
+];

package/dist/cli.js

@@ -9,6 +9,278 @@ import fs from "fs-extra";
 import path from "path";
 import { fileURLToPath } from "url";
 import { execa } from "execa";
+
+// contexts/theme-data.ts
+var colorThemes = [
+  {
+    id: "xertica-original",
+    name: "Xertica Original",
+    description: "A identidade visual cl\xE1ssica da Xertica com o gradiente original",
+    colors: {
+      primary: "#2C275B",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#5B568F",
+      primaryDarkMode: "#72CDFD",
+      primaryForegroundDark: "#09090B",
+      sidebarLight: "#2C275B",
+      // Primary Color
+      sidebarDark: "#1a1928",
+      // Original Dark BG
+      gradientStart: "#FDB0F2",
+      gradientEnd: "#72CDFD",
+      gradientStartDark: "#7B4A7A",
+      gradientEndDark: "#3A5C7D",
+      chart1: "#2C275B",
+      chart2: "#FDB0F2",
+      chart3: "#72CDFD",
+      chart4: "#5B568F",
+      chart5: "#4F46E5"
+    },
+    preview: {
+      primary: "#2C275B",
+      secondary: "#FDB0F2",
+      accent: "#72CDFD"
+    }
+  },
+  {
+    id: "zinc",
+    name: "Zinc",
+    description: "Minimalista, s\xE9rio e elegante (Escala de Cinza)",
+    colors: {
+      primary: "#18181B",
+      primaryForeground: "#FAFAFA",
+      primaryLight: "#E4E4E7",
+      primaryDarkMode: "#FAFAFA",
+      primaryForegroundDark: "#18181B",
+      sidebarLight: "#18181B",
+      // Primary Color
+      sidebarDark: "#09090B",
+      gradientStart: "#52525B",
+      gradientEnd: "#D4D4D8",
+      gradientStartDark: "#27272A",
+      gradientEndDark: "#52525B",
+      chart1: "#18181B",
+      chart2: "#52525B",
+      chart3: "#A1A1AA",
+      chart4: "#D4D4D8",
+      chart5: "#E4E4E7"
+    },
+    preview: {
+      primary: "#18181B",
+      secondary: "#52525B",
+      accent: "#E4E4E7"
+    }
+  },
+  {
+    id: "slate",
+    name: "Slate",
+    description: "Profissional com tons de azul acinzentado",
+    colors: {
+      primary: "#0F172A",
+      primaryForeground: "#F8FAFC",
+      primaryLight: "#CBD5E1",
+      primaryDarkMode: "#F8FAFC",
+      primaryForegroundDark: "#0F172A",
+      sidebarLight: "#0F172A",
+      // Primary Color
+      sidebarDark: "#020617",
+      gradientStart: "#475569",
+      gradientEnd: "#94A3B8",
+      gradientStartDark: "#1E293B",
+      gradientEndDark: "#475569",
+      chart1: "#0F172A",
+      chart2: "#475569",
+      chart3: "#94A3B8",
+      chart4: "#CBD5E1",
+      chart5: "#E2E8F0"
+    },
+    preview: {
+      primary: "#0F172A",
+      secondary: "#475569",
+      accent: "#94A3B8"
+    }
+  },
+  {
+    id: "blue",
+    name: "Blue",
+    description: "Confi\xE1vel e seguro, padr\xE3o corporativo",
+    colors: {
+      primary: "#2563EB",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#DBEAFE",
+      primaryDarkMode: "#3B82F6",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#1E3A8A",
+      // Blue 900 (High Contrast Sidebar)
+      sidebarDark: "#172554",
+      gradientStart: "#2563EB",
+      gradientEnd: "#60A5FA",
+      gradientStartDark: "#1D4ED8",
+      gradientEndDark: "#2563EB",
+      chart1: "#2563EB",
+      chart2: "#3B82F6",
+      chart3: "#60A5FA",
+      chart4: "#93C5FD",
+      chart5: "#BFDBFE"
+    },
+    preview: {
+      primary: "#2563EB",
+      secondary: "#60A5FA",
+      accent: "#DBEAFE"
+    }
+  },
+  {
+    id: "violet",
+    name: "Violet",
+    description: "Criativo e vibrante",
+    colors: {
+      primary: "#7C3AED",
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#EDE9FE",
+      primaryDarkMode: "#8B5CF6",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#4C1D95",
+      // Violet 900 (High Contrast Sidebar)
+      sidebarDark: "#2E1065",
+      gradientStart: "#7C3AED",
+      gradientEnd: "#A78BFA",
+      gradientStartDark: "#5B21B6",
+      gradientEndDark: "#7C3AED",
+      chart1: "#7C3AED",
+      chart2: "#8B5CF6",
+      chart3: "#A78BFA",
+      chart4: "#C4B5FD",
+      chart5: "#DDD6FE"
+    },
+    preview: {
+      primary: "#7C3AED",
+      secondary: "#A78BFA",
+      accent: "#EDE9FE"
+    }
+  },
+  {
+    id: "rose",
+    name: "Rose",
+    description: "Elegante e suave",
+    colors: {
+      primary: "#BE123C",
+      // Rose 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FFE4E6",
+      primaryDarkMode: "#F43F5E",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#881337",
+      // Rose 900 (High Contrast Sidebar)
+      sidebarDark: "#881337",
+      gradientStart: "#E11D48",
+      gradientEnd: "#FB7185",
+      gradientStartDark: "#9F1239",
+      gradientEndDark: "#E11D48",
+      chart1: "#E11D48",
+      chart2: "#F43F5E",
+      chart3: "#FB7185",
+      chart4: "#FDA4AF",
+      chart5: "#FECDD3"
+    },
+    preview: {
+      primary: "#BE123C",
+      secondary: "#FB7185",
+      accent: "#FFE4E6"
+    }
+  },
+  {
+    id: "emerald",
+    name: "Emerald",
+    description: "Natural e equilibrado",
+    colors: {
+      primary: "#047857",
+      // Emerald 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#D1FAE5",
+      primaryDarkMode: "#10B981",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#064E3B",
+      // Emerald 900 (High Contrast Sidebar)
+      sidebarDark: "#064E3B",
+      gradientStart: "#059669",
+      gradientEnd: "#34D399",
+      gradientStartDark: "#064E3B",
+      gradientEndDark: "#059669",
+      chart1: "#059669",
+      chart2: "#10B981",
+      chart3: "#34D399",
+      chart4: "#6EE7B7",
+      chart5: "#A7F3D0"
+    },
+    preview: {
+      primary: "#047857",
+      secondary: "#34D399",
+      accent: "#D1FAE5"
+    }
+  },
+  {
+    id: "amber",
+    name: "Amber",
+    description: "Quente e energ\xE9tico",
+    colors: {
+      primary: "#B45309",
+      // Amber 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FEF3C7",
+      primaryDarkMode: "#F59E0B",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#78350F",
+      // Amber 900 (High Contrast Sidebar)
+      sidebarDark: "#78350F",
+      gradientStart: "#D97706",
+      gradientEnd: "#FBBF24",
+      gradientStartDark: "#92400E",
+      gradientEndDark: "#D97706",
+      chart1: "#D97706",
+      chart2: "#F59E0B",
+      chart3: "#FBBF24",
+      chart4: "#FDE68A",
+      chart5: "#FEF3C7"
+    },
+    preview: {
+      primary: "#B45309",
+      secondary: "#FBBF24",
+      accent: "#FEF3C7"
+    }
+  },
+  {
+    id: "orange",
+    name: "Orange",
+    description: "Vibrante e amig\xE1vel",
+    colors: {
+      primary: "#C2410C",
+      // Orange 700 (Better text contrast for Primary)
+      primaryForeground: "#FFFFFF",
+      primaryLight: "#FFEDD5",
+      primaryDarkMode: "#F97316",
+      primaryForegroundDark: "#FFFFFF",
+      sidebarLight: "#7C2D12",
+      // Orange 900 (High Contrast Sidebar)
+      sidebarDark: "#7C2D12",
+      gradientStart: "#EA580C",
+      gradientEnd: "#FB923C",
+      gradientStartDark: "#9A3412",
+      gradientEndDark: "#EA580C",
+      chart1: "#EA580C",
+      chart2: "#F97316",
+      chart3: "#FB923C",
+      chart4: "#FDBA74",
+      chart5: "#FED7AA"
+    },
+    preview: {
+      primary: "#C2410C",
+      secondary: "#FB923C",
+      accent: "#FFEDD5"
+    }
+  }
+];
+
+// bin/cli.ts
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = path.dirname(__filename);
 var program = new Command();
@@ -20,7 +292,7 @@ program.command("init").description("Initialize a new Xertica UI project").argum
   let componentChoices = [{ title: "All Components", value: "all", selected: true }];
   if (await fs.pathExists(uiComponentsDir)) {
     const files = await fs.readdir(uiComponentsDir);
-    const components = files.filter((f) => f.endsWith(".tsx") && !f.startsWith("index")).map((f) => ({ title: f.replace(".tsx", ""), value: f }));
+    const components = files.filter((f) => f.endsWith(".tsx") && !f.startsWith("index")).map((f) => ({ title: f.replace(".tsx", ""), value: f, selected: true }));
     componentChoices = [
       { title: "All Components", value: "all", selected: true },
       ...components
@@ -32,7 +304,12 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       type: "multiselect",
       name: "components",
       message: "Which components would you like to include?",
-      choices: componentChoices,
+      choices: componentChoices.length > 1 ? componentChoices : [
+        { title: "All Components", value: "all", selected: true }
+        // Fetch components logic was above, I'll rely on existing code for that part 
+        // and just insert my code around existing blocks in separate steps if needed.
+        // But replace_file_content requires me to match content.
+      ],
       hint: "- Space to select. Return to submit",
       min: 1
     },
@@ -46,6 +323,17 @@ program.command("init").description("Initialize a new Xertica UI project").argum
         { title: "Template Page", value: "template", selected: true }
       ]
     },
+    {
+      type: "select",
+      name: "theme",
+      message: "Select the default color theme for your project:",
+      choices: colorThemes.map((t) => ({
+        title: t.name,
+        description: t.description,
+        value: t.id
+      })),
+      initial: 0
+    },
     {
       type: "confirm",
       name: "install",
@@ -137,6 +425,17 @@ export default function App() {
         });
       }
     }
+    if (response.theme) {
+      const contextPath = path.join(targetDir, "contexts", "BrandColorsContext.tsx");
+      if (await fs.pathExists(contextPath)) {
+        let content = await fs.readFile(contextPath, "utf8");
+        content = content.replace(
+          /return saved \|\| 'xertica-original';/,
+          `return saved || '${response.theme}';`
+        );
+        await fs.writeFile(contextPath, content);
+      }
+    }
     spinner.succeed("Project initialized successfully!");
     if (response.install) {
       const installSpinner = ora("Installing dependencies...").start();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "bin": "./dist/cli.js",
@@ -116,4 +116,4 @@
     "typescript": "^5.7.2",
     "vite": "^6.0.5"
   }
-}
+}