chore: initial DSMMG v0.2 — refonte architecturale complète

Mise en place du Design System ManageMate Group v0.2 — refonte du
système de tokens (préfixe --mmg-color-*), 9 presets accent
user-themable validés WCAG AA, overlays Radix UI + Floating UI,
Storybook 8 + Vitest + axe-core en CI, doc Astro Starlight,
DESIGN.md (format google-labs-code) et exports tokens DTCG/CSS/
TS/Figma/Tailwind v3 et v4.

- 4 packages monorepo pnpm : @managemate/{tokens,css,react,icons}
- 62 composants React headless-first (Sheet, HoverCard, ContextMenu,
  Slider, ToggleGroup, AvatarGroup, UserCard, ProfileHeader,
  MetricCard, PricingCard, FeatureCard, Text/Display/Eyebrow/Lead…)
- Lint contraste WCAG : 37/37 paires AA, branché CI
- Toast pile Sonner-style avec ResizeObserver
- Theming user (9 presets) sans casser sémantique fixe
- Identité Synapse (rose #D12B6A) préservée

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

packages/react/src/Drawer.tsx

@@ -0,0 +1,71 @@
+import { type ReactNode } from "react";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { cx } from "./utils";
+import { Icon } from "./Icon";
+
+export type DrawerProps = {
+  open: boolean;
+  /** Callback de fermeture — déclenché par Esc, click backdrop, click close. */
+  onClose: () => void;
+  /** Côté d'apparition. Défaut "right". */
+  side?: "left" | "right";
+  /** Largeur. Défaut "md" (480px). */
+  size?: "sm" | "md" | "lg" | "xl";
+  title?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  className?: string;
+};
+
+/**
+ * Drawer — panneau latéral (Radix Dialog).
+ *
+ * API simplifiée par rapport à Sheet : uniquement left/right, callback
+ * `onClose` (au lieu de `onOpenChange`). Pour bottom/top sheet ou plus
+ * de contrôle, utiliser directement Sheet.
+ *
+ * Backing Radix : focus trap, scroll lock, restitution focus, Esc — tout
+ * natif. Anciennement custom (useFocusTrap), maintenant aligné avec Sheet.
+ */
+export function Drawer({
+  open,
+  onClose,
+  side = "right",
+  size = "md",
+  title,
+  children,
+  footer,
+  className,
+}: DrawerProps) {
+  return (
+    <RadixDialog.Root open={open} onOpenChange={(o) => !o && onClose()}>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="mmg-sheet__overlay" />
+        <RadixDialog.Content
+          className={cx(
+            "mmg-sheet",
+            `mmg-sheet--${side}`,
+            `mmg-sheet--${size}`,
+            "mmg-drawer",
+            className,
+          )}
+        >
+          {title && (
+            <header className="mmg-sheet__header">
+              <div className="mmg-sheet__header-text">
+                <RadixDialog.Title className="mmg-sheet__title">{title}</RadixDialog.Title>
+              </div>
+              <RadixDialog.Close asChild>
+                <button type="button" className="mmg-sheet__close" aria-label="Fermer">
+                  <Icon name="close-line" size="md" />
+                </button>
+              </RadixDialog.Close>
+            </header>
+          )}
+          <div className="mmg-sheet__body">{children}</div>
+          {footer && <footer className="mmg-sheet__footer">{footer}</footer>}
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+}