feat : ajout du composant input number

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|          #362        |       Création d'un composant de type Montant          |

## 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é

Reviewed-on: #4
Reviewed-by: Autin <tristan@yuno.malio.fr>
Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-committed-by: kevin <kevin@yuno.malio.fr>

.playground/pages/composant/inputAmount.vue

@@ -0,0 +1,60 @@
+<template>
+  <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>
+      <MalioInputAmount />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputAmount
+        label="Montant"
+        name="amount"
+        autocomplete="off"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputAmount
+        model-value="125.00"
+        disabled
+        label="Montant désactivé"
+      />
+      <MalioInputAmount
+        disabled
+        label="Montant désactivé"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputAmount
+        model-value="42.50"
+        readonly
+        label="Montant readonly"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur et succès</h2>
+      <div class="mt-4">
+        <MalioInputAmount
+          model-value="12.3"
+          label="Montant"
+          error="Le montant est incorrect"
+        />
+      </div>
+      <div class="mt-4">
+        <MalioInputAmount
+          model-value="89.90"
+          label="Montant"
+          success="Montant valide"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>

.playground/pages/composant/inputNumber.vue

@@ -0,0 +1,80 @@
+<template>
+  <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>
+      <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>
+</template>
+
+<script setup lang="ts">
+import {ref} from '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>

.playground/pages/composant/inputText.vue

@@ -0,0 +1,184 @@
+<template>
+  <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>
+      <MalioInputText
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioInputText
+        v-model="nameValue"
+        label="Nom d'utilisateur"
+        name="username"
+        autocomplete="username"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône à droite</h2>
+      <MalioInputText
+        v-model="searchValue"
+        label="Recherche"
+        icon-name="mdi:magnify"
+        icon-size="20"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône à gauche</h2>
+      <MalioInputText
+        label="Recherche"
+        icon-name="mdi:magnify"
+        icon-size="20"
+        icon-position="left"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioInputText
+        model-value="Valeur verrouillée"
+        disabled
+        label="Champ désactivé"
+      />
+      <MalioInputText
+        disabled
+        label="Champ désactivé"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <MalioInputText
+        model-value="Lecture seule"
+        readonly
+        label="Champ readonly"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
+      <MalioInputText
+        v-model="cityValue"
+        label="Ville"
+        icon-name="mdi:map-marker-outline"
+        icon-size="20"
+        hint="Commencez à taper le nom de la ville"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
+      <MalioInputText
+        model-value="ab"
+        label="Code promo"
+        icon-name="mdi:alert-circle-outline"
+        icon-size="20"
+        error="Le code est invalide"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
+      <MalioInputText
+        label="Code"
+        success="Code valide"
+        icon-name="mdi:alert-circle-outline"
+        icon-size="20"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly + icône</h2>
+      <MalioInputText
+        model-value="Commande #A-2048"
+        label="Référence"
+        readonly
+        icon-name="mdi:lock-outline"
+        icon-size="20"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé + icône</h2>
+      <MalioInputText
+        model-value="Compte indisponible"
+        label="Compte"
+        disabled
+        icon-name="mdi:account-off-outline"
+        icon-size="20"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec masque</h2>
+      <MalioInputText
+        label="Plaque d'immatriculation"
+        :mask="maskOptions"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Code dynamique</h2>
+      <MalioInputText
+        v-model="dynamicCodeValue"
+        label="Code d'accès"
+        hint="Format attendu: 6 à 10 caractères alphanumériques"
+        :error="dynamicCodeError"
+        :success="dynamicCodeSuccess"
+        icon-name="mdi:key-outline"
+        icon-size="20"
+      />
+    </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succès</h2>
+      <MalioInputText
+        v-model="codeValue"
+        label="Code"
+        hint="Format attendu: 6 à 10 caractères alphanumériques"
+      />
+      <div class="mt-4">
+        <MalioInputText
+          model-value="invalide"
+          label="Code"
+          error="Le code doit contenir au moins 6 caractères"
+        />
+      </div>
+      <div class="mt-4">
+        <MalioInputText
+          model-value="valide"
+          label="Code"
+          success="Le code est valide"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+const nameValue = ref('')
+const searchValue = ref('')
+const codeValue = ref('')
+const cityValue = ref('')
+const dynamicCodeValue = ref('')
+
+const codeRegex = /^[A-Z0-9]{6,10}$/
+const normalizedDynamicCode = computed(() => dynamicCodeValue.value.toUpperCase())
+const isDynamicCodeValid = computed(() => codeRegex.test(normalizedDynamicCode.value))
+const dynamicCodeError = computed(() => {
+  if (!dynamicCodeValue.value) return ''
+  return isDynamicCodeValid.value ? '' : 'Code invalide (6 à 10 caractères alphanumériques)'
+})
+const dynamicCodeSuccess = computed(() => {
+  if (!dynamicCodeValue.value) return ''
+  return isDynamicCodeValid.value ? 'Code valide' : ''
+})
+
+const maskOptions = {
+  mask: '@@-###-@@',
+  tokens: {
+    '@': {
+      pattern: /[A-Za-z]/,
+      transform: (char: string) => char.toUpperCase()
+    }
+  }
+}
+</script>

.playground/pages/composant/inputTextArea.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="grid grid-cols-1 items-start gap-6 p-4 md:grid-cols-2">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <MalioInputTextArea/>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label + hint</h2>
+      <MalioInputTextArea
+        v-model="hintValue"
+        label="Description"
+        hint="Ajoutez un contexte clair"
+        :size="4"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+      <MalioInputTextArea
+        v-model="iconValue"
+        label="Commentaire"
+        icon-name="mdi:comment-text-outline"
+        :size="3"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur / Succès</h2>
+      <div class="space-y-4">
+        <MalioInputTextArea
+          v-model="errorValue"
+          label="Message"
+          error="Le message est trop court"
+          :size="3"
+        />
+        <MalioInputTextArea
+          v-model="successValue"
+          label="Message"
+          success="Message valide"
+          :size="3"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly / Disabled</h2>
+      <div class="space-y-4">
+        <MalioInputTextArea
+          model-value="Contenu en lecture seule"
+          label="Readonly"
+          readonly
+          :size="3"
+        />
+        <MalioInputTextArea
+          model-value="Champ indisponible"
+          label="Disabled"
+          disabled
+          :size="3"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Resize avec limites</h2>
+      <MalioInputTextArea
+        v-model="resizeValue"
+        label="Notes"
+        resize="both"
+        :size="4"
+        :min-resize-width="300"
+        :max-resize-width="700"
+        :min-resize-height="120"
+        :max-resize-height="280"
+        hint="Resize limite en largeur et hauteur"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Compteur (interne au composant)</h2>
+      <MalioInputTextArea
+        v-model="counterValue"
+        label="Message"
+        :size="5"
+        :max-length="120"
+        :show-counter="true"
+        hint="Le compteur est en bas a gauche"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'
+
+const hintValue = ref('')
+const iconValue = ref('')
+const errorValue = ref('abc')
+const successValue = ref('Contenu ok')
+const resizeValue = ref('Vous pouvez redimensionner ce champ.')
+const counterValue = ref('')
+
+</script>

.playground/pages/composant/select.vue

@@ -0,0 +1,149 @@
+<template>
+  <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>
+      <MalioSelect
+        v-model="basicValue"
+        :options="options"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Avec label</h2>
+      <MalioSelect
+        v-model="labelValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Valeur preselectionnee</h2>
+      <MalioSelect
+        v-model="selectedValue"
+        :options="options"
+        label="Pays"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Hint</h2>
+      <MalioSelect
+        v-model="hintValue"
+        :options="options"
+        label="Pays"
+        hint="Choisissez votre pays"
+        empty-option-label="Aucune selection"
+      />
+    </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 selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes</h2>
+      <MalioSelect
+        v-model="successValue"
+        :options="options"
+        label="Pays"
+        success="Selection validee"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
+      <MalioSelect
+        v-model="disabledValue"
+        :options="options"
+        label="Pays"
+        disabled
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Sans options</h2>
+      <MalioSelect
+        v-model="emptyValue"
+        label="Pays"
+        empty-option-label="Aucun pays disponible"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Liste longue</h2>
+      <MalioSelect
+        v-model="longListValue"
+        :options="longOptions"
+        label="Pays"
+        hint="Permet de verifier la scrollbar"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+
+    <div class="rounded-lg border p-4 md:col-span-2">
+      <h2 class="mb-4 text-xl font-bold">Ouverture en bas de page</h2>
+      <div class="h-64" />
+      <MalioSelect
+        v-model="bottomValue"
+        :options="longOptions"
+        label="Ouverture adaptative"
+        hint="A ouvrir pres du bas de la page"
+        empty-option-label="Aucune selection"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const options = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Allemagne', value: 'de'},
+  {label: 'Espagne', value: 'es'},
+  {label: 'Italie', value: 'it'},
+  {label: 'Portugal', value: 'pt'},
+]
+
+const longOptions = [
+  ...options,
+  {label: 'Pays-Bas', value: 'nl'},
+  {label: 'Suede', value: 'se'},
+  {label: 'Norvege', value: 'no'},
+  {label: 'Danemark', value: 'dk'},
+  {label: 'Finlande', value: 'fi'},
+  {label: 'Autriche', value: 'at'},
+  {label: 'Irlande', value: 'ie'},
+  {label: 'Grece', value: 'gr'},
+  {label: 'Pologne', value: 'pl'},
+  {label: 'Hongrie', value: 'hu'},
+  {label: 'Republique tcheque', value: 'cz'},
+]
+
+const basicValue = ref<string | number | null>(null)
+const labelValue = ref<string | number | null>(null)
+const selectedValue = ref<string | number | null>('fr')
+const hintValue = ref<string | number | null>(null)
+const errorValue = ref<string | number | null>(null)
+const successValue = ref<string | number | null>('be')
+const disabledValue = ref<string | number | null>('ca')
+const emptyValue = ref<string | number | null>(null)
+const longListValue = ref<string | number | null>(null)
+const bottomValue = ref<string | number | null>(null)
+</script>

