@zevra/ui 0.9.0 → 0.11.0

package/react/actions.tsx

@@ -11,6 +11,7 @@ import type {
   ReactNode,
 } from 'react'
 import { cx } from './cx.js'
+import { Icon, type IconId } from './icon.js'
 
 /** Variantes de bouton. Une seule pleine par écran — c'est la règle de
  *  charte, et « danger » COMPTE comme la pleine : la règle compte les
@@ -33,6 +34,17 @@ export interface ButtonProps
   compact?: boolean
   /** Pleine largeur — l'appel à l'action d'un écran mobile. */
   bloc?: boolean
+  /** L'icône du jeu, posée devant le libellé (16 px, couleur héritée).
+   *  La fournir en prop plutôt qu'en enfant évite les tracés recopiés à la
+   *  main — la faute qui avait produit trois flèches différentes. */
+  icone?: IconId
+  /** …ou après lui : « Étape suivante › ». Pour un LIEN qui avance, c'est
+   *  LinkArrow — la flèche animée appartient au lien, pas au bouton. */
+  iconeApres?: IconId
+  /** Bouton d'action à icône SEULE (48×48, 40×40 en compact) : l'envoi
+   *  d'un composeur, l'action unique d'une barre. ⚠️ aria-label OBLIGATOIRE,
+   *  écrit pour l'ACTION (« Envoyer le message »), pas pour le dessin. */
+  carre?: boolean
   /** Attente pendant l'action : pose aria-busy et aria-disabled, et AVALE
    *  le clic — sans poser `disabled`, qui sortirait le bouton du parcours
    *  clavier au moment précis où l'attente doit s'annoncer.
@@ -50,11 +62,15 @@ export function Button({
   variante = 'plein',
   compact,
   bloc,
+  icone,
+  iconeApres,
+  carre,
   occupe,
   className,
   type = 'button',
   disabled,
   onClick,
+  children,
   ...reste
 }: ButtonProps) {
   return (
@@ -76,10 +92,15 @@ export function Button({
         VARIANTE_BOUTON[variante],
         compact && 'zv-btn--sm',
         bloc && 'zv-btn--block',
+        carre && 'zv-btn--carre',
         className,
       )}
       {...reste}
-    />
+    >
+      {icone && <Icon nom={icone} />}
+      {children}
+      {iconeApres && <Icon nom={iconeApres} />}
+    </button>
   )
 }
 
@@ -88,6 +109,10 @@ export interface ButtonLinkProps
   variante?: BoutonVariante
   compact?: boolean
   bloc?: boolean
+  icone?: IconId
+  iconeApres?: IconId
+  /** ⚠️ Comme sur Button : aria-label OBLIGATOIRE, écrit pour l'ACTION. */
+  carre?: boolean
   className?: string
 }
 
@@ -97,7 +122,11 @@ export function ButtonLink({
   variante = 'plein',
   compact,
   bloc,
+  icone,
+  iconeApres,
+  carre,
   className,
+  children,
   ...reste
 }: ButtonLinkProps) {
   return (
@@ -106,10 +135,15 @@ export function ButtonLink({
         VARIANTE_BOUTON[variante],
         compact && 'zv-btn--sm',
         bloc && 'zv-btn--block',
+        carre && 'zv-btn--carre',
         className,
       )}
       {...reste}
-    />
+    >
+      {icone && <Icon nom={icone} />}
+      {children}
+      {iconeApres && <Icon nom={iconeApres} />}
+    </a>
   )
 }
 

package/react/catalogue.tsx

@@ -34,7 +34,7 @@ import {
   Checkbox, Drop, Field, Input, InputAffix, Radio, Range, Search, Seg,
   SegGroup, Select, SelectAnchor, SelectTrigger, Switch, Textarea,
 } from './forms.js'
-import { ICONES, Icon, IconButton, NOMS_ICONES } from './icon.js'
+import { ICONES, Icon, IconButton, IconTile, NOMS_ICONES } from './icon.js'
 import {
   Banner, CTA, Carousel, CarouselItem, Col, Footer, FooterMini, Grid, Grid12,
   Gutter, Hero, Nav, NavLink, NavLinks, NavLogo, ProofBar, SectionHead,
@@ -489,6 +489,24 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </ButtonRow>
         ),
       },
