xertica-ui 2.5.3 → 2.6.0

package/templates/src/i18n.ts

@@ -20,6 +20,15 @@
 // so adding a new JSON file under `locales/<lang>/...` is picked up
 // automatically without touching this file.
 //
+// Singleton guard: `node_modules/i18next` is a single instance shared (hoisted)
+// between this app and xertica-ui itself. `i18n.init()` fully replaces the
+// resource store rather than merging, so calling it unconditionally here would
+// race with the library's own bootstrap — whichever side initializes last wins
+// and silently wipes the other's resources. To avoid this, we only call
+// `.init()` if i18next hasn't been initialized yet; otherwise we merge our
+// resources in via `addResourceBundle(..., overwrite: false)` so a
+// design-system default never clobbers a key this app has already registered.
+//
 // Adding a language — three options:
 //
 // Option A) Drop-in via LanguageProvider (recommended for app consumers):
@@ -85,19 +94,33 @@ const savedLanguage =
     ? (localStorage.getItem(STORAGE_KEY) ?? DEFAULT_FALLBACK)
     : DEFAULT_FALLBACK;
 
-i18n.use(initReactI18next).init({
-  resources: {
-    'pt-BR': { translation: ptBR },
-    en: { translation: en },
-    es: { translation: es },
-  },
-  lng: savedLanguage,
-  fallbackLng: DEFAULT_FALLBACK,
-  interpolation: {
-    // React already escapes values — no need for i18next to double-escape
-    escapeValue: false,
-  },
-});
+const defaultResourcesByLang: Record<string, Record<string, unknown>> = {
+  'pt-BR': ptBR,
+  en,
+  es,
+};
+
+if (!i18n.isInitialized) {
+  i18n.use(initReactI18next).init({
+    resources: {
+      'pt-BR': { translation: ptBR },
+      en: { translation: en },
+      es: { translation: es },
+    },
+    lng: savedLanguage,
+    fallbackLng: DEFAULT_FALLBACK,
+    interpolation: {
+      // React already escapes values — no need for i18next to double-escape
+      escapeValue: false,
+    },
+  });
+} else {
+  // Already initialized by xertica-ui's own bootstrap — merge our resources in
+  // without overwriting keys the library has already registered.
+  for (const [lang, resources] of Object.entries(defaultResourcesByLang)) {
+    i18n.addResourceBundle(lang, 'translation', resources, true, false);
+  }
+}
 
 /**
  * Register an additional locale at runtime. Useful when an app wants to add a

package/templates/src/locales/en/pages/settings.json

@@ -0,0 +1,15 @@
+{
+  "title": "Settings",
+  "subtitle": "Manage your account and application preferences",
+  "account": "Account",
+  "accountDescription": "Your account information",
+  "email": "Email",
+  "preferences": "Preferences",
+  "preferencesDescription": "Customize your experience",
+  "theme": "Theme",
+  "themeDescription": "Toggle between light and dark mode",
+  "language": "Language",
+  "languageDescription": "Choose the interface language",
+  "logout": "Log out",
+  "logoutDescription": "End your session on this device"
+}

package/templates/src/locales/es/pages/settings.json

@@ -0,0 +1,15 @@
+{
+  "title": "Configuración",
+  "subtitle": "Administra tu cuenta y las preferencias de la aplicación",
+  "account": "Cuenta",
+  "accountDescription": "Información de tu cuenta",
+  "email": "Correo electrónico",
+  "preferences": "Preferencias",
+  "preferencesDescription": "Personaliza tu experiencia",
+  "theme": "Tema",
+  "themeDescription": "Alterna entre el modo claro y oscuro",
+  "language": "Idioma",
+  "languageDescription": "Elige el idioma de la interfaz",
+  "logout": "Cerrar sesión",
+  "logoutDescription": "Finaliza tu sesión en este dispositivo"
+}

package/templates/src/locales/pt-BR/pages/settings.json

@@ -0,0 +1,15 @@
+{
+  "title": "Configurações",
+  "subtitle": "Gerencie as preferências da sua conta e da aplicação",
+  "account": "Conta",
+  "accountDescription": "Informações da sua conta",
+  "email": "E-mail",
+  "preferences": "Preferências",
+  "preferencesDescription": "Personalize sua experiência",
+  "theme": "Tema",
+  "themeDescription": "Alterne entre os modos claro e escuro",
+  "language": "Idioma",
+  "languageDescription": "Escolha o idioma da interface",
+  "logout": "Sair da conta",
+  "logoutDescription": "Encerrar sua sessão neste dispositivo"
+}

package/templates/src/pages/SettingsPage.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { XerticaAssistant } from 'xertica-ui/assistant';
+import { useLayout } from 'xertica-ui/hooks';
+import { AppLayout } from '../app/components/AppLayout';
+import { SettingsContent } from '../features/settings';
+
+/**
+ * Settings page — thin layout shell.
+ *
+ * Auth state is consumed from `AuthContext` via `AppLayout` — no props needed.
+ */
+export function SettingsPage() {
+  const { assistenteExpanded, toggleAssistente } = useLayout();
+
+  return (
+    <AppLayout
+      assistant={
+        <XerticaAssistant
+          isExpanded={assistenteExpanded}
+          onToggle={toggleAssistente}
+          onEvaluation={(id, type, reason) => console.log('Feedback:', id, type, reason)}
+        />
+      }
+    >
+      <SettingsContent />
+    </AppLayout>
+  );
+}

