xertica-ui 2.7.0 → 2.8.0

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

@@ -2,8 +2,116 @@
   "breadcrumb": "Template Page",
   "title": "Template Page",
   "subtitle": "Starting point for your own pages",
-  "exampleTitle": "Example",
-  "exampleInputLabel": "Name",
-  "exampleInputPlaceholder": "Type something...",
-  "exampleButton": "Submit"
+  "sections": {
+    "overview": "Overview",
+    "buttons": "Buttons",
+    "badges": "Badges",
+    "alerts": "Alerts",
+    "forms": "Form Elements",
+    "data": "Data Table",
+    "dialogs": "Dialogs",
+    "overlays": "Overlays & Feedback",
+    "accordion": "Accordion"
+  },
+  "overview": {
+    "activeUsers": "Active Users",
+    "revenue": "Revenue",
+    "engagement": "Engagement"
+  },
+  "buttons": {
+    "title": "Buttons",
+    "description": "All button variants, sizes, and states",
+    "variants": "Variants",
+    "sizes": "Sizes",
+    "withIcons": "Icons & States",
+    "sendEmail": "Send Email",
+    "loading": "Loading",
+    "disabled": "Disabled"
+  },
+  "badges": {
+    "title": "Badges",
+    "description": "Status and label badges"
+  },
+  "alerts": {
+    "infoTitle": "Information",
+    "infoDescription": "This is an informational message for the user.",
+    "successTitle": "Success",
+    "successDescription": "The operation completed successfully.",
+    "warningTitle": "Warning",
+    "warningDescription": "Please review this before continuing.",
+    "errorTitle": "Error",
+    "errorDescription": "Something went wrong. Please try again."
+  },
+  "forms": {
+    "title": "Example Form",
+    "description": "Common form controls working together",
+    "name": "Name",
+    "namePlaceholder": "Enter your name",
+    "role": "Role",
+    "rolePlaceholder": "Select a role",
+    "roles": {
+      "developer": "Developer",
+      "designer": "Designer",
+      "manager": "Manager"
+    },
+    "bio": "Bio",
+    "bioPlaceholder": "Tell us a bit about yourself...",
+    "newsletter": "Subscribe to the newsletter",
+    "pushNotifications": "Push notifications",
+    "accountType": "Account type",
+    "accountPersonal": "Personal",
+    "accountBusiness": "Business",
+    "cancel": "Cancel",
+    "submit": "Submit",
+    "submitSuccess": "Form submitted successfully"
+  },
+  "data": {
+    "title": "Team Members",
+    "description": "Filterable data table example",
+    "searchPlaceholder": "Search by name or email...",
+    "columns": {
+      "name": "Name",
+      "email": "Email",
+      "status": "Status"
+    },
+    "status": {
+      "active": "Active",
+      "invited": "Invited",
+      "inactive": "Inactive"
+    }
+  },
+  "dialogs": {
+    "dialogTitle": "Dialog",
+    "dialogDescription": "A modal dialog for focused tasks",
+    "editProfile": "Edit Profile",
+    "editProfileDescription": "Make changes to your profile here.",
+    "name": "Name",
+    "update": "Save changes",
+    "alertDialogTitle": "Alert Dialog",
+    "alertDialogDescription": "Confirmation for destructive actions",
+    "deleteAccount": "Delete Account",
+    "areYouSure": "Are you absolutely sure?",
+    "deleteWarning": "This action cannot be undone. This will permanently delete the account.",
+    "cancel": "Cancel",
+    "continue": "Continue"
+  },
+  "overlays": {
+    "title": "Overlays & Feedback",
+    "description": "Tooltips, avatars, progress, and sliders",
+    "avatarLabel": "User avatar",
+    "tooltipLabel": "Like",
+    "tooltipContent": "Add to favorites",
+    "progressLabel": "Upload progress",
+    "sliderLabel": "Volume"
+  },
+  "accordion": {
+    "title": "Frequently Asked Questions",
+    "description": "Collapsible content sections",
+    "q1": "What is xertica-ui?",
+    "a1": "xertica-ui is an enterprise React design system built on Tailwind CSS and Radix UI.",
+    "q2": "Can I customize the theme?",
+    "a2": "Yes, colors and tokens can be customized in src/styles/xertica/tokens.css.",
+    "q3": "Does it support multiple languages?",
+    "a3": "Yes, every component supports i18n out of the box through react-i18next."
+  }
 }

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