.playground/pages/index.vue

@@ -1,11 +1,128 @@
 <template>
-  <div class="p-6 space-y-4">
-    <MalioInput v-model="v" label="Email" placeholder="you@example.com" />
-    <pre class="text-xs">{{ v }}</pre>
+  <div class="flex min-h-screen">
+    <aside class="w-72 bg-m-bg p-6 text-white">
+      <button
+        type="button"
+        class="text-xl text-black font-semibold"
+        @click="clearSelection"
+      >
+        Liste des composants
+      </button>
+
+      <nav class="mt-6 flex flex-col gap-2">
+        <button
+          v-for="item in items"
+          :key="item.name"
+          type="button"
+          class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
+          :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
+          @click="selectOrToggle(item.name)"
+        >
+          {{ item.label }}
+        </button>
+      </nav>
+    </aside>
+
+    <main class="flex-1 p-6">
+      <component
+        :is="selectedDemoComponent"
+        v-if="selectedDemoComponent"
+      />
+      <p
+        v-else-if="selectedName"
+        class="text-gray-700"
+      >
+        Page de demo introuvable:
+        <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
+      </p>
+      <div v-else>
+        <h1 class="text-2xl font-semibold text-gray-900">
+          Playground composants
+        </h1>
+        <p class="mt-2 text-gray-600">
+          Selectionne un composant dans la liste pour afficher sa page de demo.
+        </p>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
-const v = ref('')
-</script>
+import { computed, ref, watch, shallowRef } from 'vue'
 
+type LoadedModule = {
+  default: unknown
+}
+
+type Item = {
+  name: string
+  label: string
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/*.vue')
+const demoModules = import.meta.glob('./composant/*.vue')
+
+const demoByName: Record<string, () => Promise<LoadedModule>> =
+  Object.fromEntries(
+    Object.entries(demoModules).map(([file, loader]) => {
+      const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+      return [name.toLowerCase(), loader as () => Promise<LoadedModule>]
+    }),
+  )
+
+const items = computed<Item[]>(() =>
+  Object.keys(componentModules).map((file) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+    return {
+      name,
+      label: name,
+    }
+  }),
+)
+
+const selectedName = ref('')
+const hasInitializedSelection = ref(false)
+
+watch(
+  items,
+  (val) => {
+    if (!hasInitializedSelection.value && val.length > 0) {
+      selectedName.value = val[0].name
+      hasInitializedSelection.value = true
+    }
+  },
+  { immediate: true },
+)
+
+function selectOrToggle(name: string) {
+  selectedName.value = selectedName.value === name ? '' : name
+}
+
+function clearSelection() {
+  selectedName.value = ''
+}
+
+const selectedDemoComponent = shallowRef<unknown>(null)
+
+watch(selectedName, async (name) => {
+  if (!name) {
+    selectedDemoComponent.value = null
+    return
+  }
+
+  const loader = demoByName[name.toLowerCase()]
+  if (!loader) {
+    selectedDemoComponent.value = null
+    return
+  }
+
+  const mod = await loader()
+  selectedDemoComponent.value = mod.default
+})
+
+const selectedDemoFileName = computed(() => {
+  const name = selectedName.value
+  if (!name) return ''
+  return name.charAt(0).toLowerCase() + name.slice(1)
+})
+</script>

CHANGELOG.md

@@ -6,6 +6,7 @@ Liste des évolutions de la librairie Malio layer UI
 ### Parameters
 
 ### Added
+* [#333] Création d'un composant text
 
 ### Changed
 

app/assets/css/malio.css

@@ -0,0 +1,19 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* Couleurs en RGB “space separated” pour Tailwind */
+    --m-primary: 34 39 131;       /* Couleur principal*/
+    --m-secondary: 48 73 152;     /* Couleur secondaire */
+    --m-tertiary: 243 244 248;    /* Couleur tertiaire (background) */
+    --m-border: 203 213 225;      /* Couleur des bordures */
+    --m-text: 15 23 42;           /*  Couleur du texte */
+    --m-muted: 100 116 139;       /* Couleur pour les éléments désactivés ou secondaires */
+    --m-bg: 243 244 248;          /* Couleur de fond générale */
+
+    --m-error: 155 17 30;         /* rouge pour les erreurs */
+    --m-success: 15 149 70;       /* vert pour les succès  */
+  }
+}

app/components/malio/Input.test.ts

@@ -1,23 +1,297 @@
-import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Input from './Input.vue'
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Input from './InputText.vue'
 
