@zevra/ui 0.3.2 → 0.5.0

package/react/actions.tsx

@@ -0,0 +1,138 @@
+// Actions — boutons et liens.
+//
+// AUCUN « use client » : ce ne sont que des <button> et des <a> habillés. Le
+// déclarer en ferait des composants client chez tous les consommateurs Next,
+// et leurs pages perdraient le rendu serveur pour rien.
+
+import type {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  HTMLAttributes,
+  ReactNode,
+} from 'react'
+import { cx } from './cx.js'
+
+/** Variantes de bouton. Une seule pleine par écran — c'est la règle de charte. */
+export type BoutonVariante = 'plein' | 'fantome' | 'encre'
+
+const VARIANTE_BOUTON: Record<BoutonVariante, string> = {
+  plein: 'zv-btn',
+  fantome: 'zv-btn--ghost',
+  encre: 'zv-btn--ink',
+}
+
+export interface ButtonProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
+  variante?: BoutonVariante
+  /** Hauteur réduite, pour une barre de navigation. */
+  compact?: boolean
+  /** Pleine largeur — l'appel à l'action d'un écran mobile. */
+  bloc?: boolean
+  /** Échappatoire assumée. À employer pour un ajustement de position, jamais
+   *  pour redéfinir une couleur ou une taille : c'est par là que les apps
+   *  recommencent à écrire leur propre charte. */
+  className?: string
+  children?: ReactNode
+}
+
+export function Button({
+  variante = 'plein',
+  compact,
+  bloc,
+  className,
+  type = 'button',
+  ...reste
+}: ButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cx(
+        VARIANTE_BOUTON[variante],
+        compact && 'zv-btn--sm',
+        bloc && 'zv-btn--block',
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+export interface ButtonLinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
+  variante?: BoutonVariante
+  compact?: boolean
+  bloc?: boolean
+  className?: string
+}
+
+/** Le même bouton, mais qui navigue. Un <a> et un <button> ne s'échangent pas :
+ *  l'un ouvre dans un onglet, se copie et s'indexe, l'autre non. */
+export function ButtonLink({
+  variante = 'plein',
+  compact,
+  bloc,
+  className,
+  ...reste
+}: ButtonLinkProps) {
+  return (
+    <a
+      className={cx(
+        VARIANTE_BOUTON[variante],
+        compact && 'zv-btn--sm',
+        bloc && 'zv-btn--block',
+        className,
+      )}
+      {...reste}
+    />
+  )
+}
+
+export interface ButtonRowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+  /** Empile les boutons et les étire — la disposition mobile. */
+  empile?: boolean
+  className?: string
+}
+
+export function ButtonRow({ empile, className, ...reste }: ButtonRowProps) {
+  return (
+    <div
+      className={cx('zv-btn-row', empile && 'zv-btn-row--stack', className)}
+      {...reste}
+    />
+  )
+}
+
+export interface LinkArrowProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className'> {
+  /** Sur la bande manifeste, où le lien passe en blanc. */
+  surSombre?: boolean
+  className?: string
+  children?: ReactNode
+}
+
+/** Lien fléché. La flèche est fournie : elle fait partie du composant, pas du
+ *  contenu — la recopier à la main a produit trois tracés différents. */
+export function LinkArrow({
+  surSombre,
+  className,
+  children,
+  ...reste
+}: LinkArrowProps) {
+  return (
+    <a
+      className={cx(
+        'zv-link-arrow',
+        surSombre && 'zv-link-arrow--on-dark',
+        className,
+      )}
+      {...reste}
+    >
+      {children}
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M5 12h14" />
+        <path d="M13 6l6 6-6 6" />
+      </svg>
+    </a>
+  )
+}