Sent Tech Design System

Action primaire, secondaire, fantôme ou destructive.

Regroupe des boutons, en segments joints ou espacés.

Bouton dédié à la copie d’une valeur dans le presse-papier.

Bouton icône compact 32-36 px, aria-label obligatoire, Lucide.

Lien stylé cohérent avec le DS, support disabled/external.

Calendrier mensuel : date unique ou plage, bornes min/max.

Case à cocher avec états error/disabled et helper text.

Ensemble de cases à cocher avec légende, valeurs multiples.

Champ texte autocomplété avec sélection dans une liste.

Sélecteur de date, mode simple ou plage.

Liste déroulante de sélection (listbox).

Téléversement de fichiers avec états de progression.

Wrapper formulaire avec statut submitting/error/success.

Fieldset/legend groupant des contrôles avec helper text.

Champ texte standard, tailles sm/md/lg.

Sélection multiple avec tags filtrables.

Champ numérique avec incrément/décrément.

Champ mot de passe avec bascule visibilité.

Bouton radio groupé via `name`.

Choix exclusif parmi plusieurs options, légende et a11y.

Curseur à deux poignées pour sélectionner une plage de valeurs.

Champ de recherche avec icône et bouton clear.

Sélecteur natif stylé, tailles sm/md/lg.

Listbox accessible pilotant ses rangées : sélection unique ou multiple, navigation clavier.

Rangée sélectionnable pleine largeur : surface teintée + texte accentué, slots leading/trailing.

Curseur de valeur continue.

Bascule on/off.

Champ texte multi-ligne.

Groupe de tuiles sélectionnables (radio), avec légende.

Sélection d'une heure parmi des créneaux générés par pas.

Sélecteur de plage temporelle : presets relatifs ou plage absolue.

Toggle compact (variante du Switch).

Barre de rédaction avec slots d’actions et envoi/arrêt.

Bulle de message visuelle avec rôles et statut.

Liste de messages scrollable avec auto-scroll et état vide.

Rangée d’actions d’un message avec boutons icône et overflow optionnel.

Badge de statut de message basé sur les niveaux pending/processing/completed/failed.

Bulle assistant avec affichage d’événements de streaming (deltas, raisonnement, outils, permissions).

Coque de navigation complète et paramétrable : marque, nav, contrôles (thème, mode couleur, langue, GitHub, identité) et tiroir mobile.

En-tête applicatif compact avec burger, navigation et zone d’actions.

Bouton d’accès rapide qui remonte vers le haut de la page au défilement.

Fil d’Ariane sémantique.

Bascule segmentée entre plusieurs vues.

Pied de page applicatif : marque, colonnes de liens, copyright et liens légaux.

En-tête applicatif avec logo, navigation et actions.

Sélecteur de langue compact (i18n) : langue courante + menu.

Bascule de langue contrôlée, en select desktop ou accordéon mobile.

Menu d’actions contextuel.

Bouton icône carré préconfiguré pour ouvrir un menu (haspopup/expanded câblés).

Pile d'actions avec hiérarchie encodée dans le type (une seule primaire) et zone sensible destructrice isolée.

Rangée de navigation canonique : tête (pastille couleur ou ton), titre, caption muette, bulle de compte, profondeur typographique et statut sémantique.

En-tête de groupe d'un rail/drawer : libellé small-caps, compteur, action de section et mode repliable (disclosure).

Menu d’actions secondaires accessibles via un déclencheur compact.

Navigation de pages avec page courante.

Pagination étendue avec page numérotée et ellipses.

Navigation latérale verticale.

Lien d'évitement (a11y) : hors écran jusqu'au focus clavier.

Points ou barres signalant la diapositive courante d'un carrousel.

Indicateur d'étapes d'un parcours, horizontal ou vertical.

Menu d’itinéraire de page avec liens ancres par niveau.

Onglets tablist/tab/tabpanel.

Arborescence : expand/collapse, sélection, navigation clavier (flèches).

Panneau latéral pour workflows secondaires.

Panneau flottant ancré à un déclencheur externe, avec placement, fermeture extérieure et Escape.

Dialogue modal recentré.