-describe('MalioInput', () => {
-  it('affiche la valeur initiale', () => {
-    const wrapper = mount(Input, {
-      props: { modelValue: 'hello' },
-    })
+type InputProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  iconSize?: string | number
+  iconColor?: string
+}
 
-    expect(wrapper.get('input').element.value).toBe('hello')
+const InputForTest = Input as DefineComponent<InputProps>
+
+const mountInput = (props: InputProps = {}) =>
+  mount(InputForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
   })
 
-  it('emet update:modelValue au changement', async () => {
-    const wrapper = mount(Input, {
-      props: { modelValue: '' },
-    })
+describe('MalioInputText', () => {
+  it('renders the initial input value', () => {
+    const wrapper = mountInput({modelValue: 'initialValueTest'})
+
+    expect(wrapper.get('input').element.value).toBe('initialValueTest')
+  })
+
+  it('renders the label text', () => {
+    const wrapper = mountInput({label: 'labelTest'})
+
+    expect(wrapper.get('label').text()).toBe('labelTest')
+  })
+
+  it('applies the name attribute', () => {
+    const wrapper = mountInput({name: 'nameTest'})
+
+    expect(wrapper.get('input').attributes('name')).toBe('nameTest')
+  })
+
+  it('uses provided id on input and label', () => {
+    const wrapper = mountInput({id: 'custom-id', label: 'Label'})
+
+    expect(wrapper.get('input').attributes('id')).toBe('custom-id')
+    expect(wrapper.get('label').attributes('for')).toBe('custom-id')
+  })
+
+  it('keeps the default rounded class on input', () => {
+    const wrapper = mountInput()
+
+    expect(wrapper.get('input').classes()).toContain('rounded-md')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountInput({label: 'Label'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-text-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the autocomplete attribute', () => {
+    const wrapper = mountInput({autocomplete: 'autocompleteTest'})
+
+    expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
+  })
+
+  it('does not set required when false', () => {
+    const wrapper = mountInput({required: false})
+
+    expect(wrapper.get('input').attributes('required')).toBeUndefined()
+  })
+
+  it('sets required when true', () => {
+    const wrapper = mountInput({required: true})
+
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('does not set readonly when false', () => {
+    const wrapper = mountInput({readonly: false})
+
+    expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
+  })
+
+  it('sets readonly when true', () => {
+    const wrapper = mountInput({readonly: true})
+
+    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
+  })
+
+  it('does not set disabled and keeps text cursor when false', () => {
+    const wrapper = mountInput({disabled: false})
+
+    expect(wrapper.get('input').attributes('disabled')).toBeUndefined()
+    expect(wrapper.get('input').classes()).toContain('cursor-text')
+  })
+
+  it('sets disabled styles when true', () => {
+    const wrapper = mountInput({disabled: true})
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('input').classes()).toContain('cursor-not-allowed')
+    expect(wrapper.get('input').classes()).toContain('text-black/60')
+  })
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mountInput({modelValue: ''})
 
     await wrapper.get('input').setValue('new value')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
   })
+
+  it('applies maxLength to input', () => {
+    const wrapper = mountInput({maxLength: 25})
+
+    expect(wrapper.get('input').attributes('maxlength')).toBe('25')
+  })
+
+  it('applies minLength to input', () => {
+    const wrapper = mountInput({minLength: 25})
+
+    expect(wrapper.get('input').attributes('minlength')).toBe('25')
+  })
+
+  it('applies labelClass on label', () => {
+    const wrapper = mountInput({label: 'Label', labelClass: 'text-red-500'})
+
+    expect(wrapper.get('label').classes()).toContain('text-red-500')
+  })
+
+  it('applies inputClass on input', () => {
+    const wrapper = mountInput({inputClass: 'text-sm'})
+
+    expect(wrapper.get('input').classes()).toContain('text-sm')
+  })
+
+  it('shows error message without label and icon', () => {
+    const wrapper = mountInput({error: 'Error message test'})
+
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+  })
+
+  it('shows error message with label and without icon', () => {
+    const wrapper = mountInput({error: 'Error message test', label: 'Error message'})
+
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+  })
+
+  it('shows error message with label and icon', () => {
+    const wrapper = mountInput({
+      error: 'Error message test',
+      label: 'Error message',
+      iconName: 'mdi:key-outline',
+    })
+
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
+  })
+
+  it('shows error message with icon and without label', () => {
+    const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})
+
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+  })
+
+  it('shows success message without label and icon', () => {
+    const wrapper = mountInput({success: 'Success message test'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+  })
+
+  it('shows success message with label and without icon', () => {
+    const wrapper = mountInput({success: 'Success message test', label: 'Success message'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+  })
+
+  it('shows success message with label and icon', () => {
+    const wrapper = mountInput({
+      success: 'Success message test',
+      label: 'Success message',
+      iconName: 'mdi:key-outline',
+    })
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('shows success message with icon and without label', () => {
+    const wrapper = mountInput({success: 'Success message test', iconName: 'mdi:key-outline'})
+
+    expect(wrapper.get('p.text-m-success').text()).toBe('Success message test')
+    expect(wrapper.get('input').classes()).toContain('border-m-success')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-success')
+  })
+
+  it('prioritizes error over success when both are provided', () => {
+    const wrapper = mountInput({
+      error: 'Error message test',
+      success: 'Success message test',
+    })
+
+    expect(wrapper.find('p.text-m-error').exists()).toBe(true)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).not.toContain('border-m-success')
+  })
+
+  it('shows hint message', () => {
+    const wrapper = mountInput({hint: 'Hint message test'})
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
+  })
+
+  it('does not render label when label prop is missing', () => {
+    const wrapper = mountInput({labelClass: 'text-red-500'})
+
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  it('renders icon with default positioning and muted color', () => {
+    const wrapper = mountInput({iconName: 'mdi:key-outline'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('pointer-events-none')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('absolute')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('top-1/2')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('-translate-y-1/2')
+  })
+
+  it('renders icon on the left when requested', () => {
+    const wrapper = mountInput({
+      iconName: 'mdi:key-outline',
+      iconPosition: 'left',
+      label: 'Password',
+    })
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('input').classes()).toContain('!pl-11')
+    expect(wrapper.get('label').classes()).toContain('left-8')
+  })
+
+  it('passes icon size props to icon component', () => {
+    const wrapper = mountInput({iconName: 'mdi:key-outline', iconSize: '24'})
+
+    expect(wrapper.get('[data-test="icon"]').attributes('width')).toBe('24')
+    expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
+  })
+
+  it('applies icon color class', () => {
+    const wrapper = mountInput({iconName: 'mdi:key-outline', iconColor: 'text-m-primary'})
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
+  })
 })

app/components/malio/Input.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="space-y-1">
-    <label v-if="label" :for="id" class="text-sm font-medium text-gray-700">{{ label }}</label>
-    <input
-      :id="id"
-      :value="props.modelValue"
-      :type="props.type"
-      :placeholder="props.placeholder"
-      class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm outline-none transition focus:border-gray-500"
-      @input="onInput"
-    >
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(defineProps<{
-  modelValue?: string
-  type?: string
-  label?: string
-  placeholder?: string
-  id?: string
-}>(), {
-  modelValue: '',
-  type: 'text',
-  label: '',
-  placeholder: '',
-  id: undefined,
-})
-
-const emit = defineEmits<{
-  (e: 'update:modelValue', value: string): void
-}>()
-
-function onInput(event: Event) {
-  const target = event.target as HTMLInputElement
-  emit('update:modelValue', target.value)
-}
-</script>

app/components/malio/InputAmount.test.ts

@@ -0,0 +1,163 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputAmount from './InputAmount.vue'
+
+type InputAmountProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  iconName?: string
+  iconPosition?: 'left' | 'right'
+  iconSize?: string | number
+  iconColor?: string
+}
+
+const InputAmountForTest = InputAmount as DefineComponent<InputAmountProps>
+
+const mountInputAmount = (props: InputAmountProps = {}) =>
+  mount(InputAmountForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputAmount', () => {
+  it('renders as a text input with decimal input mode', () => {
+    const wrapper = mountInputAmount()
+
+    expect(wrapper.get('input').attributes('type')).toBe('text')
+    expect(wrapper.get('input').attributes('inputmode')).toBe('decimal')
+  })
+
+  it('renders the default icon with muted styling', () => {
+    const wrapper = mountInputAmount()
+
+    expect(wrapper.get('[data-test="icon"]').exists()).toBe(true)
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-muted')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('right-2')
+  })
+
+  it('generates an amount-specific id', () => {
+    const wrapper = mountInputAmount({label: 'Montant'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-input-amount-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the provided input classes', () => {
+    const wrapper = mountInputAmount({inputClass: 'text-right'})
+
+    expect(wrapper.get('input').classes()).toContain('text-right')
+  })
+
+  it('links hint text through aria-describedby', () => {
+    const wrapper = mountInputAmount({hint: 'Saisissez un montant'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
+    expect(wrapper.get('p').attributes('id')).toBe(`${inputId}-describedby`)
+  })
+
+  it('sets aria-invalid and describedby when showing an error', () => {
+    const wrapper = mountInputAmount({error: 'Montant invalide'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Montant invalide')
+  })
+
+  it('keeps dots as the decimal separator on input', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('12.5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
+    expect(wrapper.get('input').element.value).toBe('12.5')
+  })
+
+  it('accepts commas but normalizes them to dots', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue('0012,345abc')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.34'])
+    expect(wrapper.get('input').element.value).toBe('12.34')
+  })
+
+  it('normalizes a leading decimal separator', async () => {
+    const wrapper = mountInputAmount({modelValue: ''})
+
+    await wrapper.get('input').setValue(',5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
+    expect(wrapper.get('input').element.value).toBe('0.5')
+  })
+
+  it('keeps the normalized decimal value on blur', async () => {
+    const wrapper = mountInputAmount()
+    const input = wrapper.get('input')
+
+    await input.setValue('12.5')
+    await input.trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['12.5']])
+    expect(input.element.value).toBe('12.5')
+  })
+
+  it('keeps integer values unchanged on blur', async () => {
+    const wrapper = mountInputAmount()
+    const input = wrapper.get('input')
+
+    await input.setValue('12')
+    await input.trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['12']])
+    expect(input.element.value).toBe('12')
+  })
+
+  it('keeps an empty value empty on blur', async () => {
+    const wrapper = mountInputAmount()
+    const input = wrapper.get('input')
+
+    await input.setValue('')
+    await input.trigger('blur')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['']])
+    expect(input.element.value).toBe('')
+  })
+
+  it('supports icon positioning on the left', () => {
+    const wrapper = mountInputAmount({
+      label: 'Montant',
+      iconPosition: 'left',
+    })
+
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('left-2')
+    expect(wrapper.get('input').classes()).toContain('!pl-11')
+    expect(wrapper.get('label').classes()).toContain('left-8')
+  })
+})

app/components/malio/InputAmount.vue

@@ -0,0 +1,255 @@
+<template>
+  <div
+    :class="mergedGroupClass"
+  >
+    <input
+      :id="inputId"
+      :name="name"
+      :autocomplete="autocomplete"
+      :class="mergedInputClass"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="currentValue"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      type="text"
+      inputmode="decimal"
+      placeholder="_"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="onBlur"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+
+    <IconifyIcon
+      v-if="iconName"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
+      :class="[
+      hasError
+        ? 'text-m-error'
+        : hasSuccess
+          ? 'text-m-success' : iconColor,
+      iconPositionClass,
+    ]"
+    />
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputAmount', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    iconName?: string
+    iconPosition?: 'left' | 'right'
+    iconSize?: string | number
+    iconColor?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    iconName: 'mdi:currency-eur',
+    iconPosition: 'right',
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    iconSize: 24,
+    iconColor: 'text-m-muted',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-amount-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+const isFilled = computed(() => currentValue.value.trim().length > 0)
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+    hasError.value
+      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : 'focus:border-m-primary',
+    props.inputClass,
+    iconInputPaddingClass.value,
+    focusPaddingClass.value,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    labelPositionClass.value,
+    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError.value
+      ? 'text-m-error'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+    props.labelClass,
+  ),
+)
+
+const describedBy = computed(() => {
+  if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
+  return `${inputId.value}-describedby`
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const normalizeAmount = (value: string) => {
+  const sanitizedValue = value
+    .replace(/\s+/g, '')
+    .replace(/,/g, '.')
+    .replace(/[^\d.]/g, '')
+  const [integerPartRaw = '', ...decimalParts] = sanitizedValue.split('.')
+  const integerPart = integerPartRaw.replace(/^0+(?=\d)/, '')
+  const decimalPart = decimalParts.join('').slice(0, 2)
+
+  if (sanitizedValue.includes('.')) {
+    return `${integerPart || '0'}.${decimalPart}`
+  }
+
+  return integerPart
+}
+
+// Keep the DOM input value, local state, and v-model emission in sync.
+const updateValue = (target: HTMLInputElement, value: string) => {
+  target.value = value
+  if (!isControlled.value) {
+    localValue.value = value
+  }
+  emit('update:modelValue', value)
+}
+
+// Normalize while typing so the field never keeps invalid amount characters.
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  updateValue(target, normalizeAmount(target.value))
+}
+
+// Keep the blur handler only for focus-driven UI state.
+const onBlur = () => {
+  isFocused.value = false
+}
+
+const iconInputPaddingClass = computed(() => {
+  if (!props.iconName) return ''
+  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : ''
+})
+
+const disabled = computed(() => props.disabled)
+
+const labelPositionClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  return 'left-3'
+})
+
+const focusPaddingClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  return 'focus:pl-[11px]'
+})
+
+const iconPositionClass = computed(() => {
+  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
+})
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
+}
+
+.grow-height:focus {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .grow-height { transition: none; }
+}
+</style>

app/components/malio/InputNumber.test.ts

@@ -0,0 +1,165 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputNumber from './InputNumber.vue'
+
+type InputNumberProps = {
+  modelValue?: string | null
+  label?: string
+  readonly?: boolean
+  min?: number | string
+  max?: number | string
+}
+
+const InputNumberForTest = InputNumber as DefineComponent<InputNumberProps>
+
+const mountInputNumber = (props: InputNumberProps = {}) =>
+  mount(InputNumberForTest, {
+    props,
+    global: {
+      stubs: {
+        IconifyIcon: {
+          template: '<span data-test="icon" v-bind="$attrs" />',
+        },
+      },
+    },
+  })
+
+describe('MalioInputNumber', () => {
+  it('renders the input with a fixed 20px height', () => {
+    const wrapper = mountInputNumber()
+    const input = wrapper.get('input')
+
+    expect(input.classes()).toContain('h-[20px]')
+  })
+
+  it('renders the increment and decrement buttons with a fixed 20px height', () => {
+    const wrapper = mountInputNumber()
+    const buttons = wrapper.findAll('button')
+
+    expect(buttons).toHaveLength(2)
+  })
+
+  it('still emits update:modelValue on input', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('99')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['99'])
+  })
+
+  it('filters letters from the input value', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('a1b2c3')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['123'])
+    expect(input.element.value).toBe('123')
+  })
+
+  it('formats large numbers with spaces in the input display', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('1000000')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1000000'])
+    expect(input.element.value).toBe('1 000 000')
+  })
+
+  it('accepts decimal values with commas', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('12,5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.5'])
+    expect(input.element.value).toBe('12.5')
+  })
+
+  it('keeps a trailing decimal separator while typing', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue('12,')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['12.'])
+    expect(input.element.value).toBe('12.')
+  })
+
+  it('accepts a decimal starting with a comma', async () => {
+    const wrapper = mountInputNumber({modelValue: ''})
+    const input = wrapper.get('input')
+
+    await input.setValue(',5')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['0.5'])
+    expect(input.element.value).toBe('0.5')
+  })
+
+  it('increments the current value when clicking plus', async () => {
+    const wrapper = mountInputNumber({modelValue: '2'})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['3'])
+  })
+
+  it('increments decimal values with a step of 1', async () => {
+    const wrapper = mountInputNumber({modelValue: '1.5'})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['2.5'])
+  })
+
+  it('decrements the current value when clicking minus', async () => {
+    const wrapper = mountInputNumber({modelValue: '2'})
+
+    await wrapper.findAll('button')[0].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['1'])
+  })
+
+  it('does not change the value from buttons when readonly', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', readonly: true})
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('disables minus and prevents decrement at min', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', min: 2})
+    const minusButton = wrapper.findAll('button')[0]
+
+    expect(minusButton.attributes('disabled')).toBeDefined()
+
+    await minusButton.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('disables plus and prevents increment at max', async () => {
+    const wrapper = mountInputNumber({modelValue: '2', max: 2})
+    const plusButton = wrapper.findAll('button')[1]
+
+    expect(plusButton.attributes('disabled')).toBeDefined()
+
+    await plusButton.trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+  })
+
+  it('clamps manual input to max', async () => {
+    const wrapper = mountInputNumber({modelValue: '', max: 5})
+    const input = wrapper.get('input')
+
+    await input.setValue('12')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['5'])
+    expect(input.element.value).toBe('5')
+  })
+})

