Stat Component

Bandeau de base

Cinq emplacements par bloc — title,value,description,figure,actions — tous facultatifs. Le trait pointillé entre les blocs vient de daisyUI, pas de nous.

La figure est rendue en dernier dans le DOM même si elle s'affiche à droite : daisyUI place chaque partie par grid-column, jamais par l'ordre des sources. Un lecteur d'écran annonce donc « Mentions, 25,6 k » et non l'inverse. Elle est aussi aria-hidden par défaut — une icône à côté d'un nombre déjà étiqueté n'apporte rien.

Couleurs

daisyUI n'expose aucun modificateur de couleur sur les parties : ses exemples y posent de simples utilities, et teintent souvent la valeur et la description différemment. Chaque partie a donc sa propre couleur, etcolor sert d'accent commun à la valeur et à la figure — les couleurs par partie l'emportent sur lui.

Mets value sur une couleur : elle doit l'emporter sur color tout en laissant la figure sur l'accent.

Direction

Responsive

La direction accepte aussi un objet par breakpoint, via le même helper que les tailles de Tabs :direction={{ xs: 'vertical', lg: 'horizontal' }}. Empilé sur mobile, en ligne à partir de lg.

Débordement horizontal

Le point à trancher : .stats porteoverflow-x: auto, donc au-delà de la largeur disponible les blocs défilent latéralement au lieu de passer à la ligne. Le conteneur ci-dessous est volontairement étroit — fais défiler à l'horizontale à l'intérieur.

C'est le comportement daisyUI, conservé tel quel pour l'instant.

Centrage & actions

centered se pose sur le conteneur pour tous les blocs, ou sur un bloc pour l'emporter localement.actions accueille les boutons.