xertica-ui 1.4.10 → 1.4.11

package/bin/cli.ts

@@ -85,6 +85,7 @@ program
                 'eslint.config.js',
                 'index.css',
                 '.env.example',
+                'guidelines',
             ];
 
             for (const file of rootFilesToCopy) {
@@ -105,69 +106,56 @@ program
                 await fs.writeJson(path.join(targetDir, 'package.json'), pkgContent, { spaces: 2 });
             }
 
-            // 4. Ensure src directory exists
-            await fs.ensureDir(path.join(targetDir, 'src'));
+            // 4. Ensure src/app directory exists
+            await fs.ensureDir(path.join(targetDir, 'src', 'app'));
 
-            // 5. Copy src/App.tsx
+            // 5. Copy src/app/App.tsx
             await fs.copy(
-                path.join(templatesDir, 'src', 'App.tsx'),
-                path.join(targetDir, 'src', 'App.tsx')
+                path.join(templatesDir, 'src', 'app', 'App.tsx'),
+                path.join(targetDir, 'src', 'app', 'App.tsx')
             );
 
-            // 6. Copy src/main.tsx
+            // 6. Copy src/app/main.tsx
             await fs.copy(
-                path.join(templatesDir, 'src', 'main.tsx'),
-                path.join(targetDir, 'src', 'main.tsx')
+                path.join(templatesDir, 'src', 'app', 'main.tsx'),
+                path.join(targetDir, 'src', 'app', 'main.tsx')
             );
 
-            // 7. Copy src/routes.tsx
+            // 7. Copy src/app/routes.tsx
             await fs.copy(
-                path.join(templatesDir, 'src', 'routes.tsx'),
-                path.join(targetDir, 'src', 'routes.tsx')
+                path.join(templatesDir, 'src', 'app', 'routes.tsx'),
+                path.join(targetDir, 'src', 'app', 'routes.tsx')
             );
 
