+ {/* Header */}
+
+
+ 🎨 UI Components Showcase
+
+
+ Démonstration de tous les composants UI disponibles
+
+
+
+ {/* Theme Selector */}
+
+
+
+ 🎨 Sélecteur de Thèmes
+
+
+ Changez de thème pour voir comment tous les composants s'adaptent
+
+
+
+
+
+
+ {/* Buttons Section */}
+
+
+ Buttons
+
+
+
+
+
Variants
+
+
+
+
+
+
+
+
+
+
+
+
Sizes
+
+
+
+
+
+
+
+
+
States
+
+
+
+
+
+
+
+
+
+ {/* Badges Section */}
+
+
+ Badges
+
+
+
+
+ Default Badge
+ Primary Badge
+ Success Badge
+ Destructive Badge
+ Accent Badge
+ Purple Badge
+ Yellow Badge
+ Green Badge
+ Blue Badge
+ Gray Badge
+
+
+
+
+ {/* Alerts Section */}
+
+
+ Alerts
+
+
+
+
+ Information
+
+ Ceci est une alerte par défaut avec des informations importantes.
+
+
+
+
+ Succès
+
+ Opération terminée avec succès ! Toutes les données ont été sauvegardées.
+
+
+
+
+ Erreur
+
+ Une erreur s'est produite lors du traitement de votre demande.
+
+
+
+
+ Attention
+
+ Veuillez vérifier vos informations avant de continuer.
+
+
+
+
+ Conseil
+
+ Astuce : Vous pouvez utiliser les raccourcis clavier pour naviguer plus rapidement.
+
+
+
+
+
+ {/* Inputs Section */}
+
+
+ {/* Cards Section */}
+
+
+ Cards
+
+
+
+ {/* Standard Cards */}
+
+
+ Card Standard
+
+
+
+ Ceci est une carte standard avec header et contenu.
+
+
+
+
+
+
+ Card Élevée
+
+
+
+ Cette carte a une ombre plus prononcée.
+
+
+
+
+
+
+ Card Bordée
+
+
+
+ Cette carte a une bordure colorée.
+
+
+
+
+ {/* Styled Cards */}
+
+ Styled Card Primary
+
+ Carte avec couleur primaire et fond subtil.
+
+
+
+
+ Styled Card Success
+
+ Carte avec couleur de succès.
+
+
+
+
+ Styled Card Destructive
+
+ Carte avec couleur destructive.
+
+
+
+
+
+ {/* Interactive Demo */}
+
+
+ Démonstration Interactive
+
+
+
+
+
+ Formulaire d'exemple
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Actif
+ En attente
+
+
+
+
+
+
+
+
+
+
+
+
+ Notifications
+
+
+
+ Bienvenue !
+
+ Votre compte a été créé avec succès.
+
+
+
+
+ Mise Ă jour disponible
+
+ Une nouvelle version de l'application est disponible.
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+ Cette page est accessible via /ui-showcase
+
+
+
+
+ );
+}
diff --git a/src/components/ui/Alert.tsx b/src/components/ui/Alert.tsx
new file mode 100644
index 0000000..a06b0c1
--- /dev/null
+++ b/src/components/ui/Alert.tsx
@@ -0,0 +1,58 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface AlertProps extends HTMLAttributes