Paymium · Toonba · May 28, 2025 · Jun 4, 2025 · Jun 4, 2025 · Jun 5, 2025
diff --git a/.changeset/tough-cobras-poke.md b/.changeset/tough-cobras-poke.md
@@ -0,0 +1,5 @@
+---
+'@crossed/ui': patch
+---
+
+Ecriture des spécification pour les composant
diff --git a/packages/ui/src/Specification/Alert.md b/packages/ui/src/Specification/Alert.md
@@ -0,0 +1,116 @@
+# 📄 Fiche de spécification — `Alert`
+
+---
+
+## 1. 🔎 Objectif du composant
+
+- **Nom** : `Alert`
+- **Rôle** : Afficher un message d'information, de succès, d'erreur ou d'avertissement
+- **Utilisation prévue** : Feedback utilisateur, information non bloquante, avertissement système
+
+---
+
+## 2. 🧱 Structure & Composabilité
+
+- **Composant autonome ou composable ?** :
+    - [x] Autonome
+    - [x] Composable avec d’autres composants
+
+- **Composants internes utilisés** :
+    - `Icon`
+    - `Text`
+    - `Button` (optionnel pour close / action)
+
+- **Slots / Children autorisés** :
+    - [x] Oui
+    - **Détail** : slot pour contenu libre ou children pour texte personnalisé
+
+---
+
+## 3. ⚙️ Props attendues
+
+| Prop          | Type        | Requis | Par défaut | Description                                                                      |
+|---------------|-------------|--------|------------|----------------------------------------------------------------------------------|
+| `variant`     | `string`    | ❌     | `default`  | couleur de l'icone                                                               |
+| `icon`        | `ReactNode` | ❌     | `null`     | Icône personnalisée                                                              |
+| `title`       | `string`    | ❌     | `null`     | Titre optionnel                                                                  |
+| `description` | `string`    | ❌     | `null`     | Texte secondaire                                                                 |
+| `closable`    | `boolean`   | ❌     | `false`    | Affiche ou non un bouton de fermeture                                            |
+| `onClose`     | `function`  | ❌     | `null`     | Callback lors de la fermeture                                                    |
+| `action`      | `ReactNode` | ❌     | `null`     | Bouton ou élément interactif complémentaire                                      |
+| `fullWidth`   | `boolean`   | ❌     | `false`    | change l'affichage pour passer d'une floating a conteur prenant toute la largeur |
+
+une propos Status pour la couleur et variant utilisé pour default ou fullwidth ? 
+---
+
+## 4. 🎨 Variantes / États
+
+- **Variantes visuelles (`variant`)** :
+    - `default`
+    - `gray`
+    - `brand`
+    - `success`
+    - `error`
+    - `warning`
+
+- **États gérés** :
+    - [x] `visible`
+    - [x] `hidden`
+    - [x] `hover`
+    - [x] `focus` (si action ou bouton)
+    - [x] `disabled` (si action)
+
+---
+
+## 5. 🧪 Comportements & Interactions
+
+- **Clic** : sur bouton de fermeture ou action complémentaire
+- **Transitions / Animations** : Oui (fade in/out sur apparition/disparition)
+
+---
+
+## 6. Accessibilité
+
+- `role="alert"` pour les messages importants (error, warning)
+- `role="status"` pour les messages non bloquants (info, success)
+- Ne jamais forcer le focus sur l’alerte, sauf si elle est essentielle pour continuer l’action. 
+- Laisser l’utilisateur contrôler sa navigation.
+- Focus possible sur les éléments interactifs
+- Bouton de fermeture accessible via clavier 
+- Label explicite pour le bouton de fermetur (`aria-label="Fermer l'alerte"`)
+
+---
+
+## 7. 🧩 Présets ou composants dérivés
+
+- **Composants dérivés** :
+    - `ErrorAlert`
+    - `SuccessAlert`
+- **Créés à partir de** : `Alert` avec `variant` et contenu prédéfini
+
+---
+
+## 8. 🧪 Tests attendus
+
+- [x] Test unitaire des props critiques
+- [x] Test de rendu (snapshot)
+- [x] Test accessibilité (focus, rôle, clavier)
+- [ ] Test visuel si besoin
+
+---
+
+## 9. 📐 Exemple(s) d’utilisation
+
+```jsx
+<Alert variant="error" title="Erreur de connexion" description="Veuillez vérifier vos identifiants." closable onClose={handleClose} />
+
+<Alert variant="success">
+  <Alert.Icon/>
+  <Alert.Success>Succès !</Alert.Success> 
+  <Alert.Description>Votre profil a bien été mis à jour.</Alert.Description>
+</Alert>
+```
+
+---
+## 10. Liens utile
+[figma](https://www.figma.com/design/BE2sfEyiN6lmoEw5l9kXY4/Design-system-V.2?node-id=1135-1960&m=dev)
diff --git a/packages/ui/src/Specification/Badge.md b/packages/ui/src/Specification/Badge.md
@@ -0,0 +1,118 @@
+# 📄 Fiche de spécification — `Badge`
+
+---
+
+## 1. 🔎 Objectif du composant
+
+- **Nom** : `Badge`
+- **Rôle** : Afficher une information complémentaire, secondaire ou un indicateur visuel (ex : statut, notification, label).
+- **Utilisation prévue** :
+    - Indiquer un nombre de notifications ou d’éléments non lus
+    - Signaler un statut (ex : "nouveau", "en cours", "terminé")
+    - Accompagner du texte ou des composants (ex : dans une carte ou une liste)
+
+---
+
+## 2. 🧱 Structure & Composabilité
+
+- **Composant autonome ou composable ?** :
+    - [x] Autonome
+    - [x] Composable 
+
+- **Composants internes utilisés** :
+    - `Text` optionnel si icon
+    - `Icon` optionnel si text
+
+- **Slots / Children autorisés** :
+    - [x] Oui — contenu du badge (texte, nombre, icône)
+    - Peut contenir :
+        - un texte
+        - une icône
+
+---
+
+## 3. ⚙️ Props attendues
+
+| Prop        | Type           | Requis | Par défaut | Description                        |
+|-------------|----------------|--------|------------|------------------------------------|
+| `variant`   | `string`       | ❌     | `default`  | Style du badge                     |
+| `color`     | `string`       | ❌     | `default`  | Style du badge                     |
+| `label`     | `string`       | ❌     | ``         | text a l'intérieur du badge        |
+| `size`      | `string`       | ❌     | `sm`       | Taille du badge (`sm`, `md`, `lg`) |
+| `iconLeft`  | `ReactNode`    | ❌     | `null`     | Icône affichée avant le texte      |
+| `iconRight` | `ReactNode`    | ❌     | `null`     | Icône affichée après le texte      |
+
+---
+
+## 4. 🎨 Variantes / États
+
+- **Variantes (`variant`)** :
+    - `pill`
+    - `default`
+    - `modern`
+
+- **Taille (`size`)** :
+    - `sm`
+    - `md`
+    - `lg`
+- **Colors (`color`)** :
+    - `gray`
+    - `brand`
+    - `error`
+    - `warning`
+    - `success`
+    - `grayBlue`
+    - `blueLight`
+    - `blue`
+    - `indigo`
+    - `purple`
+    - `pink`
+    - `orange`
+
+---
+
+## 5. 🧪 Comportements & Interactions
+
+- **Statique** — ne déclenche pas d’action
+- Peut être animé à l’apparition
+
+---
+
+## 6. Accessibilité
+- Si badge purement décoratif, aria-hiden="true" pour l'exclure des lecteur d'écran 
+- pas besoin de aria spécifique sauf dans le cas ou le badge transmet une informations importante (type nombre de notification non lu)
+
+---
+
+## 7. 🧩 Présets ou composants dérivés
+
+- `NotificationBadge` : badge avec un icon `dot` 
+- `StatusBadge` : avec `variant` dynamique (selon un statut : actif, en pause...)
+- `LabelBadge` : texte court (type "Beta", "Admin", "Urgent")
+- `BadgeGroup` : un badge au debut ou a la fin d'un autre badge le badge a l'intérieur a un backgroundColor different mais un text de la même couleurs que le badge parent Variant modern ou pill uniquement 
+
+---
+
+## 8. 🧪 Tests attendus
+
+
+---
+
+## 9. 📐 Exemple(s) d’utilisation
+
+```jsx
+// Label simple
+<Badge variant="pill" label={Nouveau} />
+
+// avec Icone
+<Badge variant={'default'} color={"warning"} size={'lg'} >
+  <Badge.Icon>
+    <BellIcon />
+  </Badge.Icon>
+  <Badge.Text>Text</Badge.Text>
+</Badge>
+```
+--- 
+
+## 10 Liens utile
+- [Figma](https://www.figma.com/design/BE2sfEyiN6lmoEw5l9kXY4/Design-system-V.2?node-id=4826-406139&m=dev)
diff --git a/packages/ui/src/Specification/Breadcrumbs.md b/packages/ui/src/Specification/Breadcrumbs.md
@@ -0,0 +1,108 @@
+# 📄 Fiche de spécification — `Breadcrumbs`
+
+---
+
+## 1. 🔎 Objectif du composant
+
+- **Nom** : `Breadcrumbs`
+- **Rôle** : Afficher la hiérarchie de navigation pour aider l'utilisateur à comprendre où il se trouve
+- **Utilisation prévue** : Header de page, navigation secondaire, pages de contenu profond
+
+---
+
+## 2. 🧱 Structure & Composabilité
+
+- **Composant autonome ou composable ?** :
+    - [x] Autonome
+
+- **Composants internes utilisés** :
+    - `Link`
+    - `Icon`
+    - `Text`
+
+- **Slots / Children autorisés** :
+    - [x] Non
+
+---
+
+## 3. ⚙️ Props attendues
+
+| Prop         | Type                | Requis | Par défaut | Description                                       |
+|--------------|---------------------|--------|------------|---------------------------------------------------|
+| `items`      | `Array<Breadcrumb>` | ✅     | -          | Liste des éléments du breadcrumb                  |
+| `separator`  | `ReactNode`         | ❌     | `/`        | Élément de séparation entre les liens             |
+| `onNavigate` | `(item) => void`    | ❌     | -          | Callback personnalisé lors du clic sur un élément |
+| `variant`    | `string`            | ❌     | -          | choisis le variant a utilisé                      |
+
+---
+
+## 4. 🎨 Variantes / États
+
+- **separator** :
+    - `slash`
+    - `chevron`
+
+- **variant** : 
+  - `text`
+  - `line`
+  - `button`
+
+- **États gérés** :
+    - [x] `hover`
+    - [x] `focus`
+    - [x] `active`
+    - [ ] `disabled`
+    - [x] `current`
+
+---
+
+## 5. 🧪 Comportements & Interactions
+
+- **Clic** : Déclenche une navigation ou un callback si défini
+- **Transitions / Animations** :
+    - Non (sauf hover doux sur les liens)
+
+---
+
+## 6. Accessibilité
+
+- Respect des rôles et attributs ARIA (`nav`, `aria-current`)
+- Liens accessibles au clavier
+- Les séparateurs visuels doivent être visuellement présents, mais invisibles pour les lecteurs d’écran :
+- Utiliser un élément <nav> avec aria-label="Fil d’Ariane" (ou "Breadcrumb" pour l'anglais) 
+- L’élément actif (la page actuelle) doit être marqué avec aria-current="page" 
+
+
+---
+
+## 7. 🧩 Présets ou composants dérivés
+
+
+---
+
+## 8. 🧪 Tests attendus
+
+- [x] Test unitaire des props (`items`, `separator`)
+- [x] Test de rendu (snapshot)
+- [x] Test accessibilité (aria, clavier)
+- [ ] Test de raccourcissement (`maxItems`)
+
+---
+
+## 9. 📐 Exemple(s) d’utilisation
+
+```jsx
+<Breadcrumbs
+  items={[
+    { label: 'Accueil', href: '/' },
+    { label: 'Produits', href: '/produits' },
+    { label: 'Catégorie', href: '/produits/categorie' },
+    { label: 'Produit X', isCurrent: true }
+  ]}
+  separator={<ChevronRightIcon />}
+/>
+```
+---
+
+## 10. Liens utile
+[Figma](https://www.figma.com/design/BE2sfEyiN6lmoEw5l9kXY4/Design-system-V.2?node-id=1122-2216&m=dev)