feat: Ajout de composant (#23)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [x] Pas de régression
- [x] TU/TI/TF rédigée
- [x] TU/TI/TF OK
- [x] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #23
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

app/story/button/button.story.vue

@@ -0,0 +1,148 @@
+<template>
+  <Story title="Button/Button">
+    <Variant title="Primary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
+        <MalioButton label="Valider" />
+        <MalioButton label="Valider" icon-name="mdi:check" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-hover" icon-name="mdi:check" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" />
+        <MalioButton label="Valider" button-class="bg-m-btn-primary-active" icon-name="mdi:check" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
+        <MalioButton label="Valider" disabled />
+        <MalioButton label="Valider" disabled icon-name="mdi:check" />
+      </div>
+    </Variant>
+
+    <Variant title="Secondary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
+        <MalioButton label="Modifier" variant="secondary" />
+        <MalioButton label="Modifier" variant="secondary" icon-name="mdi:pencil" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" />
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-hover" icon-name="mdi:pencil" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" />
+        <MalioButton label="Modifier" variant="secondary" button-class="bg-m-btn-secondary-active" icon-name="mdi:pencil" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
+        <MalioButton label="Modifier" variant="secondary" disabled />
+        <MalioButton label="Modifier" variant="secondary" disabled icon-name="mdi:pencil" icon-position="left" />
+      </div>
+    </Variant>
+
+    <Variant title="Tertiary">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
+        <MalioButton label="Voir plus" variant="tertiary" />
+        <MalioButton label="Voir plus" variant="tertiary" icon-name="mdi:arrow-right" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" />
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-hover text-m-btn-primary-hover" icon-name="mdi:arrow-right" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" />
+        <MalioButton label="Voir plus" variant="tertiary" button-class="border-m-btn-primary-active text-m-btn-primary-active" icon-name="mdi:arrow-right" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
+        <MalioButton label="Voir plus" variant="tertiary" disabled />
+        <MalioButton label="Voir plus" variant="tertiary" disabled icon-name="mdi:arrow-right" />
+      </div>
+    </Variant>
+
+    <Variant title="Danger">
+      <div class="grid grid-cols-2 items-start gap-3 p-4">
+        <p class="text-xs font-semibold text-m-muted">Default</p>
+        <p class="text-xs font-semibold text-m-muted">Default + icon</p>
+        <MalioButton label="Supprimer" variant="danger" />
+        <MalioButton label="Supprimer" variant="danger" icon-name="mdi:trash-can-outline" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Hover</p>
+        <p class="text-xs font-semibold text-m-muted">Hover + icon</p>
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-hover" icon-name="mdi:trash-can-outline" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Active</p>
+        <p class="text-xs font-semibold text-m-muted">Active + icon</p>
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" />
+        <MalioButton label="Supprimer" variant="danger" button-class="bg-m-btn-danger-active" icon-name="mdi:trash-can-outline" icon-position="left" />
+        <p class="text-xs font-semibold text-m-muted">Disabled</p>
+        <p class="text-xs font-semibold text-m-muted">Disabled + icon</p>
+        <MalioButton label="Supprimer" variant="danger" disabled />
+        <MalioButton label="Supprimer" variant="danger" disabled icon-name="mdi:trash-can-outline" icon-position="left" />
+      </div>
+    </Variant>
+
+    <Variant title="Largeur personnalisée">
+      <div class="flex flex-col items-start gap-3 p-4">
+        <MalioButton label="Pleine largeur" button-class="w-full" />
+        <MalioButton label="Compact" button-class="w-auto px-6" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioButton
+
+Bouton d'action avec 4 variantes visuelles et support d'icône optionnelle.
+
+## Props
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto-généré | Identifiant HTML du bouton |
+| `label` | `string` | `''` | Texte du bouton (peut aussi être fourni via le slot par défaut) |
+| `variant` | `'primary' \| 'secondary' \| 'tertiary' \| 'danger'` | `'primary'` | Variante visuelle |
+| `disabled` | `boolean` | `false` | Désactive le bouton |
+| `buttonClass` | `string` | `''` | Classes CSS additionnelles (fusionnées via `twMerge`) |
+| `iconName` | `string` | `''` | Nom de l'icône Iconify (ex: `mdi:check`) |
+| `iconPosition` | `'left' \| 'right'` | `'right'` | Position de l'icône par rapport au texte |
+| `iconSize` | `string \| number` | `20` | Taille de l'icône en pixels |
+
+## Variantes
+
+- **Primary** : Fond `m-btn-primary`, texte blanc — action principale
+- **Secondary** : Fond `m-btn-secondary`, texte blanc — action secondaire
+- **Tertiary** : Bordure et texte `m-btn-primary`, fond transparent — action tertiaire
+- **Danger** : Fond `m-btn-danger`, texte blanc — action destructrice
+
+## États
+
+Chaque variante a 4 états visuels : Default, Hover, Active, Disabled.
+
+## Dimensions par défaut
+
+- Largeur : 240px (`w-[240px]`), personnalisable via `buttonClass`
+- Hauteur : 40px (`h-[40px]`)
+- Police : 16px bold, line-height 150%
+
+## Accessibilité
+
+- `type="button"` évite la soumission de formulaire involontaire
+- Support `disabled` natif
+- Focus visible avec `focus-visible:ring-2`
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `click` | `MouseEvent` | Émis au clic (pas émis si `disabled`) |
+</docs>
+
+<script setup lang="ts">
+import MalioButton from '../../components/malio/button/Button.vue'
+
+defineOptions({ name: 'ButtonStory' })
+</script>

app/story/button/buttonIcon.story.vue

@@ -0,0 +1,242 @@
+<template>
+  <Story title="Button/Icon">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+          />
+          <MalioButtonIcon
+            icon="mdi:close"
+            aria-label="Fermer"
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+          />
+          <MalioButtonIcon
+            icon="mdi:bell-outline"
+            aria-label="Notifications"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Icônes variées</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:cog-outline"
+            aria-label="Paramètres"
+          />
+          <MalioButtonIcon
+            icon="mdi:format-list-bulleted"
+            aria-label="Liste"
+          />
+          <MalioButtonIcon
+            icon="mdi:view-grid-outline"
+            aria-label="Grille"
+          />
+          <MalioButtonIcon
+            icon="mdi:folder-outline"
+            aria-label="Dossier"
+          />
+          <MalioButtonIcon
+            icon="mdi:delete-outline"
+            aria-label="Supprimer"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:close"
+            aria-label="Fermer"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Ghost</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:close"
+            aria-label="Fermer"
+            variant="ghost"
+          />
+          <MalioButtonIcon
+            icon="mdi:download"
+            aria-label="Télécharger"
+            variant="ghost"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Ghost désactivé</h2>
+        <div class="flex gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Retour"
+            variant="ghost"
+            disabled
+          />
+          <MalioButtonIcon
+            icon="mdi:pencil-outline"
+            aria-label="Modifier"
+            variant="ghost"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Taille personnalisée</h2>
+        <div class="flex items-center gap-4">
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Petit"
+            :icon-size="16"
+          />
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Normal"
+            :icon-size="24"
+          />
+          <MalioButtonIcon
+            icon="mdi:arrow-left"
+            aria-label="Grand"
+            :icon-size="32"
+          />
+        </div>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioButtonIcon
+
+Bouton contenant uniquement une icône, sans texte. Utilisé pour des actions
+rapides et compactes (retour, modifier, supprimer, etc.).
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML du bouton.
+-   Comportement: Si non fourni, un id unique est généré automatiquement.
+
+### icon
+
+-   Type: string
+-   **Requis**
+-   Description: Nom de l'icône Iconify (ex: `mdi:arrow-left`).
+
+### ariaLabel
+
+-   Type: string
+-   **Requis**
+-   Description: Label d'accessibilité du bouton. Obligatoire car le bouton
+    n'a pas de texte visible.
+
+### iconSize
+
+-   Type: string | number
+-   Défaut: 24
+-   Description: Taille de l'icône en pixels.
+
+### buttonClass
+
+-   Type: string
+-   Description: Classes CSS additionnelles appliquées au bouton.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive le bouton.
+
+### variant
+
+-   Type: `'filled' | 'ghost'`
+-   Défaut: `filled`
+-   Description: Variante visuelle du bouton.
+-   `filled` : fond coloré, icône blanche.
+-   `ghost` : sans fond, icône colorée.
+
+------------------------------------------------------------------------
+
+## Comportement visuel
+
+### Variante `filled` (défaut)
+
+-   **Default** : fond `#222783`, icône blanche
+-   **Hover** : fond `#121CDB`
+-   **Active** : fond `#212567`
+-   **Disabled** : fond `#CCCCDF`
+
+### Variante `ghost`
+
+-   **Default** : icône `#222783`, sans fond
+-   **Hover** : icône `#121CDB`
+-   **Active** : icône `#212567`
+-   **Disabled** : icône `#CCCCDF`
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-label` est requis pour décrire l'action du bouton.
+-   `type="button"` pour éviter les soumissions de formulaire accidentelles.
+
+------------------------------------------------------------------------
+
+## Events
+
+### click
+
+-   Émis au clic sur le bouton.
+-   Non émis si le bouton est `disabled`.
+-   Retourne l'événement `MouseEvent` natif.
+
+</docs>
+
+<script setup lang="ts">
+import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
+</script>

app/story/checkbox/inputCheckbox.story.vue

@@ -0,0 +1,178 @@
+<template>
+  <Story title="Input/Checkbox">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioCheckbox
+          v-model="simpleValue"
+          label="Accepter les conditions"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Coché</h2>
+        <MalioCheckbox
+          v-model="checkedValue"
+          label="Newsletter activée"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioCheckbox
+          v-model="hintValue"
+          label="Recevoir les notifications"
+          hint="Vous pouvez désactiver à tout moment"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioCheckbox
+          v-model="disabledValue"
+          label="Option verrouillée"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioCheckbox
+          v-model="readonlyValue"
+          label="Accepté par l'utilisateur"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioCheckbox
+          v-model="errorValue"
+          label="Accepter les conditions"
+          error="Vous devez accepter les conditions"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioCheckbox
+          v-model="successValue"
+          label="Conditions acceptées"
+          success="Merci"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioCheckbox
+
+Composant checkbox custom avec `v-model`, message d'aide, et états visuels
+`error` / `success`.
+
+------------------------------------------------------------------------
+
+## Props
+
+### id
+
+- Type: `string`
+- Description: Identifiant HTML du checkbox.
+- Comportement: si absent, un id unique est généré automatiquement.
+
+### label
+
+- Type: `string`
+- Description: Texte affiche a cote de la case.
+
+### name
+
+- Type: `string`
+- Description: Attribut `name` du champ.
+
+### modelValue
+
+- Type: `boolean | null | undefined`
+- Description: État coche du composant.
+
+### inputClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées a l'input natif.
+
+### labelClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au label.
+
+### groupClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au conteneur.
+
+### required
+
+- Type: `boolean`
+- Description: Ajoute l'attribut HTML `required`.
+
+### disabled
+
+- Type: `boolean`
+- Description: Désactive le composant.
+
+### readonly
+
+- Type: `boolean`
+- Description: Empêche la mise a jour du `v-model` tout en gardant
+  l'affichage courant.
+
+### hint
+
+- Type: `string`
+- Description: Message d'aide affiche sous le checkbox.
+
+### error
+
+- Type: `string`
+- Description: Message d'erreur.
+- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
+  d'erreur au texte et a la case.
+
+### success
+
+- Type: `string`
+- Description: Message de succès.
+- Effet: applique la couleur de succès au texte et a la case si `error`
+  est absent.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `aria-invalid` est active si `error` existe.
+- `aria-describedby` pointe vers le message affiche.
+- L'input natif reste present pour conserver le comportement formulaire.
+
+------------------------------------------------------------------------
+
+## Event
+
+### update:modelValue
+
+- Émis a chaque changement de l'état coche.
+- Retourne un booléen `true` ou `false`.
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../../components/malio/checkbox/Checkbox.vue'
+
+const simpleValue = ref(false)
+const checkedValue = ref(true)
+const hintValue = ref(false)
+const disabledValue = ref(true)
+const readonlyValue = ref(true)
+const errorValue = ref(false)
+const successValue = ref(true)
+</script>

app/story/drawer/drawer.story.vue

@@ -0,0 +1,123 @@
+<template>
+  <Story title="Overlay/Drawer">
+    <Variant title="Simple">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showSimple = true"
+        >
+          Ouvrir le drawer
+        </button>
+        <MalioDrawer v-model="showSimple" title="Détails">
+          <p>Contenu simple du drawer.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Avec formulaire">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showForm = true"
+        >
+          Ouvrir le formulaire
+        </button>
+        <MalioDrawer v-model="showForm" title="Nouveau contact">
+          <div class="flex flex-col gap-4">
+            <MalioInputText v-model="formNom" label="Nom" />
+            <MalioInputText v-model="formPrenom" label="Prénom" />
+            <MalioButton label="Enregistrer" button-class="w-full" @click="showForm = false" />
+          </div>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Sans bouton fermer">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showNoClose = true"
+        >
+          Ouvrir (sans croix)
+        </button>
+        <MalioDrawer v-model="showNoClose" title="Information" :show-close="false">
+          <p>Ce drawer n'a pas de bouton fermer. Cliquez sur le backdrop pour fermer.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+
+    <Variant title="Largeur personnalisée">
+      <div class="p-4">
+        <button
+          class="rounded bg-m-btn-primary px-4 py-2 text-white"
+          @click="showWide = true"
+        >
+          Ouvrir (large)
+        </button>
+        <MalioDrawer v-model="showWide" title="Drawer large" drawer-class="max-w-2xl">
+          <p>Ce drawer utilise une largeur personnalisée via la prop drawerClass.</p>
+        </MalioDrawer>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioDrawer
+
+Panneau latéral (drawer) qui s'ouvre depuis la droite avec un fond semi-transparent.
+
+## Props détaillées
+
+| Prop | Type | Défaut | Description |
+|------|------|--------|-------------|
+| `id` | `string` | auto-généré | Identifiant HTML du drawer |
+| `modelValue` | `boolean` | `undefined` | État ouvert/fermé (v-model) |
+| `title` | `string` | `''` | Titre affiché dans le header |
+| `showClose` | `boolean` | `true` | Afficher le bouton de fermeture (croix) |
+| `drawerClass` | `string` | `''` | Classes CSS additionnelles sur le panneau (fusionnées via `twMerge`) |
+
+## Comportement
+
+- Le drawer s'ouvre en glissant depuis la droite avec une transition
+- Un backdrop semi-transparent couvre le reste de la page
+- Clic sur le backdrop ferme le drawer
+- Bouton de fermeture (croix) en haut à droite, masquable via `showClose`
+- Contenu scrollable si plus haut que la fenêtre
+- Teleport vers `<body>` pour éviter les problèmes de z-index
+
+## Accessibilité
+
+- `role="dialog"` et `aria-modal="true"` sur le panneau
+- `aria-labelledby` lié au titre
+- Bouton fermer avec `aria-label="Fermer"`
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `update:modelValue` | `boolean` | Émis à la fermeture (backdrop ou bouton) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Contenu du drawer |
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioDrawer from '../../components/malio/drawer/Drawer.vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
+import MalioButton from '../../components/malio/button/Button.vue'
+
+defineOptions({ name: 'DrawerStory' })
+
+const showSimple = ref(false)
+const showForm = ref(false)
+const showNoClose = ref(false)
+const showWide = ref(false)
+
+const formNom = ref('Dupont')
+const formPrenom = ref('Jean')
+</script>

app/story/input/inputAmount.story.vue

@@ -1,8 +1,59 @@
 <template>
-  <Story
-    title="Input/Amount"
-  >
-      <MalioInputAmount/>
+  <Story title="Input/Amount">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputAmount
+          v-model="simpleValue"
+          label="Montant"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputAmount
+          v-model="hintValue"
+          label="Montant HT"
+          hint="Montant hors taxes en euros"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputAmount
+          v-model="disabledValue"
+          label="Montant"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputAmount
+          v-model="readonlyValue"
+          label="Montant"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputAmount
+          v-model="errorValue"
+          label="Montant"
+          error="Le montant doit être supérieur à 0"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputAmount
+          v-model="successValue"
+          label="Montant"
+          success="Montant valide"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -196,5 +247,13 @@ Composant input dédié à la saisie d’un montant décimal avec label flottant
 </docs>
 
 <script setup lang="ts">
-import MalioInputAmount from '../components/malio/InputAmount.vue'
+import {ref} from 'vue'
+import MalioInputAmount from '../../components/malio/input/InputAmount.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('1500.00')
+const readonlyValue = ref('2450.75')
+const errorValue = ref('0.00')
+const successValue = ref('350.50')
 </script>

app/story/input/inputNumber.story.vue

@@ -0,0 +1,83 @@
+<template>
+  <Story title="Input/Number">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputNumber
+          v-model="simpleValue"
+          label="Quantite"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
+        <MalioInputNumber
+          v-model="initialValue"
+          label="Participants"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
+        <MalioInputNumber
+          v-model="boundedValue"
+          label="Places"
+          :min="1"
+          :max="5"
+          hint="Minimum 1, maximum 5"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+        <MalioInputNumber
+          v-model="disabledValue"
+          label="Articles"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputNumber
+          v-model="readonlyValue"
+          label="Tickets"
+          readonly
+          hint="Valeur verrouillee"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputNumber
+          v-model="errorValue"
+          label="Quantite"
+          :min="1"
+          error="La quantite minimale est 1"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succes</h2>
+        <MalioInputNumber
+          v-model="successValue"
+          label="Quantite"
+          success="Quantite validee"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputNumber from '../../components/malio/input/InputNumber.vue'
+
+const simpleValue = ref('')
+const initialValue = ref('3')
+const boundedValue = ref('2')
+const disabledValue = ref('4')
+const readonlyValue = ref('7')
+const errorValue = ref('0')
+const successValue = ref('2')
+</script>

app/story/input/inputPassword.story.vue

@@ -0,0 +1,252 @@
+<template>
+  <Story title="Input/Password">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputPassword
+          v-model="simpleValue"
+          label="Mot de passe"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+        <MalioInputPassword
+          v-model="noIconValue"
+          label="Mot de passe"
+          :display-icon="false"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputPassword
+          v-model="hintValue"
+          label="Mot de passe"
+          hint="8 caractères minimum"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputPassword
+          v-model="disabledValue"
+          label="Mot de passe"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputPassword
+          v-model="readonlyValue"
+          label="Mot de passe"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputPassword
+          v-model="errorValue"
+          label="Mot de passe"
+          error="Le mot de passe est trop court"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputPassword
+          v-model="successValue"
+          label="Mot de passe"
+          success="Mot de passe valide"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputPassword
+
+Composant input mot de passe avec label flottant, toggle de visibilité
+(icône oeil), états visuels (erreur / succès) et accessibilité.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML de l'input.
+-   Comportement: Si non fourni, un id unique est généré
+automatiquement.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n'est rendu.
+
+### name
+
+-   Type: string
+-   Description: Attribut name de l'input (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Description: Active ou configure l'autocomplétion navigateur.
+-   Défaut: off
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l'état.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass
+
+-   Type: string
+-   Description: Classes CSS appliquées à l'input.
+
+### labelClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### groupClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au conteneur.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### required
+
+-   Type: boolean
+-   Description: Ajoute l'attribut HTML required.
+
+### maxLength
+
+-   Type: number | string
+-   Description: Longueur maximale autorisée.
+
+### minLength
+
+-   Type: number | string
+-   Description: Longueur minimale autorisée.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### readonly
+
+-   Type: boolean
+-   Description: Rend le champ non modifiable mais focusable.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur.
+-   Effet:
+-   Active l'état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Icône de visibilité
+
+### displayIcon
+
+-   Type: boolean
+-   Défaut: true
+-   Description: Affiche ou masque l'icône toggle de visibilité.
+-   Comportement:
+-   `true` : affiche une icône oeil cliquable à droite de l'input.
+-   `false` : pas d'icône, le type reste `password`.
+
+### Icônes utilisées
+
+-   `mdi:eye-off-outline` : mot de passe masqué (état par défaut).
+-   `mdi:eye-outline` : mot de passe visible (après clic).
+
+### Couleur de l'icône
+
+-   `text-m-muted` par défaut.
+-   `text-m-danger` si la prop `error` est renseignée.
+-   `text-m-success` si la prop `success` est renseignée.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+-   Au clic sur l'icône, le type de l'input alterne entre `password` et `text`.
+-   Aucune validation interne.
+-   Les états sont pilotés uniquement par les props.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence dynamiquement le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification de l'input.
+-   Permet l'utilisation avec v-model.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputPassword from '../../components/malio/input/InputPassword.vue'
+
+const simpleValue = ref('')
+const noIconValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('motdepasse123')
+const readonlyValue = ref('lectureseule')
+const errorValue = ref('abc')
+const successValue = ref('Str0ngP@ss!')
+</script>

app/story/input/inputText.story.vue

@@ -1,8 +1,77 @@
 <template>
-  <Story
-    title="Input/Text"
-  >
-      <MalioInputText/>
+  <Story title="Input/Text">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputText
+          v-model="simpleValue"
+          label="Nom"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputText
+          v-model="hintValue"
+          label="Email"
+          hint="Votre adresse email professionnelle"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputText
+          v-model="disabledValue"
+          label="Nom"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputText
+          v-model="readonlyValue"
+          label="Nom"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputText
+          v-model="errorValue"
+          label="Email"
+          error="Adresse email invalide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputText
+          v-model="successValue"
+          label="Email"
+          success="Email valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec masque (téléphone)</h2>
+        <MalioInputText
+          v-model="maskValue"
+          label="Téléphone"
+          mask="## ## ## ## ##"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+        <MalioInputText
+          v-model="iconValue"
+          label="Recherche"
+          icon-name="mdi:magnify"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -196,5 +265,15 @@ largeur.
 </docs>
 
 <script setup lang="ts">
-import MalioInputText from '../components/malio/InputText.vue'
+import {ref} from 'vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('Jean Dupont')
+const readonlyValue = ref('Marie Martin')
+const errorValue = ref('jean@')
+const successValue = ref('jean@example.com')
+const maskValue = ref('06 12 34 56 78')
+const iconValue = ref('')
 </script>

app/story/input/inputTextArea.story.vue

@@ -1,8 +1,69 @@
 <template>
-  <Story
-    title="Input/TextArea"
-  >
-      <MalioInputTextArea/>
+  <Story title="Input/TextArea">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputTextArea
+          v-model="simpleValue"
+          label="Description"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputTextArea
+          v-model="hintValue"
+          label="Commentaire"
+          hint="255 caractères maximum"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputTextArea
+          v-model="disabledValue"
+          label="Description"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputTextArea
+          v-model="readonlyValue"
+          label="Description"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputTextArea
+          v-model="errorValue"
+          label="Description"
+          error="Ce champ est obligatoire"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputTextArea
+          v-model="successValue"
+          label="Description"
+          success="Description valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec compteur</h2>
+        <MalioInputTextArea
+          v-model="counterValue"
+          label="Bio"
+          :max-length="100"
+          :show-counter="true"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -188,5 +249,14 @@ redimensionnement.
 </docs>
 
 <script setup lang="ts">
-import MalioInputTextArea from '../components/malio/InputTextArea.vue'
+import {ref} from 'vue'
+import MalioInputTextArea from '../../components/malio/input/InputTextArea.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('Texte non modifiable')
+const readonlyValue = ref('Texte en lecture seule')
+const errorValue = ref('')
+const successValue = ref('Description complète et détaillée du projet.')
+const counterValue = ref('Un texte de démonstration')
 </script>

app/story/input/inputUpload.story.vue

@@ -0,0 +1,236 @@
+<template>
+  <Story title="Input/Upload">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputUpload
+          v-model="simpleValue"
+          label="Fichier"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Sans icône</h2>
+        <MalioInputUpload
+          v-model="noIconValue"
+          label="Fichier"
+          :display-icon="false"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputUpload
+          v-model="hintValue"
+          label="Fichier"
+          hint="Formats acceptés : PDF, DOC, DOCX"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputUpload
+          v-model="disabledValue"
+          label="Fichier"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly (avec fichier)</h2>
+        <MalioInputUpload
+          v-model="readonlyValue"
+          label="Fichier"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputUpload
+          v-model="errorValue"
+          label="Fichier"
+          error="Format non supporté"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputUpload
+          v-model="successValue"
+          label="Fichier"
+          success="Fichier valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec accept (PDF)</h2>
+        <MalioInputUpload
+          v-model="acceptValue"
+          label="Document PDF"
+          accept=".pdf"
+          hint="Seuls les fichiers PDF sont acceptés"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputUpload
+
+Composant input d'upload de fichier avec label flottant, icône cloud,
+affichage du nom du fichier sélectionné, états visuels (erreur / succès)
+et accessibilité.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML de l'input.
+-   Comportement: Si non fourni, un id unique est généré automatiquement.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+-   Comportement: Si absent, aucun label n'est rendu.
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Nom du fichier sélectionné (valeur contrôlée).
+-   Comportement:
+-   Si défini → composant contrôlé (v-model).
+-   Sinon → gestion interne de l'état.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass
+
+-   Type: string
+-   Description: Classes CSS appliquées à l'input texte.
+
+### labelClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### groupClass
+
+-   Type: string
+-   Description: Classes CSS appliquées au conteneur.
+
+### displayIcon
+
+-   Type: boolean
+-   Défaut: true
+-   Description: Affiche ou masque l'icône d'upload.
+
+------------------------------------------------------------------------
+
+## Validation & Contraintes
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### accept
+
+-   Type: string
+-   Description: Types de fichiers acceptés (ex: `.pdf,.doc`).
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur.
+-   Effet:
+-   Active l'état visuel erreur.
+-   aria-invalid=true
+-   Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si error est absent.
+
+------------------------------------------------------------------------
+
+## Icône
+
+-   `mdi:cloud-arrow-up-outline` : icône d'upload affichée à droite.
+
+### Couleur de l'icône
+
+-   `text-m-muted` par défaut.
+-   `text-m-danger` si la prop `error` est renseignée.
+-   `text-m-success` si la prop `success` est renseignée.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+-   Au clic sur l'input texte, le sélecteur de fichier natif s'ouvre.
+-   Le nom du fichier sélectionné est affiché dans l'input.
+-   L'input texte est en readonly — la saisie manuelle n'est pas autorisée.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence dynamiquement le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis quand un fichier est sélectionné (valeur = nom du fichier).
+-   Permet l'utilisation avec v-model.
+
+### file-selected
+
+-   Émis quand un fichier est sélectionné (valeur = objet File).
+-   Permet d'accéder au fichier pour l'upload.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputUpload from '../../components/malio/input/InputUpload.vue'
+
+const simpleValue = ref('')
+const noIconValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('document.pdf')
+const readonlyValue = ref('rapport.pdf')
+const errorValue = ref('image.bmp')
+const successValue = ref('rapport.pdf')
+const acceptValue = ref('')
+</script>

app/story/radio/RadioButton.story.vue

@@ -169,7 +169,7 @@ et les états visuels de validation.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../components/malio/RadioButton.vue'
+import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},

app/story/select/InputSelect.story.vue

@@ -1,11 +1,67 @@
 <template>
-  <Story
-    title="Select"
-  >
-      <MalioSelect
-        v-model="value"
-        :options="options"
-      />
+  <Story title="Select/Select">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioSelect
+          v-model="simpleValue"
+          :options="options"
+          label="Pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Valeur présélectionnée</h2>
+        <MalioSelect
+          v-model="preselectedValue"
+          :options="options"
+          label="Pays"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioSelect
+          v-model="disabledValue"
+          :options="options"
+          label="Pays"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioSelect
+          v-model="hintValue"
+          :options="options"
+          label="Pays"
+          hint="Sélectionnez votre pays de résidence"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioSelect
+          v-model="errorValue"
+          :options="options"
+          label="Pays"
+          error="Ce champ est obligatoire"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioSelect
+          v-model="successValue"
+          :options="options"
+          label="Pays"
+          success="Sélection validée"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -121,9 +177,15 @@ largeur.
 </docs>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import MalioSelect from '../components/malio/Select.vue'
-const value = ref<string | number | null>(null)
+import {ref} from 'vue'
+import MalioSelect from '../../components/malio/select/Select.vue'
+
+const simpleValue = ref<string | number | null>(null)
+const preselectedValue = ref<string | number | null>('fr')
+const disabledValue = ref<string | number | null>('be')
+const hintValue = ref<string | number | null>(null)
+const errorValue = ref<string | number | null>(null)
+const successValue = ref<string | number | null>('ch')
 const options = [
   { label: 'France', value: 'fr' },
   { label: 'Belgique', value: 'be' },

app/story/select/selectCheckbox.story.vue

@@ -0,0 +1,213 @@
+<template>
+  <Story title="Select/Checkbox">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioSelectCheckbox
+          v-model="simpleValue"
+          :options="options"
+          label="Pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec tags</h2>
+        <MalioSelectCheckbox
+          v-model="tagValue"
+          :options="options"
+          label="Pays"
+          :display-tag="true"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioSelectCheckbox
+          v-model="hintValue"
+          :options="options"
+          label="Pays"
+          hint="Sélectionnez un ou plusieurs pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioSelectCheckbox
+          v-model="disabledValue"
+          :options="options"
+          label="Pays"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioSelectCheckbox
+          v-model="errorValue"
+          :options="options"
+          label="Pays"
+          error="Sélectionnez au moins un pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioSelectCheckbox
+          v-model="successValue"
+          :options="options"
+          label="Pays"
+          success="Sélection validée"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
+        <MalioSelectCheckbox
+          v-model="selectAllValue"
+          :options="options"
+          label="Pays"
+          :display-select-all="true"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
+        <MalioSelectCheckbox
+          v-model="selectAllCustomValue"
+          :options="options"
+          label="Pays"
+          :display-select-all="true"
+          select-all-label="Cocher tout"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSelectCheckbox
+
+Composant select avec checkboxes multiples, label flottant, tags optionnels,
+états visuels (erreur / succès) et option "tout sélectionner".
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: Array<string | number>
+-   Description: Tableau des valeurs sélectionnées.
+
+### options
+
+-   Type: Array<{ label: string; value: string | number }>
+-   Description: Liste des options disponibles.
+
+### emptyOptionLabel
+
+-   Type: string
+-   Description: Texte affiché quand aucune option n'est sélectionnée (mode tag).
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### displayTag
+
+-   Type: boolean
+-   Défaut: false
+-   Description: Affiche les sélections sous forme de tags au lieu du compteur.
+
+### displaySelectAll
+
+-   Type: boolean
+-   Défaut: false
+-   Description: Affiche une checkbox "Tout sélectionner / Tout désélectionner" en haut de la liste.
+
+### selectAllLabel
+
+-   Type: string
+-   Défaut: "Tout sélectionner"
+-   Description: Label de la checkbox de sélection globale.
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes Tailwind pour contraindre la largeur.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur. Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès. Actif si error est absent.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le composant.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-expanded` et `aria-controls` sur le bouton.
+-   `role="listbox"` sur la liste, `role="option"` et `aria-selected` sur chaque option.
+-   `aria-invalid` activé si error existe.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque changement de sélection.
+-   Retourne un tableau de valeurs.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'
+
+const options = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Allemagne', value: 'de'},
+]
+
+const simpleValue = ref<Array<string | number>>([])
+const tagValue = ref<Array<string | number>>(['fr', 'be'])
+const hintValue = ref<Array<string | number>>([])
+const disabledValue = ref<Array<string | number>>(['fr', 'ch'])
+const errorValue = ref<Array<string | number>>([])
+const successValue = ref<Array<string | number>>(['be', 'ca'])
+const selectAllValue = ref<Array<string | number>>([])
+const selectAllCustomValue = ref<Array<string | number>>([])
+</script>

