@nomosui/react 0.5.3 → 0.6.0

package/SKILL.md

@@ -33,11 +33,17 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
   Jamais pour une information essentielle : elle n'est ni au clavier seul ni au tactile.
 - **Représenter une personne par son image** → `Avatar` (le texte alternatif et le repli
   viennent de l'app ; natif `<img>` + `onError`, sans dépendance).
+- **Coiffer un titre d'une accroche courte** → `Kicker` (un libellé en majuscules, un point
+  de ton optionnel via `dot` ; le texte est injecté par l'appelant).
 
 ### Agir, saisir
 
 - **Agir** → `Button` (`variant` = le ton, `size` = la densité ; `asChild` pour poser le
   style sur un lien).
+- **Naviguer vers une URL** → `Link` (un `<a>` ; `href` et libellé injectés, le cœur ne
+  porte aucun routing ; `asChild` pour poser le style sur un composant de routing de l'app).
+- **Copier un texte** → `CopyButton` (`value` à copier, `label`/`copiedLabel` et `icon`
+  injectés ; le libellé transitoire revient seul après ~2 s).
 - **Saisir une ligne** → `Input` ; **un nombre borné** → `NumberField` (`step`, `min`,
   `max` du natif) ; **chercher avec icône et effacement** → `SearchField` ; **plusieurs
   lignes** → `Textarea`.
@@ -52,8 +58,13 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
 ### Structurer
 
 - **Une surface** (titre, corps, pied) → les parts de `Card`.
+- **L'en-tête d'un site** (marque, navigation, actions) → `Navbar` : une barre sticky en
+  haut, bordure basse, fond du cœur. Les slots `brand`, `nav` et `actions` sont injectés
+  par l'app — aucun `href` ni mot produit dans le cœur (ADR 0030).
 - **Un état vide, ou une panne à nommer** → `EmptyState` (la carte centrée ; le `detail`
   brut nomme la vraie panne, plutôt qu'un zéro silencieux).
+- **Un pied de page** (marque, rangée de liens, ligne légale) → `Footer` : des emplacements
+  injectés (`brand`, `links`, `legal`), sans routing ni libellé propre au cœur.
 - **Une information inline** qui demande l'attention sans bloquer → `Alert` (le ton vient
   du cœur ; `onClose` va avec `closeLabel`).
 - **Séparer deux contenus** → `Separator` ; **tenir la place d'un contenu qui charge** →
@@ -86,6 +97,18 @@ pour expliquer une brique, elle appartient à l'app, pas au cœur.
   (sélection multiple) ; ouverture et sélection sont contrôlées par props, le focus
   clavier (rôle `tree`, flèches) est interne.
 
+### Écrire
+
+- **Titrer une section** → `Heading` : `level` choisit la balise `h1`..`h6` **et** la taille
+  sémantique (display, title, lead, body, caption, micro). La hiérarchie du document se
+  décide par le niveau, jamais par la taille.
+- **Écrire le texte courant** → `Text` : `size` lit l'échelle sémantique (`lead`, `body`,
+  `caption`, `micro`), `as` choisit `p` (défaut) ou `span` pour un texte inline. Les tailles
+  viennent des tokens, jamais d'un utilitaire ad-hoc.
+- **Montrer un extrait de code** → `Code` (inline, dans une phrase) ou `CodeBlock` (bloc
+  scrollable avec bouton de copie ; `code` est le texte copié, `children` le rendu, les
+  libellés sont injectés). La coloration syntaxique reste à l'app.
+
 ### Formulaire
 
 - **Mettre en page** → `Form` (grille de champs + zone d'actions, `columns` pour deux
@@ -132,7 +155,10 @@ button
 card
 checkbox
 chip
+code
+code-block
 collapsible
+copy-button
 counter
 data-table-pagination
 data-table-toolbar
@@ -142,11 +168,16 @@ empty-state
 facet-filter
 field
 fieldset
+footer
 form
 freshness
+heading
 input
+kicker
 label
+link
 meter
+navbar
 number-field
 popover
 progress-bar
@@ -161,6 +192,7 @@ skeleton
 switch
 table
 tabs
+text
 textarea
 timeline
 toast