xertica-ui 1.2.7 → 1.2.9

package/App.tsx

@@ -10,6 +10,7 @@ import { ThemeProvider } from './contexts/ThemeContext';
 import { LanguageProvider } from './contexts/LanguageContext';
 import { ApiKeyProvider } from './contexts/ApiKeyContext';
 import { AssistenteProvider } from './contexts/AssistenteContext';
+import { LayoutProvider } from './contexts/LayoutContext';
 import { BrandColorsProvider } from './contexts/BrandColorsContext';
 import { GoogleMapsLoaderProvider } from './components/ui/google-maps-loader';
 import { Toaster } from './components/ui/sonner';
@@ -19,7 +20,7 @@ import { XerticaAssistant } from './components/ui/xertica-assistant';
 if (typeof window !== 'undefined') {
   // Remover classe dark imediatamente
   document.documentElement.classList.remove('dark');
-  
+
   // Se não há tema salvo, definir light mode
   const savedTheme = localStorage.getItem('xertica-theme');
   if (!savedTheme) {
@@ -78,69 +79,69 @@ function AuthWrapper() {
   return (
     <div className="min-h-screen bg-muted overflow-x-hidden max-w-full">
       <Routes>
-        <Route 
-          path="/login" 
+        <Route
+          path="/login"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <LoginPage onLogin={handleLogin} />
             )
-          } 
+          }
         />
-        <Route 
-          path="/forgot-password" 
+        <Route
+          path="/forgot-password"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <ForgotPasswordPage />
             )
-          } 
+          }
         />
-        <Route 
-          path="/verify-email" 
+        <Route
+          path="/verify-email"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <VerifyEmailPage />
             )
-          } 
+          }
         />
-        <Route 
-          path="/reset-password" 
+        <Route
+          path="/reset-password"
           element={
             user ? (
               <Navigate to="/home" replace />
             ) : (
               <ResetPasswordPage />
             )
-          } 
+          }
         />
-        <Route 
-          path="/home" 
+        <Route
+          path="/home"
           element={
             <ProtectedRoute user={user}>
               <HomePage user={user} onLogout={handleLogout} />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/template" 
+        <Route
+          path="/template"
           element={
             <ProtectedRoute user={user}>
               <TemplatePage user={user} onLogout={handleLogout} />
             </ProtectedRoute>
-          } 
+          }
         />
-        <Route 
-          path="/" 
-          element={<Navigate to={user ? "/home" : "/login"} replace />} 
+        <Route
+          path="/"
+          element={<Navigate to={user ? "/home" : "/login"} replace />}
         />
-        <Route 
-          path="*" 
-          element={<Navigate to={user ? "/home" : "/login"} replace />} 
+        <Route
+          path="*"
+          element={<Navigate to={user ? "/home" : "/login"} replace />}
         />
       </Routes>
 
