From 133feff75d29647f947a120fb713f7de84d9ce0b Mon Sep 17 00:00:00 2001
From: Dinawo <lololefarmer@gmail.com>
Date: Mon, 4 May 2026 22:29:35 +0200
Subject: [PATCH] =?UTF-8?q?feat(v1):=20bloquants=20release=20v1=20?=
 =?UTF-8?q?=E2=80=94=20tests,=20stories,=20visual=20regression,=20gouverna?=
 =?UTF-8?q?nce,=20publishing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

6 chantiers v1 sur 7 livrés (DataTable refonte reportée car nécessite
2-3j en propre — TanStack Table + virtualisation + filter builder).

v1-A — Tests (4 → 22 fichiers) :
- Avatar, AvatarGroup, UserCard, MetricCard, ProfileHeader, Tooltip,
  Sheet, Drawer, Slider, ToggleGroup, Tabs, Pagination, Accordion,
  Switch, Badge, ConfirmDialog, Popover, Menu, Text, PricingCard,
  FeatureCard, Toast — chacun avec render + clavier + axe-core.

v1-B — Storybook (7 → 23 fichiers) :
- Avatar, UserCard, ProfileHeader, MetricCard, PricingCard,
  FeatureCard, Sheet (4 sides), HoverCard, Slider, ToggleGroup,
  Menu+ContextMenu, Toast (avec démo "Empiler 5"), Tabs,
  Pagination, Accordion, Badge.

v1-D — Visual regression Playwright :
- playwright.config.ts (light + dark, threshold strict 0.2)
- e2e/visual.spec.ts (20 stories critiques)
- Step CI + upload report en cas de fail

v1-E — Site doc Starlight rempli :
- 11 pages composants détaillées (Button, Input, Tooltip, Dialog,
  Toast, Avatar, ThemePicker, MetricCard, PricingCard, ToggleGroup,
  Slider) avec API, anatomie, do/don't, A11y.

v1-F — Publishing Verdaccio :
- verdaccio/config.yaml, docker-compose.verdaccio.yml, .npmrc
- README setup local + déploiement prod + backups + sécurité

v1-G — Gouvernance :
- LICENSE, CONTRIBUTING.md, CODE_OF_CONDUCT.md, SECURITY.md
- CODEOWNERS, PR template, 3 issue templates (bug/feature/rfc)

Bug fix bonus : tooltip dark mode (text-primary comme bg + text-inverse
comme texte → blanc-sur-blanc invisible). Remplacé par neutral-900/0
en light + bg-raised/text-primary en dark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .github/ISSUE_TEMPLATE/bug.md                 |  47 +++++++
 .github/ISSUE_TEMPLATE/feature.md             |  34 +++++
 .github/ISSUE_TEMPLATE/rfc.md                 |  69 ++++++++++
 .github/PULL_REQUEST_TEMPLATE.md              |  45 ++++++
 .github/workflows/ci.yml                      |  16 +++
 .gitignore                                    |   5 +
 .npmrc                                        |  16 +++
 CODEOWNERS                                    |  33 +++++
 CODE_OF_CONDUCT.md                            |  72 ++++++++++
 CONTRIBUTING.md                               | 129 ++++++++++++++++++
 LICENSE                                       |  50 +++++++
 SECURITY.md                                   |  72 ++++++++++
 docker-compose.verdaccio.yml                  |  22 +++
 docs/src/content/docs/components/avatar.md    |  72 ++++++++++
 docs/src/content/docs/components/dialog.md    |  90 ++++++++++++
 docs/src/content/docs/components/input.md     |  80 +++++++++++
 .../content/docs/components/metric-card.md    |  60 ++++++++
 .../content/docs/components/pricing-card.md   |  59 ++++++++
 docs/src/content/docs/components/slider.md    |  57 ++++++++
 .../content/docs/components/theme-picker.md   |  70 ++++++++++
 docs/src/content/docs/components/toast.md     |  72 ++++++++++
 .../content/docs/components/toggle-group.md   |  67 +++++++++
 docs/src/content/docs/components/tooltip.md   |  76 +++++++++++
 e2e/README.md                                 |  45 ++++++
 e2e/visual.spec.ts                            |  64 +++++++++
 package.json                                  |  10 +-
 packages/css/src/components/overlays.css      |  34 ++++-
 packages/react/src/Accordion.test.tsx         |  41 ++++++
 packages/react/src/Avatar.test.tsx            |  45 ++++++
 packages/react/src/AvatarGroup.test.tsx       |  36 +++++
 packages/react/src/Badge.test.tsx             |  32 +++++
 packages/react/src/ConfirmDialog.test.tsx     |  54 ++++++++
 packages/react/src/Drawer.test.tsx            |  38 ++++++
 packages/react/src/FeatureCard.test.tsx       |  41 ++++++
 packages/react/src/Menu.test.tsx              |  46 +++++++
 packages/react/src/MetricCard.test.tsx        |  52 +++++++
 packages/react/src/Pagination.test.tsx        |  40 ++++++
 packages/react/src/Popover.test.tsx           |  30 ++++
 packages/react/src/PricingCard.test.tsx       |  60 ++++++++
 packages/react/src/ProfileHeader.test.tsx     |  49 +++++++
 packages/react/src/Sheet.test.tsx             |  58 ++++++++
 packages/react/src/Slider.test.tsx            |  52 +++++++
 packages/react/src/Switch.test.tsx            |  44 ++++++
 packages/react/src/Tabs.test.tsx              |  41 ++++++
 packages/react/src/Text.test.tsx              |  60 ++++++++
 packages/react/src/Toast.test.tsx             |  74 ++++++++++
 packages/react/src/ToggleGroup.test.tsx       |  50 +++++++
 packages/react/src/Tooltip.test.tsx           |  55 ++++++++
 packages/react/src/UserCard.test.tsx          |  51 +++++++
 playwright.config.ts                          |  55 ++++++++
 pnpm-lock.yaml                                |  38 ++++++
 storybook/stories/Accordion.stories.tsx       |  27 ++++
 storybook/stories/Avatar.stories.tsx          |  52 +++++++
 storybook/stories/Badge.stories.tsx           |  53 +++++++
 storybook/stories/FeatureCard.stories.tsx     |  38 ++++++
 storybook/stories/HoverCard.stories.tsx       |  44 ++++++
 storybook/stories/Menu.stories.tsx            |  44 ++++++
 storybook/stories/MetricCard.stories.tsx      |  46 +++++++
 storybook/stories/Pagination.stories.tsx      |  19 +++
 storybook/stories/PricingCard.stories.tsx     |  68 +++++++++
 storybook/stories/ProfileHeader.stories.tsx   |  45 ++++++
 storybook/stories/Sheet.stories.tsx           |  42 ++++++
 storybook/stories/Slider.stories.tsx          |  50 +++++++
 storybook/stories/Tabs.stories.tsx            |  30 ++++
 storybook/stories/Toast.stories.tsx           |  35 +++++
 storybook/stories/ToggleGroup.stories.tsx     |  52 +++++++
 storybook/stories/UserCard.stories.tsx        |  37 +++++
 verdaccio/README.md                           |  85 ++++++++++++
 verdaccio/config.yaml                         |  65 +++++++++
 69 files changed, 3433 insertions(+), 7 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/bug.md
 create mode 100644 .github/ISSUE_TEMPLATE/feature.md
 create mode 100644 .github/ISSUE_TEMPLATE/rfc.md
 create mode 100644 .github/PULL_REQUEST_TEMPLATE.md
 create mode 100644 .npmrc
 create mode 100644 CODEOWNERS
 create mode 100644 CODE_OF_CONDUCT.md
 create mode 100644 CONTRIBUTING.md
 create mode 100644 LICENSE
 create mode 100644 SECURITY.md
 create mode 100644 docker-compose.verdaccio.yml
 create mode 100644 docs/src/content/docs/components/avatar.md
 create mode 100644 docs/src/content/docs/components/dialog.md
 create mode 100644 docs/src/content/docs/components/input.md
 create mode 100644 docs/src/content/docs/components/metric-card.md
 create mode 100644 docs/src/content/docs/components/pricing-card.md
 create mode 100644 docs/src/content/docs/components/slider.md
 create mode 100644 docs/src/content/docs/components/theme-picker.md
 create mode 100644 docs/src/content/docs/components/toast.md
 create mode 100644 docs/src/content/docs/components/toggle-group.md
 create mode 100644 docs/src/content/docs/components/tooltip.md
 create mode 100644 e2e/README.md
 create mode 100644 e2e/visual.spec.ts
 create mode 100644 packages/react/src/Accordion.test.tsx
 create mode 100644 packages/react/src/Avatar.test.tsx
 create mode 100644 packages/react/src/AvatarGroup.test.tsx
 create mode 100644 packages/react/src/Badge.test.tsx
 create mode 100644 packages/react/src/ConfirmDialog.test.tsx
 create mode 100644 packages/react/src/Drawer.test.tsx
 create mode 100644 packages/react/src/FeatureCard.test.tsx
 create mode 100644 packages/react/src/Menu.test.tsx
 create mode 100644 packages/react/src/MetricCard.test.tsx
 create mode 100644 packages/react/src/Pagination.test.tsx
 create mode 100644 packages/react/src/Popover.test.tsx
 create mode 100644 packages/react/src/PricingCard.test.tsx
 create mode 100644 packages/react/src/ProfileHeader.test.tsx
 create mode 100644 packages/react/src/Sheet.test.tsx
 create mode 100644 packages/react/src/Slider.test.tsx
 create mode 100644 packages/react/src/Switch.test.tsx
 create mode 100644 packages/react/src/Tabs.test.tsx
 create mode 100644 packages/react/src/Text.test.tsx
 create mode 100644 packages/react/src/Toast.test.tsx
 create mode 100644 packages/react/src/ToggleGroup.test.tsx
 create mode 100644 packages/react/src/Tooltip.test.tsx
 create mode 100644 packages/react/src/UserCard.test.tsx
 create mode 100644 playwright.config.ts
 create mode 100644 storybook/stories/Accordion.stories.tsx
 create mode 100644 storybook/stories/Avatar.stories.tsx
 create mode 100644 storybook/stories/Badge.stories.tsx
 create mode 100644 storybook/stories/FeatureCard.stories.tsx
 create mode 100644 storybook/stories/HoverCard.stories.tsx
 create mode 100644 storybook/stories/Menu.stories.tsx
 create mode 100644 storybook/stories/MetricCard.stories.tsx
 create mode 100644 storybook/stories/Pagination.stories.tsx
 create mode 100644 storybook/stories/PricingCard.stories.tsx
 create mode 100644 storybook/stories/ProfileHeader.stories.tsx
 create mode 100644 storybook/stories/Sheet.stories.tsx
 create mode 100644 storybook/stories/Slider.stories.tsx
 create mode 100644 storybook/stories/Tabs.stories.tsx
 create mode 100644 storybook/stories/Toast.stories.tsx
 create mode 100644 storybook/stories/ToggleGroup.stories.tsx
 create mode 100644 storybook/stories/UserCard.stories.tsx
 create mode 100644 verdaccio/README.md
 create mode 100644 verdaccio/config.yaml