-            // 8. Copy pages
-            await fs.ensureDir(path.join(targetDir, 'src', 'pages'));
-
-            // Always needed pages
-            const alwaysCopyPages = ['LoginPage.tsx', 'ForgotPasswordPage.tsx', 'VerifyEmailPage.tsx', 'ResetPasswordPage.tsx'];
-            const optionalPages: Record<string, boolean> = {
-                'LoginPage.tsx': hasLogin,
-                'ForgotPasswordPage.tsx': hasLogin,
-                'VerifyEmailPage.tsx': hasLogin,
-                'ResetPasswordPage.tsx': hasLogin,
-                'HomePage.tsx': hasHome,
-                'TemplatePage.tsx': hasTemplate,
+            // 8. Copy pages and contents
+            await fs.ensureDir(path.join(targetDir, 'src', 'app', 'pages'));
+
+            const optionalPages: Record<string, { file: string, dir?: string, shouldCopy: boolean }> = {
+                login: { file: 'LoginPage.tsx', dir: 'Login', shouldCopy: hasLogin },
+                forgot: { file: 'ForgotPasswordPage.tsx', dir: 'ForgotPassword', shouldCopy: hasLogin },
+                verify: { file: 'VerifyEmailPage.tsx', dir: 'VerifyEmail', shouldCopy: hasLogin },
+                reset: { file: 'ResetPasswordPage.tsx', dir: 'ResetPassword', shouldCopy: hasLogin },
+                home: { file: 'HomePage.tsx', dir: 'Home', shouldCopy: hasHome },
+                template: { file: 'TemplatePage.tsx', dir: 'Template', shouldCopy: hasTemplate },
             };
 
-            const srcPagesDir = path.join(templatesDir, 'src', 'pages');
-            for (const [file, shouldCopy] of Object.entries(optionalPages)) {
+            const srcPagesDir = path.join(templatesDir, 'src', 'app', 'pages');
+            for (const key in optionalPages) {
+                const { file, dir, shouldCopy } = optionalPages[key];
                 if (shouldCopy) {
-                    const srcPath = path.join(srcPagesDir, file);
-                    if (await fs.pathExists(srcPath)) {
-                        await fs.copy(srcPath, path.join(targetDir, 'src', 'pages', file));
+                    const srcFilePath = path.join(srcPagesDir, file);
+                    if (await fs.pathExists(srcFilePath)) {
+                        await fs.copy(srcFilePath, path.join(targetDir, 'src', 'app', 'pages', file));
+                    }
+                    if (dir) {
+                        const srcDirPath = path.join(srcPagesDir, dir);
+                        if (await fs.pathExists(srcDirPath)) {
+                            await fs.copy(srcDirPath, path.join(targetDir, 'src', 'app', 'pages', dir));
+                        }
                     }
                 }
             }
 
-            // 9. Copy content components
-            await fs.ensureDir(path.join(targetDir, 'src', 'content'));
-            const srcContentDir = path.join(templatesDir, 'src', 'content');
-
-            if (hasHome && await fs.pathExists(path.join(srcContentDir, 'HomeContent.tsx'))) {
-                await fs.copy(
-                    path.join(srcContentDir, 'HomeContent.tsx'),
-                    path.join(targetDir, 'src', 'content', 'HomeContent.tsx')
-                );
-            }
-
-            if (hasTemplate && await fs.pathExists(path.join(srcContentDir, 'TemplateContent.tsx'))) {
-                await fs.copy(
-                    path.join(srcContentDir, 'TemplateContent.tsx'),
-                    path.join(targetDir, 'src', 'content', 'TemplateContent.tsx')
-                );
-            }
-
             // 10. If NOT all pages selected, create a minimal App.tsx
             if (!hasLogin || !hasHome || !hasTemplate) {
                 const imports: string[] = [];
@@ -195,7 +183,6 @@ program
                 const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { XerticaProvider, Toaster } from 'xertica-ui';
-import 'xertica-ui/style.css';
 ${imports.join('\n')}
 
 export default function App() {
@@ -213,14 +200,14 @@ ${routes.join('\n')}
   );
 }
 `;
-                await fs.writeFile(path.join(targetDir, 'src', 'App.tsx'), minimalApp);
+                await fs.writeFile(path.join(targetDir, 'src', 'app', 'App.tsx'), minimalApp);
             }
 
             // 11. Generate theme tokens
             const selectedTheme = colorThemes.find(t => t.id === response.theme) || colorThemes[0];
 
-            // Create styles/xertica directory
-            const tokensDir = path.join(targetDir, 'styles', 'xertica');
+            // Create src/styles/xertica directory
+            const tokensDir = path.join(targetDir, 'src', 'styles', 'xertica');
             await fs.ensureDir(tokensDir);
             const newTokensCss = generateTokensCss(selectedTheme);
             await fs.writeFile(path.join(tokensDir, 'tokens.css'), newTokensCss);
@@ -241,7 +228,7 @@ ${routes.join('\n')}
             console.log(chalk.cyan('  npm run dev'));
             console.log();
             console.log(chalk.gray('  Components are imported from the xertica-ui package.'));
-            console.log(chalk.gray('  Customize the theme in styles/xertica/tokens.css'));
+            console.log(chalk.gray('  Customize the theme in src/styles/xertica/tokens.css'));
 
         } catch (error) {
             spinner.fail('Failed to initialize project');
@@ -272,7 +259,7 @@ program
         const spinner = ora('Updating theme...').start();
 
         try {
-            const tokensPath = path.join(targetDir, 'styles', 'xertica', 'tokens.css');
+            const tokensPath = path.join(targetDir, 'src', 'styles', 'xertica', 'tokens.css');
             const selectedTheme = colorThemes.find(t => t.id === themeResponse.theme);
 
             if (selectedTheme) {

package/dist/cli.js

@@ -555,7 +555,8 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       "vite-env.d.ts",
       "eslint.config.js",
       "index.css",
-      ".env.example"
+      ".env.example",
+      "guidelines"
     ];
     for (const file of rootFilesToCopy) {
       const srcPath = path.join(templatesDir, file);
@@ -571,52 +572,44 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       pkgContent.name = projectName.toLowerCase().replace(/[^a-z0-9-]/g, "-");
       await fs.writeJson(path.join(targetDir, "package.json"), pkgContent, { spaces: 2 });
     }
-    await fs.ensureDir(path.join(targetDir, "src"));
+    await fs.ensureDir(path.join(targetDir, "src", "app"));
     await fs.copy(
-      path.join(templatesDir, "src", "App.tsx"),
-      path.join(targetDir, "src", "App.tsx")
+      path.join(templatesDir, "src", "app", "App.tsx"),
+      path.join(targetDir, "src", "app", "App.tsx")
     );
     await fs.copy(
-      path.join(templatesDir, "src", "main.tsx"),
-      path.join(targetDir, "src", "main.tsx")
+      path.join(templatesDir, "src", "app", "main.tsx"),
+      path.join(targetDir, "src", "app", "main.tsx")
     );
     await fs.copy(
-      path.join(templatesDir, "src", "routes.tsx"),
-      path.join(targetDir, "src", "routes.tsx")
+      path.join(templatesDir, "src", "app", "routes.tsx"),
+      path.join(targetDir, "src", "app", "routes.tsx")
     );
-    await fs.ensureDir(path.join(targetDir, "src", "pages"));
-    const alwaysCopyPages = ["LoginPage.tsx", "ForgotPasswordPage.tsx", "VerifyEmailPage.tsx", "ResetPasswordPage.tsx"];
+    await fs.ensureDir(path.join(targetDir, "src", "app", "pages"));
     const optionalPages = {
-      "LoginPage.tsx": hasLogin,
-      "ForgotPasswordPage.tsx": hasLogin,
-      "VerifyEmailPage.tsx": hasLogin,
-      "ResetPasswordPage.tsx": hasLogin,
-      "HomePage.tsx": hasHome,
-      "TemplatePage.tsx": hasTemplate
+      login: { file: "LoginPage.tsx", dir: "Login", shouldCopy: hasLogin },
+      forgot: { file: "ForgotPasswordPage.tsx", dir: "ForgotPassword", shouldCopy: hasLogin },
+      verify: { file: "VerifyEmailPage.tsx", dir: "VerifyEmail", shouldCopy: hasLogin },
+      reset: { file: "ResetPasswordPage.tsx", dir: "ResetPassword", shouldCopy: hasLogin },
+      home: { file: "HomePage.tsx", dir: "Home", shouldCopy: hasHome },
+      template: { file: "TemplatePage.tsx", dir: "Template", shouldCopy: hasTemplate }
     };
-    const srcPagesDir = path.join(templatesDir, "src", "pages");
-    for (const [file, shouldCopy] of Object.entries(optionalPages)) {
+    const srcPagesDir = path.join(templatesDir, "src", "app", "pages");
+    for (const key in optionalPages) {
+      const { file, dir, shouldCopy } = optionalPages[key];
       if (shouldCopy) {
-        const srcPath = path.join(srcPagesDir, file);
-        if (await fs.pathExists(srcPath)) {
-          await fs.copy(srcPath, path.join(targetDir, "src", "pages", file));
+        const srcFilePath = path.join(srcPagesDir, file);
+        if (await fs.pathExists(srcFilePath)) {
+          await fs.copy(srcFilePath, path.join(targetDir, "src", "app", "pages", file));
+        }
+        if (dir) {
+          const srcDirPath = path.join(srcPagesDir, dir);
+          if (await fs.pathExists(srcDirPath)) {
+            await fs.copy(srcDirPath, path.join(targetDir, "src", "app", "pages", dir));
+          }
         }
       }
     }
-    await fs.ensureDir(path.join(targetDir, "src", "content"));
-    const srcContentDir = path.join(templatesDir, "src", "content");
-    if (hasHome && await fs.pathExists(path.join(srcContentDir, "HomeContent.tsx"))) {
-      await fs.copy(
-        path.join(srcContentDir, "HomeContent.tsx"),
-        path.join(targetDir, "src", "content", "HomeContent.tsx")
-      );
-    }
-    if (hasTemplate && await fs.pathExists(path.join(srcContentDir, "TemplateContent.tsx"))) {
-      await fs.copy(
-        path.join(srcContentDir, "TemplateContent.tsx"),
-        path.join(targetDir, "src", "content", "TemplateContent.tsx")
-      );
-    }
     if (!hasLogin || !hasHome || !hasTemplate) {
       const imports = [];
       const routes = [];
@@ -641,7 +634,6 @@ program.command("init").description("Initialize a new Xertica UI project").argum
       const minimalApp = `import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { XerticaProvider, Toaster } from 'xertica-ui';
-import 'xertica-ui/style.css';
 ${imports.join("\n")}
 
 export default function App() {
@@ -659,10 +651,10 @@ ${routes.join("\n")}
   );
 }
 `;
-      await fs.writeFile(path.join(targetDir, "src", "App.tsx"), minimalApp);
+      await fs.writeFile(path.join(targetDir, "src", "app", "App.tsx"), minimalApp);
     }
     const selectedTheme = colorThemes.find((t) => t.id === response.theme) || colorThemes[0];
-    const tokensDir = path.join(targetDir, "styles", "xertica");
+    const tokensDir = path.join(targetDir, "src", "styles", "xertica");
     await fs.ensureDir(tokensDir);
     const newTokensCss = generateTokensCss(selectedTheme);
     await fs.writeFile(path.join(tokensDir, "tokens.css"), newTokensCss);
@@ -681,7 +673,7 @@ ${routes.join("\n")}
     console.log(chalk.cyan("  npm run dev"));
     console.log();
     console.log(chalk.gray("  Components are imported from the xertica-ui package."));
-    console.log(chalk.gray("  Customize the theme in styles/xertica/tokens.css"));
+    console.log(chalk.gray("  Customize the theme in src/styles/xertica/tokens.css"));
   } catch (error) {
     spinner.fail("Failed to initialize project");
     console.error(error);
@@ -703,7 +695,7 @@ program.command("update").description("Update theme tokens in your project").act
   if (!themeResponse.theme) return;
   const spinner = ora("Updating theme...").start();
   try {
-    const tokensPath = path.join(targetDir, "styles", "xertica", "tokens.css");
+    const tokensPath = path.join(targetDir, "src", "styles", "xertica", "tokens.css");
     const selectedTheme = colorThemes.find((t) => t.id === themeResponse.theme);
     if (selectedTheme) {
       await fs.ensureDir(path.dirname(tokensPath));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui",
-  "version": "1.4.10",
+  "version": "1.4.11",
   "description": "Xertica UI - Design System completo com componentes React e Tailwind CSS",
   "type": "module",
   "main": "./dist/index.umd.js",

package/templates/guidelines/Guidelines.md

@@ -0,0 +1,16 @@
+# Guias de Desenvolvimento, Padrões e Políticas
+
+Este é o documento oficial de diretrizes estruturais deste projeto, embasado nas melhores práticas arquiteturais.
+
+## Padrão de Componentização e Rotas
+
+A stack usa React e a árvore de diretórios principal foi formatada sob os princípios de modularidade:
+
+- `/src/app`: O cerne de inicialização lógica e rotemento do framework React.
+- `/src/app/pages`: Ponto de entrada (Entrypoint Roots) de cada rota gerada. Aqui devem residir puramente instâncias injetáveis da Página, responsáveis por amontoar contextos ou metadados de Rota de alto nível.
+- `/src/app/pages/NomeDaPagina`: Neste subdomínio coabita a verdadeira lógica e montagem de componentes ligados umbilicalmente àquela tela (ex: `HomePage` chama o `HomeContent`). Evite misturar blocos de "dumb components" utilitários aqui; tais peças devem vir da pasta `/src/components` da sua arquitetura, se os estender fora do *Design System*.
+
+## Sistema de Tokens e Temas Visual
+
+- `/src/styles/xertica/tokens.css`: A camada absoluta de definição de variáveis visuais da marca. Ao atualizar cores, fontes nativas ou métricas de Design System, efetue primariamente a edição neste arquivo.
+- O projeto não sofre sobrescrita paralela; Tailwind V4 consumirá estes Tokens base dinamicamente.

package/templates/index.css

@@ -1,11 +1,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&display=swap");
 
-/* 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';
 
+/* Your project's theme tokens (generated by CLI, customize here) */
+@import './src/styles/xertica/tokens.css';
+
 /* Tell Tailwind v4 to scan xertica-ui for class names */
 @source './node_modules/xertica-ui';
 

package/templates/index.html

@@ -8,6 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/app/main.tsx"></script>
   </body>
 </html>

package/templates/package.json

@@ -11,7 +11,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "xertica-ui": "^1.4.10",
+    "xertica-ui": "^1.4.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",

package/templates/src/{App.tsx → app/App.tsx}

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { XerticaProvider } from 'xertica-ui';
-import 'xertica-ui/style.css';
 
 import { LoginPage } from './pages/LoginPage';
 import { ForgotPasswordPage } from './pages/ForgotPasswordPage';

package/templates/src/{main.tsx → app/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(

package/templates/src/{pages/ForgotPasswordPage.tsx → app/pages/ForgotPassword/ForgotPasswordContent.tsx}

@@ -3,7 +3,7 @@ import { Button, Input, Label, XerticaLogo, ImageWithFallback, LanguageSelector
 import { ArrowLeft, Lock } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
-export function ForgotPasswordPage() {
+export function ForgotPasswordContent() {
   const navigate = useNavigate();
   const [email, setEmail] = useState('');
   const [isLoading, setIsLoading] = useState(false);

package/templates/src/app/pages/ForgotPasswordPage.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ForgotPasswordContent } from './ForgotPassword/ForgotPasswordContent';
+
+export function ForgotPasswordPage() {
+  return <ForgotPasswordContent />;
+}

package/templates/src/{pages → app/pages}/HomePage.tsx

@@ -6,7 +6,7 @@ import {
   useLayout,
   generateDemoResponse,
 } from 'xertica-ui';
-import { HomeContent } from '../content/HomeContent';
+import { HomeContent } from './Home/HomeContent';
 import { routes } from '../routes';
 
 const richSuggestions = [

package/templates/src/{pages/LoginPage.tsx → app/pages/Login/LoginContent.tsx}

@@ -1,183 +1,183 @@
-import React, { useState } from 'react';
-import { Button, Input, Label, XerticaLogo, ImageWithFallback, LanguageSelector } from 'xertica-ui';
-import { Lock } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-
-interface LoginPageProps {
-  onLogin: (email: string, password: string) => boolean;
-}
-
-export function LoginPage({ onLogin }: LoginPageProps) {
-  const navigate = useNavigate();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    setIsLoading(true);
-
-    await new Promise(resolve => setTimeout(resolve, 1000));
-
-    const success = onLogin(email, password);
-
-    if (!success) {
-      setError('Por favor, preencha todos os campos');
-    }
-
-    setIsLoading(false);
-  };
-
-  const handleSocialLogin = (provider: string) => {
-    console.log(`Login com ${provider}`);
-    onLogin('social@user.com', 'social-auth');
-  };
-
-  return (
-    <div className="min-h-screen flex">
-      {/* Lado esquerdo - Imagem de fundo completa */}
-      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
-        <ImageWithFallback
-          src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
-          alt="Equipe trabalhando com tecnologia"
-          className="absolute inset-0 w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
-      </div>
-
-      {/* Lado direito - Formulário */}
-      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
-        {/* Seletor de idioma no canto superior direito */}
-        <div className="absolute top-4 right-4 z-20">
-          <LanguageSelector variant="minimal" showIcon={false} />
-        </div>
-
-        {/* Gradiente de fundo para mobile */}
-        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
-        <div className="w-full max-w-sm space-y-6 relative z-10">
-          {/* Header do formulário */}
-          <div className="text-center">
-            <div className="flex items-center justify-center mb-4">
-              <XerticaLogo
-                className="h-12 w-auto text-primary dark:text-foreground"
-                variant="theme"
-              />
-            </div>
-            <h2 className="text-sm text-muted-foreground">Faça login em sua conta</h2>
-          </div>
-
-          {/* Formulário */}
-          <form className="space-y-6" onSubmit={handleSubmit}>
-            <div className="space-y-2">
-              <Label htmlFor="email">E-mail</Label>
-              <Input
-                id="email"
-                name="email"
-                type="email"
-                required
-                className="w-full"
-                placeholder="seu@email.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-              />
-            </div>
-
-            <div className="space-y-2">
-              <Label htmlFor="password">Senha</Label>
-              <Input
-                id="password"
-                name="password"
-                type="password"
-                required
-                className="w-full"
-                placeholder="••••••••"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-              />
-            </div>
-
-            {error && (
-              <div className="text-destructive text-sm text-center">
-                {error}
-              </div>
-            )}
-
-            <Button
-              type="submit"
-              className="w-full"
-              disabled={isLoading}
-            >
-              {isLoading ? 'Entrando...' : 'Entrar'}
-            </Button>
-
-            {/* Link para recuperação de senha */}
-            <div className="text-center">
-              <button
-                type="button"
-                onClick={() => navigate('/forgot-password')}
-                className="text-sm text-primary hover:opacity-80 transition-colors"
-              >
-                Esqueceu sua senha?
-              </button>
-            </div>
-          </form>
-
-          {/* Divider */}
-          <div className="relative">
-            <div className="absolute inset-0 flex items-center">
-              <div className="w-full border-t border-border"></div>
-            </div>
-            <div className="relative flex justify-center text-sm">
-              <span className="bg-muted px-2 text-muted-foreground">
-                ou continuar com
-              </span>
-            </div>
-          </div>
-
-          {/* Opções de login social/SSO */}
-          <div className="space-y-3">
-            {/* Google */}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full justify-center"
-              onClick={() => handleSocialLogin('Google')}
-            >
-              <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
-                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
-                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
-                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
-                <path fill="none" d="M0 0h48v48H0z"></path>
-              </svg>
-              <span>Entrar com Google</span>
-            </Button>
-
-            {/* MT Login */}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full justify-center"
-              onClick={() => handleSocialLogin('MT Login')}
-            >
-              <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
-              <span>Entrar com MT Login</span>
-            </Button>
-
-            {/* gov.br */}
-            <Button
-              type="button"
-              variant="outline"
-              className="w-full justify-center font-normal"
-              onClick={() => handleSocialLogin('gov.br')}
-            >
-              <span>Entrar com <strong className="font-semibold">gov.br</strong></span>
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import { Button, Input, Label, XerticaLogo, ImageWithFallback, LanguageSelector } from 'xertica-ui';
+import { Lock } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+interface LoginContentProps {
+  onLogin: (email: string, password: string) => boolean;
+}
+
+export function LoginContent({ onLogin }: LoginContentProps) {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    const success = onLogin(email, password);
+
+    if (!success) {
+      setError('Por favor, preencha todos os campos');
+    }
+
+    setIsLoading(false);
+  };
+
+  const handleSocialLogin = (provider: string) => {
+    console.log(`Login com ${provider}`);
+    onLogin('social@user.com', 'social-auth');
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Lado esquerdo - Imagem de fundo completa */}
+      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
+        <ImageWithFallback
+          src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
+          alt="Equipe trabalhando com tecnologia"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+      </div>
+
+      {/* Lado direito - Formulário */}
+      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
+        {/* Seletor de idioma no canto superior direito */}
+        <div className="absolute top-4 right-4 z-20">
+          <LanguageSelector variant="minimal" showIcon={false} />
+        </div>
+
+        {/* Gradiente de fundo para mobile */}
+        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
+        <div className="w-full max-w-sm space-y-6 relative z-10">
+          {/* Header do formulário */}
+          <div className="text-center">
+            <div className="flex items-center justify-center mb-4">
+              <XerticaLogo
+                className="h-12 w-auto text-primary dark:text-foreground"
+                variant="theme"
+              />
+            </div>
+            <h2 className="text-sm text-muted-foreground">Faça login em sua conta</h2>
+          </div>
+
+          {/* Formulário */}
+          <form className="space-y-6" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="email">E-mail</Label>
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                required
+                className="w-full"
+                placeholder="seu@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password">Senha</Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="w-full"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+
+            {error && (
+              <div className="text-destructive text-sm text-center">
+                {error}
+              </div>
+            )}
+
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Entrando...' : 'Entrar'}
+            </Button>
+
+            {/* Link para recuperação de senha */}
+            <div className="text-center">
+              <button
+                type="button"
+                onClick={() => navigate('/forgot-password')}
+                className="text-sm text-primary hover:opacity-80 transition-colors"
+              >
+                Esqueceu sua senha?
+              </button>
+            </div>
+          </form>
+
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-muted px-2 text-muted-foreground">
+                ou continuar com
+              </span>
+            </div>
+          </div>
+
+          {/* Opções de login social/SSO */}
+          <div className="space-y-3">
+            {/* Google */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('Google')}
+            >
+              <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                <path fill="none" d="M0 0h48v48H0z"></path>
+              </svg>
+              <span>Entrar com Google</span>
+            </Button>
+
+            {/* MT Login */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('MT Login')}
+            >
+              <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
+              <span>Entrar com MT Login</span>
+            </Button>
+
+            {/* gov.br */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center font-normal"
+              onClick={() => handleSocialLogin('gov.br')}
+            >
+              <span>Entrar com <strong className="font-semibold">gov.br</strong></span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/src/app/pages/LoginPage.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { LoginContent } from './Login/LoginContent';
+
+interface LoginPageProps {
+  onLogin: (email: string, password: string) => boolean;
+}
+
+export function LoginPage({ onLogin }: LoginPageProps) {
+  return <LoginContent onLogin={onLogin} />;
+}

package/templates/src/{pages/ResetPasswordPage.tsx → app/pages/ResetPassword/ResetPasswordContent.tsx}

@@ -3,7 +3,7 @@ import { Button, Input, Label, XerticaLogo, ImageWithFallback, LanguageSelector
 import { ArrowLeft, CheckCircle2, AlertCircle } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
-export function ResetPasswordPage() {
+export function ResetPasswordContent() {
   const navigate = useNavigate();
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');

package/templates/src/app/pages/ResetPasswordPage.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ResetPasswordContent } from './ResetPassword/ResetPasswordContent';
+
+export function ResetPasswordPage() {
+  return <ResetPasswordContent />;
+}

package/templates/src/{pages → app/pages}/TemplatePage.tsx

@@ -5,7 +5,7 @@ import {
   XerticaAssistant,
   useLayout,
 } from 'xertica-ui';
-import { TemplateContent } from '../content/TemplateContent';
+import { TemplateContent } from './Template/TemplateContent';
 import { routes } from '../routes';
 
 interface TemplatePageProps {

package/templates/src/{pages/VerifyEmailPage.tsx → app/pages/VerifyEmail/VerifyEmailContent.tsx}

@@ -3,7 +3,7 @@ import { Button, XerticaLogo, ImageWithFallback, LanguageSelector } from 'xertic
 import { ArrowLeft, Mail, CheckCircle2, Lock } from 'lucide-react';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-export function VerifyEmailPage() {
+export function VerifyEmailContent() {
   const navigate = useNavigate();
   const location = useLocation();
   const email = location.state?.email || 'seu@email.com';

package/templates/src/app/pages/VerifyEmailPage.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { VerifyEmailContent } from './VerifyEmail/VerifyEmailContent';
+
+export function VerifyEmailPage() {
+  return <VerifyEmailContent />;
+}