Contenu contextuel compact ancré à un déclencheur.

Positionne un panneau flottant près d'une ancre : flip, shift, arrow.

Tooltip activable au clic, persistant.

Info contextuelle au survol/focus.

Bandeau d’information info/success/warning/error.

Indicateur d'enregistrement automatique : en cours, enregistré, échec.

État vide avec action principale.

Liste agrégée des erreurs d’un formulaire, chaque entrée reliée au champ fautif.

Indicateur de chargement inline accompagné d’un libellé.

Indicateur de chargement plein ou skeleton.

Notification inline/actionable avec tonalités info/success/warning/error.

Barre de progression déterminée ou indéterminée.

Suite d’étapes avec statut complete/current/upcoming.

Note par étoiles, lecture seule ou interactive, demi-étoiles.

Placeholder lignes de texte en chargement.

Pastille de statut colorée par tonalité (ou couleur arbitraire), halo « live » optionnel et libellé optionnel.

Liste verticale/horizontale d'événements datés : ligne de connexion, pastilles de statut, titre, méta (date) et description par item.

Notification éphémère success/error.

Heatmap temps × job : la couleur encode un score d'anomalie continu (gradient d'intensité).

Diagramme en arcs : nœuds alignés sur un axe, arcs pondérés colorés par source.

Graphique d’aire pour visualiser des données temporelles ou numériques.

Bande remplie entre une série basse et une série haute le long d'un axe X (ex. fourchette de température jour par jour, min/max boursier).

Variante spline d'AreaRange : bande remplie entre une série basse et une série haute le long d'un axe X, contours toujours lissés (ex. fourchette de température, intervalle de confiance).

Étiquette compacte avec tonalité (success/warning/...).

Graphique en barres (vertical ou horizontal) avec tons catégoriels.

À partir d'un échantillon de nombres bruts, calcule la moyenne μ et l'écart-type σ puis trace la densité de la loi normale (courbe en cloche) avec repères à μ et μ±σ, μ±2σ.

Boîtes à moustaches pour comparer des distributions et leurs valeurs atypiques.

Bullet graph : mesure vs cible avec bandes qualitatives.

Classements dans le temps : lignes qui montent et descendent.

Grille calendrier GitHub-style pour visualiser l'activité quotidienne.

Bougies OHLC pour visualiser les cours financiers.

Diagramme en cordes : flux pondérés entre nœuds répartis sur un cercle.

Extrait de code inline ou bloc, avec copie.

Échelle de couleur continue (gradient) à partir de stops arbitraires, avec libellés d'extrémités min/max.

Pastille d'une couleur arbitraire (hex/rgb/oklch/token) avec libellé optionnel : brique d'une palette ou d'une légende.

Colonnes pyramidales : chaque catégorie est un triangle, base sur l'axe X et sommet à la hauteur de la valeur.

Barres d'intervalle bas/haut par catégorie (ex. températures min/max, fourchettes de prix).

Graphique combiné barres + courbes, double axe Y, légende.

Carte d'item de configuration : nom, clé, description, badge de provenance et actions selon la provenance.

Contour topographique : grille 2D peinte en bandes de couleur avec isolignes aux ruptures de niveau (échelle data category1…8).

Canvas de tuiles analytiques positionnées par grille, avec mode édition accessible.

Grille de panneaux sérialisable sur douze colonnes.

Image résolue depuis une ligne de données (gabarits {{champ}}).

Table avancée: tri, sélection multi-lignes.

Arbre de décomposition hiérarchique : une mesure totale éclatée niveau par niveau en colonnes de barres reliées au parent.

Densité 2D binned sur axes numériques : points (x,y) agrégés en cellules dont la couleur encode la densité.

Roue de dépendances : nœuds sur un cercle, rubans pondérés colorés par source.

Barres divergentes positives, négatives et neutres autour d'un axe zéro.

