@zevra/ui 0.27.1 → 0.28.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,8m3QAA8m3Q,CAAA;AAEjp3Q;;;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,864QAA864Q,CAAA;AAEj94Q;;;yBAGyB;AACzB,MAAM,CAAC,MAAM,WAAW,GAAW,03BAA03B,CAAA"}

package/package.json

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

package/react/catalogue.tsx

@@ -343,22 +343,50 @@ function DemoPopover() {
  *  du CSS, il n'y a rien à hydrater. La réserve sous chaque barre existe pour
  *  que le panneau ait la place de s'ouvrir sans être coupé. */
 function DemoNav() {
-  // Toutes les marques du registre, Zevra comprise : depuis un produit, on
-  // doit pouvoir revenir à la suite. L'ordre est celui du registre
-  // (alphabétique) — un ordre « le courant d'abord » ferait danser la
-  // grille d'un produit à l'autre, et on ne retrouverait plus une tuile à
-  // sa place.
   const APPS = PRODUITS
   const barre = (utilisateur?: { nom: string; email: string }) => (
     <div style={{ border: '1px solid var(--hairline)', background: 'var(--white)' }}>
-      <Nav style={{ padding: '0 16px', minHeight: 60 }}>
+      <Nav className="zv-nav--riche" style={{ padding: '0 20px', minHeight: 64 }}>
         <NavLogo>
-          <Mono ton="ink">ZEVRA</Mono>
+          <Lockup capitale={15}>
+            <LockupMark src={GLYPHES.zevra} />
+            <LockupWord src={MOT_ZEVRA} alt="Zevra" />
+          </Lockup>
         </NavLogo>
+
+        {/* Ce qui tombe dans le tiroir sous le point de rupture. */}
         <NavLinks>
-          <NavLink href="#">Produit</NavLink>
-          <NavLink href="#">Méthode</NavLink>
+          <NavDropdown>
+            <NavDropdownButton>Services</NavDropdownButton>
+            <NavDropdownMenu>
+              <MenuItem>Audit</MenuItem>
+              <MenuItem>Formation</MenuItem>
+              <NavDropdownSep />
+              <MenuItem>Tous les services</MenuItem>
+            </NavDropdownMenu>
+          </NavDropdown>
+          <NavLink href="#">Store</NavLink>
+          <NavLink href="#">Studio</NavLink>
+          <NavDropdown>
+            <NavDropdownButton>Campus</NavDropdownButton>
+            <NavDropdownMenu>
+              <MenuItem>Bootcamp</MenuItem>
+              <MenuItem>Formations</MenuItem>
+            </NavDropdownMenu>
+          </NavDropdown>
+          <Langues>
+            <Langue href="#" courante>
+              FR
+            </Langue>
+            <Langue href="#">EN</Langue>
+            <Langue href="#">ES</Langue>
+          </Langues>
+          <ButtonLink href="#" compact>
+            Réserver 30 min
+          </ButtonLink>
         </NavLinks>
+
+        {/* Ce qui RESTE, à toutes les largeurs. */}
         <NavActions>
           <Lanceur>
             {APPS.map((id) => (
@@ -367,7 +395,7 @@ function DemoNav() {
                 href="#"
                 nom={NOMS_PRODUITS[id]}
                 glyphe={GLYPHES[id]}
-                courant={id === 'memoire'}
+                courant={id === 'zevra'}
               />
             ))}
           </Lanceur>
@@ -391,10 +419,10 @@ function DemoNav() {
     <div style={{ display: 'grid', gap: 10 }}>
       <Mono ton="label">CONNECTÉ</Mono>
       {barre({ nom: 'Claire Duflot', email: 'claire@duflot-avocats.fr' })}
-      <div style={{ height: 210 }} />
+      <div style={{ height: 230 }} />
       <Mono ton="label">NON CONNECTÉ</Mono>
       {barre()}
-      <div style={{ height: 180 }} />
+      <div style={{ height: 190 }} />
     </div>
   )
 }
@@ -1991,47 +2019,16 @@ export const CATALOGUE: GroupeCatalogue[] = [
         id: 'nav-vitrine',
         nom: 'Navigation',
         resume:
-          'LA barre de vitrine, dans ses deux états. Elle porte toujours les mêmes pièces — logo, liens, lanceur, compte, burger : seul le CONTENU du compte change selon qu’on est connecté ou non. ⚠️ Le lanceur est là dans les DEUX cas : les produits sont publics, on y navigue connecté ou pas. Et le compte aussi — une barre où l’on ne peut pas se connecter est une barre où l’on ne revient pas. ⚠️ Lanceur et compte se posent dans « NavActions », À CÔTÉ de « NavLinks » et jamais dedans : cette rangée-là disparaît sous le point de rupture, et ils s’évanouiraient sur téléphone. Survoler le lanceur ou la pastille pour déplier — c’est du CSS, il n’y a rien à hydrater. Les glyphes viennent de « @zevra/ui/glyphes », une entrée SÉPARÉE : ils pèsent ~80 Ko inlinés, et le barrel React n’en porte pas un octet. Sans « glyphe », la tuile porte l’initiale — une image qui ne charge pas ne doit pas laisser un trou.',
-        code: `import { GLYPHES } from '@zevra/ui/glyphes'
-
-<Nav>
-  <NavLogo>…</NavLogo>
-  <NavLinks>
-    <NavLink href="/produit">Produit</NavLink>
-    <NavLink href="/methode">Méthode</NavLink>
-  </NavLinks>
-  <NavActions>
-    <Lanceur>
-      <LanceurApp href="https://memoire.zevra.tech" nom="Mémoire"
-                  glyphe={GLYPHES.memoire} courant />
-      <LanceurApp href="https://lexform.zevra.tech" nom="Lexform"
-                  glyphe={GLYPHES.lexform} />
-    </Lanceur>
-
-    {/* connecté */}
-    <Compte utilisateur={{ nom: 'Claire Duflot', email: 'claire@cabinet.fr' }}>
-      <CompteLien href="/compte">Mon compte</CompteLien>
-      <CompteLien onClick={deconnexion} sortie>Se déconnecter</CompteLien>
-    </Compte>
-
-    {/* visiteur — même composant, sans « utilisateur » */}
-    <Compte>
-      <CompteLien href="/connexion">Se connecter</CompteLien>
-      <CompteLien href="/inscription">Créer un compte</CompteLien>
-    </Compte>
-
-    <NavBurger aria-label="Ouvrir le menu">…</NavBurger>
-  </NavActions>
-</Nav>`,
-        rendu: <DemoNav />,
-      },
-      {
-        id: 'nav-riche',
-        nom: 'Navigation à familles',
-        resume:
-          'Une barre qui porte l’architecture d’un site, pas quatre liens. Les menus s’ouvrent au survol ET au focus, en CSS seul : rien à hydrater, la barre reste rendue au serveur. ⚠️ Le déclencheur porte « .zv-navlink » pour se rendre comme un lien simple — ne jamais lui poser « font: inherit », qui reprendrait la fonte du conteneur et le grossirait par rapport à ses voisins. Poser « zv-nav--riche » sur la Nav : elle bascule alors vers le tiroir à 1150px, où une nav de cette densité déborde (mesuré), et non à 768.',
+          'LA barre du site, dans ses deux états — c’est le design de landing.zevra.tech, et il fait référence : une app qui compose sa propre barre finit par ne plus ressembler aux autres. Deux zones, et la distinction n’est pas cosmétique : « NavLinks » porte ce qui TOMBE dans le tiroir sous le point de rupture (familles, langues, appel à l’action) ; « NavActions » porte ce qui RESTE à toutes les largeurs — lanceur, compte, burger. Un compte placé dans NavLinks s’évanouit sur téléphone, et l’on ne peut plus se connecter. ⚠️ Le lanceur ET le compte sont là dans les deux états : les produits sont publics, et une barre où l’on ne peut pas se connecter est une barre où l’on ne revient pas. Seul le contenu du compte change. Survoler une famille, le lanceur ou la pastille pour déplier — c’est du CSS, il n’y a rien à hydrater. « zv-nav--riche » bascule vers le tiroir à 1150px, où une barre de cette densité déborde (mesuré), et non à 768.',
         code: `<Nav className="zv-nav--riche">
-  <NavLogo>…</NavLogo>
+  <NavLogo>
+    <Lockup capitale={15}>
+      <LockupMark src={GLYPHES.zevra} />
+      <LockupWord src={MOT_ZEVRA} alt="Zevra" />
+    </Lockup>
+  </NavLogo>
+
+  {/* tombe dans le tiroir sous le point de rupture */}
   <NavLinks>
     <NavDropdown>
       <NavDropdownButton>Services</NavDropdownButton>
@@ -2046,33 +2043,22 @@ export const CATALOGUE: GroupeCatalogue[] = [
       <Langue href="/" courante>FR</Langue>
       <Langue href="/en">EN</Langue>
     </Langues>
+    <ButtonLink href="/rdv" compact>Réserver 30 min</ButtonLink>
   </NavLinks>
+
+  {/* RESTE à toutes les largeurs */}
+  <NavActions>
+    <Lanceur>
+      <LanceurApp href="…" nom="Mémoire" glyphe={GLYPHES.memoire} />
+    </Lanceur>
+    <Compte utilisateur={utilisateur /* absent = visiteur */}>
+      <CompteLien href="/compte">Mon compte</CompteLien>
+      <CompteLien onClick={deconnexion} sortie>Se déconnecter</CompteLien>
+    </Compte>
+    <NavBurger aria-label="Ouvrir le menu">…</NavBurger>
+  </NavActions>
 </Nav>`,
-        rendu: (
-          <Nav style={{ border: '1px solid var(--hairline)', padding: '0 12px' }}>
-            <NavLogo>
-              <Mono ton="ink">ZEVRA</Mono>
-            </NavLogo>
-            <NavLinks>
-              <NavDropdown>
-                <NavDropdownButton>Services</NavDropdownButton>
-                <NavDropdownMenu>
-                  <MenuItem>Audit</MenuItem>
-                  <MenuItem>Formation</MenuItem>
-                  <NavDropdownSep />
-                  <MenuItem>Tous les services</MenuItem>
-                </NavDropdownMenu>
-              </NavDropdown>
-              <NavLink href="#">Store</NavLink>
-              <Langues>
-                <Langue href="#" courante>
-                  FR
-                </Langue>
-                <Langue href="#">EN</Langue>
-              </Langues>
-            </NavLinks>
-          </Nav>
-        ),
+        rendu: <DemoNav />,
       },
       {
         id: 'lockup',