app/components/malio/InputNumber.vue

@@ -0,0 +1,300 @@
+<template>
+  <div :class="mergedGroupClass" >
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+    <button
+      type="button"
+      :disabled="isMinusDisabled"
+      @click="decrement"
+    >
+      <IconifyIcon
+        icon="mdi:minus"
+        :class="mergedButtonMinusClass"
+      />
+    </button>
+    <input
+      :id="inputId"
+      :name="name"
+      autocomplete="off"
+      :class="mergedInputClass"
+      :style="inputWidthStyle"
+      :value="displayedValue"
+      :required="required"
+      :disabled="disabled"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      type="text"
+      inputmode="numeric"
+      placeholder="_"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    >
+    <button
+      type="button"
+      :disabled="isPlusDisabled"
+      @click="increment"
+    >
+      <IconifyIcon
+        icon="mdi:plus"
+        :class="mergedButtonPlusClass"
+      />
+    </button>
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputNumber', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    min?: number | string
+    max?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    modelValue: undefined,
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    min: undefined,
+    max: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+
+// Ajoute un separateur de milliers pour l'affichage dans le champ.
+const formatDisplayValue = (value: string) => {
+  if (!value) return ''
+  const [integerPart = '', decimalPart] = value.split('.')
+  const formattedIntegerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+
+  if (decimalPart !== undefined) {
+    return `${formattedIntegerPart}.${decimalPart}`
+  }
+
+  return formattedIntegerPart
+}
+
+// Valeur visible dans l'input, avec formatage des milliers.
+const displayedValue = computed(() => formatDisplayValue(currentValue.value))
+const inputCharacterWidth = computed(() => Math.max(displayedValue.value.length, 1))
+
+// Transforme min/max en nombres utilisables.
+const parseBound = (value: number | string | undefined) => {
+  if (value === undefined || value === '') return undefined
+  const parsedValue = Number.parseFloat(String(value).replace(',', '.'))
+  return Number.isNaN(parsedValue) ? undefined : parsedValue
+}
+
+const minValue = computed(() => parseBound(props.min))
+const maxValue = computed(() => parseBound(props.max))
+
+// Recupere la valeur numerique brute actuellement saisie.
+const currentNumericValue = computed(() => {
+  if (currentValue.value === '') return undefined
+  const parsedValue = Number.parseFloat(currentValue.value)
+  return Number.isNaN(parsedValue) ? undefined : parsedValue
+})
+
+const inputWidthStyle = computed(() => ({
+  width: `calc(${inputCharacterWidth.value}ch + 30px)`,
+  maxWidth: '100%',
+}))
+
+
+const isMinusDisabled = computed(() =>
+  props.disabled || currentNumericValue.value <= minValue.value,
+)
+
+const isPlusDisabled = computed(() =>
+  props.disabled || currentNumericValue.value >= maxValue.value,
+
+)
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+const mergedInputClass = computed(() =>
+  twMerge(
+    ' peer h-[20px] min-w-0 border bg-white text-center outline-none placeholder:text-transparent text-lg border-x-0 border-black',
+    props.disabled ? 'cursor-not-allowed text-black/60' : 'cursor-text',
+    hasError.value
+      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : '',
+    props.inputClass,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'radio-text mt-px cursor-pointer text-black mr-3',
+    hasError.value ? 'text-m-error' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    props.disabled ? 'cursor-not-allowed text-black/60' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedButtonMinusClass = computed(() =>
+  twMerge(
+    'h-[20px] w-[30px] border border-black rounded-s-[3px]',
+    isMinusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : '',
+  ),
+)
+const mergedButtonPlusClass = computed(() =>
+  twMerge(
+    'h-[20px] w-[30px] border border-black rounded-e-[3px]',
+    isPlusDisabled.value ? 'cursor-not-allowed text-black/60' : 'cursor-pointer',
+    hasError.value
+      ? 'border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success'
+        : '',
+  ),
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+// Met a jour l'etat local si besoin puis emet la valeur brute.
+const updateValue = (value: string) => {
+  if (!isControlled.value) {
+    localValue.value = value
+  }
+  emit('update:modelValue', value)
+}
+
+// Force la valeur a rester entre les bornes min et max.
+const clampValue = (value: number) => {
+  if (minValue.value !== undefined && value < minValue.value) return minValue.value
+  if (maxValue.value !== undefined && value > maxValue.value) return maxValue.value
+  return value
+}
+
+// Garde uniquement les chiffres et la virgule puis applique les bornes.
+const normalizeValue = (value: string) => {
+  const sanitizedValue = value
+    .replace(/[^\d,.]/g, '')
+    .replace(/,/g, '.')
+
+  const [integerPart = '', ...decimalParts] = sanitizedValue.split('.')
+  const decimalPart = decimalParts.join('')
+  const hasDecimalSeparator = sanitizedValue.includes('.')
+
+  if (hasDecimalSeparator) {
+    const normalizedValue = `${integerPart || '0'}.${decimalPart}`
+    const parsedValue = Number.parseFloat(normalizedValue)
+
+    if (Number.isNaN(parsedValue)) return ''
+
+    const clampedValue = clampValue(parsedValue)
+    if (clampedValue !== parsedValue) return String(clampedValue)
+
+    return decimalPart === '' ? `${integerPart || '0'}.` : normalizedValue
+  }
+
+  return integerPart === '' ? '' : String(clampValue(Number.parseFloat(integerPart)))
+}
+
+// Reformate l'affichage dans le champ tout en conservant une valeur brute pour le v-model.
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const normalizedValue = normalizeValue(target.value)
+
+  target.value = formatDisplayValue(normalizedValue)
+  updateValue(normalizedValue)
+}
+
+// Retourne la valeur numerique courante, ou 0 si le champ est vide.
+const getNumericValue = () => {
+  const parsedValue = Number.parseFloat(currentValue.value || '0')
+  return Number.isNaN(parsedValue) ? 0 : parsedValue
+}
+
+// Retire 1 a la valeur si l'action est autorisee.
+const decrement = () => {
+  if (props.disabled || props.readonly || isMinusDisabled.value) return
+  updateValue(String(clampValue(getNumericValue() - 1)))
+}
+
+// Ajoute 1 a la valeur si l'action est autorisee.
+const increment = () => {
+  if (props.disabled || props.readonly || isPlusDisabled.value) return
+  updateValue(String(clampValue(getNumericValue() + 1)))
+}
+</script>

app/components/malio/InputText.vue

@@ -0,0 +1,235 @@
+<template>
+  <div
+    :class="mergedGroupClass"
+  >
+    <input
+      :id="inputId"
+      v-maska="mask"
+      :name="name"
+      :autocomplete="autocomplete"
+      :class="mergedInputClass"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="currentValue"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder="_"
+      type="text"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      :class="mergedLabelClass"
+    >
+      {{ label }}
+    </label>
+
+    <IconifyIcon
+      v-if="iconName"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
+      :class="[
+      hasError
+        ? 'text-m-error'
+        : hasSuccess
+          ? 'text-m-success' : iconColor,
+      iconPositionClass,
+    ]"
+    />
+
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${inputId}-describedby`"
+    :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'mt-1 text-xs ml-[2px] ',
+      ]"
+  >
+    {{ hint || error || success }}
+  </p>
+</template>
+
+<script setup lang="ts">
+
+import type {MaskInputOptions} from 'maska'
+import {vMaska} from 'maska/vue'
+import {computed, ref, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
+import {twMerge} from 'tailwind-merge'
+
+defineOptions({name: 'MalioInputText', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    inputClass?: string
+    labelClass?: string
+    groupClass?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    iconName?: string
+    iconPosition?: 'left' | 'right'
+
+    iconSize?: string | number
+    iconColor?: string
+    mask?: string | MaskInputOptions
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    iconName: '',
+    iconPosition: 'right',
+    label: '',
+    inputClass: '',
+    labelClass: '',
+    groupClass: '',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    disabled: false,
+    hint: '',
+    error: '',
+    success: '',
+    iconSize: 24,
+    iconColor: 'text-m-muted',
+    mask: undefined,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success)
+const isFilled = computed(() => currentValue.value.trim().length > 0)
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'relative mt-4 flex h-12 w-full items-center',
+    props.groupClass,
+  ),
+)
+const mergedInputClass = computed(() =>
+  twMerge(
+    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
+    isFilled.value ? 'border-black' : 'border-m-muted',
+    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+    hasError.value
+      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      : hasSuccess.value
+        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+        : 'focus:border-m-primary',
+    props.inputClass,
+    iconInputPaddingClass.value,
+    focusPaddingClass.value,
+  ),
+)
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
+    labelPositionClass.value,
+    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
+    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError.value
+      ? 'text-m-error'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+    props.labelClass,
+  ),
+)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint && !hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-hint`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
+  return ids.length ? ids.join(' ') : undefined
+})
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
+  emit('update:modelValue', target.value)
+}
+
+const iconInputPaddingClass = computed(() => {
+  if (!props.iconName) return ''
+  return props.iconPosition === 'left' ? '!pl-11 !pr-3' : '!pl-3'
+})
+
+const disabled = computed(() => props.disabled)
+
+const labelPositionClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'left-8'
+  return 'left-3'
+})
+
+const focusPaddingClass = computed(() => {
+  if (props.iconName && props.iconPosition === 'left') return 'focus:!pl-11'
+  return 'focus:pl-[11px]'
+})
+
+const iconPositionClass = computed(() => {
+  const sideClass = props.iconPosition === 'left' ? 'left-2' : 'right-2'
+  return `pointer-events-none absolute ${sideClass} top-1/2 -translate-y-1/2`
+})
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
+}
+
+.grow-height:focus {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}
+@media (prefers-reduced-motion: reduce) {
+  .grow-height { transition: none; }
+}
+</style>

