@zevra/ui 0.4.0 → 0.6.0

package/react/content.tsx

@@ -0,0 +1,417 @@
+// Contenu — surfaces, badges et blocs éditoriaux. Sans état, donc sans
+// « use client ».
+
+import type { HTMLAttributes, ReactNode } from 'react'
+import { cx } from './cx.js'
+
+type Div = Omit<HTMLAttributes<HTMLDivElement>, 'className'>
+type Span = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>
+
+export interface CardProps extends Div {
+  /** Retrait intérieur. Sans, la carte est nue — à toi de poser le tien. */
+  padding?: 'aucun' | 'normal' | 'large'
+  /** Filet coloré : un état porté par la bordure, pas par un fond. */
+  etat?: 'ok' | 'err'
+  /** Ombre portée, pour une carte qui flotte au-dessus d'une scène. */
+  flottante?: boolean
+  className?: string
+}
+
+export function Card({
+  padding = 'normal',
+  etat,
+  flottante,
+  className,
+  ...reste
+}: CardProps) {
+  return (
+    <div
+      className={cx(
+        'zv-card',
+        padding === 'normal' && 'zv-card--pad',
+        padding === 'large' && 'zv-card--pad-lg',
+        etat === 'ok' && 'zv-card--ok',
+        etat === 'err' && 'zv-card--err',
+        flottante && 'zv-card--float',
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+/** Surface semi-opaque. ⚠️ Ne fonctionne QUE devant un halo ou une scène :
+ *  posée sur du papier nu, elle disparaît. */
+export function Glass({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-glass', className)} {...reste} />
+}
+
+export interface InsetProps extends Div {
+  /** Variante document : fond panel, texte encre, très aérée. */
+  discret?: boolean
+  /** Poussé en bas de la carte qui l'accueille. */
+  enBas?: boolean
+  className?: string
+}
+
+/** Encart dans une carte. Deux objets distincts au relevé, longtemps
+ *  confondus : la citation d'interface et l'extrait de document. */
+export function Inset({ discret, enBas, className, ...reste }: InsetProps) {
+  return (
+    <div
+      className={cx(
+        'zv-inset',
+        discret && 'zv-inset--quiet',
+        enBas && 'zv-inset--bottom',
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+export function Pill({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-pill', className)} {...reste} />
+}
+
+export interface SrcProps extends Span {
+  /** Le « + 11 » qui clôt une liste de sources. */
+  attenue?: boolean
+  className?: string
+}
+
+/** Puce de source — BOSS, Judilibre, KALI. */
+export function Src({ attenue, className, ...reste }: SrcProps) {
+  return (
+    <span
+      className={cx('zv-src', attenue && 'zv-src--quiet', className)}
+      {...reste}
+    />
+  )
+}
+
+export function SrcRow({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-src-row', className)} {...reste} />
+}
+
+export interface TagProps extends Span {
+  etat?: 'ok' | 'err'
+  /** Sur la bande manifeste : les états s'éclaircissent, sinon ils virent au noir. */
+  surSombre?: boolean
+  className?: string
+}
+
+export function Tag({ etat, surSombre, className, ...reste }: TagProps) {
+  return (
+    <span
+      className={cx(
+        'zv-tag',
+        etat === 'ok' && (surSombre ? 'zv-tag--ok-on-dark' : 'zv-tag--ok'),
+        etat === 'err' && (surSombre ? 'zv-tag--err-on-dark' : 'zv-tag--err'),
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+/** Entité pseudonymisée, posée dans le fil du texte. */
+export function Ent({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-ent', className)} {...reste} />
+}
+
+/** Le paragraphe qui accueille des entités : il respire davantage, sinon les
+ *  jetons se télescopent d'une ligne à l'autre. */
+export function EntText({ className, ...reste }: Span & { className?: string }) {
+  return <span className={cx('zv-ent-text', className)} {...reste} />
+}
+
+export interface DividerProps extends Div {
+  /** Filet plein plutôt que cheveu. */
+  marque?: boolean
+  surSombre?: boolean
+  className?: string
+}
+
+export function Divider({ marque, surSombre, className, ...reste }: DividerProps) {
+  return (
+    <div
+      className={cx(
+        'zv-divider',
+        marque && 'zv-divider--strong',
+        surSombre && 'zv-divider--on-dark',
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+export interface QuoteProps extends Div {
+  auteur?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** ⚠️ RÈGLE DE CHARTE : jamais de fausse citation. Tant qu'un verbatim client
+ *  n'a pas été recueilli, ce bloc reste en réserve — un placeholder crédible
+ *  finit toujours par partir en production. */
+export function Quote({ auteur, className, children, ...reste }: QuoteProps) {
+  return (
+    <div className={cx('zv-quote', className)} {...reste}>
+      <span className="zv-spec zv-spec--on-dark" aria-hidden="true" />
+      <span className="zv-quote__text">{children}</span>
+      {auteur && <span className="zv-mono zv-mono--micro zv-mono--on-dark">{auteur}</span>}
+    </div>
+  )
+}
+
+export interface PriceProps extends Div {
+  montant: ReactNode
+  /** Le « HT · 1re année » accolé au montant. */
+  unite?: ReactNode
+  /** La mention sous la carte. */
+  note?: ReactNode
+  /** La formule recommandée — bandeau indigo. Trois cartes par page au plus. */
+  recommande?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+export function Price({
+  montant,
+  unite,
+  note,
+  recommande,
+  className,
+  children,
+  ...reste
+}: PriceProps) {
+  return (
+    <div
+      className={cx('zv-price', recommande && 'zv-price--featured', className)}
+      {...reste}
+    >
+      {children}
+      <span className="zv-price__amount">
+        {montant}
+        {unite && <span className="zv-price__unit"> {unite}</span>}
+      </span>
+      {note && <span className="zv-price__note">{note}</span>}
+    </div>
+  )
+}
+
+/* ─── Statistiques de carte ────────────────────────────────────────── */
+
+export function MiniStat({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-ministat', className)} {...reste} />
+}
+
+export interface MiniStatItemProps extends Div {
+  valeur: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** Paire de mini-statistiques au pied d'une carte produit. */
+export function MiniStatItem({ valeur, className, children, ...reste }: MiniStatItemProps) {
+  return (
+    <div className={cx('zv-ministat__item', className)} {...reste}>
+      <span className="zv-ministat__value">{valeur}</span>
+      {children}
+    </div>
+  )
+}
+
+export interface StatCardProps extends Div {
+  valeur: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function StatCard({ valeur, className, children, ...reste }: StatCardProps) {
+  return (
+    <div className={cx('zv-stat-card', className)} {...reste}>
+      <span className="zv-stat-card__value">{valeur}</span>
+      {children}
+    </div>
+  )
+}
+
+/* ─── FAQ ──────────────────────────────────────────────────────────── */
+
+/** ⚠️ Cinq questions par page au MAXIMUM. Au-delà, ce n'est plus une FAQ,
+ *  c'est une documentation mal rangée. */
+export function Faq({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-faq', className)} {...reste} />
+}
+
+export interface FaqItemProps extends Div {
+  question: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** Rendu ouvert, sans repli : la réponse est le contenu, la cacher derrière
+ *  un clic n'ajoute rien à cinq questions. Pour un vrai accordéon, c'est un
+ *  `<details>` — et il n'existe pas de style pour lui dans le paquet. */
+export function FaqItem({ question, className, children, ...reste }: FaqItemProps) {
+  return (
+    <div className={className} {...reste}>
+      <p className="zv-faq__q">{question}</p>
+      <p className="zv-faq__a">{children}</p>
+    </div>
+  )
+}
+
+/* ─── Aperçu d'interface ───────────────────────────────────────────── */
+
+export interface UiPreviewProps extends Div {
+  question: ReactNode
+  /** Le compteur de sources, seul élément mis en avant de la réponse. */
+  sources?: ReactNode
+  /** Les puces de source, sous la réponse. */
+  puces?: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** La preuve produit : une question, une réponse, ses sources.
+ *  ⚠️ RÈGLE DE CHARTE : toujours de VRAIES données réalistes, jamais de
+ *  lorem — c'est ce bloc qui porte la crédibilité de la page. */
+export function UiPreview({
+  question,
+  sources,
+  puces,
+  className,
+  children,
+  ...reste
+}: UiPreviewProps) {
+  return (
+    <div className={cx('zv-ui-preview', className)} {...reste}>
+      <p className="zv-ui-preview__q">{question}</p>
+      <p className="zv-ui-preview__a">{children}</p>
+      {sources && <span className="zv-ui-preview__count">{sources}</span>}
+      {puces}
+    </div>
+  )
+}
+
+/* ─── Pastille de validation ───────────────────────────────────────── */
+
+/** ⚠️ À ne pas confondre avec `Checkbox` (forms) : celle-ci n'est PAS un
+ *  contrôle, c'est une coche décorative en tête de liste d'arguments. */
+export function Check({ className, ...reste }: Span & { className?: string }) {
+  return (
+    <span className={cx('zv-check', className)} aria-hidden="true" {...reste}>
+      <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" width="12" height="12">
+        <polyline points="2.5,6.5 5,9 9.5,3.5" />
+      </svg>
+    </span>
+  )
+}
+
+/* ─── Blocs éditoriaux ─────────────────────────────────────────────────
+ * HORS RELEVÉ — ajoutés à la demande de la DA (règle de variété du
+ * 24/08/2026 : jamais deux blocs de même forme qui se suivent, 80 % de
+ * formes différentes par page). Quatre façons de poser du contenu SANS
+ * carte, pour que les grilles de cartes redeviennent un choix et non un
+ * réflexe. CSS relevé de la PR #1 (Enrase). */
+
+export function Rows({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-rows', className)} {...reste} />
+}
+
+export interface RowsItemProps extends Div {
+  /** Le libellé fort, à gauche. Colonne fixe : c'est l'alignement d'une
+   *  rangée à l'autre qui fait la lecture. */
+  cle: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** Rangée à filets : libellé fort + contenu, un trait fin entre chaque.
+ *  Pour les listes où l'alignement fait la lecture (profils, prestations,
+ *  caractéristiques). */
+export function RowsItem({ cle, className, children, ...reste }: RowsItemProps) {
+  return (
+    <div className={cx('zv-rows__row', className)} {...reste}>
+      <span className="zv-rows__key">{cle}</span>
+      <span className="zv-rows__val">{children}</span>
+    </div>
+  )
+}
+
+export interface IndexListProps extends Div {
+  /** Grille de trois, sans filets — l'espace fait la séparation. */
+  cols?: boolean
+  className?: string
+}
+
+/** Sommaire numéroté éditorial. Pour les suites longues qui étoufferaient
+ *  en cartes (offres détaillées, programmes). */
+export function IndexList({ cols, className, ...reste }: IndexListProps) {
+  return (
+    <div className={cx('zv-index', cols && 'zv-index--cols', className)} {...reste} />
+  )
+}
+
+export interface IndexItemProps extends Div {
+  /** Le numéro, en display léger (« 01 »). C'est du CONTENU, pas un
+   *  compteur CSS : un sommaire qui saute une entrée doit pouvoir le dire. */
+  num: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+export function IndexItem({ num, className, children, ...reste }: IndexItemProps) {
+  return (
+    <div className={cx('zv-index__item', className)} {...reste}>
+      <span className="zv-index__num" aria-hidden="true">
+        {num}
+      </span>
+      <div className="zv-index__body">{children}</div>
+    </div>
+  )
+}
+
+/** Déroulé vertical — la déclinaison verticale de `Steps`, pour les
+ *  méthodes qui se lisent comme un récit. */
+export function Flow({ className, ...reste }: Div & { className?: string }) {
+  return <div className={cx('zv-flow', className)} {...reste} />
+}
+
+export interface FlowStepProps extends Div {
+  /** Les points reprennent les couleurs des points de méthode — l'un des
+   *  trois emplois autorisés du spectre. Sans teinte : iris. */
+  teinte?: 'violet' | 'cyan'
+  className?: string
+}
+
+export function FlowStep({ teinte, className, ...reste }: FlowStepProps) {
+  return (
+    <div
+      className={cx('zv-flow__step', teinte && `zv-flow__step--${teinte}`, className)}
+      {...reste}
+    />
+  )
+}
+
+export interface CalloutProps extends Div {
+  titre: ReactNode
+  className?: string
+  children?: ReactNode
+}
+
+/** Encart d'appel sur accent-soft : l'offre transverse qui doit se voir
+ *  sans crier (remise, renvoi vers une autre page). L'action se passe en
+ *  enfant — elle se range à droite, et tombe sous le titre sur mobile. */
+export function Callout({ titre, className, children, ...reste }: CalloutProps) {
+  return (
+    <div className={cx('zv-callout', className)} {...reste}>
+      <h3 className="zv-callout__title">{titre}</h3>
+      {children}
+    </div>
+  )
+}