xertica-ui 2.6.0 → 2.7.0

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

@@ -1,317 +1,9 @@
 {
   "breadcrumb": "Página de Template",
   "title": "Página de Template",
-  "subtitle": "Template completo com componentes do Xertica UI Design System",
-  "formSubmitSuccess": "Formulário enviado com sucesso!",
-  "sections": {
-    "alerts": "Alertas",
-    "cardsAndTabs": "Cards & Tabs",
-    "buttons": "Botões",
-    "badges": "Badges",
-    "dialogs": "Dialogs",
-    "sidebarVariations": "Variações da Sidebar",
-    "enhancedComponents": "v2.2.1 — Componentes Aprimorados"
-  },
-  "alerts": {
-    "infoTitle": "Informação",
-    "infoDescription": "Este é um exemplo de alerta informativo usando os componentes do Design System.",
-    "errorTitle": "Erro",
-    "errorDescription": "Ocorreu um erro ao processar sua solicitação.",
-    "successTitle": "Sucesso",
-    "successDescription": "Operação realizada com sucesso!",
-    "warningTitle": "Aviso",
-    "warningDescription": "Atenção: esta ação não pode ser desfeita."
-  },
-  "tabs": {
-    "overview": "Visão Geral",
-    "forms": "Formulários",
-    "data": "Dados",
-    "settings": "Configurações"
-  },
-  "overview": {
-    "progressTitle": "Progress & Sliders",
-    "progressDescription": "Exemplos de componentes de progresso",
-    "projectProgress": "Progresso do Projeto",
-    "volume": "Volume",
-    "totalUsersDemoValue": "1.234",
-    "revenueDemoValue": "R$ 45,2k",
-    "conversionRateDemoValue": "3,2%"
-  },
-  "forms": {
-    "registrationTitle": "Formulário de Cadastro",
-    "registrationDescription": "Preencha os campos abaixo para criar uma nova conta",
-    "firstName": "Nome",
-    "firstNamePlaceholder": "João",
-    "lastName": "Sobrenome",
-    "lastNamePlaceholder": "Silva",
-    "email": "E-mail",
-    "emailPlaceholder": "joao@exemplo.com",
-    "phone": "Telefone",
-    "phonePlaceholder": "(11) 99999-9999",
-    "role": "Cargo",
-    "rolePlaceholder": "Selecione um cargo",
-    "roles": {
-      "developer": "Desenvolvedor",
-      "designer": "Designer",
-      "manager": "Gerente",
-      "analyst": "Analista"
-    },
-    "bio": "Biografia",
-    "bioPlaceholder": "Conte-nos um pouco sobre você...",
-    "preferences": "Preferências",
-    "newsletter": "Receber newsletter por e-mail",
-    "pushNotifications": "Ativar notificações push",
-    "featureUpdates": "Receber atualizações sobre novos recursos",
-    "accountType": "Tipo de Conta",
-    "accountPersonal": "Pessoal",
-    "accountBusiness": "Empresarial",
-    "accountEnterprise": "Enterprise",
-    "cancel": "Cancelar",
-    "createAccount": "Criar Conta"
-  },
-  "data": {
-    "title": "Lista de Usuários",
-    "description": "Gerencie os usuários do sistema",
-    "searchPlaceholder": "Buscar usuários...",
-    "headers": {
-      "name": "Nome",
-      "email": "E-mail",
-      "role": "Cargo",
-      "status": "Status",
-      "actions": "Ações"
-    },
-    "roles": {
-      "developerFemale": "Desenvolvedora",
-      "designer": "Designer",
-      "manager": "Gerente",
-      "analyst": "Analista"
-    },
-    "status": {
-      "active": "Ativo",
-      "away": "Ausente",
-      "inactive": "Inativo"
-    },
-    "edit": "Editar",
-    "showing": "Exibindo {{count}} de {{total}} usuários",
-    "previous": "Anterior",
-    "next": "Próximo",
-    "demoEmailDomain": "exemplo.com"
-  },
-  "settings": {
-    "title": "Configurações do Sistema",
-    "description": "Gerencie as configurações gerais",
-    "darkMode": "Modo Escuro",
-    "darkModeDescription": "Ativar tema escuro na interface",
-    "emailNotifications": "Notificações por E-mail",
-    "emailNotificationsDescription": "Receber atualizações importantes por e-mail",
-    "pushNotifications": "Notificações Push",
-    "pushNotificationsDescription": "Receber notificações instantâneas no navegador",
-    "language": "Idioma",
-    "languages": {
-      "ptBR": "Português (Brasil)",
-      "en": "English",
-      "es": "Español"
-    },
-    "timezone": "Fuso Horário",
-    "timezones": {
-      "saoPaulo": "América/São Paulo (GMT-3)",
-      "newYork": "América/Nova York (GMT-5)",
-      "london": "Europa/Londres (GMT+0)"
-    },
-    "restoreDefaults": "Restaurar Padrões",
-    "saveChanges": "Salvar Alterações"
-  },
-  "buttons": {
-    "title": "Variações de Botões",
-    "description": "Diferentes estilos e tamanhos de botões",
-    "variants": "Variantes",
-    "sizes": "Tamanhos",
-    "withIcons": "Com Ícones",
-    "states": "Estados",
-    "profile": "Perfil",
-    "messages": "Mensagens",
-    "schedule": "Agendar",
-    "disabled": "Desabilitado",
-    "outlineDisabled": "Outline Desabilitado",
-    "variantLabels": {
-      "default": "Padrão",
-      "secondary": "Secundário",
-      "outline": "Contorno",
-      "ghost": "Ghost",
-      "link": "Link",
-      "destructive": "Destrutivo"
-    },
-    "sizeLabels": {
-      "small": "Pequeno",
-      "default": "Padrão",
-      "large": "Grande"
-    }
-  },
-  "badges": {
-    "title": "Variações de Badges",
-    "description": "Diferentes estilos de badges para status e tags",
-    "labels": {
-      "default": "Padrão",
-      "secondary": "Secundário",
-      "outline": "Contorno",
-      "destructive": "Destrutivo",
-      "success": "Sucesso",
-      "warning": "Aviso",
-      "info": "Info"
-    }
-  },
-  "dialogs": {
-    "dialogTitle": "Dialog",
-    "dialogDescription": "Um modal básico interativo",
-    "editProfile": "Editar Perfil",
-    "editProfileDescription": "Faça alterações no seu perfil aqui. Clique em salvar quando terminar.",
-    "name": "Nome",
-    "nameDefaultValue": "Pedro Duarte",
-    "username": "Usuário",
-    "usernameDefaultValue": "@pedroduarte",
-    "update": "Atualizar",
-    "alertDialogTitle": "Alert Dialog",
-    "alertDialogDescription": "Um alerta para decisões importantes",
-    "deleteAccount": "Excluir Conta",
-    "areYouSure": "Você tem certeza absoluta?",
-    "deleteWarning": "Esta ação não pode ser desfeita. Isso excluirá permanentemente sua conta e removerá seus dados de nossos servidores.",
-    "cancel": "Cancelar",
-    "continue": "Continuar"
-  },
-  "sidebar": {
-    "title": "Sidebar Assistant Mode vs Default",
-    "description": "A Sidebar suporta flexibilidade com a propriedade variant.",
-    "assistantMode": "Modo Assistant",
-    "defaultMode": "Modo Padrão",
-    "searchTopicsPlaceholder": "Pesquisar tópicos...",
-    "newConversation": "Nova Conversa",
-    "recent": "Recentes",
-    "constructionMonitoring": "Monitoramento de Obras",
-    "items": {
-      "sidebarRefactor": "Refatoração Sidebar",
-      "sidebarRefactorDescription": "Ativa agora",
-      "br163Restoration": "Restauração BR-163",
-      "br163Location": "Cuiabá, MT"
-    },
-    "actions": {
-      "rename": "Renomear",
-      "renameToast": "Abrir renomear...",
-      "move": "Mover",
-      "moveActive": "Projetos Ativos",
-      "moveActiveToast": "Movido para Projetos Ativos",
-      "moveMonitoring": "Monitoramento",
-      "moveMonitoringToast": "Movido para Monitoramento",
-      "moveArchive": "Arquivo",
-      "moveArchiveToast": "Movido para Arquivo",
-      "clear": "Limpar",
-      "clearToast": "Histórico Limpo!",
-      "newCategory": "Nova Categoria",
-      "newCategoryToast": "Criar nova categoria...",
-      "archiveGroup": "Arquivar Grupo",
-      "archiveGroupToast": "Arquivando grupo..."
-    },
-    "logoutToast": "Saiu",
-    "settingsClickedToast": "Configurações clicadas",
-    "routes": {
-      "home": "Início",
-      "dashboard": "Dashboard",
-      "settings": "Configurações"
-    },
-    "assistantContent": "Conteúdo do Assistant Mode",
-    "defaultContent": "Navegação Tradicional do Sistema"
-  },
-  "enhanced": {
-    "pagination": {
-      "title": "Pagination",
-      "description": "Navegação por páginas com a prop <code>disabled</code> em Previous/Next — ARIA e foco acessíveis.",
-      "pageOfTotal": "Página {{current}} de {{total}} — algoritmo Set-deduplicado garante unicidade de itens"
-    },
-    "stepper": {
-      "title": "Stepper",
-      "description": "Wizard multi-etapas com <code>role=\"list\"</code>, <code>aria-current=\"step\"</code> e <code>initialStep</code> clampado automaticamente.",
-      "step1Label": "Dados pessoais",
-      "step1Description": "Nome e e-mail",
-      "step2Label": "Endereço",
-      "step2Description": "CEP e cidade",
-      "step3Label": "Confirmação",
-      "step3Description": "Revisar e enviar",
-      "previous": "Anterior",
-      "next": "Próximo",
-      "finish": "Concluir"
-    },
-    "treeView": {
-      "title": "TreeView",
-      "description": "Navegação hierárquica com <code>ariaLabel</code>, roving tabindex e teclado WAI-ARIA (Espaço expande/colapsa, Enter seleciona).",
-      "ariaLabel": "Estrutura de componentes",
-      "selectedConsoleLog": "Selecionado:",
-      "nodes": {
-        "components": "Componentes",
-        "ui": "UI",
-        "button": "Botão",
-        "input": "Input",
-        "pagination": "Paginação",
-        "layout": "Layout",
-        "sidebar": "Sidebar",
-        "header": "Header",
-        "hooks": "Hooks"
-      }
-    },
-    "richText": {
-      "title": "RichTextEditor",
-      "description": "Editor rich text com <code>role=\"textbox\"</code>, <code>aria-multiline</code> e contadores via <code>useState</code> (sem IIFE).",
-      "placeholder": "Escreva aqui..."
-    }
-  },
-  "footer": {
-    "title": "Template CLI-Ready",
-    "subtitle": "Como usar este template",
-    "descriptionPart1": "Este template está pronto para ser usado como base para novos projetos. Todos os componentes são importados da biblioteca ",
-    "descriptionPart2": " e seguem a arquitetura CLI-first do Xertica UI.",
-    "tipTitle": "Dica",
-    "tipDescriptionPart1": "Copie este arquivo como ponto de partida para suas páginas. Todos os componentes são reutilizáveis e customizáveis através das variáveis CSS definidas em ",
-    "tipDescriptionPart2": "."
-  },
-  "headerWithBreadcrumbs": {
-    "sectionTitle": "Cabeçalho com Breadcrumbs",
-    "cardTitle": "Cabeçalho Principal",
-    "cardDescription": "Exemplo de Header com breadcrumbs de 4 níveis",
-    "exampleContentTitle": "Conteúdo de Exemplo",
-    "exampleContentDescriptionPart1": "Neste exemplo, o componente ",
-    "exampleContentDescriptionPart2": " principal da aplicação agora suporta receber um array de breadcrumbs para navegações complexas com mais de 3 níveis.",
-    "breadcrumbs": {
-      "dashboard": "Dashboard",
-      "settings": "Configurações",
-      "users": "Usuários",
-      "accessProfile": "Perfil de Acesso"
-    }
-  },
-  "headerVariations": {
-    "sectionTitle": "Variações de Cabeçalho",
-    "cardTitle": "Configurações do Cabeçalho Principal",
-    "cardDescription": "O Header é focado em navegação (breadcrumbs) e ações contextuais rápidas.",
-    "visibleElements": "Elementos Visíveis",
-    "actionButtons": "Botões de Ação",
-    "breadcrumbsLabel": "Breadcrumbs",
-    "preview": "Visualização",
-    "currentPage": "Página Atual",
-    "contentArea": "Área de Conteúdo da Página",
-    "breadcrumbBrand": "Xertica UI",
-    "breadcrumbSettings": "Configurações",
-    "breadcrumbProfile": "Perfil",
-    "notificationsOpenedToast": "Notificações abertas",
-    "messagesLabel": "Mensagens",
-    "messagesOpenedToast": "Mensagens abertas"
-  },
-  "sidebarControls": {
-    "footerSettings": "Configurações do Rodapé",
-    "userProfile": "Perfil do Usuário",
-    "settings": "Configurações",
-    "logoutButton": "Botão de Sair",
-    "sidebarWidthDesktop": "Largura da Sidebar (Desktop)",
-    "sidebarWidthAriaLabel": "Largura da Sidebar",
-    "filterByStatus": "Filtrar por Status",
-    "filterActive": "Ativo",
-    "filterArchived": "Arquivado",
-    "filterPending": "Pendente"
-  }
+  "subtitle": "Ponto de partida para suas próprias páginas",
+  "exampleTitle": "Exemplo",
+  "exampleInputLabel": "Nome",
+  "exampleInputPlaceholder": "Digite algo...",
+  "exampleButton": "Enviar"
 }

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import { Button } from 'xertica-ui/ui';
-import { Lock } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-interface SocialLoginButtonsProps {
-  onSocialLogin: (provider: string) => void;
-}
-
-export function SocialLoginButtons({ onSocialLogin }: SocialLoginButtonsProps) {
-  const { t } = useTranslation();
-
-  return (
-    <>
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-border" />
-        </div>
-        <div className="relative flex justify-center text-sm">
-          <span className="bg-muted px-2 text-muted-foreground">{t('login.orContinueWith')}</span>
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <Button
-          type="button"
-          variant="outline"
-          className="w-full justify-center"
-          onClick={() => onSocialLogin('Google')}
-        >
-          <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-            <path
-              fill="#EA4335"
-              d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
-            />
-            <path
-              fill="#4285F4"
-              d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
-            />
-            <path
-              fill="#FBBC05"
-              d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
-            />
-            <path
-              fill="#34A853"
-              d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
-            />
-            <path fill="none" d="M0 0h48v48H0z" />
-          </svg>
-          <span>{t('login.signInWithGoogle')}</span>
-        </Button>
-
-        <Button
-          type="button"
-          variant="outline"
-          className="w-full justify-center"
-          onClick={() => onSocialLogin('MT Login')}
-        >
-          <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
-          <span>{t('login.signInWithMTLogin')}</span>
-        </Button>
-
-        <Button
-          type="button"
-          variant="outline"
-          className="w-full justify-center font-normal"
-          onClick={() => onSocialLogin('gov.br')}
-        >
-          <span>
-            {t('login.signInWithGovBr').split('gov.br')[0]}
-            <strong className="font-semibold">gov.br</strong>
-            {t('login.signInWithGovBr').split('gov.br')[1] || ''}
-          </span>
-        </Button>
-      </div>
-    </>
-  );
-}

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

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