app/components/malio/InputTextArea.test.ts

@@ -0,0 +1,152 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import InputTextArea from './InputTextArea.vue'
+
+type InputTextAreaProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  size?: number | string
+  textInput?: string
+  textLabel?: string
+  required?: boolean
+  maxLength?: number
+  showCounter?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  rounded?: string
+}
+
+const InputTextAreaForTest = InputTextArea as DefineComponent<InputTextAreaProps>
+
+describe('MalioInputTextArea', () => {
+  it('renders the initial textarea value', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {modelValue: 'initial textarea value'},
+    })
+
+    expect(wrapper.get('textarea').element.value).toBe('initial textarea value')
+  })
+
+  it('renders the label text and reuses a provided id', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {id: 'custom-textarea-id', label: 'Description'},
+    })
+
+    expect(wrapper.get('textarea').attributes('id')).toBe('custom-textarea-id')
+    expect(wrapper.get('label').attributes('for')).toBe('custom-textarea-id')
+    expect(wrapper.get('label').text()).toBe('Description')
+  })
+
+  it('generates an id when missing', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {label: 'Description'},
+    })
+
+    const textareaId = wrapper.get('textarea').attributes('id')
+    expect(textareaId?.startsWith('malio-input-textarea-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(textareaId)
+  })
+
+  it('applies name, autocomplete and rows attributes', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {name: 'bio', autocomplete: 'on', size: 4},
+    })
+
+    expect(wrapper.get('textarea').attributes('name')).toBe('bio')
+    expect(wrapper.get('textarea').attributes('autocomplete')).toBe('on')
+    expect(wrapper.get('textarea').attributes('rows')).toBe('4')
+  })
+
+  it('sets required, readonly and disabled attributes', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        required: true,
+        readonly: true,
+        disabled: true,
+      },
+    })
+
+    expect(wrapper.get('textarea').attributes('required')).toBeDefined()
+    expect(wrapper.get('textarea').attributes('readonly')).toBeDefined()
+    expect(wrapper.get('textarea').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('textarea').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {modelValue: ''},
+    })
+
+    await wrapper.get('textarea').setValue('new textarea value')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new textarea value'])
+  })
+
+  it('shows the character counter when enabled', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        modelValue: 'hello',
+        showCounter: true,
+        maxLength: 20,
+      },
+    })
+
+    expect(wrapper.get('span.text-xs').text()).toBe('5/20')
+    expect(wrapper.get('textarea').classes()).toContain('pb-6')
+  })
+
+  it('shows hint message in muted color', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {hint: 'Helpful hint'},
+    })
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
+  })
+
+  it('shows error state on textarea and label', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        label: 'Description',
+        error: 'Textarea error',
+      },
+    })
+
+    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows success state on textarea and label', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        label: 'Description',
+        success: 'Textarea success',
+      },
+    })
+
+    expect(wrapper.get('textarea').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p.text-m-success').text()).toBe('Textarea success')
+  })
+
+  it('prioritizes error over success', () => {
+    const wrapper = mount(InputTextAreaForTest, {
+      props: {
+        error: 'Textarea error',
+        success: 'Textarea success',
+      },
+    })
+
+    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+  })
+})

app/components/malio/InputTextArea.vue

@@ -0,0 +1,186 @@
+<template>
+  <div
+    class="relative mt-4 w-full"
+  >
+    <textarea
+      :id="inputId"
+      :name="name"
+
+      :autocomplete="autocomplete"
+      class="floating-input peer w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 overflow-auto"
+      :class="[
+      isFilled ? 'border-black' : 'border-m-muted',
+      disabled ? 'cursor-not-allowed text-black/60 border-m-muted' : 'cursor-text',
+      hasError
+        ? 'border-m-error focus:border-m-error focus:pl-[11px]'
+        : hasSuccess
+          ? 'border-m-success focus:border-m-success focus:pl-[11px]'
+          : 'focus:border-m-primary focus:pl-[11px]',
+      textInput,
+      showCounterComputed ? 'pb-6' : '',
+      rounded,
+    ]"
+      :required="required"
+      :maxlength="maxLength"
+      :rows="rowsCount"
+      :disabled="disabled"
+      :value="currentValue"
+      :readonly="readonly"
+      :aria-invalid="hasError"
+      :aria-describedby="describedBy"
+      :style="textareaStyle"
+      v-bind="attrs"
+      placeholder="_"
+      @input="onInput"
+      @focus="isFocused = true"
+      @blur="isFocused = false"
+    />
+    <label
+      v-if="label"
+      :for="inputId"
+      class="floating-label absolute left-3 top-2 mt-1 inline-block origin-left transition-transform duration-150 font-medium"
+      :class="[
+    shouldFloatLabel ? '-translate-y-[1.30rem] scale-90' : '',
+    disabled ? 'text-black/60' : '',
+    hasError
+      ? 'text-m-error'
+      : hasSuccess
+        ? 'text-m-success'
+        : isFocused ? 'text-m-primary' : shouldFloatLabel ? 'text-black' : 'text-m-muted',
+      textLabel,
+      ]"
+    >
+      {{ label }}
+    </label>
+    <span
+      v-if="showCounterComputed"
+      class="pointer-events-none absolute bottom-2 left-3 text-xs text-m-muted"
+    >
+      {{ currentLength }}/{{ maxLength }}
+    </span>
+  </div>
+  <div
+    v-if="hasError || hasSuccess || hint"
+    class="mt-1 flex items-center justify-between gap-2 text-xs"
+  >
+    <p
+      :id="`${inputId}-describedby`"
+      :class="[
+        hasError
+          ? 'text-m-error'
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
+        'ml-[2px]',
+      ]"
+    >
+      {{ error || success || hint }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {computed, ref, useAttrs, useId} from 'vue'
+
+defineOptions({name: 'MalioInputTextArea', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    size?: number | string
+    textInput?: string
+    textLabel?: string
+    resize?: 'none' | 'both' | 'horizontal' | 'vertical'
+    minResizeWidth?: number
+    maxResizeWidth?: number
+    minResizeHeight?: number
+    maxResizeHeight?: number
+    required?: boolean
+    maxLength?: number
+    showCounter?: boolean
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    success?: string
+    rounded?: string
+
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: 'off',
+    modelValue: undefined,
+    label: '',
+    size: 2,
+    textInput: 'text-lg',
+    required: false,
+    maxLength: 800,
+    showCounter: false,
+    readonly: false,
+    textLabel: 'text-sm',
+    disabled: false,
+    rounded: 'rounded-md',
+    hint: '',
+    error: '',
+    success: '',
+    resize: 'both',
+    minResizeWidth: 280,
+    maxResizeWidth: 640,
+    minResizeHeight: 40,
+    maxResizeHeight: 320,
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = useId()
+const localValue = ref('')
+const isFocused = ref(false)
+
+const inputId = computed(() => props.id?.toString() || `malio-input-textarea-${generatedId}`)
+const isControlled = computed(() => props.modelValue !== undefined)
+const currentValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
+const shouldFloatLabel = computed(() => isFocused.value || currentValue.value.length > 0)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const rowsCount = computed(() => Math.max(1, Number(props.size || 3)))
+const currentLength = computed(() => (currentValue.value ?? '').length)
+const showCounterComputed = computed(() =>
+  props.showCounter && Number(props.maxLength) > 0
+)
+const toCssSize = (value: number | string) => (typeof value === 'number' ? `${value}px` : value)
+const textareaStyle = computed(() => ({
+  resize: props.resize,
+  minWidth: toCssSize(props.minResizeWidth),
+  maxWidth: toCssSize(props.maxResizeWidth),
+  minHeight: toCssSize(props.minResizeHeight),
+  maxHeight: toCssSize(props.maxResizeHeight),
+}))
+const isFilled = computed(() => currentValue.value.trim().length > 0)
+const describedBy = computed(() =>
+  (hasError.value || hasSuccess.value || !!props.hint) ? `${inputId.value}-describedby` : undefined,
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string): void
+}>()
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLTextAreaElement
+  if (!isControlled.value) {
+    localValue.value = target.value
+  }
+  emit('update:modelValue', target.value)
+}
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+</style>

app/components/malio/Select.test.ts

@@ -0,0 +1,177 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Select from './Select.vue'
+
+type Option = {
+  label: string
+  value: string | number | null
+}
+
+type SelectProps = {
+  modelValue?: string | number | null
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  disabled?: boolean
+}
+
+const SelectForTest = Select as DefineComponent<SelectProps>
+
+const options: Option[] = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Canada', value: 'ca'},
+]
+
+describe('MalioSelect', () => {
+  it('renders the label text', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, label: 'Country'},
+    })
+
+    expect(wrapper.get('label').text()).toBe('Country')
+  })
+
+  it('generates button and listbox ids and links them together', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    const button = wrapper.get('button')
+    expect(button.attributes('id')?.startsWith('custom-select-btn-')).toBe(true)
+    expect(button.attributes('aria-controls')?.startsWith('custom-select-listbox-')).toBe(true)
+
+    await button.trigger('click')
+
+    expect(wrapper.get('ul').attributes('id')).toBe(button.attributes('aria-controls'))
+  })
+
+  it('uses disabled styles and prevents opening when disabled', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, disabled: true, options},
+    })
+
+    const button = wrapper.get('button')
+    expect(button.attributes('disabled')).toBeDefined()
+    expect(button.classes()).toContain('cursor-not-allowed')
+
+    await button.trigger('click')
+
+    expect(wrapper.find('ul').exists()).toBe(false)
+  })
+
+  it('opens the list and rotates the icon on click', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    expect(wrapper.get('ul').exists()).toBe(true)
+    expect(wrapper.get('button').attributes('aria-expanded')).toBe('true')
+    expect(wrapper.get('svg').classes()).toContain('rotate-180')
+  })
+
+  it('emits update:modelValue when selecting an option', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, options},
+    })
+
+    await wrapper.get('button').trigger('click')
+    await wrapper.findAll('li')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['be'])
+  })
+
+  it('renders the empty option with muted text style', async () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        emptyOptionLabel: 'Aucune selection',
+      },
+    })
+
+    await wrapper.get('button').trigger('click')
+
+    const firstOption = wrapper.findAll('li')[0]
+    expect(firstOption.text()).toBe('Aucune selection')
+    expect(firstOption.classes()).toContain('text-black/40')
+  })
+
+  it('shows the selected value text when an option is selected', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        options,
+        modelValue: 'fr',
+      },
+    })
+
+    expect(wrapper.text()).toContain('France')
+    expect(wrapper.get('button').classes()).toContain('border-black')
+  })
+
+  it('shows hint message in muted color', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {modelValue: null, hint: 'Select a country'},
+    })
+
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Select a country')
+  })
+
+  it('shows error state on button, label and helper text', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        label: 'Country',
+        error: 'Selection error',
+      },
+    })
+
+    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows success state on button, label and helper text', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        label: 'Country',
+        success: 'Selection success',
+      },
+    })
+
+    expect(wrapper.get('button').classes()).toContain('border-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('p.text-m-success').text()).toBe('Selection success')
+  })
+
+  it('prioritizes error over success', () => {
+    const wrapper = mount(SelectForTest, {
+      props: {
+        modelValue: null,
+        options,
+        error: 'Selection error',
+        success: 'Selection success',
+      },
+    })
+
+    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
+    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+  })
+})

