@zevra/ui 0.3.2 → 0.5.0

package/react/content.tsx

@@ -0,0 +1,313 @@
+// 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>
+  )
+}