xertica-ui 1.0.0

package/contexts/BrandColorsContext.tsx

@@ -0,0 +1,551 @@
+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;
+  };
+}
+
+interface BrandColorsContextType {
+  colors: BrandColors;
+  currentTheme: string;
+  themes: ColorTheme[];
+  setTheme: (themeId: string) => void;
+  radius: number;
+  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 }) => {
+  const [currentTheme, setCurrentTheme] = useState<string>(() => {
+    const saved = localStorage.getItem('color-theme');
+    return saved || 'xertica-original';
+  });
+
+  const [radius, setRadius] = useState<number>(0.5);
+
+  const [colors, setColors] = useState<BrandColors>(() => {
+    const theme = colorThemes.find(t => t.id === currentTheme);
+    return theme?.colors || colorThemes[0].colors;
+  });
+
+  useEffect(() => {
+    const theme = colorThemes.find(t => t.id === currentTheme);
+    if (theme) {
+      setColors(theme.colors);
+    }
+  }, [currentTheme]);
+
+  // Função auxiliar para converter hex para rgb
+  const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
+    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),
+        }
+      : null;
+  };
+
+  // Função para aplicar as cores baseadas no modo atual e tema
+  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;
+
+    // --- Semantic Colors (Fixed Standard) ---
+    // Success (Green), Warning (Amber/Yellow), Info (Blue), Destructive (Red)
+    const semantic = {
+      success: isDark ? '#4ade80' : '#22c55e', // Green 400 / 500
+      warning: isDark ? '#fbbf24' : '#f59e0b', // Amber 400 / 500
+      info:    isDark ? '#60a5fa' : '#3b82f6', // Blue 400 / 500
+      destructive: isDark ? '#f87171' : '#ef4444', // Red 400 / 500
+    };
+    
+    // --- Apply CSS Variables ---
+
+    // 1. Core Primary Colors
+    root.style.setProperty('--primary', primary);
+    root.style.setProperty('--primary-foreground', primaryForeground);
+
+    // 2. Semantic Colors
+    root.style.setProperty('--success', semantic.success);
+    root.style.setProperty('--success-foreground', '#ffffff');
+    root.style.setProperty('--warning', semantic.warning);
+    root.style.setProperty('--warning-foreground', '#ffffff');
+    root.style.setProperty('--info', semantic.info);
+    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);
+    }
+
+    // 3. Radius
+    root.style.setProperty('--radius', `${radius}rem`);
+
+    // 4. Charts
+    root.style.setProperty('--chart-1', colors.chart1);
+    root.style.setProperty('--chart-2', colors.chart2);
+    root.style.setProperty('--chart-3', colors.chart3);
+    root.style.setProperty('--chart-4', colors.chart4);
+    root.style.setProperty('--chart-5', colors.chart5);
+
+    // 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)`);
+    }
+
+    // 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
+    } else {
+         root.style.setProperty('--sidebar-primary', primary);
+         root.style.setProperty('--sidebar-primary-foreground', primaryForeground);
+    }
+
+    // 6. Gradients
+    root.style.setProperty(
+      '--gradient-diagonal',
+      `linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
+    );
+    
+    // Save preferences
+    localStorage.setItem('color-theme', currentTheme);
+  }, [colors, currentTheme, radius]);
+
+  // Aplicar cores quando elas mudarem
+  useEffect(() => {
+    applyColors();
+  }, [applyColors]);
+
+  // Observar mudanças na classe 'dark' do documento
+  useEffect(() => {
+    const root = document.documentElement;
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          applyColors();
+        }
+      });
+    });
+    observer.observe(root, { attributes: true, attributeFilter: ['class'] });
+    return () => observer.disconnect();
+  }, [applyColors]);
+
+  const setTheme = (themeId: string) => {
+    setCurrentTheme(themeId);
+  };
+
+  return (
+    <BrandColorsContext.Provider value={{ colors, currentTheme, themes: colorThemes, setTheme, radius, setRadius }}>
+      {children}
+    </BrandColorsContext.Provider>
+  );
+};
+
+export const useBrandColors = () => {
+  const context = useContext(BrandColorsContext);
+  if (context === undefined) {
+    throw new Error('useBrandColors must be used within a BrandColorsProvider');
+  }
+  return context;
+};

package/contexts/LanguageContext.tsx

@@ -0,0 +1,36 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+
+export type Language = 'pt' | 'en' | 'es';
+
+interface LanguageContextType {
+  language: Language;
+  setLanguage: (language: Language) => void;
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+// Provider simplificado - mantém seletor visual mas funciona apenas em português
+export function LanguageProvider({ children }: { children: ReactNode }) {
+  const [language, setLanguage] = useState<Language>(() => {
+    const saved = localStorage.getItem('xertica_language');
+    return (saved as Language) || 'pt';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('xertica_language', language);
+  }, [language]);
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}
+
+export function useLanguage() {
+  const context = useContext(LanguageContext);
+  if (context === undefined) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+}

package/contexts/ThemeContext.tsx

@@ -0,0 +1,85 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+export type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+  setThemeMode: (theme: Theme) => void;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  // Inicialização mais direta - verificar localStorage imediatamente
+  const getInitialTheme = (): Theme => {
+    // Primeiro, garantir que não há classe dark aplicada por padrão
+    if (typeof window !== 'undefined') {
+      document.documentElement.classList.remove('dark');
+      
+      const savedTheme = localStorage.getItem('xertica-theme') as Theme;
+      if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
+        return savedTheme;
+      }
+    }
+    // Sempre retornar 'light' como padrão
+    return 'light';
+  };
+
+  const [theme, setTheme] = useState<Theme>(getInitialTheme);
+
+  // Aplicar tema ao documento sempre que o tema mudar
+  useEffect(() => {
+    const root = document.documentElement;
+    
+    if (theme === 'dark') {
+      root.classList.add('dark');
+    } else {
+      root.classList.remove('dark');
+    }
+    
+    // Salvar no localStorage
+    localStorage.setItem('xertica-theme', theme);
+  }, [theme]);
+
+  // Garantir que o tema seja aplicado na inicialização
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'light') {
+      root.classList.remove('dark');
+    }
+    localStorage.setItem('xertica-theme', theme);
+  }, []);
+
+  // Alternar tema
+  const toggleTheme = () => {
+    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+  };
+
+  // Definir tema específico
+  const setThemeMode = (newTheme: Theme) => {
+    setTheme(newTheme);
+  };
+
+  const value: ThemeContextType = {
+    theme,
+    toggleTheme,
+    setThemeMode,
+    isDark: theme === 'dark'
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+}