app/components/malio/Select.vue

@@ -0,0 +1,333 @@
+<template>
+  <div
+    ref="root"
+    class="relative mt-4 w-full"
+    :class="[minWidth, maxWidth]"
+  >
+    <button
+      :id="buttonId"
+      type="button"
+      class="grow-height peer relative w-full border bg-white pl-3 pr-10 py-1 text-left outline-none focus-visible:border-2 focus-visible:border-m-primary"
+      :class="[
+          hasError
+            ? isOpen
+              ? openDirection === 'down'
+                ? 'rounded-b-none !border-2 !border-m-error !border-b-0'
+                : 'rounded-t-none !border-2 !border-m-error !border-t-0'
+              : 'border-m-error'
+            : hasSuccess
+              ? isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-success !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-success !border-t-0'
+                : 'border-m-success'
+              : isOpen
+                ? openDirection === 'down'
+                  ? 'rounded-b-none !border-2 !border-m-primary !border-b-0'
+                  : 'rounded-t-none !border-2 !border-m-primary !border-t-0'
+                : isOptionSelected
+                  ? 'border-black'
+                  : 'border-m-muted',
+          disabled ? 'cursor-not-allowed border-m-muted text-black/60' : 'cursor-pointer',
+          label ? 'min-h-[40px]' : 'h-[40px] py-0',
+          rounded,
+          textField,
+  ]"
+      :aria-expanded="isOpen"
+      :aria-controls="listboxId"
+      :aria-invalid="hasError"
+      :aria-describedby="describedBy"
+      :disabled="disabled"
+      @click="toggle"
+    >
+      <label
+        v-if="label"
+        class="floating-label pointer-events-none absolute left-3 inline-block origin-left transition-transform duration-150 font-medium"
+        :class="[
+          isOpen ? 'top-2  z-30' : 'top-2',
+          hasError
+            ? 'text-m-error'
+            : hasSuccess
+              ? 'text-m-success'
+              : isOpen
+                ? 'text-m-primary'
+                : isOptionSelected
+                  ? 'text-black'
+                  : 'text-m-muted',
+          textLabel,
+        ]"
+        :style="labelTransformStyle"
+      >
+        {{ label }}
+      </label>
+
+      <span
+        class="block truncate"
+        :class="[
+          textValue,
+          isOptionSelected ? 'text-black' : 'select-none text-transparent'
+        ]"
+      >
+        {{ selectedLabel || '\u00A0' }}
+      </span>
+
+      <span
+        class="absolute right-3 top-1/2 -translate-y-1/2"
+        :class="[
+          hasError
+            ? 'text-m-error'
+            : hasSuccess
+              ? 'text-m-success'
+              : 'text-current'
+        ]"
+      >
+      <slot name="icon">
+        <IconifyIcon
+          icon="mdi:chevron-down"
+          width="20"
+          class="transition-transform duration-300"
+          :class="isOpen ? 'rotate-180' : 'rotate-0'"
+        />
+      </slot>
+    </span>
+    </button>
+
+    <ul
+      v-if="isOpen"
+      :id="listboxId"
+      ref="listRef"
+      role="listbox"
+      :aria-labelledby="buttonId"
+      class="absolute left-0 right-0 z-20 max-h-60 w-full overflow-auto border-2 bg-white"
+      :class="[
+        openDirection === 'down'
+          ? 'top-[calc(100%-2px)] rounded-b-md border-t-0'
+          : 'bottom-[calc(100%-2px)] rounded-t-md border-b-0',
+        hasError
+          ? 'select-scrollbar-error'
+          : hasSuccess
+            ? 'select-scrollbar-success'
+            : 'select-scrollbar-primary',
+        hasError
+          ? 'border-m-error'
+          : hasSuccess
+            ? 'border-m-success'
+            : 'border-m-primary'
+      ]"
+    >
+      <li
+        v-for="(opt, index) in normalizedOptions"
+        :id="optionId(index)"
+        :key="String(opt.value)"
+        role="option"
+        :aria-selected="opt.value === modelValue"
+        class="cursor-pointer px-3 py-2"
+        :class="[
+            index === activeIndex ? 'bg-m-muted/10' : '',
+            opt.value === modelValue ? 'bg-m-muted/10 font-semibold' : '',
+            opt.value === null ? 'text-black/40' : 'text-black'
+          ]"
+        @mouseenter="activeIndex = index"
+        @mousedown.prevent
+        @click="select(opt.value)"
+      >
+        {{ opt.label || '\u00A0' }}
+      </li>
+    </ul>
+  </div>
+  <p
+    v-if="hint || hasError || hasSuccess"
+    :id="`${buttonId}-describedby`"
+    :class="[
+      hasError
+        ? 'text-m-error'
+        : hasSuccess
+          ? 'text-m-success'
+          : 'text-m-muted',
+      'mt-1 ml-[2px] text-xs',
+    ]"
+  >
+    {{ error || success || hint }}
+  </p>
+</template>
+
+<script setup lang="ts">
+import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
+import {Icon as IconifyIcon} from '@iconify/vue'
+
+defineOptions({name: 'MalioSelect', inheritAttrs: false})
+
+type Option = {
+  label: string;
+  value: string | number | null
+}
+const props = withDefaults(defineProps<{
+  modelValue: string | number | null
+  options?: Option[]
+  emptyOptionLabel?: string
+  label?: string
+  hint?: string
+  error?: string
+  success?: string
+  minWidth?: string
+  maxWidth?: string
+  textField?: string
+  textValue?: string
+  textLabel?: string
+  rounded?: string
+  disabled?: boolean
+}>(), {
+  options: () => [],
+  emptyOptionLabel: '',
+  label: '',
+  hint: '',
+  error: '',
+  success: '',
+  minWidth: 'w-96',
+  maxWidth: '',
+  textField: 'text-lg',
+  textValue: 'text-lg',
+  textLabel: 'text-sm',
+  rounded: 'rounded-md',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: string | number | null): void
+}>()
+const root = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const activeIndex = ref(-1)
+const openDirection = ref<'down' | 'up'>('down')
+const uid = useId()
+const buttonId = `custom-select-btn-${uid}`
+const listboxId = `custom-select-listbox-${uid}`
+const listRef = ref<HTMLElement | null>(null)
+const listHeight = ref(0)
+const normalizedOptions = computed<Option[]>(() => [
+  {label: props.emptyOptionLabel, value: null},
+  ...props.options,
+])
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const isOptionSelected = computed(() =>
+  props.options.some(o => o.value === props.modelValue)
+)
+const shouldFloatLabel = computed(() =>
+  isOpen.value || isOptionSelected.value
+)
+const selectedLabel = computed(() =>
+  props.options.find(o => o.value === props.modelValue)?.label ?? ''
+)
+const describedBy = computed(() =>
+  (hasError.value || hasSuccess.value || !!props.hint) ? `${buttonId}-describedby` : undefined,
+)
+
+function optionId(index: number) {
+  return `custom-select-opt-${uid}-${index}`
+}
+
+function updateOpenDirection() {
+  if (!root.value) return
+
+  const rect = root.value.getBoundingClientRect()
+  const estimatedListHeight = Math.min(normalizedOptions.value.length * 40, 240)
+  const spaceBelow = window.innerHeight - rect.bottom
+  const spaceAbove = rect.top
+
+  openDirection.value =
+    spaceBelow >= estimatedListHeight || spaceBelow >= spaceAbove
+      ? 'down'
+      : 'up'
+}
+
+function open() {
+  updateOpenDirection()
+  isOpen.value = true
+
+  const selectedIndex = normalizedOptions.value.findIndex(o => o.value === props.modelValue)
+  activeIndex.value = selectedIndex >= 0 ? selectedIndex : 0
+
+  nextTick(() => {
+    if (openDirection.value === 'up' && listRef.value) {
+      listHeight.value = listRef.value.offsetHeight
+    } else {
+      listHeight.value = 0
+    }
+  })
+}
+
+const labelTransformStyle = computed(() => {
+  // label non flottant
+  if (!shouldFloatLabel.value) {
+    return {}
+  }
+
+  // fermé ou ouverture vers le bas : comportement classique
+  if (!isOpen.value || openDirection.value === 'down') {
+    return {
+      transform: 'translateY(-1.15rem) scale(0.9)',
+    }
+  }
+
+  // ouverture vers le haut : on remonte en fonction de la hauteur de la liste
+  const extraOffset = 8 // marge visuelle au-dessus de la liste en px
+  const total = 4 +listHeight.value + extraOffset
+  // 18 ≈ 1.15rem pour garder la même base que votre flottant actuel
+
+  return {
+    transform: `translateY(-${total}px) scale(0.9)`,
+  }
+})
+
+function close() {
+  isOpen.value = false
+}
+
+function toggle() {
+  if (props.disabled) return
+  if (isOpen.value) {
+    close()
+    return
+  }
+  open()
+}
+
+function select(value: string | number | null) {
+  emit('update:modelValue', value)
+  close()
+}
+
+function onClickOutside(e: MouseEvent) {
+  if (!root.value) return
+  if (!root.value.contains(e.target as Node)) close()
+}
+
+onMounted(() => document.addEventListener('mousedown', onClickOutside))
+onBeforeUnmount(() => document.removeEventListener('mousedown', onClickOutside))
+</script>
+
+<style scoped>
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+:deep(ul[role="listbox"]) {
+  scrollbar-width: auto;
+  scrollbar-gutter: stable;
+}
+
+:deep(.select-scrollbar-primary) {
+  scrollbar-color: rgb(var(--m-primary)) transparent;
+}
+
+:deep(.select-scrollbar-error) {
+  scrollbar-color: #000000 transparent;
+}
+
+:deep(.select-scrollbar-success) {
+  scrollbar-color: #000000 transparent;
+}
+
+</style>

