@zevra/ui 0.6.0 → 0.7.0

package/dist/css-inline.js.map

@@ -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,sooLAAsooL,CAAA;AAEzqoL;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}
+{"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

@@ -8,6 +8,7 @@ export * from './icon.js';
 export * from './layout.js';
 export * from './navigation.js';
 export * from './overlays.js';
+export * from './select-menu.js';
 export * from './surfaces.js';
 export * from './typography.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -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"}
+{"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

@@ -36,6 +36,7 @@ export * from './icon.js';
 export * from './layout.js';
 export * from './navigation.js';
 export * from './overlays.js';
+export * from './select-menu.js';
 export * from './surfaces.js';
 export * from './typography.js';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -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"}
+{"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/select-menu.d.ts

@@ -0,0 +1,25 @@
+import type { ReactNode } from 'react';
+export interface OptionSelect<T extends string = string> {
+    valeur: T;
+    label: ReactNode;
+    /** Texte employé pour la recherche au clavier et l'affichage du
+     *  déclencheur quand `label` n'est pas une chaîne. */
+    texte?: string;
+    desactive?: boolean;
+}
+export interface SelectMenuProps<T extends string = string> {
+    options: readonly OptionSelect<T>[];
+    valeur: T | null;
+    onChange: (valeur: T) => void;
+    /** Affiché quand rien n'est choisi. */
+    placeholder?: string;
+    /** Identifiant du déclencheur — à faire correspondre au `htmlFor` du champ. */
+    id?: string;
+    /** Nom du contrôle, quand aucun intitulé visible ne le désigne. */
+    label?: string;
+    desactive?: boolean;
+    erreur?: boolean;
+    className?: string;
+}
+export declare function SelectMenu<T extends string = string>({ options, valeur, onChange, placeholder, id, label, desactive, erreur, className, }: SelectMenuProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=select-menu.d.ts.map

package/dist/select-menu.d.ts.map

@@ -0,0 +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"}

package/dist/select-menu.js

@@ -0,0 +1,157 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Sélection DESSINÉE — le déclencheur a l'apparence d'un champ, et la liste
+// est peinte par le paquet.
+//
+// ⚠️ POURQUOI CE COMPOSANT EXISTE, ALORS QUE `Select` (natif) EST LÀ.
+// Un <select> natif ne peut pas être habillé : sa liste déroulée est peinte
+// par le SYSTÈME, pas par la page. Sur un macOS en mode sombre elle sort en
+// menu noir au milieu d'une interface claire — aucun CSS ne corrige cela.
+//
+// ⚠️ CE QUE ÇA COÛTE, ET QUI EST PAYÉ ICI. En remplaçant le contrôle natif,
+// on perd le clavier, l'annonce au lecteur d'écran et la liste système. Tout
+// est réimplémenté dans ce fichier : rôles ARIA de combobox/listbox,
+// navigation aux flèches, Origine/Fin, Échap, recherche au clavier, fermeture
+// au clic extérieur et restitution du focus. C'est la raison pour laquelle il
+// n'existe PAS de version « CSS seule » de ce composant : les classes posées
+// à la main sans ce travail livrent un select inutilisable au clavier.
+//
+// Quand préférer `Select` (natif) : un formulaire long sur mobile, où la
+// liste système est plus rapide à manipuler que n'importe quelle liste
+// maison, et où le clavier logiciel s'adapte tout seul.
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { cx } from './cx.js';
+function texteDe(o) {
+    if (!o)
+        return '';
+    return o.texte ?? (typeof o.label === 'string' ? o.label : String(o.valeur));
+}
+export function SelectMenu({ options, valeur, onChange, placeholder = 'Choisir…', id, label, desactive, erreur, className, }) {
+    const auto = useId();
+    const idListe = `${id ?? auto}-liste`;
+    const [ouvert, setOuvert] = useState(false);
+    // L'option SURVOLÉE au clavier, distincte de l'option CHOISIE : c'est elle
+    // que `aria-activedescendant` désigne, et elle ne devient un choix qu'à
+    // Entrée. Les confondre ferait valider au premier coup de flèche.
+    const [actif, setActif] = useState(0);
+    const ancre = useRef(null);
+    const declencheur = useRef(null);
+    const liste = useRef(null);
+    // La saisie au clavier (« ré » → Rédacteur) s'accumule et retombe après
+    // une seconde : c'est le comportement d'un <select> natif, et le perdre
+    // se remarque tout de suite sur une liste longue.
+    const frappe = useRef({ texte: '', quand: 0 });
+    const indexChoisi = options.findIndex((o) => o.valeur === valeur);
+    const choisi = indexChoisi >= 0 ? options[indexChoisi] : undefined;
+    const ouvrir = useCallback(() => {
+        if (desactive)
+            return;
+        // On s'ouvre SUR l'option courante, pas sur la première : dans une liste
+        // de vingt entrées, repartir du haut oblige à retrouver sa place.
+        setActif(indexChoisi >= 0 ? indexChoisi : 0);
+        setOuvert(true);
+    }, [desactive, indexChoisi]);
+    const fermer = useCallback((rendreLeFocus = true) => {
+        setOuvert(false);
+        if (rendreLeFocus)
+            declencheur.current?.focus();
+    }, []);
+    const choisir = useCallback((i) => {
+        const o = options[i];
+        if (!o || o.desactive)
+            return;
+        onChange(o.valeur);
+        fermer();
+    }, [options, onChange, fermer]);
+    // Clic extérieur. `pointerdown` et non `click` : un clic qui commence
+    // dehors et finit dedans ne doit pas rouvrir ce qu'il vient de fermer.
+    useEffect(() => {
+        if (!ouvert)
+            return;
+        const doc = ancre.current?.ownerDocument ?? document;
+        function dehors(e) {
+            if (!ancre.current?.contains(e.target))
+                setOuvert(false);
+        }
+        doc.addEventListener('pointerdown', dehors);
+        return () => doc.removeEventListener('pointerdown', dehors);
+    }, [ouvert]);
+    // L'option active reste visible quand on parcourt une liste plus haute que
+    // son cadre.
+    useEffect(() => {
+        if (!ouvert)
+            return;
+        const el = liste.current?.children[actif];
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [ouvert, actif]);
+    function suivant(depuis, pas) {
+        const n = options.length;
+        for (let k = 1; k <= n; k++) {
+            const i = (depuis + pas * k + n * n) % n;
+            if (!options[i]?.desactive)
+                return i;
+        }
+        return depuis;
+    }
+    function onKeyDown(e) {
+        if (desactive)
+            return;
+        if (!ouvert) {
+            if (['Enter', ' ', 'ArrowDown', 'ArrowUp'].includes(e.key)) {
+                e.preventDefault();
+                ouvrir();
+            }
+            return;
+        }
+        switch (e.key) {
+            case 'Escape':
+                e.preventDefault();
+                e.stopPropagation();
+                fermer();
+                return;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                choisir(actif);
+                return;
+            case 'ArrowDown':
+                e.preventDefault();
+                setActif((i) => suivant(i, 1));
+                return;
+            case 'ArrowUp':
+                e.preventDefault();
+                setActif((i) => suivant(i, -1));
+                return;
+            case 'Home':
+                e.preventDefault();
+                setActif(suivant(-1, 1));
+                return;
+            case 'End':
+                e.preventDefault();
+                setActif(suivant(options.length, -1));
+                return;
+            case 'Tab':
+                // Tab valide et sort : c'est ce que fait un select natif, et sortir
+                // sans rien retenir surprend.
+                choisir(actif);
+                return;
+            default:
+                break;
+        }
+        if (e.key.length === 1) {
+            const maintenant = Date.now();
+            const texte = (maintenant - frappe.current.quand < 1000 ? frappe.current.texte : '') +
+                e.key.toLowerCase();
+            frappe.current = { texte, quand: maintenant };
+            const i = options.findIndex((o) => !o.desactive && texteDe(o).toLowerCase().startsWith(texte));
+            if (i >= 0)
+                setActif(i);
+        }
+    }
+    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, 
+                    // ⚠️ tabIndex -1 : le focus ne quitte JAMAIS le déclencheur.
+                    // C'est ce qui permet à aria-activedescendant de porter
+                    // l'annonce, et à la frappe de continuer d'arriver au clavier.
+                    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))) }))] }));
+}
+//# sourceMappingURL=select-menu.js.map