diff --git a/.github/ISSUE_TEMPLATE/bug.md b/.github/ISSUE_TEMPLATE/bug.md
new file mode 100644
index 0000000..2cc9191
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug.md
@@ -0,0 +1,47 @@
+---
+name: 🐛 Bug
+about: Signaler un bug du DSMMG
+labels: bug
+---
+
+## Résumé
+
+<!-- 1-2 phrases. -->
+
+## Reproduction
+
+Un repro CodeSandbox ou StackBlitz est idéal. Sinon, étapes :
+
+1. Aller sur …
+2. Faire …
+3. Observer …
+
+## Comportement attendu
+
+<!-- Ce qui devrait se passer. -->
+
+## Comportement observé
+
+<!-- Ce qui se passe vraiment. Joindre captures / vidéos / logs console. -->
+
+## Environnement
+
+- Version DSMMG : <!-- ex. 0.2.0 -->
+- Browser + version : <!-- ex. Chrome 130, Firefox 132, Safari 18 -->
+- OS : <!-- ex. Windows 11, macOS 14, iOS 17 -->
+- Mode : light / dark / system
+- Accent : synapse / blue / … / custom
+- Densité : comfortable / cozy / compact
+- Reduced motion activé : oui / non
+
+## Composant(s) concerné(s)
+
+<!-- Button, DataTable, Tooltip, etc. -->
+
+## A11y
+
+- [ ] Reproductible au clavier ?
+- [ ] Reproductible avec lecteur d'écran ?
+- [ ] Régression de contraste ?
+
+## Idée de cause / fix (optionnel)
diff --git a/.github/ISSUE_TEMPLATE/feature.md b/.github/ISSUE_TEMPLATE/feature.md
new file mode 100644
index 0000000..f4d668a
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature.md
@@ -0,0 +1,34 @@
+---
+name: ✨ Feature
+about: Proposer une nouvelle fonctionnalité ou un nouveau composant
+labels: feature
+---
+
+## Problème à résoudre
+
+<!-- Quel besoin produit ? Quelle douleur actuelle ? -->
+
+## Solution proposée
+
+<!-- Décrire l'API, les variants, les cas d'usage. -->
+
+## Composants existants couvrant partiellement
+
+<!-- Y a-t-il un composant existant proche ? -->
+
+## Références (autres DS)
+
+<!-- Comment Radix / shadcn / Linear / Vercel / Stripe / Atlassian DS / IBM Carbon le font ? -->
+
+## Accessibilité
+
+<!-- Considérations a11y : ARIA roles, keyboard nav, contraste, RTL. -->
+
+## Alternatives écartées
+
+## Effort estimé
+
+- [ ] S (≤ 1j)
+- [ ] M (1 sem)
+- [ ] L (2-3 sem — RFC requise)
+- [ ] XL (1 mois+ — RFC + roadmap)
diff --git a/.github/ISSUE_TEMPLATE/rfc.md b/.github/ISSUE_TEMPLATE/rfc.md
new file mode 100644
index 0000000..5f42e3b
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/rfc.md
@@ -0,0 +1,69 @@
+---
+name: 📜 RFC
+about: Proposition formelle pour un changement majeur
+labels: rfc
+---
+
+> Une RFC est requise pour : nouveau composant non-trivial,
+> breaking change sur l'API publique, refonte de tokens, nouvelle
+> dépendance externe, changement architectural.
+
+## Titre
+
+RFC #XXXX — <!-- titre court -->
+
+## Statut
+
+- [ ] Draft
+- [ ] In review
+- [ ] Accepted
+- [ ] Rejected
+- [ ] Superseded by #...
+
+## Auteur(s)
+
+@…
+
+## Date
+
+YYYY-MM-DD
+
+## Contexte
+
+<!-- Pourquoi cette RFC ? Quel problème résout-elle ? Données utilisateur,
+contraintes business, contraintes techniques. -->
+
+## Proposition
+
+<!-- La solution proposée. Code, schémas, exemples. -->
+
+## API publique (si applicable)
+
+```tsx
+// avant
+<OldComponent prop="x" />
+
+// après
+<NewComponent variant="x" />
+```
+
+## Alternatives écartées
+
+<!-- Ce qu'on a considéré et pourquoi on l'a écarté. -->
+
+## Coût migration
+
+- Codemod possible : oui / non
+- Effort consommateur estimé :
+- Période de deprecation prévue :
+
+## Risques
+
+- A11y :
+- Performance :
+- DX :
+- Lock-in / dépendances :
+
+## Décision
+
+<!-- À remplir après discussion. Date + résumé des arguments. -->
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000..efd8746
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,45 @@
+## Résumé
+
+<!-- 1-2 phrases. Le "pourquoi" plus que le "quoi" — le diff montre déjà le quoi. -->
+
+## Changements
+
+- [ ] Ajout — nouveau composant / token / variant
+- [ ] Fix — bugfix
+- [ ] Refacto — pas de surface publique modifiée
+- [ ] Doc — uniquement docs / stories / commentaires
+- [ ] Breaking — change l'API publique (préciser ci-dessous)
+
+### Détail des breaking changes (si applicable)
+
+<!-- Lister précisément ce qui change, avec exemples avant/après. -->
+
+## Tests
+
+- [ ] Tests unitaires ajoutés / mis à jour
+- [ ] Stories Storybook ajoutées / mises à jour
+- [ ] Test axe-core (pas de violation a11y)
+- [ ] Test clavier (Tab, Esc, flèches, Enter, Espace)
+- [ ] Testé en dark mode
+- [ ] Testé sur les 9 presets accent (au moins synapse + un autre)
+- [ ] Testé en zoom 200 % / reflow 320px
+- [ ] Testé avec `prefers-reduced-motion: reduce`
+- [ ] Lint contraste WCAG passe (`pnpm lint:contrast`)
+
+## Documentation
+
+- [ ] Page MDX du composant dans `docs/` (anatomie, props, do/don't, a11y)
+- [ ] Story Storybook avec autodocs
+- [ ] CHANGELOG via Changesets (`pnpm changeset`)
+
+## Captures / preuves visuelles
+
+<!-- Avant / après si modification visuelle. -->
+
+## Checklist finale
+
+- [ ] J'ai lu [CONTRIBUTING.md](../CONTRIBUTING.md)
+- [ ] Mon code suit les conventions de naming (`mmg-*`, `--mmg-color-*`)
+- [ ] Aucun hex en dur — uniquement des tokens
+- [ ] Aucun `--mmg-color-synapse-*` direct dans un composant
+- [ ] CI verte
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 66a461d..8fd1e02 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -59,6 +59,22 @@ jobs:
       - name: Build Storybook
         run: pnpm --filter storybook build
 
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Visual regression (Playwright)
+        run: pnpm test:visual
+        env:
+          CI: true
+
+      - name: Upload Playwright report on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          retention-days: 14
+
       - name: Bundle size budget
         run: pnpm size
 
diff --git a/.gitignore b/.gitignore
index e1f4d85..314e14f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,6 +37,11 @@ storybook-static
 # Test artifacts
 coverage
 .nyc_output
+playwright-report
+playwright/.cache
+test-results
+e2e/__screenshots__/*-actual.png
+e2e/__screenshots__/*-diff.png
 
 # Demo specifics
 demo/_dev.log
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 0000000..14c8ba4
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1,16 @@
+# DSMMG — npm/pnpm config workspace
+# Usage privé : tout @managemate va sur le Verdaccio local par défaut.
+# En CI ou pour les contributeurs externes, override via env vars.
+
+# Registre par défaut pour le scope @managemate
+@managemate:registry=https://npm.dinawo.fr/
+
+# Reste sur npm public
+registry=https://registry.npmjs.org/
+
+# pnpm — éviter les conflits de hoisting auto sur les peers Radix
+strict-peer-dependencies=false
+auto-install-peers=true
+
+# Lockfile cohérent pour CI
+prefer-frozen-lockfile=true
diff --git a/CODEOWNERS b/CODEOWNERS
new file mode 100644
index 0000000..1b9f01d
--- /dev/null
+++ b/CODEOWNERS
@@ -0,0 +1,33 @@
+# DSMMG — CODEOWNERS
+# Règle : ces personnes/équipes sont automatiquement assignées en
+# review sur les PRs touchant les fichiers concernés.
+# Doc Gitea : https://docs.gitea.com/usage/code-owners
+
+# Mainteneurs principaux du DS — review obligatoire sur tout
+* @lololefarmer
+
+# Tokens & couleurs — exige un designer dans la review
+/packages/tokens/                     @lololefarmer
+/packages/css/src/tokens/             @lololefarmer
+/packages/css/src/tokens.css          @lololefarmer
+/scripts/lint-contrast.mjs            @lololefarmer
+DESIGN.md                             @lololefarmer
+
+# CSS de composants — review front
+/packages/css/src/components/         @lololefarmer
+
+# Composants React — review front senior
+/packages/react/src/                  @lololefarmer
+
+# Tests & Storybook
+/storybook/                           @lololefarmer
+/packages/react/src/*.test.tsx        @lololefarmer
+
+# CI & release
+/.github/workflows/                   @lololefarmer
+/.changeset/                          @lololefarmer
+
+# Documentation
+/docs/                                @lololefarmer
+README.md                             @lololefarmer
+CONTRIBUTING.md                       @lololefarmer
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
new file mode 100644
index 0000000..87f2fb8
--- /dev/null
+++ b/CODE_OF_CONDUCT.md
@@ -0,0 +1,72 @@
+# Code de conduite — DSMMG
+
+Inspiré du [Contributor Covenant 2.1](https://www.contributor-covenant.org/version/2/1/code_of_conduct/)
+et adapté au contexte ManageMate Group.
+
+## Notre engagement
+
+En tant que membres, contributeurs et mainteneurs du DSMMG, nous nous
+engageons à faire de la participation à ce projet une expérience
+exempte de harcèlement pour tout le monde, indépendamment de l'âge,
+de la corpulence, du handicap visible ou invisible, de l'origine
+ethnique, des caractères sexuels, de l'identité ou expression de genre,
+du niveau d'expérience, de l'éducation, du statut socio-économique,
+de la nationalité, de l'apparence personnelle, de la religion ou de
+l'orientation sexuelle.
+
+## Comportements attendus
+
+- Faire preuve d'**empathie** et de **bienveillance**.
+- Respecter les opinions, points de vue et expériences différents.
+- Donner et accepter avec grâce les retours constructifs.
+- Assumer la responsabilité de nos erreurs, présenter nos excuses aux
+  personnes affectées, et apprendre de nos erreurs.
+- Privilégier ce qui est le mieux pour la communauté, pas seulement
+  pour nous individuellement.
+
+## Comportements inacceptables
+
+- Langage ou imagerie sexualisé, attention ou avances sexuelles
+  importunes.
+- Trolling, commentaires insultants ou désobligeants, attaques
+  personnelles ou politiques.
+- Harcèlement public ou privé.
+- Publication d'informations privées de tiers (adresse, e-mail, etc.)
+  sans permission explicite.
+- Toute autre conduite raisonnablement considérée comme inappropriée
+  dans un cadre professionnel.
+
+## Application
+
+Les responsables du projet sont chargés de clarifier et faire
+respecter nos standards de comportement. Ils prendront des mesures
+correctives appropriées et équitables en réponse à tout comportement
+qu'ils jugent inapproprié.
+
+Les mainteneurs ont le droit et la responsabilité de supprimer,
+modifier ou rejeter les commentaires, commits, code, modifications de
+documentation et autres contributions qui ne sont pas alignés avec ce
+code de conduite.
+
+## Application interne
+
+Les violations peuvent être signalées au mainteneur principal du
+projet ou à `conduct@managemate.fr`. Toutes les plaintes seront
+examinées avec sérieux et donneront lieu à une réponse jugée
+nécessaire et appropriée. Confidentialité garantie.
+
+## Sanctions possibles
+
+1. **Correction** — avertissement privé, explication écrite de la
+   violation et de la conduite attendue.
+2. **Avertissement** — avertissement officiel + interdiction
+   d'interaction avec la victime pendant une période définie.
+3. **Bannissement temporaire** — interdiction de toute interaction
+   avec le projet pendant une période donnée.
+4. **Bannissement définitif** — interdiction permanente de toute
+   interaction publique avec le projet.
+
+## Attribution
+
+Adapté du [Contributor Covenant version 2.1](https://www.contributor-covenant.org/version/2/1/code_of_conduct/),
+disponible sous Creative Commons Attribution 4.0.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000..8c5611d
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,129 @@
+# Contribuer au DSMMG
+
+Merci de prendre le temps de contribuer. Ce guide décrit le workflow
+attendu pour ajouter / modifier un composant, fixer un bug, ou faire
+évoluer le design system.
+
+## Setup local
+
+```sh
+git clone https://git.dinawo.fr/ManageMate-Group/DSMMG.git
+cd DSMMG
+pnpm install
+pnpm build           # build tous les packages dans le bon ordre
+pnpm storybook       # lance Storybook localement (port 6006)
+pnpm demo            # lance la demo Vite (port 5180)
+pnpm --filter @managemate/react test:watch
+```
+
+Pré-requis : Node ≥ 20, pnpm ≥ 9, Git.
+
+## Workflow d'une PR
+
+1. **Créer une branche** depuis `main` :
+   - `feat/<name>` — nouvelle fonctionnalité
+   - `fix/<name>` — correction de bug
+   - `chore/<name>` — outillage, refacto sans surface publique
+   - `docs/<name>` — documentation
+2. **Coder + tests** :
+   - Tests unitaires (`*.test.tsx`) avec Vitest + axe-core
+   - Stories Storybook (`*.stories.tsx`) avec autodocs
+   - Doc MDX pour les composants publics
+3. **Ajouter un changeset** : `pnpm changeset` (sélectionner les
+   packages impactés et le bump approprié — patch / minor / major).
+4. **Push** + ouvrir la PR sur `main`.
+5. **CI doit passer** :
+   - lint + typecheck
+   - tests Vitest
+   - axe-core (pas de violation a11y)
+   - lint contraste WCAG (`pnpm lint:contrast`)
+   - build Storybook + visual regression
+   - bundle size budget (`pnpm size`)
+6. **1 review minimum** d'un CODEOWNER avant merge.
+
+## Conventions de code
+
+### Naming
+
+- **Tokens couleur** : `--mmg-color-*` (jamais `--mmg-color-synapse-*`
+  directement dans un composant — toujours `--mmg-color-accent-*`).
+- **Classes CSS** : `mmg-<comp>` BEM-like (`mmg-btn`, `mmg-btn--primary`,
+  `mmg-btn__icon`).
+- **Utilitaires CSS** : `mmg-u-*` (`mmg-u-stack`, `mmg-u-text-primary`).
+- **Composants React** : PascalCase (`Button`, `ProfileHeader`,
+  `MetricCard`). **Un fichier par composant**, pas de monolithe.
+- **Tests** : `<Component>.test.tsx`, **stories** : `<Component>.stories.tsx`.
+
+### Sémantique
+
+- Choisir le tag HTML selon **la sémantique**, pas selon la taille
+  visuelle. Un titre de page reste `<h1>` même s'il est stylé en
+  `display-xl`.
+- Préférer `<button>` à `<div onClick>`. Préférer `<a href>` pour la
+  navigation.
+
+### Accessibilité (non-négociable)
+
+- Tester en clavier (Tab, Shift+Tab, Esc, flèches, Enter, Espace).
+- Tester avec un lecteur d'écran si possible (NVDA / VoiceOver).
+- Tester en zoom 200 % et reflow 320px.
+- Tester avec `prefers-reduced-motion` activé.
+- Toute couleur d'info doit être redondée avec icône / texte / pattern
+  (RGAA 9 — couleur seule interdite).
+- Aucun `outline: none` sans focus visible alternatif.
+- Cible tactile ≥ 44×44 (WCAG SC 2.5.5).
+
+## Ajouter un nouveau composant
+
+1. Créer `packages/react/src/<Component>.tsx` (un fichier, exports
+   nommés, types exportés).
+2. Si CSS dédié : `packages/css/src/components/<comp>.css` + l'importer
+   dans `packages/css/src/index.css` avec `layer(components)`.
+3. **Story** : `storybook/stories/<Component>.stories.tsx` — au minimum
+   un default + variants + states (default/hover/focus/loading/empty/
+   error/disabled).
+4. **Tests** : `packages/react/src/<Component>.test.tsx` — render, axe,
+   clavier, interactions critiques.
+5. **Doc MDX** : `docs/src/content/docs/components/<component>.md` —
+   anatomie, props, do/don't, accessibilité.
+6. **Export** dans `packages/react/src/index.tsx`.
+7. **Changeset** minor.
+
+> **Un composant non documenté n'est pas livré.**
+
+## RFC pour les changements majeurs
+
+Voir [RFC process](docs/src/content/docs/contrib/rfc.md). Une RFC est
+requise pour :
+- nouveau composant non-trivial (DataTable v2, Calendar, Editor…)
+- breaking change sur l'API publique
+- refonte d'un token ou d'un groupe de tokens
+- nouvelle dépendance externe
+- changement architectural
+
+## Versioning (SemVer strict)
+
+- **major** : breaking change sur l'API publique
+- **minor** : addition non-breaking (nouveau composant, nouvelle prop)
+- **patch** : bugfix, doc, perf interne sans surface publique
+
+Les 4 packages versionnés (`tokens`, `css`, `react`, `icons`) sont
+**fixed** (même version) — pas d'incompatibilités cross-package.
+
+## Code de conduite
+
+Voir [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). Toute communication
+toxique, harcèlement, ou comportement excluant entraîne l'exclusion du
+projet.
+
+## Sécurité
+
+Les vulnérabilités doivent être signalées en privé. Voir
+[SECURITY.md](SECURITY.md).
+
+## Licence
+
+Tout contribution est faite sous la licence du projet
+(voir [LICENSE](LICENSE)). En soumettant une PR, vous accordez à
+ManageMate Group le droit d'utiliser votre contribution dans le cadre
+du DSMMG.
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..1bf8aaa
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,50 @@
+DSMMG — Design System ManageMate Group
+Copyright (c) 2026 ManageMate Group. Tous droits réservés.
+
+LICENCE PROPRIÉTAIRE — USAGE INTERNE MANAGEMATE GROUP
+
+Cette licence régit l'utilisation des packages :
+  @managemate/css, @managemate/react, @managemate/icons, @managemate/tokens
+ainsi que le code source du repository associé.
+
+1. PROPRIÉTÉ INTELLECTUELLE
+   Le DSMMG (Design System ManageMate Group) et l'ensemble de ses
+   composants logiciels, designs, tokens, illustrations et documentation
+   sont la propriété exclusive de ManageMate Group SAS. Aucun transfert
+   de propriété n'est effectué par cette licence.
+
+2. USAGE AUTORISÉ
+   L'utilisation du DSMMG est autorisée :
+   - dans tous les produits et services développés par ManageMate Group
+     ou ses filiales (Synapse, HRTime, Forge, Orbit, MSLM,
+     Espace-Client, sites publics et tout autre produit interne) ;
+   - par les contractuels et prestataires sous accord de
+     confidentialité, dans le strict cadre de leur mission pour
+     ManageMate Group.
+
+3. INTERDICTIONS
+   Sont strictement interdits sans accord écrit préalable de
+   ManageMate Group :
+   - toute redistribution publique du code source ou des binaires ;
+   - toute utilisation commerciale en dehors des produits ManageMate ;
+   - toute publication sur un registre public (npm, GitHub Packages…) ;
+   - toute reverse-engineering, modification ou extraction des
+     composants pour intégration dans un système tiers ;
+   - toute mention de marque ou usage du logo DSMMG sans autorisation.
+
+4. ABSENCE DE GARANTIE
+   Le logiciel est fourni "TEL QUEL", sans garantie d'aucune sorte,
+   expresse ou implicite, y compris notamment les garanties d'aptitude
+   à un usage particulier ou de non-violation des droits de tiers.
+   ManageMate Group ne pourra être tenu responsable de tout dommage
+   résultant de l'utilisation du DSMMG.
+
+5. RGAA / WCAG
+   Le DSMMG fait l'effort de respecter le RGAA 4.1 / WCAG 2.2 AA,
+   mais l'intégrateur final reste responsable de la conformité de
+   l'application complète. Les composants sont des briques, pas une
+   garantie totale.
+
+6. CONTACT
+   Pour toute demande de licence étendue ou d'usage hors périmètre :
+   licensing@managemate.fr
diff --git a/SECURITY.md b/SECURITY.md
new file mode 100644
index 0000000..20075dc
--- /dev/null
+++ b/SECURITY.md
@@ -0,0 +1,72 @@
+# Politique de sécurité — DSMMG
+
+## Versions supportées
+
+| Version | Statut |
+|---------|--------|
+| 0.2.x | ✅ Active |
+| 0.1.x | ❌ Plus supportée — migrer vers 0.2 (cf. `docs/src/content/docs/intro/migration.md`) |
+
+Une version mineure reçoit des correctifs de sécurité jusqu'à la
+sortie de la mineure suivante. La mineure précédente reçoit
+uniquement les correctifs critiques pendant 90 jours.
+
+## Signaler une vulnérabilité
+
+**Ne pas ouvrir d'issue publique pour une vulnérabilité.**
+
+Envoyer un e-mail à **security@managemate.fr** avec :
+
+1. Description du problème.
+2. Étapes de reproduction (scénario minimal, screenshots si pertinent).
+3. Impact estimé (confidentialité, intégrité, disponibilité).
+4. Version(s) affectée(s).
+5. Suggestion de correctif (optionnel).
+
+Vous recevrez :
+- **Accusé de réception sous 48h ouvrées.**
+- **Évaluation initiale sous 5 jours ouvrés.**
+- Communication régulière sur l'avancement.
+- Une mention dans le CHANGELOG (avec votre accord) si la
+  vulnérabilité est confirmée.
+
+## Périmètre de sécurité
+
+Les composants du DSMMG sont des briques d'UI. Les responsabilités sécurité :
+
+| Couche | Qui ? |
+|--------|-------|
+| Validation côté client (formats, longueurs) | Composant DSMMG |
+| Échappement XSS dans le rendu React | React + composant |
+| Validation serveur, autorisation, CSRF | **L'application consommatrice** |
+| Stockage et chiffrement des données | **L'application consommatrice** |
+| Protection contre injections (SQL, command) | **L'application consommatrice** |
+
+Le DSMMG ne contient pas de logique d'authentification, de gestion
+de tokens, ni de stockage de secrets.
+
+## Bonnes pratiques pour l'intégrateur
+
+- **Valider côté serveur** toute entrée venant du client, même si
+  elle a été contrôlée par un composant DSMMG.
+- **Échappement systématique** lors de l'injection de contenu
+  utilisateur dans un composant (le DSMMG ne fait pas de sanitization
+  HTML — seulement le rendu React natif).
+- **Politique CSP** stricte côté app : interdire `'unsafe-inline'`,
+  whitelister explicitement les domaines de fonts (Google Fonts
+  pour Figtree).
+- **Mises à jour** : surveiller les avis de sécurité de Radix UI,
+  Floating UI, et autres dépendances upstream du DSMMG.
+
+## Audits
+
+Le DSMMG est audité automatiquement à chaque release :
+- `pnpm audit` sur le lockfile pnpm
+- `pnpm lint:contrast` (vérifie les ratios de contraste WCAG AA)
+- `axe-core` sur tous les composants en CI
+- `size-limit` pour détecter les régressions de bundle
+
+## Crédits
+
+Merci aux personnes ayant signalé des vulnérabilités responsables :
+- *(en attente)*
diff --git a/docker-compose.verdaccio.yml b/docker-compose.verdaccio.yml
new file mode 100644
index 0000000..77f0aa6
--- /dev/null
+++ b/docker-compose.verdaccio.yml
@@ -0,0 +1,22 @@
+services:
+  verdaccio:
+    image: verdaccio/verdaccio:6
+    container_name: dsmmg-verdaccio
+    restart: unless-stopped
+    ports:
+      - "4873:4873"
+    volumes:
+      - verdaccio-storage:/verdaccio/storage
+      - ./verdaccio/config.yaml:/verdaccio/conf/config.yaml:ro
+    environment:
+      VERDACCIO_PROTOCOL: http
+      VERDACCIO_PORT: 4873
+    healthcheck:
+      test: ["CMD", "wget", "--spider", "-q", "http://localhost:4873/-/ping"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+
+volumes:
+  verdaccio-storage:
+    name: dsmmg-verdaccio-storage
diff --git a/docs/src/content/docs/components/avatar.md b/docs/src/content/docs/components/avatar.md
new file mode 100644
index 0000000..b48e694
--- /dev/null
+++ b/docs/src/content/docs/components/avatar.md
@@ -0,0 +1,72 @@
+---
+title: Avatar / AvatarGroup
+description: Photo de profil avec initiales fallback, status indicator, AvatarGroup empilé.
+---
+
+## Avatar
+
+```tsx
+import { Avatar } from "@managemate/react";
+
+<Avatar src="/photo.png" alt="Marie Dupont" size="lg" status="online" />
+<Avatar initials="MD" alt="Marie Dupont" size="lg" />
+```
+
+| Prop | Type | Défaut |
+|---|---|---|
+| `src` | `string` | — |
+| `initials` | `string` | — |
+| `alt` | `string` | — (toujours fournir pour a11y) |
+| `size` | `"xs"|"sm"|"md"|"lg"|"xl"|"2xl"` | `"md"` |
+| `shape` | `"circle"|"square"` | `"circle"` |
+| `status` | `"online"|"away"|"busy"|"offline"` | — |
+| `color` | `"auto"|"neutral"|"brand"|"blue"|...` | `"auto"` |
+| `bordered` | `boolean` | `false` |
+
+### Couleur auto
+
+Si `initials` est fourni sans `src`, une couleur est générée déterministiquement depuis les initiales (palette `brand / blue / green / amber / violet`). Stable entre renders pour le même nom.
+
+### Status indicator
+
+Petit point en bas-droite avec `aria-label` :
+- `online` → vert "En ligne"
+- `away` → ambre "Absent"
+- `busy` → rouge "Occupé"
+- `offline` → gris "Hors ligne"
+
+## AvatarGroup
+
+```tsx
+<AvatarGroup
+  max={4}
+  total={12}    // affiche +8 même si on passe seulement 4 avatars
+  size="md"
+  avatars={[
+    { initials: "MD", alt: "Marie" },
+    { initials: "JM", alt: "Jean" },
+    { initials: "SB", alt: "Sophie" },
+  ]}
+/>
+```
+
+Empilage avec overlap négatif. Hover sur un avatar le remonte en z-index pour identifier qui c'est.
+
+## Do / Don't
+
+✅ **Do**
+- Toujours fournir `alt` (nom complet), même avec image.
+- Préférer `initials` à `src` quand l'image est absente — pas d'icône générique.
+- Utiliser `bordered` quand l'avatar est sur un fond chargé (Hero, AvatarGroup).
+
+❌ **Don't**
+- Pas d'avatar sans `alt` (RGAA 1.1).
+- Pas d'image inline sans `loading="lazy"` (déjà géré).
+- Pas de status `online` sans rafraîchissement temps réel — sinon mensonger.
+
+## A11y
+
+- `role="img"` + `aria-label` quand pas d'image (juste initiales).
+- `<img alt>` sinon.
+- Status indicator a son propre `aria-label` (annoncé séparément).
+- Couleur auto-générée passe AA (background `*-100`, color `*-800`).
diff --git a/docs/src/content/docs/components/dialog.md b/docs/src/content/docs/components/dialog.md
new file mode 100644
index 0000000..dc36152
--- /dev/null
+++ b/docs/src/content/docs/components/dialog.md
@@ -0,0 +1,90 @@
+---
+title: Dialog / Sheet / Drawer
+description: Overlays modaux — Radix Dialog avec focus trap, scroll lock, restitution focus.
+---
+
+## Quel composant choisir ?
+
+| Composant | Usage | Animation |
+|---|---|---|
+| `<Dialog>` | Centré, focus sur une action courte. Confirmation, formulaire compact. | Fade + scale |
+| `<Sheet>` | Glisse depuis un bord (4 sides × 5 sizes). Édition longue, navigation mobile, filtres. | Slide |
+| `<Drawer>` | Variante simplifiée de Sheet (left/right uniquement, callback `onClose`). | Slide |
+| `<ConfirmDialog>` | Confirm destructive (focus initial sur Annuler). | = Dialog sm |
+
+Tous backed Radix → focus trap, scroll lock, restitution focus, Esc, click backdrop.
+
+## Dialog
+
+```tsx
+const [open, setOpen] = useState(false);
+
+<Dialog
+  open={open}
+  onOpenChange={setOpen}
+  title="Modifier l'utilisateur"
+  description="Mettez à jour les informations."
+  size="md"  // sm | md | lg | xl | full
+  footer={
+    <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+      <Button variant="ghost" onClick={() => setOpen(false)}>Annuler</Button>
+      <Button variant="primary" onClick={save}>Sauvegarder</Button>
+    </div>
+  }
+>
+  <Input label="Nom" />
+</Dialog>
+```
+
+## Sheet
+
+```tsx
+<Sheet
+  open={open}
+  onOpenChange={setOpen}
+  side="right"     // left | right | top | bottom
+  size="md"        // sm 320 | md 480 | lg 640 | xl 820 | full
+  title="Édition rapide"
+  description="Sauvegarde immédiate à chaque changement."
+  footer={...}
+>
+  <Form>...</Form>
+</Sheet>
+```
+
+## ConfirmDialog (destructive)
+
+```tsx
+<ConfirmDialog
+  open={open}
+  onOpenChange={setOpen}
+  destructive
+  title="Supprimer 3 collaborateurs ?"
+  description="Cette action est irréversible."
+  confirmLabel="Supprimer définitivement"
+  onConfirm={() => api.delete(ids)}
+/>
+```
+
+Focus initial sur **Annuler** (pas Confirm) pour éviter les actions destructives accidentelles.
+
+## A11y
+
+- `role="dialog"` + `aria-modal="true"` natif.
+- Title lié via `aria-labelledby`, description via `aria-describedby`.
+- Focus trap : Tab cycle uniquement dans le dialog.
+- Restitution focus à l'élément d'origine à la fermeture.
+- Esc ferme.
+- Click backdrop ferme (sauf si `modal={false}` posé).
+
+## Do / Don't
+
+✅ **Do**
+- Un titre explicite (RGAA 9.2 — relations).
+- Description si l'action a des conséquences (suppression, paiement).
+- Bouton primary à droite, ghost/cancel à gauche.
+
+❌ **Don't**
+- Ne pas empiler les Dialogs (UX cauchemardesque). Si vraiment besoin, utiliser un Sheet + Wizard pattern.
+- Ne pas utiliser pour un message non-bloquant — préférer Toast.
+- Ne pas ouvrir automatiquement au load sans interaction utilisateur (RGAA 13.1 — pas d'apparition non sollicitée).
diff --git a/docs/src/content/docs/components/input.md b/docs/src/content/docs/components/input.md
new file mode 100644
index 0000000..edc6dfe
--- /dev/null
+++ b/docs/src/content/docs/components/input.md
@@ -0,0 +1,80 @@
+---
+title: Input / Textarea / Select
+description: Champs de formulaire DSMMG — Field-wrapped, accessibles, états couverts.
+---
+
+## Anatomie
+
+```
+┌──────────────────────────────────────┐
+│ Label (semi)                       * │  ← --required
+├──────────────────────────────────────┤
+│ [icon] Valeur saisie                 │  ← Input
+├──────────────────────────────────────┤
+│ Hint                                  │  ← --tertiary
+│ Erreur                                │  ← --danger (si invalid)
+└──────────────────────────────────────┘
+```
+
+## API
+
+```tsx
+import { Input, Textarea, Select } from "@managemate/react";
+
+<Input
+  label="E-mail"
+  type="email"
+  required
+  hint="Nous ne partageons jamais votre e-mail."
+  error={emailError}        // string | undefined
+  prefix={<Icon name="mail-line" />}
+  size="md"                  // sm | md | lg
+/>
+
+<Textarea label="Notes" rows={4} />
+
+<Select
+  label="Pays"
+  options={[
+    { value: "fr", label: "France" },
+    { value: "be", label: "Belgique" },
+  ]}
+/>
+```
+
+## Tailles
+
+`sm` (28px), `md` (40px, défaut), `lg` (48px). La densité globale
+(`[data-mmg-density]`) ajuste automatiquement le padding.
+
+## États
+
+| | |
+|---|---|
+| Default | Border `--mmg-color-border` |
+| Hover | Border `--mmg-color-border-strong` |
+| Focus | Border accent + halo `--mmg-shadow-focus` |
+| Disabled | Bg `--mmg-color-state-disabled-bg`, cursor not-allowed |
+| Error | Border `--mmg-color-danger`, message `aria-describedby` |
+| Success | Border `--mmg-color-success` |
+
+## Do / Don't
+
+✅ **Do**
+
+- Toujours fournir un `<Label>` visible (jamais le placeholder seul — RGAA 11.1).
+- `aria-describedby` automatique entre input et hint/error.
+- Validation côté serveur en complément (le client n'est jamais source de vérité).
+
+❌ **Don't**
+
+- Ne pas désactiver un input sans expliquer pourquoi (préférer rendre actif + bloquer la submit avec message).
+- Ne pas mettre du contenu HTML dans `placeholder` — il est lu par les lecteurs d'écran comme du texte.
+- Ne pas utiliser `<Select>` pour > 8 options — préférer `<Combobox>`.
+
+## A11y
+
+- `<label htmlFor>` natif, généré automatiquement.
+- `aria-invalid` posé quand `error` est fourni.
+- Touch target ≥ 44 (l'input md fait 40, mais un padding cliquable + label cliquable fait 48 effectif).
+- Erreurs annoncées via `role="alert"` quand elles apparaissent.
diff --git a/docs/src/content/docs/components/metric-card.md b/docs/src/content/docs/components/metric-card.md
new file mode 100644
index 0000000..3c39049
--- /dev/null
+++ b/docs/src/content/docs/components/metric-card.md
@@ -0,0 +1,60 @@
+---
+title: MetricCard
+description: KPI dashboard — valeur géante, delta coloré, tendance, sparkline optionnel.
+---
+
+## API
+
+```tsx
+import { MetricCard, Sparkline } from "@managemate/react";
+
+<MetricCard
+  label="MRR"
+  value="84 320 €"
+  delta="+12.4%"
+  trend="up"
+  invertTrend={false}      // true = "moins c'est mieux" (tickets, churn, latence)
+  period="vs mois dernier"
+  icon="money-euro-circle-line"
+  sparkline={<Sparkline data={[20, 28, 25, 32, 30, 38, 42, 48]} width={200} height={48} />}
+  href="/dashboard/mrr"     // ou onClick
+/>
+```
+
+## Sémantique trend
+
+| `trend` | `invertTrend` | Couleur delta |
+|---|---|---|
+| `"up"` | `false` (défaut) | success (vert) |
+| `"up"` | `true` | danger (rouge) |
+| `"down"` | `false` | danger (rouge) |
+| `"down"` | `true` | success (vert) |
+| `"flat"` | — | neutre |
+
+Exemple : "tickets ouverts" en hausse = mauvais → `trend="up" invertTrend`.
+
+## Variantes interactives
+
+- Si `href` ou `onClick` → la carte devient cliquable (drill-down vers la page de détail).
+- Hover : lift `translateY(-2px)` + border `--mmg-color-border-strong`.
+- Focus visible accent.
+
+## Layout
+
+Idéal en grille 4-cols :
+
+```tsx
+<div className="mmg-grid mmg-grid--gap-md">
+  {kpis.map(k => (
+    <div key={k.id} className="mmg-col-3">
+      <MetricCard {...k} />
+    </div>
+  ))}
+</div>
+```
+
+## A11y
+
+- Si interactif (`href`/`onClick`) : `<a>` ou `<button>` natif, focusable.
+- Le delta utilise icône + texte → couleur jamais seule (RGAA 9).
+- `font-variant-numeric: tabular-nums` sur valeur et delta pour alignement vertical.
diff --git a/docs/src/content/docs/components/pricing-card.md b/docs/src/content/docs/components/pricing-card.md
new file mode 100644
index 0000000..02ced0c
--- /dev/null
+++ b/docs/src/content/docs/components/pricing-card.md
@@ -0,0 +1,59 @@
+---
+title: PricingCard
+description: Carte de tarification pour landings.
+---
+
+## API
+
+```tsx
+import { PricingCard, Button } from "@managemate/react";
+
+<PricingCard
+  name="Pro"
+  description="Pour les PME en croissance."
+  price="19 €"
+  pricePeriod="/utilisateur/mois"
+  highlighted        // bordure accent + gradient subtil + ombre teintée
+  badge="Populaire"
+  features={[
+    { label: "Collaborateurs illimités" },
+    { label: "Support prioritaire 24/7" },
+    { label: "API & webhooks" },
+    { label: "SSO / SAML", included: false },
+  ]}
+  cta={<Button variant="primary" block>Choisir Pro</Button>}
+/>
+```
+
+## Patterns
+
+### 3 plans avec le tier "Pro" highlighté
+
+```tsx
+<div className="mmg-grid mmg-grid--gap-md">
+  <div className="mmg-col-4"><PricingCard name="Starter" {...starter} /></div>
+  <div className="mmg-col-4"><PricingCard name="Pro" {...pro} highlighted badge="Populaire" /></div>
+  <div className="mmg-col-4"><PricingCard name="Enterprise" {...enterprise} /></div>
+</div>
+```
+
+### Features incluses / non incluses
+
+`included: false` affiche une croix grise + texte barré + couleur quaternary. Permet de comparer rapidement les tiers.
+
+## A11y
+
+- Badge a `role` implicite — pas besoin de `aria-label` supplémentaire.
+- Liste `<ul>` sémantique pour les features.
+- Le CTA est un `<Button>` natif, focusable.
+
+## Do / Don't
+
+✅ **Do**
+- Maximum 3-5 features par tier (sinon utiliser un tableau de comparaison séparé).
+- Mettre `highlighted` sur **un seul** tier.
+- Prix proéminent (`display-md`-like).
+
+❌ **Don't**
+- Pas plus de 4 tiers (surcharge cognitive).
+- Pas de prix barré sans contexte clair (utiliser `<Text strike>` dans le `price` si vraiment besoin).
diff --git a/docs/src/content/docs/components/slider.md b/docs/src/content/docs/components/slider.md
new file mode 100644
index 0000000..65ba105
--- /dev/null
+++ b/docs/src/content/docs/components/slider.md
@@ -0,0 +1,57 @@
+---
+title: Slider
+description: Sélecteur de valeur — single ou range, clavier complet, focus halo.
+---
+
+## API
+
+```tsx
+import { Slider } from "@managemate/react";
+
+// Single (volume, opacité, zoom)
+const [v, setV] = useState([62]);
+<Slider label="Volume" value={v} onValueChange={setV} min={0} max={100} step={1} />
+
+// Range (fourchette de prix)
+const [range, setRange] = useState([800, 2400]);
+<Slider label="Prix" value={range} onValueChange={setRange} min={0} max={5000} step={50} />
+```
+
+## Clavier
+
+| Touche | Action |
+|---|---|
+| `←` / `↓` | Décrémente d'un step |
+| `→` / `↑` | Incrémente d'un step |
+| `PgUp` / `PgDn` | ±10 × step |
+| `Home` / `End` | Min / Max |
+| `Tab` | Passe au thumb suivant (range) |
+
+## A11y
+
+- `role="slider"` + `aria-valuenow/min/max/text` natif Radix.
+- `aria-label` sur chaque thumb.
+- Focus halo accent visible.
+- Touch target ≥ 44 (thumb 18px + zone tactile invisible).
+
+## Affichage de la valeur
+
+Au-dessus du slider, en label-adjacent (toujours visible, pas tooltip qui disparaît) :
+
+```tsx
+<label style={{ display: "flex", justifyContent: "space-between" }}>
+  <span>Volume</span>
+  <span style={{ fontVariantNumeric: "tabular-nums" }}>{v[0]}%</span>
+</label>
+<Slider value={v} onValueChange={setV} label="Volume" />
+```
+
+## Do / Don't
+
+✅ **Do**
+- Toujours afficher la valeur courante quelque part (label, tooltip, hint).
+- `step` cohérent avec l'unité (price step=50, volume step=5, opacité step=0.05).
+
+❌ **Don't**
+- Pas de slider pour > 20 valeurs distinctes — préférer un Select numéroté.
+- Pas de slider pour des valeurs critiques sans confirmation (sliding peut déraper).
diff --git a/docs/src/content/docs/components/theme-picker.md b/docs/src/content/docs/components/theme-picker.md
new file mode 100644
index 0000000..93c4c92
--- /dev/null
+++ b/docs/src/content/docs/components/theme-picker.md
@@ -0,0 +1,70 @@
+---
+title: ThemePicker
+description: Sélecteur de couleur d'accent utilisateur.
+---
+
+## API
+
+```tsx
+import { ThemePicker, useAccent } from "@managemate/react";
+
+<ThemePicker legend="Couleur d'accent" hideReset={false} />
+
+// ou impératif
+const { accent, setAccent, reset } = useAccent();
+setAccent("blue");
+```
+
+| Prop | Type | Défaut |
+|---|---|---|
+| `legend` | `string` | `"Couleur d'accent"` |
+| `hideReset` | `boolean` | `false` |
+| `className` | `string` | — |
+
+## Pattern radiogroup
+
+- `role="radiogroup"` avec `aria-labelledby` sur la légende.
+- Chaque pastille : `role="radio"` + `aria-checked` + `aria-label` (nom du preset).
+- **Roving tabindex** : seul le preset actif est `tabIndex=0`, les autres `-1`.
+- Navigation clavier :
+  - `←/↑` preset précédent (wrap)
+  - `→/↓` preset suivant (wrap)
+  - `Home` premier preset
+  - `End` dernier preset
+- Sélection à `Espace` ou en navigant aux flèches (sélection automatique au focus, pattern Radix RadioGroup).
+
+## Persistance
+
+Le hook `useAccent` :
+- Lit `localStorage["mmg-accent"]` au mount.
+- Écrit à chaque changement.
+- Pose `[data-mmg-accent="<preset>"]` sur `<html>`.
+
+Pour éviter le flash au premier render (FOUC), inliner ce script dans `<head>` SSR :
+
+```html
+<script>
+(function () {
+  try {
+    var v = localStorage.getItem("mmg-accent");
+    if (v && v !== "synapse") document.documentElement.setAttribute("data-mmg-accent", v);
+  } catch (e) {}
+})();
+</script>
+```
+
+## Presets disponibles
+
+| Preset | Hex (light) | Usage suggéré |
+|---|---|---|
+| `synapse` (défaut) | `#D12B6A` | Corporate ManageMate |
+| `rose` | `#E11D48` | Variante rose plus vif |
+| `blue` | `#2563EB` | Banking / fintech |
+| `violet` | `#7C3AED` | Forge, créatif, AI |
+| `green` | `#0E9F6E` (700) | HRTime, environnemental |
+| `amber` | `#D97706` (600) | Orbit, attention positive |
+| `red` | `#DC2626` | Sites événementiels |
+| `cyan` | `#0891B2` (700) | Analytics |
+| `slate` | `#475569` (700) | Neutre haut contraste |
+
+Chaque preset est validé WCAG AA contre fonds light/dark + accent-on (texte sur CTA primary).
diff --git a/docs/src/content/docs/components/toast.md b/docs/src/content/docs/components/toast.md
new file mode 100644
index 0000000..611b006
--- /dev/null
+++ b/docs/src/content/docs/components/toast.md
@@ -0,0 +1,72 @@
+---
+title: Toast
+description: Notification temporaire empilable façon Sonner.
+---
+
+## API
+
+```tsx
+import { ToastProvider, useToast } from "@managemate/react";
+
+// 1. Provider à la racine
+<ToastProvider position="bottom-right" max={5} visibleCount={3} defaultDuration={5000}>
+  <App />
+</ToastProvider>
+
+// 2. Dans un composant
+function Save() {
+  const { toast, dismiss, clear } = useToast();
+  return (
+    <Button
+      onClick={() => toast({
+        title: "Modifications sauvegardées",
+        description: "3 collaborateurs mis à jour.",
+        severity: "success",
+        duration: 5000,
+        action: { label: "Annuler", onClick: () => undo() },
+      })}
+    >
+      Sauvegarder
+    </Button>
+  );
+}
+```
+
+## Comportement (Sonner-style)
+
+- **Au repos** : front-most pleine taille. Les autres empilés derrière avec `translateY` négatif et `scale` décroissant. 3 visibles max.
+- **Hover/focus** : la pile se déploie en colonne avec gap. Tous lisibles.
+- **Mouseleave/blur** : la pile se recolle.
+- **Pause des timers** au hover/focus, reprise au mouseleave.
+
+## Severity
+
+| Severity | Usage | Role ARIA |
+|---|---|---|
+| `info` | Information neutre | `status` (poli) |
+| `success` | Action réussie | `status` |
+| `warning` | Attention requise | `status` |
+| `danger` | Erreur, action échouée | `alert` (urgent) |
+
+## Position
+
+`bottom-right` (défaut), `bottom-left`, `top-right`, `top-left`.
+
+## Do / Don't
+
+✅ **Do**
+- 1-2 phrases max par toast.
+- `duration: 0` pour les erreurs critiques (l'utilisateur ferme).
+- Action `Annuler` pour les opérations réversibles.
+
+❌ **Don't**
+- Pas de toast pour signaler du contenu important hors écran — utiliser `<Alert>` inline.
+- Pas de toast `danger` empilé en spam — limiter via `max={5}`.
+
+## A11y
+
+- `aria-live="polite"` sur la region (annonce non-disruptive).
+- `aria-atomic="false"` — chaque toast s'annonce individuellement.
+- `role="alert"` pour danger (urgent), `role="status"` sinon.
+- Bouton fermer focusable, label "Fermer la notification".
+- Pause au focus → l'utilisateur peut lire à son rythme.
diff --git a/docs/src/content/docs/components/toggle-group.md b/docs/src/content/docs/components/toggle-group.md
new file mode 100644
index 0000000..2092b4b
--- /dev/null
+++ b/docs/src/content/docs/components/toggle-group.md
@@ -0,0 +1,67 @@
+---
+title: ToggleGroup
+description: Groupe de boutons toggle — single (radio) ou multiple (checkbox).
+---
+
+## API
+
+```tsx
+import { ToggleGroup } from "@managemate/react";
+
+// Single
+<ToggleGroup
+  type="single"
+  ariaLabel="Mode d'affichage"
+  value={view}
+  onValueChange={setView}
+  items={[
+    { value: "list", label: "Liste", icon: "menu-line" },
+    { value: "grid", label: "Grille", icon: "apps-2-line" },
+    { value: "kanban", label: "Kanban", icon: "stack-line" },
+  ]}
+/>
+
+// Multiple
+<ToggleGroup
+  type="multiple"
+  ariaLabel="Filtres statut"
+  value={filters}
+  onValueChange={setFilters}   // string[]
+  items={[
+    { value: "actif", label: "Actifs" },
+    { value: "absent", label: "Absents" },
+    { value: "conge", label: "En congé" },
+  ]}
+/>
+```
+
+## Variants
+
+- `variant="outline"` (défaut) — fond muted, item actif sur surface + halo.
+- `variant="solid"` — item actif passe en accent plein.
+
+## Sizes
+
+`sm` (28px), `md` (defaut), `lg` (40px).
+
+## A11y
+
+Wrapper Radix UI ToggleGroup :
+- `role="group"` + `aria-label`
+- Roving tabindex (Tab cycle entre groupes, flèches dans le groupe)
+- `aria-pressed` sur chaque item
+
+## Quand préférer Tabs / SegmentedControl / ToggleGroup
+
+| | ToggleGroup | Tabs | SegmentedControl |
+|---|---|---|---|
+| Multi-select possible | ✓ | — | — |
+| Switch de **panels** | — | ✓ | — |
+| Switch de **vue/mode** | ✓ | ✓ | ✓ |
+| Style "pill segmented" | ✓ | — | ✓ |
+| Style "underline tabs" | — | ✓ | — |
+
+Règle de pouce :
+- **Tabs** quand chaque option ouvre un panel de contenu différent.
+- **ToggleGroup multiple** quand on filtre une vue (filtres composables).
+- **SegmentedControl** = équivalent ToggleGroup single Apple HIG.
diff --git a/docs/src/content/docs/components/tooltip.md b/docs/src/content/docs/components/tooltip.md
new file mode 100644
index 0000000..080b34b
--- /dev/null
+++ b/docs/src/content/docs/components/tooltip.md
@@ -0,0 +1,76 @@
+---
+title: Tooltip
+description: Tooltip Radix UI — auto-flip, focus management, prefers-reduced-motion.
+---
+
+## Quand utiliser
+
+- Action courte (label d'un icon-only button : "Paramètres").
+- Information secondaire qui ne mérite pas de prendre de l'espace.
+
+**Ne PAS utiliser** pour :
+- Information critique → utiliser `<Alert>` ou texte visible.
+- Contenu interactif (boutons, liens) → `Tooltip` est non-interactive. Utiliser `<Popover>` ou `<HoverCard>`.
+
+## Setup
+
+`<TooltipProvider>` à mettre **une seule fois** à la racine de l'app. Sans Provider, le Tooltip ne s'ouvre pas.
+
+```tsx
+// app.tsx
+import { TooltipProvider } from "@managemate/react";
+
+<TooltipProvider>
+  <App />
+</TooltipProvider>
+```
+
+## API
+
+```tsx
+import { Tooltip, Button } from "@managemate/react";
+
+<Tooltip content="Paramètres" placement="bottom" delay={200}>
+  <Button variant="ghost" icon="settings-3-line" iconOnly aria-label="Paramètres" />
+</Tooltip>
+```
+
+| Prop | Type | Défaut | |
+|---|---|---|---|
+| `content` | `ReactNode` | — | Contenu affiché |
+| `placement` | `"top"|"bottom"|"left"|"right"` | `"top"` | Auto-flip si pas de place |
+| `delay` | `number` | `200` | Délai d'apparition (ms) |
+| `sideOffset` | `number` | `8` | Décalage par rapport à la cible |
+
+## A11y
+
+- Géré par Radix — `role="tooltip"`, focus management, escape, hover-bridge.
+- Apparaît au **hover** ET au **focus clavier**.
+- Esc ferme et restitue le focus à l'élément déclencheur.
+- Respecte `prefers-reduced-motion`.
+
+## Light vs Dark
+
+| Mode | Background | Texte |
+|---|---|---|
+| Light | `neutral-900` (très foncé) | `neutral-0` (blanc) |
+| Dark | `bg-raised` + bord subtil | `text-primary` |
+
+Le Tooltip ne se fond pas dans le bg-page sombre car il "pop" via élévation + bordure.
+
+## Usage avancé
+
+Pour des tooltips composés (avec image, multi-paragraphe), préférer `<HoverCard>`.
+
+Pour piloter l'ouverture manuellement :
+
+```tsx
+import { TooltipPrimitive } from "@managemate/react";
+
+<TooltipPrimitive.Root open={isOpen} onOpenChange={setOpen}>
+  <TooltipPrimitive.Trigger asChild>...</TooltipPrimitive.Trigger>
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content className="mmg-tooltip">...</TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
+</TooltipPrimitive.Root>
+```
diff --git a/e2e/README.md b/e2e/README.md
new file mode 100644
index 0000000..f363265
--- /dev/null
+++ b/e2e/README.md
@@ -0,0 +1,45 @@
+# Visual regression — Playwright
+
+## Local
+
+```sh
+pnpm install
+pnpm exec playwright install chromium    # première fois uniquement
+pnpm test:visual                          # lance les tests
+pnpm test:visual:update                   # met à jour le baseline
+pnpm test:visual:report                   # ouvre le rapport HTML
+```
+
+## CI
+
+Le workflow `.github/workflows/ci.yml` exécute les tests visuels sur
+chaque PR. Si un test échoue :
+
+1. Télécharger l'artifact `playwright-report` depuis l'action.
+2. Comparer screenshots actuels / baseline.
+3. **Régression réelle** → fix le composant.
+4. **Changement intentionnel** → bumper le baseline via PR :
+   ```sh
+   pnpm test:visual:update
+   git add e2e/__screenshots__
+   git commit -m "chore(visual): update baseline pour <comp>"
+   ```
+
+## Stratégie
+
+- Screenshots des **stories critiques** uniquement (cf. `e2e/visual.spec.ts`).
+- Light + Dark via projects Playwright.
+- Threshold strict (0.2) — toute différence visible casse la CI.
+- Baseline dans `e2e/__screenshots__/` versionné en git.
+- Animations désactivées pour éviter la flakiness.
+
+## Faux positifs courants
+
+- **Fonts non chargées** : Playwright attend `networkidle` mais Figtree
+  via Google Fonts peut être lent. Si flake, augmenter le timeout ou
+  embarquer la font en local.
+- **Anti-aliasing différent OS** : on teste en CI Linux (Chromium).
+  Les screenshots locaux Windows / macOS peuvent différer légèrement.
+  Toujours regen le baseline depuis CI.
+- **Date dynamique** : si une story affiche `new Date()`, mocker via
+  `page.clock` ou éviter dans la story (utiliser une date fixée).
diff --git a/e2e/visual.spec.ts b/e2e/visual.spec.ts
new file mode 100644
index 0000000..f204ef6
--- /dev/null
+++ b/e2e/visual.spec.ts
@@ -0,0 +1,64 @@
+import { test, expect } from "@playwright/test";
+
+/**
+ * Visual regression — DSMMG
+ *
+ * Screenshots les stories critiques en light + dark + 3 presets accent.
+ * Le baseline est dans `e2e/__screenshots__/` ; toute régression
+ * casse la CI. Pour mettre à jour le baseline (volontaire) :
+ *
+ *   pnpm exec playwright test --update-snapshots
+ */
+
+const STORIES = [
+  // Forms
+  "forms-button--primary",
+  "forms-button--all-variants",
+  "forms-slider--single",
+  "forms-toggle-group--single",
+  // Overlays
+  "overlays-tooltip--placements",
+  "overlays-dialog--default",
+  "overlays-sheet--right",
+  // Marketing
+  "marketing-pricingcard--trio",
+  "marketing-featurecard--colors",
+  // Profile
+  "profile-profileheader--default",
+  "profile-usercard--sizes",
+  // Data display
+  "data-display-metriccard--grid",
+  "data-display-avatar--sizes",
+  "data-display-avatar--status",
+  "data-display-badge--variants",
+  // Navigation
+  "navigation-tabs--default",
+  "navigation-pagination--default",
+  // Theming
+  "theming-themepicker--in-card",
+  // Tokens
+  "tokens-colors--accent",
+  "tokens-colors--semantic",
+];
+
+for (const id of STORIES) {
+  test(`story: ${id}`, async ({ page }) => {
+    await page.goto(`/iframe.html?id=${id}&viewMode=story`);
+    // Attend que le loader Storybook disparaisse
+    await page.waitForSelector("#storybook-root", { state: "attached" });
+    await page.waitForLoadState("networkidle");
+    // Snapshot du contenu de la story (pas du chrome Storybook)
+    const root = page.locator("#storybook-root");
+    await expect(root).toHaveScreenshot(`${id}.png`, {
+      animations: "disabled",
+    });
+  });
+}
+
+test.describe("Themes critical paths", () => {
+  test("Hero — light + dark", async ({ page }) => {
+    await page.goto("/iframe.html?id=tokens-colors--accent&viewMode=story");
+    await page.waitForLoadState("networkidle");
+    await expect(page.locator("#storybook-root")).toHaveScreenshot("hero-light.png");
+  });
+});
diff --git a/package.json b/package.json
index 935e73e..e40447b 100644
--- a/package.json
+++ b/package.json
@@ -25,12 +25,16 @@
     "version-packages": "changeset version",
     "release": "pnpm build && changeset publish",
     "migrate:tokens": "node scripts/migrate-tokens.mjs",
-    "lint:contrast": "node scripts/lint-contrast.mjs"
+    "lint:contrast": "node scripts/lint-contrast.mjs",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual:report": "playwright show-report"
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.11",
-    "size-limit": "^11.1.6",
-    "@size-limit/preset-small-lib": "^11.1.6"
+    "@playwright/test": "^1.49.1",
+    "@size-limit/preset-small-lib": "^11.1.6",
+    "size-limit": "^11.1.6"
   },
   "engines": {
     "node": ">=20",
diff --git a/packages/css/src/components/overlays.css b/packages/css/src/components/overlays.css
index db19790..eb9d492 100644
--- a/packages/css/src/components/overlays.css
+++ b/packages/css/src/components/overlays.css
@@ -10,15 +10,20 @@
    data-align : "start"/"center"/"end"
 ════════════════════════════════════════════════════════════════ */
 
-/* — Tooltip ——————————————————————————————————— */
+/* — Tooltip ———————————————————————————————————
+   Light : surface dark (neutral-900) + texte blanc → contraste max sur fond clair.
+   Dark  : surface bg-raised + bordure subtile + texte primary → "pop" au-dessus de bg-page.
+   Bug fixé : avant on utilisait text-primary comme bg + text-inverse comme
+   texte. En dark, text-primary devient quasi-blanc et text-inverse reste
+   blanc → blanc sur blanc, invisible. */
 .mmg-tooltip {
   z-index: var(--mmg-z-tooltip);
   padding: var(--mmg-space-2) var(--mmg-space-3);
   font-size: var(--mmg-font-size-xs);
   font-weight: var(--mmg-font-weight-medium);
   line-height: 1.4;
-  color: var(--mmg-color-text-inverse);
-  background: var(--mmg-color-text-primary);
+  color: var(--mmg-color-neutral-0);
+  background: var(--mmg-color-neutral-900);
   border-radius: var(--mmg-radius-sm);
   box-shadow: var(--mmg-shadow-2);
   user-select: none;
@@ -30,7 +35,28 @@
   animation: mmg-tooltip-out 100ms var(--mmg-ease-default);
 }
 .mmg-tooltip__arrow {
-  fill: var(--mmg-color-text-primary);
+  fill: var(--mmg-color-neutral-900);
+}
+
+/* Dark — surface élevée + bord subtil pour pop au-dessus de bg-page
+   (qui est #0B0D14, très proche de neutral-900). */
+[data-mmg-theme="dark"] .mmg-tooltip {
+  background: var(--mmg-color-gray-d-raised);
+  color: var(--mmg-color-text-primary);
+  border: 1px solid var(--mmg-color-border);
+}
+[data-mmg-theme="dark"] .mmg-tooltip__arrow {
+  fill: var(--mmg-color-gray-d-raised);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-mmg-theme="light"]) .mmg-tooltip {
+    background: var(--mmg-color-gray-d-raised);
+    color: var(--mmg-color-text-primary);
+    border: 1px solid var(--mmg-color-border);
+  }
+  :root:not([data-mmg-theme="light"]) .mmg-tooltip__arrow {
+    fill: var(--mmg-color-gray-d-raised);
+  }
 }
 @keyframes mmg-tooltip-in {
   from { opacity: 0; transform: scale(0.96); }
diff --git a/packages/react/src/Accordion.test.tsx b/packages/react/src/Accordion.test.tsx
new file mode 100644
index 0000000..565b7e6
--- /dev/null
+++ b/packages/react/src/Accordion.test.tsx
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { Accordion } from "./Accordion";
+
+describe("Accordion", () => {
+  it("est fermé par défaut", () => {
+    render(<Accordion label="Section">Contenu</Accordion>);
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("toggle au clic", async () => {
+    const user = userEvent.setup();
+    render(<Accordion label="Section">Contenu</Accordion>);
+    await user.click(screen.getByRole("button"));
+    expect(screen.getByRole("button")).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("toggle au clavier (Enter / Space)", async () => {
+    const user = userEvent.setup();
+    render(<Accordion label="Section">Contenu</Accordion>);
+    const btn = screen.getByRole("button");
+    btn.focus();
+    await user.keyboard("{Enter}");
+    expect(btn).toHaveAttribute("aria-expanded", "true");
+    await user.keyboard(" ");
+    expect(btn).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("aria-controls relié au panel", () => {
+    render(<Accordion label="x">y</Accordion>);
+    const id = screen.getByRole("button").getAttribute("aria-controls");
+    expect(document.getElementById(id!)).toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(<Accordion label="x">y</Accordion>);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Avatar.test.tsx b/packages/react/src/Avatar.test.tsx
new file mode 100644
index 0000000..088268e
--- /dev/null
+++ b/packages/react/src/Avatar.test.tsx
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { Avatar } from "./Avatar";
+
+describe("Avatar", () => {
+  it("rend les initiales", () => {
+    render(<Avatar initials="md" alt="Marie Dupont" />);
+    expect(screen.getByText("MD")).toBeInTheDocument();
+  });
+
+  it("limite à 2 caractères", () => {
+    render(<Avatar initials="abcdef" alt="x" />);
+    expect(screen.getByText("AB")).toBeInTheDocument();
+  });
+
+  it("rend une image quand src est fourni", () => {
+    render(<Avatar src="/avatar.png" alt="Marie" />);
+    const img = screen.getByRole("img", { name: "Marie" });
+    expect(img).toHaveAttribute("src", "/avatar.png");
+  });
+
+  it("expose un statut accessible", () => {
+    render(<Avatar initials="MD" alt="Marie" status="online" />);
+    expect(screen.getByLabelText("En ligne")).toBeInTheDocument();
+  });
+
+  it("génère une couleur stable depuis les initiales", () => {
+    const { container, rerender } = render(<Avatar initials="MD" alt="x" />);
+    const className1 = container.firstChild?.className ?? "";
+    rerender(<Avatar initials="MD" alt="x" />);
+    expect(container.firstChild?.className).toBe(className1);
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <>
+        <Avatar initials="MD" alt="Marie Dupont" status="online" />
+        <Avatar src="/x.png" alt="Jean Martin" status="busy" size="lg" />
+        <Avatar initials="SB" alt="Sophie Bernard" shape="square" />
+      </>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/AvatarGroup.test.tsx b/packages/react/src/AvatarGroup.test.tsx
new file mode 100644
index 0000000..34c09fe
--- /dev/null
+++ b/packages/react/src/AvatarGroup.test.tsx
@@ -0,0 +1,36 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { AvatarGroup } from "./AvatarGroup";
+
+describe("AvatarGroup", () => {
+  const data = [
+    { initials: "MD", alt: "Marie" },
+    { initials: "JM", alt: "Jean" },
+    { initials: "SB", alt: "Sophie" },
+    { initials: "TL", alt: "Thomas" },
+    { initials: "ER", alt: "Emma" },
+    { initials: "LB", alt: "Lohann" },
+  ];
+
+  it("limite l'affichage à max", () => {
+    render(<AvatarGroup avatars={data} max={3} />);
+    expect(screen.getByText("+3")).toBeInTheDocument();
+    expect(screen.getByLabelText(/3 autres/)).toBeInTheDocument();
+  });
+
+  it("respecte le total custom", () => {
+    render(<AvatarGroup avatars={data.slice(0, 3)} max={3} total={12} />);
+    expect(screen.getByText("+9")).toBeInTheDocument();
+  });
+
+  it("expose role group", () => {
+    render(<AvatarGroup avatars={data.slice(0, 2)} />);
+    expect(screen.getByRole("group")).toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(<AvatarGroup avatars={data} max={4} />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Badge.test.tsx b/packages/react/src/Badge.test.tsx
new file mode 100644
index 0000000..a212af9
--- /dev/null
+++ b/packages/react/src/Badge.test.tsx
@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { Badge } from "./Feedback";
+
+describe("Badge", () => {
+  it("rend les variants sans crash", () => {
+    const { container } = render(
+      <>
+        <Badge>Default</Badge>
+        <Badge variant="brand">Brand</Badge>
+        <Badge variant="success">Success</Badge>
+        <Badge variant="warning">Warning</Badge>
+        <Badge variant="danger">Danger</Badge>
+        <Badge variant="info">Info</Badge>
+      </>,
+    );
+    expect(container.querySelectorAll(".mmg-badge")).toHaveLength(6);
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <>
+        <Badge variant="brand">Nouveau</Badge>
+        <Badge variant="success">Actif</Badge>
+        <Badge variant="warning">En attente</Badge>
+        <Badge variant="danger">Erreur</Badge>
+      </>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/ConfirmDialog.test.tsx b/packages/react/src/ConfirmDialog.test.tsx
new file mode 100644
index 0000000..7dfdf48
--- /dev/null
+++ b/packages/react/src/ConfirmDialog.test.tsx
@@ -0,0 +1,54 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { ConfirmDialog } from "./ConfirmDialog";
+
+function Wrapped({ destructive }: { destructive?: boolean }) {
+  const [open, setOpen] = useState(false);
+  const [confirmed, setConfirmed] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <span data-testid="state">{confirmed ? "yes" : "no"}</span>
+      <ConfirmDialog
+        open={open}
+        onOpenChange={setOpen}
+        destructive={destructive}
+        title="Supprimer ?"
+        description="Action irréversible."
+        confirmLabel="Supprimer"
+        onConfirm={() => setConfirmed(true)}
+      />
+    </>
+  );
+}
+
+describe("ConfirmDialog", () => {
+  it("appelle onConfirm puis ferme", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped destructive />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("dialog");
+    await user.click(screen.getByRole("button", { name: "Supprimer" }));
+    expect(screen.getByTestId("state")).toHaveTextContent("yes");
+  });
+
+  it("Annuler ferme sans appeler onConfirm", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped destructive />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("dialog");
+    await user.click(screen.getByRole("button", { name: "Annuler" }));
+    expect(screen.getByTestId("state")).toHaveTextContent("no");
+  });
+
+  it("a11y axe-core (ouvert)", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Wrapped destructive />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("dialog");
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Drawer.test.tsx b/packages/react/src/Drawer.test.tsx
new file mode 100644
index 0000000..75ddf5e
--- /dev/null
+++ b/packages/react/src/Drawer.test.tsx
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { Drawer } from "./Drawer";
+
+function Wrapped() {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open</button>
+      <Drawer open={open} onClose={() => setOpen(false)} title="Filtres">
+        <p>Contenu drawer</p>
+      </Drawer>
+    </>
+  );
+}
+
+describe("Drawer", () => {
+  it("ouvre + Esc ferme", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped />);
+    await user.click(screen.getByText("Open"));
+    expect(await screen.findByRole("dialog")).toHaveAccessibleName("Filtres");
+    await user.keyboard("{Escape}");
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Wrapped />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("dialog");
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/FeatureCard.test.tsx b/packages/react/src/FeatureCard.test.tsx
new file mode 100644
index 0000000..a6e713e
--- /dev/null
+++ b/packages/react/src/FeatureCard.test.tsx
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { FeatureCard } from "./FeatureCard";
+
+describe("FeatureCard", () => {
+  it("rend titre + description + lien", () => {
+    render(
+      <FeatureCard
+        icon="rocket-2-fill"
+        title="Onboarding éclair"
+        description="Créez un user en 90s."
+        link={{ label: "Voir", href: "/x" }}
+      />,
+    );
+    expect(screen.getByText("Onboarding éclair")).toBeInTheDocument();
+    expect(screen.getByText("Créez un user en 90s.")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: /Voir/ })).toHaveAttribute("href", "/x");
+  });
+
+  it("variante glow ajoute la classe", () => {
+    const { container } = render(
+      <FeatureCard icon="rocket-2-fill" title="x" glowOnHover />,
+    );
+    expect(container.querySelector(".mmg-feature-card--glow")).toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <FeatureCard
+        icon="shield-check-fill"
+        iconColor="green"
+        title="RGPD by design"
+        description="Audit ANSSI."
+        link={{ label: "Notre politique", href: "#" }}
+        glowOnHover
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Menu.test.tsx b/packages/react/src/Menu.test.tsx
new file mode 100644
index 0000000..32ff7ea
--- /dev/null
+++ b/packages/react/src/Menu.test.tsx
@@ -0,0 +1,46 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { Menu } from "./Menu";
+
+const items = [
+  { label: "Modifier", icon: "edit-line" as const, onSelect: () => {} },
+  { label: "Dupliquer", icon: "file-copy-line" as const, onSelect: () => {} },
+  { type: "divider" } as const,
+  { label: "Supprimer", icon: "delete-bin-line" as const, danger: true, onSelect: () => {} },
+];
+
+describe("Menu", () => {
+  it("ouvre + flèches naviguent + Enter sélectionne", async () => {
+    const user = userEvent.setup();
+    let selected = "";
+    const items2 = [
+      { label: "A", onSelect: () => (selected = "A") },
+      { label: "B", onSelect: () => (selected = "B") },
+    ];
+    render(<Menu trigger={<button type="button">Open</button>} items={items2} />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("menu");
+    await user.keyboard("{ArrowDown}{ArrowDown}{Enter}");
+    expect(selected).toBe("B");
+  });
+
+  it("Escape ferme", async () => {
+    const user = userEvent.setup();
+    render(<Menu trigger={<button type="button">Open</button>} items={items} />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("menu");
+    await user.keyboard("{Escape}");
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByRole("menu")).not.toBeInTheDocument();
+  });
+
+  it("a11y axe-core (ouvert)", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Menu trigger={<button type="button">Open</button>} items={items} />);
+    await user.click(screen.getByText("Open"));
+    await screen.findByRole("menu");
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/MetricCard.test.tsx b/packages/react/src/MetricCard.test.tsx
new file mode 100644
index 0000000..f820fab
--- /dev/null
+++ b/packages/react/src/MetricCard.test.tsx
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { MetricCard } from "./MetricCard";
+
+describe("MetricCard", () => {
+  it("rend label + valeur", () => {
+    render(<MetricCard label="MRR" value="84 320 €" />);
+    expect(screen.getByText("MRR")).toBeInTheDocument();
+    expect(screen.getByText("84 320 €")).toBeInTheDocument();
+  });
+
+  it("affiche delta + period", () => {
+    render(
+      <MetricCard label="x" value="100" delta="+12.4%" period="vs M-1" trend="up" />,
+    );
+    expect(screen.getByText("+12.4%")).toBeInTheDocument();
+    expect(screen.getByText("vs M-1")).toBeInTheDocument();
+  });
+
+  it("invertTrend inverse la sémantique colorée", () => {
+    const { container, rerender } = render(
+      <MetricCard label="x" value="1" delta="+5%" trend="up" />,
+    );
+    const success1 = container.querySelector(".mmg-metric-card__delta--success");
+    expect(success1).not.toBeNull();
+    rerender(
+      <MetricCard label="x" value="1" delta="+5%" trend="up" invertTrend />,
+    );
+    const danger = container.querySelector(".mmg-metric-card__delta--danger");
+    expect(danger).not.toBeNull();
+  });
+
+  it("interactive si href", () => {
+    render(<MetricCard label="x" value="1" href="/m" />);
+    expect(screen.getByRole("link")).toHaveAttribute("href", "/m");
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <MetricCard
+        label="MRR"
+        value="84 320 €"
+        delta="+12.4%"
+        trend="up"
+        period="vs mois dernier"
+        icon="money-euro-circle-line"
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Pagination.test.tsx b/packages/react/src/Pagination.test.tsx
new file mode 100644
index 0000000..230a60f
--- /dev/null
+++ b/packages/react/src/Pagination.test.tsx
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { Pagination } from "./Pagination";
+
+function Wrapped() {
+  const [page, setPage] = useState(1);
+  return <Pagination page={page} pageCount={5} onChange={setPage} />;
+}
+
+describe("Pagination", () => {
+  it("page courante a aria-current=page", () => {
+    render(<Pagination page={3} pageCount={5} onChange={() => {}} />);
+    expect(screen.getByRole("button", { name: "3" })).toHaveAttribute("aria-current", "page");
+  });
+
+  it("clic sur une page change la valeur", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped />);
+    await user.click(screen.getByRole("button", { name: "3" }));
+    expect(screen.getByRole("button", { name: "3" })).toHaveAttribute("aria-current", "page");
+  });
+
+  it("précédent désactivé sur page 1", () => {
+    render(<Pagination page={1} pageCount={5} onChange={() => {}} />);
+    expect(screen.getByRole("button", { name: "Page précédente" })).toBeDisabled();
+  });
+
+  it("suivant désactivé sur dernière page", () => {
+    render(<Pagination page={5} pageCount={5} onChange={() => {}} />);
+    expect(screen.getByRole("button", { name: "Page suivante" })).toBeDisabled();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(<Wrapped />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Popover.test.tsx b/packages/react/src/Popover.test.tsx
new file mode 100644
index 0000000..746d3e2
--- /dev/null
+++ b/packages/react/src/Popover.test.tsx
@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { Popover } from "./Popover";
+
+describe("Popover", () => {
+  it("trigger ouvre + escape ferme", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover trigger={<button type="button">Open</button>}>
+        <p>Contenu</p>
+      </Popover>,
+    );
+    await user.click(screen.getByText("Open"));
+    expect(await screen.findByText("Contenu")).toBeInTheDocument();
+    await user.keyboard("{Escape}");
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByText("Contenu")).not.toBeInTheDocument();
+  });
+
+  it("a11y axe-core (fermé)", async () => {
+    const { container } = render(
+      <Popover trigger={<button type="button">Open</button>}>
+        <p>Contenu</p>
+      </Popover>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/PricingCard.test.tsx b/packages/react/src/PricingCard.test.tsx
new file mode 100644
index 0000000..a1cedda
--- /dev/null
+++ b/packages/react/src/PricingCard.test.tsx
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { PricingCard } from "./PricingCard";
+import { Button } from "./Button";
+
+const features = [
+  { label: "Jusqu'à 10 collaborateurs" },
+  { label: "Support 24/7" },
+  { label: "API & webhooks", included: false },
+];
+
+describe("PricingCard", () => {
+  it("rend nom + prix + features", () => {
+    render(
+      <PricingCard
+        name="Starter"
+        description="TPE"
+        price="9 €"
+        pricePeriod="/mois"
+        features={features}
+        cta={<Button>Choisir</Button>}
+      />,
+    );
+    expect(screen.getByText("Starter")).toBeInTheDocument();
+    expect(screen.getByText("9 €")).toBeInTheDocument();
+    expect(screen.getByText("/mois")).toBeInTheDocument();
+    expect(screen.getByText("API & webhooks")).toBeInTheDocument();
+  });
+
+  it("highlighted ajoute la classe", () => {
+    const { container } = render(
+      <PricingCard name="Pro" price="19 €" features={features} highlighted cta={<Button>x</Button>} />,
+    );
+    expect(container.querySelector(".mmg-pricing-card--highlighted")).toBeInTheDocument();
+  });
+
+  it("badge optionnel", () => {
+    render(
+      <PricingCard name="Pro" price="x" features={features} badge="Populaire" cta={<Button>x</Button>} />,
+    );
+    expect(screen.getByText("Populaire")).toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <PricingCard
+        name="Pro"
+        description="PME en croissance."
+        price="19 €"
+        pricePeriod="/utilisateur/mois"
+        highlighted
+        badge="Populaire"
+        features={features}
+        cta={<Button variant="primary" block>Choisir</Button>}
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/ProfileHeader.test.tsx b/packages/react/src/ProfileHeader.test.tsx
new file mode 100644
index 0000000..238cc63
--- /dev/null
+++ b/packages/react/src/ProfileHeader.test.tsx
@@ -0,0 +1,49 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { ProfileHeader } from "./ProfileHeader";
+
+describe("ProfileHeader", () => {
+  it("rend nom + sous-titre + bio", () => {
+    render(
+      <ProfileHeader
+        name="Marie Dupont"
+        subtitle="Lead Developer"
+        bio="Frontend depuis 2020."
+        initials="MD"
+      />,
+    );
+    expect(screen.getByText("Marie Dupont")).toBeInTheDocument();
+    expect(screen.getByText("Lead Developer")).toBeInTheDocument();
+    expect(screen.getByText("Frontend depuis 2020.")).toBeInTheDocument();
+  });
+
+  it("rend les stats", () => {
+    render(
+      <ProfileHeader
+        name="x"
+        initials="x"
+        stats={[
+          { label: "Commits", value: "184" },
+          { label: "Reviews", value: "23" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Commits")).toBeInTheDocument();
+    expect(screen.getByText("184")).toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <ProfileHeader
+        name="Marie Dupont"
+        subtitle="Lead Developer · Synapse"
+        bio="Frontend lead."
+        initials="MD"
+        status="online"
+        stats={[{ label: "Commits", value: "184" }]}
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Sheet.test.tsx b/packages/react/src/Sheet.test.tsx
new file mode 100644
index 0000000..c921ffc
--- /dev/null
+++ b/packages/react/src/Sheet.test.tsx
@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { Sheet } from "./Sheet";
+
+function Wrapped({ side }: { side?: "left" | "right" | "top" | "bottom" }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Ouvrir</button>
+      <Sheet open={open} onOpenChange={setOpen} side={side} title="Édition" description="Modifier l'utilisateur">
+        <p>Contenu</p>
+      </Sheet>
+    </>
+  );
+}
+
+describe("Sheet", () => {
+  it("est fermé par défaut", () => {
+    render(<Wrapped />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("s'ouvre via le trigger", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped />);
+    await user.click(screen.getByText("Ouvrir"));
+    expect(await screen.findByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("a un titre lié via aria-labelledby (Radix)", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped />);
+    await user.click(screen.getByText("Ouvrir"));
+    const dialog = await screen.findByRole("dialog");
+    expect(dialog).toHaveAccessibleName("Édition");
+  });
+
+  it("se ferme avec Escape", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped />);
+    await user.click(screen.getByText("Ouvrir"));
+    await screen.findByRole("dialog");
+    await user.keyboard("{Escape}");
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("a11y axe-core (ouvert)", async () => {
+    const user = userEvent.setup();
+    const { container } = render(<Wrapped />);
+    await user.click(screen.getByText("Ouvrir"));
+    await screen.findByRole("dialog");
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Slider.test.tsx b/packages/react/src/Slider.test.tsx
new file mode 100644
index 0000000..220ca2a
--- /dev/null
+++ b/packages/react/src/Slider.test.tsx
@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { Slider } from "./Slider";
+
+function Single() {
+  const [v, setV] = useState([50]);
+  return <Slider label="Volume" value={v} onValueChange={setV} />;
+}
+function Range() {
+  const [v, setV] = useState([20, 80]);
+  return <Slider label="Range" value={v} onValueChange={setV} />;
+}
+
+describe("Slider", () => {
+  it("expose un thumb avec aria-valuenow", () => {
+    render(<Single />);
+    const slider = screen.getByRole("slider");
+    expect(slider).toHaveAttribute("aria-valuenow", "50");
+  });
+
+  it("range expose 2 thumbs", () => {
+    render(<Range />);
+    expect(screen.getAllByRole("slider")).toHaveLength(2);
+  });
+
+  it("flèche droite incrémente", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+    const slider = screen.getByRole("slider");
+    slider.focus();
+    await user.keyboard("{ArrowRight}");
+    expect(slider).toHaveAttribute("aria-valuenow", "51");
+  });
+
+  it("Home / End naviguent aux extrêmes", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+    screen.getByRole("slider").focus();
+    await user.keyboard("{End}");
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "100");
+    await user.keyboard("{Home}");
+    expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "0");
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(<Single />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Switch.test.tsx b/packages/react/src/Switch.test.tsx
new file mode 100644
index 0000000..51f1c31
--- /dev/null
+++ b/packages/react/src/Switch.test.tsx
@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { Switch } from "./Form";
+
+describe("Switch", () => {
+  it("rend en checkbox-like", () => {
+    render(<Switch label="Notifications" />);
+    expect(screen.getByRole("checkbox", { name: "Notifications" })).toBeInTheDocument();
+  });
+
+  it("toggle au clavier (Space)", async () => {
+    const user = userEvent.setup();
+    render(<Switch label="x" />);
+    const sw = screen.getByRole("checkbox");
+    sw.focus();
+    await user.keyboard(" ");
+    expect(sw).toBeChecked();
+  });
+
+  it("respecte defaultChecked", () => {
+    render(<Switch label="x" defaultChecked />);
+    expect(screen.getByRole("checkbox")).toBeChecked();
+  });
+
+  it("disabled empêche les clicks", async () => {
+    const user = userEvent.setup();
+    render(<Switch label="x" disabled />);
+    await user.click(screen.getByRole("checkbox"));
+    expect(screen.getByRole("checkbox")).not.toBeChecked();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <>
+        <Switch label="Notifications" />
+        <Switch label="Marketing" defaultChecked />
+        <Switch label="Désactivé" disabled />
+      </>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Tabs.test.tsx b/packages/react/src/Tabs.test.tsx
new file mode 100644
index 0000000..3461c28
--- /dev/null
+++ b/packages/react/src/Tabs.test.tsx
@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { Tabs } from "./Tabs";
+
+function Wrapped() {
+  const [v, setV] = useState("a");
+  return (
+    <Tabs
+      value={v}
+      onChange={setV}
+      items={[
+        { id: "a", label: "Aperçu" },
+        { id: "b", label: "Détails" },
+        { id: "c", label: "Données" },
+      ]}
+    />
+  );
+}
+
+describe("Tabs", () => {
+  it("expose role tablist + tabs", () => {
+    render(<Wrapped />);
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    expect(screen.getAllByRole("tab")).toHaveLength(3);
+  });
+
+  it("clic sur un tab le sélectionne", async () => {
+    const user = userEvent.setup();
+    render(<Wrapped />);
+    await user.click(screen.getByRole("tab", { name: "Détails" }));
+    expect(screen.getByRole("tab", { name: "Détails" })).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(<Wrapped />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Text.test.tsx b/packages/react/src/Text.test.tsx
new file mode 100644
index 0000000..e6ba940
--- /dev/null
+++ b/packages/react/src/Text.test.tsx
@@ -0,0 +1,60 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { Text, Display, Eyebrow, Lead } from "./Text";
+
+describe("Text", () => {
+  it("rend en h1 par défaut pour display", () => {
+    const { container } = render(<Text variant="display-xl">Hero</Text>);
+    expect(container.querySelector("h1")).toBeInTheDocument();
+  });
+
+  it("rend en p pour lead", () => {
+    const { container } = render(<Text variant="lead">Lead</Text>);
+    expect(container.querySelector("p")).toBeInTheDocument();
+  });
+
+  it("respecte la prop as", () => {
+    const { container } = render(<Text variant="h1" as="h2">Section</Text>);
+    expect(container.querySelector("h2")).toBeInTheDocument();
+    expect(container.querySelector("h1")).not.toBeInTheDocument();
+  });
+
+  it("applique les modificateurs en classes", () => {
+    const { container } = render(
+      <Text variant="body" italic emphasis highlight>x</Text>,
+    );
+    const el = container.firstChild as HTMLElement;
+    expect(el.className).toContain("mmg-text--italic");
+    expect(el.className).toContain("mmg-text--emphasis");
+    expect(el.className).toContain("mmg-text--highlight");
+  });
+
+  it("helpers Display / Eyebrow / Lead", () => {
+    render(
+      <>
+        <Eyebrow>SIRH</Eyebrow>
+        <Display size="xl">Hero</Display>
+        <Lead>Sub</Lead>
+      </>,
+    );
+    expect(screen.getByText("SIRH")).toBeInTheDocument();
+    expect(screen.getByText("Hero")).toBeInTheDocument();
+    expect(screen.getByText("Sub")).toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <article>
+        <Eyebrow>SIRH</Eyebrow>
+        <Display size="xl">Le temps de vos équipes</Display>
+        <Lead>Plannings, congés, paie. Une plateforme.</Lead>
+        <Text>
+          Body normal avec <Text as="em" italic>terme étranger</Text> et{" "}
+          <Text as="strong" emphasis>mot-clef</Text>.
+        </Text>
+      </article>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Toast.test.tsx b/packages/react/src/Toast.test.tsx
new file mode 100644
index 0000000..21fde6c
--- /dev/null
+++ b/packages/react/src/Toast.test.tsx
@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { ToastProvider, useToast } from "./Toast";
+
+function Trigger() {
+  const { toast } = useToast();
+  return (
+    <button
+      onClick={() =>
+        toast({ title: "Sauvegardé", description: "Modifs OK.", severity: "success" })
+      }
+    >
+      Trigger
+    </button>
+  );
+}
+
+describe("Toast", () => {
+  it("affiche un toast au trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <Trigger />
+      </ToastProvider>,
+    );
+    await user.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Sauvegardé")).toBeInTheDocument();
+  });
+
+  it("danger severity → role=alert", async () => {
+    const user = userEvent.setup();
+    function T() {
+      const { toast } = useToast();
+      return (
+        <button onClick={() => toast({ title: "Erreur", severity: "danger" })}>x</button>
+      );
+    }
+    render(
+      <ToastProvider>
+        <T />
+      </ToastProvider>,
+    );
+    await user.click(screen.getByText("x"));
+    expect(await screen.findByRole("alert")).toBeInTheDocument();
+  });
+
+  it("close button dismisse", async () => {
+    const user = userEvent.setup();
+    render(
+      <ToastProvider>
+        <Trigger />
+      </ToastProvider>,
+    );
+    await user.click(screen.getByText("Trigger"));
+    await screen.findByText("Sauvegardé");
+    await user.click(screen.getByLabelText("Fermer la notification"));
+    await new Promise((r) => setTimeout(r, 0));
+    expect(screen.queryByText("Sauvegardé")).not.toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <ToastProvider>
+        <Trigger />
+      </ToastProvider>,
+    );
+    await user.click(screen.getByText("Trigger"));
+    await screen.findByText("Sauvegardé");
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/ToggleGroup.test.tsx b/packages/react/src/ToggleGroup.test.tsx
new file mode 100644
index 0000000..bad3a36
--- /dev/null
+++ b/packages/react/src/ToggleGroup.test.tsx
@@ -0,0 +1,50 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { useState } from "react";
+import { ToggleGroup } from "./ToggleGroup";
+
+const ITEMS = [
+  { value: "list", label: "Liste" },
+  { value: "grid", label: "Grille" },
+  { value: "kanban", label: "Kanban" },
+];
+
+function Single() {
+  const [v, setV] = useState<string | undefined>("list");
+  return (
+    <ToggleGroup type="single" value={v} onValueChange={setV} ariaLabel="Vue" items={ITEMS} />
+  );
+}
+function Multiple() {
+  const [v, setV] = useState<string[]>(["list", "grid"]);
+  return (
+    <ToggleGroup type="multiple" value={v} onValueChange={setV} ariaLabel="Filtres" items={ITEMS} />
+  );
+}
+
+describe("ToggleGroup", () => {
+  it("rend tous les items en single", () => {
+    render(<Single />);
+    expect(screen.getAllByRole("radio")).toHaveLength(3);
+  });
+
+  it("clic toggle l'item en single", async () => {
+    const user = userEvent.setup();
+    render(<Single />);
+    await user.click(screen.getByRole("radio", { name: "Grille" }));
+    expect(screen.getByRole("radio", { name: "Grille" })).toHaveAttribute("data-state", "on");
+  });
+
+  it("rend en mode multiple plusieurs actifs", () => {
+    render(<Multiple />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons.filter((b) => b.getAttribute("data-state") === "on")).toHaveLength(2);
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(<Single />);
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/Tooltip.test.tsx b/packages/react/src/Tooltip.test.tsx
new file mode 100644
index 0000000..37f0d56
--- /dev/null
+++ b/packages/react/src/Tooltip.test.tsx
@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { Tooltip, TooltipProvider } from "./Tooltip";
+
+const wrap = (ui: React.ReactNode) => render(<TooltipProvider>{ui}</TooltipProvider>);
+
+describe("Tooltip", () => {
+  it("affiche au hover", async () => {
+    const user = userEvent.setup();
+    wrap(
+      <Tooltip content="Action sécurisée">
+        <button type="button">Hover me</button>
+      </Tooltip>,
+    );
+    await user.hover(screen.getByRole("button"));
+    expect(await screen.findByRole("tooltip")).toHaveTextContent("Action sécurisée");
+  });
+
+  it("affiche au focus clavier", async () => {
+    const user = userEvent.setup();
+    wrap(
+      <Tooltip content="Tip">
+        <button type="button">Focus me</button>
+      </Tooltip>,
+    );
+    await user.tab();
+    expect(await screen.findByRole("tooltip")).toBeInTheDocument();
+  });
+
+  it("se ferme avec Escape", async () => {
+    const user = userEvent.setup();
+    wrap(
+      <Tooltip content="Tip" delay={0}>
+        <button type="button">x</button>
+      </Tooltip>,
+    );
+    await user.hover(screen.getByRole("button"));
+    await screen.findByRole("tooltip");
+    await user.keyboard("{Escape}");
+    // Radix removes role=tooltip after escape
+    await new Promise((r) => setTimeout(r, 50));
+    expect(screen.queryByRole("tooltip")).not.toBeInTheDocument();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = wrap(
+      <Tooltip content="Tip">
+        <button type="button">x</button>
+      </Tooltip>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/packages/react/src/UserCard.test.tsx b/packages/react/src/UserCard.test.tsx
new file mode 100644
index 0000000..a9e5881
--- /dev/null
+++ b/packages/react/src/UserCard.test.tsx
@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "vitest-axe";
+import { UserCard } from "./UserCard";
+
+describe("UserCard", () => {
+  it("rend nom + role", () => {
+    render(<UserCard name="Marie Dupont" role="Lead Dev" />);
+    expect(screen.getByText("Marie Dupont")).toBeInTheDocument();
+    expect(screen.getByText("Lead Dev")).toBeInTheDocument();
+  });
+
+  it("génère les initiales auto depuis le nom", () => {
+    render(<UserCard name="Marie Dupont" role="Lead" />);
+    expect(screen.getByText("MD")).toBeInTheDocument();
+  });
+
+  it("rend en lien si href fourni", () => {
+    render(<UserCard name="x" role="x" href="/profile/1" />);
+    expect(screen.getByRole("link")).toHaveAttribute("href", "/profile/1");
+  });
+
+  it("rend en bouton si onClick fourni", async () => {
+    const user = userEvent.setup();
+    let clicks = 0;
+    render(<UserCard name="x" role="x" onClick={() => clicks++} />);
+    await user.click(screen.getByRole("button"));
+    expect(clicks).toBe(1);
+  });
+
+  it("focusable au clavier en mode interactif", async () => {
+    const user = userEvent.setup();
+    render(<UserCard name="x" role="x" href="#" />);
+    await user.tab();
+    expect(screen.getByRole("link")).toHaveFocus();
+  });
+
+  it("a11y axe-core", async () => {
+    const { container } = render(
+      <UserCard
+        name="Marie Dupont"
+        role="Lead Developer"
+        initials="MD"
+        status="online"
+        meta="marie@test.fr"
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+  });
+});
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 0000000..c8aceed
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,55 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * DSMMG — Playwright config (visual regression sur Storybook).
+ *
+ * Stratégie : on build Storybook en static, on le sert localement,
+ * on prend des screenshots des stories critiques (light + dark) et
+ * on compare au baseline. Les régressions visuelles cassent la CI.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 2 : undefined,
+  reporter: process.env.CI ? [["html", { open: "never" }], ["github"]] : "list",
+  timeout: 30_000,
+  expect: {
+    /**
+     * Threshold de différence visuelle. 0.2 = très strict (pixel-near).
+     * Ajuster si flakiness sur le rendu des fonts.
+     */
+    toHaveScreenshot: {
+      threshold: 0.2,
+      maxDiffPixelRatio: 0.005,
+      animations: "disabled",
+      caret: "hide",
+    },
+  },
+  use: {
+    baseURL: "http://localhost:6006",
+    trace: "on-first-retry",
+    video: "retain-on-failure",
+    screenshot: "only-on-failure",
+    viewport: { width: 1280, height: 800 },
+    colorScheme: "light",
+  },
+  projects: [
+    {
+      name: "chromium-light",
+      use: { ...devices["Desktop Chrome"], colorScheme: "light" },
+    },
+    {
+      name: "chromium-dark",
+      use: { ...devices["Desktop Chrome"], colorScheme: "dark" },
+    },
+    // Ajouter Firefox / WebKit en CI quand le baseline sera stable
+  ],
+  webServer: {
+    command: "pnpm --filter storybook build && pnpm --filter storybook preview",
+    url: "http://localhost:6006",
+    reuseExistingServer: !process.env.CI,
+    timeout: 180_000,
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d5ba35..66308e0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@changesets/cli':
         specifier: ^2.27.11
         version: 2.31.0(@types/node@24.12.2)
+      '@playwright/test':
+        specifier: ^1.49.1
+        version: 1.59.1
       '@size-limit/preset-small-lib':
         specifier: ^11.1.6
         version: 11.2.0(size-limit@11.2.0)
@@ -1470,6 +1473,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.59.1':
+    resolution: {integrity: sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@radix-ui/number@1.1.1':
     resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
 
@@ -3321,6 +3329,11 @@ packages:
     resolution: {integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==}
     engines: {node: '>=6 <7 || >=8'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -4301,6 +4314,16 @@ packages:
   pkg-types@1.3.1:
     resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
+  playwright-core@1.59.1:
+    resolution: {integrity: sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  playwright@1.59.1:
+    resolution: {integrity: sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   polished@4.3.1:
     resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==}
     engines: {node: '>=10'}
@@ -6816,6 +6839,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.59.1':
+    dependencies:
+      playwright: 1.59.1
+
   '@radix-ui/number@1.1.1': {}
 
   '@radix-ui/primitive@1.1.3': {}
@@ -8844,6 +8871,9 @@ snapshots:
       jsonfile: 4.0.0
       universalify: 0.1.2
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -10212,6 +10242,14 @@ snapshots:
       mlly: 1.8.2
       pathe: 2.0.3
 
+  playwright-core@1.59.1: {}
+
+  playwright@1.59.1:
+    dependencies:
+      playwright-core: 1.59.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   polished@4.3.1:
     dependencies:
       '@babel/runtime': 7.29.2
diff --git a/storybook/stories/Accordion.stories.tsx b/storybook/stories/Accordion.stories.tsx
new file mode 100644
index 0000000..f3c6983
--- /dev/null
+++ b/storybook/stories/Accordion.stories.tsx
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion, Stack } from "@managemate/react";
+
+const meta = {
+  title: "Disclosure/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Stack>
+      <Accordion label="Combien coûte un abonnement Pro ?">
+        19 €/utilisateur/mois engagement annuel. 21 €/mois sans engagement.
+      </Accordion>
+      <Accordion label="Puis-je migrer depuis mon outil actuel ?">
+        Oui, depuis Sage, Cegid, ADP, Lucca ou via fichier CSV. Compter 7 jours.
+      </Accordion>
+      <Accordion label="Êtes-vous conformes RGPD ?" defaultOpen>
+        Hébergement France, chiffrement AES-256, audit ANSSI annuel. Détails sur notre page sécurité.
+      </Accordion>
+    </Stack>
+  ),
+};
diff --git a/storybook/stories/Avatar.stories.tsx b/storybook/stories/Avatar.stories.tsx
new file mode 100644
index 0000000..8b3e277
--- /dev/null
+++ b/storybook/stories/Avatar.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarGroup } from "@managemate/react";
+
+const meta = {
+  title: "Data display/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Initials: Story = { args: { initials: "MD", alt: "Marie Dupont" } };
+export const Image: Story = { args: { src: "https://i.pravatar.cc/96?u=md", alt: "Marie" } };
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
+      <Avatar initials="XS" alt="x" size="xs" />
+      <Avatar initials="SM" alt="x" size="sm" />
+      <Avatar initials="MD" alt="x" size="md" />
+      <Avatar initials="LG" alt="x" size="lg" />
+      <Avatar initials="XL" alt="x" size="xl" />
+      <Avatar initials="2X" alt="x" size="2xl" />
+    </div>
+  ),
+};
+export const Status: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 16 }}>
+      <Avatar initials="MD" alt="online" status="online" size="lg" />
+      <Avatar initials="JM" alt="away" status="away" size="lg" />
+      <Avatar initials="SB" alt="busy" status="busy" size="lg" />
+      <Avatar initials="TL" alt="offline" status="offline" size="lg" />
+    </div>
+  ),
+};
+export const Square: Story = { args: { initials: "MD", alt: "x", shape: "square", size: "lg" } };
+
+export const Group: Story = {
+  render: () => (
+    <AvatarGroup
+      avatars={[
+        { initials: "MD", alt: "Marie" },
+        { initials: "JM", alt: "Jean" },
+        { initials: "SB", alt: "Sophie" },
+        { initials: "TL", alt: "Thomas" },
+        { initials: "ER", alt: "Emma" },
+      ]}
+      max={4}
+    />
+  ),
+};
diff --git a/storybook/stories/Badge.stories.tsx b/storybook/stories/Badge.stories.tsx
new file mode 100644
index 0000000..3a167fa
--- /dev/null
+++ b/storybook/stories/Badge.stories.tsx
@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge, Icon } from "@managemate/react";
+
+const meta = {
+  title: "Data display/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Variants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <Badge>Default</Badge>
+      <Badge variant="brand">Brand</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="danger">Danger</Badge>
+      <Badge variant="info">Info</Badge>
+      <Badge variant="solid">Solid</Badge>
+    </div>
+  ),
+};
+
+export const WithDot: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <span className="mmg-badge mmg-badge--success">
+        <span className="mmg-badge__dot mmg-badge__dot--pulse" />
+        En ligne
+      </span>
+      <span className="mmg-badge mmg-badge--warning">
+        <span className="mmg-badge__dot" />
+        En attente
+      </span>
+      <span className="mmg-badge mmg-badge--danger">
+        <span className="mmg-badge__dot" />
+        Erreur
+      </span>
+    </div>
+  ),
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8 }}>
+      <Badge variant="brand"><Icon name="star-fill" size="xs" /> Nouveau</Badge>
+      <Badge variant="success"><Icon name="checkbox-circle-fill" size="xs" /> Actif</Badge>
+    </div>
+  ),
+};
diff --git a/storybook/stories/FeatureCard.stories.tsx b/storybook/stories/FeatureCard.stories.tsx
new file mode 100644
index 0000000..9135697
--- /dev/null
+++ b/storybook/stories/FeatureCard.stories.tsx
@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FeatureCard } from "@managemate/react";
+
+const meta = {
+  title: "Marketing/FeatureCard",
+  component: FeatureCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof FeatureCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: "rocket-2-fill",
+    iconColor: "brand",
+    title: "Onboarding éclair",
+    description: "Créez un collaborateur, attribuez ses accès, déclenchez son premier cycle de paie en moins de 90 secondes.",
+    link: { label: "Voir le workflow", href: "#" },
+  },
+};
+
+export const WithGlow: Story = {
+  args: { ...(Default.args as object), glowOnHover: true },
+};
+
+export const Colors: Story = {
+  render: () => (
+    <div className="mmg-grid mmg-grid--gap-md">
+      <div className="mmg-col-4"><FeatureCard icon="rocket-2-fill"   iconColor="brand"  title="Brand"  description="Accent rose Synapse." glowOnHover /></div>
+      <div className="mmg-col-4"><FeatureCard icon="shield-check-fill" iconColor="green" title="Green"  description="Sécurité, RGPD."     glowOnHover /></div>
+      <div className="mmg-col-4"><FeatureCard icon="line-chart-fill"   iconColor="violet" title="Violet" description="Analytics."          glowOnHover /></div>
+      <div className="mmg-col-4"><FeatureCard icon="bank-card-fill"    iconColor="blue"   title="Blue"   description="Finance."            /></div>
+      <div className="mmg-col-4"><FeatureCard icon="alert-fill"        iconColor="amber"  title="Amber"  description="Alertes."            /></div>
+      <div className="mmg-col-4"><FeatureCard icon="settings-3-fill"   iconColor="neutral" title="Neutral" description="Configuration."   /></div>
+    </div>
+  ),
+};
diff --git a/storybook/stories/HoverCard.stories.tsx b/storybook/stories/HoverCard.stories.tsx
new file mode 100644
index 0000000..1295c2f
--- /dev/null
+++ b/storybook/stories/HoverCard.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HoverCard, Avatar, Badge, Inline } from "@managemate/react";
+
+const meta = {
+  title: "Overlays/HoverCard",
+  component: HoverCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof HoverCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Profile: Story = {
+  render: () => (
+    <HoverCard
+      trigger={
+        <a href="#" style={{ color: "var(--mmg-color-accent)", fontWeight: 600 }}>
+          @marie.dupont
+        </a>
+      }
+    >
+      <Inline gap="md">
+        <Avatar initials="MD" alt="Marie" size="lg" />
+        <div>
+          <div style={{ fontWeight: 700 }}>Marie Dupont</div>
+          <div style={{ color: "var(--mmg-color-text-tertiary)", fontSize: "var(--mmg-font-size-sm)" }}>Lead Dev · Synapse</div>
+          <div style={{ marginTop: 8, fontSize: "var(--mmg-font-size-sm)" }}>
+            Lead frontend, mainteneuse du DSMMG.
+          </div>
+        </div>
+      </Inline>
+    </HoverCard>
+  ),
+};
+
+export const Badge_: Story = {
+  name: "Badge metadata",
+  render: () => (
+    <HoverCard trigger={<Badge variant="brand">Synapse v4.2.1</Badge>}>
+      <div style={{ fontWeight: 700, marginBottom: 4 }}>Synapse v4.2.1</div>
+      <div style={{ color: "var(--mmg-color-text-tertiary)", fontSize: "var(--mmg-font-size-sm)" }}>Sortie le 24 avril 2026</div>
+    </HoverCard>
+  ),
+};
diff --git a/storybook/stories/Menu.stories.tsx b/storybook/stories/Menu.stories.tsx
new file mode 100644
index 0000000..88774ee
--- /dev/null
+++ b/storybook/stories/Menu.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Menu, ContextMenu, Button } from "@managemate/react";
+
+const meta = {
+  title: "Overlays/Menu",
+  component: Menu,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Menu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { label: "Voir le détail", icon: "eye-line" as const, shortcut: "↵" },
+  { label: "Modifier", icon: "edit-line" as const, shortcut: "E" },
+  { label: "Dupliquer", icon: "file-copy-line" as const, shortcut: "⌘D" },
+  { type: "divider" } as const,
+  { type: "label", label: "Visibilité" } as const,
+  { label: "Partager", icon: "share-line" as const },
+  { label: "Archiver", icon: "inbox-line" as const },
+  { type: "divider" } as const,
+  { label: "Supprimer", icon: "delete-bin-line" as const, danger: true, shortcut: "⌫" },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Menu trigger={<Button variant="tertiary" icon="more-2-line">Actions</Button>} items={items} />
+  ),
+};
+
+export const Context: Story = {
+  name: "ContextMenu — clic droit",
+  render: () => (
+    <ContextMenu items={items}>
+      <div style={{
+        display: "grid", placeItems: "center", height: 140,
+        border: "2px dashed var(--mmg-color-border)", borderRadius: "var(--mmg-radius-md)",
+        color: "var(--mmg-color-text-tertiary)", cursor: "context-menu",
+      }}>
+        Clic droit ici
+      </div>
+    </ContextMenu>
+  ),
+};
diff --git a/storybook/stories/MetricCard.stories.tsx b/storybook/stories/MetricCard.stories.tsx
new file mode 100644
index 0000000..11488a7
--- /dev/null
+++ b/storybook/stories/MetricCard.stories.tsx
@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MetricCard, Sparkline } from "@managemate/react";
+
+const meta = {
+  title: "Data display/MetricCard",
+  component: MetricCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MetricCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: "MRR", value: "84 320 €", delta: "+12.4%", trend: "up", period: "vs M-1", icon: "money-euro-circle-line" },
+};
+
+export const TrendDown: Story = {
+  args: { label: "Tickets ouverts", value: "32", delta: "-18%", trend: "down", invertTrend: true, period: "cette semaine", icon: "error-warning-line" },
+};
+
+export const Flat: Story = {
+  args: { label: "NPS", value: "62", delta: "0", trend: "flat", period: "stable", icon: "star-line" },
+};
+
+export const WithSparkline: Story = {
+  args: {
+    label: "Sessions",
+    value: "12 480",
+    delta: "+8.2%",
+    trend: "up",
+    period: "30 derniers jours",
+    icon: "line-chart-line",
+    sparkline: <Sparkline data={[20, 28, 25, 32, 30, 38, 42, 48]} width={200} height={48} />,
+  },
+};
+
+export const Grid: Story = {
+  render: () => (
+    <div className="mmg-grid mmg-grid--gap-md">
+      <div className="mmg-col-3"><MetricCard label="MRR" value="84 320 €" delta="+12.4%" trend="up" icon="money-euro-circle-line" /></div>
+      <div className="mmg-col-3"><MetricCard label="Churn" value="2.3%" delta="+0.4 pts" trend="up" invertTrend icon="arrow-go-back-line" /></div>
+      <div className="mmg-col-3"><MetricCard label="NPS" value="62" delta="+4 pts" trend="up" icon="star-line" /></div>
+      <div className="mmg-col-3"><MetricCard label="Tickets" value="32" delta="-18%" trend="down" invertTrend icon="error-warning-line" /></div>
+    </div>
+  ),
+};
diff --git a/storybook/stories/Pagination.stories.tsx b/storybook/stories/Pagination.stories.tsx
new file mode 100644
index 0000000..827b428
--- /dev/null
+++ b/storybook/stories/Pagination.stories.tsx
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Pagination } from "@managemate/react";
+
+const meta = {
+  title: "Navigation/Pagination",
+  component: Pagination,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [page, setPage] = useState(3);
+    return <Pagination page={page} pageCount={10} onChange={setPage} />;
+  },
+};
diff --git a/storybook/stories/PricingCard.stories.tsx b/storybook/stories/PricingCard.stories.tsx
new file mode 100644
index 0000000..a9eb2fd
--- /dev/null
+++ b/storybook/stories/PricingCard.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PricingCard, Button } from "@managemate/react";
+
+const meta = {
+  title: "Marketing/PricingCard",
+  component: PricingCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof PricingCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const features = [
+  { label: "Jusqu'à 10 collaborateurs" },
+  { label: "Gestion congés" },
+  { label: "Bulletins simplifiés" },
+  { label: "Support email" },
+  { label: "API & webhooks", included: false },
+  { label: "SSO", included: false },
+];
+
+export const Default: Story = {
+  args: {
+    name: "Starter",
+    description: "Pour les TPE qui démarrent.",
+    price: "9 €",
+    pricePeriod: "/utilisateur/mois",
+    features,
+    cta: <Button variant="tertiary" block>Démarrer l'essai</Button>,
+  },
+};
+
+export const Highlighted: Story = {
+  args: {
+    name: "Pro",
+    description: "Pour les PME en croissance.",
+    price: "19 €",
+    pricePeriod: "/utilisateur/mois",
+    highlighted: true,
+    badge: "Populaire",
+    features: features.map((f) => ({ ...f, included: true })),
+    cta: <Button variant="primary" block icon="arrow-right-line" iconPosition="right">Choisir Pro</Button>,
+  },
+};
+
+export const Trio: Story = {
+  render: () => (
+    <div className="mmg-grid mmg-grid--gap-md">
+      <div className="mmg-col-4"><PricingCard {...Default.args!} /></div>
+      <div className="mmg-col-4"><PricingCard {...Highlighted.args!} /></div>
+      <div className="mmg-col-4">
+        <PricingCard
+          name="Enterprise"
+          description="Pour les organisations matures."
+          price="Sur devis"
+          features={[
+            { label: "Tout Pro inclus" },
+            { label: "SLA 99.95%" },
+            { label: "SSO / SAML / SCIM" },
+            { label: "Audit logs" },
+            { label: "TAM dédié" },
+          ]}
+          cta={<Button variant="tertiary" block>Contacter sales</Button>}
+        />
+      </div>
+    </div>
+  ),
+};
diff --git a/storybook/stories/ProfileHeader.stories.tsx b/storybook/stories/ProfileHeader.stories.tsx
new file mode 100644
index 0000000..02bcc3e
--- /dev/null
+++ b/storybook/stories/ProfileHeader.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProfileHeader, Badge, Button, Icon } from "@managemate/react";
+
+const meta = {
+  title: "Profile/ProfileHeader",
+  component: ProfileHeader,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ProfileHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    name: "Marie Dupont",
+    subtitle: "Lead Developer · Synapse",
+    bio: "Lead frontend chez ManageMate depuis 2020. Mainteneuse du DSMMG, passionnée d'accessibilité et de motion design fonctionnel.",
+    initials: "MD",
+    status: "online",
+    badges: (
+      <>
+        <span className="mmg-badge mmg-badge--success">
+          <span className="mmg-badge__dot mmg-badge__dot--pulse" />
+          Disponible
+        </span>
+        <span className="mmg-badge mmg-badge--brand">
+          <Icon name="shield-check-fill" size="xs" /> Owner DSMMG
+        </span>
+        <span className="mmg-badge">Frontend · React</span>
+      </>
+    ),
+    actions: (
+      <>
+        <Button variant="tertiary" icon="message-2-line">Message</Button>
+        <Button variant="primary" icon="user-add-line">Suivre</Button>
+      </>
+    ),
+    stats: [
+      { label: "Commits", value: "184" },
+      { label: "Reviews", value: "23" },
+      { label: "Tickets résolus", value: "412" },
+      { label: "Ancienneté", value: "5 ans" },
+    ],
+  },
+};
diff --git a/storybook/stories/Sheet.stories.tsx b/storybook/stories/Sheet.stories.tsx
new file mode 100644
index 0000000..9a5aae1
--- /dev/null
+++ b/storybook/stories/Sheet.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Sheet, Button, Input, Switch } from "@managemate/react";
+
+const meta = {
+  title: "Overlays/Sheet",
+  component: Sheet,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function Demo({ side }: { side: "left" | "right" | "top" | "bottom" }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <>
+      <Button variant="primary" onClick={() => setOpen(true)}>Ouvrir ({side})</Button>
+      <Sheet
+        open={open}
+        onOpenChange={setOpen}
+        side={side}
+        title="Édition rapide"
+        description="Modifiez sans quitter la liste."
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setOpen(false)}>Annuler</Button>
+            <Button variant="primary" onClick={() => setOpen(false)}>Sauvegarder</Button>
+          </>
+        }
+      >
+        <Input label="Nom" defaultValue="Marie Dupont" />
+        <Switch label="Notifier l'équipe" defaultChecked />
+      </Sheet>
+    </>
+  );
+}
+
+export const Right: Story = { render: () => <Demo side="right" /> };
+export const Left: Story = { render: () => <Demo side="left" /> };
+export const Top: Story = { render: () => <Demo side="top" /> };
+export const Bottom: Story = { render: () => <Demo side="bottom" /> };
diff --git a/storybook/stories/Slider.stories.tsx b/storybook/stories/Slider.stories.tsx
new file mode 100644
index 0000000..786648f
--- /dev/null
+++ b/storybook/stories/Slider.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Slider } from "@managemate/react";
+
+const meta = {
+  title: "Forms/Slider",
+  component: Slider,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Single: Story = {
+  render: () => {
+    const [v, setV] = useState([62]);
+    return (
+      <div style={{ width: 320 }}>
+        <label style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: "var(--mmg-font-size-sm)", fontWeight: 600 }}>
+          <span>Volume</span>
+          <span style={{ fontVariantNumeric: "tabular-nums" }}>{v[0]}%</span>
+        </label>
+        <Slider label="Volume" value={v} onValueChange={setV} />
+      </div>
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [v, setV] = useState([800, 2400]);
+    return (
+      <div style={{ width: 320 }}>
+        <label style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, fontSize: "var(--mmg-font-size-sm)", fontWeight: 600 }}>
+          <span>Prix</span>
+          <span style={{ fontVariantNumeric: "tabular-nums" }}>{v[0]} € — {v[1]} €</span>
+        </label>
+        <Slider label="Prix" value={v} onValueChange={setV} min={0} max={5000} step={50} />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <div style={{ width: 320 }}>
+      <Slider label="x" value={[40]} onValueChange={() => {}} disabled />
+    </div>
+  ),
+};
diff --git a/storybook/stories/Tabs.stories.tsx b/storybook/stories/Tabs.stories.tsx
new file mode 100644
index 0000000..b08a892
--- /dev/null
+++ b/storybook/stories/Tabs.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Tabs } from "@managemate/react";
+
+const meta = {
+  title: "Navigation/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [v, setV] = useState("a");
+    return (
+      <Tabs
+        value={v}
+        onChange={setV}
+        items={[
+          { id: "a", label: "Aperçu" },
+          { id: "b", label: "Détails" },
+          { id: "c", label: "Données" },
+          { id: "d", label: "Activité" },
+        ]}
+      />
+    );
+  },
+};
diff --git a/storybook/stories/Toast.stories.tsx b/storybook/stories/Toast.stories.tsx
new file mode 100644
index 0000000..abae540
--- /dev/null
+++ b/storybook/stories/Toast.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToastProvider, useToast, Button } from "@managemate/react";
+
+const meta = {
+  title: "Feedback/Toast",
+  tags: ["autodocs"],
+  decorators: [(Story) => <ToastProvider position="bottom-right" max={5}><Story /></ToastProvider>],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+function Trigger() {
+  const { toast } = useToast();
+  return (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+      <Button variant="success" onClick={() => toast({ title: "Sauvegardé", description: "Vos modifs ont été enregistrées.", severity: "success" })}>Success</Button>
+      <Button variant="tonal"   onClick={() => toast({ title: "Maintenance prévue dimanche", severity: "info" })}>Info</Button>
+      <Button variant="ghost"   onClick={() => toast({ title: "Quota presque atteint", description: "85% du stockage utilisé.", severity: "warning" })}>Warning</Button>
+      <Button variant="danger"  onClick={() => toast({ title: "Échec de la synchronisation", severity: "danger", duration: 0 })}>Danger</Button>
+      <Button variant="primary" icon="stack-line" onClick={() => {
+        const msgs = [
+          { title: "Bulletin Marie", description: "2 850 €", severity: "success" as const },
+          { title: "Bulletin Jean", description: "2 200 €", severity: "success" as const },
+          { title: "Bulletin Sophie", description: "3 400 €", severity: "success" as const },
+          { title: "Bulletin Thomas", description: "2 900 €", severity: "success" as const },
+          { title: "Bulletin Emma", description: "1 950 €", severity: "success" as const },
+        ];
+        msgs.forEach((m, i) => setTimeout(() => toast(m), i * 220));
+      }}>Empiler 5 toasts</Button>
+    </div>
+  );
+}
+
+export const Default: Story = { render: () => <Trigger /> };
diff --git a/storybook/stories/ToggleGroup.stories.tsx b/storybook/stories/ToggleGroup.stories.tsx
new file mode 100644
index 0000000..355a03d
--- /dev/null
+++ b/storybook/stories/ToggleGroup.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { ToggleGroup } from "@managemate/react";
+
+const meta = {
+  title: "Forms/ToggleGroup",
+  component: ToggleGroup,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { value: "list", label: "Liste", icon: "menu-line" as const },
+  { value: "grid", label: "Grille", icon: "apps-2-line" as const },
+  { value: "kanban", label: "Kanban", icon: "stack-line" as const },
+];
+
+export const Single: Story = {
+  render: () => {
+    const [v, setV] = useState<string | undefined>("list");
+    return <ToggleGroup type="single" ariaLabel="Vue" value={v} onValueChange={(x) => x && setV(x)} items={items} />;
+  },
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [v, setV] = useState<string[]>(["list"]);
+    return <ToggleGroup type="multiple" ariaLabel="Vues" value={v} onValueChange={setV} items={items} />;
+  },
+};
+
+export const Solid: Story = {
+  render: () => {
+    const [v, setV] = useState<string | undefined>("grid");
+    return <ToggleGroup type="single" variant="solid" ariaLabel="Vue" value={v} onValueChange={(x) => x && setV(x)} items={items} />;
+  },
+};
+
+export const Sizes: Story = {
+  render: () => {
+    const [v, setV] = useState("list");
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <ToggleGroup type="single" size="sm" ariaLabel="x" value={v} onValueChange={(x) => x && setV(x)} items={items} />
+        <ToggleGroup type="single" size="md" ariaLabel="x" value={v} onValueChange={(x) => x && setV(x)} items={items} />
+        <ToggleGroup type="single" size="lg" ariaLabel="x" value={v} onValueChange={(x) => x && setV(x)} items={items} />
+      </div>
+    );
+  },
+};
diff --git a/storybook/stories/UserCard.stories.tsx b/storybook/stories/UserCard.stories.tsx
new file mode 100644
index 0000000..366b3c9
--- /dev/null
+++ b/storybook/stories/UserCard.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { UserCard, Button } from "@managemate/react";
+
+const meta = {
+  title: "Profile/UserCard",
+  component: UserCard,
+  tags: ["autodocs"],
+} satisfies Meta<typeof UserCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { name: "Marie Dupont", role: "Lead Developer", initials: "MD", status: "online" },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      <UserCard size="sm" name="Sophie Bernard" role="PM" initials="SB" status="online" />
+      <UserCard name="Jean Martin" role="Designer · Synapse" initials="JM" status="away" />
+      <UserCard size="lg" name="Thomas Legrand" role="DevOps" initials="TL" status="busy" meta="Disponible après 16h" />
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  args: {
+    name: "Lohann Bouveresse",
+    role: "CEO",
+    initials: "LB",
+    status: "online",
+    meta: "ceo@managemate.fr",
+    href: "#",
+    actions: <Button size="sm" variant="ghost" icon="more-2-line" iconOnly aria-label="Actions" />,
+  },
+};
diff --git a/verdaccio/README.md b/verdaccio/README.md
new file mode 100644
index 0000000..976f1d5
--- /dev/null
+++ b/verdaccio/README.md
@@ -0,0 +1,85 @@
+# Verdaccio — registre privé DSMMG
+
+Verdaccio est utilisé pour publier les packages `@managemate/*` en
+interne, sans exposition publique. Le registre tourne en local via
+Docker Compose et peut être déployé sur l'infra ManageMate
+(`npm.dinawo.fr` recommandé).
+
+## Démarrer en local
+
+```sh
+docker compose -f docker-compose.verdaccio.yml up -d
+open http://localhost:4873
+```
+
+## Premier compte (admin)
+
+```sh
+npm adduser --registry http://localhost:4873
+# Username: admin
+# Password: <fort>
+# Email: dev@managemate.fr
+```
+
+Le htpasswd est stocké dans le volume `dsmmg-verdaccio-storage`.
+
+## Publier les packages
+
+À partir du root du monorepo, après un build complet :
+
+```sh
+pnpm build
+pnpm changeset version            # consume les changesets, bump versions
+pnpm -r --filter "@managemate/*" publish --registry http://localhost:4873
+```
+
+Ou via le script raccourci :
+
+```sh
+pnpm release
+```
+
+## Déploiement production
+
+Le `docker-compose.verdaccio.yml` est utilisable tel quel sur un host
+docker. Recommandations production :
+
+1. **Reverse proxy** (Caddy, Nginx, Traefik) avec **HTTPS** obligatoire.
+   Exemple Caddy :
+
+   ```caddy
+   npm.dinawo.fr {
+     reverse_proxy localhost:4873
+   }
+   ```
+
+2. **Backups** réguliers du volume `dsmmg-verdaccio-storage` (contient
+   les tarballs publiés et le htpasswd). Cible : snapshot quotidien
+   conservé 30j.
+
+3. **Rate limiting** sur le reverse proxy (~ 60 req/min/IP) pour éviter
+   le bruteforce sur le htpasswd.
+
+4. **Auth supplémentaire** possible : intégration LDAP/SAML via
+   `verdaccio-ldap` ou `verdaccio-saml` plugins si l'org grandit.
+
+5. **Monitoring** : `/_stats/heap` exposé par Verdaccio, à scraper
+   par Prometheus si infra existe.
+
+## Sécurité
+
+- `auth: htpasswd` uniquement par défaut. Pas d'inscription publique
+  (max_users: 50 limite).
+- `@managemate/*` : `access: $authenticated` — seuls les users
+  authentifiés peuvent installer.
+- Le proxy `uplinks.npmjs` permet de récupérer les deps publiques
+  (Radix, React, etc.) en passant par Verdaccio (cache).
+
+## Migration vers npm public (futur)
+
+Si le DSMMG devient open source un jour :
+
+1. Renommer le scope `@managemate` → `@managemate-group` (ou autre)
+   sur npm public.
+2. Publier sur https://registry.npmjs.org en `--access public`.
+3. Garder Verdaccio en cache local pour la CI.
diff --git a/verdaccio/config.yaml b/verdaccio/config.yaml
new file mode 100644
index 0000000..cd01f8d
--- /dev/null
+++ b/verdaccio/config.yaml
@@ -0,0 +1,65 @@
+# Verdaccio config — registre privé local pour le DSMMG
+# Usage : docker compose -f docker-compose.verdaccio.yml up -d
+# Puis :  pnpm config set @managemate:registry http://localhost:4873
+# Puis :  pnpm publish -r --filter "@managemate/*"
+
+storage: /verdaccio/storage
+plugins: /verdaccio/plugins
+web:
+  title: DSMMG — Registre privé ManageMate Group
+  primary_color: "#D12B6A"
+  scope: "@managemate"
+
+auth:
+  htpasswd:
+    file: /verdaccio/storage/htpasswd
+    max_users: 50
+    algorithm: bcrypt
+    rounds: 10
+
+uplinks:
+  npmjs:
+    url: https://registry.npmjs.org/
+
+packages:
+  # Packages DSMMG — privés, accès restreint aux users authentifiés
+  "@managemate/*":
+    access: $authenticated
+    publish: $authenticated
+    unpublish: $authenticated
+  # Tout le reste tape sur npmjs en proxy
+  "@*/*":
+    access: $all
+    publish: $authenticated
+    unpublish: $authenticated
+    proxy: npmjs
+  "**":
+    access: $all
+    publish: $authenticated
+    unpublish: $authenticated
+    proxy: npmjs
+
+server:
+  keepAliveTimeout: 60
+
+middlewares:
+  audit:
+    enabled: true
+
+# Logs
+logs: { type: stdout, format: pretty, level: info }
+
+# Sécurité
+security:
+  api:
+    legacy: true
+    jwt:
+      sign:
+        expiresIn: 90d
+      verify:
+        someProp: [some, key]
+  web:
+    sign:
+      expiresIn: 7d
+    verify:
+      someProp: [some, key]