xertica-ui 1.4.7 → 1.4.9

package/components/HomeContent.tsx

@@ -47,7 +47,10 @@ export function HomeContent({ }: HomeContentProps) {
       className={`flex-1 flex flex-col overflow-hidden transition-all duration-300`}
     >
       <Header
-        title={breadcrumbLabel}
+        breadcrumbs={[
+          { label: 'Xertica UI', },
+          { label: 'Início' },
+        ]}
       />
 
       {/* Área de conteúdo */}

package/components/TemplateContent.tsx

@@ -66,36 +66,12 @@ export function TemplateContent({ }: TemplateContentProps) {
         }`}
     >
       {/* Header fixo */}
-      <header className="bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0">
-        <div className="flex items-center justify-between p-[0px]">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            {/* Botão menu para mobile */}
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={toggleSidebar}
-              className="md:hidden mr-2 p-2"
-            >
-              <Menu className="w-5 h-5" />
-            </Button>
-            <span className="text-primary [font-weight:var(--font-weight-medium)]">Xertica.ai</span>
-            <ChevronRight className="w-4 h-4" />
-            <span className="text-foreground [font-weight:var(--font-weight-medium)]">Template Page</span>
-          </div>
-
-          {/* Controles do usuário */}
-          <div className="flex items-center gap-3">
-            {/* Badge de versão */}
-            <Badge variant="default" className="hidden sm:flex">v1.0.0</Badge>
-
-            {/* Seletor de idioma */}
-            <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
-
-            {/* Toggle de tema */}
-            <ThemeToggle className="hover:bg-accent" />
-          </div>
-        </div>
-      </header>
+      <Header
+        breadcrumbs={[
+          { label: 'Xertica UI', href: '/home', icon: <Home className="w-4 h-4" /> },
+          { label: 'Template Page' },
+        ]}
+      />
 
       {/* Área de conteúdo */}
       <main className="flex-1 overflow-hidden bg-muted">

package/components/XerticaProvider.tsx

@@ -14,10 +14,20 @@ interface XerticaProviderProps {
     apiKey?: string; // Optional Gemini API Key
     googleMapsApiKey?: string; // Optional Maps API Key
     defaultBrandTheme?: string;
+    primaryColor?: string; // Add this
+    useCustomTokens?: boolean; // Add this
     disableDarkMode?: boolean;
 }
 
-export function XerticaProvider({ children, apiKey, googleMapsApiKey, defaultBrandTheme, disableDarkMode }: XerticaProviderProps) {
+export function XerticaProvider({ 
+    children, 
+    apiKey, 
+    googleMapsApiKey, 
+    defaultBrandTheme, 
+    primaryColor,
+    useCustomTokens,
+    disableDarkMode 
+}: XerticaProviderProps) {
     // Note: ApiKeyProvider and GoogleMapsLoaderProvider might need props for keys if not handling internals
     // Currently ApiKeyProvider seems to manage key internally or via props? logic check needed.
     // Assuming default behavior for now, but ideally we pass keys here.
@@ -26,7 +36,11 @@ export function XerticaProvider({ children, apiKey, googleMapsApiKey, defaultBra
         <ApiKeyProvider>
             <GoogleMapsLoaderProvider>
                 <LanguageProvider>
-                    <BrandColorsProvider defaultTheme={defaultBrandTheme}>
+                    <BrandColorsProvider 
+                        defaultTheme={defaultBrandTheme}
+                        primaryColor={primaryColor}
+                        useCustomTokens={useCustomTokens}
+                    >
                         <ThemeProvider disableDarkMode={disableDarkMode}>
                             <AssistenteProvider>
                                 <LayoutProvider>

package/components/index.ts

@@ -1,3 +1,5 @@
+import '../index.css';
+
 // Xertica UI Styles should be imported by the consumer
 // ============================================================================
 // Xertica Assistant Exports

package/contexts/BrandColorsContext.tsx

@@ -21,28 +21,58 @@ const BrandColorsContext = createContext<BrandColorsContextType | undefined>(und
 interface BrandColorsProviderProps {
   children: React.ReactNode;
   defaultTheme?: string;
+  primaryColor?: string;
+  useCustomTokens?: boolean;
 }
 
-export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({ children, defaultTheme }) => {
+export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({ 
+  children, 
+  defaultTheme, 
+  primaryColor, 
+  useCustomTokens = false 
+}) => {
   const [currentTheme, setCurrentTheme] = useState<string>(() => {
-    // Força o tema original / ou o passado por parâmetro
-    // Ignorando o localStorage para evitar ficar preso em temas antigos sem UI para trocar
+    // 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]);
+  }, [currentTheme, primaryColor]);
 
   // Função auxiliar para converter hex para rgb
   const hexToRgb = (hex: string): { r: number; g: number; b: number } | null => {
@@ -58,6 +88,8 @@ export const BrandColorsProvider: React.FC<BrandColorsProviderProps> = ({ childr
 
   // 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
+
     const root = document.documentElement;
     const isDark = root.classList.contains('dark');
 

package/dist/components/XerticaProvider.d.ts

@@ -4,7 +4,9 @@ interface XerticaProviderProps {
     apiKey?: string;
     googleMapsApiKey?: string;
     defaultBrandTheme?: string;
+    primaryColor?: string;
+    useCustomTokens?: boolean;
     disableDarkMode?: boolean;
 }
-export declare function XerticaProvider({ children, apiKey, googleMapsApiKey, defaultBrandTheme, disableDarkMode }: XerticaProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function XerticaProvider({ children, apiKey, googleMapsApiKey, defaultBrandTheme, primaryColor, useCustomTokens, disableDarkMode }: XerticaProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+import '../index.css';
 export { XerticaAssistant } from './ui/xertica-assistant';
 export { XerticaProvider } from './XerticaProvider';
 export type { XerticaAssistantProps, Message, Conversation, Suggestion, SearchResult, SearchSource, SearchCommand, MessageType, AttachmentType, SearchResultType, AssistantMode, AssistantTab } from './ui/xertica-assistant';

package/dist/contexts/BrandColorsContext.d.ts

@@ -11,6 +11,8 @@ interface BrandColorsContextType {
 interface BrandColorsProviderProps {
     children: React.ReactNode;
     defaultTheme?: string;
+    primaryColor?: string;
+    useCustomTokens?: boolean;
 }
 export declare const BrandColorsProvider: React.FC<BrandColorsProviderProps>;
 export declare const useBrandColors: () => BrandColorsContextType;

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useState, useRef, useEffect, createContext, useContext, useCallback, useMemo } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { XIcon, CheckIcon, CircleIcon, ChevronRightIcon, Loader2, ChevronUp, ChevronDown, X, Plus, FileText, Radio, Search as Search$1, Paperclip, Mic, Send, BarChart3, ImageIcon, Table as Table$1, Maximize2, ChevronRight, PanelRight, MessageSquare, Heart, History, MoreHorizontal, ChevronLeft, Download, Edit, Music, Image, AlertCircle, FolderOpen, Folder, Users, ExternalLink, Clock, ThumbsUp, ThumbsDown, Check, Copy, ArrowLeft, Menu, Settings, LogOut, XCircle, AlertTriangle, Info, CheckCircle, Sun, Moon, Globe, Coffee, ShoppingBag, Landmark, Hotel, Utensils, MapPin, Filter, MousePointer2, Circle, Square, Hexagon, Undo, Trash2, Save, Pencil, Layers, Home, Mail, Phone, User, Calendar as Calendar$1, GripVerticalIcon, ChevronDownIcon, PanelLeftIcon, MoreHorizontalIcon, ChevronLeftIcon, MinusIcon, SearchIcon, TrendingUp, TrendingDown, Minus, ArrowRight, Upload, FileIcon, Star, Redo, Bold, Italic, Type, List, ListOrdered, GripHorizontal, Minimize2, Play, Pause, VolumeX, Volume2, Maximize, PictureInPicture, PauseCircle, PlayCircle, RotateCcw, Gauge, RefreshCw } from "lucide-react";
+import { XIcon, CheckIcon, CircleIcon, ChevronRightIcon, Loader2, ChevronUp, ChevronDown, X, Plus, FileText, Radio, Search as Search$1, Paperclip, Mic, Send, BarChart3, ImageIcon, Table as Table$1, Maximize2, ChevronRight, PanelRight, MessageSquare, Heart, History, MoreHorizontal, ChevronLeft, Download, Edit, Music, Image, AlertCircle, FolderOpen, Folder, Users, ExternalLink, Clock, ThumbsUp, ThumbsDown, Check, Copy, ArrowLeft, Menu, Settings, LogOut, XCircle, AlertTriangle, Info, CheckCircle, Coffee, ShoppingBag, Landmark, Hotel, Utensils, MapPin, Filter, MousePointer2, Circle, Square, Hexagon, Undo, Trash2, Save, Pencil, Layers, Sun, Moon, Globe, Home, Mail, Phone, User, Calendar as Calendar$1, GripVerticalIcon, ChevronDownIcon, PanelLeftIcon, MoreHorizontalIcon, ChevronLeftIcon, MinusIcon, SearchIcon, TrendingUp, TrendingDown, Minus, ArrowRight, Upload, FileIcon, Star, Redo, Bold, Italic, Type, List, ListOrdered, GripHorizontal, Minimize2, Play, Pause, VolumeX, Volume2, Maximize, PictureInPicture, PauseCircle, PlayCircle, RotateCcw, Gauge, RefreshCw } from "lucide-react";
 import * as RechartsPrimitive from "recharts";
 import { BarChart, CartesianGrid, XAxis, Bar } from "recharts";
 import { clsx } from "clsx";
@@ -4527,21 +4527,49 @@ const colorThemes = [
   }
 ];
 const BrandColorsContext = createContext(void 0);
-const BrandColorsProvider = ({ children, defaultTheme }) => {
+const BrandColorsProvider = ({
+  children,
+  defaultTheme,
+  primaryColor,
+  useCustomTokens = false
+}) => {
   const [currentTheme, setCurrentTheme] = useState(() => {
+    if (primaryColor) return "custom";
     return defaultTheme || "xertica-original";
   });
   const [radius, setRadius] = useState(0.5);
   const [colors, setColors] = 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 == null ? void 0 : 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]);
+  }, [currentTheme, primaryColor]);
   const hexToRgb = (hex) => {
     const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
     return result ? {
@@ -4551,6 +4579,7 @@ const BrandColorsProvider = ({ children, defaultTheme }) => {
     } : null;
   };
   const applyColors = React__default.useCallback(() => {
+    if (useCustomTokens) return;
     const root = document.documentElement;
     const isDark = root.classList.contains("dark");
     const primary = isDark ? colors.primaryDarkMode : colors.primary;
@@ -4969,11 +4998,27 @@ const Toaster = ({ theme, ...props }) => {
     }
   );
 };
-function XerticaProvider({ children, apiKey, googleMapsApiKey, defaultBrandTheme, disableDarkMode }) {
-  return /* @__PURE__ */ jsx(ApiKeyProvider, { children: /* @__PURE__ */ jsx(GoogleMapsLoaderProvider, { children: /* @__PURE__ */ jsx(LanguageProvider, { children: /* @__PURE__ */ jsx(BrandColorsProvider, { defaultTheme: defaultBrandTheme, children: /* @__PURE__ */ jsx(ThemeProvider, { disableDarkMode, children: /* @__PURE__ */ jsx(AssistenteProvider, { children: /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
-    children,
-    /* @__PURE__ */ jsx(Toaster, { position: "top-right", richColors: true })
-  ] }) }) }) }) }) }) }) });
+function XerticaProvider({
+  children,
+  apiKey,
+  googleMapsApiKey,
+  defaultBrandTheme,
+  primaryColor,
+  useCustomTokens,
+  disableDarkMode
+}) {
+  return /* @__PURE__ */ jsx(ApiKeyProvider, { children: /* @__PURE__ */ jsx(GoogleMapsLoaderProvider, { children: /* @__PURE__ */ jsx(LanguageProvider, { children: /* @__PURE__ */ jsx(
+    BrandColorsProvider,
+    {
+      defaultTheme: defaultBrandTheme,
+      primaryColor,
+      useCustomTokens,
+      children: /* @__PURE__ */ jsx(ThemeProvider, { disableDarkMode, children: /* @__PURE__ */ jsx(AssistenteProvider, { children: /* @__PURE__ */ jsx(LayoutProvider, { children: /* @__PURE__ */ jsxs(TooltipProvider, { children: [
+        children,
+        /* @__PURE__ */ jsx(Toaster, { position: "top-right", richColors: true })
+      ] }) }) }) })
+    }
+  ) }) }) });
 }
 /**
  * react-router v7.13.0
@@ -7998,78 +8043,6 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => {
   );
 });
 Slider.displayName = SliderPrimitive.Root.displayName;
-function ThemeToggle({
-  size = "md",
-  variant = "ghost",
-  className = "",
-  showLabel = false
-}) {
-  const { theme, toggleTheme, isDark, disableDarkMode } = useTheme();
-  if (disableDarkMode) return null;
-  const getSizeClasses = () => {
-    switch (size) {
-      case "sm":
-        return "h-8 w-8 p-0";
-      case "lg":
-        return "h-12 w-12 p-0";
-      default:
-        return "h-9 w-9 p-0";
-    }
-  };
-  const getIconSize = () => {
-    switch (size) {
-      case "sm":
-        return "h-3 w-3";
-      case "lg":
-        return "h-6 w-6";
-      default:
-        return "h-4 w-4";
-    }
-  };
-  const buttonClasses = showLabel ? "flex items-center gap-2 px-3 py-2" : getSizeClasses();
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      variant,
-      onClick: toggleTheme,
-      className: `group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`,
-      title: isDark ? "Alternar para tema claro" : "Alternar para tema escuro",
-      children: isDark ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Sun, { className: `${getIconSize()} text-[var(--primary)] group-hover:opacity-80` }),
-        showLabel && /* @__PURE__ */ jsx("span", { children: "Tema Claro" })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Moon, { className: `${getIconSize()} text-muted-foreground group-hover:text-foreground` }),
-        showLabel && /* @__PURE__ */ jsx("span", { children: "Tema Escuro" })
-      ] })
-    }
-  );
-}
-function LanguageSelector({
-  variant = "default",
-  showIcon = true,
-  className = ""
-}) {
-  const { language, setLanguage } = useLanguage();
-  const languages = [
-    { value: "pt", label: "Português", flag: "🇧🇷" },
-    { value: "en", label: "English", flag: "🇺🇸" },
-    { value: "es", label: "Español", flag: "🇪🇸" }
-  ];
-  const currentLanguage = languages.find((lang) => lang.value === language);
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
-    showIcon && variant === "default" && /* @__PURE__ */ jsx(Globe, { className: "w-4 h-4 text-muted-foreground" }),
-    /* @__PURE__ */ jsxs(Select, { value: language, onValueChange: setLanguage, children: [
-      /* @__PURE__ */ jsx(SelectTrigger, { className: variant === "minimal" ? "w-auto border-none shadow-none bg-transparent" : "w-full", children: /* @__PURE__ */ jsx(SelectValue, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.flag }),
-        /* @__PURE__ */ jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.label })
-      ] }) }) }),
-      /* @__PURE__ */ jsx(SelectContent, { children: languages.map((lang) => /* @__PURE__ */ jsx(SelectItem, { value: lang.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx("span", { children: lang.flag }),
-        /* @__PURE__ */ jsx("span", { children: lang.label })
-      ] }) }, lang.value)) })
-    ] })
-  ] });
-}
 function useMapLayers(map, layers) {
   const trafficLayerRef = useRef(null);
   const transitLayerRef = useRef(null);
@@ -9619,6 +9592,78 @@ function MapShowcase() {
     ] })
   ] });
 }
+function ThemeToggle({
+  size = "md",
+  variant = "ghost",
+  className = "",
+  showLabel = false
+}) {
+  const { theme, toggleTheme, isDark, disableDarkMode } = useTheme();
+  if (disableDarkMode) return null;
+  const getSizeClasses = () => {
+    switch (size) {
+      case "sm":
+        return "h-8 w-8 p-0";
+      case "lg":
+        return "h-12 w-12 p-0";
+      default:
+        return "h-9 w-9 p-0";
+    }
+  };
+  const getIconSize = () => {
+    switch (size) {
+      case "sm":
+        return "h-3 w-3";
+      case "lg":
+        return "h-6 w-6";
+      default:
+        return "h-4 w-4";
+    }
+  };
+  const buttonClasses = showLabel ? "flex items-center gap-2 px-3 py-2" : getSizeClasses();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant,
+      onClick: toggleTheme,
+      className: `group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`,
+      title: isDark ? "Alternar para tema claro" : "Alternar para tema escuro",
+      children: isDark ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Sun, { className: `${getIconSize()} text-[var(--primary)] group-hover:opacity-80` }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: "Tema Claro" })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Moon, { className: `${getIconSize()} text-muted-foreground group-hover:text-foreground` }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: "Tema Escuro" })
+      ] })
+    }
+  );
+}
+function LanguageSelector({
+  variant = "default",
+  showIcon = true,
+  className = ""
+}) {
+  const { language, setLanguage } = useLanguage();
+  const languages = [
+    { value: "pt", label: "Português", flag: "🇧🇷" },
+    { value: "en", label: "English", flag: "🇺🇸" },
+    { value: "es", label: "Español", flag: "🇪🇸" }
+  ];
+  const currentLanguage = languages.find((lang) => lang.value === language);
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+    showIcon && variant === "default" && /* @__PURE__ */ jsx(Globe, { className: "w-4 h-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsxs(Select, { value: language, onValueChange: setLanguage, children: [
+      /* @__PURE__ */ jsx(SelectTrigger, { className: variant === "minimal" ? "w-auto border-none shadow-none bg-transparent" : "w-full", children: /* @__PURE__ */ jsx(SelectValue, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.flag }),
+        /* @__PURE__ */ jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.label })
+      ] }) }) }),
+      /* @__PURE__ */ jsx(SelectContent, { children: languages.map((lang) => /* @__PURE__ */ jsx(SelectItem, { value: lang.value, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { children: lang.flag }),
+        /* @__PURE__ */ jsx("span", { children: lang.label })
+      ] }) }, lang.value)) })
+    ] })
+  ] });
+}
 function Breadcrumb({ ...props }) {
   return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
 }
@@ -9894,28 +9939,15 @@ function TemplateContent({}) {
     {
       className: `flex-1 flex flex-col overflow-hidden transition-all duration-300 ${sidebarExpanded ? "md:pl-64" : "md:pl-20"}`,
       children: [
-        /* @__PURE__ */ jsx("header", { className: "bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-[0px]", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "ghost",
-                size: "sm",
-                onClick: toggleSidebar,
-                className: "md:hidden mr-2 p-2",
-                children: /* @__PURE__ */ jsx(Menu, { className: "w-5 h-5" })
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "text-primary [font-weight:var(--font-weight-medium)]", children: "Xertica.ai" }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "w-4 h-4" }),
-            /* @__PURE__ */ jsx("span", { className: "text-foreground [font-weight:var(--font-weight-medium)]", children: "Template Page" })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(Badge, { variant: "default", className: "hidden sm:flex", children: "v1.0.0" }),
-            /* @__PURE__ */ jsx(LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
-            /* @__PURE__ */ jsx(ThemeToggle, { className: "hover:bg-accent" })
-          ] })
-        ] }) }),
+        /* @__PURE__ */ jsx(
+          Header,
+          {
+            breadcrumbs: [
+              { label: "Xertica UI", href: "/home", icon: /* @__PURE__ */ jsx(Home, { className: "w-4 h-4" }) },
+              { label: "Template Page" }
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-hidden bg-muted", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsx("div", { className: "p-2 sm:p-4 md:p-6", children: /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx("h2", { children: "Template Page" }),

package/dist/index.umd.js

@@ -4528,21 +4528,49 @@ ${colorConfig.map(([key, itemConfig]) => {
     }
   ];
   const BrandColorsContext = React.createContext(void 0);
-  const BrandColorsProvider = ({ children, defaultTheme }) => {
+  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 == null ? void 0 : 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]);
+    }, [currentTheme, primaryColor]);
     const hexToRgb = (hex) => {
       const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
       return result ? {
@@ -4552,6 +4580,7 @@ ${colorConfig.map(([key, itemConfig]) => {
       } : null;
     };
     const applyColors = React.useCallback(() => {
+      if (useCustomTokens) return;
       const root = document.documentElement;
       const isDark = root.classList.contains("dark");
       const primary = isDark ? colors.primaryDarkMode : colors.primary;
@@ -4970,11 +4999,27 @@ ${colorConfig.map(([key, itemConfig]) => {
       }
     );
   };
-  function XerticaProvider({ children, apiKey, googleMapsApiKey, defaultBrandTheme, disableDarkMode }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(ApiKeyProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(GoogleMapsLoaderProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LanguageProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(BrandColorsProvider, { defaultTheme: defaultBrandTheme, children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { disableDarkMode, children: /* @__PURE__ */ jsxRuntime.jsx(AssistenteProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LayoutProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipProvider, { children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(Toaster, { position: "top-right", richColors: true })
-    ] }) }) }) }) }) }) }) });
+  function XerticaProvider({
+    children,
+    apiKey,
+    googleMapsApiKey,
+    defaultBrandTheme,
+    primaryColor,
+    useCustomTokens,
+    disableDarkMode
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ApiKeyProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(GoogleMapsLoaderProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LanguageProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      BrandColorsProvider,
+      {
+        defaultTheme: defaultBrandTheme,
+        primaryColor,
+        useCustomTokens,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ThemeProvider, { disableDarkMode, children: /* @__PURE__ */ jsxRuntime.jsx(AssistenteProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(LayoutProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(TooltipProvider, { children: [
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(Toaster, { position: "top-right", richColors: true })
+        ] }) }) }) })
+      }
+    ) }) }) });
   }
   /**
    * react-router v7.13.0
@@ -7999,78 +8044,6 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     );
   });
   Slider.displayName = SliderPrimitive__namespace.Root.displayName;
-  function ThemeToggle({
-    size = "md",
-    variant = "ghost",
-    className = "",
-    showLabel = false
-  }) {
-    const { theme, toggleTheme, isDark, disableDarkMode } = useTheme();
-    if (disableDarkMode) return null;
-    const getSizeClasses = () => {
-      switch (size) {
-        case "sm":
-          return "h-8 w-8 p-0";
-        case "lg":
-          return "h-12 w-12 p-0";
-        default:
-          return "h-9 w-9 p-0";
-      }
-    };
-    const getIconSize = () => {
-      switch (size) {
-        case "sm":
-          return "h-3 w-3";
-        case "lg":
-          return "h-6 w-6";
-        default:
-          return "h-4 w-4";
-      }
-    };
-    const buttonClasses = showLabel ? "flex items-center gap-2 px-3 py-2" : getSizeClasses();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Button,
-      {
-        variant,
-        onClick: toggleTheme,
-        className: `group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`,
-        title: isDark ? "Alternar para tema claro" : "Alternar para tema escuro",
-        children: isDark ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: `${getIconSize()} text-[var(--primary)] group-hover:opacity-80` }),
-          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tema Claro" })
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: `${getIconSize()} text-muted-foreground group-hover:text-foreground` }),
-          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tema Escuro" })
-        ] })
-      }
-    );
-  }
-  function LanguageSelector({
-    variant = "default",
-    showIcon = true,
-    className = ""
-  }) {
-    const { language, setLanguage } = useLanguage();
-    const languages = [
-      { value: "pt", label: "Português", flag: "🇧🇷" },
-      { value: "en", label: "English", flag: "🇺🇸" },
-      { value: "es", label: "Español", flag: "🇪🇸" }
-    ];
-    const currentLanguage = languages.find((lang) => lang.value === language);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
-      showIcon && variant === "default" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "w-4 h-4 text-muted-foreground" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: language, onValueChange: setLanguage, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: variant === "minimal" ? "w-auto border-none shadow-none bg-transparent" : "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.flag }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.label })
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: languages.map((lang) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: lang.value, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: lang.flag }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { children: lang.label })
-        ] }) }, lang.value)) })
-      ] })
-    ] });
-  }
   function useMapLayers(map, layers) {
     const trafficLayerRef = React.useRef(null);
     const transitLayerRef = React.useRef(null);
@@ -9620,6 +9593,78 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       ] })
     ] });
   }
+  function ThemeToggle({
+    size = "md",
+    variant = "ghost",
+    className = "",
+    showLabel = false
+  }) {
+    const { theme, toggleTheme, isDark, disableDarkMode } = useTheme();
+    if (disableDarkMode) return null;
+    const getSizeClasses = () => {
+      switch (size) {
+        case "sm":
+          return "h-8 w-8 p-0";
+        case "lg":
+          return "h-12 w-12 p-0";
+        default:
+          return "h-9 w-9 p-0";
+      }
+    };
+    const getIconSize = () => {
+      switch (size) {
+        case "sm":
+          return "h-3 w-3";
+        case "lg":
+          return "h-6 w-6";
+        default:
+          return "h-4 w-4";
+      }
+    };
+    const buttonClasses = showLabel ? "flex items-center gap-2 px-3 py-2" : getSizeClasses();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant,
+        onClick: toggleTheme,
+        className: `group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`,
+        title: isDark ? "Alternar para tema claro" : "Alternar para tema escuro",
+        children: isDark ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: `${getIconSize()} text-[var(--primary)] group-hover:opacity-80` }),
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tema Claro" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: `${getIconSize()} text-muted-foreground group-hover:text-foreground` }),
+          showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tema Escuro" })
+        ] })
+      }
+    );
+  }
+  function LanguageSelector({
+    variant = "default",
+    showIcon = true,
+    className = ""
+  }) {
+    const { language, setLanguage } = useLanguage();
+    const languages = [
+      { value: "pt", label: "Português", flag: "🇧🇷" },
+      { value: "en", label: "English", flag: "🇺🇸" },
+      { value: "es", label: "Español", flag: "🇪🇸" }
+    ];
+    const currentLanguage = languages.find((lang) => lang.value === language);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
+      showIcon && variant === "default" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Globe, { className: "w-4 h-4 text-muted-foreground" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Select, { value: language, onValueChange: setLanguage, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { className: variant === "minimal" ? "w-auto border-none shadow-none bg-transparent" : "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.flag }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: currentLanguage == null ? void 0 : currentLanguage.label })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: languages.map((lang) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: lang.value, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: lang.flag }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: lang.label })
+        ] }) }, lang.value)) })
+      ] })
+    ] });
+  }
   function Breadcrumb({ ...props }) {
     return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
   }
@@ -9895,28 +9940,15 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
       {
         className: `flex-1 flex flex-col overflow-hidden transition-all duration-300 ${sidebarExpanded ? "md:pl-64" : "md:pl-20"}`,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("header", { className: "bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-[0px]", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Button,
-                {
-                  variant: "ghost",
-                  size: "sm",
-                  onClick: toggleSidebar,
-                  className: "md:hidden mr-2 p-2",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-5 h-5" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary [font-weight:var(--font-weight-medium)]", children: "Xertica.ai" }),
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground [font-weight:var(--font-weight-medium)]", children: "Template Page" })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", className: "hidden sm:flex", children: "v1.0.0" }),
-              /* @__PURE__ */ jsxRuntime.jsx(LanguageSelector, { variant: "minimal", showIcon: false, className: "hidden sm:flex" }),
-              /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, { className: "hover:bg-accent" })
-            ] })
-          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Header,
+            {
+              breadcrumbs: [
+                { label: "Xertica UI", href: "/home", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Home, { className: "w-4 h-4" }) },
+                { label: "Template Page" }
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-hidden bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 sm:p-4 md:p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto space-y-8", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Template Page" }),

package/dist/xertica-ui.css

@@ -451,7 +451,6 @@
   iframe,
   embed,
   object {
-    vertical-align: middle;
     display: block;
   }
 
@@ -930,6 +929,7 @@
 
   .line-clamp-2 {
     -webkit-line-clamp: 2;
+    line-clamp: 2;
     -webkit-box-orient: vertical;
     display: -webkit-box;
     overflow: hidden;
@@ -3487,6 +3487,7 @@
 
   :is(.\*\:data-\[slot\=select-value\]\:line-clamp-1 > *)[data-slot="select-value"] {
     -webkit-line-clamp: 1;
+    line-clamp: 1;
     -webkit-box-orient: vertical;
     display: -webkit-box;
     overflow: hidden;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.4.7",
+  "version": "1.4.9",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -16,7 +16,6 @@
   },
   "bin": "./dist/cli.js",
   "scripts": {
-    "dev": "vite",
     "build": "vite build --sourcemap=false --minify=false",
     "build:production": "npm run build",
     "build:types": "tsc -p tsconfig.build.json",

package/templates/index.css

@@ -1,10 +1,65 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap");
 
-/* Xertica UI compiled styles (includes Tailwind v4 base + all component styles) */
-@import 'xertica-ui/style.css';
-
 /* Your project's theme tokens (generated by CLI, customize here) */
 @import './styles/xertica/tokens.css';
 
+/* Xertica UI compiled styles (includes Tailwind v4 base + all component styles) */
+@import 'xertica-ui/style.css';
+
 /* Tell Tailwind v4 to scan xertica-ui for class names */
-@source '../node_modules/xertica-ui';
+@source './node_modules/xertica-ui';
+
+@theme {
+  --shadow-elevation-sm: 0px 0px 48px 0px rgba(0, 0, 0, 0.1);
+  
+  /* Map CSS Variables to Tailwind Theme Tokens (Required for Tailwind v4) */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  /* Animations for shadcn/ui */
+  --animate-in: enter 200ms ease-out;
+  --animate-out: exit 200ms ease-in;
+}
+
+@keyframes enter {
+  from {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
+  }
+}
+
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
+  }
+}

package/templates/package.json

@@ -11,7 +11,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "xertica-ui": "^1.4.6",
+    "xertica-ui": "^1.4.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
@@ -37,4 +37,4 @@
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.49"
   }
-}
+}

package/templates/src/content/HomeContent.tsx

@@ -37,7 +37,12 @@ export function HomeContent() {
       }}
       className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
     >
-      <Header title={breadcrumbLabel} />
+      <Header
+        breadcrumbs={[
+          { label: 'Xertica UI', },
+          { label: 'Início' },
+        ]}
+      />
 
       <main className="flex-1 overflow-hidden bg-muted">
         <ScrollArea className="h-full">

package/templates/src/main.tsx

@@ -1,6 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.css';
+import '../index.css';
 import App from './App';
 
 createRoot(document.getElementById('root')!).render(