app/story/sidebar/sidebarMenu.story.vue

@@ -0,0 +1,227 @@
+<template>
+  <Story title="Navigation/Sidebar">
+    <Variant title="Peu de liens">
+      <div class="flex h-[600px] border rounded-lg overflow-hidden">
+        <MalioSidebar
+          v-model="collapsed1"
+          :sections="sectionsShort"
+        >
+          <template #logo>
+            <span class="text-2xl font-bold text-m-primary">Malio</span>
+          </template>
+          <template #logo-collapsed>
+            <span class="text-2xl font-bold text-m-primary">M</span>
+          </template>
+        </MalioSidebar>
+
+        <div class="flex-1 p-6 bg-white">
+          <p class="text-m-muted">
+            Sidebar avec peu de liens, pas de scroll.
+          </p>
+        </div>
+      </div>
+    </Variant>
+
+    <Variant title="Beaucoup de liens (scroll)">
+      <div class="flex h-[600px] border rounded-lg overflow-hidden">
+        <MalioSidebar
+          v-model="collapsed2"
+          :sections="sectionsLong"
+        >
+          <template #logo>
+            <span class="text-2xl font-bold text-m-primary">Malio</span>
+          </template>
+          <template #logo-collapsed>
+            <span class="text-2xl font-bold text-m-primary">M</span>
+          </template>
+        </MalioSidebar>
+
+        <div class="flex-1 p-6 bg-white">
+          <p class="text-m-muted">
+            Sidebar avec beaucoup de liens, scroll visible.
+          </p>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSidebar
+
+Composant de navigation latérale avec support déplié/plié, sections groupées,
+icônes et liens NuxtLink. Un bouton circulaire avec chevron permet de toggle
+entre les deux états.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### sections
+
+- Type: `Array<{ label?: string; items: Array<{ label: string; icon: string; to: string }> }>`
+- Description: Liste des sections du menu. Chaque section a un label optionnel et une liste d'items.
+
+### modelValue
+
+- Type: `boolean`
+- Description: Contrôle l'état plié/déplié (`true` = plié). Supporte `v-model`.
+
+### id
+
+- Type: `string`
+- Description: ID custom pour le composant.
+
+### sidebarClass
+
+- Type: `string`
+- Description: Classes Tailwind additionnelles pour le conteneur sidebar.
+
+### toggleClass
+
+- Type: `string`
+- Description: Classes Tailwind additionnelles pour le bouton toggle.
+
+------------------------------------------------------------------------
+
+## Slots
+
+### logo
+
+- Contenu affiché en haut quand la sidebar est dépliée.
+
+### logo-collapsed
+
+- Contenu affiché en haut quand la sidebar est pliée.
+
+------------------------------------------------------------------------
+
+## Comportement
+
+- **Déplié** : affiche le logo, les labels de section et les items avec texte + icône.
+- **Plié** : affiche le logo réduit et les icônes seules.
+- **Toggle** : bouton circulaire positionné au centre du bord droit, chevron gauche/droite.
+- **Contrôlé / non-contrôlé** : fonctionne avec ou sans `v-model`.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `aria-label` sur le bouton toggle ("Plier le menu" / "Déplier le menu").
+- Navigation sémantique avec `<nav>` et `<ul>/<li>`.
+- Liens via `NuxtLink` pour le routing côté client.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+- Émis à chaque toggle.
+- Retourne `true` (plié) ou `false` (déplié).
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioSidebar from '../../components/malio/sidebar/Sidebar.vue'
+
+const collapsed1 = ref(false)
+const collapsed2 = ref(false)
+
+const sectionsShort = [
+  {
+    label: 'LOGISTIQUE / TRANSPORT',
+    icon: 'mdi:truck-delivery',
+    items: [
+      {label: 'Réception / Expédition', to: '/reception'},
+      {label: 'Validation expédition', to: '/validation'},
+    ],
+  },
+  {
+    label: 'COMMERCIAL',
+    icon: 'mdi:handshake',
+    items: [
+      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
+      {label: 'Répertoire clients', to: '/clients'},
+    ],
+  },
+]
+
+const sectionsLong = [
+  {
+    label: 'LOGISTIQUE / TRANSPORT',
+    icon: 'mdi:truck-delivery',
+    items: [
+      {label: 'Réception / Expédition', to: '/reception'},
+      {label: 'Validation expédition', to: '/validation'},
+      {label: 'Voyage', to: '/voyage'},
+      {label: 'Ticket de pesée', to: '/pesee'},
+      {label: 'Bon de réception', to: '/bon-reception'},
+      {label: "Bon d'expédition", to: '/bon-expedition'},
+    ],
+  },
+  {
+    label: 'USINE / PRODUCTION',
+    icon: 'mdi:factory',
+    items: [
+      {label: 'Fabrication en cours', to: '/fabrication'},
+      {label: 'Liste des fabrications', to: '/fabrications'},
+    ],
+  },
+  {
+    label: 'COMMERCIAL',
+    icon: 'mdi:handshake',
+    items: [
+      {label: 'Répertoire fournisseurs', to: '/fournisseurs'},
+      {label: 'Compagnie fournisseurs', to: '/compagnie-fournisseurs'},
+      {label: 'Répertoire clients', to: '/clients'},
+      {label: 'Contrats en cours', to: '/contrats'},
+      {label: 'Commissions Clients', to: '/commissions'},
+      {label: 'Attribution expédition', to: '/attribution'},
+    ],
+  },
+  {
+    label: 'PRIX',
+    icon: 'mdi:tag',
+    items: [
+      {label: "Prix d'achat/vente", to: '/prix-achat'},
+      {label: "Prix d'achat spécifiques", to: '/prix-specifiques'},
+      {label: 'Prix de ventes clients', to: '/prix-vente'},
+    ],
+  },
+  {
+    label: 'FACTURATION',
+    icon: 'mdi:receipt',
+    items: [
+      {label: 'Expéditions à facturer', to: '/expeditions-facturer'},
+      {label: 'Factures', to: '/factures'},
+    ],
+  },
+  {
+    label: 'TECHNIQUE',
+    icon: 'mdi:cog',
+    items: [
+      {label: 'Répertoire prestataires', to: '/prestataires'},
+      {label: 'Répertoire transporteurs', to: '/transporteurs'},
+    ],
+  },
+  {
+    label: 'SUIVI HEURES',
+    icon: 'mdi:clock-outline',
+    items: [
+      {label: 'Heure Usine', to: '/heure-usine'},
+      {label: 'Heure Extras', to: '/heure-extras'},
+      {label: 'Heure Ferme', to: '/heure-ferme'},
+    ],
+  },
+  {
+    label: 'ADMINISTRATION',
+    icon: 'mdi:shield-account',
+    items: [
+      {label: 'Catalogue produits', to: '/catalogue'},
+      {label: 'Éditer étiquettes', to: '/etiquettes'},
+      {label: 'Organisation catégorie', to: '/organisation'},
+    ],
+  },
+]
+</script>