package/templates/src/shared/config/navigation.ts

@@ -4,8 +4,8 @@ import { Home, FileText } from 'lucide-react';
 export interface RouteConfig {
   path: string;
   label: string;
-  icon: React.ComponentType<any>;
-  component?: React.ComponentType<any>;
+  icon: React.ComponentType<{ className?: string }>;
+  component?: React.ComponentType<{ className?: string }>;
 }
 
 export const routes: RouteConfig[] = [

package/templates/src/styles/xertica/tokens.css

@@ -1,240 +1,240 @@
-/* ============================================
-   🎨 TOKENS / VARIABLES
-   ============================================ */
-
-:root,
-:root[data-theme='default'] {
-  /* Brand Tokens - Source of Truth */
-  --xertica-primary: rgba(44, 39, 91, 1);
-  --xertica-dark: rgba(35, 29, 79, 1);
-
-  /* Semantic Colors */
-  --background: rgba(255, 255, 255, 1);
-  --foreground: rgba(9, 9, 11, 1);
-
-  --card: rgba(255, 255, 255, 1);
-  --card-foreground: rgba(9, 9, 11, 1);
-
-  --popover: rgba(255, 255, 255, 1);
-  --popover-foreground: rgba(9, 9, 11, 1);
-
-  --primary: var(--xertica-primary);
-  --primary-foreground: rgba(250, 250, 250, 1);
-  --primary-light: rgba(44, 39, 91, 0.15);
-  --primary-light-foreground: rgba(44, 39, 91, 1);
-
-  --secondary: rgba(244, 244, 245, 1);
-  --secondary-foreground: rgba(24, 24, 27, 1);
-
-  --muted: rgba(244, 244, 245, 1);
-  --muted-foreground: rgba(113, 113, 122, 1);
-
-  --accent: rgba(244, 244, 245, 1);
-  --accent-foreground: rgba(24, 24, 27, 1);
-
-  --destructive: rgba(239, 68, 68, 1);
-  --destructive-foreground: rgba(250, 250, 250, 1);
-
-  /* Semantic Status Colors */
-  --success: rgba(5, 150, 105, 1);
-  --success-foreground: rgba(250, 250, 250, 1);
-  --info: rgba(37, 99, 235, 1);
-  --info-foreground: rgba(250, 250, 250, 1);
-  --warning: rgba(234, 179, 8, 1);
-  --warning-foreground: rgba(28, 25, 23, 1);
-
-  --border: rgba(228, 228, 231, 1);
-  --input: rgba(244, 244, 245, 0.5);
-  --input-background: rgba(244, 244, 245, 0.5);
-  --ring: rgba(161, 161, 170, 1);
-
-  /* Sidebar */
-  --sidebar: rgba(44, 39, 91, 1);
-  --sidebar-foreground: rgba(250, 250, 250, 1);
-  --sidebar-primary: rgba(255, 255, 255, 1);
-  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
-  --sidebar-accent: rgba(244, 244, 245, 1);
-  --sidebar-accent-foreground: rgba(24, 24, 27, 1);
-  --sidebar-border: rgba(65, 61, 107, 1);
-  --sidebar-ring: rgba(161, 161, 170, 1);
-
-  /* Charts — vibrant, accessible, harmonious palette */
-  --chart-1: rgba(99, 91, 255, 1);
-  /* indigo-violet — brand-adjacent */
-  --chart-2: rgba(16, 185, 129, 1);
-  /* emerald — success-adjacent */
-  --chart-3: rgba(245, 158, 11, 1);
-  /* amber — warm accent */
-  --chart-4: rgba(59, 130, 246, 1);
-  /* blue — info-adjacent */
-  --chart-5: rgba(239, 68, 68, 1);
-  /* red — destructive-adjacent */
-  --chart-6: rgba(168, 85, 247, 1);
-  /* purple — extended palette */
-  --chart-7: rgba(20, 184, 166, 1);
-  /* teal — extended palette */
-  --chart-8: rgba(251, 113, 133, 1);
-  /* rose — extended palette */
-
-  /* Gradients */
-  --gradient-diagonal: linear-gradient(135deg, #fdb0f2 0%, #72cdfd 100%);
-
-  /* Spacing & Radius */
-  --radius: 6px;
-  --radius-button: 12px;
-  --radius-card: 12px;
-
-  /* Mobile Content Padding — global horizontal padding on small screens.
-     Change this value to adjust content padding on mobile across the entire project. */
-  --mobile-content-padding: 1.25rem;
-
-  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
-
-  /* Typography */
-  --font-size: 16px;
-  --text-h1: 2rem;
-  --text-h2: 1.75rem;
-  --text-h3: 1.5rem;
-  --text-h4: 1.25rem;
-  --text-base: 1rem;
-  --text-p: 0.875rem;
-  --text-label: 0.875rem;
-  --text-small: 0.875rem;
-  --text-xs: 0.75rem;
-  --text-muted: 0.875rem;
-  --text-stats: 2.25rem;
-  --text-table-head: 1.25rem;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 800;
-
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-8: 2rem;
-
-  /* Calendar */
-  --cell-size: 2.5rem;
-  --cell-radius: var(--radius);
-  --calendar-caption-size: 15px;
-  --calendar-weekday-size: 12px;
-  --calendar-day-size: 14px;
-
-  /* Toast - Success */
-  --toast-success-bg: rgba(220, 252, 231, 1);
-  --toast-success-border: rgba(5, 150, 105, 1);
-  --toast-success-icon: rgba(5, 150, 105, 1);
-  /* Toast - Warning */
-  --toast-warning-bg: rgba(254, 249, 195, 1);
-  --toast-warning-border: rgba(161, 98, 7, 1);
-  --toast-warning-icon: rgba(161, 98, 7, 1);
-  /* Toast - Info */
-  --toast-info-bg: rgba(219, 234, 254, 1);
-  --toast-info-border: rgba(37, 99, 235, 1);
-  --toast-info-icon: rgba(37, 99, 235, 1);
-  /* Toast - Error */
-  --toast-error-bg: rgba(254, 226, 226, 1);
-  --toast-error-border: rgba(239, 68, 68, 1);
-  --toast-error-icon: rgba(239, 68, 68, 1);
-}
-
-:root[data-mode='dark'],
-.dark {
-  /* Brand Tokens */
-  --xertica-primary: rgba(44, 39, 91, 1);
-  --primary: var(--xertica-primary);
-
-  /* Semantic Colors */
-  --background: rgba(5, 5, 13, 1);
-  --foreground: rgba(250, 250, 250, 1);
-
-  --card: rgba(13, 12, 22, 1);
-  --card-foreground: rgba(250, 250, 250, 1);
-
-  --popover: rgba(13, 12, 22, 1);
-  --popover-foreground: rgba(250, 250, 250, 1);
-
-  --primary-foreground: rgba(250, 250, 250, 1);
-  --primary-light: rgba(44, 39, 91, 0.15);
-  --primary-light-foreground: rgba(44, 39, 91, 1);
-
-  --secondary: rgba(22, 21, 31, 1);
-  --secondary-foreground: rgba(250, 250, 250, 1);
-
-  --muted: rgba(22, 21, 31, 1);
-  --muted-foreground: rgba(161, 161, 170, 1);
-
-  --accent: rgba(22, 21, 31, 1);
-  --accent-foreground: rgba(250, 250, 250, 1);
-
-  --destructive: rgba(239, 68, 68, 1);
-  --destructive-foreground: rgba(250, 250, 250, 1);
-
-  /* Semantic Status Colors */
-  --success: rgba(34, 197, 94, 1);
-  --success-foreground: rgba(5, 5, 5, 1);
-  --info: rgba(96, 165, 250, 1);
-  --info-foreground: rgba(5, 5, 5, 1);
-  --warning: rgba(251, 191, 36, 1);
-  --warning-foreground: rgba(5, 5, 5, 1);
-
-  --border: rgba(37, 35, 54, 1);
-  --input: rgba(22, 21, 31, 0.5);
-  --input-background: rgba(22, 21, 31, 0.5);
-  --ring: rgba(113, 113, 122, 1);
-
-  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
-
-  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
-  --chart-1: rgba(129, 122, 255, 1);
-  /* indigo-violet lighter */
-  --chart-2: rgba(52, 211, 153, 1);
-  /* emerald lighter */
-  --chart-3: rgba(251, 191, 36, 1);
-  /* amber lighter */
-  --chart-4: rgba(96, 165, 250, 1);
-  /* blue lighter */
-  --chart-5: rgba(248, 113, 113, 1);
-  /* red lighter */
-  --chart-6: rgba(196, 132, 252, 1);
-  /* purple lighter */
-  --chart-7: rgba(45, 212, 191, 1);
-  /* teal lighter */
-  --chart-8: rgba(253, 164, 175, 1);
-  /* rose lighter */
-
-  /* Sidebar */
-  --sidebar-foreground: rgba(250, 250, 250, 1);
-  --sidebar-primary: rgba(255, 255, 255, 1);
-  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
-  --sidebar-accent: rgba(63, 63, 70, 1);
-  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
-  --sidebar-border: rgba(65, 61, 107, 1);
-  --sidebar-ring: rgba(161, 161, 170, 1);
-
-  /* Gradients */
-  --gradient-diagonal: linear-gradient(135deg, #7b4a7a 0%, #3a5c7d 100%);
-
-  /* Toast - Success */
-  --toast-success-bg: rgba(6, 78, 59, 1);
-  --toast-success-border: rgba(34, 197, 94, 1);
-  --toast-success-icon: rgba(34, 197, 94, 1);
-  /* Toast - Warning */
-  --toast-warning-bg: rgba(113, 63, 18, 1);
-  --toast-warning-border: rgba(251, 191, 36, 1);
-  --toast-warning-icon: rgba(251, 191, 36, 1);
-  /* Toast - Info */
-  --toast-info-bg: rgba(30, 58, 138, 1);
-  --toast-info-border: rgba(96, 165, 250, 1);
-  --toast-info-icon: rgba(96, 165, 250, 1);
-  /* Toast - Error */
-  --toast-error-bg: rgba(127, 29, 29, 1);
-  --toast-error-border: rgba(248, 113, 113, 1);
-  --toast-error-icon: rgba(248, 113, 113, 1);
-}
+/* ============================================
+   🎨 TOKENS / VARIABLES
+   ============================================ */
+
+:root,
+:root[data-theme='default'] {
+  /* Brand Tokens - Source of Truth */
+  --xertica-primary: rgba(44, 39, 91, 1);
+  --xertica-dark: rgba(35, 29, 79, 1);
+
+  /* Semantic Colors */
+  --background: rgba(255, 255, 255, 1);
+  --foreground: rgba(9, 9, 11, 1);
+
+  --card: rgba(255, 255, 255, 1);
+  --card-foreground: rgba(9, 9, 11, 1);
+
+  --popover: rgba(255, 255, 255, 1);
+  --popover-foreground: rgba(9, 9, 11, 1);
+
+  --primary: var(--xertica-primary);
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --primary-light: rgba(44, 39, 91, 0.15);
+  --primary-light-foreground: rgba(44, 39, 91, 1);
+
+  --secondary: rgba(244, 244, 245, 1);
+  --secondary-foreground: rgba(24, 24, 27, 1);
+
+  --muted: rgba(244, 244, 245, 1);
+  --muted-foreground: rgba(113, 113, 122, 1);
+
+  --accent: rgba(244, 244, 245, 1);
+  --accent-foreground: rgba(24, 24, 27, 1);
+
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+
+  /* Semantic Status Colors */
+  --success: rgba(5, 150, 105, 1);
+  --success-foreground: rgba(250, 250, 250, 1);
+  --info: rgba(37, 99, 235, 1);
+  --info-foreground: rgba(250, 250, 250, 1);
+  --warning: rgba(234, 179, 8, 1);
+  --warning-foreground: rgba(28, 25, 23, 1);
+
+  --border: rgba(228, 228, 231, 1);
+  --input: rgba(244, 244, 245, 0.5);
+  --input-background: rgba(244, 244, 245, 0.5);
+  --ring: rgba(161, 161, 170, 1);
+
+  /* Sidebar */
+  --sidebar: rgba(44, 39, 91, 1);
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
+  --sidebar-accent: rgba(244, 244, 245, 1);
+  --sidebar-accent-foreground: rgba(24, 24, 27, 1);
+  --sidebar-border: rgba(65, 61, 107, 1);
+  --sidebar-ring: rgba(161, 161, 170, 1);
+
+  /* Charts — vibrant, accessible, harmonious palette */
+  --chart-1: rgba(99, 91, 255, 1);
+  /* indigo-violet — brand-adjacent */
+  --chart-2: rgba(16, 185, 129, 1);
+  /* emerald — success-adjacent */
+  --chart-3: rgba(245, 158, 11, 1);
+  /* amber — warm accent */
+  --chart-4: rgba(59, 130, 246, 1);
+  /* blue — info-adjacent */
+  --chart-5: rgba(239, 68, 68, 1);
+  /* red — destructive-adjacent */
+  --chart-6: rgba(168, 85, 247, 1);
+  /* purple — extended palette */
+  --chart-7: rgba(20, 184, 166, 1);
+  /* teal — extended palette */
+  --chart-8: rgba(251, 113, 133, 1);
+  /* rose — extended palette */
+
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, #fdb0f2 0%, #72cdfd 100%);
+
+  /* Spacing & Radius */
+  --radius: 6px;
+  --radius-button: 12px;
+  --radius-card: 12px;
+
+  /* Mobile Content Padding — global horizontal padding on small screens.
+     Change this value to adjust content padding on mobile across the entire project. */
+  --mobile-content-padding: 1.25rem;
+
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
+
+  /* Typography */
+  --font-size: 16px;
+  --text-h1: 2rem;
+  --text-h2: 1.75rem;
+  --text-h3: 1.5rem;
+  --text-h4: 1.25rem;
+  --text-base: 1rem;
+  --text-p: 0.875rem;
+  --text-label: 0.875rem;
+  --text-small: 0.875rem;
+  --text-xs: 0.75rem;
+  --text-muted: 0.875rem;
+  --text-stats: 2.25rem;
+  --text-table-head: 1.25rem;
+
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-8: 2rem;
+
+  /* Calendar */
+  --cell-size: 2.5rem;
+  --cell-radius: var(--radius);
+  --calendar-caption-size: 15px;
+  --calendar-weekday-size: 12px;
+  --calendar-day-size: 14px;
+
+  /* Toast - Success */
+  --toast-success-bg: rgba(220, 252, 231, 1);
+  --toast-success-border: rgba(5, 150, 105, 1);
+  --toast-success-icon: rgba(5, 150, 105, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(254, 249, 195, 1);
+  --toast-warning-border: rgba(161, 98, 7, 1);
+  --toast-warning-icon: rgba(161, 98, 7, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(219, 234, 254, 1);
+  --toast-info-border: rgba(37, 99, 235, 1);
+  --toast-info-icon: rgba(37, 99, 235, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(254, 226, 226, 1);
+  --toast-error-border: rgba(239, 68, 68, 1);
+  --toast-error-icon: rgba(239, 68, 68, 1);
+}
+
+:root[data-mode='dark'],
+.dark {
+  /* Brand Tokens */
+  --xertica-primary: rgba(44, 39, 91, 1);
+  --primary: var(--xertica-primary);
+
+  /* Semantic Colors */
+  --background: rgba(5, 5, 13, 1);
+  --foreground: rgba(250, 250, 250, 1);
+
+  --card: rgba(13, 12, 22, 1);
+  --card-foreground: rgba(250, 250, 250, 1);
+
+  --popover: rgba(13, 12, 22, 1);
+  --popover-foreground: rgba(250, 250, 250, 1);
+
+  --primary-foreground: rgba(250, 250, 250, 1);
+  --primary-light: rgba(44, 39, 91, 0.15);
+  --primary-light-foreground: rgba(44, 39, 91, 1);
+
+  --secondary: rgba(22, 21, 31, 1);
+  --secondary-foreground: rgba(250, 250, 250, 1);
+
+  --muted: rgba(22, 21, 31, 1);
+  --muted-foreground: rgba(161, 161, 170, 1);
+
+  --accent: rgba(22, 21, 31, 1);
+  --accent-foreground: rgba(250, 250, 250, 1);
+
+  --destructive: rgba(239, 68, 68, 1);
+  --destructive-foreground: rgba(250, 250, 250, 1);
+
+  /* Semantic Status Colors */
+  --success: rgba(34, 197, 94, 1);
+  --success-foreground: rgba(5, 5, 5, 1);
+  --info: rgba(96, 165, 250, 1);
+  --info-foreground: rgba(5, 5, 5, 1);
+  --warning: rgba(251, 191, 36, 1);
+  --warning-foreground: rgba(5, 5, 5, 1);
+
+  --border: rgba(37, 35, 54, 1);
+  --input: rgba(22, 21, 31, 0.5);
+  --input-background: rgba(22, 21, 31, 0.5);
+  --ring: rgba(113, 113, 122, 1);
+
+  --elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.3);
+
+  /* Charts — dark mode: slightly lighter/more saturated for contrast on dark bg */
+  --chart-1: rgba(129, 122, 255, 1);
+  /* indigo-violet lighter */
+  --chart-2: rgba(52, 211, 153, 1);
+  /* emerald lighter */
+  --chart-3: rgba(251, 191, 36, 1);
+  /* amber lighter */
+  --chart-4: rgba(96, 165, 250, 1);
+  /* blue lighter */
+  --chart-5: rgba(248, 113, 113, 1);
+  /* red lighter */
+  --chart-6: rgba(196, 132, 252, 1);
+  /* purple lighter */
+  --chart-7: rgba(45, 212, 191, 1);
+  /* teal lighter */
+  --chart-8: rgba(253, 164, 175, 1);
+  /* rose lighter */
+
+  /* Sidebar */
+  --sidebar-foreground: rgba(250, 250, 250, 1);
+  --sidebar-primary: rgba(255, 255, 255, 1);
+  --sidebar-primary-foreground: rgba(9, 9, 11, 1);
+  --sidebar-accent: rgba(63, 63, 70, 1);
+  --sidebar-accent-foreground: rgba(250, 250, 250, 1);
+  --sidebar-border: rgba(65, 61, 107, 1);
+  --sidebar-ring: rgba(161, 161, 170, 1);
+
+  /* Gradients */
+  --gradient-diagonal: linear-gradient(135deg, #7b4a7a 0%, #3a5c7d 100%);
+
+  /* Toast - Success */
+  --toast-success-bg: rgba(6, 78, 59, 1);
+  --toast-success-border: rgba(34, 197, 94, 1);
+  --toast-success-icon: rgba(34, 197, 94, 1);
+  /* Toast - Warning */
+  --toast-warning-bg: rgba(113, 63, 18, 1);
+  --toast-warning-border: rgba(251, 191, 36, 1);
+  --toast-warning-icon: rgba(251, 191, 36, 1);
+  /* Toast - Info */
+  --toast-info-bg: rgba(30, 58, 138, 1);
+  --toast-info-border: rgba(96, 165, 250, 1);
+  --toast-info-icon: rgba(96, 165, 250, 1);
+  /* Toast - Error */
+  --toast-error-bg: rgba(127, 29, 29, 1);
+  --toast-error-border: rgba(248, 113, 113, 1);
+  --toast-error-icon: rgba(248, 113, 113, 1);
+}

package/templates/vite.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("vite").UserConfig;
-export default _default;
+declare const _default: import("vite").UserConfig;
+export default _default;