xertica-ui 2.5.3 → 2.6.0

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

@@ -1,1321 +1,1321 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  Input,
-  Label,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  Badge,
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  Checkbox,
-  RadioGroup,
-  RadioGroupItem,
-  Switch,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-  Textarea,
-  Progress,
-  Separator,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Slider,
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogAction,
-  AlertDialogCancel,
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  PaginationEllipsis,
-  Stepper,
-  Step,
-  TreeView,
-  RichTextEditor,
-  usePagination,
-  useStepper,
-} from 'xertica-ui/ui';
-import { Header, Sidebar } from 'xertica-ui/layout';
-import { useLayout, useTheme } from 'xertica-ui/hooks';
-import { toast } from 'sonner';
-import { Link } from 'react-router-dom';
-import { Trans, useTranslation } from 'react-i18next';
-import {
-  Settings,
-  User,
-  Mail,
-  Phone,
-  Calendar,
-  Search,
-  PanelLeft,
-  Home,
-  Users,
-  Plus,
-  Trash2,
-  Archive,
-  ArrowRightLeft,
-  FileEdit,
-  Clock,
-  Map,
-} from 'lucide-react';
-
-export function TemplateContent() {
-  const { t } = useTranslation();
-
-  // ── TreeView demo data (built inside the component so labels react to language switches) ──
-  const treeData = [
-    {
-      id: 'components',
-      label: t('templates.enhanced.treeView.nodes.components'),
-      children: [
-        {
-          id: 'ui',
-          label: t('templates.enhanced.treeView.nodes.ui'),
-          children: [
-            { id: 'button', label: t('templates.enhanced.treeView.nodes.button') },
-            { id: 'input', label: t('templates.enhanced.treeView.nodes.input') },
-            { id: 'pagination', label: t('templates.enhanced.treeView.nodes.pagination') },
-          ],
-        },
-        {
-          id: 'layout',
-          label: t('templates.enhanced.treeView.nodes.layout'),
-          children: [
-            { id: 'sidebar', label: t('templates.enhanced.treeView.nodes.sidebar') },
-            { id: 'header', label: t('templates.enhanced.treeView.nodes.header') },
-          ],
-        },
-      ],
-    },
-    {
-      id: 'hooks',
-      label: t('templates.enhanced.treeView.nodes.hooks'),
-      // Hook identifiers stay as code — not translated.
-      children: [
-        { id: 'use-pagination', label: 'usePagination' },
-        { id: 'use-stepper', label: 'useStepper' },
-        { id: 'use-tree-view', label: 'useTreeView' },
-      ],
-    },
-  ];
-  const { sidebarExpanded, sidebarWidth } = useLayout();
-  const { disableDarkMode } = useTheme();
-  const [progress, setProgress] = useState(45);
-  const [sliderValue, setSliderValue] = useState([50]);
-  const [switchEnabled, setSwitchEnabled] = useState(false);
-  const [richText, setRichText] = useState('');
-
-  // Dialog demo inputs (controlled so they re-localise on language switch).
-  // Seeded lazily from `t(...)` so the initial value reflects the current
-  // language at first render; subsequent language switches don't overwrite
-  // user edits.
-  const [dialogName, setDialogName] = useState(() => t('templates.dialogs.nameDefaultValue'));
-  const [dialogUsername, setDialogUsername] = useState(() =>
-    t('templates.dialogs.usernameDefaultValue')
-  );
-
-  // ── Pagination demo ─────────────────────────────────────────────────────────
-  const { currentPage, totalPages, items, next, prev, goTo, canGoPrev, canGoNext } = usePagination({
-    totalItems: 120,
-    pageSize: 10,
-  });
-
-  // ── Stepper demo ────────────────────────────────────────────────────────────
-  const {
-    currentStep,
-    next: stepNext,
-    prev: stepPrev,
-    isFirstStep,
-    isLastStep,
-  } = useStepper({ totalSteps: 3 });
-
-  const handleFormSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    toast.success(t('templates.formSubmitSuccess'));
-  };
-
-  return (
-    <div
-      style={{
-        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
-      }}
-      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
-    >
-      <Header
-        showThemeToggle={true}
-        showLanguageSelector={true}
-        breadcrumbs={[
-          { label: t('nav.designSystem'), href: '/home' },
-          { label: t('templates.breadcrumb') },
-        ]}
-        renderLink={(href: string, props: any) => <Link to={href} {...props} />}
-      />
-
-      <main className="flex-1 overflow-hidden bg-muted">
-        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
-          <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('templates.title')}</h2>
-                <p className="text-muted-foreground">{t('templates.subtitle')}</p>
-              </div>
-
-              {/* Alert Examples */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <Alert variant="info">
-                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
-                  </Alert>
-
-                  <Alert variant="destructive">
-                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
-                  </Alert>
-
-                  <Alert variant="success">
-                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
-                  </Alert>
-
-                  <Alert variant="warning">
-                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
-                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
-                  </Alert>
-                </div>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Cards & Tabs */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
-
-                <Tabs defaultValue="overview" className="w-full">
-                  <TabsList className="grid w-full grid-cols-4">
-                    <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
-                    <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
-                    <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
-                    <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
-                  </TabsList>
-
-                  {/* Overview Tab */}
-                  <TabsContent value="overview" className="space-y-4">
-                    <div className="grid gap-4 md:grid-cols-3">
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>{t('stats.totalUsers')}</CardTitle>
-                          <CardDescription>{t('stats.last30Days')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="text-foreground">
-                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
-                              {t('templates.overview.totalUsersDemoValue')}
-                            </span>
-                            <Badge variant="default" className="ml-2">
-                              +12%
-                            </Badge>
-                          </div>
-                        </CardContent>
-                      </Card>
-
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>{t('stats.totalRevenue')}</CardTitle>
-                          <CardDescription>{t('stats.currentMonth')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="text-foreground">
-                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
-                              {t('templates.overview.revenueDemoValue')}
-                            </span>
-                            <Badge variant="secondary" className="ml-2">
-                              +8%
-                            </Badge>
-                          </div>
-                        </CardContent>
-                      </Card>
-
-                      <Card>
-                        <CardHeader>
-                          <CardTitle>{t('stats.conversionRate')}</CardTitle>
-                          <CardDescription>{t('stats.currentWeek')}</CardDescription>
-                        </CardHeader>
-                        <CardContent>
-                          <div className="text-foreground">
-                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
-                              {t('templates.overview.conversionRateDemoValue')}
-                            </span>
-                            <Badge variant="outline" className="ml-2">
-                              -2%
-                            </Badge>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    </div>
-
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
-                        <CardDescription>
-                          {t('templates.overview.progressDescription')}
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-6">
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between">
-                            <Label>{t('templates.overview.projectProgress')}</Label>
-                            <span className="[font-size:var(--text-small)] text-muted-foreground">
-                              {progress}%
-                            </span>
-                          </div>
-                          <Progress value={progress} className="w-full" />
-                          <div className="flex gap-2">
-                            <Button
-                              size="sm"
-                              onClick={() => setProgress(Math.max(0, progress - 10))}
-                            >
-                              -10%
-                            </Button>
-                            <Button
-                              size="sm"
-                              onClick={() => setProgress(Math.min(100, progress + 10))}
-                            >
-                              +10%
-                            </Button>
-                          </div>
-                        </div>
-
-                        <Separator />
-
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between">
-                            <Label>{t('templates.overview.volume')}</Label>
-                            <span className="[font-size:var(--text-small)] text-muted-foreground">
-                              {sliderValue[0]}%
-                            </span>
-                          </div>
-                          <Slider
-                            value={sliderValue}
-                            onValueChange={setSliderValue}
-                            min={0}
-                            max={100}
-                            step={1}
-                            className="w-full"
-                          />
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </TabsContent>
-
-                  {/* Forms Tab */}
-                  <TabsContent value="forms" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
-                        <CardDescription>
-                          {t('templates.forms.registrationDescription')}
-                        </CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <form onSubmit={handleFormSubmit} className="space-y-4">
-                          <div className="grid gap-4 md:grid-cols-2">
-                            <div className="space-y-2">
-                              <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
-                              <Input
-                                id="firstName"
-                                placeholder={t('templates.forms.firstNamePlaceholder')}
-                              />
-                            </div>
-                            <div className="space-y-2">
-                              <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
-                              <Input
-                                id="lastName"
-                                placeholder={t('templates.forms.lastNamePlaceholder')}
-                              />
-                            </div>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="email">{t('templates.forms.email')}</Label>
-                            <div className="relative">
-                              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                              <Input
-                                id="email"
-                                type="email"
-                                placeholder={t('templates.forms.emailPlaceholder')}
-                                className="pl-10"
-                              />
-                            </div>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
-                            <div className="relative">
-                              <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                              <Input
-                                id="phone"
-                                type="tel"
-                                placeholder={t('templates.forms.phonePlaceholder')}
-                                className="pl-10"
-                              />
-                            </div>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="role">{t('templates.forms.role')}</Label>
-                            <Select>
-                              <SelectTrigger id="role">
-                                <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="developer">
-                                  {t('templates.forms.roles.developer')}
-                                </SelectItem>
-                                <SelectItem value="designer">
-                                  {t('templates.forms.roles.designer')}
-                                </SelectItem>
-                                <SelectItem value="manager">
-                                  {t('templates.forms.roles.manager')}
-                                </SelectItem>
-                                <SelectItem value="analyst">
-                                  {t('templates.forms.roles.analyst')}
-                                </SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </div>
-
-                          <div className="space-y-2">
-                            <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
-                            <Textarea
-                              id="bio"
-                              placeholder={t('templates.forms.bioPlaceholder')}
-                              rows={4}
-                            />
-                          </div>
-
-                          <Separator />
-
-                          <div className="space-y-4">
-                            <h4>{t('templates.forms.preferences')}</h4>
-
-                            <div className="space-y-3">
-                              <div className="flex items-center space-x-2">
-                                <Checkbox id="newsletter" />
-                                <Label htmlFor="newsletter" className="font-normal">
-                                  {t('templates.forms.newsletter')}
-                                </Label>
-                              </div>
-
-                              <div className="flex items-center space-x-2">
-                                <Checkbox id="notifications" />
-                                <Label htmlFor="notifications" className="font-normal">
-                                  {t('templates.forms.pushNotifications')}
-                                </Label>
-                              </div>
-
-                              <div className="flex items-center space-x-2">
-                                <Checkbox id="updates" />
-                                <Label htmlFor="updates" className="font-normal">
-                                  {t('templates.forms.featureUpdates')}
-                                </Label>
-                              </div>
-                            </div>
-
-                            <Separator />
-
-                            <div className="space-y-3">
-                              <Label>{t('templates.forms.accountType')}</Label>
-                              <RadioGroup defaultValue="personal">
-                                <div className="flex items-center space-x-2">
-                                  <RadioGroupItem value="personal" id="personal" />
-                                  <Label htmlFor="personal" className="font-normal">
-                                    {t('templates.forms.accountPersonal')}
-                                  </Label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <RadioGroupItem value="business" id="business" />
-                                  <Label htmlFor="business" className="font-normal">
-                                    {t('templates.forms.accountBusiness')}
-                                  </Label>
-                                </div>
-                                <div className="flex items-center space-x-2">
-                                  <RadioGroupItem value="enterprise" id="enterprise" />
-                                  <Label htmlFor="enterprise" className="font-normal">
-                                    {t('templates.forms.accountEnterprise')}
-                                  </Label>
-                                </div>
-                              </RadioGroup>
-                            </div>
-                          </div>
-                        </form>
-                      </CardContent>
-                      <CardFooter className="flex justify-between">
-                        <Button variant="outline">{t('templates.forms.cancel')}</Button>
-                        <Button onClick={handleFormSubmit}>
-                          {t('templates.forms.createAccount')}
-                        </Button>
-                      </CardFooter>
-                    </Card>
-                  </TabsContent>
-
-                  {/* Data Tab */}
-                  <TabsContent value="data" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.data.title')}</CardTitle>
-                        <CardDescription>{t('templates.data.description')}</CardDescription>
-                      </CardHeader>
-                      <CardContent>
-                        <div className="mb-4">
-                          <div className="relative">
-                            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                            <Input
-                              placeholder={t('templates.data.searchPlaceholder')}
-                              className="pl-10"
-                            />
-                          </div>
-                        </div>
-
-                        <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
-                          <Table>
-                            <TableHeader>
-                              <TableRow>
-                                <TableHead>{t('templates.data.headers.name')}</TableHead>
-                                <TableHead>{t('templates.data.headers.email')}</TableHead>
-                                <TableHead>{t('templates.data.headers.role')}</TableHead>
-                                <TableHead>{t('templates.data.headers.status')}</TableHead>
-                                <TableHead className="text-right">
-                                  {t('templates.data.headers.actions')}
-                                </TableHead>
-                              </TableRow>
-                            </TableHeader>
-                            <TableBody>
-                              <TableRow>
-                                <TableCell>Ana Silva</TableCell>
-                                <TableCell>{`ana.silva@${t('templates.data.demoEmailDomain')}`}</TableCell>
-                                <TableCell>{t('templates.data.roles.developerFemale')}</TableCell>
-                                <TableCell>
-                                  <Badge variant="default">
-                                    {t('templates.data.status.active')}
-                                  </Badge>
-                                </TableCell>
-                                <TableCell className="text-right">
-                                  <Button variant="ghost" size="sm">
-                                    {t('templates.data.edit')}
-                                  </Button>
-                                </TableCell>
-                              </TableRow>
-                              <TableRow>
-                                <TableCell>Bruno Costa</TableCell>
-                                <TableCell>{`bruno.costa@${t('templates.data.demoEmailDomain')}`}</TableCell>
-                                <TableCell>{t('templates.data.roles.designer')}</TableCell>
-                                <TableCell>
-                                  <Badge variant="default">
-                                    {t('templates.data.status.active')}
-                                  </Badge>
-                                </TableCell>
-                                <TableCell className="text-right">
-                                  <Button variant="ghost" size="sm">
-                                    {t('templates.data.edit')}
-                                  </Button>
-                                </TableCell>
-                              </TableRow>
-                              <TableRow>
-                                <TableCell>Carla Oliveira</TableCell>
-                                <TableCell>{`carla.oliveira@${t('templates.data.demoEmailDomain')}`}</TableCell>
-                                <TableCell>{t('templates.data.roles.manager')}</TableCell>
-                                <TableCell>
-                                  <Badge variant="secondary">
-                                    {t('templates.data.status.away')}
-                                  </Badge>
-                                </TableCell>
-                                <TableCell className="text-right">
-                                  <Button variant="ghost" size="sm">
-                                    {t('templates.data.edit')}
-                                  </Button>
-                                </TableCell>
-                              </TableRow>
-                              <TableRow>
-                                <TableCell>Diego Santos</TableCell>
-                                <TableCell>{`diego.santos@${t('templates.data.demoEmailDomain')}`}</TableCell>
-                                <TableCell>{t('templates.data.roles.analyst')}</TableCell>
-                                <TableCell>
-                                  <Badge variant="outline">
-                                    {t('templates.data.status.inactive')}
-                                  </Badge>
-                                </TableCell>
-                                <TableCell className="text-right">
-                                  <Button variant="ghost" size="sm">
-                                    {t('templates.data.edit')}
-                                  </Button>
-                                </TableCell>
-                              </TableRow>
-                            </TableBody>
-                          </Table>
-                        </div>
-                      </CardContent>
-                      <CardFooter className="flex justify-between items-center">
-                        <p className="text-muted-foreground">
-                          {t('templates.data.showing', { count: 4, total: 127 })}
-                        </p>
-                        <div className="flex gap-2">
-                          <Button variant="outline" size="sm">
-                            {t('templates.data.previous')}
-                          </Button>
-                          <Button variant="outline" size="sm">
-                            {t('templates.data.next')}
-                          </Button>
-                        </div>
-                      </CardFooter>
-                    </Card>
-                  </TabsContent>
-
-                  {/* Settings Tab */}
-                  <TabsContent value="settings" className="space-y-4">
-                    <Card>
-                      <CardHeader>
-                        <CardTitle>{t('templates.settings.title')}</CardTitle>
-                        <CardDescription>{t('templates.settings.description')}</CardDescription>
-                      </CardHeader>
-                      <CardContent className="space-y-6">
-                        {!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 />
-                          </>
-                        )}
-
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
-                            <Label>{t('templates.settings.emailNotifications')}</Label>
-                            <p className="text-muted-foreground">
-                              {t('templates.settings.emailNotificationsDescription')}
-                            </p>
-                          </div>
-                          <Switch defaultChecked />
-                        </div>
-
-                        <Separator />
-
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
-                            <Label>{t('templates.settings.pushNotifications')}</Label>
-                            <p className="text-muted-foreground">
-                              {t('templates.settings.pushNotificationsDescription')}
-                            </p>
-                          </div>
-                          <Switch />
-                        </div>
-
-                        <Separator />
-
-                        <div className="space-y-3">
-                          <Label>{t('templates.settings.language')}</Label>
-                          <Select defaultValue="pt-br">
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="pt-br">
-                                {t('templates.settings.languages.ptBR')}
-                              </SelectItem>
-                              <SelectItem value="en">
-                                {t('templates.settings.languages.en')}
-                              </SelectItem>
-                              <SelectItem value="es">
-                                {t('templates.settings.languages.es')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-
-                        <Separator />
-
-                        <div className="space-y-3">
-                          <Label>{t('templates.settings.timezone')}</Label>
-                          <Select defaultValue="america-sao-paulo">
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                              <SelectItem value="america-sao-paulo">
-                                {t('templates.settings.timezones.saoPaulo')}
-                              </SelectItem>
-                              <SelectItem value="america-new-york">
-                                {t('templates.settings.timezones.newYork')}
-                              </SelectItem>
-                              <SelectItem value="europe-london">
-                                {t('templates.settings.timezones.london')}
-                              </SelectItem>
-                            </SelectContent>
-                          </Select>
-                        </div>
-                      </CardContent>
-                      <CardFooter className="flex justify-between">
-                        <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
-                        <Button>{t('templates.settings.saveChanges')}</Button>
-                      </CardFooter>
-                    </Card>
-                  </TabsContent>
-                </Tabs>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Button Variants */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
-                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-6">
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.variants')}</Label>
-                      <div className="flex flex-wrap gap-3">
-                        <Button variant="default">
-                          {t('templates.buttons.variantLabels.default')}
-                        </Button>
-                        <Button variant="secondary">
-                          {t('templates.buttons.variantLabels.secondary')}
-                        </Button>
-                        <Button variant="outline">
-                          {t('templates.buttons.variantLabels.outline')}
-                        </Button>
-                        <Button variant="ghost">
-                          {t('templates.buttons.variantLabels.ghost')}
-                        </Button>
-                        <Button variant="link">{t('templates.buttons.variantLabels.link')}</Button>
-                        <Button variant="destructive">
-                          {t('templates.buttons.variantLabels.destructive')}
-                        </Button>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.sizes')}</Label>
-                      <div className="flex flex-wrap items-center gap-3">
-                        <Button size="sm">{t('templates.buttons.sizeLabels.small')}</Button>
-                        <Button size="default">{t('templates.buttons.sizeLabels.default')}</Button>
-                        <Button size="lg">{t('templates.buttons.sizeLabels.large')}</Button>
-                        <Button size="icon">
-                          <Settings className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.withIcons')}</Label>
-                      <div className="flex flex-wrap gap-3">
-                        <Button>
-                          <User className="mr-2 h-4 w-4" />
-                          {t('templates.buttons.profile')}
-                        </Button>
-                        <Button variant="secondary">
-                          <Mail className="mr-2 h-4 w-4" />
-                          {t('templates.buttons.messages')}
-                        </Button>
-                        <Button variant="outline">
-                          <Calendar className="mr-2 h-4 w-4" />
-                          {t('templates.buttons.schedule')}
-                        </Button>
-                      </div>
-                    </div>
-
-                    <Separator />
-
-                    <div className="space-y-3">
-                      <Label>{t('templates.buttons.states')}</Label>
-                      <div className="flex flex-wrap gap-3">
-                        <Button disabled>{t('templates.buttons.disabled')}</Button>
-                        <Button variant="outline" disabled>
-                          {t('templates.buttons.outlineDisabled')}
-                        </Button>
-                      </div>
-                    </div>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Badges */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.badges.title')}</CardTitle>
-                    <CardDescription>{t('templates.badges.description')}</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="flex flex-wrap gap-3">
-                      <Badge variant="default">{t('templates.badges.labels.default')}</Badge>
-                      <Badge variant="secondary">{t('templates.badges.labels.secondary')}</Badge>
-                      <Badge variant="outline">{t('templates.badges.labels.outline')}</Badge>
-                      <Badge variant="destructive">
-                        {t('templates.badges.labels.destructive')}
-                      </Badge>
-                      <Badge className="bg-success text-success-foreground">
-                        {t('templates.badges.labels.success')}
-                      </Badge>
-                      <Badge className="bg-warning text-warning-foreground">
-                        {t('templates.badges.labels.warning')}
-                      </Badge>
-                      <Badge className="bg-info text-info-foreground">
-                        {t('templates.badges.labels.info')}
-                      </Badge>
-                    </div>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Dialogs */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
-                <div className="grid gap-4 md:grid-cols-2">
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
-                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
-                    </CardHeader>
-                    <CardContent className="flex justify-center py-6">
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
-                        </DialogTrigger>
-                        <DialogContent className="sm:max-w-[425px]">
-                          <DialogHeader>
-                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
-                            <DialogDescription>
-                              {t('templates.dialogs.editProfileDescription')}
-                            </DialogDescription>
-                          </DialogHeader>
-                          <div className="grid gap-4 py-4">
-                            <div className="grid grid-cols-4 items-center gap-4">
-                              <Label htmlFor="name" className="text-right">
-                                {t('templates.dialogs.name')}
-                              </Label>
-                              <Input
-                                id="name"
-                                value={dialogName}
-                                onChange={e => setDialogName(e.target.value)}
-                                className="col-span-3"
-                              />
-                            </div>
-                            <div className="grid grid-cols-4 items-center gap-4">
-                              <Label htmlFor="username" className="text-right">
-                                {t('templates.dialogs.username')}
-                              </Label>
-                              <Input
-                                id="username"
-                                value={dialogUsername}
-                                onChange={e => setDialogUsername(e.target.value)}
-                                className="col-span-3"
-                              />
-                            </div>
-                          </div>
-                          <DialogFooter>
-                            <Button type="submit">{t('templates.dialogs.update')}</Button>
-                          </DialogFooter>
-                        </DialogContent>
-                      </Dialog>
-                    </CardContent>
-                  </Card>
-
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
-                      <CardDescription>
-                        {t('templates.dialogs.alertDialogDescription')}
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="flex justify-center py-6">
-                      <AlertDialog>
-                        <AlertDialogTrigger asChild>
-                          <Button variant="destructive">
-                            {t('templates.dialogs.deleteAccount')}
-                          </Button>
-                        </AlertDialogTrigger>
-                        <AlertDialogContent className="sm:max-w-[425px]">
-                          <AlertDialogHeader>
-                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
-                            <AlertDialogDescription>
-                              {t('templates.dialogs.deleteWarning')}
-                            </AlertDialogDescription>
-                          </AlertDialogHeader>
-                          <AlertDialogFooter>
-                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
-                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
-                              {t('templates.dialogs.continue')}
-                            </AlertDialogAction>
-                          </AlertDialogFooter>
-                        </AlertDialogContent>
-                      </AlertDialog>
-                    </CardContent>
-                  </Card>
-                </div>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* Sidebar Variations */}
-              <section>
-                <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
-                <Card>
-                  <CardHeader>
-                    <CardTitle>{t('templates.sidebar.title')}</CardTitle>
-                    <CardDescription>{t('templates.sidebar.description')}</CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Tabs defaultValue="assistant" className="w-full">
-                      <TabsList className="mb-4">
-                        <TabsTrigger value="assistant">
-                          {t('templates.sidebar.assistantMode')}
-                        </TabsTrigger>
-                        <TabsTrigger value="default">
-                          {t('templates.sidebar.defaultMode')}
-                        </TabsTrigger>
-                      </TabsList>
-
-                      <TabsContent value="assistant">
-                        <div
-                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-                          style={{ transform: 'translateZ(0)' }}
-                        >
-                          <Sidebar
-                            expanded={true}
-                            width={sidebarWidth}
-                            onToggle={() => {}}
-                            user={{ email: 'admin@xertica.com' }}
-                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
-                            location={{ pathname: '/assistant/current' }}
-                            navigate={() => {}}
-                            variant="assistant"
-                            search={{
-                              show: true,
-                              placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
-                            }}
-                            fixedArea={{
-                              show: true,
-                              content: (
-                                <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
-                                  <Plus className="w-4 h-4 mr-2" />
-                                  {t('templates.sidebar.newConversation')}
-                                </Button>
-                              ),
-                            }}
-                            navigationGroups={[
-                              {
-                                id: 'recent',
-                                label: t('templates.sidebar.recent'),
-                                icon: Clock,
-                                items: [
-                                  {
-                                    path: '/assistant/refatoracao',
-                                    label: t('templates.sidebar.items.sidebarRefactor'),
-                                    icon: PanelLeft,
-                                    description: t(
-                                      'templates.sidebar.items.sidebarRefactorDescription'
-                                    ),
-                                    actions: [
-                                      {
-                                        label: t('templates.sidebar.actions.rename'),
-                                        icon: FileEdit,
-                                        onClick: () =>
-                                          toast(t('templates.sidebar.actions.renameToast')),
-                                      },
-                                      {
-                                        label: t('templates.sidebar.actions.move'),
-                                        icon: ArrowRightLeft,
-                                        children: [
-                                          {
-                                            label: t('templates.sidebar.actions.moveActive'),
-                                            onClick: () =>
-                                              toast(t('templates.sidebar.actions.moveActiveToast')),
-                                          },
-                                          {
-                                            label: t('templates.sidebar.actions.moveMonitoring'),
-                                            onClick: () =>
-                                              toast(
-                                                t('templates.sidebar.actions.moveMonitoringToast')
-                                              ),
-                                          },
-                                          {
-                                            label: t('templates.sidebar.actions.moveArchive'),
-                                            onClick: () =>
-                                              toast(
-                                                t('templates.sidebar.actions.moveArchiveToast')
-                                              ),
-                                          },
-                                        ],
-                                      },
-                                      {
-                                        label: t('templates.sidebar.actions.clear'),
-                                        icon: Trash2,
-                                        onClick: () =>
-                                          toast(t('templates.sidebar.actions.clearToast')),
-                                        variant: 'destructive',
-                                      },
-                                    ],
-                                  },
-                                ],
-                              },
-                              {
-                                id: 'projects',
-                                label: t('templates.sidebar.constructionMonitoring'),
-                                icon: Map,
-                                actions: [
-                                  {
-                                    label: t('templates.sidebar.actions.newCategory'),
-                                    icon: Plus,
-                                    onClick: () =>
-                                      toast(t('templates.sidebar.actions.newCategoryToast')),
-                                  },
-                                  {
-                                    label: t('templates.sidebar.actions.archiveGroup'),
-                                    icon: Archive,
-                                    onClick: () =>
-                                      toast(t('templates.sidebar.actions.archiveGroupToast')),
-                                  },
-                                ],
-                                items: [
-                                  {
-                                    path: '/assistant/br163',
-                                    label: t('templates.sidebar.items.br163Restoration'),
-                                    icon: () => (
-                                      <div className="w-2 h-2 rounded-full bg-yellow-500" />
-                                    ),
-                                    description: (
-                                      <div className="space-y-1.5 min-w-[160px]">
-                                        <Progress
-                                          value={67}
-                                          className="h-1.5 bg-sidebar-foreground/10"
-                                        />
-                                        <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
-                                          <span>{t('templates.sidebar.items.br163Location')}</span>
-                                          <span>67%</span>
-                                        </div>
-                                      </div>
-                                    ),
-                                  },
-                                ],
-                              },
-                            ]}
-                          />
-                          <div
-                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-                            style={{ left: `${sidebarWidth}px` }}
-                          >
-                            <p className="text-muted-foreground text-center">
-                              {t('templates.sidebar.assistantContent')}
-                            </p>
-                          </div>
-                        </div>
-                      </TabsContent>
-
-                      <TabsContent value="default">
-                        <div
-                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-                          style={{ transform: 'translateZ(0)' }}
-                        >
-                          <Sidebar
-                            expanded={true}
-                            width={sidebarWidth}
-                            onToggle={() => {}}
-                            user={{
-                              name: 'Ariel Santos',
-                              email: 'admin@xertica.com',
-                              avatar: 'https://github.com/shadcn.png',
-                            }}
-                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
-                            onSettingsClick={() =>
-                              toast(t('templates.sidebar.settingsClickedToast'))
-                            }
-                            location={{ pathname: '/home' }}
-                            navigate={() => {}}
-                            variant="default"
-                            routes={[
-                              {
-                                path: '/home',
-                                label: t('templates.sidebar.routes.home'),
-                                icon: Home,
-                              },
-                              {
-                                path: '/dashboard',
-                                label: t('templates.sidebar.routes.dashboard'),
-                                icon: Users,
-                              },
-                              {
-                                path: '/settings',
-                                label: t('templates.sidebar.routes.settings'),
-                                icon: Settings,
-                              },
-                            ]}
-                          />
-                          <div
-                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-                            style={{ left: `${sidebarWidth}px` }}
-                          >
-                            <p className="text-muted-foreground text-center">
-                              {t('templates.sidebar.defaultContent')}
-                            </p>
-                          </div>
-                        </div>
-                      </TabsContent>
-                    </Tabs>
-                  </CardContent>
-                </Card>
-              </section>
-
-              <Separator className="my-8" />
-
-              {/* ── v2.2.1 Components ──────────────────────────────────── */}
-              <Separator className="my-8" />
-
-              <section>
-                <h3 className="mb-4">{t('templates.sections.enhancedComponents')}</h3>
-                <div className="space-y-6">
-                  {/* Pagination com disabled */}
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.enhanced.pagination.title')}</CardTitle>
-                      <CardDescription>
-                        <Trans
-                          i18nKey="templates.enhanced.pagination.description"
-                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
-                        />
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <p className="text-sm text-muted-foreground">
-                        {t('templates.enhanced.pagination.pageOfTotal', {
-                          current: currentPage,
-                          total: totalPages,
-                        })}
-                      </p>
-                      <Pagination>
-                        <PaginationContent>
-                          <PaginationItem>
-                            <PaginationPrevious
-                              href="#"
-                              onClick={e => {
-                                e.preventDefault();
-                                prev();
-                              }}
-                              disabled={!canGoPrev}
-                            />
-                          </PaginationItem>
-                          {items.map(item =>
-                            item.type === 'ellipsis' ? (
-                              <PaginationItem key={item.key}>
-                                <PaginationEllipsis />
-                              </PaginationItem>
-                            ) : (
-                              <PaginationItem key={item.page}>
-                                <PaginationLink
-                                  href="#"
-                                  isActive={item.page === currentPage}
-                                  onClick={e => {
-                                    e.preventDefault();
-                                    goTo(item.page);
-                                  }}
-                                >
-                                  {item.page}
-                                </PaginationLink>
-                              </PaginationItem>
-                            )
-                          )}
-                          <PaginationItem>
-                            <PaginationNext
-                              href="#"
-                              onClick={e => {
-                                e.preventDefault();
-                                next();
-                              }}
-                              disabled={!canGoNext}
-                            />
-                          </PaginationItem>
-                        </PaginationContent>
-                      </Pagination>
-                    </CardContent>
-                  </Card>
-
-                  {/* Stepper com ARIA */}
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.enhanced.stepper.title')}</CardTitle>
-                      <CardDescription>
-                        <Trans
-                          i18nKey="templates.enhanced.stepper.description"
-                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
-                        />
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="space-y-4">
-                      <Stepper currentStep={currentStep}>
-                        <Step
-                          step={1}
-                          label={t('templates.enhanced.stepper.step1Label')}
-                          description={t('templates.enhanced.stepper.step1Description')}
-                        />
-                        <Step
-                          step={2}
-                          label={t('templates.enhanced.stepper.step2Label')}
-                          description={t('templates.enhanced.stepper.step2Description')}
-                        />
-                        <Step
-                          step={3}
-                          label={t('templates.enhanced.stepper.step3Label')}
-                          description={t('templates.enhanced.stepper.step3Description')}
-                        />
-                      </Stepper>
-                      <div className="flex gap-2 pt-2">
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          onClick={stepPrev}
-                          disabled={isFirstStep}
-                        >
-                          {t('templates.enhanced.stepper.previous')}
-                        </Button>
-                        <Button size="sm" onClick={stepNext} disabled={isLastStep}>
-                          {isLastStep
-                            ? t('templates.enhanced.stepper.finish')
-                            : t('templates.enhanced.stepper.next')}
-                        </Button>
-                      </div>
-                    </CardContent>
-                  </Card>
-
-                  {/* TreeView com ariaLabel */}
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.enhanced.treeView.title')}</CardTitle>
-                      <CardDescription>
-                        <Trans
-                          i18nKey="templates.enhanced.treeView.description"
-                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
-                        />
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
-                      <TreeView
-                        data={treeData}
-                        aria-label={t('templates.enhanced.treeView.ariaLabel')}
-                        defaultExpanded={['components', 'ui']}
-                        onNodeSelect={node =>
-                          console.log(
-                            t('templates.enhanced.treeView.selectedConsoleLog'),
-                            node.label
-                          )
-                        }
-                        className="max-w-xs border border-border rounded-[var(--radius-lg)] p-2"
-                      />
-                    </CardContent>
-                  </Card>
-
-                  {/* RichTextEditor sem Auto-save */}
-                  <Card>
-                    <CardHeader>
-                      <CardTitle>{t('templates.enhanced.richText.title')}</CardTitle>
-                      <CardDescription>
-                        <Trans
-                          i18nKey="templates.enhanced.richText.description"
-                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
-                        />
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className="h-64">
-                      <RichTextEditor
-                        value={richText}
-                        onChange={setRichText}
-                        placeholder={t('templates.enhanced.richText.placeholder')}
-                        showWordCount
-                        showCharacterCount
-                        allowSearch={false}
-                      />
-                    </CardContent>
-                  </Card>
-                </div>
-              </section>
-
-              {/* Footer Note */}
-              <Card className="mt-8">
-                <CardHeader>
-                  <CardTitle>{t('templates.footer.title')}</CardTitle>
-                  <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
-                </CardHeader>
-                <CardContent className="space-y-4">
-                  <p className="text-muted-foreground">
-                    {t('templates.footer.descriptionPart1')}
-                    <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
-                      xertica-ui
-                    </code>
-                    {t('templates.footer.descriptionPart2')}
-                  </p>
-                  <Alert variant="info">
-                    <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
-                    <AlertDescription>
-                      {t('templates.footer.tipDescriptionPart1')}
-                      <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
-                      {t('templates.footer.tipDescriptionPart2')}
-                    </AlertDescription>
-                  </Alert>
-                </CardContent>
-              </Card>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
+import React, { useState } from 'react';
+import {
+  Button,
+  Input,
+  Label,
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Badge,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Checkbox,
+  RadioGroup,
+  RadioGroupItem,
+  Switch,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Textarea,
+  Progress,
+  Separator,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Slider,
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationEllipsis,
+  Stepper,
+  Step,
+  TreeView,
+  RichTextEditor,
+  usePagination,
+  useStepper,
+} from 'xertica-ui/ui';
+import { Header, Sidebar } from 'xertica-ui/layout';
+import { useLayout, useTheme } from 'xertica-ui/hooks';
+import { toast } from 'sonner';
+import { Link } from 'react-router-dom';
+import { Trans, useTranslation } from 'react-i18next';
+import {
+  Settings,
+  User,
+  Mail,
+  Phone,
+  Calendar,
+  Search,
+  PanelLeft,
+  Home,
+  Users,
+  Plus,
+  Trash2,
+  Archive,
+  ArrowRightLeft,
+  FileEdit,
+  Clock,
+  Map,
+} from 'lucide-react';
+
+export function TemplateContent() {
+  const { t } = useTranslation();
+
+  // ── TreeView demo data (built inside the component so labels react to language switches) ──
+  const treeData = [
+    {
+      id: 'components',
+      label: t('templates.enhanced.treeView.nodes.components'),
+      children: [
+        {
+          id: 'ui',
+          label: t('templates.enhanced.treeView.nodes.ui'),
+          children: [
+            { id: 'button', label: t('templates.enhanced.treeView.nodes.button') },
+            { id: 'input', label: t('templates.enhanced.treeView.nodes.input') },
+            { id: 'pagination', label: t('templates.enhanced.treeView.nodes.pagination') },
+          ],
+        },
+        {
+          id: 'layout',
+          label: t('templates.enhanced.treeView.nodes.layout'),
+          children: [
+            { id: 'sidebar', label: t('templates.enhanced.treeView.nodes.sidebar') },
+            { id: 'header', label: t('templates.enhanced.treeView.nodes.header') },
+          ],
+        },
+      ],
+    },
+    {
+      id: 'hooks',
+      label: t('templates.enhanced.treeView.nodes.hooks'),
+      // Hook identifiers stay as code — not translated.
+      children: [
+        { id: 'use-pagination', label: 'usePagination' },
+        { id: 'use-stepper', label: 'useStepper' },
+        { id: 'use-tree-view', label: 'useTreeView' },
+      ],
+    },
+  ];
+  const { sidebarExpanded, sidebarWidth } = useLayout();
+  const { disableDarkMode } = useTheme();
+  const [progress, setProgress] = useState(45);
+  const [sliderValue, setSliderValue] = useState([50]);
+  const [switchEnabled, setSwitchEnabled] = useState(false);
+  const [richText, setRichText] = useState('');
+
+  // Dialog demo inputs (controlled so they re-localise on language switch).
+  // Seeded lazily from `t(...)` so the initial value reflects the current
+  // language at first render; subsequent language switches don't overwrite
+  // user edits.
+  const [dialogName, setDialogName] = useState(() => t('templates.dialogs.nameDefaultValue'));
+  const [dialogUsername, setDialogUsername] = useState(() =>
+    t('templates.dialogs.usernameDefaultValue')
+  );
+
+  // ── Pagination demo ─────────────────────────────────────────────────────────
+  const { currentPage, totalPages, items, next, prev, goTo, canGoPrev, canGoNext } = usePagination({
+    totalItems: 120,
+    pageSize: 10,
+  });
+
+  // ── Stepper demo ────────────────────────────────────────────────────────────
+  const {
+    currentStep,
+    next: stepNext,
+    prev: stepPrev,
+    isFirstStep,
+    isLastStep,
+  } = useStepper({ totalSteps: 3 });
+
+  const handleFormSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    toast.success(t('templates.formSubmitSuccess'));
+  };
+
+  return (
+    <div
+      style={{
+        paddingLeft: sidebarExpanded ? `${sidebarWidth}px` : '80px',
+      }}
+      className="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+    >
+      <Header
+        showThemeToggle={true}
+        showLanguageSelector={true}
+        breadcrumbs={[
+          { label: t('nav.designSystem'), href: '/home' },
+          { label: t('templates.breadcrumb') },
+        ]}
+        renderLink={(href: string, props: any) => <Link to={href} {...props} />}
+      />
+
+      <main className="flex-1 overflow-hidden bg-muted">
+        <div className="h-full" style={{ overflowY: 'auto', overflowX: 'hidden' }}>
+          <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('templates.title')}</h2>
+                <p className="text-muted-foreground">{t('templates.subtitle')}</p>
+              </div>
+
+              {/* Alert Examples */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.alerts')}</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Alert variant="info">
+                    <AlertTitle>{t('templates.alerts.infoTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.infoDescription')}</AlertDescription>
+                  </Alert>
+
+                  <Alert variant="destructive">
+                    <AlertTitle>{t('templates.alerts.errorTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.errorDescription')}</AlertDescription>
+                  </Alert>
+
+                  <Alert variant="success">
+                    <AlertTitle>{t('templates.alerts.successTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.successDescription')}</AlertDescription>
+                  </Alert>
+
+                  <Alert variant="warning">
+                    <AlertTitle>{t('templates.alerts.warningTitle')}</AlertTitle>
+                    <AlertDescription>{t('templates.alerts.warningDescription')}</AlertDescription>
+                  </Alert>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Cards & Tabs */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.cardsAndTabs')}</h3>
+
+                <Tabs defaultValue="overview" className="w-full">
+                  <TabsList className="grid w-full grid-cols-4">
+                    <TabsTrigger value="overview">{t('templates.tabs.overview')}</TabsTrigger>
+                    <TabsTrigger value="forms">{t('templates.tabs.forms')}</TabsTrigger>
+                    <TabsTrigger value="data">{t('templates.tabs.data')}</TabsTrigger>
+                    <TabsTrigger value="settings">{t('templates.tabs.settings')}</TabsTrigger>
+                  </TabsList>
+
+                  {/* Overview Tab */}
+                  <TabsContent value="overview" className="space-y-4">
+                    <div className="grid gap-4 md:grid-cols-3">
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('stats.totalUsers')}</CardTitle>
+                          <CardDescription>{t('stats.last30Days')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
+                              {t('templates.overview.totalUsersDemoValue')}
+                            </span>
+                            <Badge variant="default" className="ml-2">
+                              +12%
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('stats.totalRevenue')}</CardTitle>
+                          <CardDescription>{t('stats.currentMonth')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
+                              {t('templates.overview.revenueDemoValue')}
+                            </span>
+                            <Badge variant="secondary" className="ml-2">
+                              +8%
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+
+                      <Card>
+                        <CardHeader>
+                          <CardTitle>{t('stats.conversionRate')}</CardTitle>
+                          <CardDescription>{t('stats.currentWeek')}</CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="text-foreground">
+                            <span className="[font-size:var(--text-stats)] [font-weight:var(--font-weight-bold)]">
+                              {t('templates.overview.conversionRateDemoValue')}
+                            </span>
+                            <Badge variant="outline" className="ml-2">
+                              -2%
+                            </Badge>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    </div>
+
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.overview.progressTitle')}</CardTitle>
+                        <CardDescription>
+                          {t('templates.overview.progressDescription')}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label>{t('templates.overview.projectProgress')}</Label>
+                            <span className="[font-size:var(--text-small)] text-muted-foreground">
+                              {progress}%
+                            </span>
+                          </div>
+                          <Progress value={progress} className="w-full" />
+                          <div className="flex gap-2">
+                            <Button
+                              size="sm"
+                              onClick={() => setProgress(Math.max(0, progress - 10))}
+                            >
+                              -10%
+                            </Button>
+                            <Button
+                              size="sm"
+                              onClick={() => setProgress(Math.min(100, progress + 10))}
+                            >
+                              +10%
+                            </Button>
+                          </div>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-2">
+                          <div className="flex items-center justify-between">
+                            <Label>{t('templates.overview.volume')}</Label>
+                            <span className="[font-size:var(--text-small)] text-muted-foreground">
+                              {sliderValue[0]}%
+                            </span>
+                          </div>
+                          <Slider
+                            value={sliderValue}
+                            onValueChange={setSliderValue}
+                            min={0}
+                            max={100}
+                            step={1}
+                            className="w-full"
+                          />
+                        </div>
+                      </CardContent>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Forms Tab */}
+                  <TabsContent value="forms" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.forms.registrationTitle')}</CardTitle>
+                        <CardDescription>
+                          {t('templates.forms.registrationDescription')}
+                        </CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <form onSubmit={handleFormSubmit} className="space-y-4">
+                          <div className="grid gap-4 md:grid-cols-2">
+                            <div className="space-y-2">
+                              <Label htmlFor="firstName">{t('templates.forms.firstName')}</Label>
+                              <Input
+                                id="firstName"
+                                placeholder={t('templates.forms.firstNamePlaceholder')}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="lastName">{t('templates.forms.lastName')}</Label>
+                              <Input
+                                id="lastName"
+                                placeholder={t('templates.forms.lastNamePlaceholder')}
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="email">{t('templates.forms.email')}</Label>
+                            <div className="relative">
+                              <Mail className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input
+                                id="email"
+                                type="email"
+                                placeholder={t('templates.forms.emailPlaceholder')}
+                                className="pl-10"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="phone">{t('templates.forms.phone')}</Label>
+                            <div className="relative">
+                              <Phone className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                              <Input
+                                id="phone"
+                                type="tel"
+                                placeholder={t('templates.forms.phonePlaceholder')}
+                                className="pl-10"
+                              />
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="role">{t('templates.forms.role')}</Label>
+                            <Select>
+                              <SelectTrigger id="role">
+                                <SelectValue placeholder={t('templates.forms.rolePlaceholder')} />
+                              </SelectTrigger>
+                              <SelectContent>
+                                <SelectItem value="developer">
+                                  {t('templates.forms.roles.developer')}
+                                </SelectItem>
+                                <SelectItem value="designer">
+                                  {t('templates.forms.roles.designer')}
+                                </SelectItem>
+                                <SelectItem value="manager">
+                                  {t('templates.forms.roles.manager')}
+                                </SelectItem>
+                                <SelectItem value="analyst">
+                                  {t('templates.forms.roles.analyst')}
+                                </SelectItem>
+                              </SelectContent>
+                            </Select>
+                          </div>
+
+                          <div className="space-y-2">
+                            <Label htmlFor="bio">{t('templates.forms.bio')}</Label>
+                            <Textarea
+                              id="bio"
+                              placeholder={t('templates.forms.bioPlaceholder')}
+                              rows={4}
+                            />
+                          </div>
+
+                          <Separator />
+
+                          <div className="space-y-4">
+                            <h4>{t('templates.forms.preferences')}</h4>
+
+                            <div className="space-y-3">
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="newsletter" />
+                                <Label htmlFor="newsletter" className="font-normal">
+                                  {t('templates.forms.newsletter')}
+                                </Label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="notifications" />
+                                <Label htmlFor="notifications" className="font-normal">
+                                  {t('templates.forms.pushNotifications')}
+                                </Label>
+                              </div>
+
+                              <div className="flex items-center space-x-2">
+                                <Checkbox id="updates" />
+                                <Label htmlFor="updates" className="font-normal">
+                                  {t('templates.forms.featureUpdates')}
+                                </Label>
+                              </div>
+                            </div>
+
+                            <Separator />
+
+                            <div className="space-y-3">
+                              <Label>{t('templates.forms.accountType')}</Label>
+                              <RadioGroup defaultValue="personal">
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="personal" id="personal" />
+                                  <Label htmlFor="personal" className="font-normal">
+                                    {t('templates.forms.accountPersonal')}
+                                  </Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="business" id="business" />
+                                  <Label htmlFor="business" className="font-normal">
+                                    {t('templates.forms.accountBusiness')}
+                                  </Label>
+                                </div>
+                                <div className="flex items-center space-x-2">
+                                  <RadioGroupItem value="enterprise" id="enterprise" />
+                                  <Label htmlFor="enterprise" className="font-normal">
+                                    {t('templates.forms.accountEnterprise')}
+                                  </Label>
+                                </div>
+                              </RadioGroup>
+                            </div>
+                          </div>
+                        </form>
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <Button variant="outline">{t('templates.forms.cancel')}</Button>
+                        <Button onClick={handleFormSubmit}>
+                          {t('templates.forms.createAccount')}
+                        </Button>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Data Tab */}
+                  <TabsContent value="data" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.data.title')}</CardTitle>
+                        <CardDescription>{t('templates.data.description')}</CardDescription>
+                      </CardHeader>
+                      <CardContent>
+                        <div className="mb-4">
+                          <div className="relative">
+                            <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
+                            <Input
+                              placeholder={t('templates.data.searchPlaceholder')}
+                              className="pl-10"
+                            />
+                          </div>
+                        </div>
+
+                        <div className="rounded-[var(--radius-lg)] border border-border overflow-hidden">
+                          <Table>
+                            <TableHeader>
+                              <TableRow>
+                                <TableHead>{t('templates.data.headers.name')}</TableHead>
+                                <TableHead>{t('templates.data.headers.email')}</TableHead>
+                                <TableHead>{t('templates.data.headers.role')}</TableHead>
+                                <TableHead>{t('templates.data.headers.status')}</TableHead>
+                                <TableHead className="text-right">
+                                  {t('templates.data.headers.actions')}
+                                </TableHead>
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              <TableRow>
+                                <TableCell>Ana Silva</TableCell>
+                                <TableCell>{`ana.silva@${t('templates.data.demoEmailDomain')}`}</TableCell>
+                                <TableCell>{t('templates.data.roles.developerFemale')}</TableCell>
+                                <TableCell>
+                                  <Badge variant="default">
+                                    {t('templates.data.status.active')}
+                                  </Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">
+                                    {t('templates.data.edit')}
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                              <TableRow>
+                                <TableCell>Bruno Costa</TableCell>
+                                <TableCell>{`bruno.costa@${t('templates.data.demoEmailDomain')}`}</TableCell>
+                                <TableCell>{t('templates.data.roles.designer')}</TableCell>
+                                <TableCell>
+                                  <Badge variant="default">
+                                    {t('templates.data.status.active')}
+                                  </Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">
+                                    {t('templates.data.edit')}
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                              <TableRow>
+                                <TableCell>Carla Oliveira</TableCell>
+                                <TableCell>{`carla.oliveira@${t('templates.data.demoEmailDomain')}`}</TableCell>
+                                <TableCell>{t('templates.data.roles.manager')}</TableCell>
+                                <TableCell>
+                                  <Badge variant="secondary">
+                                    {t('templates.data.status.away')}
+                                  </Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">
+                                    {t('templates.data.edit')}
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                              <TableRow>
+                                <TableCell>Diego Santos</TableCell>
+                                <TableCell>{`diego.santos@${t('templates.data.demoEmailDomain')}`}</TableCell>
+                                <TableCell>{t('templates.data.roles.analyst')}</TableCell>
+                                <TableCell>
+                                  <Badge variant="outline">
+                                    {t('templates.data.status.inactive')}
+                                  </Badge>
+                                </TableCell>
+                                <TableCell className="text-right">
+                                  <Button variant="ghost" size="sm">
+                                    {t('templates.data.edit')}
+                                  </Button>
+                                </TableCell>
+                              </TableRow>
+                            </TableBody>
+                          </Table>
+                        </div>
+                      </CardContent>
+                      <CardFooter className="flex justify-between items-center">
+                        <p className="text-muted-foreground">
+                          {t('templates.data.showing', { count: 4, total: 127 })}
+                        </p>
+                        <div className="flex gap-2">
+                          <Button variant="outline" size="sm">
+                            {t('templates.data.previous')}
+                          </Button>
+                          <Button variant="outline" size="sm">
+                            {t('templates.data.next')}
+                          </Button>
+                        </div>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+
+                  {/* Settings Tab */}
+                  <TabsContent value="settings" className="space-y-4">
+                    <Card>
+                      <CardHeader>
+                        <CardTitle>{t('templates.settings.title')}</CardTitle>
+                        <CardDescription>{t('templates.settings.description')}</CardDescription>
+                      </CardHeader>
+                      <CardContent className="space-y-6">
+                        {!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 />
+                          </>
+                        )}
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label>{t('templates.settings.emailNotifications')}</Label>
+                            <p className="text-muted-foreground">
+                              {t('templates.settings.emailNotificationsDescription')}
+                            </p>
+                          </div>
+                          <Switch defaultChecked />
+                        </div>
+
+                        <Separator />
+
+                        <div className="flex items-center justify-between">
+                          <div className="space-y-1">
+                            <Label>{t('templates.settings.pushNotifications')}</Label>
+                            <p className="text-muted-foreground">
+                              {t('templates.settings.pushNotificationsDescription')}
+                            </p>
+                          </div>
+                          <Switch />
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-3">
+                          <Label>{t('templates.settings.language')}</Label>
+                          <Select defaultValue="pt-br">
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="pt-br">
+                                {t('templates.settings.languages.ptBR')}
+                              </SelectItem>
+                              <SelectItem value="en">
+                                {t('templates.settings.languages.en')}
+                              </SelectItem>
+                              <SelectItem value="es">
+                                {t('templates.settings.languages.es')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <Separator />
+
+                        <div className="space-y-3">
+                          <Label>{t('templates.settings.timezone')}</Label>
+                          <Select defaultValue="america-sao-paulo">
+                            <SelectTrigger>
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="america-sao-paulo">
+                                {t('templates.settings.timezones.saoPaulo')}
+                              </SelectItem>
+                              <SelectItem value="america-new-york">
+                                {t('templates.settings.timezones.newYork')}
+                              </SelectItem>
+                              <SelectItem value="europe-london">
+                                {t('templates.settings.timezones.london')}
+                              </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      </CardContent>
+                      <CardFooter className="flex justify-between">
+                        <Button variant="outline">{t('templates.settings.restoreDefaults')}</Button>
+                        <Button>{t('templates.settings.saveChanges')}</Button>
+                      </CardFooter>
+                    </Card>
+                  </TabsContent>
+                </Tabs>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Button Variants */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.buttons')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.buttons.title')}</CardTitle>
+                    <CardDescription>{t('templates.buttons.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent className="space-y-6">
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.variants')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button variant="default">
+                          {t('templates.buttons.variantLabels.default')}
+                        </Button>
+                        <Button variant="secondary">
+                          {t('templates.buttons.variantLabels.secondary')}
+                        </Button>
+                        <Button variant="outline">
+                          {t('templates.buttons.variantLabels.outline')}
+                        </Button>
+                        <Button variant="ghost">
+                          {t('templates.buttons.variantLabels.ghost')}
+                        </Button>
+                        <Button variant="link">{t('templates.buttons.variantLabels.link')}</Button>
+                        <Button variant="destructive">
+                          {t('templates.buttons.variantLabels.destructive')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.sizes')}</Label>
+                      <div className="flex flex-wrap items-center gap-3">
+                        <Button size="sm">{t('templates.buttons.sizeLabels.small')}</Button>
+                        <Button size="default">{t('templates.buttons.sizeLabels.default')}</Button>
+                        <Button size="lg">{t('templates.buttons.sizeLabels.large')}</Button>
+                        <Button size="icon">
+                          <Settings className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.withIcons')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button>
+                          <User className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.profile')}
+                        </Button>
+                        <Button variant="secondary">
+                          <Mail className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.messages')}
+                        </Button>
+                        <Button variant="outline">
+                          <Calendar className="mr-2 h-4 w-4" />
+                          {t('templates.buttons.schedule')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    <div className="space-y-3">
+                      <Label>{t('templates.buttons.states')}</Label>
+                      <div className="flex flex-wrap gap-3">
+                        <Button disabled>{t('templates.buttons.disabled')}</Button>
+                        <Button variant="outline" disabled>
+                          {t('templates.buttons.outlineDisabled')}
+                        </Button>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Badges */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.badges')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.badges.title')}</CardTitle>
+                    <CardDescription>{t('templates.badges.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-wrap gap-3">
+                      <Badge variant="default">{t('templates.badges.labels.default')}</Badge>
+                      <Badge variant="secondary">{t('templates.badges.labels.secondary')}</Badge>
+                      <Badge variant="outline">{t('templates.badges.labels.outline')}</Badge>
+                      <Badge variant="destructive">
+                        {t('templates.badges.labels.destructive')}
+                      </Badge>
+                      <Badge className="bg-success text-success-foreground">
+                        {t('templates.badges.labels.success')}
+                      </Badge>
+                      <Badge className="bg-warning text-warning-foreground">
+                        {t('templates.badges.labels.warning')}
+                      </Badge>
+                      <Badge className="bg-info text-info-foreground">
+                        {t('templates.badges.labels.info')}
+                      </Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Dialogs */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.dialogs')}</h3>
+                <div className="grid gap-4 md:grid-cols-2">
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.dialogs.dialogTitle')}</CardTitle>
+                      <CardDescription>{t('templates.dialogs.dialogDescription')}</CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button variant="outline">{t('templates.dialogs.editProfile')}</Button>
+                        </DialogTrigger>
+                        <DialogContent className="sm:max-w-[425px]">
+                          <DialogHeader>
+                            <DialogTitle>{t('templates.dialogs.editProfile')}</DialogTitle>
+                            <DialogDescription>
+                              {t('templates.dialogs.editProfileDescription')}
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="grid gap-4 py-4">
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="name" className="text-right">
+                                {t('templates.dialogs.name')}
+                              </Label>
+                              <Input
+                                id="name"
+                                value={dialogName}
+                                onChange={e => setDialogName(e.target.value)}
+                                className="col-span-3"
+                              />
+                            </div>
+                            <div className="grid grid-cols-4 items-center gap-4">
+                              <Label htmlFor="username" className="text-right">
+                                {t('templates.dialogs.username')}
+                              </Label>
+                              <Input
+                                id="username"
+                                value={dialogUsername}
+                                onChange={e => setDialogUsername(e.target.value)}
+                                className="col-span-3"
+                              />
+                            </div>
+                          </div>
+                          <DialogFooter>
+                            <Button type="submit">{t('templates.dialogs.update')}</Button>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    </CardContent>
+                  </Card>
+
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.dialogs.alertDialogTitle')}</CardTitle>
+                      <CardDescription>
+                        {t('templates.dialogs.alertDialogDescription')}
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="flex justify-center py-6">
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="destructive">
+                            {t('templates.dialogs.deleteAccount')}
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent className="sm:max-w-[425px]">
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>{t('templates.dialogs.areYouSure')}</AlertDialogTitle>
+                            <AlertDialogDescription>
+                              {t('templates.dialogs.deleteWarning')}
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>{t('templates.dialogs.cancel')}</AlertDialogCancel>
+                            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+                              {t('templates.dialogs.continue')}
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </CardContent>
+                  </Card>
+                </div>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* Sidebar Variations */}
+              <section>
+                <h3 className="mb-4">{t('templates.sections.sidebarVariations')}</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{t('templates.sidebar.title')}</CardTitle>
+                    <CardDescription>{t('templates.sidebar.description')}</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Tabs defaultValue="assistant" className="w-full">
+                      <TabsList className="mb-4">
+                        <TabsTrigger value="assistant">
+                          {t('templates.sidebar.assistantMode')}
+                        </TabsTrigger>
+                        <TabsTrigger value="default">
+                          {t('templates.sidebar.defaultMode')}
+                        </TabsTrigger>
+                      </TabsList>
+
+                      <TabsContent value="assistant">
+                        <div
+                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+                          style={{ transform: 'translateZ(0)' }}
+                        >
+                          <Sidebar
+                            expanded={true}
+                            width={sidebarWidth}
+                            onToggle={() => {}}
+                            user={{ email: 'admin@xertica.com' }}
+                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
+                            location={{ pathname: '/assistant/current' }}
+                            navigate={() => {}}
+                            variant="assistant"
+                            search={{
+                              show: true,
+                              placeholder: t('templates.sidebar.searchTopicsPlaceholder'),
+                            }}
+                            fixedArea={{
+                              show: true,
+                              content: (
+                                <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
+                                  <Plus className="w-4 h-4 mr-2" />
+                                  {t('templates.sidebar.newConversation')}
+                                </Button>
+                              ),
+                            }}
+                            navigationGroups={[
+                              {
+                                id: 'recent',
+                                label: t('templates.sidebar.recent'),
+                                icon: Clock,
+                                items: [
+                                  {
+                                    path: '/assistant/refatoracao',
+                                    label: t('templates.sidebar.items.sidebarRefactor'),
+                                    icon: PanelLeft,
+                                    description: t(
+                                      'templates.sidebar.items.sidebarRefactorDescription'
+                                    ),
+                                    actions: [
+                                      {
+                                        label: t('templates.sidebar.actions.rename'),
+                                        icon: FileEdit,
+                                        onClick: () =>
+                                          toast(t('templates.sidebar.actions.renameToast')),
+                                      },
+                                      {
+                                        label: t('templates.sidebar.actions.move'),
+                                        icon: ArrowRightLeft,
+                                        children: [
+                                          {
+                                            label: t('templates.sidebar.actions.moveActive'),
+                                            onClick: () =>
+                                              toast(t('templates.sidebar.actions.moveActiveToast')),
+                                          },
+                                          {
+                                            label: t('templates.sidebar.actions.moveMonitoring'),
+                                            onClick: () =>
+                                              toast(
+                                                t('templates.sidebar.actions.moveMonitoringToast')
+                                              ),
+                                          },
+                                          {
+                                            label: t('templates.sidebar.actions.moveArchive'),
+                                            onClick: () =>
+                                              toast(
+                                                t('templates.sidebar.actions.moveArchiveToast')
+                                              ),
+                                          },
+                                        ],
+                                      },
+                                      {
+                                        label: t('templates.sidebar.actions.clear'),
+                                        icon: Trash2,
+                                        onClick: () =>
+                                          toast(t('templates.sidebar.actions.clearToast')),
+                                        variant: 'destructive',
+                                      },
+                                    ],
+                                  },
+                                ],
+                              },
+                              {
+                                id: 'projects',
+                                label: t('templates.sidebar.constructionMonitoring'),
+                                icon: Map,
+                                actions: [
+                                  {
+                                    label: t('templates.sidebar.actions.newCategory'),
+                                    icon: Plus,
+                                    onClick: () =>
+                                      toast(t('templates.sidebar.actions.newCategoryToast')),
+                                  },
+                                  {
+                                    label: t('templates.sidebar.actions.archiveGroup'),
+                                    icon: Archive,
+                                    onClick: () =>
+                                      toast(t('templates.sidebar.actions.archiveGroupToast')),
+                                  },
+                                ],
+                                items: [
+                                  {
+                                    path: '/assistant/br163',
+                                    label: t('templates.sidebar.items.br163Restoration'),
+                                    icon: () => (
+                                      <div className="w-2 h-2 rounded-full bg-yellow-500" />
+                                    ),
+                                    description: (
+                                      <div className="space-y-1.5 min-w-[160px]">
+                                        <Progress
+                                          value={67}
+                                          className="h-1.5 bg-sidebar-foreground/10"
+                                        />
+                                        <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
+                                          <span>{t('templates.sidebar.items.br163Location')}</span>
+                                          <span>67%</span>
+                                        </div>
+                                      </div>
+                                    ),
+                                  },
+                                ],
+                              },
+                            ]}
+                          />
+                          <div
+                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+                            style={{ left: `${sidebarWidth}px` }}
+                          >
+                            <p className="text-muted-foreground text-center">
+                              {t('templates.sidebar.assistantContent')}
+                            </p>
+                          </div>
+                        </div>
+                      </TabsContent>
+
+                      <TabsContent value="default">
+                        <div
+                          className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+                          style={{ transform: 'translateZ(0)' }}
+                        >
+                          <Sidebar
+                            expanded={true}
+                            width={sidebarWidth}
+                            onToggle={() => {}}
+                            user={{
+                              name: 'Ariel Santos',
+                              email: 'admin@xertica.com',
+                              avatar: 'https://github.com/shadcn.png',
+                            }}
+                            onLogout={() => toast(t('templates.sidebar.logoutToast'))}
+                            onSettingsClick={() =>
+                              toast(t('templates.sidebar.settingsClickedToast'))
+                            }
+                            location={{ pathname: '/home' }}
+                            navigate={() => {}}
+                            variant="default"
+                            routes={[
+                              {
+                                path: '/home',
+                                label: t('templates.sidebar.routes.home'),
+                                icon: Home,
+                              },
+                              {
+                                path: '/dashboard',
+                                label: t('templates.sidebar.routes.dashboard'),
+                                icon: Users,
+                              },
+                              {
+                                path: '/settings',
+                                label: t('templates.sidebar.routes.settings'),
+                                icon: Settings,
+                              },
+                            ]}
+                          />
+                          <div
+                            className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+                            style={{ left: `${sidebarWidth}px` }}
+                          >
+                            <p className="text-muted-foreground text-center">
+                              {t('templates.sidebar.defaultContent')}
+                            </p>
+                          </div>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
+              {/* ── v2.2.1 Components ──────────────────────────────────── */}
+              <Separator className="my-8" />
+
+              <section>
+                <h3 className="mb-4">{t('templates.sections.enhancedComponents')}</h3>
+                <div className="space-y-6">
+                  {/* Pagination com disabled */}
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.enhanced.pagination.title')}</CardTitle>
+                      <CardDescription>
+                        <Trans
+                          i18nKey="templates.enhanced.pagination.description"
+                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
+                        />
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <p className="text-sm text-muted-foreground">
+                        {t('templates.enhanced.pagination.pageOfTotal', {
+                          current: currentPage,
+                          total: totalPages,
+                        })}
+                      </p>
+                      <Pagination>
+                        <PaginationContent>
+                          <PaginationItem>
+                            <PaginationPrevious
+                              href="#"
+                              onClick={e => {
+                                e.preventDefault();
+                                prev();
+                              }}
+                              disabled={!canGoPrev}
+                            />
+                          </PaginationItem>
+                          {items.map(item =>
+                            item.type === 'ellipsis' ? (
+                              <PaginationItem key={item.key}>
+                                <PaginationEllipsis />
+                              </PaginationItem>
+                            ) : (
+                              <PaginationItem key={item.page}>
+                                <PaginationLink
+                                  href="#"
+                                  isActive={item.page === currentPage}
+                                  onClick={e => {
+                                    e.preventDefault();
+                                    goTo(item.page);
+                                  }}
+                                >
+                                  {item.page}
+                                </PaginationLink>
+                              </PaginationItem>
+                            )
+                          )}
+                          <PaginationItem>
+                            <PaginationNext
+                              href="#"
+                              onClick={e => {
+                                e.preventDefault();
+                                next();
+                              }}
+                              disabled={!canGoNext}
+                            />
+                          </PaginationItem>
+                        </PaginationContent>
+                      </Pagination>
+                    </CardContent>
+                  </Card>
+
+                  {/* Stepper com ARIA */}
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.enhanced.stepper.title')}</CardTitle>
+                      <CardDescription>
+                        <Trans
+                          i18nKey="templates.enhanced.stepper.description"
+                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
+                        />
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                      <Stepper currentStep={currentStep}>
+                        <Step
+                          step={1}
+                          label={t('templates.enhanced.stepper.step1Label')}
+                          description={t('templates.enhanced.stepper.step1Description')}
+                        />
+                        <Step
+                          step={2}
+                          label={t('templates.enhanced.stepper.step2Label')}
+                          description={t('templates.enhanced.stepper.step2Description')}
+                        />
+                        <Step
+                          step={3}
+                          label={t('templates.enhanced.stepper.step3Label')}
+                          description={t('templates.enhanced.stepper.step3Description')}
+                        />
+                      </Stepper>
+                      <div className="flex gap-2 pt-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={stepPrev}
+                          disabled={isFirstStep}
+                        >
+                          {t('templates.enhanced.stepper.previous')}
+                        </Button>
+                        <Button size="sm" onClick={stepNext} disabled={isLastStep}>
+                          {isLastStep
+                            ? t('templates.enhanced.stepper.finish')
+                            : t('templates.enhanced.stepper.next')}
+                        </Button>
+                      </div>
+                    </CardContent>
+                  </Card>
+
+                  {/* TreeView com ariaLabel */}
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.enhanced.treeView.title')}</CardTitle>
+                      <CardDescription>
+                        <Trans
+                          i18nKey="templates.enhanced.treeView.description"
+                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
+                        />
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent>
+                      <TreeView
+                        data={treeData}
+                        aria-label={t('templates.enhanced.treeView.ariaLabel')}
+                        defaultExpanded={['components', 'ui']}
+                        onNodeSelect={node =>
+                          console.log(
+                            t('templates.enhanced.treeView.selectedConsoleLog'),
+                            node.label
+                          )
+                        }
+                        className="max-w-xs border border-border rounded-[var(--radius-lg)] p-2"
+                      />
+                    </CardContent>
+                  </Card>
+
+                  {/* RichTextEditor sem Auto-save */}
+                  <Card>
+                    <CardHeader>
+                      <CardTitle>{t('templates.enhanced.richText.title')}</CardTitle>
+                      <CardDescription>
+                        <Trans
+                          i18nKey="templates.enhanced.richText.description"
+                          components={{ code: <code className="bg-muted px-1 rounded text-xs" /> }}
+                        />
+                      </CardDescription>
+                    </CardHeader>
+                    <CardContent className="h-64">
+                      <RichTextEditor
+                        value={richText}
+                        onChange={setRichText}
+                        placeholder={t('templates.enhanced.richText.placeholder')}
+                        showWordCount
+                        showCharacterCount
+                        allowSearch={false}
+                      />
+                    </CardContent>
+                  </Card>
+                </div>
+              </section>
+
+              {/* Footer Note */}
+              <Card className="mt-8">
+                <CardHeader>
+                  <CardTitle>{t('templates.footer.title')}</CardTitle>
+                  <CardDescription>{t('templates.footer.subtitle')}</CardDescription>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <p className="text-muted-foreground">
+                    {t('templates.footer.descriptionPart1')}
+                    <code className="bg-muted px-2 py-1 rounded-[var(--radius-sm)] [font-size:var(--text-small)]">
+                      xertica-ui
+                    </code>
+                    {t('templates.footer.descriptionPart2')}
+                  </p>
+                  <Alert variant="info">
+                    <AlertTitle>{t('templates.footer.tipTitle')}</AlertTitle>
+                    <AlertDescription>
+                      {t('templates.footer.tipDescriptionPart1')}
+                      <code className="bg-muted px-1 rounded">styles/xertica/tokens.css</code>
+                      {t('templates.footer.tipDescriptionPart2')}
+                    </AlertDescription>
+                  </Alert>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}