app/story/tab/tabList.story.vue

@@ -0,0 +1,109 @@
+<template>
+  <Story title="Tab/List">
+    <div class="grid grid-cols-1 gap-6">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec icônes</h2>
+        <MalioTabList v-model="withIcons" :tabs="tabs">
+          <template #qualimat><p class="p-4">Contenu onglet Qualimat</p></template>
+          <template #adresses><p class="p-4">Contenu onglet Adresses</p></template>
+          <template #contacts><p class="p-4">Contenu onglet Contacts</p></template>
+          <template #comptabilite><p class="p-4">Contenu onglet Comptabilité</p></template>
+        </MalioTabList>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Sans icônes</h2>
+        <MalioTabList v-model="withoutIcons" :tabs="tabsNoIcon">
+          <template #tab1><p class="p-4">Contenu onglet 1</p></template>
+          <template #tab2><p class="p-4">Contenu onglet 2</p></template>
+        </MalioTabList>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Deuxième onglet actif par défaut</h2>
+        <MalioTabList v-model="secondActive" :tabs="tabs">
+          <template #qualimat><p class="p-4">Contenu Qualimat</p></template>
+          <template #adresses><p class="p-4">Contenu Adresses (actif par défaut)</p></template>
+          <template #contacts><p class="p-4">Contenu Contacts</p></template>
+          <template #comptabilite><p class="p-4">Contenu Comptabilité</p></template>
+        </MalioTabList>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioTabList
+
+Navigation par onglets avec icônes optionnelles et gestion show/hide des panneaux via slots nommés.
+
+---
+
+## Props détaillées
+
+### tabs
+
+- Type: `Array<{ key: string; label: string; icon?: string }>`
+- Requis: oui
+- Description: Définit les onglets. Chaque entrée correspond à un slot nommé par `key`.
+
+### modelValue
+
+- Type: `string`
+- Description: Clé de l'onglet actif. Sans v-model, le premier onglet est actif par défaut (mode non contrôlé).
+
+### id
+
+- Type: `string`
+- Description: Préfixe pour les IDs d'accessibilité. Auto-généré si absent.
+
+---
+
+## Slots
+
+Un slot nommé par `tab.key` pour chaque onglet. Le contenu du slot est affiché/masqué automatiquement.
+
+```html
+<MalioTabList :tabs="[{ key: 'foo', label: 'Foo' }]">
+  <template #foo>Contenu de Foo</template>
+</MalioTabList>
+```
+
+---
+
+## Accessibilité
+
+- `role="tablist"` sur le conteneur
+- `role="tab"` avec `aria-selected`, `aria-controls`, `tabindex` sur chaque bouton
+- `role="tabpanel"` avec `aria-labelledby` sur chaque panneau
+
+---
+
+## Events
+
+### update:modelValue
+
+- Émis au clic sur un onglet
+- Retourne la clé (`string`) de l'onglet sélectionné
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioTabList from '../../components/malio/tab/TabList.vue'
+
+const tabs = [
+  { key: 'qualimat', label: 'Qualimat', icon: 'mdi:certificate-outline' },
+  { key: 'adresses', label: 'Adresses', icon: 'mdi:map-marker-outline' },
+  { key: 'contacts', label: 'Contacts', icon: 'mdi:account-box-outline' },
+  { key: 'comptabilite', label: 'Comptabilité', icon: 'mdi:web' },
+]
+
+const tabsNoIcon = [
+  { key: 'tab1', label: 'Onglet 1' },
+  { key: 'tab2', label: 'Onglet 2' },
+]
+
+const withIcons = ref('qualimat')
+const withoutIcons = ref('tab1')
+const secondActive = ref('adresses')
+</script>

