@zevra/ui 0.6.0 → 0.8.0

package/react/data-table.tsx

@@ -0,0 +1,153 @@
+// Tableau piloté par TanStack Table.
+//
+// ⚠️ CE FICHIER N'EST PAS DANS LE BARREL, et c'est délibéré :
+// `@tanstack/react-table` est une dépendance OPTIONNELLE. L'importer depuis
+// `@zevra/ui/react` casserait toutes les apps qui ne l'ont pas installée —
+// une landing n'a aucun tableau. D'où le sous-chemin dédié :
+//
+//     import { DataTable } from '@zevra/ui/react/table'
+//
+// POURQUOI TANSTACK plutôt que notre propre tri/pagination : tri multi-colonnes,
+// filtres, groupement, virtualisation, sélection de lignes — c'est un travail
+// de plusieurs mois que personne ici n'a envie de refaire, et mal. TanStack est
+// HEADLESS : il ne rend rien, il calcule des modèles de lignes. Ce fichier lui
+// donne l'apparence du paquet, exactement comme shadcn le fait avec ses
+// variables. Aucune classe nouvelle n'entre par cette porte : ce sont les
+// mêmes .zv-table / .zv-row / .zv-cell que le tableau écrit à la main.
+
+import type { ReactNode } from 'react'
+import {
+  flexRender,
+  type RowData,
+  type Table as TableTanstack,
+} from '@tanstack/react-table'
+import { cx } from './cx.js'
+
+// Le pont entre les deux mondes : une colonne déclare ici son registre
+// d'affichage, et le composant le traduit en classes du paquet. C'est ce qui
+// évite d'avoir à écrire une cellule sur mesure pour aligner un nombre.
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    /** `nom` : colonne d'identité, la seule en encre pleine.
+     *  `num` : chiffres alignés à droite, en chasse tabulaire. */
+    registre?: 'nom' | 'num'
+    /** Intitulé qui REMPLACE l'en-tête sous le point de rupture, où les
+     *  colonnes s'empilent et où l'en-tête disparaît. */
+    label?: string
+    /** Unité accolée au nombre, en plus petit. */
+    unite?: ReactNode
+    /** Largeur de la colonne dans la grille (syntaxe grid-template-columns).
+     *  Par défaut : `minmax(0, 1fr)`. */
+    largeur?: string
+  }
+}
+
+export interface DataTableProps<T> {
+  table: TableTanstack<T>
+  /** Rendu à la place des lignes quand le modèle est vide. ⚠️ C'est la LIGNE
+   *  d'absence qu'on attend ici (filtre trop étroit), pas l'écran d'absence :
+   *  l'en-tête doit rester visible pour qu'on puisse élargir le filtre. */
+  vide?: ReactNode
+  /** Appelé au clic sur une ligne. Sans lui, la ligne n'est pas cliquable —
+   *  et elle ne doit pas en avoir l'air. */
+  onRowClick?: (ligne: T) => void
+  className?: string
+}
+
+export function DataTable<T>({ table, vide, onRowClick, className }: DataTableProps<T>) {
+  const colonnes = table.getVisibleLeafColumns()
+  const gabarit = colonnes
+    .map((c) => c.columnDef.meta?.largeur ?? 'minmax(0, 1fr)')
+    .join(' ')
+  const lignes = table.getRowModel().rows
+
+  return (
+    <div
+      className={cx('zv-table', className)}
+      style={{ ['--zv-cols']: gabarit } as React.CSSProperties}
+    >
+      {table.getHeaderGroups().map((groupe) => (
+        <div className="zv-table__head" key={groupe.id}>
+          {groupe.headers.map((entete) => {
+            const triable = entete.column.getCanSort()
+            const sens = entete.column.getIsSorted()
+            const registre = entete.column.columnDef.meta?.registre
+            const contenu = entete.isPlaceholder
+              ? null
+              : flexRender(entete.column.columnDef.header, entete.getContext())
+            return (
+              <div
+                key={entete.id}
+                className={cx('zv-cell', registre === 'num' && 'zv-cell--num')}
+                // La colonne triée est annoncée : sans aria-sort, le tri est
+                // une information purement visuelle.
+                aria-sort={
+                  sens === 'asc' ? 'ascending' : sens === 'desc' ? 'descending' : undefined
+                }
+              >
+                {triable ? (
+                  <button
+                    type="button"
+                    className="zv-sort"
+                    onClick={entete.column.getToggleSortingHandler()}
+                  >
+                    {contenu}
+                    <span className="zv-sort__mark" aria-hidden="true">
+                      {sens === 'asc' ? '↑' : sens === 'desc' ? '↓' : '↕'}
+                    </span>
+                  </button>
+                ) : (
+                  contenu
+                )}
+              </div>
+            )
+          })}
+        </div>
+      ))}
+
+      {lignes.length === 0
+        ? vide
+        : lignes.map((ligne) => (
+            <div
+              key={ligne.id}
+              className="zv-row"
+              // Le clavier suit le clic : une ligne cliquable qui n'est pas
+              // atteignable au clavier est une action inaccessible.
+              role={onRowClick ? 'button' : undefined}
+              tabIndex={onRowClick ? 0 : undefined}
+              style={onRowClick ? undefined : { cursor: 'default' }}
+              onClick={onRowClick ? () => onRowClick(ligne.original) : undefined}
+              onKeyDown={
+                onRowClick
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        onRowClick(ligne.original)
+                      }
+                    }
+                  : undefined
+              }
+            >
+              {ligne.getVisibleCells().map((cellule) => {
+                const meta = cellule.column.columnDef.meta
+                return (
+                  <div
+                    key={cellule.id}
+                    className={cx(
+                      'zv-cell',
+                      meta?.registre === 'nom' && 'zv-cell--name',
+                      meta?.registre === 'num' && 'zv-cell--num',
+                    )}
+                  >
+                    {meta?.label && <span className="zv-cell__label">{meta.label}</span>}
+                    {flexRender(cellule.column.columnDef.cell, cellule.getContext())}
+                    {meta?.unite && <span className="zv-cell__unit">{meta.unite}</span>}
+                  </div>
+                )
+              })}
+            </div>
+          ))}
+    </div>
+  )
+}

