xertica-ui 2.3.0 → 2.4.1

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

@@ -1,32 +1,32 @@
-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="h-screen w-full flex overflow-y-auto">
+      <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

@@ -31,9 +31,7 @@ export function ForgotPasswordContent() {
           <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />
         </div>
         <h2 className="text-sm text-muted-foreground">{t('forgotPassword.heading')}</h2>
-        <p className="mt-2 text-muted-foreground">
-          {t('forgotPassword.subheading')}
-        </p>
+        <p className="mt-2 text-muted-foreground">{t('forgotPassword.subheading')}</p>
       </div>
 
       <form className="space-y-6" onSubmit={handleSubmit}>

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

@@ -152,13 +152,17 @@ export function ResetPasswordContent() {
               <CheckCircle2
                 className={`w-4 h-4 ${password.length >= 6 ? 'text-[var(--chart-2)]' : 'text-muted-foreground'}`}
               />
-              <span className="text-sm text-muted-foreground">{t('resetPassword.requirementMinChars')}</span>
+              <span className="text-sm text-muted-foreground">
+                {t('resetPassword.requirementMinChars')}
+              </span>
             </div>
             <div className="flex items-center gap-2">
               <CheckCircle2
                 className={`w-4 h-4 ${password === confirmPassword && password.length > 0 ? 'text-[var(--chart-2)]' : 'text-muted-foreground'}`}
               />
-              <span className="text-sm text-muted-foreground">{t('resetPassword.requirementMatch')}</span>
+              <span className="text-sm text-muted-foreground">
+                {t('resetPassword.requirementMatch')}
+              </span>
             </div>
           </div>
         </div>

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

@@ -39,16 +39,12 @@ export function VerifyEmailContent() {
           </div>
         </div>
         <h2 className="text-sm text-muted-foreground">{t('verifyEmail.heading')}</h2>
-        <p className="mt-2 text-muted-foreground">
-          {t('verifyEmail.instructionsSent')}
-        </p>
+        <p className="mt-2 text-muted-foreground">{t('verifyEmail.instructionsSent')}</p>
         <p className="mt-1 text-primary">{email}</p>
       </div>
 
       <div className="bg-accent rounded-[var(--radius)] p-4 space-y-3">
-        <p className="text-muted-foreground">
-          {t('verifyEmail.instructions')}
-        </p>
+        <p className="text-muted-foreground">{t('verifyEmail.instructions')}</p>
         <div className="flex items-start gap-2 text-muted-foreground">
           <CheckCircle2 className="w-4 h-4 mt-0.5 flex-shrink-0 text-[var(--chart-2)]" />
           <span className="text-sm">{t('verifyEmail.checkSpam')}</span>

package/templates/src/features/home/data/mock.ts

@@ -1,35 +1,41 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// features/home/data/mock.ts
-//
-// All mock data for the Home feature lives here.
-// To connect to a real API, replace the fetch functions below with actual
-// HTTP calls — the hooks and components stay unchanged.
-// ─────────────────────────────────────────────────────────────────────────────
-
-import i18n from '../../../i18n';
-
-// ── Types ─────────────────────────────────────────────────────────────────────
-
-export interface FeatureCard {
-  id: string;
-  title: string;
-  description: string;
-  badge?: string;
-  href: string;
-}
-
-// ── Mock API function ─────────────────────────────────────────────────────────
-
-export async function fetchFeatureCards(): Promise<FeatureCard[]> {
-  // Replace with: return fetch('/api/home/features').then(r => r.json());
-  await new Promise(resolve => setTimeout(resolve, 100));
-  return [
-    {
-      id: 'template-cli',
-      title: i18n.t('home.templateCliTitle'),
-      description: i18n.t('home.templateCliDescription'),
-      badge: i18n.t('home.templateClibadge'),
-      href: '/template',
-    },
-  ];
-}
+// ─────────────────────────────────────────────────────────────────────────────
+// features/home/data/mock.ts
+//
+// All mock data for the Home feature lives here.
+// To connect to a real API, replace the fetch functions below with actual
+// HTTP calls — the hooks and components stay unchanged.
+// ─────────────────────────────────────────────────────────────────────────────
+
+import i18n from '../../../i18n';
+import type { LucideIcon } from 'lucide-react';
+import { FileText } from 'lucide-react';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface FeatureCard {
+  id: string;
+  title: string;
+  description: string;
+  badge?: string;
+  href: string;
+  Icon: LucideIcon;
+  chartColor: string; // CSS variable: '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5'
+}
+
+// ── Mock API function ─────────────────────────────────────────────────────────
+
+export async function fetchFeatureCards(): Promise<FeatureCard[]> {
+  // Replace with: return fetch('/api/home/features').then(r => r.json());
+  await new Promise(resolve => setTimeout(resolve, 100));
+  return [
+    {
+      id: 'template-cli',
+      title: i18n.t('home.templateCliTitle'),
+      description: i18n.t('home.templateCliDescription'),
+      badge: i18n.t('home.templateClibadge'),
+      href: '/template',
+      Icon: FileText,
+      chartColor: '--chart-1',
+    },
+  ];
+}

package/templates/src/features/home/ui/HomeContent.tsx

@@ -11,20 +11,11 @@ import {
 } from 'xertica-ui/ui';
 import { Header } from 'xertica-ui/layout';
 import { useLayout } from 'xertica-ui/hooks';
-import { FileText } from 'lucide-react';
 import { useNavigate, Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useFeatureCards } from '../hooks/useFeatureCards';
 import { SectionErrorBoundary } from '../../../shared/error-boundary';
 
-/**
- * Home dashboard content area.
- *
- * All UI strings are translated via `useTranslation()`.
- * Feature cards are fetched via `useFeatureCards` (React Query).
- * To connect to a real API, replace `fetchFeatureCards` in
- * `features/home/data/mock.ts`.
- */
 export function HomeContent() {
   const { t } = useTranslation();
   const { sidebarExpanded, sidebarWidth } = useLayout();
@@ -42,11 +33,10 @@ export function HomeContent() {
       <Header
         showThemeToggle={true}
         showLanguageSelector={true}
-        breadcrumbs={[
-          { label: t('nav.designSystem'), href: '/home' },
-          { label: t('nav.home') },
-        ]}
-        renderLink={(href: string, props: any) => <Link to={href} {...props} />}
+        breadcrumbs={[{ label: t('nav.designSystem'), href: '/home' }, { label: t('nav.home') }]}
+        renderLink={(href: string, props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+          <Link to={href} {...props} />
+        )}
       />
 
       <main className="flex-1 overflow-hidden bg-muted">
@@ -54,61 +44,69 @@ export function HomeContent() {
           <div className="p-5 sm:p-4 md:p-6">
             <div className="max-w-6xl mx-auto space-y-8">
               <div className="space-y-2">
-                <h2>{t('home.welcome')}</h2>
+                <h2 className="text-3xl font-bold tracking-tight">{t('home.welcome')}</h2>
                 <p className="text-muted-foreground">{t('home.subtitle')}</p>
               </div>
 
               <SectionErrorBoundary>
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                {isLoading ? (
-                  <Card className="flex flex-col h-full animate-pulse">
-                    <CardHeader>
-                      <div className="h-4 bg-muted-foreground/20 rounded w-2/3" />
-                    </CardHeader>
-                    <CardContent className="flex-1">
-                      <div className="h-3 bg-muted-foreground/10 rounded w-full" />
-                    </CardContent>
-                    <CardFooter>
-                      <div className="h-9 bg-muted-foreground/10 rounded w-full" />
-                    </CardFooter>
-                  </Card>
-                ) : (
-                  featureCards.map(card => (
-                    <Card
-                      key={card.id}
-                      className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
-                    >
-                      <CardHeader>
-                        <div className="flex items-center gap-3">
-                          <div className="p-2 bg-[var(--chart-2)]/20 rounded-[var(--radius)]">
-                            <FileText className="w-6 h-6 text-[var(--chart-2)]" />
-                          </div>
-                          <div className="flex items-center gap-2">
-                            <CardTitle className="text-sm">{card.title}</CardTitle>
-                            {card.badge && (
-                              <Badge variant="default" className="text-xs">
-                                {card.badge}
-                              </Badge>
-                            )}
-                          </div>
-                        </div>
-                      </CardHeader>
-                      <CardContent className="flex-1">
-                        <p className="text-muted-foreground">{card.description}</p>
-                      </CardContent>
-                      <CardFooter>
-                        <Button
-                          variant="outline"
-                          className="w-full"
-                          onClick={() => navigate(card.href)}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                  {isLoading
+                    ? Array.from({ length: 3 }).map((_, i) => (
+                        <Card key={i} className="flex flex-col h-full animate-pulse">
+                          <CardHeader>
+                            <div className="h-4 bg-muted-foreground/20 rounded w-2/3" />
+                          </CardHeader>
+                          <CardContent className="flex-1">
+                            <div className="h-3 bg-muted-foreground/10 rounded w-full" />
+                          </CardContent>
+                          <CardFooter>
+                            <div className="h-9 bg-muted-foreground/10 rounded w-full" />
+                          </CardFooter>
+                        </Card>
+                      ))
+                    : featureCards.map(card => (
+                        <Card
+                          key={card.id}
+                          className="hover:shadow-xl transition-shadow duration-200 flex flex-col h-full"
                         >
-                          {t('common.view')}
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  ))
-                )}
-              </div>
+                          <CardHeader>
+                            <div className="flex items-center gap-3">
+                              <div
+                                className="p-2 rounded-[var(--radius)]"
+                                style={{
+                                  background: `color-mix(in srgb, var(${card.chartColor}) 20%, transparent)`,
+                                }}
+                              >
+                                <card.Icon
+                                  className="w-6 h-6"
+                                  style={{ color: `var(${card.chartColor})` }}
+                                />
+                              </div>
+                              <div className="flex items-center gap-2">
+                                <CardTitle className="text-sm">{card.title}</CardTitle>
+                                {card.badge && (
+                                  <Badge variant="default" className="text-xs">
+                                    {card.badge}
+                                  </Badge>
+                                )}
+                              </div>
+                            </div>
+                          </CardHeader>
+                          <CardContent className="flex-1">
+                            <p className="text-muted-foreground">{card.description}</p>
+                          </CardContent>
+                          <CardFooter>
+                            <Button
+                              variant="outline"
+                              className="w-full"
+                              onClick={() => navigate(card.href)}
+                            >
+                              {t('common.view')}
+                            </Button>
+                          </CardFooter>
+                        </Card>
+                      ))}
+                </div>
               </SectionErrorBoundary>
             </div>
           </div>

package/templates/src/features/template/ui/CrudTemplate.tsx

@@ -37,10 +37,7 @@ export function CrudTemplate() {
         <div className="flex p-4 border-b gap-2">
           <div className="relative w-full max-w-sm">
             <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-            <Input
-              placeholder={t('crudTemplate.searchPlaceholder')}
-              className="w-full h-9 pl-8"
-            />
+            <Input placeholder={t('crudTemplate.searchPlaceholder')} className="w-full h-9 pl-8" />
           </div>
         </div>
 

package/templates/src/features/template/ui/LoginTemplate.tsx

@@ -16,7 +16,7 @@ import { useTranslation } from 'react-i18next';
 export function LoginTemplate() {
   const { t } = useTranslation();
   return (
-    <div className="flex min-h-screen w-full items-center justify-center bg-muted/30 p-4">
+    <div className="flex h-full min-h-0 w-full items-center justify-center bg-muted/30 p-4 overflow-y-auto">
       <Card className="w-full max-w-sm">
         <CardHeader className="text-center">
           <div className="flex justify-center mb-4">

package/templates/src/features/template/ui/TemplateContent.tsx

@@ -68,7 +68,7 @@ import {
   useStepper,
 } from 'xertica-ui/ui';
 import { Header, Sidebar } from 'xertica-ui/layout';
-import { useLayout } from 'xertica-ui/hooks';
+import { useLayout, useTheme } from 'xertica-ui/hooks';
 import { toast } from 'sonner';
 import { Link } from 'react-router-dom';
 import { Trans, useTranslation } from 'react-i18next';
@@ -131,6 +131,7 @@ export function TemplateContent() {
     },
   ];
   const { sidebarExpanded, sidebarWidth } = useLayout();
+  const { disableDarkMode } = useTheme();
   const [progress, setProgress] = useState(45);
   const [sliderValue, setSliderValue] = useState([50]);
   const [switchEnabled, setSwitchEnabled] = useState(false);
@@ -611,17 +612,21 @@ export function TemplateContent() {
                         <CardDescription>{t('templates.settings.description')}</CardDescription>
                       </CardHeader>
                       <CardContent className="space-y-6">
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
-                            <Label>{t('templates.settings.darkMode')}</Label>
-                            <p className="text-muted-foreground">
-                              {t('templates.settings.darkModeDescription')}
-                            </p>
-                          </div>
-                          <Switch checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
-                        </div>
+                        {!disableDarkMode && (
+                          <>
+                            <div className="flex items-center justify-between">
+                              <div className="space-y-1">
+                                <Label>{t('templates.settings.darkMode')}</Label>
+                                <p className="text-muted-foreground">
+                                  {t('templates.settings.darkModeDescription')}
+                                </p>
+                              </div>
+                              <Switch checked={switchEnabled} onCheckedChange={setSwitchEnabled} />
+                            </div>
 
-                        <Separator />
+                            <Separator />
+                          </>
+                        )}
 
                         <div className="flex items-center justify-between">
                           <div className="space-y-1">
@@ -883,9 +888,7 @@ export function TemplateContent() {
                         </AlertDialogTrigger>
                         <AlertDialogContent className="sm:max-w-[425px]">
                           <AlertDialogHeader>
-                            <AlertDialogTitle>
-                              {t('templates.dialogs.areYouSure')}
-                            </AlertDialogTitle>
+                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
                             <AlertDialogDescription>
                               {t('templates.dialogs.deleteWarning')}
                             </AlertDialogDescription>
@@ -978,9 +981,7 @@ export function TemplateContent() {
                                           {
                                             label: t('templates.sidebar.actions.moveActive'),
                                             onClick: () =>
-                                              toast(
-                                                t('templates.sidebar.actions.moveActiveToast')
-                                              ),
+                                              toast(t('templates.sidebar.actions.moveActiveToast')),
                                           },
                                           {
                                             label: t('templates.sidebar.actions.moveMonitoring'),
@@ -1084,7 +1085,11 @@ export function TemplateContent() {
                             navigate={() => {}}
                             variant="default"
                             routes={[
-                              { path: '/home', label: t('templates.sidebar.routes.home'), icon: Home },
+                              {
+                                path: '/home',
+                                label: t('templates.sidebar.routes.home'),
+                                icon: Home,
+                              },
                               {
                                 path: '/dashboard',
                                 label: t('templates.sidebar.routes.dashboard'),
@@ -1150,7 +1155,7 @@ export function TemplateContent() {
                               disabled={!canGoPrev}
                             />
                           </PaginationItem>
-                          {items.map((item) =>
+                          {items.map(item =>
                             item.type === 'ellipsis' ? (
                               <PaginationItem key={item.key}>
                                 <PaginationEllipsis />
@@ -1249,7 +1254,10 @@ export function TemplateContent() {
                         aria-label={t('templates.enhanced.treeView.ariaLabel')}
                         defaultExpanded={['components', 'ui']}
                         onNodeSelect={node =>
-                          console.log(t('templates.enhanced.treeView.selectedConsoleLog'), node.label)
+                          console.log(
+                            t('templates.enhanced.treeView.selectedConsoleLog'),
+                            node.label
+                          )
                         }
                         className="max-w-xs border border-border rounded-[var(--radius-lg)] p-2"
                       />

package/templates/src/locales/en/pages/templates.json

@@ -239,23 +239,23 @@
       "next": "Next",
       "finish": "Finish"
     },
-      "treeView": {
-        "title": "TreeView",
-        "description": "Hierarchical navigation with <code>ariaLabel</code>, roving tabindex and WAI-ARIA keyboard (Space expands/collapses, Enter selects).",
-        "ariaLabel": "Component structure",
-        "selectedConsoleLog": "Selected:",
-        "nodes": {
-          "components": "Components",
-          "ui": "UI",
-          "button": "Button",
-          "input": "Input",
-          "pagination": "Pagination",
-          "layout": "Layout",
-          "sidebar": "Sidebar",
-          "header": "Header",
-          "hooks": "Hooks"
-        }
-      },
+    "treeView": {
+      "title": "TreeView",
+      "description": "Hierarchical navigation with <code>ariaLabel</code>, roving tabindex and WAI-ARIA keyboard (Space expands/collapses, Enter selects).",
+      "ariaLabel": "Component structure",
+      "selectedConsoleLog": "Selected:",
+      "nodes": {
+        "components": "Components",
+        "ui": "UI",
+        "button": "Button",
+        "input": "Input",
+        "pagination": "Pagination",
+        "layout": "Layout",
+        "sidebar": "Sidebar",
+        "header": "Header",
+        "hooks": "Hooks"
+      }
+    },
     "richText": {
       "title": "RichTextEditor",
       "description": "Rich text editor with <code>role=\"textbox\"</code>, <code>aria-multiline</code> and counters via <code>useState</code> (without IIFE).",

package/templates/src/locales/es/pages/templates.json

@@ -239,23 +239,23 @@
       "next": "Siguiente",
       "finish": "Finalizar"
     },
-      "treeView": {
-        "title": "TreeView",
-        "description": "Navegación jerárquica con <code>ariaLabel</code>, roving tabindex y teclado WAI-ARIA (Espacio expande/colapsa, Enter selecciona).",
-        "ariaLabel": "Estructura de componentes",
-        "selectedConsoleLog": "Seleccionado:",
-        "nodes": {
-          "components": "Componentes",
-          "ui": "UI",
-          "button": "Botón",
-          "input": "Input",
-          "pagination": "Paginación",
-          "layout": "Layout",
-          "sidebar": "Sidebar",
-          "header": "Header",
-          "hooks": "Hooks"
-        }
-      },
+    "treeView": {
+      "title": "TreeView",
+      "description": "Navegación jerárquica con <code>ariaLabel</code>, roving tabindex y teclado WAI-ARIA (Espacio expande/colapsa, Enter selecciona).",
+      "ariaLabel": "Estructura de componentes",
+      "selectedConsoleLog": "Seleccionado:",
+      "nodes": {
+        "components": "Componentes",
+        "ui": "UI",
+        "button": "Botón",
+        "input": "Input",
+        "pagination": "Paginación",
+        "layout": "Layout",
+        "sidebar": "Sidebar",
+        "header": "Header",
+        "hooks": "Hooks"
+      }
+    },
     "richText": {
       "title": "RichTextEditor",
       "description": "Editor rich text con <code>role=\"textbox\"</code>, <code>aria-multiline</code> y contadores via <code>useState</code> (sin IIFE).",

package/templates/src/locales/pt-BR/pages/templates.json

@@ -239,23 +239,23 @@
       "next": "Próximo",
       "finish": "Concluir"
     },
-      "treeView": {
-        "title": "TreeView",
-        "description": "Navegação hierárquica com <code>ariaLabel</code>, roving tabindex e teclado WAI-ARIA (Espaço expande/colapsa, Enter seleciona).",
-        "ariaLabel": "Estrutura de componentes",
-        "selectedConsoleLog": "Selecionado:",
-        "nodes": {
-          "components": "Componentes",
-          "ui": "UI",
-          "button": "Botão",
-          "input": "Input",
-          "pagination": "Paginação",
-          "layout": "Layout",
-          "sidebar": "Sidebar",
-          "header": "Header",
-          "hooks": "Hooks"
-        }
-      },
+    "treeView": {
+      "title": "TreeView",
+      "description": "Navegação hierárquica com <code>ariaLabel</code>, roving tabindex e teclado WAI-ARIA (Espaço expande/colapsa, Enter seleciona).",
+      "ariaLabel": "Estrutura de componentes",
+      "selectedConsoleLog": "Selecionado:",
+      "nodes": {
+        "components": "Componentes",
+        "ui": "UI",
+        "button": "Botão",
+        "input": "Input",
+        "pagination": "Paginação",
+        "layout": "Layout",
+        "sidebar": "Sidebar",
+        "header": "Header",
+        "hooks": "Hooks"
+      }
+    },
     "richText": {
       "title": "RichTextEditor",
       "description": "Editor rich text com <code>role=\"textbox\"</code>, <code>aria-multiline</code> e contadores via <code>useState</code> (sem IIFE).",