package/templates/src/features/home/hooks/useFeatureCards.ts

@@ -1,20 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// features/home/hooks/useFeatureCards.ts
-//
-// Server state for the feature cards grid on the Home dashboard.
-// Swap `fetchFeatureCards` for a real API endpoint when ready.
-// ─────────────────────────────────────────────────────────────────────────────
-
-import { useQuery } from '@tanstack/react-query';
-import { useLanguage } from 'xertica-ui/hooks';
-import { fetchFeatureCards, type FeatureCard } from '../data/mock';
-
-export function useFeatureCards() {
-  const { language } = useLanguage();
-  return useQuery<FeatureCard[]>({
-    // Language is part of the key so each locale has its own cache slot.
-    queryKey: ['home', 'feature-cards', language],
-    queryFn: fetchFeatureCards,
-    staleTime: 10 * 60 * 1000, // 10 min — feature list is fairly static
-  });
-}

package/templates/src/features/home/store/dashboardStore.ts

@@ -1,25 +0,0 @@
-// ─────────────────────────────────────────────────────────────────────────────
-// features/home/store/dashboardStore.ts
-//
-// Client-side UI state for the Home feature.
-// Use Zustand for state that lives only in the browser (filters, selections,
-// UI toggles) and React Query for state that originates from the server.
-// ─────────────────────────────────────────────────────────────────────────────
-
-import { create } from 'zustand';
-
-interface DashboardStore {
-  /** Active tab in the data section */
-  activeTab: string;
-  setActiveTab: (tab: string) => void;
-  /** Whether the stats section is expanded */
-  statsExpanded: boolean;
-  toggleStats: () => void;
-}
-
-export const useDashboardStore = create<DashboardStore>(set => ({
-  activeTab: 'overview',
-  setActiveTab: tab => set({ activeTab: tab }),
-  statsExpanded: true,
-  toggleStats: () => set(state => ({ statsExpanded: !state.statsExpanded })),
-}));

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