app/story/time/inputTime.story.vue

@@ -0,0 +1,89 @@
+<template>
+  <Story title="Input/Time">
+    <div class="grid grid-cols-1 items-start gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioTime v-model="simpleValue" />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+        <MalioTime
+          v-model="labeledValue"
+          label="Heure de depart"
+          name="departure-time"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
+        <MalioTime
+          v-model="initialValue"
+          label="Heure d'arrivee"
+          hint="Format HH:MM"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Required</h2>
+        <MalioTime
+          v-model="requiredValue"
+          label="Heure limite"
+          required
+          hint="Champ obligatoire"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+        <MalioTime
+          v-model="disabledValue"
+          label="Heure verrouillee"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioTime
+          v-model="readonlyValue"
+          label="Heure en lecture seule"
+          readonly
+          hint="Visible mais non modifiable"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioTime
+          v-model="errorValue"
+          label="Heure de fermeture"
+          error="L'heure saisie n'est pas valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succes</h2>
+        <MalioTime
+          v-model="successValue"
+          label="Heure confirmee"
+          success="Horaire enregistre"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioTime from '../../components/malio/time/Time.vue'
+
+const simpleValue = ref('')
+const labeledValue = ref('')
+const initialValue = ref('08:30')
+const requiredValue = ref('')
+const disabledValue = ref('14:15')
+const readonlyValue = ref('18:45')
+const errorValue = ref('25:90')
+const successValue = ref('09:00')
+</script>