app/story/InputSelect.story.vue

@@ -0,0 +1,148 @@
+<template>
+  <Story
+    title="Select"
+  >
+      <MalioSelect
+        v-model="value"
+        :options="options"
+      />
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSelect
+
+Composant select personnalisé avec label flottant, option vide,
+états visuels selon la sélection et ouverture/fermeture contrôlée.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: string | number | null
+-   Description: Valeur actuellement sélectionnée.
+-   Comportement:
+-   Compatible avec `v-model`.
+-   Peut valoir `null` pour représenter l’option vide.
+
+### options
+
+-   Type: Array<{ label: string; value: string | number | null }>
+-   Description: Liste des options affichées dans le menu.
+-   Défaut: tableau vide.
+
+### emptyOptionLabel
+
+-   Type: string
+-   Description: Texte de l’option vide injectée automatiquement.
+-   Comportement:
+-   Cette option porte toujours la valeur `null`.
+-   Si la prop est vide, l’option reste visuellement discrète.
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant au-dessus du champ.
+-   Comportement: Si absent, aucun label n’est rendu.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### textField
+
+-   Type: string
+-   Description: Classes CSS appliquées au bouton du select.
+
+### textValue
+
+-   Type: string
+-   Description: Classes CSS appliquées à la valeur affichée.
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label flottant.
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes utilitaires Tailwind pour contraindre la
+largeur.
+
+------------------------------------------------------------------------
+
+## Interaction
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le composant.
+-   Effet:
+-   Empêche l’ouverture du menu.
+-   Applique un style visuel désactivé.
+
+------------------------------------------------------------------------
+
+## Comportement visuel
+
+-   Au repos sans sélection: bordure grise.
+-   Ouvert: bordure et label en couleur primaire.
+-   Fermé avec valeur sélectionnée: bordure et texte en noir.
+-   L’option vide dans la liste peut être stylée différemment pour être
+    distinguée des autres.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   Le bouton porte `aria-expanded` et `aria-controls`.
+-   La liste utilise `role="listbox"`.
+-   Chaque option utilise `role="option"` et `aria-selected`.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque sélection dans la liste.
+-   Permet l’utilisation avec v-model.
+-   Peut émettre `null` si l’option vide est sélectionnée.
+
+</docs>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import MalioSelect from '../components/malio/Select.vue'
+const value = ref<string | number | null>(null)
+const options = [
+  { label: 'France', value: 'fr' },
+  { label: 'Belgique', value: 'be' },
+  { label: 'Suisse', value: 'ch' },
+  { label: 'Canada', value: 'ca' },
+  { label: 'Allemagne', value: 'de' },
+  { label: 'Espagne', value: 'es' },
+  { label: 'Italie', value: 'it' },
+  { label: 'Portugal', value: 'pt' },
+  { label: 'Pays-Bas', value: 'nl' },
+  { label: 'Suède', value: 'se' },
+  { label: 'Norvège', value: 'no' },
+  { label: 'Danemark', value: 'dk' },
+  { label: 'Finlande', value: 'fi' },
+  { label: 'Autriche', value: 'at' },
+  { label: 'Irlande', value: 'ie' },
+  { label: 'Grèce', value: 'gr' },
+  { label: 'Pologne', value: 'pl' },
+  { label: 'Hongrie', value: 'hu' },
+  { label: 'République tchèque', value: 'cz' },
+]
+</script>

app/story/inputAmount.story.vue

