@zevra/ui 0.4.0 → 0.5.0

package/react/forms.tsx

@@ -0,0 +1,383 @@
+// Saisie — champs, sélection, bascules, puces de filtre, zone de dépôt.
+//
+// Aucun composant de ce fichier ne porte « use client » : ils sont tous sans
+// état. Ceux qui prennent un gestionnaire d'événement (Switch, Seg, Drop)
+// doivent être rendus DEPUIS un composant client, qui détient l'état — le
+// paquet ne le fait pas à ta place, sinon un simple champ de recherche
+// tirerait React côté navigateur sur une page vitrine.
+//
+// ACCESSIBILITÉ — le liage intitulé ↔ contrôle est EXPLICITE. Field ne
+// fabrique pas d'identifiant (il faudrait useId, donc un composant client) :
+// passe le même `htmlFor` à Field et `id` au contrôle. Field pose l'erreur
+// sur `${htmlFor}-err` pour que tu puisses la citer dans aria-describedby.
+
+import type {
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  InputHTMLAttributes,
+  ReactNode,
+  SelectHTMLAttributes,
+  TextareaHTMLAttributes,
+} from 'react'
+import { cx } from './cx.js'
+
+/* ─── Groupe de champ ──────────────────────────────────────────────── */
+
+export interface FieldProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  label?: ReactNode
+  /** Identifiant du contrôle enveloppé — à répéter en `id` sur le contrôle. */
+  htmlFor?: string
+  /** Posé à droite de l'intitulé, sur la même ligne de base
+   *  (« Mot de passe oublié ? »). */
+  action?: ReactNode
+  /** Aide permanente. Effacée par `erreur` : les deux au même endroit se
+   *  chevaucheraient. */
+  help?: ReactNode
+  /** Message d'erreur. Sa présence passe aussi le groupe en `--err`, ce qui
+   *  repeint le filet du contrôle. */
+  erreur?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function Field({
+  label,
+  htmlFor,
+  action,
+  help,
+  erreur,
+  className,
+  children,
+  ...reste
+}: FieldProps) {
+  return (
+    <div className={cx('zv-field', !!erreur && 'zv-field--err', className)} {...reste}>
+      {(label || action) &&
+        (action ? (
+          <div className="zv-field__head">
+            <label className="zv-field__label" htmlFor={htmlFor}>
+              {label}
+            </label>
+            {action}
+          </div>
+        ) : (
+          <label className="zv-field__label" htmlFor={htmlFor}>
+            {label}
+          </label>
+        ))}
+      {children}
+      {erreur ? (
+        <span className="zv-field__err" id={htmlFor ? `${htmlFor}-err` : undefined}>
+          {erreur}
+        </span>
+      ) : (
+        help && <span className="zv-field__help">{help}</span>
+      )}
+    </div>
+  )
+}
+
+/* ─── Champ de saisie ──────────────────────────────────────────────── */
+
+export interface InputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
+  /** Chiffres et tirets alignés (identifiant d'organisation, jeton). */
+  mono?: boolean
+  /** Ni fond ni filet : c'est le CADRE qui l'entoure qui fait le champ.
+   *  Lui laisser sa bordure dessinerait deux cadres imbriqués. */
+  nu?: boolean
+  /** Pose `aria-invalid` — c'est lui qui rend l'erreur audible, et le CSS le
+   *  suit autant que la classe. */
+  erreur?: boolean
+  className?: string
+}
+
+export function Input({ mono, nu, erreur, className, ...reste }: InputProps) {
+  return (
+    <input
+      className={cx('zv-input', mono && 'zv-input--mono', nu && 'zv-input--bare', className)}
+      aria-invalid={erreur || undefined}
+      {...reste}
+    />
+  )
+}
+
+export interface TextareaProps
+  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className'> {
+  erreur?: boolean
+  className?: string
+}
+
+export function Textarea({ erreur, className, ...reste }: TextareaProps) {
+  return (
+    <textarea
+      className={cx('zv-textarea', className)}
+      aria-invalid={erreur || undefined}
+      {...reste}
+    />
+  )
+}
+
+/** <select> NATIF habillé comme le champ : la flèche, l'ouverture au clavier
+ *  et l'annonce viennent du navigateur. C'est le motif de choix par défaut —
+ *  `SelectTrigger` est un menu maison, à réserver aux filtres. */
+export function Select({
+  className,
+  ...reste
+}: Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> & { className?: string }) {
+  return <select className={cx('zv-input', 'zv-input--select', className)} {...reste} />
+}
+
+/* ─── Recherche ────────────────────────────────────────────────────── */
+
+export interface SearchProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
+  /** Enveloppe : c'est elle qui porte le cadre et la largeur. */
+  className?: string
+}
+
+/** Cadre + loupe + champ nu. La loupe est dans le balisage (et non un fond
+ *  CSS) pour suivre `currentColor` et rester nette en zoom. */
+export function Search({ className, ...reste }: SearchProps) {
+  return (
+    <div className={cx('zv-search', className)}>
+      <svg
+        className="zv-search__icon"
+        viewBox="0 0 13 13"
+        fill="none"
+        strokeWidth="1.5"
+        aria-hidden="true"
+      >
+        <circle cx="5.5" cy="5.5" r="4" />
+        <line x1="8.6" y1="8.6" x2="12" y2="12" />
+      </svg>
+      <input type="search" className="zv-search__input" {...reste} />
+    </div>
+  )
+}
+
+/* ─── Déclencheur de sélection (menu maison) ───────────────────────── */
+
+export function SelectAnchor({
+  className,
+  ...reste
+}: Omit<HTMLAttributes<HTMLDivElement>, 'className'> & { className?: string }) {
+  return <div className={cx('zv-select-anchor', className)} {...reste} />
+}
+
+export interface SelectTriggerProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'value'> {
+  /** L'intitulé, en capitales (« PÉRIMÈTRE »). */
+  label?: ReactNode
+  /** La valeur courante, seule partie mise en avant. */
+  value?: ReactNode
+  className?: string
+}
+
+/** Bouton qui ouvre un `Menu`. Pour un vrai choix dans une liste, préférer
+ *  `Select` (natif). À poser dans un `SelectAnchor` : c'est l'enveloppe qui
+ *  ancre le menu, pas le déclencheur. */
+export function SelectTrigger({
+  label,
+  value,
+  className,
+  ...reste
+}: SelectTriggerProps) {
+  return (
+    <button type="button" className={cx('zv-select', className)} {...reste}>
+      {label}
+      {value != null && <strong>{value}</strong>}
+      <span className="zv-select__chevron" aria-hidden="true">
+        ▾
+      </span>
+    </button>
+  )
+}
+
+/* ─── Case, radio ──────────────────────────────────────────────────── */
+
+export function Checkbox({
+  className,
+  ...reste
+}: Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> & {
+  className?: string
+}) {
+  return <input type="checkbox" className={cx('zv-check-box', className)} {...reste} />
+}
+
+export function Radio({
+  className,
+  ...reste
+}: Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> & {
+  className?: string
+}) {
+  return <input type="radio" className={cx('zv-radio', className)} {...reste} />
+}
+
+/* ─── Interrupteur ─────────────────────────────────────────────────── */
+
+export interface SwitchProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'onChange'> {
+  /** État courant. Composant CONTRÔLÉ : il ne mémorise rien. */
+  on: boolean
+  /** Libellé accolé — c'est lui qui porte le sens, la piste seule ne dit pas
+   *  ce qui est activé. */
+  texte?: ReactNode
+  className?: string
+}
+
+export function Switch({ on, texte, className, ...reste }: SwitchProps) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={on}
+      className={cx('zv-switch-hit', className)}
+      {...reste}
+    >
+      <span className={cx('zv-switch', on && 'zv-switch--on')}>
+        <span className="zv-switch__knob" />
+      </span>
+      {texte && (
+        <span className={cx('zv-switch__text', on && 'zv-switch__text--on')}>{texte}</span>
+      )}
+    </button>
+  )
+}
+
+/* ─── Puces de filtre ──────────────────────────────────────────────── */
+
+export interface SegGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  /** Rangée qui défile au lieu de passer à la ligne. À poser explicitement :
+   *  par défaut les puces s'enroulent. */
+  rail?: boolean
+  className?: string
+}
+
+export function SegGroup({ rail, className, ...reste }: SegGroupProps) {
+  return (
+    <div
+      className={cx('zv-seg-group', rail && 'zv-seg-group--rail', className)}
+      {...reste}
+    />
+  )
+}
+
+export interface SegProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  on?: boolean
+  /** Sélection PLEINE au lieu de douce. ⚠️ Un seul groupe plein par page, et
+   *  jamais sur une page qui porte déjà un bouton plein. */
+  plein?: boolean
+  /** Libellés de longueur inégale centrés (INFO, WARN, ERROR). */
+  mono?: boolean
+  /** Compteur accolé (« Contrats 12 »). */
+  compte?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function Seg({
+  on,
+  plein,
+  mono,
+  compte,
+  className,
+  children,
+  ...reste
+}: SegProps) {
+  return (
+    <button
+      type="button"
+      aria-pressed={on ?? false}
+      className={cx(
+        'zv-seg',
+        mono && 'zv-seg--mono',
+        on && (plein ? 'zv-seg--on-solid' : 'zv-seg--on'),
+        className,
+      )}
+      {...reste}
+    >
+      {children}
+      {compte != null && <span className="zv-seg__count">{compte}</span>}
+    </button>
+  )
+}
+
+/* ─── Zone de dépôt ────────────────────────────────────────────────── */
+
+export interface DropProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'title'> {
+  titre?: ReactNode
+  /** Précision sous le titre (« PDF, DOCX · 25 Mo max »). */
+  spec?: ReactNode
+  /** Alternative tactile : sous le point de rupture, le lien souligné cède
+   *  la place à cette cible. Le CSS échange les deux, les deux nœuds restent
+   *  posés en permanence. */
+  parcourir?: ReactNode
+  /** Un fichier est en cours de survol : même rendu que le survol souris. */
+  survol?: boolean
+  desactive?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+/** ⚠️ `role="button"` + `tabIndex` sont posés ici et non laissés au bon
+ *  vouloir de l'appelant : une zone de dépôt sans eux rend la page
+ *  inatteignable au clavier. Penser à remettre `value=''` sur l'input après
+ *  chaque sélection, sinon redéposer le même fichier ne déclenche rien. */
+export function Drop({
+  titre,
+  spec,
+  parcourir,
+  survol,
+  desactive,
+  className,
+  children,
+  ...reste
+}: DropProps) {
+  return (
+    <div
+      role="button"
+      tabIndex={desactive ? -1 : 0}
+      aria-disabled={desactive || undefined}
+      className={cx(
+        'zv-drop',
+        survol && 'is-dragging',
+        desactive && 'zv-drop--disabled',
+        className,
+      )}
+      {...reste}
+    >
+      <svg
+        viewBox="0 0 30 30"
+        width="30"
+        height="30"
+        fill="none"
+        stroke="var(--accent)"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        aria-hidden="true"
+      >
+        <line x1="15" y1="4" x2="15" y2="18" />
+        <polyline points="9.5,12.5 15,18 20.5,12.5" />
+        <path d="M5 21 v3 a2 2 0 0 0 2 2 h16 a2 2 0 0 0 2-2 v-3" />
+      </svg>
+      {titre && <span className="zv-drop__title">{titre}</span>}
+      {parcourir && <span className="zv-drop__browse">{parcourir}</span>}
+      {spec && <span className="zv-drop__spec">{spec}</span>}
+      {children}
+    </div>
+  )
+}
+
+export function DropInput({
+  className,
+  ...reste
+}: Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> & {
+  className?: string
+}) {
+  return <input type="file" className={cx('zv-drop__input', className)} {...reste} />
+}

package/react/icon-data.ts

@@ -0,0 +1,114 @@
+// GÉNÉRÉ par scripts/build-icon-react.mjs — ne pas éditer à la main.
+// Source de vérité : icons/index.json.
+
+export type IconId =
+  | 'accueil'
+  | 'activite'
+  | 'app-couches'
+  | 'archiver'
+  | 'base-de-donnees'
+  | 'bouclier-verifie'
+  | 'cadenas'
+  | 'cadrer'
+  | 'chevron-bas'
+  | 'chevron-droit'
+  | 'chevron-gauche'
+  | 'coche'
+  | 'copier'
+  | 'corbeille'
+  | 'cube'
+  | 'deconnexion'
+  | 'depot-fichier'
+  | 'dossier'
+  | 'eclair'
+  | 'equipe'
+  | 'etincelles'
+  | 'fermer'
+  | 'horloge'
+  | 'lien-externe'
+  | 'menu'
+  | 'moins'
+  | 'oeil'
+  | 'plus'
+  | 'recherche'
+  | 'registre'
+  | 'reglages'
+  | 'reseau'
+  | 'taches'
+  | 'trois-points'
+
+export const CORPS: Record<IconId, string> = {
+  'accueil': "<path d=\"M4 10.67 L12 4 L20 10.67 V20 H4 Z\" /><path d=\"M9.33 20 V13.33 H14.67 V20\" />",
+  'activite': "<path d=\"M3.33 12 H8 L10.67 5.33 L14 18.67 L16 12 H20.67\" />",
+  'app-couches': "<path d=\"M12 2.67 L20 6.67 L12 10.67 L4 6.67 Z\" /><path d=\"M4 12 L12 16 L20 12\" /><path d=\"M4 17.33 L12 21.33 L20 17.33\" />",
+  'archiver': "<rect x=\"3.33\" y=\"4\" width=\"17.33\" height=\"4.67\" rx=\"1.07\" /><path d=\"M5.33 8.67 V18.93 A1.07 1.07 0 0 0 6.4 20 H17.6 A1.07 1.07 0 0 0 18.67 18.93 V8.67\" /><path d=\"M9.33 12.67 H14.67\" />",
+  'base-de-donnees': "<ellipse cx=\"12\" cy=\"6\" rx=\"7.33\" ry=\"2.67\" /><path d=\"M4.67 6 V12 C4.67 13.47 7.87 14.67 12 14.67 C16.13 14.67 19.33 13.47 19.33 12 V6\" /><path d=\"M4.67 12 V18 C4.67 19.47 7.87 20.67 12 20.67 C16.13 20.67 19.33 19.47 19.33 18 V12\" />",
+  'bouclier-verifie': "<path d=\"M12 2.67 L20 6 V12 C20 16.67 16.67 19.73 12 21.33 C7.33 19.73 4 16.67 4 12 V6 Z\" /><path d=\"M8.67 12 L11.07 14.4 L15.33 10\" />",
+  'cadenas': "<rect x=\"4.67\" y=\"10.67\" width=\"14.67\" height=\"9.33\" rx=\"1.6\" /><path d=\"M8 10.67 V7.33 A4 4 0 0 1 16 7.33 V10.67\" /><circle cx=\"12\" cy=\"15.33\" r=\"1.33\" />",
+  'cadrer': "<path d=\"M4 8 V4 H8\" /><path d=\"M20 8 V4 H16\" /><path d=\"M4 16 V20 H8\" /><path d=\"M20 16 V20 H16\" />",
+  'chevron-bas': "<path d=\"M6.67 9.33 L12 14.67 L17.33 9.33\" />",
+  'chevron-droit': "<path d=\"M9.33 4 L17.33 12 L9.33 20\" />",
+  'chevron-gauche': "<path d=\"M14.67 4 L6.67 12 L14.67 20\" />",
+  'coche': "<path d=\"M5 12.4 L9.4 16.8 L19 6.8\" />",
+  'copier': "<rect x=\"4\" y=\"4\" width=\"12\" height=\"12\" rx=\"1.6\" /><path d=\"M8 16 V18.93 A1.07 1.07 0 0 0 9.07 20 H18.93 A1.07 1.07 0 0 0 20 18.93 V9.07 A1.07 1.07 0 0 0 18.93 8 H16\" />",
+  'corbeille': "<path d=\"M4 6.67 H20\" /><path d=\"M9.33 6.67 V4.67 A1.33 1.33 0 0 1 10.67 3.33 H13.33 A1.33 1.33 0 0 1 14.67 4.67 V6.67\" /><path d=\"M6 6.67 L6.93 18.93 A1.33 1.33 0 0 0 8.27 20 H15.73 A1.33 1.33 0 0 0 17.07 18.93 L18 6.67\" /><path d=\"M10 10.67 V16.67\" /><path d=\"M14 10.67 V16.67\" />",
+  'cube': "<path d=\"M3.33 8 L12 4 L20.67 8 V16 L12 20 L3.33 16 Z\" /><path d=\"M3.33 8 L12 12 L20.67 8\" /><path d=\"M12 12 V20\" />",
+  'deconnexion': "<path d=\"M14.67 4 H5.33 V20 H14.67\" /><path d=\"M10.67 12 H20\" /><path d=\"M16.67 8 L20.67 12 L16.67 16\" />",
+  'depot-fichier': "<path d=\"M12 3.2 V14.4\" /><polyline points=\"7.6,10 12,14.4 16.4,10\" /><path d=\"M4 16.8 v2.4 a1.6 1.6 0 0 0 1.6 1.6 h12.8 a1.6 1.6 0 0 0 1.6-1.6 v-2.4\" />",
+  'dossier': "<path d=\"M1.41 6.64a1.69 1.69 0 0 1 1.69-1.69h4.8l2.12 2.4h10.87a1.69 1.69 0 0 1 1.69 1.69v9.88a1.69 1.69 0 0 1-1.69 1.69H3.11A1.69 1.69 0 0 1 1.41 20.33V6.64Z\" />",
+  'eclair': "<path d=\"M13.33 2.67 L5.33 13.33 H12 L10.67 21.33 L18.67 10.67 H12 Z\" />",
+  'equipe': "<circle cx=\"9.33\" cy=\"8\" r=\"3.33\" /><path d=\"M3.33 20 C3.33 15.33 6 13.33 9.33 13.33 C12.67 13.33 15.33 15.33 15.33 20\" /><path d=\"M16 5.33 A2.93 2.93 0 0 1 16 11.07\" /><path d=\"M17.33 13.6 C19.73 14.27 20.67 16.4 20.67 20\" />",
+  'etincelles': "<path d=\"M12 2.67 L13.87 8.8 L20 10.67 L13.87 12.53 L12 18.67 L10.13 12.53 L4 10.67 L10.13 8.8 Z\" /><path d=\"M19.33 16.67 L20 18.67 L22 19.33 L20 20 L19.33 22 L18.67 20 L16.67 19.33 L18.67 18.67 Z\" />",
+  'fermer': "<path d=\"M5.33 5.33 L18.67 18.67\" /><path d=\"M18.67 5.33 L5.33 18.67\" />",
+  'horloge': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M12 6.67 V12 L15.33 14\" />",
+  'lien-externe': "<path d=\"M10.67 4 H4 V20 H20 V13.33\" /><path d=\"M14.67 4 H20 V9.33\" /><path d=\"M20 4 L12 12\" />",
+  'menu': "<path d=\"M0 5.33 H24\" /><path d=\"M0 12 H24\" /><path d=\"M0 18.67 H24\" />",
+  'moins': "<path d=\"M4 12 H20\" />",
+  'oeil': "<path d=\"M2 12 C5.33 6.67 8.67 4.67 12 4.67 C15.33 4.67 18.67 6.67 22 12 C18.67 17.33 15.33 19.33 12 19.33 C8.67 19.33 5.33 17.33 2 12 Z\" /><circle cx=\"12\" cy=\"12\" r=\"2.67\" />",
+  'plus': "<path d=\"M12 4 V20\" /><path d=\"M4 12 H20\" />",
+  'recherche': "<circle cx=\"10.67\" cy=\"10.67\" r=\"6\" /><path d=\"M15.33 15.33 L20 20\" />",
+  'registre': "<rect x=\"3.33\" y=\"5.33\" width=\"17.33\" height=\"5.33\" rx=\"1.33\" /><rect x=\"3.33\" y=\"13.33\" width=\"17.33\" height=\"5.33\" rx=\"1.33\" /><circle cx=\"6.67\" cy=\"8\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"6.67\" cy=\"16\" r=\"0.8\" fill=\"currentColor\" stroke=\"none\" />",
+  'reglages': "<circle cx=\"12\" cy=\"12\" r=\"2.93\" /><path d=\"M12 2 V4.67 M12 19.33 V22 M2 12 H4.67 M19.33 12 H22 M4.8 4.8 L6.67 6.67 M17.33 17.33 L19.2 19.2 M19.2 4.8 L17.33 6.67 M6.67 17.33 L4.8 19.2\" />",
+  'reseau': "<circle cx=\"12\" cy=\"12\" r=\"8\" /><path d=\"M4 12 H20\" /><path d=\"M12 4 C14.67 8 14.67 16 12 20\" /><path d=\"M12 4 C9.33 8 9.33 16 12 20\" />",
+  'taches': "<path d=\"M4.67 6.67 L6.67 8.67 L10 5.33\" /><path d=\"M4.67 16 L6.67 18 L10 14.67\" /><path d=\"M13.33 7.33 H20\" /><path d=\"M13.33 16.67 H20\" />",
+  'trois-points': "<circle cx=\"5.33\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"12\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" /><circle cx=\"18.67\" cy=\"12\" r=\"1.33\" fill=\"currentColor\" stroke=\"none\" />",
+}
+
+/** Nom lisible de chaque icône — sert de titre accessible par défaut à
+ *  `IconButton`, et de libellé dans la page de consultation de l'admin. */
+export const NOMS: Record<IconId, string> = {
+  'accueil': "Accueil",
+  'activite': "Activité (pouls)",
+  'app-couches': "Application (couches)",
+  'archiver': "Archiver",
+  'base-de-donnees': "Base de données",
+  'bouclier-verifie': "Bouclier vérifié (authentification)",
+  'cadenas': "Cadenas (secret)",
+  'cadrer': "Cadrer (ajuster à la vue)",
+  'chevron-bas': "Chevron bas",
+  'chevron-droit': "Chevron droit",
+  'chevron-gauche': "Chevron gauche",
+  'coche': "Coche",
+  'copier': "Copier",
+  'corbeille': "Corbeille (supprimer)",
+  'cube': "Cube (stockage objet)",
+  'deconnexion': "Déconnexion",
+  'depot-fichier': "Dépôt de fichier (zone de glisser-déposer)",
+  'dossier': "Dossier",
+  'eclair': "Éclair (action rapide)",
+  'equipe': "Équipe (membres)",
+  'etincelles': "Étincelles (IA)",
+  'fermer': "Fermer",
+  'horloge': "Horloge (intégration continue)",
+  'lien-externe': "Lien externe",
+  'menu': "Menu (hamburger)",
+  'moins': "Moins",
+  'oeil': "Œil (afficher)",
+  'plus': "Plus",
+  'recherche': "Recherche (loupe)",
+  'registre': "Registre (serveurs empilés)",
+  'reglages': "Réglages",
+  'reseau': "Réseau (entrée / globe)",
+  'taches': "Tâches (liste à cocher)",
+  'trois-points': "Trois points (menu contextuel)",
+}

package/react/icon.tsx

@@ -0,0 +1,84 @@
+// Icônes — jeu de 34, tracées, sur grille de 24.
+//
+// Le corps du tracé est INLINÉ (voir scripts/build-icon-react.mjs) : pas de
+// <use href="…sprite.svg">, donc rien à résoudre côté bundler et rien à
+// autoriser côté CSP. L'icône hérite de la couleur du texte : elle fonctionne
+// sur papier comme sur la bande manifeste sans déclinaison.
+
+import type { ButtonHTMLAttributes, ReactNode, SVGAttributes } from 'react'
+import { cx } from './cx.js'
+import { CORPS, NOMS, type IconId } from './icon-data.js'
+
+export type { IconId }
+export { NOMS as NOMS_ICONES }
+
+/** Les 34 identifiants, triés — pour construire une planche ou un sélecteur. */
+export const ICONES = Object.keys(CORPS) as IconId[]
+
+export interface IconProps
+  extends Omit<SVGAttributes<SVGSVGElement>, 'className' | 'children'> {
+  nom: IconId
+  /** `sm` compense l'épaississement optique du trait, `xl` l'affine.
+   *  `lg` = navigation et boutons de chrome. */
+  taille?: 'sm' | 'normal' | 'lg' | 'xl'
+  discret?: boolean
+  /** Titre accessible. Sans lui l'icône est DÉCORATIVE et masquée aux
+   *  lecteurs d'écran — ce qui est le bon défaut : une icône accolée à un
+   *  libellé qui la répète crée une annonce double. */
+  titre?: string
+  className?: string
+}
+
+export function Icon({ nom, taille = 'normal', discret, titre, className, ...reste }: IconProps) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      role={titre ? 'img' : undefined}
+      aria-hidden={titre ? undefined : true}
+      aria-label={titre}
+      className={cx(
+        'zv-icon',
+        taille !== 'normal' && `zv-icon--${taille}`,
+        discret && 'zv-icon--quiet',
+        className,
+      )}
+      dangerouslySetInnerHTML={{ __html: CORPS[nom] }}
+      {...reste}
+    />
+  )
+}
+
+export interface IconButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  /** Icône du jeu. À défaut, passe le glyphe en `children` — mais préfère le
+   *  jeu : trois tracés maison de la même « croix » ont déjà divergé. */
+  icone?: IconId
+  /** OBLIGATOIRE : une icône seule n'a pas de libellé pour la nommer.
+   *  L'écrire pour l'ACTION (« Fermer le panneau ») et non pour le dessin
+   *  (« Croix ») — c'est ce que le lecteur d'écran annonce. */
+  label: string
+  taille?: IconProps['taille']
+  className?: string
+  children?: ReactNode
+}
+
+export function IconButton({
+  icone,
+  label,
+  taille = 'lg',
+  className,
+  children,
+  type = 'button',
+  ...reste
+}: IconButtonProps) {
+  return (
+    <button
+      type={type}
+      aria-label={label}
+      className={cx('zv-icon-btn', className)}
+      {...reste}
+    >
+      {icone ? <Icon nom={icone} taille={taille} /> : children}
+    </button>
+  )
+}