@@ -2,8 +2,116 @@
   "breadcrumb": "Página de Plantilla",
   "title": "Página de Plantilla",
   "subtitle": "Punto de partida para tus propias páginas",
-  "exampleTitle": "Ejemplo",
-  "exampleInputLabel": "Nombre",
-  "exampleInputPlaceholder": "Escribe algo...",
-  "exampleButton": "Enviar"
+  "sections": {
+    "overview": "Resumen",
+    "buttons": "Botones",
+    "badges": "Badges",
+    "alerts": "Alertas",
+    "forms": "Elementos de Formulario",
+    "data": "Tabla de Datos",
+    "dialogs": "Diálogos",
+    "overlays": "Overlays & Feedback",
+    "accordion": "Acordeón"
+  },
+  "overview": {
+    "activeUsers": "Usuarios Activos",
+    "revenue": "Ingresos",
+    "engagement": "Interacción"
+  },
+  "buttons": {
+    "title": "Botones",
+    "description": "Todas las variantes, tamaños y estados de botón",
+    "variants": "Variantes",
+    "sizes": "Tamaños",
+    "withIcons": "Iconos & Estados",
+    "sendEmail": "Enviar Correo",
+    "loading": "Cargando",
+    "disabled": "Deshabilitado"
+  },
+  "badges": {
+    "title": "Badges",
+    "description": "Badges de estado y etiquetas"
+  },
+  "alerts": {
+    "infoTitle": "Información",
+    "infoDescription": "Este es un mensaje informativo para el usuario.",
+    "successTitle": "Éxito",
+    "successDescription": "La operación se completó con éxito.",
+    "warningTitle": "Advertencia",
+    "warningDescription": "Revisa esto antes de continuar.",
+    "errorTitle": "Error",
+    "errorDescription": "Algo salió mal. Inténtalo de nuevo."
+  },
+  "forms": {
+    "title": "Formulario de Ejemplo",
+    "description": "Controles de formulario comunes funcionando juntos",
+    "name": "Nombre",
+    "namePlaceholder": "Escribe tu nombre",
+    "role": "Cargo",
+    "rolePlaceholder": "Selecciona un cargo",
+    "roles": {
+      "developer": "Desarrollador(a)",
+      "designer": "Diseñador(a)",
+      "manager": "Gerente"
+    },
+    "bio": "Bio",
+    "bioPlaceholder": "Cuéntanos un poco sobre ti...",
+    "newsletter": "Suscribirse al boletín",
+    "pushNotifications": "Notificaciones push",
+    "accountType": "Tipo de cuenta",
+    "accountPersonal": "Personal",
+    "accountBusiness": "Empresarial",
+    "cancel": "Cancelar",
+    "submit": "Enviar",
+    "submitSuccess": "Formulario enviado con éxito"
+  },
+  "data": {
+    "title": "Miembros del Equipo",
+    "description": "Ejemplo de tabla de datos filtrable",
+    "searchPlaceholder": "Buscar por nombre o correo...",
+    "columns": {
+      "name": "Nombre",
+      "email": "Correo",
+      "status": "Estado"
+    },
+    "status": {
+      "active": "Activo",
+      "invited": "Invitado",
+      "inactive": "Inactivo"
+    }
+  },
+  "dialogs": {
+    "dialogTitle": "Diálogo",
+    "dialogDescription": "Un diálogo modal para tareas enfocadas",
+    "editProfile": "Editar Perfil",
+    "editProfileDescription": "Realiza cambios en tu perfil aquí.",
+    "name": "Nombre",
+    "update": "Guardar cambios",
+    "alertDialogTitle": "Diálogo de Alerta",
+    "alertDialogDescription": "Confirmación para acciones destructivas",
+    "deleteAccount": "Eliminar Cuenta",
+    "areYouSure": "¿Estás completamente seguro?",
+    "deleteWarning": "Esta acción no se puede deshacer. Esto eliminará permanentemente la cuenta.",
+    "cancel": "Cancelar",
+    "continue": "Continuar"
+  },
+  "overlays": {
+    "title": "Overlays & Feedback",
+    "description": "Tooltips, avatares, progreso y sliders",
+    "avatarLabel": "Avatar del usuario",
+    "tooltipLabel": "Me gusta",
+    "tooltipContent": "Agregar a favoritos",
+    "progressLabel": "Progreso de carga",
+    "sliderLabel": "Volumen"
+  },
+  "accordion": {
+    "title": "Preguntas Frecuentes",
+    "description": "Secciones de contenido colapsables",
+    "q1": "¿Qué es xertica-ui?",
+    "a1": "xertica-ui es un design system empresarial en React construido sobre Tailwind CSS y Radix UI.",
+    "q2": "¿Puedo personalizar el tema?",
+    "a2": "Sí, los colores y tokens se pueden personalizar en src/styles/xertica/tokens.css.",
+    "q3": "¿Soporta múltiples idiomas?",
+    "a3": "Sí, cada componente ya viene con soporte i18n a través de react-i18next."
+  }
 }

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