+      {
+        id: 'boutons-icones',
+        nom: 'Boutons à icône',
+        resume:
+          'L’icône vient du jeu (16 px) et hérite de la couleur du libellé — en prop, jamais recopiée à la main. « carre » est l’action à icône SEULE : aria-label OBLIGATOIRE, écrit pour l’ACTION. Ne pas confondre avec IconButton (chrome nu, 40 px) ni ChromeButton (croix bordée) : le carré est une action, il en a le poids.',
+        code: `<Button icone="telecharger">Télécharger le rapport</Button>
+<Button variante="fantome" iconeApres="chevron-droit">Étape suivante</Button>
+<Button carre variante="encre" icone="envoyer" aria-label="Envoyer le message" />`,
+        rendu: (
+          <ButtonRow>
+            <Button icone="telecharger">Télécharger le rapport</Button>
+            <Button variante="fantome" iconeApres="chevron-droit">
+              Étape suivante
+            </Button>
+            <Button carre variante="encre" icone="envoyer" aria-label="Envoyer le message" />
+          </ButtonRow>
+        ),
+      },
       {
         id: 'lien-fleche',
         nom: 'Lien fléché',
@@ -1322,16 +1340,19 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'sidebar',
         nom: 'Colonne latérale',
         resume:
-          'Une colonne, un filet, rien d’autre. « courant » pose aria-current="page" en plus de la classe : sans lui, l’entrée courante est marquée pour l’œil et muette au lecteur d’écran.',
+          'Une colonne, un filet, rien d’autre. « courant » pose aria-current="page" en plus de la classe : sans lui, l’entrée courante est marquée pour l’œil et muette au lecteur d’écran. « num » accepte un rang mono OU un glyphe (le ⚙ du relevé), sur la même colonne de 16 px — jamais les deux.',
         code: `<Sidebar>
   <SidebarHead>…</SidebarHead>
   <SideGroup titre="Espace">
     <SideLink href="/bibliotheque" courant num="01">Bibliothèque</SideLink>
   </SideGroup>
+  <SideGroup titre="Organisation">
+    <SideLink href="/admin" num={<Icon nom="reglages" />}>Administration</SideLink>
+  </SideGroup>
   <SidebarFoot>…</SidebarFoot>
 </Sidebar>`,
         rendu: (
-          <Sidebar style={{ height: 260 }}>
+          <Sidebar style={{ height: 300 }}>
             <SidebarHead>
               <Mono ton="ink">ZEVRA</Mono>
             </SidebarHead>
@@ -1346,6 +1367,11 @@ export const CATALOGUE: GroupeCatalogue[] = [
                 Import
               </SideLink>
             </SideGroup>
+            <SideGroup titre="Organisation">
+              <SideLink href="#" num={<Icon nom="reglages" />}>
+                Administration
+              </SideLink>
+            </SideGroup>
             <SidebarFoot>
               <Meta discret>v2.4.1</Meta>
             </SidebarFoot>
@@ -1537,7 +1563,7 @@ export const CATALOGUE: GroupeCatalogue[] = [
     couche: 'commun',
     css: 'icons.css',
     resume:
-      "55 icônes TRACÉES, jamais pleines : trait 2, bouts arrondis, grille de 24. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
+      "55 icônes TRACÉES, jamais pleines : trait 2, grille de 24, BOUTS FRANCS et jonctions vives — le trait carré de la charte, points d'encre carrés compris. Elles héritent de la couleur du texte — c'est ce qui leur permet de fonctionner sur papier comme sur la bande manifeste sans déclinaison. Le tracé est inliné : rien à résoudre côté bundler, rien à autoriser côté CSP.",
     exemples: [
       {
         id: 'jeu',
@@ -1581,6 +1607,33 @@ export const CATALOGUE: GroupeCatalogue[] = [
           </div>
         ),
       },
+      {
+        id: 'tuile',
+        nom: 'Tuile d’icône',
+        resume:
+          'La pastille carrée devant un argument de la vitrine — liste de garanties, grille d’atouts. DÉCORATIVE par défaut : c’est le libellé voisin qui nomme, un titre ne se pose que si elle est seule. UNE par argument, jamais en décor isolé — une tuile sans libellé est un rébus.',
+        code: `<IconTile nom="bouclier-verifie" />
+<IconTile nom="balance" />`,
+        rendu: (
+          <div style={{ display: 'grid', gap: 14, maxWidth: 380 }}>
+            {(
+              [
+                ['bouclier-verifie', 'Hébergement souverain', 'Infrastructure dédiée, en France.'],
+                ['balance', 'Sources officielles', 'BOSS, Judilibre, KALI — datées et citées.'],
+                ['cadenas', 'Zéro réutilisation', 'Vos pièces n’entraînent aucun modèle.'],
+              ] as const
+            ).map(([nom, titre, texte]) => (
+              <div key={nom} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
+                <IconTile nom={nom} />
+                <div>
+                  <CardTitle as="p">{titre}</CardTitle>
+                  <Body taille="dense">{texte}</Body>
+                </div>
+              </div>
+            ))}
+          </div>
+        ),
+      },
     ],
   },
 
@@ -1966,24 +2019,28 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'bande',
         nom: 'Bande manifeste',
         resume:
-          '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres : les contrastes ont été réglés dans ce sens-là et pas dans l’autre.',
+          '⚠️ LA surface sombre du système. Les surfaces sombres se font avec elle et --accent-on-dark, JAMAIS en inversant les neutres. La bande ne porte AUCUNE gouttière propre : c’est la page qui la donne — poser un Gutter dedans, sinon le contenu colle au bord.',
         code: `<Band lueur filigrane={<Glyph variante="watermark">…</Glyph>}>
-  <Kicker surSombre>Souveraineté</Kicker>
-  <H2>Vos pièces ne quittent pas la France.</H2>
+  <Gutter>
+    <Kicker surSombre>Souveraineté</Kicker>
+    <H2>Vos pièces ne quittent pas la France.</H2>
+  </Gutter>
 </Band>`,
         surSombre: true,
         rendu: (
           <Band lueur>
-            <Kicker surSombre>Souveraineté</Kicker>
-            <Heading taille="h2-sm">Vos pièces ne quittent pas la France.</Heading>
-            <Body>
-              Infrastructure dédiée, chiffrement au repos, aucun transfert hors Union
-              européenne.
-            </Body>
-            <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
-              <Tag surSombre etat="ok">CHIFFRÉ</Tag>
-              <Tag surSombre>OVHCLOUD · GRA</Tag>
-            </div>
+            <Gutter>
+              <Kicker surSombre>Souveraineté</Kicker>
+              <Heading taille="h2-sm">Vos pièces ne quittent pas la France.</Heading>
+              <Body>
+                Infrastructure dédiée, chiffrement au repos, aucun transfert hors Union
+                européenne.
+              </Body>
+              <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
+                <Tag surSombre etat="ok">CHIFFRÉ</Tag>
+                <Tag surSombre>OVHCLOUD · GRA</Tag>
+              </div>
+            </Gutter>
           </Band>
         ),
       },
@@ -2049,8 +2106,9 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'mouvement',
         nom: 'Mouvement',
         resume:
-          '⚠️ Les neuf animations sont pilotées AU DÉFILEMENT et réservées à la vitrine : le chrome applicatif n’anime rien. « prefers-reduced-motion » les coupe toutes, globalement, depuis base.css.',
+          '⚠️ Les neuf animations sont pilotées AU DÉFILEMENT et réservées à la vitrine : le chrome applicatif n’anime rien. « rise · doux » n’est pas une dixième : c’est l’entrée DOSÉE des blocs de pages intérieures (12 px), la home gardant l’entrée pleine. « prefers-reduced-motion » les coupe toutes, globalement, depuis base.css.',
         code: `<div className={anim('rise')}>…</div>
+<div className={anim('rise', 'doux')}>…</div>   {/* pages intérieures */}
 <div className={anim('pop', 3)}>…</div>
 <div className={anim('converge', 'tr')}>…</div>`,
         rendu: (
@@ -2062,6 +2120,9 @@ export const CATALOGUE: GroupeCatalogue[] = [
                 </span>
               ),
             )}
+            <span className={anim('rise', 'doux')}>
+              <Chip variante="mono">rise · doux</Chip>
+            </span>
           </div>
         ),
       },

package/react/content.tsx

@@ -305,7 +305,7 @@ export function UiPreview({
 export function Check({ className, ...reste }: Span & { className?: string }) {
   return (
     <span className={cx('zv-check', className)} aria-hidden="true" {...reste}>
-      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="12" height="12">
+      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter" width="12" height="12">
         <polyline points="2.5,6.5 5,9 9.5,3.5" />
       </svg>
     </span>