Graphique en anneau (parts d'un total), tooltip et total au centre.

Pour chaque catégorie, une ligne reliant une valeur basse à une valeur haute, avec un cercle teinté à chaque extrémité (ex. avant/après, min/max).

Pour chaque catégorie, un marqueur au point central (moyenne) et une moustache de la borne basse à la borne haute avec un capuchon à chaque extrémité (intervalle d'incertitude / de confiance).

Flux d'événements datés et scrollable : items triés par date, pastille de sévérité, horodatage et message.

Barre regroupant des FilterPill avec action optionnelle « Tout effacer ».

Pilule de filtre actif : champ, opérateur, valeur et bouton de retrait.

Pile d'appels « icicle » empilée : largeur ∝ valeur, hiérarchie récursive posée niveau par niveau.

Graphe à force dirigée (nœuds/liens), simulation autonome, nœuds focusables, tooltip.

Entonnoir vertical ou horizontal avec pourcentages de conversion par étape.

Diagramme de Gantt : une ligne par tâche, barre horizontale start→end sur un axe temporel, couleur par catégorie.

Jauge semi-circulaire avec seuils colorés, valeur et unité centrées.

Carte 2D générique à couches (GeoJSON, choroplèthe, points, densité, flux, hexbin, clusters), projection équirectangulaire ou Mercator, liste de valeurs accessible.

Matrice colorée pour croiser deux dimensions catégorielles.

Chandeliers Heikin-Ashi : OHLC lissé par moyennes successives pour faire ressortir la tendance.

Histogramme pour afficher des classes explicites ou générées.

Bâtons HLC : barre verticale low→high, tick droite à la clôture (variante d'OHLC sans tick d'ouverture).

Chandeliers creux : couleur selon la clôture vs la précédente, corps creux si haussier et plein si baissier.

Graphe « parlement » / hémicycle : sièges en rangées concentriques, blocs contigus par groupe, taille lue à la longueur de l'arc.

Carte indicateur clé avec valeur, delta, tendance et sparkline optionnelle.

Graphique en courbes pour séries temporelles ou numériques.

Diagramme en sucette : tige fine et pastille pour comparer des valeurs par catégorie.

Matrice Marimekko : largeur de colonne pondérée, segments en hauteur.

Bâtons OHLC : barre verticale low→high, tick gauche à l'ouverture, tick droite à la clôture.

Liste ordonnée numérotée, avec imbrication.

Organigramme hiérarchique : une boîte par nœud disposée par niveau, enfants centrés sous le parent, connecteurs orthogonaux.

Bulles tassées dont l'aire est proportionnelle à la valeur.

Axes parallèles pour comparer des enregistrements multidimensionnels.

Barres triées décroissantes avec courbe cumulée en pourcentage (loi de Pareto).

Point & Figure : colonnes de X (hausse) et de O (baisse) selon le mouvement de prix (boxSize + reversal).

Polygone fermé rempli reliant des points x/y dans l'ordre fourni (zones/clusters), contour + sommets, axes numériques.

Matrice de priorisation 2×2 (complexité/valeur), quadrants teintés et étiquettes placées sans chevauchement.

Radar polaire pour comparer plusieurs séries sur des axes communs.

Briques Renko : à partir d'une série de prix, empile des briques d'une taille fixe (boxSize) en ignorant le temps régulier.

Rang empilé à rubans dans le temps : barres triées par valeur et rubans lissés reliant chaque catégorie d'une période à l'autre.

Diagramme polaire de Nightingale : rayon proportionnel à la valeur, secteurs d'angle égal.

Diagramme de flux pondérés entre nœuds catégoriels.

Nuage de points (deux axes numériques), tooltip et liste de valeurs accessible.

Carte de score : titre, notation symbolique (étoiles / croix) et score chiffré, types value et complexity.

Carte d’indicateur agrégée depuis un store (rend KpiCard).

Chip compact affichant une sélection avec compteur et bouton d'effacement.

Anneau de progression plein : arc rempli proportionnel à la valeur, teinté par seuils, valeur centrale.

Mini-graphique en ligne, inline, pour tendances compactes.

Barres empilées (séries), légende, tooltip par segment.

Bandes d'états discrets dans le temps : une ligne par série, segments contigus colorés par état.

Grille temps × entité : chaque cellule encode un statut discret par bucket temporel.

Courbe en paliers : la valeur reste stable jusqu'au prochain seuil.

Streamgraph (themeriver) : aires empilées et lissées sur une ligne de base centrée « wiggle », pour des séries temporelles.

Liste clé/valeur structurée (paires terme/définition).

Hiérarchie radiale pour explorer les contributions imbriquées.

Table HTML stylée colonnes/rows.

Tag/chip à libellé court.

Carte en tuiles (cartogramme « tilemap ») : grille de cellules carrées posées à des coordonnées (col, row) explicites, colorées par valeur sur une échelle séquentielle.

Frise chronologique : événements positionnés sur un axe horizontal gradué, marqueurs catégoriels et libellés alternés au-dessus/dessous.

Série temporelle continue depuis un store (React uniquement).

Trace de spans distribués : barres start → durée sur l'axe temps, ordonnées et indentées par hiérarchie.

Arbre/dendrogramme horizontal (gauche→droite) : nœuds circulaires hiérarchiques par profondeur, liens en courbes de Bézier, feuilles réparties verticalement.

Carte proportionnelle hiérarchique (squarified), 1 ou 2 niveaux, labels.

Liste à puces, avec imbrication.

Liaison store ↔ URL : deep-linking déclaratif de l’état dashboard.

Camembert à rayon variable : l'angle de chaque part ∝ value, le rayon ∝ une 2e métrique z mappée entre rayon min et max.

Champ de vecteurs : grille de flèches dont la longueur encode la magnitude et l'orientation la direction.

Diagramme de Venn / Euler : 2 ou 3 ensembles en cercles superposés, intersections étiquetées ; rayon ∝ √(taille de l'ensemble).

Densité de distribution en miroir par catégorie, avec médiane et quartiles.

Grille N×M de cellules : la proportion de cellules colorées encode la part de chaque catégorie.

Graphique en cascade (augmentations, diminutions, totaux) avec connecteurs.

Cadre web intégré et durci (sandbox, titre, chargement paresseux).

Barbes de vent : une barbe par point le long d'un axe temporel, hampe orientée et barbules encodant la vitesse.

Nuage de mots : taille de police ∝ poids, placement déterministe en spirale d'Archimède sans chevauchement.

Liste de panneaux pliables.

Conteneur à ratio d'aspect fixe (média, embeds).

Conteneur surface avec bordure et padding.

Colonne d'une grille 12 (span, offset, surcharges responsives).

En-tête cliquable révélant une région de contenu repliable.

Conteneur centré à largeur maximale bornée (sm…full).

Séparateur horizontal/vertical, optionnellement avec libellé.

Carte de groupe de champs : en-tête titré, pastille de commentaires optionnelle, variantes bordered / plain / accent.

Boîte flex : direction, gap, alignement et justification.

Grille CSS simple : colonnes fixes ou auto-fill responsive.

Masque son contenu au-dessus/en-dessous d'un breakpoint.

Mise en avant / encart éditorial, avec tonalité d'accent.

Flux horizontal qui passe à la ligne, gap homogène.

Section d'un PanelStack : en-tête repliable et corps propriétaire du défilement.

Citation éditoriale (blockquote) avec auteur et source.

Ligne d'une grille 12 colonnes, gouttière paramétrable.

Empilement vertical avec gap homogène (raccourci Flex column).

Tuile unitaire : présentation, cliquable (lien/bouton) ou sélectionnable (case).

Vignette d'identité : initiales colorées ou photo, plusieurs tailles.

Pile d'avatars avec recouvrement et jeton de débordement « +N ».

Image pilotée par props/état (src, alt, object-fit, dimensions, rayon).

Préférences d’affichage (taille de texte, contraste, interligne, animations).

Iframe contrôlée avec sandbox strict, ratio et chargement configurable.

Jeu d'icônes prescrit par le DS, adressé par noms gelés (IconName).

Conteneur de média avec légende, titre et métadonnées associées.

Étiquette de section discrète en petites capitales (libellé de groupe au-dessus d'un bloc).

Téléporte son contenu ailleurs dans le DOM (par défaut <body>) ; SSR-safe.

Bloc repliable de transcription audio/vidéo avec horodatage et intervenant.

Composant de texte : variantes, poids, ton, alignement.