@@ -2,8 +2,116 @@
   "breadcrumb": "Página de Template",
   "title": "Página de Template",
   "subtitle": "Ponto de partida para suas próprias páginas",
-  "exampleTitle": "Exemplo",
-  "exampleInputLabel": "Nome",
-  "exampleInputPlaceholder": "Digite algo...",
-  "exampleButton": "Enviar"
+  "sections": {
+    "overview": "Visão Geral",
+    "buttons": "Botões",
+    "badges": "Badges",
+    "alerts": "Alertas",
+    "forms": "Elementos de Formulário",
+    "data": "Tabela de Dados",
+    "dialogs": "Diálogos",
+    "overlays": "Overlays & Feedback",
+    "accordion": "Acordeão"
+  },
+  "overview": {
+    "activeUsers": "Usuários Ativos",
+    "revenue": "Receita",
+    "engagement": "Engajamento"
+  },
+  "buttons": {
+    "title": "Botões",
+    "description": "Todas as variantes, tamanhos e estados de botão",
+    "variants": "Variantes",
+    "sizes": "Tamanhos",
+    "withIcons": "Ícones & Estados",
+    "sendEmail": "Enviar Email",
+    "loading": "Carregando",
+    "disabled": "Desabilitado"
+  },
+  "badges": {
+    "title": "Badges",
+    "description": "Badges de status e rótulos"
+  },
+  "alerts": {
+    "infoTitle": "Informação",
+    "infoDescription": "Esta é uma mensagem informativa para o usuário.",
+    "successTitle": "Sucesso",
+    "successDescription": "A operação foi concluída com sucesso.",
+    "warningTitle": "Atenção",
+    "warningDescription": "Revise isso antes de continuar.",
+    "errorTitle": "Erro",
+    "errorDescription": "Algo deu errado. Tente novamente."
+  },
+  "forms": {
+    "title": "Formulário de Exemplo",
+    "description": "Controles de formulário comuns funcionando juntos",
+    "name": "Nome",
+    "namePlaceholder": "Digite seu nome",
+    "role": "Cargo",
+    "rolePlaceholder": "Selecione um cargo",
+    "roles": {
+      "developer": "Desenvolvedor(a)",
+      "designer": "Designer",
+      "manager": "Gerente"
+    },
+    "bio": "Bio",
+    "bioPlaceholder": "Conte um pouco sobre você...",
+    "newsletter": "Assinar a newsletter",
+    "pushNotifications": "Notificações push",
+    "accountType": "Tipo de conta",
+    "accountPersonal": "Pessoal",
+    "accountBusiness": "Empresarial",
+    "cancel": "Cancelar",
+    "submit": "Enviar",
+    "submitSuccess": "Formulário enviado com sucesso"
+  },
+  "data": {
+    "title": "Membros da Equipe",
+    "description": "Exemplo de tabela de dados filtrável",
+    "searchPlaceholder": "Buscar por nome ou email...",
+    "columns": {
+      "name": "Nome",
+      "email": "Email",
+      "status": "Status"
+    },
+    "status": {
+      "active": "Ativo",
+      "invited": "Convidado",
+      "inactive": "Inativo"
+    }
+  },
+  "dialogs": {
+    "dialogTitle": "Diálogo",
+    "dialogDescription": "Um diálogo modal para tarefas focadas",
+    "editProfile": "Editar Perfil",
+    "editProfileDescription": "Faça alterações no seu perfil aqui.",
+    "name": "Nome",
+    "update": "Salvar alterações",
+    "alertDialogTitle": "Diálogo de Alerta",
+    "alertDialogDescription": "Confirmação para ações destrutivas",
+    "deleteAccount": "Excluir Conta",
+    "areYouSure": "Você tem certeza absoluta?",
+    "deleteWarning": "Esta ação não pode ser desfeita. Isso excluirá permanentemente a conta.",
+    "cancel": "Cancelar",
+    "continue": "Continuar"
+  },
+  "overlays": {
+    "title": "Overlays & Feedback",
+    "description": "Tooltips, avatares, progresso e sliders",
+    "avatarLabel": "Avatar do usuário",
+    "tooltipLabel": "Curtir",
+    "tooltipContent": "Adicionar aos favoritos",
+    "progressLabel": "Progresso do upload",
+    "sliderLabel": "Volume"
+  },
+  "accordion": {
+    "title": "Perguntas Frequentes",
+    "description": "Seções de conteúdo recolhíveis",
+    "q1": "O que é o xertica-ui?",
+    "a1": "xertica-ui é um design system corporativo em React construído sobre Tailwind CSS e Radix UI.",
+    "q2": "Posso customizar o tema?",
+    "a2": "Sim, cores e tokens podem ser customizados em src/styles/xertica/tokens.css.",
+    "q3": "Ele suporta múltiplos idiomas?",
+    "a3": "Sim, todo componente já vem com suporte a i18n via react-i18next."
+  }
 }