package/react/index.ts

@@ -38,5 +38,6 @@ 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'

package/react/select-menu.tsx

@@ -0,0 +1,250 @@
+'use client'
+
+// 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 type { ReactNode } from 'react'
+import { cx } from './cx.js'
+
+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
+}
+
+function texteDe(o: OptionSelect | undefined): string {
+  if (!o) return ''
+  return o.texte ?? (typeof o.label === 'string' ? o.label : String(o.valeur))
+}
+
+export function SelectMenu<T extends string = string>({
+  options,
+  valeur,
+  onChange,
+  placeholder = 'Choisir…',
+  id,
+  label,
+  desactive,
+  erreur,
+  className,
+}: SelectMenuProps<T>) {
+  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<HTMLDivElement>(null)
+  const declencheur = useRef<HTMLButtonElement>(null)
+  const liste = useRef<HTMLDivElement>(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: string; quand: number }>({ 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: number) => {
+      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: PointerEvent) {
+      if (!ancre.current?.contains(e.target as Node)) 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] as HTMLElement | undefined
+    el?.scrollIntoView({ block: 'nearest' })
+  }, [ouvert, actif])
+
+  function suivant(depuis: number, pas: number): number {
+    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: React.KeyboardEvent) {
+    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 (
+    <div
+      ref={ancre}
+      className={cx('zv-select-anchor', 'zv-select-anchor--block', className)}
+    >
+      <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}
+      >
+        <span className="zv-trunc">{choisi ? choisi.label : placeholder}</span>
+        <span className="zv-select__chevron" aria-hidden="true">
+          ▾
+        </span>
+      </button>
+
+      {ouvert && (
+        <div ref={liste} id={idListe} role="listbox" className="zv-menu">
+          {options.map((o, i) => (
+            <button
+              key={o.valeur}
+              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)}
+            >
+              {o.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/base.css

@@ -273,7 +273,9 @@ a:not([class]):hover {
   width: var(--spec-filet);
   height: 2px;
   background: var(--spectre);
-  border-radius: 1px;
+  /* Angle vif comme tout le reste depuis le 25/08 — sur 2px de haut, le
+   * rayon d'1px du relevé ne se voyait de toute façon pas. */
+  border-radius: 0;
 }
 
 /* Bas de page : filet raccourci. */

package/src/components.css

@@ -94,7 +94,23 @@
  * à 16px dans DesignSystem.html. Tracés : M5 12h14 et M13 6l6 6-6 6, sur
  * un viewBox 0 0 24 24, stroke currentColor, épaisseur 2, bouts arrondis. */
 
+/* ⚠️ REPRIS le 25/08/2026 — la DA le jugeait « pas ouf ». Le diagnostic :
+ * c'était un lien bleu avec un chevron collé, sans rien qui le distingue
+ * d'un lien de texte, et sans aucune récompense au survol. Le mouvement du
+ * paquet est réservé à la vitrine et piloté au défilement ; il n'y avait
+ * donc PAS de vocabulaire pour un lien d'action.
+ *
+ * Trois ajouts, tous dessinés dans les tokens existants :
+ *   · un FILET qui se déploie sous le libellé au survol, de gauche à droite
+ *     (scaleX sur une origine gauche) — pas un `text-decoration`, qui ne
+ *     s'anime pas et coupe les jambages ;
+ *   · la flèche avance de 4px, ce qui donne au lien sa direction ;
+ *   · le libellé passe en --accent-deep.
+ * Le tout est repeint en une seule transition, donc coupé net par
+ * prefers-reduced-motion (base.css) — l'état final reste lisible sans. */
+
 .zv-link-arrow {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
@@ -102,22 +118,56 @@
   font-weight: 600;
   color: var(--accent);
   text-decoration: none;
+  transition: color 160ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* Le filet est un pseudo-élément et non une bordure : une bordure
+ * occuperait de la place et ferait sauter la ligne de base au survol. */
+.zv-link-arrow::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  bottom: -3px;
+  height: 1px;
+  background: currentColor;
+  transform: scaleX(0);
+  transform-origin: left center;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
 }
 
-.zv-link-arrow:hover {
+.zv-link-arrow:hover,
+.zv-link-arrow:focus-visible {
   color: var(--accent-deep);
 }
 
+.zv-link-arrow:hover::after,
+.zv-link-arrow:focus-visible::after {
+  transform: scaleX(1);
+}
+
 .zv-link-arrow svg {
   width: 15px;
   height: 15px;
   flex: none;
+  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-link-arrow:hover svg,
+.zv-link-arrow:focus-visible svg {
+  transform: translateX(4px);
 }
 
+/* Sur la bande manifeste : le filet suit `currentColor`, il n'y a donc rien
+ * à redéclarer — c'est tout l'intérêt de l'avoir posé en currentColor. */
 .zv-link-arrow--on-dark {
   color: var(--white);
 }
 
+.zv-link-arrow--on-dark:hover,
+.zv-link-arrow--on-dark:focus-visible {
+  color: var(--accent-on-dark);
+}
+
 /* ─── Badges et puces ───────────────────────────────────────────────────*/
 
 /* Pastille pleine : numéro de pièce, catégorie de section. */
@@ -148,7 +198,8 @@
   color: var(--accent-deep);
   background: var(--white);
   border: 1px solid var(--accent-line);
-  border-radius: 4px;
+  /* La puce de source est une pastille : elle suit le token, désormais à 0. */
+  border-radius: var(--r-pill);
   padding: 6px 10px;
 }
 
@@ -515,7 +566,7 @@
 .zv-progress {
   height: 3px;
   background: var(--hairline);
-  border-radius: 2px;
+  border-radius: 0;
   overflow: hidden;
 }
 

package/src/data.css

@@ -156,6 +156,51 @@
  * contient aucun, et les inventer ferait apparaître un fond de plus dans un
  * système qui n'en a que deux (blanc, survol). */
 
+/* ─── En-tête triable ──────────────────────────────────────────────────
+ * ⚠️ HORS RELEVÉ — ajouté le 25/08/2026 avec l'adaptateur TanStack Table.
+ * Aucun tableau de la production n'est triable ; l'intitulé y est du texte
+ * inerte. Un en-tête qui trie DOIT être un <button> — c'est la seule façon
+ * qu'il soit atteignable au clavier et annoncé comme actionnable.
+ *
+ * `font: inherit` plutôt qu'une police redite : l'en-tête a déjà la sienne
+ * (mono, capitales, interlettrée), et un <button> retomberait sur celle du
+ * navigateur. Hériter ne fait entrer aucune valeur nouvelle. */
+
+.zv-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.zv-sort:hover {
+  color: var(--accent);
+}
+
+.zv-sort:focus-visible {
+  /* L'en-tête colle au bord du cadre : l'anneau de base.css y serait rogné. */
+  outline-offset: -2px;
+}
+
+/* La marque de tri reste TOUJOURS posée, même sur une colonne non triée
+ * (elle vaut alors ↕) : si elle n'apparaissait qu'au tri, la largeur de la
+ * colonne changerait au clic et toute la ligne d'en-tête danserait. */
+.zv-sort__mark {
+  font-size: var(--mono-sm);
+  color: var(--label);
+}
+
+.zv-sort:hover .zv-sort__mark {
+  color: var(--accent);
+}
+
 /* ─── Cellules ─────────────────────────────────────────────────────────
  * Trois registres seulement : le texte courant, le nombre, et l'intitulé qui
  * remplace l'en-tête quand celui-ci disparaît. */