🎨 UI Components (/components/ui)

Este directorio contiene los componentes visuales base (primitivos) de nuestra plataforma. Todo el sistema de diseño está construido sobre Radix UI y estilizado con Tailwind CSS v4 a través de la arquitectura de shadcn/ui.

El objetivo de esta carpeta es centralizar la "piel" de la aplicación, garantizando consistencia visual, accesibilidad (WAI-ARIA) y facilidad de mantenimiento.

🏗️ Arquitectura y Principios

Para mantener el ecosistema escalable y predecible, todos los componentes dentro de /components/ui deben cumplir estrictamente con las siguientes reglas:

1. Componentes "Tontos" (Dumb Components):

   • Los componentes aquí son puramente presentacionales.
   • No deben hacer fetching de datos.
   • No deben conectarse directamente a servicios externos (como Firebase).
   • Toda la lógica de negocio, manejo de estado complejo o validaciones (Zod) debe pasarse a través de props o delegarse a Custom Hooks en las vistas superiores (/components/features o /app).

2. Estilizado Exclusivo con Tailwind v4:

   • Se utiliza Tailwind CSS para todo.
   • Prohibido el uso de estilos en línea (style={{...}}) salvo casos dinámicos extremos.
   • Utiliza las variables y tokens de diseño definidos en el tema principal de Tailwind. No uses colores o valores hardcodeados.

3. Iconografía:

   • El estándar único para iconos es lucide-react.

4. Mobile First:

   • Todo componente debe ser responsivo por defecto, maquetando primero para pantallas móviles y aplicando modificadores (md:, lg:) progresivamente.

🚀 Cómo Utilizar los Componentes

Simplemente importa el componente desde este directorio hacia tus vistas o features. Dado que el proyecto no utiliza un directorio src/, las importaciones deben apuntar a la raíz.

// Ejemplo de uso en un formulario o vista
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Mail } from 'lucide-react';

export default function LoginForm() {
  return (
    <div className="flex flex-col gap-4">
      <Input type="email" placeholder="Correo electrónico" />
      <Button variant="default">
        <Mail className="mr-2 h-4 w-4" />
        Ingresar
      </Button>
    </div>
  );
}