xertica-ui 1.2.6 → 1.2.7

package/components/Header.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Menu, ChevronRight } from 'lucide-react';
+import { Button } from './ui/button';
+import { ThemeToggle } from './ThemeToggle';
+import { LanguageSelector } from './LanguageSelector';
+
+interface HeaderProps {
+    sidebarExpanded: boolean;
+    onToggleSidebar: () => void;
+    title: string;
+    showLanguageSelector?: boolean;
+    showThemeToggle?: boolean;
+    className?: string;
+}
+
+export function Header({
+    sidebarExpanded,
+    onToggleSidebar,
+    title,
+    showLanguageSelector = true,
+    showThemeToggle = true,
+    className
+}: HeaderProps) {
+
+    return (
+        <header className={`bg-card shadow-sm border-b border-border px-[24px] py-[14px] flex-shrink-0 ${className || ''}`}>
+            <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={onToggleSidebar}
+                        className="md:hidden mr-2 p-2"
+                    >
+                        <Menu className="w-5 h-5" />
+                    </Button>
+                    <span className="text-primary font-medium">Xertica.ai</span>
+                    <ChevronRight className="w-4 h-4" />
+                    <span className="text-foreground font-medium">{title}</span>
+                </div>
+
+                {/* Controles do usuário */}
+                <div className="flex items-center gap-3">
+                    {/* Seletor de idioma */}
+                    {showLanguageSelector && (
+                        <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
+                    )}
+
+                    {/* Toggle de tema */}
+                    {showThemeToggle && (
+                        <ThemeToggle className="hover:bg-accent" />
+                    )}
+                </div>
+            </div>
+        </header>
+    );
+}

package/components/HomeContent.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from './ui/card';
+import { Header } from './Header';
 import { Button } from './ui/button';
 import { ChevronRight, Menu, FileText } from 'lucide-react';
 import { ScrollArea } from './ui/scroll-area';
