xertica-ui 2.9.8 → 2.9.9

package/dist/BrandColorsContext-SeOZd2Cq.cjs

@@ -0,0 +1,646 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+
+const colorThemes = [
+  {
+    id: "xertica-original",
+    name: "Xertica Classic",
+    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
+      darkBackground: "#05050d",
+      darkCard: "#0d0c16",
+      darkMuted: "#16151f",
+      darkBorder: "#252336",
+      gradientStart: "#FDB0F2",
+      gradientEnd: "#72CDFD",
+      gradientStartDark: "#7B4A7A",
+      gradientEndDark: "#3A5C7D",
+      chart1: "#2C275B",
+      chart2: "#047857",
+      chart3: "#B45309",
+      chart4: "#1D4ED8",
+      chart5: "#B91C1C"
+    },
+    preview: {
+      primary: "#2C275B",
+      secondary: "#FDB0F2",
+      accent: "#72CDFD"
+    }
+  },
+  {
+    id: "xertica",
+    name: "Xertica",
+    description: "A nova identidade visual da Xertica: papel quente, tintas vivas e botões em estilo serigrafia",
+    colors: {
+      // General-purpose brand accent (logo, links, radio buttons, focus rings,
+      // sidebar active state, badges, etc). Kept as Negro Xertica / Crema so it
+      // stays legible everywhere — yellow is reserved for buttonPrimaryBg below.
+      primary: "#1E1E1E",
+      // Negro Xertica
+      primaryForeground: "#FFFEF8",
+      // Marfim
+      primaryLight: "#1E1E1E",
+      primaryDarkMode: "#F2EDD8",
+      // Crema
+      primaryForegroundDark: "#1E1E1E",
+      sidebarLight: "#1E1E1E",
+      // Negro Xertica
+      sidebarDark: "#1E1E1E",
+      darkBackground: "#141311",
+      darkCard: "#1E1E1E",
+      darkMuted: "#26241f",
+      darkBorder: "#38352c",
+      // Flat fill, same value on every stop — this theme uses solid ink
+      // colors, never gradients (Negro Xertica, matching sidebar/secondary-button).
+      gradientStart: "#1E1E1E",
+      gradientEnd: "#1E1E1E",
+      gradientStartDark: "#1E1E1E",
+      gradientEndDark: "#1E1E1E",
+      chart1: "#3D63AC",
+      // Azul
+      chart2: "#1899AF",
+      // Celeste
+      chart3: "#FAF338",
+      // Amarillo
+      chart4: "#DE5B48",
+      // Rojo Coral
+      chart5: "#2E8B5A",
+      // Verde
+      backgroundLight: "#E9E6DC",
+      // page/shell background
+      cardLight: "#FFFEF8",
+      // Marfim — cards, header, assistant panel
+      inputBorderColor: "rgba(30, 30, 30, 0.4)",
+      // Negro Xertica stroke — form fields only
+      outlineBorderColor: "rgba(30, 30, 30, 0.4)",
+      // Negro Xertica stroke — Button `outline` variant only
+      successColor: "#2E8B5A",
+      // Verde
+      warningColor: "#E37744",
+      // Naranja
+      infoColor: "#3D63AC",
+      // Azul
+      destructiveColor: "#DE5B48",
+      // Rojo Coral
+      buttonRadius: "9999px",
+      buttonStrokeWidth: "1px",
+      buttonStrokeColor: "#1E1E1E",
+      buttonStrokeColorDark: "#F2EDD8",
+      // Crema
+      buttonFontWeight: "400",
+      buttonSecondaryBg: "#1E1E1E",
+      buttonSecondaryBgDark: "#1E1E1E",
+      buttonSecondaryForeground: "#FFFEF8",
+      buttonSecondaryForegroundDark: "#FFFEF8",
+      // Amarillo stays vibrant, but only here — Button `default` variant and
+      // Switch's checked track, per the brand rule that yellow is the one
+      // accent allowed to dominate, and only in those two contexts.
+      buttonPrimaryBg: "#FAF338",
+      buttonPrimaryBgDark: "#FAF338",
+      buttonPrimaryForeground: "#1E1E1E",
+      buttonPrimaryForegroundDark: "#1E1E1E"
+    },
+    preview: {
+      primary: "#FAF338",
+      secondary: "#1E1E1E",
+      accent: "#1899AF"
+    }
+  },
+  {
+    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",
+      darkBackground: "#05050d",
+      darkCard: "#0d0c16",
+      darkMuted: "#16151f",
+      darkBorder: "#252336",
+      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",
+      darkBackground: "#05050d",
+      darkCard: "#0d0c16",
+      darkMuted: "#16151f",
+      darkBorder: "#252336",
+      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",
+      darkBackground: "#03050f",
+      darkCard: "#080d18",
+      darkMuted: "#0f1422",
+      darkBorder: "#1a2440",
+      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",
+      darkBackground: "#07040f",
+      darkCard: "#0e0a18",
+      darkMuted: "#150f21",
+      darkBorder: "#221838",
+      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",
+      darkBackground: "#0f0305",
+      darkCard: "#180709",
+      darkMuted: "#200c0f",
+      darkBorder: "#3a1018",
+      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",
+      darkBackground: "#030f08",
+      darkCard: "#07160c",
+      darkMuted: "#0c1e11",
+      darkBorder: "#143320",
+      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",
+      darkBackground: "#0f0a03",
+      darkCard: "#181107",
+      darkMuted: "#20190d",
+      darkBorder: "#382e14",
+      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",
+      darkBackground: "#0f0703",
+      darkCard: "#180e06",
+      darkMuted: "#20150a",
+      darkBorder: "#382512",
+      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"
+    }
+  }
+];
+
+function hexToRgb(hex) {
+  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;
+}
+
+const BrandColorsContext = React.createContext(void 0);
+const BrandColorsProvider = ({
+  children,
+  defaultTheme,
+  primaryColor,
+  useCustomTokens = false
+}) => {
+  const [currentTheme, setCurrentTheme] = React.useState(() => {
+    if (primaryColor) return "custom";
+    return defaultTheme || "xertica-original";
+  });
+  const [radius, setRadius] = React.useState(0.5);
+  const [colors, setColors] = React.useState(() => {
+    if (primaryColor) {
+      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;
+  });
+  React.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]);
+  const applyColors = React.useCallback(() => {
+    if (useCustomTokens) return;
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    const isDark = root.classList.contains("dark");
+    const primary = isDark ? colors.primaryDarkMode : colors.primary;
+    const primaryForeground = isDark ? colors.primaryForegroundDark : colors.primaryForeground;
+    const gradientStart = isDark ? colors.gradientStartDark : colors.gradientStart;
+    const gradientEnd = isDark ? colors.gradientEndDark : colors.gradientEnd;
+    const semantic = {
+      success: isDark ? "#4ade80" : colors.successColor || "#047857",
+      // Green 400 / 700
+      warning: isDark ? "#fbbf24" : colors.warningColor || "#b45309",
+      // Amber 400 / 700
+      info: isDark ? "#60a5fa" : colors.infoColor || "#1d4ed8",
+      // Blue 400 / 700
+      destructive: isDark ? "#f87171" : colors.destructiveColor || "#b91c1c",
+      // Red 400 / 700
+      foreground: isDark ? "#050505" : "#ffffff"
+    };
+    const cssVars = [];
+    cssVars.push(`--primary: ${primary}`);
+    cssVars.push(`--primary-foreground: ${primaryForeground}`);
+    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}`);
+    const primaryRGB = hexToRgb(primary);
+    if (primaryRGB) {
+      cssVars.push(
+        `--ring: ${isDark ? colors.primaryDarkMode : `rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.5)`}`
+      );
+      cssVars.push(`--xertica-primary: ${primary}`);
+      cssVars.push(
+        `--primary-light: rgba(${primaryRGB.r}, ${primaryRGB.g}, ${primaryRGB.b}, 0.15)`
+      );
+      cssVars.push(`--primary-light-foreground: ${primary}`);
+    }
+    cssVars.push(`--radius: ${radius}rem`);
+    cssVars.push(`--radius-button: ${colors.buttonRadius || "12px"}`);
+    cssVars.push(`--button-stroke-width: ${colors.buttonStrokeWidth || "0px"}`);
+    cssVars.push(`--button-font-weight: ${colors.buttonFontWeight || "500"}`);
+    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}`);
+    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}`);
+    }
+    cssVars.push(
+      `--gradient-diagonal: linear-gradient(135deg, ${gradientStart} 0%, ${gradientEnd} 100%)`
+    );
+    const darkSurfaceVars = [];
+    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}`);
+    }
+    const lightModeVars = [
+      `--button-stroke-color: ${colors.buttonStrokeColor || "transparent"}`,
+      `--button-secondary-bg: ${colors.buttonSecondaryBg || "var(--secondary)"}`,
+      `--button-secondary-foreground: ${colors.buttonSecondaryForeground || "var(--secondary-foreground)"}`,
+      `--button-primary-bg: ${colors.buttonPrimaryBg || "var(--primary)"}`,
+      `--button-primary-foreground: ${colors.buttonPrimaryForeground || "var(--primary-foreground)"}`
+    ];
+    if (colors.backgroundLight) {
+      lightModeVars.push(`--background: ${colors.backgroundLight}`);
+      lightModeVars.push(`--muted: ${colors.backgroundLight}`);
+    }
+    if (colors.cardLight) {
+      lightModeVars.push(`--card: ${colors.cardLight}`);
+      lightModeVars.push(`--popover: ${colors.cardLight}`);
+    }
+    if (colors.inputBorderColor) {
+      lightModeVars.push(`--input-border: ${colors.inputBorderColor}`);
+    }
+    if (colors.outlineBorderColor) {
+      lightModeVars.push(`--outline-border: ${colors.outlineBorderColor}`);
+    }
+    darkSurfaceVars.push(
+      `--button-stroke-color: ${colors.buttonStrokeColorDark || colors.buttonStrokeColor || "transparent"}`
+    );
+    darkSurfaceVars.push(
+      `--button-secondary-bg: ${colors.buttonSecondaryBgDark || colors.buttonSecondaryBg || "var(--secondary)"}`
+    );
+    darkSurfaceVars.push(
+      `--button-secondary-foreground: ${colors.buttonSecondaryForegroundDark || colors.buttonSecondaryForeground || "var(--secondary-foreground)"}`
+    );
+    darkSurfaceVars.push(
+      `--button-primary-bg: ${colors.buttonPrimaryBgDark || colors.buttonPrimaryBg || "var(--primary)"}`
+    );
+    darkSurfaceVars.push(
+      `--button-primary-foreground: ${colors.buttonPrimaryForegroundDark || colors.buttonPrimaryForeground || "var(--primary-foreground)"}`
+    );
+    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);
+    });
+    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 lightModeBlock = `:root:not(.dark) {
+  ${lightModeVars.join(";\n  ")};
+}`;
+    const darkSurfaceBlock = darkSurfaceVars.length > 0 ? `
+:root[data-mode='dark'], .dark {
+  ${darkSurfaceVars.join(";\n  ")};
+}` : "";
+    styleEl.innerHTML = `${lightModeBlock}${darkSurfaceBlock}`.trim();
+  }, [colors, currentTheme, radius, useCustomTokens]);
+  React.useEffect(() => {
+    applyColors();
+  }, [applyColors]);
+  React.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) => {
+    setCurrentTheme(themeId);
+  };
+  const setBrandColor = (colorKey, value) => {
+    setColors((prev) => ({
+      ...prev,
+      [colorKey]: value
+    }));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    BrandColorsContext.Provider,
+    {
+      value: {
+        colors,
+        currentTheme,
+        themes: colorThemes,
+        setTheme,
+        setBrandColor,
+        radius,
+        setRadius
+      },
+      children
+    }
+  );
+};
+const useBrandColors = () => {
+  const context = React.useContext(BrandColorsContext);
+  if (context === void 0) {
+    throw new Error("useBrandColors must be used within a BrandColorsProvider");
+  }
+  return context;
+};
+
+exports.BrandColorsProvider = BrandColorsProvider;
+exports.useBrandColors = useBrandColors;