@zevra/ui 0.34.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/DECISIONS.md +293 -203
- package/README.md +21 -21
- package/demo/app.html +6 -6
- package/demo/index.html +3 -3
- package/dist/actions.d.ts +8 -8
- package/dist/actions.d.ts.map +1 -1
- package/dist/actions.js +1 -1
- package/dist/actions.js.map +1 -1
- package/dist/catalogue.d.ts +2 -2
- package/dist/catalogue.js +67 -67
- package/dist/catalogue.js.map +1 -1
- package/dist/content.d.ts +23 -23
- package/dist/content.d.ts.map +1 -1
- package/dist/content.js +16 -16
- package/dist/content.js.map +1 -1
- package/dist/css-inline.d.ts +1 -1
- package/dist/css-inline.d.ts.map +1 -1
- package/dist/css-inline.js +4 -4
- package/dist/css-inline.js.map +1 -1
- package/dist/data-table.d.ts +1 -1
- package/dist/data.d.ts +7 -7
- package/dist/data.js +5 -5
- package/dist/email-tokens.js +1 -1
- package/dist/email.d.ts +6 -6
- package/dist/email.js +8 -8
- package/dist/email.js.map +1 -1
- package/dist/feedback.d.ts +10 -10
- package/dist/feedback.d.ts.map +1 -1
- package/dist/feedback.js +3 -3
- package/dist/forms.d.ts +12 -12
- package/dist/forms.js +5 -5
- package/dist/glyph-data.d.ts +2 -2
- package/dist/glyph-data.js +3 -3
- package/dist/glyph-urls.js +1 -1
- package/dist/glyphes.d.ts +2 -2
- package/dist/glyphes.js +4 -4
- package/dist/icon-data.d.ts +1 -1
- package/dist/icon-data.js +2 -2
- package/dist/icon.d.ts +5 -5
- package/dist/icon.js +1 -1
- package/dist/index.js +4 -4
- package/dist/layout.d.ts +21 -21
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +15 -15
- package/dist/layout.js.map +1 -1
- package/dist/navigation.d.ts +16 -16
- package/dist/navigation.d.ts.map +1 -1
- package/dist/navigation.js +9 -9
- package/dist/navigation.js.map +1 -1
- package/dist/overlays.d.ts +6 -6
- package/dist/overlays.d.ts.map +1 -1
- package/dist/overlays.js +5 -5
- package/dist/select-menu.d.ts +1 -1
- package/dist/select-menu.js +2 -2
- package/dist/surfaces.d.ts +8 -8
- package/dist/surfaces.d.ts.map +1 -1
- package/dist/surfaces.js +6 -6
- package/dist/surfaces.js.map +1 -1
- package/dist/typography.d.ts +4 -4
- package/dist/typography.d.ts.map +1 -1
- package/dist/typography.js +3 -3
- package/dist/typography.js.map +1 -1
- package/icons/index.json +1 -1
- package/package.json +2 -2
- package/react/actions.tsx +9 -9
- package/react/catalogue.tsx +68 -68
- package/react/content.tsx +28 -28
- package/react/css-inline.ts +4 -4
- package/react/data-table.tsx +3 -3
- package/react/data.tsx +9 -9
- package/react/email-tokens.ts +1 -1
- package/react/email.ts +10 -10
- package/react/feedback.tsx +12 -12
- package/react/forms.tsx +15 -15
- package/react/glyph-data.ts +3 -3
- package/react/glyph-urls.ts +1 -1
- package/react/glyphes.ts +4 -4
- package/react/icon-data.ts +2 -2
- package/react/icon.tsx +6 -6
- package/react/index.ts +4 -4
- package/react/layout.tsx +22 -22
- package/react/navigation.tsx +18 -18
- package/react/overlays.tsx +9 -9
- package/react/select-menu.tsx +3 -3
- package/react/surfaces.tsx +10 -10
- package/react/typography.tsx +6 -6
- package/src/base.css +10 -10
- package/src/components.css +49 -49
- package/src/data.css +41 -41
- package/src/feedback.css +55 -55
- package/src/fonts.css +2 -2
- package/src/forms.css +50 -50
- package/src/icons.css +10 -10
- package/src/index.css +1 -1
- package/src/layout.css +27 -27
- package/src/motion.css +16 -16
- package/src/motion.js +4 -4
- package/src/nav.js +5 -5
- package/src/navigation.css +93 -62
- package/src/overlays.css +14 -14
- package/src/rail.js +6 -6
- package/src/surfaces.css +11 -11
- package/src/tokens.css +14 -14
- package/tokens/index.js +8 -8
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Zevra UI
|
|
1
|
+
# Zevra UI : design system « Encre & Papier »
|
|
2
2
|
|
|
3
3
|
Tokens, CSS des composants et logos officiels de la plateforme Zevra.
|
|
4
4
|
Source de vérité pour tout ce qui touche à l'identité visuelle : une app qui
|
|
@@ -73,11 +73,11 @@ Ce ne sont **pas** des composants qui embarquent leur style : chacun n'est
|
|
|
73
73
|
qu'une façade typée et documentée au-dessus des classes `zv-`. Le CSS reste
|
|
74
74
|
la source de vérité, il s'importe à part, et un test
|
|
75
75
|
(`tests/react.test.js`) vérifie que toute classe qu'un composant peut émettre
|
|
76
|
-
existe bien dans un module CSS
|
|
76
|
+
existe bien dans un module CSS : c'est ce qui empêche les deux de diverger.
|
|
77
77
|
|
|
78
78
|
**Rendu serveur.** Un seul module est marqué `"use client"` : `overlays`
|
|
79
79
|
(tiroir, modale, notification), les seuls qui aient besoin du navigateur.
|
|
80
|
-
Tout le reste se rend au serveur
|
|
80
|
+
Tout le reste se rend au serveur : dans un composant serveur Next comme dans
|
|
81
81
|
une île Astro à zéro JavaScript. Les composants qui prennent un gestionnaire
|
|
82
82
|
d'événement (`Switch`, `Seg`, `Tabs`…) restent sans état : c'est un composant
|
|
83
83
|
client à toi qui détient l'état et les rend.
|
|
@@ -85,13 +85,13 @@ client à toi qui détient l'état et les rend.
|
|
|
85
85
|
**Astro.** `@astrojs/react` rend ces composants en HTML statique à la
|
|
86
86
|
compilation, sans JavaScript envoyé, tant qu'aucune directive `client:*` n'est
|
|
87
87
|
posée. Un `<Button>` dans une `.astro` ne coûte donc rien de plus qu'un
|
|
88
|
-
`<button class="zv-btn">`
|
|
88
|
+
`<button class="zv-btn">` : avec les props typées et la documentation en
|
|
89
89
|
prime. ⚠️ En revanche, un composant `.astro` ne peut pas être passé en enfant
|
|
90
90
|
d'un composant React : ce sens-là ne fonctionne pas.
|
|
91
91
|
|
|
92
92
|
**Les props sont en français**, comme le CSS et les commentaires. Celles qui
|
|
93
93
|
portent une décision de charte sont documentées à l'endroit où on les lit, et
|
|
94
|
-
les avertissements ⚠️ signalent ce qui casse le système si on le contourne
|
|
94
|
+
les avertissements ⚠️ signalent ce qui casse le système si on le contourne :
|
|
95
95
|
pas de simples préférences.
|
|
96
96
|
|
|
97
97
|
**`className` est accepté partout**, mais c'est une sortie de secours, pas un
|
|
@@ -105,7 +105,7 @@ import { CATALOGUE } from '@zevra/ui/react/catalogue'
|
|
|
105
105
|
```
|
|
106
106
|
|
|
107
107
|
Chaque composant y a un exemple rendu, le code qui le produit, et le résumé de
|
|
108
|
-
ce qu'il fait
|
|
108
|
+
ce qu'il fait : et surtout de quand ne pas l'employer. C'est ce que rend la
|
|
109
109
|
page « Design system » de l'admin, et c'est aussi le banc d'essai du test de
|
|
110
110
|
dérive : un composant sans exemple n'est ni documenté ni couvert, et le test
|
|
111
111
|
le refuse.
|
|
@@ -114,15 +114,15 @@ le refuse.
|
|
|
114
114
|
|
|
115
115
|
Le paquet en porte deux, et elles ne servent pas au même usage.
|
|
116
116
|
|
|
117
|
-
La **couche vitrine**
|
|
117
|
+
La **couche vitrine** (`base`, `components`, `layout`, `surfaces`, `motion`)
|
|
118
118
|
compose une page qui se lit : hero, sections, manifeste, cartes produit.
|
|
119
119
|
|
|
120
|
-
La **couche applicative**
|
|
120
|
+
La **couche applicative** (`forms`, `feedback`, `navigation`, `data`, `icons`)
|
|
121
121
|
compose une interface qui s'opère : champs, alertes, menus, tableaux. Elle
|
|
122
122
|
est plus dense, et dispose de son échelle propre (`--app`, `--mono`).
|
|
123
123
|
|
|
124
124
|
Une app n'a aucune raison de charger les deux. Sont communs : `tokens.css`,
|
|
125
|
-
`base.css`, `icons.css` et **`overlays.css
|
|
125
|
+
`base.css`, `icons.css` et **`overlays.css`**, une page vitrine a besoin
|
|
126
126
|
d'un tiroir pour son menu mobile autant qu'une application pour sa
|
|
127
127
|
navigation.
|
|
128
128
|
|
|
@@ -151,19 +151,19 @@ scène, des entrées toujours vers le haut, et **aucun mouvement sur la
|
|
|
151
151
|
typographie une fois posée**.
|
|
152
152
|
|
|
153
153
|
Les entrées se jouent **une fois par visite** (0.12.0) : elles sont armées
|
|
154
|
-
par `html.zv-motion` et libérées à l'entrée au viewport par `motion.js
|
|
154
|
+
par `html.zv-motion` et libérées à l'entrée au viewport par `motion.js`,
|
|
155
155
|
`import '@zevra/ui/motion.js'` une fois par page, et rien d'autre à faire.
|
|
156
156
|
Remonter la page ne défait rien : l'ancien pilotage `view()` rejouait les
|
|
157
157
|
entrées à l'envers sous le lecteur. Sans JavaScript, rien n'est armé et la
|
|
158
158
|
page s'affiche complète. Un échafaudage de scènes scroll-pilotées pose
|
|
159
159
|
`data-zv-motion-skip` sur ses scènes et re-branche les @keyframes sur ses
|
|
160
160
|
timelines nommées. Seuls `zv-anim-progress` et `zv-anim-dot-active` restent
|
|
161
|
-
au défilement
|
|
161
|
+
au défilement : suivre la lecture est leur métier. Un seul media query
|
|
162
162
|
neutralise les neuf pour `prefers-reduced-motion`.
|
|
163
163
|
|
|
164
164
|
### Les tokens en JavaScript
|
|
165
165
|
|
|
166
|
-
Pour ce qui ne peut pas lire une variable CSS
|
|
166
|
+
Pour ce qui ne peut pas lire une variable CSS : graphes, images générées,
|
|
167
167
|
gabarits d'e-mail :
|
|
168
168
|
|
|
169
169
|
```js
|
|
@@ -182,15 +182,15 @@ les deux divergent.
|
|
|
182
182
|
destination.
|
|
183
183
|
|
|
184
184
|
Depuis le 24/08/2026, le paquet ne livre plus que les **rendus couleur** des
|
|
185
|
-
glyphes (sept depuis la 0.13.0). Les déclinaisons vectorielles
|
|
186
|
-
lockups
|
|
185
|
+
glyphes (sept depuis la 0.13.0). Les déclinaisons vectorielles (encre, navy, blanc, et les
|
|
186
|
+
lockups) ont été retirées : elles ne suivaient plus les marques, et celle de
|
|
187
187
|
Mémoire portait encore un logo abandonné.
|
|
188
188
|
|
|
189
189
|
```js
|
|
190
190
|
import index from '@zevra/ui/logos/index.json'
|
|
191
191
|
```
|
|
192
192
|
|
|
193
|
-
Nommage : `<produit>-<forme>-<nuance>.png
|
|
193
|
+
Nommage : `<produit>-<forme>-<nuance>.png`, par exemple
|
|
194
194
|
`campus-glyph-orig.png`. Produits : `zevra`, `campus`, `lexform`, `mcp`,
|
|
195
195
|
`memoire`. Formes : `glyph`, `mark` (Zevra). Nuance : `orig`.
|
|
196
196
|
|
|
@@ -199,15 +199,15 @@ d'affichage ; au-delà ils flouteront. Pour les inliner dans un canvas où les
|
|
|
199
199
|
ressources distantes sont interdites, l'admin en donne la data-URI.
|
|
200
200
|
|
|
201
201
|
⚠️ **Ce qui manque, et qu'il faudra refaire** : les versions monochromes
|
|
202
|
-
(encre et blanc) et les lockups avec wordmark. La charte les impose
|
|
203
|
-
sur navy, mono sous 24 px
|
|
202
|
+
(encre et blanc) et les lockups avec wordmark. La charte les impose (blanc
|
|
203
|
+
sur navy, mono sous 24 px) mais le paquet ne les porte plus.
|
|
204
204
|
|
|
205
205
|
## Polices
|
|
206
206
|
|
|
207
207
|
Trois familles Google : **Outfit** (titres), **Public Sans** (texte),
|
|
208
208
|
**Space Grotesk** (labels capitales).
|
|
209
209
|
|
|
210
|
-
En production, chargez-les par balise
|
|
210
|
+
En production, chargez-les par balise : une `@import` CSS bloque le rendu :
|
|
211
211
|
|
|
212
212
|
```html
|
|
213
213
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
@@ -230,13 +230,13 @@ Tiroir et modale s'ouvrent par un état porté sur le conteneur. Deux écritures
|
|
|
230
230
|
```
|
|
231
231
|
|
|
232
232
|
⚠️ En React, **ne pas écrire `data-open={ouvert}`** : il rend
|
|
233
|
-
`data-open="false"`, que le sélecteur d'attribut considère comme présent
|
|
233
|
+
`data-open="false"`, que le sélecteur d'attribut considère comme présent, le
|
|
234
234
|
panneau resterait ouvert. C'est précisément pour cela que la variante en
|
|
235
235
|
classe existe.
|
|
236
236
|
|
|
237
237
|
Fermer sur Échap relève du gabarit : le CSS ne sait pas le faire. En React,
|
|
238
238
|
`Drawer` et `Modal` (`@zevra/ui/react`) le font déjà, avec le piège de focus,
|
|
239
|
-
la restitution du focus au bouton d'ouverture et le verrou de défilement
|
|
239
|
+
la restitution du focus au bouton d'ouverture et le verrou de défilement :
|
|
240
240
|
et le hook `useOverlay` est exporté pour un enrobage maison.
|
|
241
241
|
|
|
242
242
|
## Les règles qui ne se négocient pas
|
|
@@ -249,7 +249,7 @@ dégradé, pas de rayon 999.
|
|
|
249
249
|
|
|
250
250
|
**Jamais de fausse citation, jamais de lorem.** Le bloc `.zv-quote` reste en
|
|
251
251
|
réserve tant qu'un verbatim client n'a pas été recueilli ; `.zv-ui-preview`
|
|
252
|
-
montre de vraies données réalistes
|
|
252
|
+
montre de vraies données réalistes : c'est lui qui porte la crédibilité de la
|
|
253
253
|
page.
|
|
254
254
|
|
|
255
255
|
**Trois cartes de tarif par page au maximum, cinq questions de FAQ, une seule
|
package/demo/app.html
CHANGED
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Zevra UI
|
|
6
|
+
<title>Zevra UI : couche applicative</title>
|
|
7
7
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
8
8
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Public+Sans:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap">
|
|
9
9
|
<link rel="stylesheet" href="../src/index.css">
|
|
10
10
|
<style>
|
|
11
|
-
/* Propre à la planche
|
|
11
|
+
/* Propre à la planche : n'appartient pas au système. */
|
|
12
12
|
body { padding: 0; }
|
|
13
13
|
.d-wrap { max-width: 1180px; margin: 0 auto; padding: 32px 24px 80px; }
|
|
14
14
|
.d-sec { margin-top: 44px; }
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
<div class="zv-drop" style="margin-top:16px">
|
|
93
93
|
<span class="zv-drop__title">Déposer des documents</span>
|
|
94
94
|
<span class="zv-drop__hint">Glissez vos fichiers ici, ou <span class="zv-drop__browse">parcourez votre disque</span>.</span>
|
|
95
|
-
<span class="zv-drop__spec">PDF, DOCX
|
|
95
|
+
<span class="zv-drop__spec">PDF, DOCX : 40 Mo maximum</span>
|
|
96
96
|
</div>
|
|
97
97
|
</section>
|
|
98
98
|
|
|
@@ -187,14 +187,14 @@
|
|
|
187
187
|
<span>Indexé le</span>
|
|
188
188
|
</div>
|
|
189
189
|
<div class="zv-row">
|
|
190
|
-
<span class="zv-cell zv-cell--name"><span class="zv-filetype zv-filetype--pdf">PDF</span><span class="zv-trunc">Cession de parts
|
|
190
|
+
<span class="zv-cell zv-cell--name"><span class="zv-filetype zv-filetype--pdf">PDF</span><span class="zv-trunc">Cession de parts : SCI Beaumont</span></span>
|
|
191
191
|
<span class="zv-cell">Acte</span>
|
|
192
192
|
<span class="zv-cell"><span class="zv-status"><span class="zv-dot zv-dot--indexe"></span><span class="zv-status__label">Indexé</span></span></span>
|
|
193
193
|
<span class="zv-cell zv-cell--num"><span class="zv-cell__label">Taille</span>2,4 Mo</span>
|
|
194
194
|
<span class="zv-cell zv-cell--num">12/08/2026</span>
|
|
195
195
|
</div>
|
|
196
196
|
<div class="zv-row">
|
|
197
|
-
<span class="zv-cell zv-cell--name"><span class="zv-filetype zv-filetype--docx">DOCX</span><span class="zv-trunc">Consultation
|
|
197
|
+
<span class="zv-cell zv-cell--name"><span class="zv-filetype zv-filetype--docx">DOCX</span><span class="zv-trunc">Consultation : garantie autonome</span></span>
|
|
198
198
|
<span class="zv-cell">Consultation</span>
|
|
199
199
|
<span class="zv-cell"><span class="zv-status"><span class="zv-dot zv-dot--ocr"></span><span class="zv-status__label">OCR</span></span></span>
|
|
200
200
|
<span class="zv-cell zv-cell--num"><span class="zv-cell__label">Taille</span>840 Ko</span>
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
<!-- ENROBAGES -->
|
|
232
232
|
<section class="d-sec">
|
|
233
233
|
<span class="zv-kicker"><span class="zv-spec" aria-hidden="true"></span><span class="zv-mono">05 · Enrobages</span></span>
|
|
234
|
-
<p class="zv-note" style="margin-top:10px">Tout ce qui se pose par-dessus la page. La modale et la notification sont dérivées, hors relevé
|
|
234
|
+
<p class="zv-note" style="margin-top:10px">Tout ce qui se pose par-dessus la page. La modale et la notification sont dérivées, hors relevé : voir DECISIONS.md.</p>
|
|
235
235
|
|
|
236
236
|
<div class="d-row">
|
|
237
237
|
<button class="zv-btn zv-btn--sm" onclick="document.getElementById('m1').toggleAttribute('data-open')">Ouvrir une modale</button>
|
package/demo/index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Zevra UI
|
|
6
|
+
<title>Zevra UI : planche de vérification</title>
|
|
7
7
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
8
8
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Public+Sans:wght@400;600&family=Space+Grotesk:wght@500;600;700&display=swap">
|
|
9
9
|
<link rel="stylesheet" href="../src/index.css">
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
<div class="zv-grid-12" style="margin-top:28px">
|
|
71
71
|
<div class="zv-col-8">
|
|
72
72
|
<h2 class="zv-h2">Titre de section <span class="zv-em">en deux temps.</span></h2>
|
|
73
|
-
<p class="zv-lead demo-note">Chapô
|
|
73
|
+
<p class="zv-lead demo-note">Chapô : 18px, gris, interligne 1.6.</p>
|
|
74
74
|
<p class="zv-body demo-note">Corps de texte à 15px. Un <strong>mot fort</strong> passe en encre.</p>
|
|
75
75
|
<p class="zv-body zv-body--dense demo-note">Variante dense à 13px, pour les légendes de carte.</p>
|
|
76
76
|
<p class="zv-rule demo-note">Texte de règle à 14px, celui des planches de documentation.</p>
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
<footer class="zv-footer zv-inset-x">
|
|
274
274
|
<div class="zv-footer__brand">
|
|
275
275
|
<span class="zv-spec zv-spec--sm" aria-hidden="true"></span>
|
|
276
|
-
<p class="zv-body zv-body--dense">Zevra UI
|
|
276
|
+
<p class="zv-body zv-body--dense">Zevra UI : design system « Encre & Papier ».</p>
|
|
277
277
|
<span class="zv-mono zv-mono--micro">Planche de vérification, hors paquet</span>
|
|
278
278
|
</div>
|
|
279
279
|
<div class="zv-footer__cols">
|
package/dist/actions.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { type IconId } from './icon.js';
|
|
3
|
-
/** Variantes de bouton. Une seule pleine par écran
|
|
3
|
+
/** Variantes de bouton. Une seule pleine par écran, c'est la règle de
|
|
4
4
|
* charte, et « danger » COMPTE comme la pleine : la règle compte les
|
|
5
5
|
* aplats, pas les couleurs. « danger » est réservée à l'action destructive
|
|
6
6
|
* (la confirmation d'une modale de suppression), jamais à une action
|
|
@@ -10,23 +10,23 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
|
|
|
10
10
|
variante?: BoutonVariante;
|
|
11
11
|
/** Hauteur réduite, pour une barre de navigation. */
|
|
12
12
|
compact?: boolean;
|
|
13
|
-
/** Pleine largeur
|
|
13
|
+
/** Pleine largeur : l'appel à l'action d'un écran mobile. */
|
|
14
14
|
bloc?: boolean;
|
|
15
15
|
/** L'icône du jeu, posée devant le libellé (16 px, couleur héritée).
|
|
16
16
|
* La fournir en prop plutôt qu'en enfant évite les tracés recopiés à la
|
|
17
|
-
* main
|
|
17
|
+
* main : la faute qui avait produit trois flèches différentes. */
|
|
18
18
|
icone?: IconId;
|
|
19
19
|
/** …ou après lui : « Étape suivante › ». Pour un LIEN qui avance, c'est
|
|
20
|
-
* LinkArrow
|
|
20
|
+
* LinkArrow : la flèche animée appartient au lien, pas au bouton. */
|
|
21
21
|
iconeApres?: IconId;
|
|
22
22
|
/** Bouton d'action à icône SEULE (48×48, 40×40 en compact) : l'envoi
|
|
23
23
|
* d'un composeur, l'action unique d'une barre. ⚠️ aria-label OBLIGATOIRE,
|
|
24
24
|
* écrit pour l'ACTION (« Envoyer le message »), pas pour le dessin. */
|
|
25
25
|
carre?: boolean;
|
|
26
26
|
/** Attente pendant l'action : pose aria-busy et aria-disabled, et AVALE
|
|
27
|
-
* le clic
|
|
27
|
+
* le clic, sans poser `disabled`, qui sortirait le bouton du parcours
|
|
28
28
|
* clavier au moment précis où l'attente doit s'annoncer.
|
|
29
|
-
* ⚠️ Le LIBELLÉ doit changer avec elle (« Connexion… »)
|
|
29
|
+
* ⚠️ Le LIBELLÉ doit changer avec elle (« Connexion… »), c'est le motif
|
|
30
30
|
* relevé de Mémoire : l'estompement seul ne dit pas ce qu'on attend. */
|
|
31
31
|
occupe?: boolean;
|
|
32
32
|
/** Échappatoire assumée. À employer pour un ajustement de position, jamais
|
|
@@ -50,7 +50,7 @@ export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorEle
|
|
|
50
50
|
* l'un ouvre dans un onglet, se copie et s'indexe, l'autre non. */
|
|
51
51
|
export declare function ButtonLink({ variante, compact, bloc, icone, iconeApres, carre, className, children, ...reste }: ButtonLinkProps): import("react").JSX.Element;
|
|
52
52
|
export interface ButtonRowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
|
|
53
|
-
/** Empile les boutons et les étire
|
|
53
|
+
/** Empile les boutons et les étire : la disposition mobile. */
|
|
54
54
|
empile?: boolean;
|
|
55
55
|
className?: string;
|
|
56
56
|
}
|
|
@@ -62,6 +62,6 @@ export interface LinkArrowProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElem
|
|
|
62
62
|
children?: ReactNode;
|
|
63
63
|
}
|
|
64
64
|
/** Lien fléché. La flèche est fournie : elle fait partie du composant, pas du
|
|
65
|
-
* contenu
|
|
65
|
+
* contenu, la recopier à la main a produit trois tracés différents. */
|
|
66
66
|
export declare function LinkArrow({ surSombre, className, children, ...reste }: LinkArrowProps): import("react").JSX.Element;
|
|
67
67
|
//# sourceMappingURL=actions.d.ts.map
|
package/dist/actions.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;6BAI6B;AAC7B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AASrE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;uEAEmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;0EACsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;4EAEwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;6EAIyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;oDAEgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAe,EACf,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;oEACoE;AACpE,wBAAgB,UAAU,CAAC,EACzB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BAiBjB;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACzD,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAOxE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;
|
|
1
|
+
{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAA;AAEd,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,WAAW,CAAA;AAE7C;;;;6BAI6B;AAC7B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAA;AASrE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6DAA6D;IAC7D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;uEAEmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;0EACsE;IACtE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;4EAEwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;;6EAIyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;oDAEgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAe,EACf,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,+BA8Bb;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,cAAc,CAAA;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yEAAyE;IACzE,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;oEACoE;AACpE,wBAAgB,UAAU,CAAC,EACzB,QAAkB,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,+BAiBjB;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACzD,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BAOxE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAClE,yDAAyD;IACzD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED;wEACwE;AACxE,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,cAAc,+BAiBhB"}
|
package/dist/actions.js
CHANGED
|
@@ -25,7 +25,7 @@ export function ButtonRow({ empile, className, ...reste }) {
|
|
|
25
25
|
return (_jsx("div", { className: cx('zv-btn-row', empile && 'zv-btn-row--stack', className), ...reste }));
|
|
26
26
|
}
|
|
27
27
|
/** Lien fléché. La flèche est fournie : elle fait partie du composant, pas du
|
|
28
|
-
* contenu
|
|
28
|
+
* contenu, la recopier à la main a produit trois tracés différents. */
|
|
29
29
|
export function LinkArrow({ surSombre, className, children, ...reste }) {
|
|
30
30
|
return (_jsxs("a", { className: cx('zv-link-arrow', surSombre && 'zv-link-arrow--on-dark', className), ...reste, children: [children, _jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M13 6l6 6-6 6" })] })] }));
|
|
31
31
|
}
|
package/dist/actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAe,MAAM,WAAW,CAAA;AAS7C,MAAM,eAAe,GAAmC;IACtD,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAiCD,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,OAAO,CACL,kBACE,IAAI,EAAE,IAAI,eACC,MAAM,IAAI,SAAS,mBACf,MAAM,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EACL,MAAM;YACJ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACJ,+DAA+D;gBAC/D,6DAA6D;gBAC7D,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,CAAC;YACH,CAAC,CAAC,OAAO,EAEb,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,KAAK,IAAI,eAAe,EACxB,SAAS,CACV,KACG,KAAK,aAER,KAAK,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,EAC7B,QAAQ,EACR,UAAU,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,GAAI,IACjC,CACV,CAAA;AACH,CAAC;AAcD;oEACoE;AACpE,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,aACE,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,KAAK,IAAI,eAAe,EACxB,SAAS,CACV,KACG,KAAK,aAER,KAAK,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,EAC7B,QAAQ,EACR,UAAU,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,GAAI,IACtC,CACL,CAAA;AACH,CAAC;AASD,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACvE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAUD;
|
|
1
|
+
{"version":3,"file":"actions.js","sourceRoot":"","sources":["../react/actions.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAe,MAAM,WAAW,CAAA;AAS7C,MAAM,eAAe,GAAmC;IACtD,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,gBAAgB;CACzB,CAAA;AAiCD,MAAM,UAAU,MAAM,CAAC,EACrB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,OAAO,CACL,kBACE,IAAI,EAAE,IAAI,eACC,MAAM,IAAI,SAAS,mBACf,MAAM,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EACL,MAAM;YACJ,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE;gBACJ,+DAA+D;gBAC/D,6DAA6D;gBAC7D,CAAC,CAAC,cAAc,EAAE,CAAA;YACpB,CAAC;YACH,CAAC,CAAC,OAAO,EAEb,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,KAAK,IAAI,eAAe,EACxB,SAAS,CACV,KACG,KAAK,aAER,KAAK,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,EAC7B,QAAQ,EACR,UAAU,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,GAAI,IACjC,CACV,CAAA;AACH,CAAC;AAcD;oEACoE;AACpE,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,GAAG,OAAO,EAClB,OAAO,EACP,IAAI,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACQ;IAChB,OAAO,CACL,aACE,SAAS,EAAE,EAAE,CACX,eAAe,CAAC,QAAQ,CAAC,EACzB,OAAO,IAAI,YAAY,EACvB,IAAI,IAAI,eAAe,EACvB,KAAK,IAAI,eAAe,EACxB,SAAS,CACV,KACG,KAAK,aAER,KAAK,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,EAC7B,QAAQ,EACR,UAAU,IAAI,KAAC,IAAI,IAAC,GAAG,EAAE,UAAU,GAAI,IACtC,CACL,CAAA;AACH,CAAC;AASD,MAAM,UAAU,SAAS,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,EAAkB;IACvE,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,MAAM,IAAI,mBAAmB,EAAE,SAAS,CAAC,KACjE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAUD;wEACwE;AACxE,MAAM,UAAU,SAAS,CAAC,EACxB,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACO;IACf,OAAO,CACL,aACE,SAAS,EAAE,EAAE,CACX,eAAe,EACf,SAAS,IAAI,wBAAwB,EACrC,SAAS,CACV,KACG,KAAK,aAER,QAAQ,EACT,eAAK,OAAO,EAAC,WAAW,iBAAa,MAAM,aACzC,eAAM,CAAC,EAAC,UAAU,GAAG,EACrB,eAAM,CAAC,EAAC,eAAe,GAAG,IACtB,IACJ,CACL,CAAA;AACH,CAAC"}
|
package/dist/catalogue.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
export interface Exemple {
|
|
3
|
-
/** Identifiant stable
|
|
3
|
+
/** Identifiant stable : sert d'ancre dans la page de consultation. */
|
|
4
4
|
id: string;
|
|
5
5
|
nom: string;
|
|
6
6
|
/** Ce que le composant fait, et surtout quand NE PAS l'employer. */
|
|
@@ -23,7 +23,7 @@ export interface GroupeCatalogue {
|
|
|
23
23
|
exemples: Exemple[];
|
|
24
24
|
}
|
|
25
25
|
export declare const CATALOGUE: GroupeCatalogue[];
|
|
26
|
-
/** Tous les exemples à plat
|
|
26
|
+
/** Tous les exemples à plat : pratique pour une recherche ou un test. */
|
|
27
27
|
export declare const EXEMPLES: (Exemple & {
|
|
28
28
|
groupe: string;
|
|
29
29
|
})[];
|