@@ -0,0 +1,200 @@
+<template>
+  <Story
+    title="Input/Amount"
+  >
+      <MalioInputAmount/>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputAmount
+
+Composant input dédié à la saisie d’un montant décimal avec label flottant,
+états visuels (erreur / succès) et icône configurable.
+
+------------------------------------------------------------------------
+
+## 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 dans les formulaires.
+
+### autocomplete
+
+-   Type: string
+-   Description: Valeur de l’attribut `autocomplete`.
+-   Défaut: `off`
+
+### modelValue
+
+-   Type: string | null | undefined
+-   Description: Valeur contrôlée du composant.
+-   Comportement:
+-   Si défini, le composant fonctionne via `v-model`.
+-   Sinon, il conserve une valeur locale interne.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### inputClass
+
+-   Type: string
+-   Description: Classes CSS additionnelles appliquées à l’input.
+
+### labelClass
+
+-   Type: string
+-   Description: Classes CSS additionnelles appliquées au label.
+
+### groupClass
+
+-   Type: string
+-   Description: Classes CSS additionnelles 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.
+-   Positionne `aria-invalid="true"`.
+-   Est prioritaire sur `success` et `hint`.
+
+### success
+
+-   Type: string
+-   Description: Message de succès.
+-   Effet:
+-   Actif uniquement si `error` est absent.
+
+------------------------------------------------------------------------
+
+## Icône
+
+### iconName
+
+-   Type: string
+-   Description: Nom de l’icône affichée dans le champ.
+-   Défaut: `mdi:currency-eur`
+
+### iconPosition
+
+-   Type: `'left' | 'right'`
+-   Description: Position de l’icône dans le champ.
+-   Défaut: `right`
+
+### iconSize
+
+-   Type: string | number
+-   Description: Taille de l’icône.
+
+### iconColor
+
+-   Type: string
+-   Description: Classe de couleur de l’icône en état neutre.
+
+------------------------------------------------------------------------
+
+## Comportement montant
+
+-   Le champ est rendu en `type="text"` avec `inputmode="decimal"`.
+-   Le séparateur décimal affiché par défaut est `.`.
+-   Les virgules saisies par l’utilisateur sont converties en points.
+-   Tous les caractères non numériques, sauf le séparateur décimal, sont supprimés.
+-   La partie décimale est limitée à 2 chiffres.
+
+### Exemples de normalisation
+
+-   `12,5` devient `12.5`
+-   `0012,345abc` devient `12.34`
+-   `,5` devient `0.5`
+
+### Formatage au blur
+
+-   `12` devient `12.00`
+-   `12.5` devient `12.50`
+
+------------------------------------------------------------------------
+
+## Priorité visuelle
+
+1.  `error`
+2.  `success`
+3.  état neutre
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-invalid` est activé si `error` existe.
+-   `aria-describedby` référence le message affiché sous le champ.
+-   Le composant fonctionne avec ou sans `v-model`.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification de l’input.
+-   Émis aussi au `blur` si la valeur est reformatée.
+-   Permet l’utilisation avec `v-model`.
+
+</docs>
+
+<script setup lang="ts">
+import MalioInputAmount from '../components/malio/InputAmount.vue'
+</script>

app/story/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/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/inputText.story.vue

@@ -0,0 +1,200 @@
+<template>
+  <Story
+    title="Input/Text"
+  >
+      <MalioInputText/>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputText
+
+Composant input texte avec masque optionnel (maska), label flottant,
+états visuels (erreur / succès) et icône configurable.
+
+------------------------------------------------------------------------
+
+## 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: vide
+
+### 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.
+
+### mask
+
+-   Type: string | undefined
+-   Description: Masque appliqué via la directive maska.
+-   Comportement: Formate la saisie selon les tokens définis.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### textInput
+
+-   Type: string
+-   Description: Classes CSS appliquées à l’input (taille de texte,
+etc.).
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes utilitaires Tailwind pour contraindre la
+largeur.
+
+------------------------------------------------------------------------
+
+## 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
+
+### iconName
+
+-   Type: string
+-   Description: Nom de l’icône (ex: mdi:magnify).
+
+### iconSize
+
+-   Type: string | number
+-   Description: Taille de l’icône.
+
+### iconColor
+
+-   Type: string
+-   Description: Couleur de l’icône.
+
+------------------------------------------------------------------------
+
+## Comportement de validation
+
+-   Aucune validation interne.
+-   Les états sont pilotés uniquement par les props.
+
+## Priorité visuelle
+
+1.  error
+2.  success
+3.  neutre
+
+------------------------------------------------------------------------
+
+## Tokens de masque
+
+-   \# : chiffre
+-   A : lettre majuscule
+-   a : lettre minuscule
+-   \* : chiffre ou lettre
+
+------------------------------------------------------------------------
+
+## 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 MalioInputText from '../components/malio/InputText.vue'
+</script>

app/story/inputTextArea.story.vue

@@ -0,0 +1,192 @@
+<template>
+  <Story
+    title="Input/TextArea"
+  >
+      <MalioInputTextArea/>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioInputTextArea
+
+Composant textarea avec label flottant, états visuels (erreur / succès),
+gestion du redimensionnement et compteur optionnel.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### id
+
+-   Type: string
+-   Description: Identifiant HTML du textarea.
+-   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 du textarea (utile pour les formulaires).
+
+### autocomplete
+
+-   Type: string
+-   Description: Active ou configure l’autocomplétion navigateur.
+
+### 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
+
+### textInput
+
+-   Type: string
+-   Description: Classes CSS appliquées au textarea (taille de texte,
+etc.).
+-   Défaut: text-lg
+
+### textLabel
+
+-   Type: string
+-   Description: Classes CSS appliquées au label.
+-   Défaut: text-sm
+
+### rounded
+
+-   Type: string
+-   Description: Classe Tailwind pour le border-radius.
+-   Défaut: rounded-md
+
+------------------------------------------------------------------------
+
+## Dimensions
+
+### size
+
+-   Type: number | string
+-   Description: Nombre de lignes initiales (rows).
+-   Défaut: 2
+
+### minResizeWidth / maxResizeWidth
+
+-   Type: number | string
+-   Description: Largeur minimale / maximale autorisée lors du
+redimensionnement.
+
+### minResizeHeight / maxResizeHeight
+
+-   Type: number | string
+-   Description: Hauteur minimale / maximale autorisée lors du
+redimensionnement.
+
+### resize
+-   Type: 'none' | 'both' | 'horizontal' | 'vertical'
+-   Description: Définit le comportement de redimensionnement CSS.
+-   Défaut: both
+
+------------------------------------------------------------------------
+
+## Validation & États
+
+### required
+
+-   Type: boolean
+-   Description: Ajoute l’attribut HTML required.
+
+### maxLength
+
+-   Type: number | string
+-   Description: Longueur maximale autorisée.
+-   Effet: Limite la saisie et alimente le compteur.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le champ.
+
+### readonly
+
+-   Type: boolean
+-   Description: Rend le champ non modifiable mais focusable.
+
+### 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.
+
+------------------------------------------------------------------------
+
+## Compteur
+
+### showCounter
+
+-   Type: boolean
+-   Description: Affiche le compteur x / maxLength.
+-   Condition:
+-   showCounter = true
+-   maxLength défini et > 0
+-   Position: Bas gauche du textarea.
+-   Mise à jour: Dynamique à chaque saisie.
+
+------------------------------------------------------------------------
+
+## Priorité d’affichage
+
+### Messages
+
+1.  error
+2.  success
+3.  hint
+
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   aria-invalid est activé si error existe.
+-   aria-describedby référence le message affiché.
+-   Fonctionne avec ou sans v-model.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque modification du textarea.
+-   Permet l’utilisation avec v-model.
+
+</docs>
+
+<script setup lang="ts">
+import MalioInputTextArea from '../components/malio/InputTextArea.vue'
+</script>

histoire.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import path from 'path'
+
+export default defineConfig({
+  setupFile: './histoire.setup.ts',
+  vite: {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './'),
+      },
+    },
+    css: {
+      postcss: {
+        plugins: [tailwindcss(), autoprefixer()],
+      },
+    },
+  },
+  plugins: [HstVue()],
+})

histoire.setup.ts

@@ -0,0 +1,4 @@
+import './app/assets/css/malio.css'
+
+export function setupVue3() {}
+export function setupVanilla() {}

makefile

@@ -8,6 +8,9 @@ install:
 dev:
 	npm run dev
 
+dev-histoire:
+	npm run story:dev
+
 dev-prepare:
 	npm run dev:prepare
 

nuxt.config.ts

@@ -1,9 +1,34 @@
 import { fileURLToPath } from 'node:url'
 import { dirname, join } from 'node:path'
 
-const currentDir = dirname(fileURLToPath(import.meta.url))
+const dir = dirname(fileURLToPath(import.meta.url))
 
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/tailwindcss'],
-  css: [join(currentDir, './app/assets/css/tailwind.css')],
+  modules: ['@nuxtjs/tailwindcss','@nuxt/icon'],
+  css: [join(dir, 'app/assets/css/malio.css')],
+
+  tailwindcss: {
+    config: {
+      theme: {
+        extend: {
+          borderRadius: {
+            malio: 'var(--m-radius)',
+          },
+          colors: {
+            m: {
+              primary: 'rgb(var(--m-primary) / <alpha-value>)',
+              secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
+              tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
+              border: 'rgb(var(--m-border) / <alpha-value>)',
+              text: 'rgb(var(--m-text) / <alpha-value>)',
+              muted: 'rgb(var(--m-muted) / <alpha-value>)',
+              bg: 'rgb(var(--m-bg) / <alpha-value>)',
+              error: 'rgb(var(--m-error) / <alpha-value>)',
+              success: 'rgb(var(--m-success) / <alpha-value>)',
+            }
+          }
+        }
+      }
+    }
+  }
 })

package.json

@@ -3,7 +3,11 @@
   "type": "module",
   "version": "0.0.1",
   "main": "./nuxt.config.ts",
-  "files": ["app/**", "nuxt.config.ts", "README.md"],
+  "files": [
+    "app/**",
+    "nuxt.config.ts",
+    "README.md"
+  ],
   "scripts": {
     "dev": "nuxi dev .playground",
     "dev:prepare": "nuxt prepare .playground",
@@ -11,17 +15,22 @@
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
     "lint": "eslint .",
-    "test": "vitest run"
+    "test": "vitest run",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
   },
   "peerDependencies": {
     "nuxt": "^4.0.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/test-utils": "^2.4.6",
+    "@histoire/plugin-vue": "^1.0.0-beta.1",
     "@nuxt/eslint": "latest",
     "@types/node": "^24.10.13",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^10.0.0",
+    "histoire": "^1.0.0-beta.1",
     "jsdom": "^27.0.1",
     "nuxt": "^4.3.1",
     "typescript": "^5.9.3",
@@ -29,6 +38,9 @@
     "vue": "latest"
   },
   "dependencies": {
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxt/icon": "^2.2.1",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "maska": "^3.2.0",
+    "tailwind-merge": "^3.3.1"
   }
 }

pre-commit

@@ -3,23 +3,14 @@ set -e
 
 echo "######### Pre-commit hook start #############"
 
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -f ".nvmrc" ]; then
-    NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
-    NVM_VERSION="${NVM_VERSION#v}"
-    NPM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
-    if [ -x "$NPM_BIN/npm" ]; then
-      PATH="$NPM_BIN:$PATH"
-      export PATH
-    fi
-  fi
-fi
-
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -s "$HOME/.nvm/nvm.sh" ]; then
-    # shellcheck disable=SC1090
-    . "$HOME/.nvm/nvm.sh"
-    nvm use >/dev/null 2>&1 || true
+# Prefer the exact Node version from .nvmrc for hooks (IDE + CLI consistency).
+if [ -f ".nvmrc" ]; then
+  NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
+  NVM_VERSION="${NVM_VERSION#v}"
+  NVM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
+  if [ -x "$NVM_BIN/node" ] && [ -x "$NVM_BIN/npm" ]; then
+    PATH="$NVM_BIN:$PATH"
+    export PATH
   fi
 fi
 
@@ -28,6 +19,7 @@ if ! command -v npm >/dev/null 2>&1; then
   exit 1
 fi
 
+echo "Node $(node -v) / npm $(npm -v)"
 echo "--- make pre-commit start ---"
 make pre-commit
 echo "--- make pre-commit finished ---"

tailwind.config.ts

@@ -0,0 +1,33 @@
+import type {Config} from 'tailwindcss'
+
+export default {
+  content: [
+    './app/**/*.{vue,js,ts}',
+    './app/**/*.story.{vue,js,ts}',
+    './histoire.setup.ts',
+    './histoire.config.ts',
+  ],
+  theme: {
+    extend: {
+      borderRadius: {
+        malio: 'var(--m-radius)',
+      },
+      colors: {
+        m: {
+          primary: 'rgb(var(--m-primary) / <alpha-value>)',
+          secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
+          tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
+          border: 'rgb(var(--m-border) / <alpha-value>)',
+          text: 'rgb(var(--m-text) / <alpha-value>)',
+          muted: 'rgb(var(--m-muted) / <alpha-value>)',
+          bg: 'rgb(var(--m-bg) / <alpha-value>)',
+          error: 'rgb(var(--m-error) / <alpha-value>)',
+          success: 'rgb(var(--m-success) / <alpha-value>)',
+        },
+      },
+      fontFamily: {
+        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
+      },
+    },
+  },
+} satisfies Partial<Config>

tsconfig.json

@@ -1,3 +1,21 @@
 {
-  "extends": "./.playground/.nuxt/tsconfig.json"
+  "extends": "./.playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "lib": [
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ]
 }