BricksLab Catalog

@brickslab/ui-web

Petit bloc affichant un indicateur de performance clé (label, valeur et aide). Utilisé dans le dashboard d'accueil.

Aperçu

Cartes simples

Tests verts

94%

Moyenne des suites

Nouveaux

Ce mois

Sections

Prêtes

animate + colorScheme="auto" (vert ≥80, amber 60-79, rouge <60)

Audit qualité · 7 axesScore moyen

0/100

41 tests × 47 composants

CouvertureTests passants

0/100

Score intermédiaire

A11yAccessibilité

0/100

À améliorer

Props

Prop	Type	Défaut	Requis	Description
`label`	`string`	—	✓	Titre principal du KPI.
`value`	`string`	—	✓	Valeur principale affichée en grand.
`helper`	`string`	—	—	Texte secondaire affiché sous la valeur.
`eyebrow`	`string`	—	—	Petit label uppercase au-dessus du titre. Utile pour catégoriser le KPI (ex. : « Audit qualité · 7 axes »).
`icon`	`ReactNode`	—	—	Icône affichée dans un badge brand en haut à droite de la carte.
`suffix`	`string`	—	—	Texte accolé à la valeur (ex. : « /100 », « % »). Agrandit aussi la taille de la valeur.
`progress`	`number`	—	—	Valeur 0-100 pour afficher une ProgressBar sous la valeur. Masquée si loading est true.
`loading`	`boolean`	—	—	Masque la ProgressBar pendant le chargement des données.
`animate`	`boolean`	—	—	Active NumberTicker sur la valeur (doit être numérique). L'animation se déclenche à l'entrée dans le viewport.
`colorScheme`	`"auto" \| "brand" \| "green" \| "amber" \| "red"`	—	—	Couleur appliquée à la valeur et à la ProgressBar. "auto" choisit automatiquement selon progress : vert ≥80, amber 60-79, rouge <60.

Utilisation

tsx

import { KpiCard } from "@brickslab/ui-web";
import { FiAward } from "react-icons/fi";

// Carte simple
<KpiCard label="Tests verts" value="94%" helper="Suite unitaire" />

// Carte animée avec colorScheme auto
<KpiCard
  eyebrow="Audit qualité · 7 axes"
  label="Score moyen"
  icon={<FiAward size={14} />}
  value="87"
  suffix="/100"
  progress={87}
  helper="41 tests × 47 composants"
  animate
  colorScheme="auto"
/>