xertica-ui 2.1.2 → 2.1.3

package/templates/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xertica-ui-template",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": true,
   "type": "module",
   "scripts": {
@@ -17,7 +17,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3",
     "sonner": "^1.7.3",
-    "xertica-ui": "^2.1.2"
+    "xertica-ui": "^2.1.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.18.0",
@@ -57,4 +57,4 @@
       "vite": "6.3.5"
     }
   }
-}
+}

package/templates/src/features/auth/index.ts

@@ -1,4 +1,4 @@
-export { LoginContent } from './ui/LoginContent';
-export { ForgotPasswordContent } from './ui/ForgotPasswordContent';
-export { VerifyEmailContent } from './ui/VerifyEmailContent';
-export { ResetPasswordContent } from './ui/ResetPasswordContent';
+export { LoginContent } from './ui/LoginContent';
+export { ForgotPasswordContent } from './ui/ForgotPasswordContent';
+export { VerifyEmailContent } from './ui/VerifyEmailContent';
+export { ResetPasswordContent } from './ui/ResetPasswordContent';

package/templates/src/features/auth/ui/AuthPageShell.tsx

@@ -1,34 +1,34 @@
-import React from 'react';
-import { ImageWithFallback } from 'xertica-ui/ui';
-import { LanguageSelector } from 'xertica-ui/brand';
-
-interface AuthPageShellProps {
-  imageSrc: string;
-  imageAlt: string;
-  children: React.ReactNode;
-}
-
-export function AuthPageShell({ imageSrc, imageAlt, children }: AuthPageShellProps) {
-  return (
-    <div className="min-h-screen flex">
-      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
-        <ImageWithFallback
-          src={imageSrc}
-          alt={imageAlt}
-          className="absolute inset-0 w-full h-full object-cover"
-        />
-        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
-      </div>
-
-      <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">
-        <div className="absolute top-4 right-4 z-20">
-          <LanguageSelector variant="minimal" showIcon={false} />
-        </div>
-        <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">
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}
+import React from 'react';
+import { ImageWithFallback } from 'xertica-ui/ui';
+import { LanguageSelector } from 'xertica-ui/brand';
+
+interface AuthPageShellProps {
+  imageSrc: string;
+  imageAlt: string;
+  children: React.ReactNode;
+}
+
+export function AuthPageShell({ imageSrc, imageAlt, children }: AuthPageShellProps) {
+  return (
+    <div className="min-h-screen flex">
+      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
+        <ImageWithFallback
+          src={imageSrc}
+          alt={imageAlt}
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+      </div>
+
+      <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">
+        <div className="absolute top-4 right-4 z-20">
+          <LanguageSelector variant="minimal" showIcon={false} />
+        </div>
+        <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">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/src/features/auth/ui/ForgotPasswordContent.tsx

@@ -1,70 +1,70 @@
-import React, { useState } from 'react';
-import { Button, Input, Label } from 'xertica-ui/ui';
-import { XerticaLogo } from 'xertica-ui/brand';
-import { ArrowLeft } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
-import { AuthPageShell } from './AuthPageShell';
-import { SocialLoginButtons } from './SocialLoginButtons';
-
-export function ForgotPasswordContent() {
-  const navigate = useNavigate();
-  const [email, setEmail] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    navigate('/verify-email', { state: { email } });
-    setIsLoading(false);
-  };
-
-  return (
-    <AuthPageShell
-      imageSrc="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format"
-      imageAlt="Segurança e tecnologia"
-    >
-      <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">Recuperar senha</h2>
-        <p className="mt-2 text-muted-foreground">
-          Digite seu email e enviaremos instruções para redefinir sua senha
-        </p>
-      </div>
-
-      <form className="space-y-6" onSubmit={handleSubmit}>
-        <div className="form-group 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-3">
-          <Button type="submit" className="w-full" disabled={isLoading}>
-            {isLoading ? 'Enviando...' : 'Enviar instruções'}
-          </Button>
-          <Button
-            type="button"
-            onClick={() => navigate('/login')}
-            variant="outline"
-            className="w-full text-muted-foreground hover:text-foreground"
-          >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Voltar para login
-          </Button>
-        </div>
-      </form>
-
-      <SocialLoginButtons onSocialLogin={provider => console.log(`Login com ${provider}`)} />
-    </AuthPageShell>
-  );
-}
+import React, { useState } from 'react';
+import { Button, Input, Label } from 'xertica-ui/ui';
+import { XerticaLogo } from 'xertica-ui/brand';
+import { ArrowLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { AuthPageShell } from './AuthPageShell';
+import { SocialLoginButtons } from './SocialLoginButtons';
+
+export function ForgotPasswordContent() {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    navigate('/verify-email', { state: { email } });
+    setIsLoading(false);
+  };
+
+  return (
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format"
+      imageAlt="Segurança e tecnologia"
+    >
+      <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">Recuperar senha</h2>
+        <p className="mt-2 text-muted-foreground">
+          Digite seu email e enviaremos instruções para redefinir sua senha
+        </p>
+      </div>
+
+      <form className="space-y-6" onSubmit={handleSubmit}>
+        <div className="form-group 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-3">
+          <Button type="submit" className="w-full" disabled={isLoading}>
+            {isLoading ? 'Enviando...' : 'Enviar instruções'}
+          </Button>
+          <Button
+            type="button"
+            onClick={() => navigate('/login')}
+            variant="outline"
+            className="w-full text-muted-foreground hover:text-foreground"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Voltar para login
+          </Button>
+        </div>
+      </form>
+
+      <SocialLoginButtons onSocialLogin={provider => console.log(`Login com ${provider}`)} />
+    </AuthPageShell>
+  );
+}

package/templates/src/features/auth/ui/LoginContent.tsx

@@ -1,90 +1,90 @@
-import React, { useState } from 'react';
-import { Button, Input, Label } from 'xertica-ui/ui';
-import { XerticaLogo } from 'xertica-ui/brand';
-import { useNavigate } from 'react-router-dom';
-import { AuthPageShell } from './AuthPageShell';
-import { SocialLoginButtons } from './SocialLoginButtons';
-
-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));
-    if (!onLogin(email, password)) setError('Por favor, preencha todos os campos');
-    setIsLoading(false);
-  };
-
-  return (
-    <AuthPageShell
-      imageSrc="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
-      imageAlt="Equipe trabalhando com tecnologia"
-    >
-      <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>
-
-      <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>
-        <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>
-
-      <SocialLoginButtons
-        onSocialLogin={provider => {
-          console.log(`Login com ${provider}`);
-          onLogin('social@user.com', 'social-auth');
-        }}
-      />
-    </AuthPageShell>
-  );
-}
+import React, { useState } from 'react';
+import { Button, Input, Label } from 'xertica-ui/ui';
+import { XerticaLogo } from 'xertica-ui/brand';
+import { useNavigate } from 'react-router-dom';
+import { AuthPageShell } from './AuthPageShell';
+import { SocialLoginButtons } from './SocialLoginButtons';
+
+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));
+    if (!onLogin(email, password)) setError('Por favor, preencha todos os campos');
+    setIsLoading(false);
+  };
+
+  return (
+    <AuthPageShell
+      imageSrc="https://images.unsplash.com/photo-1551434678-e076c223a692?w=1200&h=800&fit=crop&auto=format"
+      imageAlt="Equipe trabalhando com tecnologia"
+    >
+      <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>
+
+      <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>
+        <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>
+
+      <SocialLoginButtons
+        onSocialLogin={provider => {
+          console.log(`Login com ${provider}`);
+          onLogin('social@user.com', 'social-auth');
+        }}
+      />
+    </AuthPageShell>
+  );
+}