@@ -1,112 +0,0 @@
-import React from 'react';
-import {
-  Button,
-  Input,
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableBody,
-  TableCell,
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  Badge,
-  Card,
-} from 'xertica-ui/ui';
-import { Search, Plus, MoreHorizontal } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
-
-export function CrudTemplate() {
-  const { t } = useTranslation();
-  return (
-    <div className="flex w-full flex-col gap-6 p-6 mx-auto max-w-7xl">
-      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-        <div>
-          <h1 className="text-2xl font-bold tracking-tight">{t('crudTemplate.title')}</h1>
-          <p className="text-muted-foreground">{t('crudTemplate.subtitle')}</p>
-        </div>
-        <Button className="gap-2">
-          <Plus className="size-4" />
-          {t('crudTemplate.newMember')}
-        </Button>
-      </div>
-
-      <Card>
-        <div className="flex p-4 border-b gap-2">
-          <div className="relative w-full max-w-sm">
-            <Search className="absolute left-2.5 top-2.5 size-4 text-muted-foreground" />
-            <Input placeholder={t('crudTemplate.searchPlaceholder')} className="w-full h-9 pl-8" />
-          </div>
-        </div>
-
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{t('crudTemplate.headers.name')}</TableHead>
-              <TableHead>{t('crudTemplate.headers.email')}</TableHead>
-              <TableHead className="hidden md:table-cell">
-                {t('crudTemplate.headers.role')}
-              </TableHead>
-              <TableHead>{t('crudTemplate.headers.status')}</TableHead>
-              <TableHead className="text-right">{t('crudTemplate.headers.action')}</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            <TableRow>
-              <TableCell className="font-medium">Admin Dev</TableCell>
-              <TableCell>dev@xertica.com</TableCell>
-              <TableCell className="hidden md:table-cell">
-                {t('crudTemplate.roles.administrator')}
-              </TableCell>
-              <TableCell>
-                <Badge variant="outline">{t('crudTemplate.status.active')}</Badge>
-              </TableCell>
-              <TableCell className="text-right">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="size-8">
-                      <MoreHorizontal className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>{t('crudTemplate.actions.editProfile')}</DropdownMenuItem>
-                    <DropdownMenuItem className="text-destructive">
-                      {t('crudTemplate.actions.revokeAccess')}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell className="font-medium">João Silva</TableCell>
-              <TableCell>joao@xertica.com</TableCell>
-              <TableCell className="hidden md:table-cell">
-                {t('crudTemplate.roles.editor')}
-              </TableCell>
-              <TableCell>
-                <Badge variant="secondary">{t('crudTemplate.status.inactive')}</Badge>
-              </TableCell>
-              <TableCell className="text-right">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="size-8">
-                      <MoreHorizontal className="size-4" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>{t('crudTemplate.actions.editProfile')}</DropdownMenuItem>
-                    <DropdownMenuItem className="text-destructive">
-                      {t('crudTemplate.actions.revokeAccess')}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </Card>
-    </div>
-  );
-}