package/templates/src/styles/xertica/tokens.css

@@ -44,6 +44,7 @@
   --warning-foreground: rgba(28, 25, 23, 1);
 
   --border: rgba(228, 228, 231, 1);
+  --input-border: var(--border);
   --input: rgba(244, 244, 245, 0.5);
   --input-background: rgba(244, 244, 245, 0.5);
   --ring: rgba(161, 161, 170, 1);
@@ -84,6 +85,14 @@
   --radius-button: 12px;
   --radius-card: 12px;
 
+  /* Button stroke & secondary (theme-overridable; defaults preserve the flat look) */
+  --button-stroke-width: 0px;
+  --button-stroke-color: transparent;
+  --button-secondary-bg: var(--secondary);
+  --button-secondary-foreground: var(--secondary-foreground);
+  --button-primary-bg: var(--primary);
+  --button-primary-foreground: var(--primary-foreground);
+
   /* Mobile Content Padding — global horizontal padding on small screens.
      Change this value to adjust content padding on mobile across the entire project. */
   --mobile-content-padding: 1.25rem;

package/templates/vite.config.ts

@@ -30,16 +30,41 @@ const libAliases = isMonorepo
       { find: 'xertica-ui/media', replacement: path.join(LIB_ROOT, 'components/media/index.ts') },
       { find: 'xertica-ui/hooks', replacement: path.join(LIB_ROOT, 'components/hooks/index.ts') },
       { find: 'xertica-ui/pages', replacement: path.join(LIB_ROOT, 'components/pages/index.ts') },
+      { find: 'xertica-ui/style.css', replacement: path.join(LIB_ROOT, 'styles/globals.css') },
       // Bare `xertica-ui` must come AFTER subpaths (most-specific first).
       { find: 'xertica-ui', replacement: path.join(LIB_ROOT, 'components/index.ts') },
     ]
   : [];
 
+// ── Monorepo-only Tailwind @source shim ─────────────────────────────────────
+// Tailwind's content scanner walks down from the project root and never
+// reaches `LIB_ROOT/components` — a sibling of `templates/`, not a
+// descendant — even though the aliases above resolve `xertica-ui/*` imports
+// there. Without this, any Tailwind class used only inside library source
+// (and not duplicated elsewhere under templates/src) never gets generated in
+// this dev server. Only active in monorepo mode; scaffolded projects never
+// satisfy `isMonorepo`, so this plugin becomes a no-op and they keep relying
+// solely on the `@source` line already inside src/styles/index.css (which
+// targets node_modules/xertica-ui/components).
+const monorepoTailwindSourcePlugin = isMonorepo
+  ? {
+      name: 'xertica-monorepo-tailwind-source',
+      enforce: 'pre' as const,
+      transform(code: string, id: string) {
+        if (id.replace(/\\/g, '/').endsWith('src/styles/index.css')) {
+          const componentsPath = path.join(LIB_ROOT, 'components').replace(/\\/g, '/');
+          return `${code}\n@source '${componentsPath}';\n`;
+        }
+      },
+    }
+  : null;
+
 export default defineConfig({
   plugins: [
     // The React and Tailwind plugins are both required for Make, even if
     // Tailwind is not being actively used — do not remove them.
     react(),
+    monorepoTailwindSourcePlugin,
     tailwindcss(),
   ],
   resolve: {