@zevra/ui 0.5.0 → 0.7.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 +24 -0
- package/demo/index.html +33 -0
- package/dist/catalogue.d.ts.map +1 -1
- package/dist/catalogue.js +76 -2
- package/dist/catalogue.js.map +1 -1
- package/dist/content.d.ts +51 -0
- package/dist/content.d.ts.map +1 -1
- package/dist/content.js +37 -0
- package/dist/content.js.map +1 -1
- package/dist/css-inline.d.ts.map +1 -1
- package/dist/css-inline.js +1 -1
- package/dist/css-inline.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/layout.d.ts +5 -4
- package/dist/layout.d.ts.map +1 -1
- package/dist/layout.js +4 -3
- package/dist/layout.js.map +1 -1
- package/dist/select-menu.d.ts +25 -0
- package/dist/select-menu.d.ts.map +1 -0
- package/dist/select-menu.js +157 -0
- package/dist/select-menu.js.map +1 -0
- package/package.json +1 -1
- package/react/catalogue.tsx +147 -3
- package/react/content.tsx +104 -0
- package/react/css-inline.ts +1 -1
- package/react/index.ts +1 -0
- package/react/layout.tsx +5 -4
- package/react/select-menu.tsx +250 -0
- package/src/base.css +3 -1
- package/src/components.css +255 -3
- package/src/forms.css +137 -12
- package/src/layout.css +4 -0
- package/src/navigation.css +9 -0
- package/src/tokens.css +21 -5
- package/tokens/index.js +10 -4
package/dist/css-inline.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW
|
|
1
|
+
{"version":3,"file":"css-inline.js","sourceRoot":"","sources":["../react/css-inline.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,0EAA0E;AAE1E;;;iEAGiE;AACjE,MAAM,CAAC,MAAM,WAAW,GAAW,qy5LAAqy5L,CAAA;AAEx05L;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ export * from './icon.js';
|
|
|
8
8
|
export * from './layout.js';
|
|
9
9
|
export * from './navigation.js';
|
|
10
10
|
export * from './overlays.js';
|
|
11
|
+
export * from './select-menu.js';
|
|
11
12
|
export * from './surfaces.js';
|
|
12
13
|
export * from './typography.js';
|
|
13
14
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../react/index.ts"],"names":[],"mappings":"AA6BA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAEjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../react/index.ts"],"names":[],"mappings":"AA6BA,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAEjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -36,6 +36,7 @@ export * from './icon.js';
|
|
|
36
36
|
export * from './layout.js';
|
|
37
37
|
export * from './navigation.js';
|
|
38
38
|
export * from './overlays.js';
|
|
39
|
+
export * from './select-menu.js';
|
|
39
40
|
export * from './surfaces.js';
|
|
40
41
|
export * from './typography.js';
|
|
41
42
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../react/index.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,EAAE;AACF,8EAA8E;AAC9E,2EAA2E;AAC3E,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,EAAE;AACF,6EAA6E;AAC7E,4DAA4D;AAC5D,EAAE;AACF,gDAAgD;AAChD,6EAA6E;AAC7E,gDAAgD;AAChD,uEAAuE;AACvE,oDAAoD;AACpD,EAAE;AACF,0EAA0E;AAC1E,4EAA4E;AAC5E,uEAAuE;AACvE,wEAAwE;AACxE,yEAAyE;AACzE,sBAAsB;AACtB,EAAE;AACF,4EAA4E;AAC5E,4EAA4E;AAC5E,yEAAyE;AACzE,yCAAyC;AAEzC,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAEjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../react/index.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,EAAE;AACF,8EAA8E;AAC9E,2EAA2E;AAC3E,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,EAAE;AACF,6EAA6E;AAC7E,4DAA4D;AAC5D,EAAE;AACF,gDAAgD;AAChD,6EAA6E;AAC7E,gDAAgD;AAChD,uEAAuE;AACvE,oDAAoD;AACpD,EAAE;AACF,0EAA0E;AAC1E,4EAA4E;AAC5E,uEAAuE;AACvE,wEAAwE;AACxE,yEAAyE;AACzE,sBAAsB;AACtB,EAAE;AACF,4EAA4E;AAC5E,4EAA4E;AAC5E,yEAAyE;AACzE,yCAAyC;AAEzC,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,SAAS,CAAA;AAEjC,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA"}
|
package/dist/layout.d.ts
CHANGED
|
@@ -22,10 +22,11 @@ export declare function InsetX({ className, ...reste }: Div & {
|
|
|
22
22
|
export declare function Grid12({ className, ...reste }: Div & {
|
|
23
23
|
className?: string;
|
|
24
24
|
}): import("react").JSX.Element;
|
|
25
|
-
export type Span12 = 3 | 4 | 6 | 8 | 9;
|
|
26
|
-
/** ⚠️ Seules
|
|
27
|
-
* vitrine
|
|
28
|
-
*
|
|
25
|
+
export type Span12 = 3 | 4 | 5 | 6 | 7 | 8 | 9;
|
|
26
|
+
/** ⚠️ Seules ces sept portées existent : ce sont les découpes employées par
|
|
27
|
+
* la vitrine (5+7 vient du prototype experience.html — le glyphe en 5, le
|
|
28
|
+
* discours en 7). En ajouter une revient à ajouter une mise en page, pas
|
|
29
|
+
* une utilité — c'est une décision de DA. */
|
|
29
30
|
export declare function Col({ span, className, ...reste }: Div & {
|
|
30
31
|
span: Span12;
|
|
31
32
|
className?: string;
|
package/dist/layout.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../react/layout.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGnE,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAAA;AAI5D,wBAAgB,IAAI,CAAC,EACnB,EAAE,EACF,SAAS,EACT,GAAG,KAAK,EACT,EAAE,GAAG,GAAG;IAAE,EAAE,CAAC,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAGhD;AAED,MAAM,WAAW,WAAY,SAAQ,GAAG;IACtC;oEACgE;IAChE,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IAC5B,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;6EAC6E;AAC7E,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAQxE;AAED;wDACwD;AACxD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE3E;AAID,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,GAAG;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAE3E;AAED,MAAM,MAAM,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../react/layout.tsx"],"names":[],"mappings":"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"}
|
package/dist/layout.js
CHANGED
|
@@ -20,9 +20,10 @@ export function InsetX({ className, ...reste }) {
|
|
|
20
20
|
export function Grid12({ className, ...reste }) {
|
|
21
21
|
return _jsx("div", { className: cx('zv-grid-12', className), ...reste });
|
|
22
22
|
}
|
|
23
|
-
/** ⚠️ Seules
|
|
24
|
-
* vitrine
|
|
25
|
-
*
|
|
23
|
+
/** ⚠️ Seules ces sept portées existent : ce sont les découpes employées par
|
|
24
|
+
* la vitrine (5+7 vient du prototype experience.html — le glyphe en 5, le
|
|
25
|
+
* discours en 7). En ajouter une revient à ajouter une mise en page, pas
|
|
26
|
+
* une utilité — c'est une décision de DA. */
|
|
26
27
|
export function Col({ span, className, ...reste }) {
|
|
27
28
|
return _jsx("div", { className: cx(`zv-col-${span}`, className), ...reste });
|
|
28
29
|
}
|
package/dist/layout.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../react/layout.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAI5B,0EAA0E;AAE1E,MAAM,UAAU,IAAI,CAAC,EACnB,EAAE,EACF,SAAS,EACT,GAAG,KAAK,EACuC;IAC/C,MAAM,MAAM,GAAG,EAAE,IAAI,KAAK,CAAA;IAC1B,OAAO,KAAC,MAAM,IAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AACnE,CAAC;AAUD;6EAC6E;AAC7E,MAAM,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,KAAK,EAAe;IACvE,MAAM,MAAM,GAAG,EAAE,IAAI,KAAK,CAAA;IAC1B,OAAO,CACL,KAAC,MAAM,IACL,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,QAAQ,IAAI,cAAc,QAAQ,EAAE,EAAE,SAAS,CAAC,KACvE,KAAK,GACT,CACH,CAAA;AACH,CAAC;AAED;wDACwD;AACxD,MAAM,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC;IAC1E,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AACnE,CAAC;AAED,0EAA0E;AAE1E,MAAM,UAAU,MAAM,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAgC;IAC1E,OAAO,cAAK,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAA;AACnE,CAAC;AAID
|
|
1
|
+
{"version":3,"file":"layout.js","sourceRoot":"","sources":["../react/layout.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface OptionSelect<T extends string = string> {
|
|
3
|
+
valeur: T;
|
|
4
|
+
label: ReactNode;
|
|
5
|
+
/** Texte employé pour la recherche au clavier et l'affichage du
|
|
6
|
+
* déclencheur quand `label` n'est pas une chaîne. */
|
|
7
|
+
texte?: string;
|
|
8
|
+
desactive?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface SelectMenuProps<T extends string = string> {
|
|
11
|
+
options: readonly OptionSelect<T>[];
|
|
12
|
+
valeur: T | null;
|
|
13
|
+
onChange: (valeur: T) => void;
|
|
14
|
+
/** Affiché quand rien n'est choisi. */
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
/** Identifiant du déclencheur — à faire correspondre au `htmlFor` du champ. */
|
|
17
|
+
id?: string;
|
|
18
|
+
/** Nom du contrôle, quand aucun intitulé visible ne le désigne. */
|
|
19
|
+
label?: string;
|
|
20
|
+
desactive?: boolean;
|
|
21
|
+
erreur?: boolean;
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export declare function SelectMenu<T extends string = string>({ options, valeur, onChange, placeholder, id, label, desactive, erreur, className, }: SelectMenuProps<T>): import("react").JSX.Element;
|
|
25
|
+
//# sourceMappingURL=select-menu.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-menu.d.ts","sourceRoot":"","sources":["../react/select-menu.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACrD,MAAM,EAAE,CAAC,CAAA;IACT,KAAK,EAAE,SAAS,CAAA;IAChB;0DACsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,MAAM,WAAW,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IACxD,OAAO,EAAE,SAAS,YAAY,CAAC,CAAC,CAAC,EAAE,CAAA;IACnC,MAAM,EAAE,CAAC,GAAG,IAAI,CAAA;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAA;IAC7B,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAOD,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,EACpD,OAAO,EACP,MAAM,EACN,QAAQ,EACR,WAAwB,EACxB,EAAE,EACF,KAAK,EACL,SAAS,EACT,MAAM,EACN,SAAS,GACV,EAAE,eAAe,CAAC,CAAC,CAAC,+BAwLpB"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
// Sélection DESSINÉE — le déclencheur a l'apparence d'un champ, et la liste
|
|
4
|
+
// est peinte par le paquet.
|
|
5
|
+
//
|
|
6
|
+
// ⚠️ POURQUOI CE COMPOSANT EXISTE, ALORS QUE `Select` (natif) EST LÀ.
|
|
7
|
+
// Un <select> natif ne peut pas être habillé : sa liste déroulée est peinte
|
|
8
|
+
// par le SYSTÈME, pas par la page. Sur un macOS en mode sombre elle sort en
|
|
9
|
+
// menu noir au milieu d'une interface claire — aucun CSS ne corrige cela.
|
|
10
|
+
//
|
|
11
|
+
// ⚠️ CE QUE ÇA COÛTE, ET QUI EST PAYÉ ICI. En remplaçant le contrôle natif,
|
|
12
|
+
// on perd le clavier, l'annonce au lecteur d'écran et la liste système. Tout
|
|
13
|
+
// est réimplémenté dans ce fichier : rôles ARIA de combobox/listbox,
|
|
14
|
+
// navigation aux flèches, Origine/Fin, Échap, recherche au clavier, fermeture
|
|
15
|
+
// au clic extérieur et restitution du focus. C'est la raison pour laquelle il
|
|
16
|
+
// n'existe PAS de version « CSS seule » de ce composant : les classes posées
|
|
17
|
+
// à la main sans ce travail livrent un select inutilisable au clavier.
|
|
18
|
+
//
|
|
19
|
+
// Quand préférer `Select` (natif) : un formulaire long sur mobile, où la
|
|
20
|
+
// liste système est plus rapide à manipuler que n'importe quelle liste
|
|
21
|
+
// maison, et où le clavier logiciel s'adapte tout seul.
|
|
22
|
+
import { useCallback, useEffect, useId, useRef, useState } from 'react';
|
|
23
|
+
import { cx } from './cx.js';
|
|
24
|
+
function texteDe(o) {
|
|
25
|
+
if (!o)
|
|
26
|
+
return '';
|
|
27
|
+
return o.texte ?? (typeof o.label === 'string' ? o.label : String(o.valeur));
|
|
28
|
+
}
|
|
29
|
+
export function SelectMenu({ options, valeur, onChange, placeholder = 'Choisir…', id, label, desactive, erreur, className, }) {
|
|
30
|
+
const auto = useId();
|
|
31
|
+
const idListe = `${id ?? auto}-liste`;
|
|
32
|
+
const [ouvert, setOuvert] = useState(false);
|
|
33
|
+
// L'option SURVOLÉE au clavier, distincte de l'option CHOISIE : c'est elle
|
|
34
|
+
// que `aria-activedescendant` désigne, et elle ne devient un choix qu'à
|
|
35
|
+
// Entrée. Les confondre ferait valider au premier coup de flèche.
|
|
36
|
+
const [actif, setActif] = useState(0);
|
|
37
|
+
const ancre = useRef(null);
|
|
38
|
+
const declencheur = useRef(null);
|
|
39
|
+
const liste = useRef(null);
|
|
40
|
+
// La saisie au clavier (« ré » → Rédacteur) s'accumule et retombe après
|
|
41
|
+
// une seconde : c'est le comportement d'un <select> natif, et le perdre
|
|
42
|
+
// se remarque tout de suite sur une liste longue.
|
|
43
|
+
const frappe = useRef({ texte: '', quand: 0 });
|
|
44
|
+
const indexChoisi = options.findIndex((o) => o.valeur === valeur);
|
|
45
|
+
const choisi = indexChoisi >= 0 ? options[indexChoisi] : undefined;
|
|
46
|
+
const ouvrir = useCallback(() => {
|
|
47
|
+
if (desactive)
|
|
48
|
+
return;
|
|
49
|
+
// On s'ouvre SUR l'option courante, pas sur la première : dans une liste
|
|
50
|
+
// de vingt entrées, repartir du haut oblige à retrouver sa place.
|
|
51
|
+
setActif(indexChoisi >= 0 ? indexChoisi : 0);
|
|
52
|
+
setOuvert(true);
|
|
53
|
+
}, [desactive, indexChoisi]);
|
|
54
|
+
const fermer = useCallback((rendreLeFocus = true) => {
|
|
55
|
+
setOuvert(false);
|
|
56
|
+
if (rendreLeFocus)
|
|
57
|
+
declencheur.current?.focus();
|
|
58
|
+
}, []);
|
|
59
|
+
const choisir = useCallback((i) => {
|
|
60
|
+
const o = options[i];
|
|
61
|
+
if (!o || o.desactive)
|
|
62
|
+
return;
|
|
63
|
+
onChange(o.valeur);
|
|
64
|
+
fermer();
|
|
65
|
+
}, [options, onChange, fermer]);
|
|
66
|
+
// Clic extérieur. `pointerdown` et non `click` : un clic qui commence
|
|
67
|
+
// dehors et finit dedans ne doit pas rouvrir ce qu'il vient de fermer.
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
if (!ouvert)
|
|
70
|
+
return;
|
|
71
|
+
const doc = ancre.current?.ownerDocument ?? document;
|
|
72
|
+
function dehors(e) {
|
|
73
|
+
if (!ancre.current?.contains(e.target))
|
|
74
|
+
setOuvert(false);
|
|
75
|
+
}
|
|
76
|
+
doc.addEventListener('pointerdown', dehors);
|
|
77
|
+
return () => doc.removeEventListener('pointerdown', dehors);
|
|
78
|
+
}, [ouvert]);
|
|
79
|
+
// L'option active reste visible quand on parcourt une liste plus haute que
|
|
80
|
+
// son cadre.
|
|
81
|
+
useEffect(() => {
|
|
82
|
+
if (!ouvert)
|
|
83
|
+
return;
|
|
84
|
+
const el = liste.current?.children[actif];
|
|
85
|
+
el?.scrollIntoView({ block: 'nearest' });
|
|
86
|
+
}, [ouvert, actif]);
|
|
87
|
+
function suivant(depuis, pas) {
|
|
88
|
+
const n = options.length;
|
|
89
|
+
for (let k = 1; k <= n; k++) {
|
|
90
|
+
const i = (depuis + pas * k + n * n) % n;
|
|
91
|
+
if (!options[i]?.desactive)
|
|
92
|
+
return i;
|
|
93
|
+
}
|
|
94
|
+
return depuis;
|
|
95
|
+
}
|
|
96
|
+
function onKeyDown(e) {
|
|
97
|
+
if (desactive)
|
|
98
|
+
return;
|
|
99
|
+
if (!ouvert) {
|
|
100
|
+
if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
|
|
101
|
+
e.preventDefault();
|
|
102
|
+
ouvrir();
|
|
103
|
+
}
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
switch (e.key) {
|
|
107
|
+
case 'Escape':
|
|
108
|
+
e.preventDefault();
|
|
109
|
+
e.stopPropagation();
|
|
110
|
+
fermer();
|
|
111
|
+
return;
|
|
112
|
+
case 'Enter':
|
|
113
|
+
case ' ':
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
choisir(actif);
|
|
116
|
+
return;
|
|
117
|
+
case 'ArrowDown':
|
|
118
|
+
e.preventDefault();
|
|
119
|
+
setActif((i) => suivant(i, 1));
|
|
120
|
+
return;
|
|
121
|
+
case 'ArrowUp':
|
|
122
|
+
e.preventDefault();
|
|
123
|
+
setActif((i) => suivant(i, -1));
|
|
124
|
+
return;
|
|
125
|
+
case 'Home':
|
|
126
|
+
e.preventDefault();
|
|
127
|
+
setActif(suivant(-1, 1));
|
|
128
|
+
return;
|
|
129
|
+
case 'End':
|
|
130
|
+
e.preventDefault();
|
|
131
|
+
setActif(suivant(options.length, -1));
|
|
132
|
+
return;
|
|
133
|
+
case 'Tab':
|
|
134
|
+
// Tab valide et sort : c'est ce que fait un select natif, et sortir
|
|
135
|
+
// sans rien retenir surprend.
|
|
136
|
+
choisir(actif);
|
|
137
|
+
return;
|
|
138
|
+
default:
|
|
139
|
+
break;
|
|
140
|
+
}
|
|
141
|
+
if (e.key.length === 1) {
|
|
142
|
+
const maintenant = Date.now();
|
|
143
|
+
const texte = (maintenant - frappe.current.quand < 1000 ? frappe.current.texte : '') +
|
|
144
|
+
e.key.toLowerCase();
|
|
145
|
+
frappe.current = { texte, quand: maintenant };
|
|
146
|
+
const i = options.findIndex((o) => !o.desactive && texteDe(o).toLowerCase().startsWith(texte));
|
|
147
|
+
if (i >= 0)
|
|
148
|
+
setActif(i);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
return (_jsxs("div", { ref: ancre, className: cx('zv-select-anchor', 'zv-select-anchor--block', className), children: [_jsxs("button", { ref: declencheur, id: id, type: "button", role: "combobox", "aria-expanded": ouvert, "aria-controls": idListe, "aria-haspopup": "listbox", "aria-label": label, "aria-invalid": erreur || undefined, "aria-activedescendant": ouvert ? `${idListe}-${actif}` : undefined, disabled: desactive, "data-vide": choisi ? undefined : 'oui', className: "zv-input zv-input--trigger", onClick: () => (ouvert ? fermer() : ouvrir()), onKeyDown: onKeyDown, children: [_jsx("span", { className: "zv-trunc", children: choisi ? choisi.label : placeholder }), _jsx("span", { className: "zv-select__chevron", "aria-hidden": "true", children: "\u25BE" })] }), ouvert && (_jsx("div", { ref: liste, id: idListe, role: "listbox", className: "zv-menu", children: options.map((o, i) => (_jsx("button", { id: `${idListe}-${i}`, type: "button", role: "option", "aria-selected": o.valeur === valeur, "aria-disabled": o.desactive || undefined,
|
|
152
|
+
// ⚠️ tabIndex -1 : le focus ne quitte JAMAIS le déclencheur.
|
|
153
|
+
// C'est ce qui permet à aria-activedescendant de porter
|
|
154
|
+
// l'annonce, et à la frappe de continuer d'arriver au clavier.
|
|
155
|
+
tabIndex: -1, className: cx('zv-menu__item', i === actif && !o.desactive && 'zv-menu__item--survol'), onPointerEnter: () => !o.desactive && setActif(i), onClick: () => choisir(i), children: o.label }, o.valeur))) }))] }));
|
|
156
|
+
}
|
|
157
|
+
//# sourceMappingURL=select-menu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select-menu.js","sourceRoot":"","sources":["../react/select-menu.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
package/react/catalogue.tsx
CHANGED
|
@@ -17,8 +17,9 @@
|
|
|
17
17
|
import { useState, type ReactNode } from 'react'
|
|
18
18
|
import { Button, ButtonLink, ButtonRow, LinkArrow } from './actions.js'
|
|
19
19
|
import {
|
|
20
|
-
Card, Check, Divider, Ent, EntText, Faq, FaqItem,
|
|
21
|
-
|
|
20
|
+
Callout, Card, Check, Divider, Ent, EntText, Faq, FaqItem, Flow, FlowStep,
|
|
21
|
+
Glass, IndexItem, IndexList, Inset, MiniStat, MiniStatItem, Pill, Price,
|
|
22
|
+
Quote, Rows, RowsItem, Src, SrcRow, StatCard, Tag, UiPreview,
|
|
22
23
|
} from './content.js'
|
|
23
24
|
import {
|
|
24
25
|
Avatar, Break, Cell, Chip, ChipRow, Cite, CiteRow, FileType, KV, KVRow,
|
|
@@ -44,6 +45,7 @@ import {
|
|
|
44
45
|
SidebarHead, Tabs, Topbar, TopbarTitle,
|
|
45
46
|
} from './navigation.js'
|
|
46
47
|
import { Drawer, Modal, Toast, Toasts } from './overlays.js'
|
|
48
|
+
import { SelectMenu } from './select-menu.js'
|
|
47
49
|
import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, TextOnDark, anim } from './surfaces.js'
|
|
48
50
|
import {
|
|
49
51
|
Body, CardTitle, Display, Em, H1, H2, H3, Heading, Kicker, Lead, Link, Mono, Note,
|
|
@@ -118,6 +120,27 @@ function DemoTabs() {
|
|
|
118
120
|
)
|
|
119
121
|
}
|
|
120
122
|
|
|
123
|
+
function DemoSelectMenu() {
|
|
124
|
+
const [role, setRole] = useState<'admin' | 'redacteur' | 'lecture'>('redacteur')
|
|
125
|
+
return (
|
|
126
|
+
<div style={{ maxWidth: 280 }}>
|
|
127
|
+
<Field label="RÔLE" htmlFor="ex-role-menu">
|
|
128
|
+
<SelectMenu
|
|
129
|
+
id="ex-role-menu"
|
|
130
|
+
valeur={role}
|
|
131
|
+
onChange={setRole}
|
|
132
|
+
options={[
|
|
133
|
+
{ valeur: 'admin', label: 'Administrateur' },
|
|
134
|
+
{ valeur: 'redacteur', label: 'Rédacteur' },
|
|
135
|
+
{ valeur: 'lecture', label: 'Lecture seule' },
|
|
136
|
+
{ valeur: 'facturation' as never, label: 'Facturation', desactive: true },
|
|
137
|
+
]}
|
|
138
|
+
/>
|
|
139
|
+
</Field>
|
|
140
|
+
</div>
|
|
141
|
+
)
|
|
142
|
+
}
|
|
143
|
+
|
|
121
144
|
function DemoMenu() {
|
|
122
145
|
const [ouvert, setOuvert] = useState(false)
|
|
123
146
|
const [valeur, setValeur] = useState('Toute la base')
|
|
@@ -453,7 +476,21 @@ export const CATALOGUE: GroupeCatalogue[] = [
|
|
|
453
476
|
id: 'select',
|
|
454
477
|
nom: 'Sélection',
|
|
455
478
|
resume:
|
|
456
|
-
'<select>
|
|
479
|
+
'Liste DESSINÉE jusqu’au bout — c’est le motif par défaut depuis le 25/08. Le <select> natif ne peut pas être habillé : sa liste est peinte par le système, et sort en menu noir sur un macOS en mode sombre. Clavier, annonce et recherche à la frappe sont réimplémentés ici.',
|
|
480
|
+
code: `<Field label="RÔLE" htmlFor="role">
|
|
481
|
+
<SelectMenu id="role" valeur={role} onChange={setRole} options={[
|
|
482
|
+
{ valeur: 'admin', label: 'Administrateur' },
|
|
483
|
+
{ valeur: 'redacteur', label: 'Rédacteur' },
|
|
484
|
+
{ valeur: 'facturation', label: 'Facturation', desactive: true },
|
|
485
|
+
]} />
|
|
486
|
+
</Field>`,
|
|
487
|
+
rendu: <DemoSelectMenu />,
|
|
488
|
+
},
|
|
489
|
+
{
|
|
490
|
+
id: 'select-natif',
|
|
491
|
+
nom: 'Sélection native',
|
|
492
|
+
resume:
|
|
493
|
+
'⚠️ À RÉSERVER aux formulaires longs sur mobile, où la liste système est plus rapide que n’importe quelle liste maison et où le clavier logiciel s’adapte seul. Partout ailleurs, préférer « Sélection » : celle-ci ne peut pas être habillée.',
|
|
457
494
|
code: `<Field label="RÔLE" htmlFor="role">
|
|
458
495
|
<Select id="role"><option>Administrateur</option>…</Select>
|
|
459
496
|
</Field>`,
|
|
@@ -1307,6 +1344,113 @@ export const CATALOGUE: GroupeCatalogue[] = [
|
|
|
1307
1344
|
],
|
|
1308
1345
|
},
|
|
1309
1346
|
|
|
1347
|
+
{
|
|
1348
|
+
id: 'blocs-editoriaux',
|
|
1349
|
+
nom: 'Blocs éditoriaux',
|
|
1350
|
+
couche: 'vitrine',
|
|
1351
|
+
css: 'components.css',
|
|
1352
|
+
resume:
|
|
1353
|
+
"Quatre façons de poser du contenu SANS carte. Ils existent pour une règle de composition de la DA (24/08/2026) : jamais deux blocs de même forme qui se suivent, 80 % de formes différentes par page — les grilles de cartes redeviennent un choix, pas un réflexe.",
|
|
1354
|
+
exemples: [
|
|
1355
|
+
{
|
|
1356
|
+
id: 'rows',
|
|
1357
|
+
nom: 'Rangées à filets',
|
|
1358
|
+
resume:
|
|
1359
|
+
'Libellé fort + contenu, un trait fin entre chaque rangée. Pour les listes où l’ALIGNEMENT fait la lecture (profils rencontrés, prestations, caractéristiques) — là où des cartes casseraient la comparaison.',
|
|
1360
|
+
code: `<Rows>
|
|
1361
|
+
<RowsItem cle="Directions juridiques">Structurer la connaissance interne…</RowsItem>
|
|
1362
|
+
<RowsItem cle="Cabinets d’avocats">Retrouver la jurisprudence du cabinet…</RowsItem>
|
|
1363
|
+
</Rows>`,
|
|
1364
|
+
rendu: (
|
|
1365
|
+
<Rows>
|
|
1366
|
+
<RowsItem cle="Directions juridiques">
|
|
1367
|
+
Structurer la connaissance interne et la rendre interrogeable par toute
|
|
1368
|
+
l’équipe.
|
|
1369
|
+
</RowsItem>
|
|
1370
|
+
<RowsItem cle="Cabinets d’avocats">
|
|
1371
|
+
Retrouver la jurisprudence du cabinet en posant la question en français.
|
|
1372
|
+
</RowsItem>
|
|
1373
|
+
<RowsItem cle="Notaires">
|
|
1374
|
+
Croiser les actes types avec la pratique réelle de l’étude.
|
|
1375
|
+
</RowsItem>
|
|
1376
|
+
</Rows>
|
|
1377
|
+
),
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
id: 'index',
|
|
1381
|
+
nom: 'Sommaire numéroté',
|
|
1382
|
+
resume:
|
|
1383
|
+
'Le numéro en display léger, le contenu à droite. Pour les suites longues qui étoufferaient en cartes (offres détaillées, programmes). Le numéro est du CONTENU, pas un compteur CSS : un sommaire qui saute une entrée doit pouvoir le dire.',
|
|
1384
|
+
code: `<IndexList>
|
|
1385
|
+
<IndexItem num="01"><CardTitle>Cadrage</CardTitle>…</IndexItem>
|
|
1386
|
+
<IndexItem num="02"><CardTitle>Indexation</CardTitle>…</IndexItem>
|
|
1387
|
+
</IndexList>
|
|
1388
|
+
|
|
1389
|
+
<IndexList cols>…</IndexList>`,
|
|
1390
|
+
rendu: (
|
|
1391
|
+
<IndexList>
|
|
1392
|
+
<IndexItem num="01">
|
|
1393
|
+
<CardTitle>Cadrage</CardTitle>
|
|
1394
|
+
<Body taille="dense">
|
|
1395
|
+
Deux ateliers pour délimiter le corpus et les usages prioritaires.
|
|
1396
|
+
</Body>
|
|
1397
|
+
</IndexItem>
|
|
1398
|
+
<IndexItem num="02">
|
|
1399
|
+
<CardTitle>Indexation</CardTitle>
|
|
1400
|
+
<Body taille="dense">
|
|
1401
|
+
Le corpus est océrisé, anonymisé et indexé — comptez une semaine pour
|
|
1402
|
+
10 000 pièces.
|
|
1403
|
+
</Body>
|
|
1404
|
+
</IndexItem>
|
|
1405
|
+
</IndexList>
|
|
1406
|
+
),
|
|
1407
|
+
},
|
|
1408
|
+
{
|
|
1409
|
+
id: 'flow',
|
|
1410
|
+
nom: 'Déroulé vertical',
|
|
1411
|
+
resume:
|
|
1412
|
+
'La déclinaison verticale de « Steps », pour les méthodes qui se lisent comme un récit. Les points reprennent les couleurs des points de méthode — l’un des trois emplois autorisés du spectre.',
|
|
1413
|
+
code: `<Flow>
|
|
1414
|
+
<FlowStep><CardTitle>Déposer</CardTitle>…</FlowStep>
|
|
1415
|
+
<FlowStep teinte="violet"><CardTitle>Interroger</CardTitle>…</FlowStep>
|
|
1416
|
+
<FlowStep teinte="cyan"><CardTitle>Vérifier</CardTitle>…</FlowStep>
|
|
1417
|
+
</Flow>`,
|
|
1418
|
+
rendu: (
|
|
1419
|
+
<Flow>
|
|
1420
|
+
<FlowStep>
|
|
1421
|
+
<CardTitle>Déposer</CardTitle>
|
|
1422
|
+
<Body taille="dense">Les pièces partent telles quelles, annexes comprises.</Body>
|
|
1423
|
+
</FlowStep>
|
|
1424
|
+
<FlowStep teinte="violet">
|
|
1425
|
+
<CardTitle>Interroger</CardTitle>
|
|
1426
|
+
<Body taille="dense">La question se pose en français, pas en mots-clés.</Body>
|
|
1427
|
+
</FlowStep>
|
|
1428
|
+
<FlowStep teinte="cyan">
|
|
1429
|
+
<CardTitle>Vérifier</CardTitle>
|
|
1430
|
+
<Body taille="dense">Chaque affirmation renvoie au passage qui la fonde.</Body>
|
|
1431
|
+
</FlowStep>
|
|
1432
|
+
</Flow>
|
|
1433
|
+
),
|
|
1434
|
+
},
|
|
1435
|
+
{
|
|
1436
|
+
id: 'callout',
|
|
1437
|
+
nom: 'Encart d’appel',
|
|
1438
|
+
resume:
|
|
1439
|
+
'Une bande sur accent-soft, un titre, une action : l’offre transverse qui doit se voir sans crier (remise, renvoi vers une autre page). L’action passe en enfant — elle se range à droite et tombe sous le titre sur mobile.',
|
|
1440
|
+
code: `<Callout titre="Formation Campus incluse la première année">
|
|
1441
|
+
<ButtonLink href="/campus" variante="fantome">Découvrir Campus</ButtonLink>
|
|
1442
|
+
</Callout>`,
|
|
1443
|
+
rendu: (
|
|
1444
|
+
<Callout titre="Formation Campus incluse la première année">
|
|
1445
|
+
<ButtonLink href="#" variante="fantome">
|
|
1446
|
+
Découvrir Campus
|
|
1447
|
+
</ButtonLink>
|
|
1448
|
+
</Callout>
|
|
1449
|
+
),
|
|
1450
|
+
},
|
|
1451
|
+
],
|
|
1452
|
+
},
|
|
1453
|
+
|
|
1310
1454
|
{
|
|
1311
1455
|
id: 'mise-en-page',
|
|
1312
1456
|
nom: 'Mise en page',
|
package/react/content.tsx
CHANGED
|
@@ -311,3 +311,107 @@ export function Check({ className, ...reste }: Span & { className?: string }) {
|
|
|
311
311
|
</span>
|
|
312
312
|
)
|
|
313
313
|
}
|
|
314
|
+
|
|
315
|
+
/* ─── Blocs éditoriaux ─────────────────────────────────────────────────
|
|
316
|
+
* HORS RELEVÉ — ajoutés à la demande de la DA (règle de variété du
|
|
317
|
+
* 24/08/2026 : jamais deux blocs de même forme qui se suivent, 80 % de
|
|
318
|
+
* formes différentes par page). Quatre façons de poser du contenu SANS
|
|
319
|
+
* carte, pour que les grilles de cartes redeviennent un choix et non un
|
|
320
|
+
* réflexe. CSS relevé de la PR #1 (Enrase). */
|
|
321
|
+
|
|
322
|
+
export function Rows({ className, ...reste }: Div & { className?: string }) {
|
|
323
|
+
return <div className={cx('zv-rows', className)} {...reste} />
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
export interface RowsItemProps extends Div {
|
|
327
|
+
/** Le libellé fort, à gauche. Colonne fixe : c'est l'alignement d'une
|
|
328
|
+
* rangée à l'autre qui fait la lecture. */
|
|
329
|
+
cle: ReactNode
|
|
330
|
+
className?: string
|
|
331
|
+
children?: ReactNode
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
/** Rangée à filets : libellé fort + contenu, un trait fin entre chaque.
|
|
335
|
+
* Pour les listes où l'alignement fait la lecture (profils, prestations,
|
|
336
|
+
* caractéristiques). */
|
|
337
|
+
export function RowsItem({ cle, className, children, ...reste }: RowsItemProps) {
|
|
338
|
+
return (
|
|
339
|
+
<div className={cx('zv-rows__row', className)} {...reste}>
|
|
340
|
+
<span className="zv-rows__key">{cle}</span>
|
|
341
|
+
<span className="zv-rows__val">{children}</span>
|
|
342
|
+
</div>
|
|
343
|
+
)
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
export interface IndexListProps extends Div {
|
|
347
|
+
/** Grille de trois, sans filets — l'espace fait la séparation. */
|
|
348
|
+
cols?: boolean
|
|
349
|
+
className?: string
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/** Sommaire numéroté éditorial. Pour les suites longues qui étoufferaient
|
|
353
|
+
* en cartes (offres détaillées, programmes). */
|
|
354
|
+
export function IndexList({ cols, className, ...reste }: IndexListProps) {
|
|
355
|
+
return (
|
|
356
|
+
<div className={cx('zv-index', cols && 'zv-index--cols', className)} {...reste} />
|
|
357
|
+
)
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
export interface IndexItemProps extends Div {
|
|
361
|
+
/** Le numéro, en display léger (« 01 »). C'est du CONTENU, pas un
|
|
362
|
+
* compteur CSS : un sommaire qui saute une entrée doit pouvoir le dire. */
|
|
363
|
+
num: ReactNode
|
|
364
|
+
className?: string
|
|
365
|
+
children?: ReactNode
|
|
366
|
+
}
|
|
367
|
+
|
|
368
|
+
export function IndexItem({ num, className, children, ...reste }: IndexItemProps) {
|
|
369
|
+
return (
|
|
370
|
+
<div className={cx('zv-index__item', className)} {...reste}>
|
|
371
|
+
<span className="zv-index__num" aria-hidden="true">
|
|
372
|
+
{num}
|
|
373
|
+
</span>
|
|
374
|
+
<div className="zv-index__body">{children}</div>
|
|
375
|
+
</div>
|
|
376
|
+
)
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
/** Déroulé vertical — la déclinaison verticale de `Steps`, pour les
|
|
380
|
+
* méthodes qui se lisent comme un récit. */
|
|
381
|
+
export function Flow({ className, ...reste }: Div & { className?: string }) {
|
|
382
|
+
return <div className={cx('zv-flow', className)} {...reste} />
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
export interface FlowStepProps extends Div {
|
|
386
|
+
/** Les points reprennent les couleurs des points de méthode — l'un des
|
|
387
|
+
* trois emplois autorisés du spectre. Sans teinte : iris. */
|
|
388
|
+
teinte?: 'violet' | 'cyan'
|
|
389
|
+
className?: string
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
export function FlowStep({ teinte, className, ...reste }: FlowStepProps) {
|
|
393
|
+
return (
|
|
394
|
+
<div
|
|
395
|
+
className={cx('zv-flow__step', teinte && `zv-flow__step--${teinte}`, className)}
|
|
396
|
+
{...reste}
|
|
397
|
+
/>
|
|
398
|
+
)
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
export interface CalloutProps extends Div {
|
|
402
|
+
titre: ReactNode
|
|
403
|
+
className?: string
|
|
404
|
+
children?: ReactNode
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
/** Encart d'appel sur accent-soft : l'offre transverse qui doit se voir
|
|
408
|
+
* sans crier (remise, renvoi vers une autre page). L'action se passe en
|
|
409
|
+
* enfant — elle se range à droite, et tombe sous le titre sur mobile. */
|
|
410
|
+
export function Callout({ titre, className, children, ...reste }: CalloutProps) {
|
|
411
|
+
return (
|
|
412
|
+
<div className={cx('zv-callout', className)} {...reste}>
|
|
413
|
+
<h3 className="zv-callout__title">{titre}</h3>
|
|
414
|
+
{children}
|
|
415
|
+
</div>
|
|
416
|
+
)
|
|
417
|
+
}
|