package/react/index.ts

@@ -0,0 +1,42 @@
+// @zevra/ui/react — bibliothèque de composants du design system « Encre & Papier ».
+//
+// COMMENT C'EST ORGANISÉ. Le CSS reste la source de vérité : chaque composant
+// n'est qu'une façade typée et documentée au-dessus de classes `zv-`. Rien
+// n'est calculé au rendu, aucune valeur de charte n'est écrite en JavaScript.
+// Un test (tests/react.test.js) vérifie que toute classe qu'un composant peut
+// émettre existe bien dans le CSS — c'est ce qui empêche les deux de diverger.
+//
+// CE QU'IL FAUT CHARGER. Les composants ne portent PAS le CSS : il s'importe
+// à part, une fois, dans la page ou la mise en page racine.
+//
+//   import '@zevra/ui/tokens.css'   // toujours
+//   import '@zevra/ui/fonts.css'    // sauf si l'app charge déjà les polices
+//   import '@zevra/ui/base.css'     // toujours
+//   … puis les modules employés (components, forms, feedback, data, …)
+//   ou '@zevra/ui/css' pour tout charger d'un coup.
+//
+// SERVEUR / CLIENT. Un seul module est marqué « use client » : `overlays`
+// (tiroir, modale, notification) — eux seuls ont besoin du navigateur. Tout
+// le reste se rend au serveur, y compris dans une île Astro à zéro JS.
+// Les composants qui prennent un gestionnaire d'événement (Switch, Seg,
+// Tabs…) restent sans état : c'est un composant client à toi qui détient
+// l'état et les rend.
+//
+// ÉCRITURE DES PROPS. En français, comme le CSS et les commentaires. Chaque
+// prop qui porte une décision de charte est documentée à l'endroit où on la
+// lit — les avertissements ⚠️ signalent ce qui casse le système si on le
+// contourne, pas de simples préférences.
+
+export { cx, mod } from './cx.js'
+
+export * from './actions.js'
+export * from './content.js'
+export * from './data.js'
+export * from './feedback.js'
+export * from './forms.js'
+export * from './icon.js'
+export * from './layout.js'
+export * from './navigation.js'
+export * from './overlays.js'
+export * from './surfaces.js'
+export * from './typography.js'