package/dist/select-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-menu.js","sourceRoot":"","sources":["../react/select-menu.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,

package/react/catalogue.tsx

@@ -45,6 +45,7 @@ import {
   SidebarHead, Tabs, Topbar, TopbarTitle,
 } from './navigation.js'
 import { Drawer, Modal, Toast, Toasts } from './overlays.js'
+import { SelectMenu } from './select-menu.js'
 import { Band, Fade, Glyph, GridFloor, Halo, PanelNavy, TextOnDark, anim } from './surfaces.js'
 import {
   Body, CardTitle, Display, Em, H1, H2, H3, Heading, Kicker, Lead, Link, Mono, Note,
@@ -119,6 +120,27 @@ function DemoTabs() {
   )
 }
 
+function DemoSelectMenu() {
+  const [role, setRole] = useState<'admin' | 'redacteur' | 'lecture'>('redacteur')
+  return (
+    <div style={{ maxWidth: 280 }}>
+      <Field label="RÔLE" htmlFor="ex-role-menu">
+        <SelectMenu
+          id="ex-role-menu"
+          valeur={role}
+          onChange={setRole}
+          options={[
+            { valeur: 'admin', label: 'Administrateur' },
+            { valeur: 'redacteur', label: 'Rédacteur' },
+            { valeur: 'lecture', label: 'Lecture seule' },
+            { valeur: 'facturation' as never, label: 'Facturation', desactive: true },
+          ]}
+        />
+      </Field>
+    </div>
+  )
+}
+
 function DemoMenu() {
   const [ouvert, setOuvert] = useState(false)
   const [valeur, setValeur] = useState('Toute la base')
@@ -454,7 +476,21 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'select',
         nom: 'Sélection',
         resume:
-          '<select> NATIF : la flèche, l’ouverture au clavier et l’annonce viennent du navigateur. C’est le motif de choix par défaut.',
+          '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.',
+        code: `<Field label="RÔLE" htmlFor="role">
+  <SelectMenu id="role" valeur={role} onChange={setRole} options={[
+    { valeur: 'admin', label: 'Administrateur' },
+    { valeur: 'redacteur', label: 'Rédacteur' },
+    { valeur: 'facturation', label: 'Facturation', desactive: true },
+  ]} />
+</Field>`,
+        rendu: <DemoSelectMenu />,
+      },
+      {
+        id: 'select-natif',
+        nom: 'Sélection native',
+        resume:
+          '⚠️ À 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.',
         code: `<Field label="RÔLE" htmlFor="role">
   <Select id="role"><option>Administrateur</option>…</Select>
 </Field>`,