@@ -19,7 +20,7 @@ interface HomeContentProps {
 export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onToggleSidebar, onToggleAssistente }: HomeContentProps) {
   const location = useLocation();
   const navigate = useNavigate();
-  
+
   // Tradução direta para português
   const labelTranslations: Record<string, string> = {
     'home': 'Início',
@@ -28,48 +29,23 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
 
   // Get current route info
   const currentRoute = getRouteByPath(location.pathname);
-  const breadcrumbLabel = currentRoute?.label 
+  const breadcrumbLabel = currentRoute?.label
     ? labelTranslations[currentRoute.label.toLowerCase()] || currentRoute.label
     : 'Início';
 
 
 
   return (
-    <div 
-      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${
-        sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
-      } ${
-        assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
-      }`}
+    <div
+      className={`flex-1 flex flex-col overflow-hidden transition-all duration-300 ${sidebarExpanded ? 'md:pl-64' : 'md:pl-20'
+        } ${assistenteExpanded ? 'md:pr-[420px]' : 'md:pr-20'
+        }`}
     >
-      {/* 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={onToggleSidebar}
-              className="md:hidden mr-2 p-2"
-            >
-              <Menu className="w-5 h-5" />
-            </Button>
-            <span className="text-primary font-medium">Xertica.ai</span>
-            <ChevronRight className="w-4 h-4" />
-            <span className="text-foreground font-medium">{breadcrumbLabel}</span>
-          </div>
-          
-          {/* Controles do usuário */}
-          <div className="flex items-center gap-3">
-            {/* Seletor de idioma */}
-            <LanguageSelector variant="minimal" showIcon={false} className="hidden sm:flex" />
-            
-            {/* Toggle de tema */}
-            <ThemeToggle className="hover:bg-accent" />
-          </div>
-        </div>
-      </header>
+      <Header
+        sidebarExpanded={sidebarExpanded}
+        onToggleSidebar={onToggleSidebar || (() => { })}
+        title={breadcrumbLabel}
+      />
 
       {/* Área de conteúdo */}
       <main className="flex-1 overflow-hidden bg-muted">
@@ -104,7 +80,7 @@ export function HomeContent({ sidebarExpanded, assistenteExpanded = false, onTog
                     </p>
                   </CardContent>
                   <CardFooter>
-                    <Button 
+                    <Button
                       variant="outline"
                       className="w-full"
                       onClick={() => navigate('/template')}

package/components/HomePage.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { HomeContent } from './HomeContent';
 import { AssistenteXertica } from './AssistenteXertica';
+import { routes } from '../routes';
 
 interface HomePageProps {
   user: { email: string } | null;
@@ -46,15 +47,16 @@ export function HomePage({ user, onLogout }: HomePageProps) {
 
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar 
+      <Sidebar
         expanded={sidebarExpanded}
         onToggle={handleToggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
+        routes={routes}
       />
-      <HomeContent 
+      <HomeContent
         sidebarExpanded={sidebarExpanded}
         assistenteExpanded={assistenteExpanded}
         onToggleSidebar={handleToggleSidebar}

package/components/Sidebar.tsx

@@ -7,7 +7,7 @@ import {
   MoreHorizontal,
   ChevronRight,
 } from "lucide-react";
-import { routes } from "../routes";
+// routes import removed to make it reusable
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
@@ -15,8 +15,9 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "./ui/utils";
 import { XerticaLogo } from "./XerticaLogo";
 import { XerticaXLogo } from "./XerticaXLogo";
+import { Button } from "./ui/button";
 
-// TooltipContent customizado para a Sidebar com seta branca
+// Validar se SidebarTooltipContent já existe em outro lugar ou manter aqui
 function SidebarTooltipContent({
   className,
   sideOffset = 0,
@@ -34,15 +35,23 @@ function SidebarTooltipContent({
       {...props}
     >
       {children}
-      <TooltipPrimitive.Arrow 
-        className="fill-popover z-50 drop-shadow-sm" 
-        width={8} 
+      <TooltipPrimitive.Arrow
+        className="fill-popover z-50 drop-shadow-sm"
+        width={8}
         height={4}
       />
     </TooltipPrimitive.Content>
   );
 }
 
+// Interface for Route Config (copied/imported type)
+export interface RouteConfig {
+  path: string;
+  label: string;
+  icon: React.ComponentType<any>;
+  component?: React.ComponentType<any>;
+}
+
 interface SubMenuItem {
   id: string;
   label: string;
@@ -64,6 +73,7 @@ interface SidebarProps {
   onLogout: () => void;
   location: { pathname: string };
   navigate: (path: string) => void;
+  routes: RouteConfig[];
 }
 
 export function Sidebar({
@@ -73,6 +83,7 @@ export function Sidebar({
   onLogout,
   location,
   navigate,
+  routes,
 }: SidebarProps) {
   const navRef = useRef<HTMLDivElement>(null);
   const [hasOverflow, setHasOverflow] = useState(false);
@@ -154,9 +165,9 @@ export function Sidebar({
               ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
               : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
             : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
-              (item.active
-                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
-                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+            (item.active
+              ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
         }
       >
         <Icon className="w-5 h-5 flex-shrink-0" />
@@ -210,7 +221,7 @@ export function Sidebar({
                   <span className="truncate">{item.label}</span>
                 </button>
               )}
-              
+
               {/* Subitens */}
               {hasSubItems && item.subItems && (
                 <>
@@ -246,9 +257,9 @@ export function Sidebar({
               ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
               : "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
             : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 " +
-              (item.active
-                ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
-                : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
+            (item.active
+              ? "bg-sidebar-foreground/15 text-sidebar-foreground shadow-sm"
+              : "text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground")
         }
       >
         <Icon className="w-5 h-5 flex-shrink-0" />
@@ -281,11 +292,10 @@ export function Sidebar({
     <TooltipProvider delayDuration={300}>
       {/* Sidebar */}
       <div
-        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${
-          expanded
-            ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
-            : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
-        }`}
+        className={`bg-sidebar text-sidebar-foreground transition-all duration-300 ease-in-out flex flex-col z-50 ${expanded
+          ? "fixed inset-0 md:fixed md:inset-y-0 md:left-0 md:w-64"
+          : "fixed inset-y-0 left-0 w-20 -translate-x-full md:translate-x-0"
+          }`}
       >
         {/* Botão Toggle Menu */}
         <div className="p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]">

package/components/TemplatePage.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router';
 import { Sidebar } from './Sidebar';
 import { TemplateContent } from './TemplateContent';
 import { AssistenteXertica } from './AssistenteXertica';
+import { routes } from '../routes';
 
 interface TemplatePageProps {
   user: { email: string } | null;
@@ -46,15 +47,16 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
 
   return (
     <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar 
+      <Sidebar
         expanded={sidebarExpanded}
         onToggle={handleToggleSidebar}
         user={user}
         onLogout={onLogout}
         location={location}
         navigate={navigate}
+        routes={routes}
       />
-      <TemplateContent 
+      <TemplateContent
         sidebarExpanded={sidebarExpanded}
         assistenteExpanded={assistenteExpanded}
         onToggleSidebar={handleToggleSidebar}

package/components/index.ts

@@ -42,4 +42,20 @@ export { XerticaOrbe } from './XerticaOrbe';
 // Layout
 export { Sidebar } from './Sidebar';
 export { ThemeToggle } from './ThemeToggle';
-export { LanguageSelector } from './LanguageSelector';
+export { LanguageSelector } from './LanguageSelector';
+
+// Connected Components (require Providers)
+export { AssistenteXertica } from './AssistenteXertica';
+
+// State Management & Contexts
+export * from '../contexts';
+
+// Layout & Common Components
+export { Header } from './Header';
+export { DocumentEditor } from './DocumentEditor';
+
+// Media Components
+export { VideoPlayer } from './media/VideoPlayer';
+export { AudioPlayer } from './media/AudioPlayer';
+export { FloatingMediaWrapper } from './media/FloatingMediaWrapper';
+export { PodcastPlayer } from './PodcastPlayer';

package/contexts/index.ts

@@ -0,0 +1,6 @@
+export * from './ThemeContext';
+export * from './LanguageContext';
+export * from './BrandColorsContext';
+export * from './AssistenteContext';
+export * from './ApiKeyContext';
+export * from './theme-data';

package/dist/components/Header.d.ts

@@ -0,0 +1,10 @@
+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 {};

package/dist/components/Sidebar.d.ts

@@ -1,3 +1,10 @@
+import React from "react";
+export interface RouteConfig {
+    path: string;
+    label: string;
+    icon: React.ComponentType<any>;
+    component?: React.ComponentType<any>;
+}
 interface SidebarProps {
     expanded: boolean;
     onToggle: () => void;
@@ -9,6 +16,7 @@ interface SidebarProps {
         pathname: string;
     };
     navigate: (path: string) => void;
+    routes: RouteConfig[];
 }
-export declare function Sidebar({ expanded, onToggle, user, onLogout, location, navigate, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ expanded, onToggle, user, onLogout, location, navigate, routes, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/index.d.ts

@@ -13,3 +13,11 @@ export { XerticaOrbe } from './XerticaOrbe';
 export { Sidebar } from './Sidebar';
 export { ThemeToggle } from './ThemeToggle';
 export { LanguageSelector } from './LanguageSelector';
+export { AssistenteXertica } from './AssistenteXertica';
+export * from '../contexts';
+export { Header } from './Header';
+export { DocumentEditor } from './DocumentEditor';
+export { VideoPlayer } from './media/VideoPlayer';
+export { AudioPlayer } from './media/AudioPlayer';
+export { FloatingMediaWrapper } from './media/FloatingMediaWrapper';
+export { PodcastPlayer } from './PodcastPlayer';

package/dist/contexts/BrandColorsContext.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BrandColors, ColorTheme } from './theme-data';
+interface BrandColorsContextType {
+    colors: BrandColors;
+    currentTheme: string;
+    themes: ColorTheme[];
+    setTheme: (themeId: string) => void;
+    radius: number;
+    setRadius: (radius: number) => void;
+}
+export declare const BrandColorsProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useBrandColors: () => BrandColorsContextType;
+export {};

package/dist/contexts/index.d.ts

@@ -0,0 +1,6 @@
+export * from './ThemeContext';
+export * from './LanguageContext';
+export * from './BrandColorsContext';
+export * from './AssistenteContext';
+export * from './ApiKeyContext';
+export * from './theme-data';

package/dist/contexts/theme-data.d.ts

@@ -0,0 +1,81 @@
+export interface BrandColors {
+    primary: string;
+    primaryForeground: string;
+    primaryLight: string;
+    primaryDarkMode: string;
+    primaryForegroundDark: string;
+    sidebarLight: string;
+    sidebarDark: string;
+    gradientStart: string;
+    gradientEnd: string;
+    gradientStartDark: string;
+    gradientEndDark: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+    radius?: string;
+}
+export interface ColorTheme {
+    id: string;
+    name: string;
+    description: string;
+    colors: BrandColors;
+    preview: {
+        primary: string;
+        secondary: string;
+        accent: string;
+    };
+}
+export declare const PALETTE: {
+    zinc: {
+        900: string;
+        50: string;
+    };
+    slate: {
+        900: string;
+        50: string;
+    };
+    stone: {
+        900: string;
+        50: string;
+    };
+    gray: {
+        900: string;
+        50: string;
+    };
+    neutral: {
+        900: string;
+        50: string;
+    };
+    red: {
+        600: string;
+        500: string;
+    };
+    rose: {
+        600: string;
+        500: string;
+    };
+    orange: {
+        600: string;
+        500: string;
+    };
+    green: {
+        600: string;
+        500: string;
+    };
+    blue: {
+        600: string;
+        500: string;
+    };
+    yellow: {
+        600: string;
+        500: string;
+    };
+    violet: {
+        600: string;
+        500: string;
+    };
+};
+export declare const colorThemes: ColorTheme[];