@@ -154,7 +155,7 @@ export default function App() {
   useLayoutEffect(() => {
     const root = document.documentElement;
     const savedTheme = localStorage.getItem('xertica-theme');
-    
+
     if (!savedTheme || savedTheme === 'light') {
       root.classList.remove('dark');
       localStorage.setItem('xertica-theme', 'light');
@@ -168,10 +169,12 @@ export default function App() {
           <BrandColorsProvider>
             <ThemeProvider>
               <AssistenteProvider>
-                <Router>
-                  <AuthWrapper />
-                  <Toaster position="top-right" richColors />
-                </Router>
+                <LayoutProvider>
+                  <Router>
+                    <AuthWrapper />
+                    <Toaster position="top-right" richColors />
+                  </Router>
+                </LayoutProvider>
               </AssistenteProvider>
             </ThemeProvider>
           </BrandColorsProvider>

package/README.md

@@ -39,6 +39,43 @@ O método recomendado é usar o CLI:
 npx xertica-ui init meu-app
 ```
 
+### Instalação como Biblioteca
+
+Se você deseja usar os componentes em um projeto React existente:
+
+1. Instale o pacote:
+```bash
+npm install xertica-ui
+```
+
+2. Importe o CSS (obrigatório) no seu arquivo `main.tsx` ou `App.tsx`:
+```tsx
+import 'xertica-ui/style.css';
+```
+
+3. Envolva sua aplicação com o `XerticaProvider`:
+```tsx
+import { XerticaProvider } from 'xertica-ui';
+
+function App() {
+  return (
+    <XerticaProvider>
+      <SeuApp />
+    </XerticaProvider>
+  );
+}
+```
+
+4. Comece a usar os componentes:
+```tsx
+import { Button } from 'xertica-ui';
+
+export function MeuComponente() {
+  return <Button>Clique aqui</Button>;
+}
+```
+
+### Desenvolvimento do Projeto (Contribuição)
 Para desenvolvimento do próprio pacote/biblioteca:
 1. Clone o repositório:
 ```bash

package/components/Header.tsx

@@ -4,9 +4,9 @@ import { Button } from './ui/button';
 import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 
+import { useLayout } from '../contexts/LayoutContext';
+
 interface HeaderProps {
-    sidebarExpanded: boolean;
-    onToggleSidebar: () => void;
     title: string;
     showLanguageSelector?: boolean;
     showThemeToggle?: boolean;
@@ -14,13 +14,13 @@ interface HeaderProps {
 }
 
 export function Header({
-    sidebarExpanded,
-    onToggleSidebar,
     title,
     showLanguageSelector = true,
     showThemeToggle = true,
     className
 }: HeaderProps) {
+    const { sidebarExpanded, toggleSidebar } = useLayout();
+
 
     return (
         <header className={`bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0 ${className || ''}`}>
@@ -30,7 +30,7 @@ export function Header({
                     <Button
                         variant="ghost"
                         size="sm"
-                        onClick={onToggleSidebar}
+                        onClick={toggleSidebar}
                         className="md:hidden mr-2 p-2"
                     >
                         <Menu className="w-5 h-5" />

package/components/HomeContent.tsx

@@ -10,14 +10,14 @@ import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 import { Badge } from './ui/badge';
 
+import { useLayout } from '../contexts/LayoutContext';
+
 interface HomeContentProps {
-  sidebarExpanded: boolean;
-  assistenteExpanded?: boolean;
-  onToggleSidebar?: () => void;
-  onToggleAssistente?: () => void;
+  // Props de layout removidas em favor do LayoutContext
 }
 
-export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: HomeContentProps) {
+export function HomeContent({ }: HomeContentProps) {
+  const { sidebarExpanded, assistenteExpanded } = useLayout();
   const location = useLocation();
   const navigate = useNavigate();
 
@@ -42,8 +42,6 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
         }`}
     >
       <Header
-        sidebarExpanded={sidebarExpanded}
-        onToggleSidebar={onToggleSidebar || (() => { })}
         title={breadcrumbLabel}
       />
 

package/components/HomePage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { HomeContent } from './HomeContent';
@@ -10,62 +10,34 @@ interface HomePageProps {
   onLogout: () => void;
 }
 
+import { useLayout } from '../contexts/LayoutContext';
+
+interface HomePageProps {
+  user: { email: string } | null;
+  onLogout: () => void;
+}
+
 export function HomePage({ user, onLogout }: HomePageProps) {
-  const [sidebarExpanded, setSidebarExpanded] = useState(false);
-  const [assistenteExpanded, setAssistenteExpanded] = useState(false);
+  const { sidebarExpanded, assistenteExpanded, toggleSidebar, toggleAssistente, toggleAssistenteWithTab } = useLayout();
   const location = useLocation();
   const navigate = useNavigate();
 
-  // Função para alternar a sidebar - fecha o assistente se estiver aberto
-  const handleToggleSidebar = () => {
-    if (!sidebarExpanded && assistenteExpanded) {
-      // Se a sidebar vai abrir e o assistente está aberto, fechar o assistente
-      setAssistenteExpanded(false);
-    }
-    setSidebarExpanded(!sidebarExpanded);
-  };
-
-  // Função para alternar o assistente - fecha a sidebar se estiver aberta
-  const handleToggleAssistente = () => {
-    if (!assistenteExpanded && sidebarExpanded) {
-      // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-      setSidebarExpanded(false);
-    }
-    setAssistenteExpanded(!assistenteExpanded);
-  };
-
-  // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
-  const handleToggleAssistenteWithTab = (tab: string) => {
-    if (!assistenteExpanded) {
-      if (sidebarExpanded) {
-        // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-        setSidebarExpanded(false);
-      }
-      setAssistenteExpanded(true);
-    }
-  };
-
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
       <Sidebar
         expanded={sidebarExpanded}
-        onToggle={handleToggleSidebar}
+        onToggle={toggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
         routes={routes}
       />
-      <HomeContent
-        sidebarExpanded={sidebarExpanded}
-        assistenteExpanded={assistenteExpanded}
-        onToggleSidebar={handleToggleSidebar}
-        onToggleAssistente={handleToggleAssistente}
-      />
+      <HomeContent />
       <AssistenteXertica
         isExpanded={assistenteExpanded}
-        onToggle={handleToggleAssistente}
-        onToggleWithTab={handleToggleAssistenteWithTab}
+        onToggle={toggleAssistente}
+        onToggleWithTab={toggleAssistenteWithTab}
       />
     </div>
   );

package/components/TemplateContent.tsx

@@ -21,14 +21,14 @@ import { ScrollArea } from './ui/scroll-area';
 import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 
+import { useLayout } from '../contexts/LayoutContext';
+
 interface TemplateContentProps {
-  sidebarExpanded: boolean;
-  assistenteExpanded?: boolean;
-  onToggleSidebar?: () => void;
-  onToggleAssistente?: () => void;
+  // Props de layout removidas
 }
 
-export function TemplateContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: TemplateContentProps) {
+export function TemplateContent({ }: TemplateContentProps) {
+  const { sidebarExpanded, assistenteExpanded, toggleSidebar } = useLayout();
   const [progress, setProgress] = useState(45);
   const [sliderValue, setSliderValue] = useState([50]);
   const [switchEnabled, setSwitchEnabled] = useState(false);
@@ -52,7 +52,7 @@ export function TemplateContent({ sidebarExpanded, assistenteExpanded = false, o
             <Button
               variant="ghost"
               size="sm"
-              onClick={onToggleSidebar}
+              onClick={toggleSidebar}
               className="md:hidden mr-2 p-2"
             >
               <Menu className="w-5 h-5" />

package/components/TemplatePage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { TemplateContent } from './TemplateContent';
@@ -10,62 +10,34 @@ interface TemplatePageProps {
   onLogout: () => void;
 }
 
+import { useLayout } from '../contexts/LayoutContext';
+
+interface TemplatePageProps {
+  user: { email: string } | null;
+  onLogout: () => void;
+}
+
 export function TemplatePage({ user, onLogout }: TemplatePageProps) {
-  const [sidebarExpanded, setSidebarExpanded] = useState(false);
-  const [assistenteExpanded, setAssistenteExpanded] = useState(false);
+  const { sidebarExpanded, assistenteExpanded, toggleSidebar, toggleAssistente, toggleAssistenteWithTab } = useLayout();
   const location = useLocation();
   const navigate = useNavigate();
 
-  // Função para alternar a sidebar - fecha o assistente se estiver aberto
-  const handleToggleSidebar = () => {
-    if (!sidebarExpanded && assistenteExpanded) {
-      // Se a sidebar vai abrir e o assistente está aberto, fechar o assistente
-      setAssistenteExpanded(false);
-    }
-    setSidebarExpanded(!sidebarExpanded);
-  };
-
-  // Função para alternar o assistente - fecha a sidebar se estiver aberta
-  const handleToggleAssistente = () => {
-    if (!assistenteExpanded && sidebarExpanded) {
-      // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-      setSidebarExpanded(false);
-    }
-    setAssistenteExpanded(!assistenteExpanded);
-  };
-
-  // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
-  const handleToggleAssistenteWithTab = (tab: string) => {
-    if (!assistenteExpanded) {
-      if (sidebarExpanded) {
-        // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
-        setSidebarExpanded(false);
-      }
-      setAssistenteExpanded(true);
-    }
-  };
-
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
       <Sidebar
         expanded={sidebarExpanded}
-        onToggle={handleToggleSidebar}
+        onToggle={toggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
         routes={routes}
       />
-      <TemplateContent
-        sidebarExpanded={sidebarExpanded}
-        assistenteExpanded={assistenteExpanded}
-        onToggleSidebar={handleToggleSidebar}
-        onToggleAssistente={handleToggleAssistente}
-      />
+      <TemplateContent />
       <AssistenteXertica
         isExpanded={assistenteExpanded}
-        onToggle={handleToggleAssistente}
-        onToggleWithTab={handleToggleAssistenteWithTab}
+        onToggle={toggleAssistente}
+        onToggleWithTab={toggleAssistenteWithTab}
       />
     </div>
   );

package/components/XerticaProvider.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { ThemeProvider } from '../contexts/ThemeContext';
+import { LanguageProvider } from '../contexts/LanguageContext';
+import { ApiKeyProvider } from '../contexts/ApiKeyContext';
+import { AssistenteProvider } from '../contexts/AssistenteContext';
+import { LayoutProvider } from '../contexts/LayoutContext';
+import { BrandColorsProvider } from '../contexts/BrandColorsContext';
+import { GoogleMapsLoaderProvider } from './ui/google-maps-loader';
+import { Toaster } from './ui/sonner';
+import { TooltipProvider } from './ui/tooltip';
+
+interface XerticaProviderProps {
+    children: React.ReactNode;
+    apiKey?: string; // Optional Gemini API Key
+    googleMapsApiKey?: string; // Optional Maps API Key
+}
+
+export function XerticaProvider({ children, apiKey, googleMapsApiKey }: 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.
+
+    return (
+        <ApiKeyProvider>
+            <GoogleMapsLoaderProvider>
+                <LanguageProvider>
+                    <BrandColorsProvider>
+                        <ThemeProvider>
+                            <AssistenteProvider>
+                                <LayoutProvider>
+                                    <TooltipProvider>
+                                        {children}
+                                        <Toaster position="top-right" richColors />
+                                    </TooltipProvider>
+                                </LayoutProvider>
+                            </AssistenteProvider>
+                        </ThemeProvider>
+                    </BrandColorsProvider>
+                </LanguageProvider>
+            </GoogleMapsLoaderProvider>
+        </ApiKeyProvider>
+    );
+}

package/components/index.ts

@@ -4,6 +4,7 @@ import '../index.css';
 // ============================================================================
 
 export { XerticaAssistant } from './ui/xertica-assistant';
+export { XerticaProvider } from './XerticaProvider';
 export type {
   XerticaAssistantProps,
   Message,

package/contexts/LayoutContext.tsx

@@ -0,0 +1,73 @@
+import React, { createContext, useContext, useState, ReactNode, useCallback } from 'react';
+
+interface LayoutContextType {
+    sidebarExpanded: boolean;
+    assistenteExpanded: boolean;
+    toggleSidebar: () => void;
+    toggleAssistente: () => void;
+    toggleAssistenteWithTab: (tab: string) => void;
+    setSidebarExpanded: (expanded: boolean) => void;
+    setAssistenteExpanded: (expanded: boolean) => void;
+}
+
+const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
+
+export function LayoutProvider({ children }: { children: ReactNode }) {
+    const [sidebarExpanded, setSidebarExpandedState] = useState(false);
+    const [assistenteExpanded, setAssistenteExpandedState] = useState(false);
+
+    // Função para alternar a sidebar - fecha o assistente se estiver aberto
+    const toggleSidebar = useCallback(() => {
+        setSidebarExpandedState(prev => {
+            const newState = !prev;
+            if (newState && assistenteExpanded) {
+                setAssistenteExpandedState(false);
+            }
+            return newState;
+        });
+    }, [assistenteExpanded]);
+
+    // Função para alternar o assistente - fecha a sidebar se estiver aberta
+    const toggleAssistente = useCallback(() => {
+        setAssistenteExpandedState(prev => {
+            const newState = !prev;
+            if (newState && sidebarExpanded) {
+                setSidebarExpandedState(false);
+            }
+            return newState;
+        });
+    }, [sidebarExpanded]);
+
+    // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
+    const toggleAssistenteWithTab = useCallback((tab: string) => {
+        if (!assistenteExpanded) {
+            if (sidebarExpanded) {
+                setSidebarExpandedState(false);
+            }
+            setAssistenteExpandedState(true);
+        }
+        // Lógica adicional para tab pode ser implementada aqui se necessário
+    }, [assistenteExpanded, sidebarExpanded]);
+
+    return (
+        <LayoutContext.Provider value={{
+            sidebarExpanded,
+            assistenteExpanded,
+            toggleSidebar,
+            toggleAssistente,
+            toggleAssistenteWithTab,
+            setSidebarExpanded: setSidebarExpandedState,
+            setAssistenteExpanded: setAssistenteExpandedState
+        }}>
+            {children}
+        </LayoutContext.Provider>
+    );
+}
+
+export function useLayout() {
+    const context = useContext(LayoutContext);
+    if (context === undefined) {
+        throw new Error('useLayout must be used within a LayoutProvider');
+    }
+    return context;
+}

package/contexts/ThemeContext.tsx

@@ -14,16 +14,17 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
   // Inicialização mais direta - verificar localStorage imediatamente
   const getInitialTheme = (): Theme => {
-    // Primeiro, garantir que não há classe dark aplicada por padrão
     if (typeof window !== 'undefined') {
-      document.documentElement.classList.remove('dark');
-      
       const savedTheme = localStorage.getItem('xertica-theme') as Theme;
       if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) {
         return savedTheme;
       }
+      // Se não houver tema salvo, verificar preferência do sistema
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+      }
     }
-    // Sempre retornar 'light' como padrão
+    // Padrão light se nada for detectado
     return 'light';
   };
 
@@ -32,24 +33,30 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   // Aplicar tema ao documento sempre que o tema mudar
   useEffect(() => {
     const root = document.documentElement;
-    
+
+    // Remove ambas as classes para garantir estado limpo
+    root.classList.remove('light', 'dark');
+
     if (theme === 'dark') {
       root.classList.add('dark');
     } else {
-      root.classList.remove('dark');
+      root.classList.add('light'); // Opcional, mas ajuda em alguns frameworks CSS
     }
-    
+
     // Salvar no localStorage
     localStorage.setItem('xertica-theme', theme);
   }, [theme]);
 
-  // Garantir que o tema seja aplicado na inicialização
+  // Listener para mudanças na preferência do sistema
   useEffect(() => {
-    const root = document.documentElement;
-    if (theme === 'light') {
-      root.classList.remove('dark');
+    if (!localStorage.getItem('xertica-theme')) {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = (e: MediaQueryListEvent) => {
+        setTheme(e.matches ? 'dark' : 'light');
+      };
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
     }
-    localStorage.setItem('xertica-theme', theme);
   }, []);
 
   // Alternar tema

package/contexts/index.ts

@@ -1,3 +1,4 @@
+export * from './LayoutContext';
 export * from './ThemeContext';
 export * from './LanguageContext';
 export * from './BrandColorsContext';

package/dist/components/Header.d.ts

@@ -1,10 +1,8 @@
 interface HeaderProps {
-    sidebarExpanded: boolean;
-    onToggleSidebar: () => void;
     title: string;
     showLanguageSelector?: boolean;
     showThemeToggle?: boolean;
     className?: string;
 }
-export declare function Header({ sidebarExpanded, onToggleSidebar, title, showLanguageSelector, showThemeToggle, className }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, showLanguageSelector, showThemeToggle, className }: HeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/HomeContent.d.ts

@@ -1,8 +1,4 @@
 interface HomeContentProps {
-    sidebarExpanded: boolean;
-    assistenteExpanded?: boolean;
-    onToggleSidebar?: () => void;
-    onToggleAssistente?: () => void;
 }
-export declare function HomeContent({ sidebarExpanded, assistenteExpanded, onToggleSidebar, onToggleAssistente }: HomeContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function HomeContent({}: HomeContentProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/HomePage.d.ts

@@ -4,5 +4,11 @@ interface HomePageProps {
     } | null;
     onLogout: () => void;
 }
+interface HomePageProps {
+    user: {
+        email: string;
+    } | null;
+    onLogout: () => void;
+}
 export declare function HomePage({ user, onLogout }: HomePageProps): import("react/jsx-runtime").JSX.Element;
 export {};