Composants
Les 54 composants, rendus. Le catalogue est lu depuis le barrel au moment du
build et les props viennent des interfaces Props exportées — pas d'une liste recopiée, parce que le README de muse a affiché trois décomptes
différents en même temps pour avoir voulu faire autrement.
Mise en page
Stack Une colonne, à l'un des quatre barreaux. C'est le parent qui possède l'espace.
bound tight content section Inline Une ligne qui passe à la ligne par défaut — sinon elle déborde ou écrase ses cibles tactiles.
Section Un bloc titré. `card` optionnel : une section qui contient une grille de cartes n'en est pas une.
Stockage
Sur tous vos espaces.
Page · PageHeader La colonne de page : centrage, largeur maximale, padding extérieur, rythme entre sections. Cette page en est une.
Tout ce que vous lisez est dans un <Page>,
et chaque titre de section est un <Section>.
Référence des props — 5 composants
Inline 5 propsUne ligne qui passe à la ligne par défaut, à l'un des quatre barreaux. Sans retour, une barre d'actions déborde ou écrase ses cibles tactiles.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
gap | Gap |
align | Align |
wrap | boolean |
class | string |
children * | Snippet |
Page 4 propsLa colonne de page : centrage, largeur maximale, padding extérieur et rythme entre les sections. Se place à l'intérieur du conteneur de défilement de la coquille.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
width | PageWidth |
gap | Gap |
class | string |
children * | Snippet |
PageHeader 5 propsLe bloc de titre d'une page : h1, description, actions et lien retour, avec le titre et sa description liés par le barreau `bound`.
étend HTMLAttributes<HTMLElement>
| Prop | Type |
|---|---|
title * | string |
description | string |
actions | Snippet |
back | { href: string; label?: string } |
class | string |
Section 8 propsUn bloc titré dans une page. La carte est optionnelle : une section qui contient une grille de cartes n'en est pas une elle-même.
étend HTMLAttributes<HTMLElement>
| Prop | Type |
|---|---|
title | string |
description | string |
actions | Snippet |
card | boolean |
gap | Gap |
bodyClass | string |
class | string |
children | Snippet |
Stack 3 propsUne colonne à l'un des quatre barreaux nommés. C'est le parent qui possède l'espace entre ses enfants, jamais l'enfant.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
gap | Gap |
class | string |
children * | Snippet |
Atomes
Button Cinq variantes sur un axe d'emphase, trois tailles. `lg` dès qu'il partage une ligne avec un champ.
IconButton Rond, 44px, avec le press de la maison. Toujours un aria-label.
Badge Le vocabulaire de tons, en huit valeurs. Se dimensionne sur son texte, jamais sur sa colonne.
Alert Ce qui reste à l'écran. Un retour qui passe est un toast.
Synchronisation en cours
Trois espaces restants.Jeton bientôt expiré
Renouvelez-le avant le 3 septembre.Échec de l'envoi
Le serveur a refusé le fichier.Input · Textarea · Select Tous en h-11. Dans un Field ils adoptent son id.
Checkbox · Radio · Switch Les trois contrôles qui s'enveloppent dans leur propre label.
Avatar Retombe sur l'initiale quand l'image échoue — pas sur son alt.
StatusDot · Spinner · Skeleton État de connexion, attente courte, forme à remplir.
Card · Divider Surface sans bordure : le remplissage sépare. Le trait ne porte aucune marge.
En dessous
Icon SVG inline, rendu côté serveur, sans requête réseau.
Référence des props — 18 composants
Alert 4 propsUn message qui reste à l'écran. Pour un retour qui passe, c'est un toast.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
tone | Tone |
title | string |
class | string |
children | Snippet |
Avatar 5 propsL'image d'un membre, avec repli sur l'initiale quand elle échoue à charger — pas sur son texte alternatif.
étend HTMLAttributes<HTMLSpanElement>
| Prop | Type |
|---|---|
src | string |
alt | string |
name | string |
size | Size |
class | string |
Badge 3 propsUne pastille d'état ou de rôle, dimensionnée sur son texte. Huit tons, un seul vocabulaire.
étend HTMLAttributes<HTMLSpanElement>
| Prop | Type |
|---|---|
tone | Tone |
class | string |
children * | Snippet |
Button 12 propsL'action principale. Cinq variantes sur un axe d'emphase, trois tailles, et `size="lg"` dès qu'il partage une ligne avec un champ.
étend Omit<HTMLButtonAttributes, 'type'>
| Prop | Type |
|---|---|
href | string |
target | HTMLAnchorAttributes['target'] |
rel | HTMLAnchorAttributes['rel'] |
download | HTMLAnchorAttributes['download'] |
type | HTMLButtonAttributes['type'] |
variant | Variant |
size | Size |
disabled | boolean |
icon | string |
iconRight | string |
class | string |
children | Snippet |
Card 5 propsLa surface conteneur du système : remplissage sans bordure, `p-5`. Avec `href`, elle devient un lien et gagne le survol et l'anneau de focus.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
href | string |
target | HTMLAnchorAttributes['target'] |
rel | HTMLAnchorAttributes['rel'] |
class | string |
children * | Snippet |
Checkbox 3 propsUne case à cocher qui adopte l'identifiant de son `Field`. La boîte fait 16px ; c'est le libellé qui porte la cible tactile.
étend Omit<HTMLInputAttributes, 'type' | 'checked'>
| Prop | Type |
|---|---|
label | string |
checked | boolean |
class | string |
ColorPicker 7 propsLe choix d'une couleur quelconque : sélecteur natif et champ hexadécimal. Pour choisir dans une palette fixe, c'est `SwatchPicker`.
étend Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>
| Prop | Type |
|---|---|
value | string |
swatches | readonly string[] |
labels | Record<string, string> |
placeholder | string |
disabled | boolean |
name | string |
onChange | (hex: string) => void; class?: string; |
Divider 1 propsUn filet de séparation. Il ne porte aucune marge : son air vient du `gap` de son parent.
étend HTMLAttributes<HTMLHRElement>
| Prop | Type |
|---|---|
class | string |
Icon 3 propsUne icône en SVG inline, rendue côté serveur et sans requête réseau. Le nom vient toujours de la map `icons`.
étend SVGAttributes<SVGSVGElement>
| Prop | Type |
|---|---|
icon * An iconify name (`solar:settings-linear`) — usually from the `icons` map. | string |
size Rendered size in pixels, applied as width, height and a matching CSS box. @default 16 | number |
class | string |
IconButton 3 propsUn bouton rond de 44px pour une action sans libellé. Il prend l'icône en enfant, et toujours un `aria-label`.
étend HTMLButtonAttributes
| Prop | Type |
|---|---|
variant | Variant |
class | string |
children * | Snippet |
Input 2 propsUn champ de saisie en 44px de haut. Dans un `Field`, il adopte l'identifiant, la description et l'état d'erreur du champ.
étend HTMLInputAttributes
| Prop | Type |
|---|---|
class | string |
value | string | number |
Radio 3 propsUn bouton radio. La validité appartient au groupe, pas au bouton, donc il ne porte pas `aria-invalid`.
étend HTMLInputAttributes
| Prop | Type |
|---|---|
label | string |
group | string |
class | string |
Select 3 propsUne liste déroulante native, alignée sur la hauteur des autres champs.
étend HTMLSelectAttributes
| Prop | Type |
|---|---|
class | string |
value | string |
children * | Snippet |
Skeleton 1 propsLa silhouette d'un contenu qui va se remplir. Se cache franchement sous mouvement réduit : son absence se lit correctement.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
class | string |
Spinner 3 propsUne attente courte. Sous mouvement réduit il ralentit au lieu de se figer — un indicateur d'activité figé n'indique rien.
étend HTMLAttributes<HTMLSpanElement>
| Prop | Type |
|---|---|
size | Size |
label | string |
class | string |
StatusDot 4 propsUn état de connexion ou de santé, en une pastille et son libellé.
étend HTMLAttributes<HTMLSpanElement>
| Prop | Type |
|---|---|
tone | Tone |
label | string |
pulse | boolean |
class | string |
Switch 4 propsUn interrupteur. Dans une `SettingsRow` il prend `aria-label` et jamais de libellé visible : la ligne le porte déjà.
étend Omit<HTMLInputAttributes, 'type' | 'checked'>
| Prop | Type |
|---|---|
label | string |
checked | boolean |
disabled | boolean |
class | string |
Textarea 2 propsUne zone de texte multiligne, redimensionnable verticalement, qui adopte le contexte de son `Field`.
étend HTMLTextareaAttributes
| Prop | Type |
|---|---|
class | string |
value | string |
Molécules
Field Rend un vrai <label for>, et les contrôles muse adoptent son id par contexte.
Tabs Pastille inversée qui glisse. Avec des href, l'URL est la source de vérité.
OptionCards Le contrôle « un parmi N » : thème, mode d'affichage, base de facturation.
StatCard Un chiffre et son libellé. La gouttière entre eux ne descend jamais sous le padding.
SecretField Masque à longueur fixe, révélation qui se recache, copie avec accusé.
SettingsSection · SettingsRow La forme standard d'une page de réglages, dans toute la suite.
Notifications
Ce qui arrive dans votre boîte.
Chaque lundi matin.
Quand quelqu'un vous cite.
SwatchPicker · ColorPicker Choisir dans une palette fixe, ou choisir n'importe quelle couleur.
SpaceSwitcher Le sélecteur d'espace du rail. Se retourne quand il manque de place sous lui.
NavButton Une ligne de navigation. Se réduit à un carré de 44px dans le rail replié.
EmptyState Une liste vide est un EmptyState, jamais un paragraphe. La hauteur est le sujet.
Aucun projet
Créez-en un pour commencer à suivre le temps.
Dropzone Valide aussi le dépôt, pas seulement le sélecteur — le navigateur ne filtre que le second.
Référence des props — 14 composants
Dropzone 11 propsLe dépôt de fichiers. Il valide aussi le chemin du glisser-déposer, pas seulement celui du sélecteur — le navigateur ne filtre que le second.
étend HTMLLabelAttributes
| Prop | Type |
|---|---|
files | File[] |
accept | string |
multiple | boolean |
maxSize | number |
maxFiles | number |
disabled | boolean |
label | string |
browseLabel Text of the browse affordance. @default 'Parcourir' | string |
dropAnnouncement Announced to assistive tech while a drag is over the zone. @default 'Relâchez pour ajouter les fichiers' | string |
hint | string |
onFiles | (files: File[]) => void; onReject?: (rejections: Rejection[]) => void; children?: Snippet; class?: string; |
EmptyState 6 propsUne liste sans contenu. La hauteur est le sujet : une carte de deux lignes se lit comme une panne, une carte haute et calme comme un choix.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
icon | string |
title * | string |
description | string |
bare | boolean |
class | string |
children | Snippet |
Field 6 propsL'étiquetage d'un contrôle. Il rend un vrai `label for`, et les contrôles muse adoptent son identifiant par contexte, sans câblage.
étend Omit<HTMLAttributes<HTMLDivElement>, 'children'>
| Prop | Type |
|---|---|
label | string |
helper | string |
error | string |
for | string |
children * | Snippet<[{ id: string; describedBy: string | undefined }]> |
class | string |
NavButton 8 propsUne ligne de navigation. Elle se réduit à un carré de 44px quand le rail se replie.
étend HTMLAnchorAttributes | HTMLButtonAttributes
| Prop | Type |
|---|---|
href | string |
icon | string |
label | string |
active | boolean |
collapsed | boolean |
textDelay | number |
class | string |
right | Snippet |
OptionCards 5 propsLe choix d'une option parmi N — thème, mode d'affichage, base de facturation — en cartes à icône plutôt qu'en liste.
étend Omit<HTMLAttributes<HTMLDivElement>, 'onselect'>
| Prop | Type |
|---|---|
options | Option[] |
value | string |
name | string |
label | string |
onSelect | (value: string) => void; class?: string; |
SecretField 15 propsL'affichage d'un secret : masque à longueur fixe, révélation qui se recache, copie avec accusé, et `REDACTED` traité comme une absence de valeur.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
value | string |
label | string |
helper | string |
error | string |
placeholder | string |
editable | boolean |
sensitive | boolean |
copyable | boolean |
mask | 'ends' | 'full' |
visible | boolean |
autoHideMs | number |
disabled | boolean |
for | string |
actions | Snippet |
onReveal | (visible: boolean) => void; onCopy?: (ok: boolean) => void; class?: string; |
SettingsRow 6 propsUne ligne de réglage : libellé, description et contrôle. Le contrôle prend `aria-label`, jamais un libellé visible.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
label | string |
description | string |
for | string |
stacked | boolean |
class | string |
children | Snippet |
SettingsSection 7 propsUn bloc de réglages. C'est `Section` avec la carte activée par défaut, parce qu'un bloc de réglages est une surface qui porte des lignes.
étend HTMLAttributes<HTMLElement>
| Prop | Type |
|---|---|
title | string |
description | string |
actions | Snippet |
bare | boolean |
bodyClass | string |
class | string |
children | Snippet |
SpaceSwitcher 3 propsLe sélecteur d'espace du rail. Il se retourne vers le haut quand il manque de place sous lui.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
spaces | SpaceItem[] |
activeId | string | null |
onSelect | (id: string | null) => void; personalLabel?: string; manageHref?: string; manageLabel?: string; class?: string; |
StatCard 5 propsUn chiffre et son libellé. La gouttière entre les cartes ne descend jamais sous leur propre padding.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
label * | string |
value * | string | number |
delta | string |
children | Snippet |
class | string |
SwatchPicker 8 propsLe choix dans une palette fixe — la couleur d'identité d'un membre, d'un calendrier. Pour une couleur quelconque, c'est `ColorPicker`.
étend Omit<HTMLAttributes<HTMLDivElement>, 'onselect'>
| Prop | Type |
|---|---|
colors | readonly string[] |
value | string |
labels | Record<string, string> |
showLabels | boolean |
size | Size |
name | string |
label | string |
onSelect | (color: string) => void; class?: string; |
Tabs 3 propsLe passage d'une section à l'autre, par une pastille inversée qui glisse. Avec des `href`, l'URL devient la source de vérité.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
items | Item[] |
value | string |
onChange | (id: string) => void; panelId?: string; label?: string; class?: string; |
Toast 5 propsLa présentation d'un message éphémère. La file et l'auto-fermeture appartiennent à `Toaster`.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
tone | ToastTone |
title | string |
icon | string | null |
action | ToastAction |
onDismiss | () => void; class?: string; children?: Snippet; |
UploadProgress 2 propsL'avancement d'un envoi de fichiers, par élément, avec ses états de reprise et d'échec.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
items * | Item[] |
onCancel | (id: string) => void; onRetry?: (id: string) => void; showTotal?: boolean; class?: string; |
Organismes
Modal · Drawer · ConfirmModal Un <dialog> natif : le navigateur les met dans sa couche supérieure, au-dessus de tout z-index.
Table Surface de données. Le tri et la sélection appartiennent encore au consommateur.
| Projet | Heures |
|---|---|
| Refonte du site | 42,5 |
| Application mobile | 18,0 |
ProfileCard Le bloc d'identité : avatar, nom, et les actions de session.
Topbar Chrome collant, utilisé sur mobile là où le rail n'existe pas.
Toaster Un retour sans question dedans. Se met en pause au survol, ne peut pas couvrir un <dialog>.
Référence des props — 9 composants
ConfirmModal 8 propsLa confirmation d'une action destructive. Jamais une `Modal` nue avec deux boutons : elle gère l'attente et reste ouverte en cas d'échec.
étend HTMLDialogAttributes
| Prop | Type |
|---|---|
open | boolean |
title * | string |
description | string |
confirmLabel | string |
cancelLabel | string |
tone | Tone |
icon | string |
onConfirm | () => void | Promise<void>; onCancel?: () => void; children?: Snippet; class?: string; |
Drawer 9 propsUne feuille qui monte du bas, refermable au glissement. Pour un panneau de bureau, c'est une `Modal`.
étend HTMLDialogAttributes
| Prop | Type |
|---|---|
open | boolean |
title | string |
description | string |
children * | Snippet |
footer | Snippet |
showHandle | boolean |
showClose | boolean |
dismissible | boolean |
onClose | () => void; class?: string; |
MobileNav 5 propsLa barre-pilule flottante des écrans étroits. Quatre entrées tiennent au plancher de 360px.
étend HTMLAttributes<HTMLElement>
| Prop | Type |
|---|---|
items | NavItem[] |
user | User |
profileHref | string |
profileActive | boolean |
class | string |
Modal 6 propsUn dialogue natif : le navigateur le place dans sa couche supérieure, au-dessus de tout z-index.
étend HTMLDialogAttributes
| Prop | Type |
|---|---|
open | boolean |
title | string |
dismissible | boolean |
showClose | boolean |
size | Size |
onClose | () => void; header?: Snippet; footer?: Snippet; children: Snippet; class?: string; |
ProfileCard 10 propsLe bloc d'identité d'un membre : avatar, nom et actions de session.
étend Omit<HTMLAttributes<HTMLDivElement>, 'role'>
| Prop | Type |
|---|---|
name * | string |
email | string |
avatar | string |
color | string |
role | string |
meta | Meta[] |
actions | Snippet |
children | Snippet |
orientation | Orientation |
class | string |
SideBar 10 propsLe rail de navigation, une carte flottante et repliable. Il porte la navigation, le sélecteur d'espace et la carte utilisateur.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
icon | string |
title | string |
pages | Page[] |
user | User |
userHref | string |
userActive | boolean |
collapsed | boolean |
showSearch | boolean |
showCollapse | boolean |
onSearch | () => void; spaces?: SpaceItem[]; activeSpaceId?: string | null; onSpaceSelect?: (id: string | null) => void; manageSpacesHref?: string; personalSpaceLabel?: string; manageSpacesLabel?: string; class?: string; |
Table 2 propsLa surface d'un tableau de données. Le tri et la sélection appartiennent encore au consommateur.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
children * | Snippet |
class | string |
Toaster 2 propsLa file de messages éphémères, montée une seule fois par application, à la racine.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
position | 'top' | 'bottom' |
class | string |
Topbar 2 propsUn bandeau collant, utilisé là où le rail n'existe pas.
étend HTMLAttributes<HTMLElement>
| Prop | Type |
|---|---|
children * | Snippet |
class | string |
Graphiques
LineChart SVG sans dépendance. Ne passez pas vos propres couleurs : la palette est validée pour le contraste.
BarChart Empilable. Chaque coin qui fait face à une gouttière est arrondi ; la ligne de base reste carrée.
DonutChart Jamais arrondi au stroke-linecap : ça pousse chaque part d'une demi-épaisseur au-delà de son angle.
- Design 42 · 26.9%
- Développement 96 · 61.5%
- Réunions 18 · 11.5%
| Slice | Value | Share |
|---|---|---|
| Design | 42 | 26.9% |
| Développement | 96 | 61.5% |
| Réunions | 18 | 11.5% |
Sparkline Une tendance dans une ligne de tableau, sans axes ni légende.
Référence des props — 6 composants
BarChart 8 propsUn graphique en barres, empilable. Chaque coin face à une gouttière est arrondi ; la ligne de base reste carrée.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
series * | ChartSeries[] |
labels * | string[] |
height | number |
stacked | boolean |
horizontal | boolean |
showGrid | boolean |
showLegend | boolean |
yFormat | (n: number) => string; yTicks?: number; animate?: boolean; emptyLabel?: string; class?: string; |
ChartLegend 2 propsLa légende d'un graphique. L'écart entre deux entrées bat toujours celui qui les compose.
| Prop | Type |
|---|---|
items * | ChartLegendItem[] |
class | string |
ChartTooltip 6 propsL'infobulle d'un graphique, ramenée dans les bornes de son conteneur et du viewport.
| Prop | Type |
|---|---|
x * | number |
y * | number |
title | string |
rows * | ChartTipRow[] |
visible * | boolean |
class | string |
DonutChart 8 propsUn anneau de proportions. Jamais arrondi au `stroke-linecap` : ça pousse chaque part au-delà de l'angle qu'elle représente.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
data * | ChartSlice[] |
size | number |
thickness | number |
corner | number |
showLegend | boolean |
centerLabel | string |
centerValue | string | number |
valueFormat | (n: number) => string; animate?: boolean; emptyLabel?: string; class?: string; |
LineChart 8 propsUne évolution dans le temps. Ne passez jamais vos propres couleurs : la palette est validée pour le contraste et le daltonisme.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
series * | ChartSeries[] |
labels * | string[] |
height | number |
area | boolean |
smooth | boolean |
showGrid | boolean |
showLegend | boolean |
yFormat | (n: number) => string; xFormat?: (label: string, i: number) => string; yTicks?: number; animate?: boolean; emptyLabel?: string; class?: string; |
Sparkline 7 propsUne tendance dans une ligne de tableau, sans axes ni légende.
étend HTMLAttributes<HTMLDivElement>
| Prop | Type |
|---|---|
data * | number[] |
height | number |
area | boolean |
smooth | boolean |
color | string |
showLast | boolean |
valueFormat | (n: number) => string; animate?: boolean; emptyLabel?: string; class?: string; |
Motion
Référence des props — 2 composants
PageTransition 5 propsL'animation d'un changement de route, cadencée sur la route. Entrée seule : un vrai fondu croisé demanderait de monter les deux pages.
| Prop | Type |
|---|---|
key * | string | number |
duration | number |
distance | number |
children * | Snippet |
class | string |
TextElevate 6 propsUne ligne de texte qui monte en place. Utilisée pour le titre du rail et ses libellés.
| Prop | Type |
|---|---|
text * | string |
visible | boolean |
delay | number |
stagger | number |
duration | number |
class | string |