@zevra/ui 0.4.0 → 0.5.0

package/dist/typography.d.ts

@@ -0,0 +1,89 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+type Div = Omit<HTMLAttributes<HTMLElement>, 'className'>;
+type Span = Omit<HTMLAttributes<HTMLSpanElement>, 'className'>;
+export type TitreTaille = 'h1' | 'h2' | 'h2-sm' | 'h2-cta' | 'h3' | 'carte';
+export interface HeadingProps extends Div {
+    taille?: TitreTaille;
+    /** Balise réellement rendue. Par défaut, celle qui correspond à la taille. */
+    as?: ElementType;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function Heading({ taille, as, className, ...reste }: HeadingProps): import("react").JSX.Element;
+export declare const H1: (p: Omit<HeadingProps, 'taille'>) => import("react").JSX.Element;
+export declare const H2: (p: Omit<HeadingProps, 'taille'>) => import("react").JSX.Element;
+export declare const H3: (p: Omit<HeadingProps, 'taille'>) => import("react").JSX.Element;
+export declare const CardTitle: (p: Omit<HeadingProps, 'taille'>) => import("react").JSX.Element;
+/** Chiffre ou mot posé pour sa PRÉSENCE, hors de la hiérarchie des titres —
+ *  d'où le `<div>` : un chiffre géant annoncé comme titre de section pollue
+ *  le plan du document. */
+export declare function Display({ className, ...reste }: Div & {
+    className?: string;
+}): import("react").JSX.Element;
+export interface BodyProps extends Div {
+    taille?: 'normal' | 'lg' | 'dense';
+    as?: ElementType;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function Body({ taille, as, className, ...reste }: BodyProps): import("react").JSX.Element;
+/** Chapô : le paragraphe qui suit immédiatement un titre de section. */
+export declare function Lead({ as, className, ...reste }: Div & {
+    as?: ElementType;
+    className?: string;
+}): import("react").JSX.Element;
+/** Mention légale, précision de bas de bloc. */
+export declare function Note({ as, className, ...reste }: Div & {
+    as?: ElementType;
+    className?: string;
+}): import("react").JSX.Element;
+/** Signature de marque, sous un logo. */
+export declare function Tagline({ className, ...reste }: Span & {
+    className?: string;
+}): import("react").JSX.Element;
+/** Mise en valeur dans le fil du texte. Le pendant `surSombre` existe parce
+ *  que l'indigo d'accent devient illisible sur la bande manifeste. */
+export declare function Em({ surSombre, className, ...reste }: Span & {
+    surSombre?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Link({ className, ...reste }: Omit<HTMLAttributes<HTMLAnchorElement>, 'className'> & {
+    className?: string;
+    href?: string;
+}): import("react").JSX.Element;
+export interface KickerProps extends Div {
+    /** `center` centre le bloc, `stack` empile le filet AU-DESSUS du texte au
+     *  lieu de le poser devant. */
+    variante?: 'center' | 'stack';
+    /** Le filet de spectre 56×2 devant le kicker. Premier des trois emplois
+     *  autorisés du spectre. */
+    filet?: boolean;
+    surSombre?: boolean;
+    className?: string;
+    children?: ReactNode;
+}
+export declare function Kicker({ variante, filet, surSombre, className, children, ...reste }: KickerProps): import("react").JSX.Element;
+/** Le filet de spectre seul. Décoratif : masqué aux lecteurs d'écran. */
+export declare function Spec({ petit, surSombre, className, ...reste }: Span & {
+    petit?: boolean;
+    surSombre?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** Filet neutre de séparation de section. */
+export declare function Rule({ className, ...reste }: Div & {
+    className?: string;
+}): import("react").JSX.Element;
+export interface MonoProps extends Span {
+    /** Le ton, pas la taille : `label` est le gris d'intitulé, `ink` l'encre
+     *  pleine, `muted` le gris secondaire, `on-dark` la bande manifeste. */
+    ton?: 'label' | 'ink' | 'muted' | 'on-dark';
+    /** Le plus petit palier — badge dense, compteur de coque. */
+    micro?: boolean;
+    className?: string;
+}
+/** Capitales espacées. ⚠️ Réservé aux LIBELLÉS : une date ou un nom de
+ *  fichier passés en capitales espacées deviennent illisibles et s'alignent
+ *  mal — pour ceux-là, c'est `Meta` (bas de casse, chasse tabulaire). */
+export declare function Mono({ ton, micro, className, ...reste }: MonoProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=typography.d.ts.map

package/dist/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../react/typography.tsx"],"names":[],"mappings":"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"}

package/dist/typography.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from './cx.js';
+const CLASSE_TITRE = {
+    h1: 'zv-h1',
+    h2: 'zv-h2',
+    'h2-sm': 'zv-h2 zv-h2--sm',
+    'h2-cta': 'zv-h2 zv-h2--cta',
+    h3: 'zv-h3',
+    carte: 'zv-card-title',
+};
+const BALISE_PAR_DEFAUT = {
+    h1: 'h1',
+    h2: 'h2',
+    'h2-sm': 'h2',
+    'h2-cta': 'h2',
+    h3: 'h3',
+    carte: 'h3',
+};
+export function Heading({ taille = 'h2', as, className, ...reste }) {
+    const Balise = as ?? BALISE_PAR_DEFAUT[taille];
+    return _jsx(Balise, { className: cx(CLASSE_TITRE[taille], className), ...reste });
+}
+export const H1 = (p) => _jsx(Heading, { taille: "h1", ...p });
+export const H2 = (p) => _jsx(Heading, { taille: "h2", ...p });
+export const H3 = (p) => _jsx(Heading, { taille: "h3", ...p });
+export const CardTitle = (p) => (_jsx(Heading, { taille: "carte", ...p }));
+/** Chiffre ou mot posé pour sa PRÉSENCE, hors de la hiérarchie des titres —
+ *  d'où le `<div>` : un chiffre géant annoncé comme titre de section pollue
+ *  le plan du document. */
+export function Display({ className, ...reste }) {
+    return _jsx("div", { className: cx('zv-display', className), ...reste });
+}
+export function Body({ taille = 'normal', as, className, ...reste }) {
+    const Balise = as ?? 'p';
+    return (_jsx(Balise, { className: cx('zv-body', taille === 'lg' && 'zv-body--lg', taille === 'dense' && 'zv-body--dense', className), ...reste }));
+}
+/** Chapô : le paragraphe qui suit immédiatement un titre de section. */
+export function Lead({ as, className, ...reste }) {
+    const Balise = as ?? 'p';
+    return _jsx(Balise, { className: cx('zv-lead', className), ...reste });
+}
+/** Mention légale, précision de bas de bloc. */
+export function Note({ as, className, ...reste }) {
+    const Balise = as ?? 'p';
+    return _jsx(Balise, { className: cx('zv-note', className), ...reste });
+}
+/** Signature de marque, sous un logo. */
+export function Tagline({ className, ...reste }) {
+    return _jsx("span", { className: cx('zv-tagline', className), ...reste });
+}
+/** Mise en valeur dans le fil du texte. Le pendant `surSombre` existe parce
+ *  que l'indigo d'accent devient illisible sur la bande manifeste. */
+export function Em({ surSombre, className, ...reste }) {
+    return (_jsx("em", { className: cx('zv-em', surSombre && 'zv-em--on-dark', className), ...reste }));
+}
+export function Link({ className, ...reste }) {
+    return _jsx("a", { className: cx('zv-link', className), ...reste });
+}
+export function Kicker({ variante, filet = true, surSombre, className, children, ...reste }) {
+    return (_jsxs("div", { className: cx('zv-kicker', variante && `zv-kicker--${variante}`, className), ...reste, children: [filet && _jsx(Spec, { surSombre: surSombre }), children] }));
+}
+/** Le filet de spectre seul. Décoratif : masqué aux lecteurs d'écran. */
+export function Spec({ petit, surSombre, className, ...reste }) {
+    return (_jsx("span", { "aria-hidden": "true", className: cx('zv-spec', petit && 'zv-spec--sm', surSombre && 'zv-spec--on-dark', className), ...reste }));
+}
+/** Filet neutre de séparation de section. */
+export function Rule({ className, ...reste }) {
+    return _jsx("div", { className: cx('zv-rule', className), ...reste });
+}
+/** Capitales espacées. ⚠️ Réservé aux LIBELLÉS : une date ou un nom de
+ *  fichier passés en capitales espacées deviennent illisibles et s'alignent
+ *  mal — pour ceux-là, c'est `Meta` (bas de casse, chasse tabulaire). */
+export function Mono({ ton, micro, className, ...reste }) {
+    return (_jsx("span", { className: cx('zv-mono', ton && `zv-mono--${ton}`, micro && 'zv-mono--micro', className), ...reste }));
+}
+//# sourceMappingURL=typography.js.map

package/dist/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../react/typography.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zevra/ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Design system Zevra « Encre & Papier » — tokens, CSS des composants et logos officiels.",
   "license": "UNLICENSED",
   "private": false,
@@ -16,11 +16,24 @@
     "url": "https://github.com/zevra-tech/zevra-ui/issues"
   },
   "type": "module",
+  "packageManager": "pnpm@10.29.3",
   "sideEffects": [
     "*.css"
   ],
   "exports": {
     ".": "./tokens/index.js",
+    "./react": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./react/catalogue": {
+      "types": "./dist/catalogue.d.ts",
+      "default": "./dist/catalogue.js"
+    },
+    "./react/css": {
+      "types": "./dist/css-inline.d.ts",
+      "default": "./dist/css-inline.js"
+    },
     "./css": "./src/index.css",
     "./tokens.css": "./src/tokens.css",
     "./fonts.css": "./src/fonts.css",
@@ -42,6 +55,8 @@
   "files": [
     "src",
     "tokens",
+    "dist",
+    "react",
     "logos",
     "icons",
     "demo",
@@ -49,14 +64,31 @@
     "DECISIONS.md"
   ],
   "scripts": {
-    "test": "vitest run"
+    "build": "node scripts/build-icon-react.mjs && node scripts/build-css-bundle.mjs && tsc -p tsconfig.json",
+    "test": "npm run build && vitest run",
+    "prepublishOnly": "npm run build"
   },
   "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^7.0.2",
     "vitest": "^3.2.4"
   },
   "keywords": [
     "zevra",
     "design-system",
-    "design-tokens"
-  ]
+    "design-tokens",
+    "react",
+    "components"
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  }
 }

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>
+  )
+}