xertica-ui 2.5.0 → 2.5.2

package/contexts/BrandColorsContext.tsx

@@ -1,282 +1,282 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
-
-import { BrandColors, ColorTheme, PALETTE, colorThemes } from './theme-data';
-import { hexToRgb } from '../utils/color-utils';
-
-interface BrandColorsContextType {
-  colors: BrandColors;
-  currentTheme: string;
-  themes: ColorTheme[];
-  setTheme: (themeId: string) => void;
-  setBrandColor: (colorKey: keyof BrandColors, value: string) => void;
-  radius: number;
-  setRadius: (radius: number) => void;
-}
-
-const BrandColorsContext = createContext<BrandColorsContextType | undefined>(undefined);
-
-interface BrandColorsProviderProps {
-  children: React.ReactNode;
-  defaultTheme?: string;
-  primaryColor?: string;
-  useCustomTokens?: boolean;
-}
-
-export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
-  children,
-  defaultTheme,
-  primaryColor,
-  useCustomTokens = false,
-}) => {
-  const [currentTheme, setCurrentTheme] = useState<string>(() => {
-    // Se primaryColor for passado, ignoramos o nome do tema
-    if (primaryColor) return 'custom';
-    return defaultTheme || 'xertica-original';
-  });
-
-  const [radius, setRadius] = useState<number>(0.5);
-
-  const [colors, setColors] = useState<BrandColors>(() => {
-    if (primaryColor) {
-      // Criar um tema sob demanda baseado na cor primária
-      return {
-        ...colorThemes[0].colors,
-        primary: primaryColor,
-        primaryDarkMode: primaryColor,
-        sidebarLight: primaryColor,
-        sidebarDark: primaryColor,
-        chart1: primaryColor,
-      };
-    }
-    const theme = colorThemes.find(t => t.id === currentTheme);
-    return theme?.colors || colorThemes[0].colors;
-  });
-
-  useEffect(() => {
-    if (primaryColor) {
-      setColors({
-        ...colorThemes[0].colors,
-        primary: primaryColor,
-        primaryDarkMode: primaryColor,
-        sidebarLight: primaryColor,
-        sidebarDark: primaryColor,
-        chart1: primaryColor,
-      });
-      setCurrentTheme('custom');
-      return;
-    }
-    const theme = colorThemes.find(t => t.id === currentTheme);
-    if (theme) {
-      setColors(theme.colors);
-    }
-  }, [currentTheme, primaryColor]);
-
-  // Função para aplicar as cores baseadas no modo atual e tema
-  const applyColors = React.useCallback(() => {
-    if (useCustomTokens) return; // Skip if user wants to use local tokens.css
-    if (typeof document === 'undefined') return;
-
-    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' : '#047857', // Green 400 / 700
-      warning: isDark ? '#fbbf24' : '#b45309', // Amber 400 / 700
-      info: isDark ? '#60a5fa' : '#1d4ed8', // Blue 400 / 700
-      destructive: isDark ? '#f87171' : '#b91c1c', // Red 400 / 700
-      foreground: isDark ? '#050505' : '#ffffff',
-    };
-
-    // --- Apply CSS Variables ---
-    const cssVars: string[] = [];
-
-    // 1. Core Primary Colors
-    cssVars.push(`--primary: ${primary}`);
-    cssVars.push(`--primary-foreground: ${primaryForeground}`);
-
-    // 2. Semantic Colors
-    cssVars.push(`--success: ${semantic.success}`);
-    cssVars.push(`--success-foreground: ${semantic.foreground}`);
-    cssVars.push(`--warning: ${semantic.warning}`);
-    cssVars.push(`--warning-foreground: ${semantic.foreground}`);
-    cssVars.push(`--info: ${semantic.info}`);
-    cssVars.push(`--info-foreground: ${semantic.foreground}`);
-    cssVars.push(`--destructive: ${semantic.destructive}`);
-    cssVars.push(`--destructive-foreground: ${semantic.foreground}`);
-
-    // 3. Secondary & Accents (Derived or Specific)
-    const primaryRGB = hexToRgb(primary);
-    if (primaryRGB) {
-      cssVars.push(
-        `--ring: ${isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`}`
-      );
-
-      // Also update the Xertica specific variables
-      cssVars.push(`--xertica-primary: ${primary}`);
-      cssVars.push(
-        `--primary-light: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`
-      );
-      cssVars.push(`--primary-light-foreground: ${primary}`);
-    }
-
-    // 3. Radius
-    cssVars.push(`--radius: ${radius}rem`);
-
-    // 4. Charts
-    cssVars.push(`--chart-1: ${colors.chart1}`);
-    cssVars.push(`--chart-2: ${colors.chart2}`);
-    cssVars.push(`--chart-3: ${colors.chart3}`);
-    cssVars.push(`--chart-4: ${colors.chart4}`);
-    cssVars.push(`--chart-5: ${colors.chart5}`);
-
-    // 5. Sidebar (Override)
-    const sidebarBg = isDark ? colors.sidebarDark : colors.sidebarLight;
-    const isSidebarLight =
-      sidebarBg.toLowerCase() === '#ffffff' ||
-      sidebarBg.toLowerCase() === '#f3f4f6' ||
-      sidebarBg.toLowerCase() === '#fafafa';
-    const sidebarFg = isSidebarLight ? '#0F172A' : '#FFFFFF';
-
-    cssVars.push(`--sidebar: ${sidebarBg}`);
-    cssVars.push(`--sidebar-foreground: ${sidebarFg}`);
-
-    if (primaryRGB) {
-      if (isSidebarLight) {
-        cssVars.push(
-          `--sidebar-accent: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`
-        );
-        cssVars.push(`--sidebar-accent-foreground: ${primary}`);
-        cssVars.push(`--sidebar-border: rgba(0,0,0,0.1)`);
-      } else {
-        cssVars.push(`--sidebar-accent: rgba(255, 255, 255, 0.1)`);
-        cssVars.push(`--sidebar-accent-foreground: #FFFFFF`);
-        cssVars.push(`--sidebar-border: rgba(255,255,255,0.1)`);
-      }
-      cssVars.push(`--sidebar-ring: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
-    }
-
-    if (!isSidebarLight) {
-      cssVars.push(`--sidebar-primary: #FFFFFF`);
-      cssVars.push(`--sidebar-primary-foreground: ${primary}`);
-    } else {
-      cssVars.push(`--sidebar-primary: ${primary}`);
-      cssVars.push(`--sidebar-primary-foreground: ${primaryForeground}`);
-    }
-
-    // 6. Gradients
-    cssVars.push(
-      `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
-    );
-
-    // 7. Surface colors for dark mode (tinted toward the theme hue)
-    //    Only applied when dark surface tokens exist on the theme.
-    const darkSurfaceVars: string[] = [];
-    if (colors.darkBackground) {
-      darkSurfaceVars.push(`--background: ${colors.darkBackground}`);
-      darkSurfaceVars.push(`--card: ${colors.darkCard}`);
-      darkSurfaceVars.push(`--popover: ${colors.darkCard}`);
-      darkSurfaceVars.push(`--secondary: ${colors.darkMuted}`);
-      darkSurfaceVars.push(`--muted: ${colors.darkMuted}`);
-      darkSurfaceVars.push(`--accent: ${colors.darkMuted}`);
-      darkSurfaceVars.push(`--border: ${colors.darkBorder}`);
-      darkSurfaceVars.push(`--input: ${colors.darkMuted}`);
-      darkSurfaceVars.push(`--input-background: ${colors.darkMuted}`);
-    }
-
-    // Apply primary-related tokens directly as inline styles on <html>.
-    // Inline styles have the highest possible specificity and always win over
-    // any stylesheet rule, regardless of order or selector specificity.
-    cssVars.forEach(declaration => {
-      const eqIdx = declaration.indexOf(':');
-      if (eqIdx === -1) return;
-      const prop = declaration.substring(0, eqIdx).trim();
-      const val = declaration.substring(eqIdx + 1).trim();
-      root.style.setProperty(prop, val); // `root` is document.documentElement, declared at line 79
-    });
-
-    // Surface tokens (background, card, muted, etc.) are injected via a style
-    // tag appended last in <head> so they win the cascade for their selectors.
-    const styleId = 'xertica-brand-colors-injection';
-    let styleEl = document.getElementById(styleId);
-    if (!styleEl) {
-      styleEl = document.createElement('style');
-      styleEl.id = styleId;
-      document.head.appendChild(styleEl);
-    } else {
-      document.head.appendChild(styleEl);
-    }
-
-    const darkSurfaceBlock =
-      darkSurfaceVars.length > 0
-        ? `\n:root[data-mode='dark'], .dark {\n  ${darkSurfaceVars.join(';\n  ')};\n}`
-        : '';
-
-    // The style tag handles only the surface tokens that vary per theme in dark mode.
-    styleEl.innerHTML = darkSurfaceBlock.trim();
-  }, [colors, currentTheme, radius, useCustomTokens]);
-
-  // Aplicar cores quando elas mudarem
-  useEffect(() => {
-    applyColors();
-  }, [applyColors]);
-
-  // Observar mudanças na classe 'dark' do documento
-  useEffect(() => {
-    if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return;
-    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);
-  };
-
-  const setBrandColor = (colorKey: keyof BrandColors, value: string) => {
-    setColors(prev => ({
-      ...prev,
-      [colorKey]: value,
-    }));
-  };
-
-  return (
-    <BrandColorsContext.Provider
-      value={{
-        colors,
-        currentTheme,
-        themes: colorThemes,
-        setTheme,
-        setBrandColor,
-        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;
-};
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+import { BrandColors, ColorTheme, PALETTE, colorThemes } from './theme-data';
+import { hexToRgb } from '../utils/color-utils';
+
+interface BrandColorsContextType {
+  colors: BrandColors;
+  currentTheme: string;
+  themes: ColorTheme[];
+  setTheme: (themeId: string) => void;
+  setBrandColor: (colorKey: keyof BrandColors, value: string) => void;
+  radius: number;
+  setRadius: (radius: number) => void;
+}
+
+const BrandColorsContext = createContext<BrandColorsContextType | undefined>(undefined);
+
+interface BrandColorsProviderProps {
+  children: React.ReactNode;
+  defaultTheme?: string;
+  primaryColor?: string;
+  useCustomTokens?: boolean;
+}
+
+export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({
+  children,
+  defaultTheme,
+  primaryColor,
+  useCustomTokens = false,
+}) => {
+  const [currentTheme, setCurrentTheme] = useState<string>(() => {
+    // Se primaryColor for passado, ignoramos o nome do tema
+    if (primaryColor) return 'custom';
+    return defaultTheme || 'xertica-original';
+  });
+
+  const [radius, setRadius] = useState<number>(0.5);
+
+  const [colors, setColors] = useState<BrandColors>(() => {
+    if (primaryColor) {
+      // Criar um tema sob demanda baseado na cor primária
+      return {
+        ...colorThemes[0].colors,
+        primary: primaryColor,
+        primaryDarkMode: primaryColor,
+        sidebarLight: primaryColor,
+        sidebarDark: primaryColor,
+        chart1: primaryColor,
+      };
+    }
+    const theme = colorThemes.find(t => t.id === currentTheme);
+    return theme?.colors || colorThemes[0].colors;
+  });
+
+  useEffect(() => {
+    if (primaryColor) {
+      setColors({
+        ...colorThemes[0].colors,
+        primary: primaryColor,
+        primaryDarkMode: primaryColor,
+        sidebarLight: primaryColor,
+        sidebarDark: primaryColor,
+        chart1: primaryColor,
+      });
+      setCurrentTheme('custom');
+      return;
+    }
+    const theme = colorThemes.find(t => t.id === currentTheme);
+    if (theme) {
+      setColors(theme.colors);
+    }
+  }, [currentTheme, primaryColor]);
+
+  // Função para aplicar as cores baseadas no modo atual e tema
+  const applyColors = React.useCallback(() => {
+    if (useCustomTokens) return; // Skip if user wants to use local tokens.css
+    if (typeof document === 'undefined') return;
+
+    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' : '#047857', // Green 400 / 700
+      warning: isDark ? '#fbbf24' : '#b45309', // Amber 400 / 700
+      info: isDark ? '#60a5fa' : '#1d4ed8', // Blue 400 / 700
+      destructive: isDark ? '#f87171' : '#b91c1c', // Red 400 / 700
+      foreground: isDark ? '#050505' : '#ffffff',
+    };
+
+    // --- Apply CSS Variables ---
+    const cssVars: string[] = [];
+
+    // 1. Core Primary Colors
+    cssVars.push(`--primary: ${primary}`);
+    cssVars.push(`--primary-foreground: ${primaryForeground}`);
+
+    // 2. Semantic Colors
+    cssVars.push(`--success: ${semantic.success}`);
+    cssVars.push(`--success-foreground: ${semantic.foreground}`);
+    cssVars.push(`--warning: ${semantic.warning}`);
+    cssVars.push(`--warning-foreground: ${semantic.foreground}`);
+    cssVars.push(`--info: ${semantic.info}`);
+    cssVars.push(`--info-foreground: ${semantic.foreground}`);
+    cssVars.push(`--destructive: ${semantic.destructive}`);
+    cssVars.push(`--destructive-foreground: ${semantic.foreground}`);
+
+    // 3. Secondary & Accents (Derived or Specific)
+    const primaryRGB = hexToRgb(primary);
+    if (primaryRGB) {
+      cssVars.push(
+        `--ring: ${isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`}`
+      );
+
+      // Also update the Xertica specific variables
+      cssVars.push(`--xertica-primary: ${primary}`);
+      cssVars.push(
+        `--primary-light: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`
+      );
+      cssVars.push(`--primary-light-foreground: ${primary}`);
+    }
+
+    // 3. Radius
+    cssVars.push(`--radius: ${radius}rem`);
+
+    // 4. Charts
+    cssVars.push(`--chart-1: ${colors.chart1}`);
+    cssVars.push(`--chart-2: ${colors.chart2}`);
+    cssVars.push(`--chart-3: ${colors.chart3}`);
+    cssVars.push(`--chart-4: ${colors.chart4}`);
+    cssVars.push(`--chart-5: ${colors.chart5}`);
+
+    // 5. Sidebar (Override)
+    const sidebarBg = isDark ? colors.sidebarDark : colors.sidebarLight;
+    const isSidebarLight =
+      sidebarBg.toLowerCase() === '#ffffff' ||
+      sidebarBg.toLowerCase() === '#f3f4f6' ||
+      sidebarBg.toLowerCase() === '#fafafa';
+    const sidebarFg = isSidebarLight ? '#0F172A' : '#FFFFFF';
+
+    cssVars.push(`--sidebar: ${sidebarBg}`);
+    cssVars.push(`--sidebar-foreground: ${sidebarFg}`);
+
+    if (primaryRGB) {
+      if (isSidebarLight) {
+        cssVars.push(
+          `--sidebar-accent: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.1)`
+        );
+        cssVars.push(`--sidebar-accent-foreground: ${primary}`);
+        cssVars.push(`--sidebar-border: rgba(0,0,0,0.1)`);
+      } else {
+        cssVars.push(`--sidebar-accent: rgba(255, 255, 255, 0.1)`);
+        cssVars.push(`--sidebar-accent-foreground: #FFFFFF`);
+        cssVars.push(`--sidebar-border: rgba(255,255,255,0.1)`);
+      }
+      cssVars.push(`--sidebar-ring: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`);
+    }
+
+    if (!isSidebarLight) {
+      cssVars.push(`--sidebar-primary: #FFFFFF`);
+      cssVars.push(`--sidebar-primary-foreground: ${primary}`);
+    } else {
+      cssVars.push(`--sidebar-primary: ${primary}`);
+      cssVars.push(`--sidebar-primary-foreground: ${primaryForeground}`);
+    }
+
+    // 6. Gradients
+    cssVars.push(
+      `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
+    );
+
+    // 7. Surface colors for dark mode (tinted toward the theme hue)
+    //    Only applied when dark surface tokens exist on the theme.
+    const darkSurfaceVars: string[] = [];
+    if (colors.darkBackground) {
+      darkSurfaceVars.push(`--background: ${colors.darkBackground}`);
+      darkSurfaceVars.push(`--card: ${colors.darkCard}`);
+      darkSurfaceVars.push(`--popover: ${colors.darkCard}`);
+      darkSurfaceVars.push(`--secondary: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--muted: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--accent: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--border: ${colors.darkBorder}`);
+      darkSurfaceVars.push(`--input: ${colors.darkMuted}`);
+      darkSurfaceVars.push(`--input-background: ${colors.darkMuted}`);
+    }
+
+    // Apply primary-related tokens directly as inline styles on <html>.
+    // Inline styles have the highest possible specificity and always win over
+    // any stylesheet rule, regardless of order or selector specificity.
+    cssVars.forEach(declaration => {
+      const eqIdx = declaration.indexOf(':');
+      if (eqIdx === -1) return;
+      const prop = declaration.substring(0, eqIdx).trim();
+      const val = declaration.substring(eqIdx + 1).trim();
+      root.style.setProperty(prop, val); // `root` is document.documentElement, declared at line 79
+    });
+
+    // Surface tokens (background, card, muted, etc.) are injected via a style
+    // tag appended last in <head> so they win the cascade for their selectors.
+    const styleId = 'xertica-brand-colors-injection';
+    let styleEl = document.getElementById(styleId);
+    if (!styleEl) {
+      styleEl = document.createElement('style');
+      styleEl.id = styleId;
+      document.head.appendChild(styleEl);
+    } else {
+      document.head.appendChild(styleEl);
+    }
+
+    const darkSurfaceBlock =
+      darkSurfaceVars.length > 0
+        ? `\n:root[data-mode='dark'], .dark {\n  ${darkSurfaceVars.join(';\n  ')};\n}`
+        : '';
+
+    // The style tag handles only the surface tokens that vary per theme in dark mode.
+    styleEl.innerHTML = darkSurfaceBlock.trim();
+  }, [colors, currentTheme, radius, useCustomTokens]);
+
+  // Aplicar cores quando elas mudarem
+  useEffect(() => {
+    applyColors();
+  }, [applyColors]);
+
+  // Observar mudanças na classe 'dark' do documento
+  useEffect(() => {
+    if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return;
+    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);
+  };
+
+  const setBrandColor = (colorKey: keyof BrandColors, value: string) => {
+    setColors(prev => ({
+      ...prev,
+      [colorKey]: value,
+    }));
+  };
+
+  return (
+    <BrandColorsContext.Provider
+      value={{
+        colors,
+        currentTheme,
+        themes: colorThemes,
+        setTheme,
+        setBrandColor,
+        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;
+};