From 2340256ee11310ffb2350429b6e759bf0e1f6bbe Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Fri, 20 Feb 2026 12:06:31 +0100
Subject: [PATCH 1/8] feat : 333 creation du composant inputtext

---
 .playground/pages/composant/inputText.vue | 132 +++++++++++++++
 .playground/pages/index.vue               | 106 +++++++++++-
 app/assets/css/malio.css                  |  18 +++
 app/components/malio/Input.vue            |  38 -----
 app/components/malio/InputText.vue        | 189 ++++++++++++++++++++++
 nuxt.config.ts                            |  30 +++-
 package-lock.json                         | 177 +++++++++-----------
 package.json                              |   7 +-
 tailwind.config.ts                        |  22 +++
 9 files changed, 568 insertions(+), 151 deletions(-)
 create mode 100644 .playground/pages/composant/inputText.vue
 create mode 100644 app/assets/css/malio.css
 delete mode 100644 app/components/malio/Input.vue
 create mode 100644 app/components/malio/InputText.vue
 create mode 100644 tailwind.config.ts

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
new file mode 100644
index 0000000..aa18af6
--- /dev/null
+++ b/.playground/pages/composant/inputText.vue
@@ -0,0 +1,132 @@
+<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 v-model="simpleValue" />
+    </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</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">Désactivé</h2>
+      <MalioInputText
+        model-value="Valeur verrouillee"
+        disabled
+        label="Champ desactive"
+      />
+    </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 et erreur</h2>
+      <MalioInputText
+        v-model="emailValue"
+        label="Email"
+        hint="Format attendu: nom@domaine.com"
+      />
+      <div class="mt-4">
+        <MalioInputText
+          model-value="abc"
+          label="Code"
+          error="Le code doit contenir au moins 6 caracteres"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Largeurs</h2>
+      <div class="space-y-4">
+        <MalioInputText
+          label="Petit"
+          min-width="w-56"
+        />
+        <MalioInputText
+          label="Moyen"
+          min-width="w-72"
+        />
+        <MalioInputText
+          label="Large"
+          min-width="w-full"
+        />
+      </div>
+    </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">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">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>
+</template>
+
+<script setup lang="ts">
+const simpleValue = ref('')
+const nameValue = ref('')
+const searchValue = ref('')
+const emailValue = ref('')
+const cityValue = ref('')
+</script>
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index 257a509..8fa3275 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -1,11 +1,107 @@
 <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-primary-500 hover:text-white"
+          :class="selectedName === item.name ? 'bg-secondary-500 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>
+type LoadedModule = {
+  default: unknown
+}
 
+type Item = {
+  name: string
+  label: string
+  demoComponent?: unknown
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/*.vue', { eager: true }) as Record<string, LoadedModule>
+const demoModules = import.meta.glob('./composant/*.vue', { eager: true }) as Record<string, LoadedModule>
+
+const demoByName = Object.fromEntries(
+  Object.entries(demoModules).map(([file, mod]) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+    return [name.toLowerCase(), mod.default]
+  }),
+)
+
+const items = computed(() =>
+  Object.entries(componentModules).map(([file]) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+
+    return {
+      name,
+      label: name,
+      demoComponent: demoByName[name.toLowerCase()],
+    }
+  }) as Item[],
+)
+
+const selectedName = ref('')
+const hasInitializedSelection = ref(false)
+
+watchEffect(() => {
+  if (!hasInitializedSelection.value && items.value.length > 0) {
+    selectedName.value = items.value[0].name
+    hasInitializedSelection.value = true
+  }
+})
+
+function selectOrToggle(name: string) {
+  selectedName.value = selectedName.value === name ? '' : name
+}
+
+function clearSelection() {
+  selectedName.value = ''
+}
+
+const selectedDemoComponent = computed(() =>
+  items.value.find((item) => item.name === selectedName.value)?.demoComponent,
+)
+
+const selectedDemoFileName = computed(() => {
+  const name = selectedName.value
+  if (!name) return ''
+  return name.charAt(0).toLowerCase() + name.slice(1)
+})
+</script>
diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
new file mode 100644
index 0000000..97ff80e
--- /dev/null
+++ b/app/assets/css/malio.css
@@ -0,0 +1,18 @@
+@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 pur pour les erreurs */
+  }
+}
diff --git a/app/components/malio/Input.vue b/app/components/malio/Input.vue
deleted file mode 100644
index 17119af..0000000
--- a/app/components/malio/Input.vue
+++ /dev/null
@@ -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>
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
new file mode 100644
index 0000000..2833115
--- /dev/null
+++ b/app/components/malio/InputText.vue
@@ -0,0 +1,189 @@
+<template>
+  <div
+    class="relative mt-4 w-full"
+    :class="[minWidth, maxWidth]"
+  >
+    <input
+      :id="inputId"
+      :name="name"
+      :autocomplete="autocomplete"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
+      :class="[
+        disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
+        error
+          ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+          : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
+        text,
+        iconInputPaddingClass,
+        inputClass,
+        rounded,
+      ]"
+      :required="required"
+      :maxlength="maxLength"
+      :minlength="minLength"
+      :disabled="disabled"
+      :value="modelValue ?? ''"
+      :readonly="readonly"
+      :aria-invalid="!!error"
+      :aria-describedby="describedBy"
+      v-bind="attrs"
+      placeholder=" "
+      type="text"
+      @input="onInput"
+    >
+
+    <label
+      v-if="label"
+      :for="inputId"
+      class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
+      :class="[
+        error
+          ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
+          : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
+        labelClass,
+        textSize,
+      ]"
+    >
+      {{ label }}
+    </label>
+
+    <Icon
+      v-if="iconName"
+      :name="iconName"
+      :size="iconSize"
+      :class="[
+        error
+          ? 'text-m-error'
+          : 'text-m-muted',
+        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+        iconColor,
+      ]"
+    />
+
+  </div>
+    <p
+      v-if="hint && !error"
+      :id="`${inputId}-hint`"
+      class="mt-1 text-xs text-m-muted"
+    >
+      {{ hint }}
+    </p>
+
+    <p
+      v-if="error"
+      :id="`${inputId}-error`"
+      class="mt-1 text-xs text-m-error"
+    >
+      {{ error }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    autocomplete?: string
+    modelValue?: string | null | undefined
+    minWidth?: string
+    maxWidth?: string
+    text?: string
+    textSize?: string
+    inputClass?: string
+    labelClass?: string
+    required?: boolean
+    maxLength?: number | string
+    minLength?: number | string
+    disabled?: boolean
+    readonly?: boolean
+    hint?: string
+    error?: string
+    iconName?: string
+    rounded?: string
+    iconSize?: string | number
+    iconColor?: string
+  }>(),
+  {
+    id: '',
+    name: '',
+    autocomplete: '',
+    modelValue: undefined,
+    iconName: '',
+    label: '',
+    minWidth: 'w-96',
+    maxWidth: '',
+    inputClass: '',
+    labelClass: '',
+    text: 'text-lg',
+    required: false,
+    maxLength: undefined,
+    minLength: undefined,
+    readonly: false,
+    textSize: 'text-sm',
+    disabled: false,
+    rounded: 'rounded-md',
+    hint: '',
+    error: '',
+    iconSize: 24,
+    iconColor: '',
+  },
+)
+
+const attrs = useAttrs()
+const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
+
+const inputId = computed(() => props.id?.toString() || generatedId)
+
+const describedBy = computed(() => {
+  const ids: string[] = []
+  if (props.hint) ids.push(`${inputId.value}-hint`)
+  if (props.error) ids.push(`${inputId.value}-error`)
+  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
+  emit('update:modelValue', target.value)
+}
+
+const iconInputPaddingClass = computed(() => {
+  return props.iconName ? 'pr-10' : ''
+})
+</script>
+
+<style scoped>
+.floating-input:focus + label,
+.floating-input:not(:placeholder-shown) + label {
+  transform: translateY(-1.15rem) scale(0.9);
+}
+
+.floating-label {
+  background: white;
+  padding: 0 0.25rem;
+}
+
+.grow-height {
+  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
+  transform-origin: center;
+}
+
+.grow-height:focus {
+  transform: scaleY(1.2);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .grow-height {
+    transition: none;
+  }
+}
+</style>
+
diff --git a/nuxt.config.ts b/nuxt.config.ts
index daa8552..d16e834 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,9 +1,33 @@
 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>)',
+            }
+          }
+        }
+      }
+    }
+  }
 })
diff --git a/package-lock.json b/package-lock.json
index c854fd4..e21bbc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "@malio/layer-ui",
       "version": "0.0.1",
       "dependencies": {
+        "@nuxt/icon": "^2.2.1",
         "@nuxtjs/tailwindcss": "^6.14.0"
       },
       "devDependencies": {
@@ -38,7 +39,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@antfu/install-pkg/-/install-pkg-1.1.0.tgz",
       "integrity": "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "package-manager-detector": "^1.3.0",
@@ -337,7 +337,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -347,7 +346,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -381,7 +379,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
       "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -483,7 +480,6 @@
       "version": "7.29.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
       "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -685,7 +681,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -702,7 +697,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -719,7 +713,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -736,7 +729,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -753,7 +745,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -770,7 +761,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -787,7 +777,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -804,7 +793,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -821,7 +809,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -838,7 +825,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -855,7 +841,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -872,7 +857,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -889,7 +873,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -906,7 +889,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -923,7 +905,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -940,7 +921,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -957,7 +937,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -974,7 +953,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -991,7 +969,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1008,7 +985,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1025,7 +1001,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1042,7 +1017,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1059,7 +1033,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1076,7 +1049,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1093,7 +1065,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1110,7 +1081,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1318,6 +1288,47 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@iconify/collections": {
+      "version": "1.0.652",
+      "resolved": "https://registry.npmjs.org/@iconify/collections/-/collections-1.0.652.tgz",
+      "integrity": "sha512-RJhGvFA27VPidZPewkSPHncr1NgAo7qnaO+aUA2vEfFTnYvAfVoZGn1CPIK1y2J+N+3w/KHpEHAEf1pQAHiNDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==",
+      "license": "MIT"
+    },
+    "node_modules/@iconify/utils": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@iconify/utils/-/utils-3.1.0.tgz",
+      "integrity": "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw==",
+      "license": "MIT",
+      "dependencies": {
+        "@antfu/install-pkg": "^1.1.0",
+        "@iconify/types": "^2.0.0",
+        "mlly": "^1.8.0"
+      }
+    },
+    "node_modules/@iconify/vue": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/vue/-/vue-5.0.0.tgz",
+      "integrity": "sha512-C+KuEWIF5nSBrobFJhT//JS87OZ++QDORB6f2q2Wm6fl2mueSTpFBeBsveK0KW9hWiZ4mNiPjsh6Zs4jjdROSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      },
+      "peerDependencies": {
+        "vue": ">=3"
+      }
+    },
     "node_modules/@ioredis/commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.5.0.tgz",
@@ -1474,7 +1485,7 @@
       "version": "0.3.11",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.11.tgz",
       "integrity": "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1740,7 +1751,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/@nuxt/devtools-kit/-/devtools-kit-3.2.1.tgz",
       "integrity": "sha512-lwCtTgqH2izU/d+mAmddnPG3mBaia9BsknxYkMFAPbxtph/ex5tPkmQjKACPQU5q4Tl5bTgWgZWo9pa3oz4LMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nuxt/kit": "^4.3.1",
@@ -2081,11 +2091,32 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@nuxt/icon": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/icon/-/icon-2.2.1.tgz",
+      "integrity": "sha512-GI840yYGuvHI0BGDQ63d6rAxGzG96jQcWrnaWIQKlyQo/7sx9PjXkSHckXUXyX1MCr9zY6U25Td6OatfY6Hklw==",
+      "license": "MIT",
+      "dependencies": {
+        "@iconify/collections": "^1.0.641",
+        "@iconify/types": "^2.0.0",
+        "@iconify/utils": "^3.1.0",
+        "@iconify/vue": "^5.0.0",
+        "@nuxt/devtools-kit": "^3.1.1",
+        "@nuxt/kit": "^4.2.2",
+        "consola": "^3.4.2",
+        "local-pkg": "^1.1.2",
+        "mlly": "^1.8.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^3.10.0",
+        "tinyglobby": "^0.2.15"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.3.1.tgz",
       "integrity": "sha512-UjBFt72dnpc+83BV3OIbCT0YHLevJtgJCHpxMX0YRKWLDhhbcDdUse87GtsQBrjvOzK7WUNUYLDS/hQLYev5rA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "c12": "^3.3.3",
@@ -3962,7 +3993,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3976,7 +4006,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3990,7 +4019,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4004,7 +4032,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4018,7 +4045,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4032,7 +4058,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4046,7 +4071,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4060,7 +4084,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4074,7 +4097,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4088,7 +4110,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4102,7 +4123,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4116,7 +4136,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4130,7 +4149,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4144,7 +4162,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4158,7 +4175,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4172,7 +4188,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4186,7 +4201,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4200,7 +4214,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4214,7 +4227,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4228,7 +4240,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4242,7 +4253,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4256,7 +4266,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4270,7 +4279,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4284,7 +4292,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4298,7 +4305,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4438,7 +4444,7 @@
       "version": "24.10.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.13.tgz",
       "integrity": "sha512-oH72nZRfDv9lADUBSo104Aq7gPHpQZc4BTx38r9xf9pg5LfP6EzSyH2n7qFmmxRQXh7YlUXODcYsg6PuTDSxGg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~7.16.0"
@@ -5174,7 +5180,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.28.tgz",
       "integrity": "sha512-kviccYxTgoE8n6OCw96BNdYlBg2GOWfBuOW4Vqwrt7mSKWKwFVvI8egdTltqRgITGPsTFYtKYfxIG8ptX2PJHQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -5188,7 +5193,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.28.tgz",
       "integrity": "sha512-/1ZepxAb159jKR1btkefDP+J2xuWL5V3WtleRmxaT+K2Aqiek/Ab/+Ebrw2pPj0sdHO8ViAyyJWfhXXOP/+LQA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-core": "3.5.28",
@@ -5199,7 +5203,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.28.tgz",
       "integrity": "sha512-6TnKMiNkd6u6VeVDhZn/07KhEZuBSn43Wd2No5zaP5s3xm8IqFTHBj84HJah4UepSUJTro5SoqqlOY22FKY96g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.29.0",
@@ -5217,7 +5220,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.28.tgz",
       "integrity": "sha512-JCq//9w1qmC6UGLWJX7RXzrGpKkroubey/ZFqTpvEIDJEKGgntuDMqkuWiZvzTzTA5h2qZvFBFHY7fAAa9475g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
@@ -5305,7 +5307,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.28.tgz",
       "integrity": "sha512-gr5hEsxvn+RNyu9/9o1WtdYdwDjg5FgjUSBEkZWqgTKlo/fvwZ2+8W6AfKsc9YN2k/+iHYdS9vZYAhpi10kNaw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/shared": "3.5.28"
@@ -5315,7 +5316,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.28.tgz",
       "integrity": "sha512-POVHTdbgnrBBIpnbYU4y7pOMNlPn2QVxVzkvEA2pEgvzbelQq4ZOUxbp2oiyo+BOtiYlm8Q44wShHJoBvDPAjQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.28",
@@ -5326,7 +5326,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.28.tgz",
       "integrity": "sha512-4SXxSF8SXYMuhAIkT+eBRqOkWEfPu6nhccrzrkioA6l0boiq7sp18HCOov9qWJA5HML61kW8p/cB4MmBiG9dSA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/reactivity": "3.5.28",
@@ -5339,7 +5338,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.28.tgz",
       "integrity": "sha512-pf+5ECKGj8fX95bNincbzJ6yp6nyzuLDhYZCeFxUNp8EBrQpPpQaLX3nNCp49+UbgbPun3CeVE+5CXVV1Xydfg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-ssr": "3.5.28",
@@ -5353,7 +5351,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.28.tgz",
       "integrity": "sha512-cfWa1fCGBxrvaHRhvV3Is0MgmrbSCxYTXCSCau2I0a1Xw1N1pHAvkWCiXPRAqjvToILvguNyEwjevUqAuBQWvQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/abbrev": {
@@ -5955,7 +5952,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/builtin-modules": {
@@ -6551,7 +6548,6 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -6759,7 +6755,6 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/db0": {
@@ -7123,7 +7118,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-7.0.1.tgz",
       "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -7189,7 +7183,6 @@
       "version": "0.27.3",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
       "integrity": "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -7763,7 +7756,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esutils": {
@@ -7820,7 +7812,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
       "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.3",
@@ -8198,7 +8189,6 @@
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
       "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=16"
@@ -8601,7 +8591,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
       "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": ">=16.17.0"
@@ -8976,7 +8965,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
       "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
@@ -9041,7 +9029,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/jackspeak": {
@@ -9532,7 +9519,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz",
       "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mlly": "^1.7.4",
@@ -9715,7 +9701,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/merge2": {
@@ -9808,7 +9793,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
       "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10212,7 +10196,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
       "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^4.0.0"
@@ -10228,7 +10211,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
       "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -10463,7 +10445,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
       "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mimic-fn": "^4.0.0"
@@ -10709,7 +10690,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.6.0.tgz",
       "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/parse-imports-exports": {
@@ -10768,7 +10748,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11615,7 +11594,6 @@
       "version": "0.2.11",
       "resolved": "https://registry.npmjs.org/quansync/-/quansync-0.2.11.tgz",
       "integrity": "sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -12020,7 +11998,6 @@
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.8"
@@ -12309,7 +12286,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -12322,7 +12298,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12345,7 +12320,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -12438,7 +12412,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -12449,7 +12423,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -12533,7 +12507,6 @@
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz",
       "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/streamx": {
@@ -12618,7 +12591,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
       "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -13055,7 +13027,7 @@
       "version": "5.46.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.46.0.tgz",
       "integrity": "sha512-jTwoImyr/QbOWFFso3YoU3ik0jBBDJ6JTOQiy/J2YxVJdZCc+5u7skhNwiOR3FQIygFqVUPHl7qbbxtjW2K3Qg==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -13074,7 +13046,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/text-decoder": {
@@ -13305,7 +13277,7 @@
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -13374,7 +13346,7 @@
       "version": "7.16.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
       "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/unenv": {
@@ -13872,7 +13844,6 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
       "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.27.0",
@@ -14254,7 +14225,6 @@
       "version": "3.5.28",
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.28.tgz",
       "integrity": "sha512-BRdrNfeoccSoIZeIhyPBfvWSLFP4q8J3u8Ju8Ug5vu3LdD+yTM13Sg4sKtljxozbnuMu1NB1X5HBHRYUzFocKg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-dom": "3.5.28",
@@ -14370,7 +14340,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
diff --git a/package.json b/package.json
index 6167cc3..1465a96 100644
--- a/package.json
+++ b/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",
@@ -24,6 +28,7 @@
     "vue": "latest"
   },
   "dependencies": {
+    "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0"
   }
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..6f76011
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,22 @@
+import type {Config} from 'tailwindcss'
+
+export default <Partial<Config>>{
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
+      },
+      colors: {
+        primary: {
+          500: '#222783',
+        },
+        secondary: {
+          500: '#304998'
+        },
+        5: {
+          500: '#F3F4F8'
+        }
+      }
+    }
+  }
+}

From 75a3912727c27ab41801a68d415e8d5f8c8431b9 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 23 Feb 2026 08:56:27 +0100
Subject: [PATCH 2/8] feat : ajout du masque et de l'etat succes sur le texte

---
 .playground/pages/composant/inputText.vue | 50 ++++++++++------
 app/assets/css/malio.css                  |  1 +
 app/components/malio/InputText.vue        | 73 +++++++++++++++--------
 nuxt.config.ts                            |  1 +
 package-lock.json                         |  9 ++-
 package.json                              |  3 +-
 6 files changed, 93 insertions(+), 44 deletions(-)

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index aa18af6..56f1032 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -2,7 +2,7 @@
   <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 v-model="simpleValue" />
+      <MalioInputText v-model="simpleValue"/>
     </div>
 
     <div class="rounded-lg border p-4">
@@ -44,7 +44,7 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint et erreur</h2>
+      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
       <MalioInputText
         v-model="emailValue"
         label="Email"
@@ -57,26 +57,14 @@
           error="Le code doit contenir au moins 6 caracteres"
         />
       </div>
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Largeurs</h2>
-      <div class="space-y-4">
+      <div class="mt-4">
         <MalioInputText
-          label="Petit"
-          min-width="w-56"
-        />
-        <MalioInputText
-          label="Moyen"
-          min-width="w-72"
-        />
-        <MalioInputText
-          label="Large"
-          min-width="w-full"
+          model-value="abcabc"
+          label="Code"
+          success="Le code est valide"
         />
       </div>
     </div>
-
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
       <MalioInputText
@@ -87,6 +75,15 @@
         error="Le code est invalide"
       />
     </div>
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
+      <MalioInputText
+        label="Email"
+        success="Adresse 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">Hint + icône</h2>
@@ -120,6 +117,13 @@
         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>
 </template>
 
@@ -129,4 +133,14 @@ const nameValue = ref('')
 const searchValue = ref('')
 const emailValue = ref('')
 const cityValue = ref('')
+
+const maskOptions = {
+  mask: '@@-###-@@',
+  tokens: {
+    '@': {
+      pattern: /[A-Za-z]/,
+      transform: (char: string) => char.toUpperCase()
+    }
+  }
+}
 </script>
diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 97ff80e..69ff193 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -14,5 +14,6 @@
     --m-bg: 243 244 248;          /* Couleur de fond générale */
 
     --m-error: 155 17 30;         /* rouge pur pour les erreurs */
+    --m-success: 15 149 70;         /* rouge pur pour les erreurs */
   }
 }
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 2833115..9683165 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -5,14 +5,17 @@
   >
     <input
       :id="inputId"
+      v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
       class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
       :class="[
         disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
-        error
+        hasError
           ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-          : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
+          : hasSuccess
+            ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
+            : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
         text,
         iconInputPaddingClass,
         inputClass,
@@ -37,9 +40,11 @@
       :for="inputId"
       class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
       :class="[
-        error
+        hasError
           ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
-          : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
+          : hasSuccess
+            ? 'text-m-success peer-valid:text-m-success peer-focus:text-m-success'
+            : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
         labelClass,
         textSize,
       ]"
@@ -52,36 +57,47 @@
       :name="iconName"
       :size="iconSize"
       :class="[
-        error
+        hasError
           ? 'text-m-error'
-          : 'text-m-muted',
+          : hasSuccess
+            ? 'text-m-success'
+            : 'text-m-muted',
         'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
         iconColor,
       ]"
     />
 
   </div>
-    <p
-      v-if="hint && !error"
-      :id="`${inputId}-hint`"
-      class="mt-1 text-xs text-m-muted"
-    >
-      {{ hint }}
-    </p>
+  <p
+    v-if="hint && !hasError"
+    :id="`${inputId}-hint`"
+    class="mt-1 text-xs text-m-muted"
+  >
+    {{ hint }}
+  </p>
 
-    <p
-      v-if="error"
-      :id="`${inputId}-error`"
-      class="mt-1 text-xs text-m-error"
-    >
-      {{ error }}
-    </p>
+  <p
+    v-if="hasError"
+    :id="`${inputId}-error`"
+    class="mt-1 text-xs text-m-error"
+  >
+    {{ error }}
+  </p>
+
+  <p v-if="hasSuccess && !hasError"
+    :id="`${inputId}-success`"
+    class="mt-1 text-xs text-m-success"
+  >
+    {{ successMessage }}
+  </p>
 </template>
 
 <script setup lang="ts">
-import { computed, useAttrs } from 'vue'
+import type {MaskInputOptions} from 'maska'
+import {vMaska} from 'maska/vue'
+import {computed, useAttrs} from 'vue'
 
-defineOptions({ inheritAttrs: false })
+defineOptions({inheritAttrs: false})
 
 const props = withDefaults(
   defineProps<{
@@ -103,10 +119,13 @@ const props = withDefaults(
     readonly?: boolean
     hint?: string
     error?: string
+    success?: string
+    succes?: string
     iconName?: string
     rounded?: string
     iconSize?: string | number
     iconColor?: string
+    mask?: string | MaskInputOptions
   }>(),
   {
     id: '',
@@ -129,8 +148,11 @@ const props = withDefaults(
     rounded: 'rounded-md',
     hint: '',
     error: '',
+    success: '',
+    succes: '',
     iconSize: 24,
     iconColor: '',
+    mask: undefined,
   },
 )
 
@@ -138,11 +160,15 @@ const attrs = useAttrs()
 const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
 
 const inputId = computed(() => props.id?.toString() || generatedId)
+const successMessage = computed(() => props.success || props.succes || '')
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!successMessage.value)
 
 const describedBy = computed(() => {
   const ids: string[] = []
   if (props.hint) ids.push(`${inputId.value}-hint`)
-  if (props.error) ids.push(`${inputId.value}-error`)
+  if (hasError.value) ids.push(`${inputId.value}-error`)
+  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
   return ids.length ? ids.join(' ') : undefined
 })
 
@@ -186,4 +212,3 @@ const iconInputPaddingClass = computed(() => {
   }
 }
 </style>
-
diff --git a/nuxt.config.ts b/nuxt.config.ts
index d16e834..a9302c3 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -24,6 +24,7 @@ export default defineNuxtConfig({
               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>)',
             }
           }
         }
diff --git a/package-lock.json b/package-lock.json
index e21bbc0..cc01c95 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "@nuxt/icon": "^2.2.1",
-        "@nuxtjs/tailwindcss": "^6.14.0"
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "maska": "^3.2.0"
       },
       "devDependencies": {
         "@nuxt/eslint": "latest",
@@ -9672,6 +9673,12 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/maska": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/maska/-/maska-3.2.0.tgz",
+      "integrity": "sha512-zSmSgs5/q9vMSmrdZT3rKOv9uLznNWR/niuuAdBZDTvB3SMKOX9vhMtDijFyExz+B4UClu2rvksylUh/ea1bLA==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
diff --git a/package.json b/package.json
index 1465a96..aa8112f 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
   },
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "maska": "^3.2.0"
   }
 }

From 9710fd63d7e75a9ee0cb2c12240d34860106050f Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 23 Feb 2026 09:01:16 +0100
Subject: [PATCH 3/8] fix : lint

---
 app/components/malio/InputText.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 9683165..982d052 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -84,7 +84,8 @@
     {{ error }}
   </p>
 
-  <p v-if="hasSuccess && !hasError"
+  <p
+    v-if="hasSuccess && !hasError"
     :id="`${inputId}-success`"
     class="mt-1 text-xs text-m-success"
   >

From 1013c8301814b4a496d5d1967ac5003136f856b5 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Mon, 23 Feb 2026 11:01:37 +0100
Subject: [PATCH 4/8] feat : ajout du masque et de l'etat succes sur le texte

---
 .playground/pages/composant/inputText.vue | 95 ++++++++++++++---------
 app/components/malio/InputText.vue        | 10 +--
 2 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index 56f1032..0f501a6 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -28,9 +28,9 @@
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
       <MalioInputText
-        model-value="Valeur verrouillee"
+        model-value="Valeur verrouillée"
         disabled
-        label="Champ desactive"
+        label="Champ désactivé"
       />
     </div>
 
@@ -44,26 +44,14 @@
     </div>
 
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint,erreur et succes</h2>
+      <h2 class="mb-4 text-xl font-bold">Hint + icône</h2>
       <MalioInputText
-        v-model="emailValue"
-        label="Email"
-        hint="Format attendu: nom@domaine.com"
+        v-model="cityValue"
+        label="Ville"
+        icon-name="mdi:map-marker-outline"
+        icon-size="20"
+        hint="Commencez à taper le nom de la ville"
       />
-      <div class="mt-4">
-        <MalioInputText
-          model-value="abc"
-          label="Code"
-          error="Le code doit contenir au moins 6 caracteres"
-        />
-      </div>
-      <div class="mt-4">
-        <MalioInputText
-          model-value="abcabc"
-          label="Code"
-          success="Le code est valide"
-        />
-      </div>
     </div>
     <div class="rounded-lg border p-4">
       <h2 class="mb-4 text-xl font-bold">Erreur + icône</h2>
@@ -76,26 +64,14 @@
       />
     </div>
     <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succes + icône</h2>
+      <h2 class="mb-4 text-xl font-bold">Succès + icône</h2>
       <MalioInputText
-        label="Email"
-        success="Adresse valide"
+        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">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">Readonly + icône</h2>
       <MalioInputText
@@ -124,6 +100,40 @@
         :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>
 
@@ -131,8 +141,21 @@
 const simpleValue = ref('')
 const nameValue = ref('')
 const searchValue = ref('')
-const emailValue = 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: '@@-###-@@',
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 982d052..3d0616a 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -69,7 +69,7 @@
 
   </div>
   <p
-    v-if="hint && !hasError"
+    v-if="hint && !hasError && !hasSuccess"
     :id="`${inputId}-hint`"
     class="mt-1 text-xs text-m-muted"
   >
@@ -96,7 +96,7 @@
 <script setup lang="ts">
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
-import {computed, useAttrs} from 'vue'
+import {computed, useAttrs, useId} from 'vue'
 
 defineOptions({inheritAttrs: false})
 
@@ -158,16 +158,16 @@ const props = withDefaults(
 )
 
 const attrs = useAttrs()
-const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`
+const generatedId = useId()
 
-const inputId = computed(() => props.id?.toString() || generatedId)
+const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
 const successMessage = computed(() => props.success || props.succes || '')
 const hasError = computed(() => !!props.error)
 const hasSuccess = computed(() => !!successMessage.value)
 
 const describedBy = computed(() => {
   const ids: string[] = []
-  if (props.hint) ids.push(`${inputId.value}-hint`)
+  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

From a9627a68757e845ae58b7a24c58c159a0f0df2a8 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Mon, 23 Feb 2026 11:14:24 +0100
Subject: [PATCH 5/8] feat CHANGELOG.md

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f230edc..4b688f4 100644
--- a/CHANGELOG.md
+++ b/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
 

From 480defcd820e27cef0fde993408ff32ae18bb475 Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Tue, 24 Feb 2026 10:48:46 +0100
Subject: [PATCH 6/8] feat : ajout des tests et retour sur le composant

---
 .playground/pages/composant/inputText.vue |   4 +
 app/components/malio/Input.test.ts        | 318 +++++++++++++++++++++-
 app/components/malio/InputText.vue        |  95 +++----
 pre-commit                                |  26 +-
 4 files changed, 362 insertions(+), 81 deletions(-)

diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/inputText.vue
index 0f501a6..e1d478f 100644
--- a/.playground/pages/composant/inputText.vue
+++ b/.playground/pages/composant/inputText.vue
@@ -32,6 +32,10 @@
         disabled
         label="Champ désactivé"
       />
+      <MalioInputText
+        disabled
+        label="Champ désactivé"
+      />
     </div>
 
     <div class="rounded-lg border p-4">
diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts
index aefc9fb..c067744 100644
--- a/app/components/malio/Input.test.ts
+++ b/app/components/malio/Input.test.ts
@@ -1,23 +1,319 @@
-import { describe, expect, it } from 'vitest'
-import { mount } from '@vue/test-utils'
-import Input from './Input.vue'
+import {describe, expect, it} from 'vitest'
+import {config, mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import Input from './InputText.vue'
+
+
+type InputProps = {
+  id?: string
+  label?: string
+  name?: string
+  autocomplete?: string
+  modelValue?: string | null
+  textSize?: string
+  labelClass?: string
+  required?: boolean
+  maxLength?: number | string
+  minLength?: number | string
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+  iconName?: string
+  iconSize?: string | number
+  iconColor?: string
+}
+
+const InputForTest = Input as DefineComponent<InputProps>
+const iconStub = {
+  template: '<span data-test="icon" v-bind="$attrs" />',
+}
+config.global.stubs = {
+  ...(config.global.stubs ?? {}),
+  Icon: iconStub,
+}
 
 describe('MalioInput', () => {
-  it('affiche la valeur initiale', () => {
-    const wrapper = mount(Input, {
-      props: { modelValue: 'hello' },
+  // Props de base: valeur, label, name, id, autocomplete
+  it('renders the initial input value', () => {
+    const wrapper = mount(InputForTest, {
+      props: {modelValue: 'initialValueTest'},
     })
-
-    expect(wrapper.get('input').element.value).toBe('hello')
+    expect(wrapper.get('input').element.value).toBe('initialValueTest')
   })
 
-  it('emet update:modelValue au changement', async () => {
-    const wrapper = mount(Input, {
-      props: { modelValue: '' },
+  it('renders the label text', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'labelTest'},
     })
+    expect(wrapper.get('label').text()).toBe('labelTest')
+  })
 
+  it('applies the name attribute', () => {
+    const wrapper = mount(InputForTest, {
+      props: {name: 'nameTest'},
+    })
+    expect(wrapper.get('input').attributes('name')).toBe('nameTest')
+  })
+
+  it('uses provided id on input and label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {id: 'custom-id', label: 'Label'},
+    })
+    expect(wrapper.get('input').attributes('id')).toBe('custom-id')
+    expect(wrapper.get('label').attributes('for')).toBe('custom-id')
+  })
+
+  it('applies a different size of rounded', () => {
+    const wrapper = mount(InputForTest, {
+      props: {rounded: 'rounded-md'},
+    })
+    expect(wrapper.get('input').classes()).toContain('rounded-md')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'Label'},
+    })
+    const inputId = wrapper.get('input').attributes('id')
+    expect(inputId).toBeDefined()
+    expect(inputId?.startsWith('malio-input-text-')).toBe(true)
+    expect(wrapper.get('label').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the autocomplete attribute', () => {
+    const wrapper = mount(InputForTest, {
+      props: {autocomplete: 'autocompleteTest'},
+    })
+    expect(wrapper.get('input').attributes('autocomplete')).toBe('autocompleteTest')
+  })
+
+  // États HTML: required, readonly, disabled
+  it('does not set required when false', () => {
+    const wrapper = mount(InputForTest, {
+      props: {required: false},
+    })
+    expect(wrapper.get('input').attributes('required')).toBeUndefined()
+  })
+
+  it('sets required when true', () => {
+    const wrapper = mount(InputForTest, {
+      props: {required: true},
+    })
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('does not set readonly when false', () => {
+    const wrapper = mount(InputForTest, {
+      props: {readonly: false},
+    })
+    expect(wrapper.get('input').attributes('readonly')).toBeUndefined()
+  })
+
+  it('sets readonly when true', () => {
+    const wrapper = mount(InputForTest, {
+      props: {readonly: true},
+    })
+    expect(wrapper.get('input').attributes('readonly')).toBeDefined()
+  })
+
+  it('does not set disabled and keeps text cursor when false', () => {
+    const wrapper = mount(InputForTest, {
+      props: {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 = mount(InputForTest, {
+      props: {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')
+  })
+
+  // Émission d'événements
+  it('emits update:modelValue on input change', async () => {
+    const wrapper = mount(InputForTest, {
+      props: {modelValue: ''},
+    })
     await wrapper.get('input').setValue('new value')
 
     expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['new value'])
   })
+
+  // Contraintes et classes de texte
+  it('applies maxLength to input', () => {
+    const wrapper = mount(InputForTest, {
+      props: {maxLength: 25},
+    })
+    expect(wrapper.get('input').attributes('maxlength')).toBe('25')
+  })
+
+  it('applies minLength to input', () => {
+    const wrapper = mount(InputForTest, {
+      props: {minLength: 25},
+    })
+    expect(wrapper.get('input').attributes('minlength')).toBe('25')
+  })
+
+  it('applies textSize class on label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'Label', textLabel: 'text-sm'},
+    })
+    expect(wrapper.get('label').classes()).toContain('text-sm')
+  })
+
+  // États visuels: erreur et succès
+  it('shows error message without label and icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {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('p').classes()).toContain('text-m-error')
+  })
+
+  it('shows error message with label and without icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {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('label').classes()).toContain('text-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 = mount(InputForTest, {
+      props: {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('label').classes()).toContain('text-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 = mount(InputForTest, {
+      props: {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 = mount(InputForTest, {
+      props: {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 = mount(InputForTest, {
+      props: {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')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+    expect(wrapper.get('label').classes()).toContain('text-m-success')
+  })
+
+  it('shows success message with label and icon', () => {
+    const wrapper = mount(InputForTest, {
+      props: {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('label').classes()).toContain('text-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 = mount(InputForTest, {
+      props: {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 = mount(InputForTest, {
+      props: {
+        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')
+  })
+
+  // Aide et classes de label
+  it('shows hint message', () => {
+    const wrapper = mount(InputForTest, {
+      props: {hint: 'Hint message test'},
+    })
+    expect(wrapper.get('p.text-m-muted').text()).toBe('Hint message test')
+  })
+
+  it('applies labelClass on label', () => {
+    const wrapper = mount(InputForTest, {
+      props: {label: 'Label', labelClass: 'text-red-500'},
+    })
+    expect(wrapper.get('label').classes()).toContain('text-red-500')
+  })
+
+  it('does not render label when label prop is missing', () => {
+    const wrapper = mount(InputForTest, {
+      props: {labelClass: 'text-red-500'},
+    })
+
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  // Icône : rendu et options
+  it('renders icon with default positioning and muted color', () => {
+    const wrapper = mount(InputForTest, {
+      props: {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('passes icon size prop to icon component', () => {
+    const wrapper = mount(InputForTest, {
+      props: {iconName: 'mdi:key-outline', iconSize: 'text-2xl'},
+    })
+    expect(wrapper.get('[data-test="icon"]').attributes('size')).toBe('text-2xl')
+  })
+
+  it('applies icon color class', () => {
+    const wrapper = mount(InputForTest, {
+      props: {iconName: 'mdi:key-outline', iconColor: 'text-m-primary'},
+    })
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-primary')
+  })
 })
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index 3d0616a..cb9374e 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="relative mt-4 w-full"
+    class="relative mt-4 flex h-12 w-full items-center"
     :class="[minWidth, maxWidth]"
   >
     <input
@@ -8,19 +8,19 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none border-m-muted focus:border-2"
       :class="[
-        disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
-        hasError
-          ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
-          : hasSuccess
-            ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
-            : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
-        text,
-        iconInputPaddingClass,
-        inputClass,
-        rounded,
-      ]"
+      disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
+      hasError
+        ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
+        : hasSuccess
+          ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
+          : 'border-m-border focus:border-m-primary focus:pl-[11px]',
+      textInput,
+      iconInputPaddingClass,
+      inputClass,
+      rounded,
+    ]"
       :required="required"
       :maxlength="maxLength"
       :minlength="minLength"
@@ -38,18 +38,19 @@
     <label
       v-if="label"
       :for="inputId"
-      class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
+      class="floating-label absolute left-3 top-2 mt-1 origin-left transition-transform duration-150 font-medium"
       :class="[
-        hasError
-          ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
-          : hasSuccess
-            ? 'text-m-success peer-valid:text-m-success peer-focus:text-m-success'
-            : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
-        labelClass,
-        textSize,
+    disabled ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
+    hasError
+      ? 'text-m-error'
+      : hasSuccess
+        ? 'text-m-success'
+        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
+      labelClass,
+      textLabel,
       ]"
     >
-      {{ label }}
+    {{ label }}
     </label>
 
     <Icon
@@ -69,27 +70,18 @@
 
   </div>
   <p
-    v-if="hint && !hasError && !hasSuccess"
-    :id="`${inputId}-hint`"
-    class="mt-1 text-xs text-m-muted"
+    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 }}
-  </p>
-
-  <p
-    v-if="hasError"
-    :id="`${inputId}-error`"
-    class="mt-1 text-xs text-m-error"
-  >
-    {{ error }}
-  </p>
-
-  <p
-    v-if="hasSuccess && !hasError"
-    :id="`${inputId}-success`"
-    class="mt-1 text-xs text-m-success"
-  >
-    {{ successMessage }}
+    {{ hint || error || successMessage }}
   </p>
 </template>
 
@@ -109,8 +101,8 @@ const props = withDefaults(
     modelValue?: string | null | undefined
     minWidth?: string
     maxWidth?: string
-    text?: string
-    textSize?: string
+    textInput?: string
+    textLabel?: string
     inputClass?: string
     labelClass?: string
     required?: boolean
@@ -139,12 +131,12 @@ const props = withDefaults(
     maxWidth: '',
     inputClass: '',
     labelClass: '',
-    text: 'text-lg',
+    textInput: 'text-lg',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textSize: 'text-sm',
+    textLabel: 'text-sml',
     disabled: false,
     rounded: 'rounded-md',
     hint: '',
@@ -199,17 +191,14 @@ const iconInputPaddingClass = computed(() => {
 }
 
 .grow-height {
-  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
-  transform-origin: center;
+  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
 }
 
 .grow-height:focus {
-  transform: scaleY(1.2);
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
 }
-
 @media (prefers-reduced-motion: reduce) {
-  .grow-height {
-    transition: none;
-  }
+  .grow-height { transition: none; }
 }
 </style>
diff --git a/pre-commit b/pre-commit
index b616324..cf4eeee 100644
--- a/pre-commit
+++ b/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 ---"

From a5ced1456ea1a3a54ebba5bc463846156081469b Mon Sep 17 00:00:00 2001
From: Kevin Boudet <kevin@yuno.malio.fr>
Date: Tue, 24 Feb 2026 10:24:07 +0000
Subject: [PATCH 7/8] Actualiser app/assets/css/malio.css

---
 app/assets/css/malio.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css
index 69ff193..0fa1352 100644
--- a/app/assets/css/malio.css
+++ b/app/assets/css/malio.css
@@ -13,7 +13,7 @@
     --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 pur pour les erreurs */
-    --m-success: 15 149 70;         /* rouge pur pour les erreurs */
+    --m-error: 155 17 30;         /* rouge pour les erreurs */
+    --m-success: 15 149 70;       /* vert pour les succès  */
   }
 }

From 67436a0025f36dd373d88ab4dd948ef912459d7d Mon Sep 17 00:00:00 2001
From: kevin <kevin@yuno.malio.fr>
Date: Wed, 25 Feb 2026 10:36:50 +0100
Subject: [PATCH 8/8] fix : correction du composant

---
 app/components/malio/Input.test.ts |  4 +--
 app/components/malio/InputText.vue | 46 +++++++++++++-----------------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/app/components/malio/Input.test.ts b/app/components/malio/Input.test.ts
index c067744..ccb7ba1 100644
--- a/app/components/malio/Input.test.ts
+++ b/app/components/malio/Input.test.ts
@@ -305,9 +305,9 @@ describe('MalioInput', () => {
 
   it('passes icon size prop to icon component', () => {
     const wrapper = mount(InputForTest, {
-      props: {iconName: 'mdi:key-outline', iconSize: 'text-2xl'},
+      props: {iconName: 'mdi:key-outline', iconSize: '24'},
     })
-    expect(wrapper.get('[data-test="icon"]').attributes('size')).toBe('text-2xl')
+    expect(wrapper.get('[data-test="icon"]').attributes('height')).toBe('24')
   })
 
   it('applies icon color class', () => {
diff --git a/app/components/malio/InputText.vue b/app/components/malio/InputText.vue
index cb9374e..c6e4da2 100644
--- a/app/components/malio/InputText.vue
+++ b/app/components/malio/InputText.vue
@@ -8,17 +8,16 @@
       v-maska="mask"
       :name="name"
       :autocomplete="autocomplete"
-      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none border-m-muted focus:border-2"
+      class="floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none  focus:border-2"
       :class="[
       disabled ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
       hasError
         ? 'border-m-error focus:border-m-error focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-error'
         : hasSuccess
           ? 'border-m-success focus:border-m-success focus:pl-[11px] [&:not(:placeholder-shown)]:border-m-success'
-          : 'border-m-border focus:border-m-primary focus:pl-[11px]',
+          : 'border-m-muted focus:border-m-primary focus:pl-[11px]',
       textInput,
       iconInputPaddingClass,
-      inputClass,
       rounded,
     ]"
       :required="required"
@@ -50,22 +49,20 @@
       textLabel,
       ]"
     >
-    {{ label }}
+      {{ label }}
     </label>
 
-    <Icon
+    <IconifyIcon
       v-if="iconName"
-      :name="iconName"
-      :size="iconSize"
+      :icon="iconName"
+      :width="iconSize"
+      :height="iconSize"
+      data-test="icon"
       :class="[
-        hasError
-          ? 'text-m-error'
-          : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
-        iconColor,
-      ]"
+      hasError ? 'text-m-error' : hasSuccess ? 'text-m-success' : '',
+      'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
+      iconColor,
+    ]"
     />
 
   </div>
@@ -81,16 +78,18 @@
         'mt-1 text-xs ml-[2px] ',
       ]"
   >
-    {{ hint || error || successMessage }}
+    {{ hint || error || success }}
   </p>
 </template>
 
 <script setup lang="ts">
+
 import type {MaskInputOptions} from 'maska'
 import {vMaska} from 'maska/vue'
 import {computed, useAttrs, useId} from 'vue'
+import { Icon as IconifyIcon } from '@iconify/vue'
 
-defineOptions({inheritAttrs: false})
+defineOptions({name: 'MalioInputText', inheritAttrs: false})
 
 const props = withDefaults(
   defineProps<{
@@ -103,7 +102,6 @@ const props = withDefaults(
     maxWidth?: string
     textInput?: string
     textLabel?: string
-    inputClass?: string
     labelClass?: string
     required?: boolean
     maxLength?: number | string
@@ -113,7 +111,6 @@ const props = withDefaults(
     hint?: string
     error?: string
     success?: string
-    succes?: string
     iconName?: string
     rounded?: string
     iconSize?: string | number
@@ -129,22 +126,20 @@ const props = withDefaults(
     label: '',
     minWidth: 'w-96',
     maxWidth: '',
-    inputClass: '',
-    labelClass: '',
     textInput: 'text-lg',
+    labelClass: '',
     required: false,
     maxLength: undefined,
     minLength: undefined,
     readonly: false,
-    textLabel: 'text-sml',
+    textLabel: 'text-sm',
     disabled: false,
     rounded: 'rounded-md',
     hint: '',
     error: '',
     success: '',
-    succes: '',
     iconSize: 24,
-    iconColor: '',
+    iconColor: 'text-m-muted',
     mask: undefined,
   },
 )
@@ -153,9 +148,8 @@ const attrs = useAttrs()
 const generatedId = useId()
 
 const inputId = computed(() => props.id?.toString() || `malio-input-text-${generatedId}`)
-const successMessage = computed(() => props.success || props.succes || '')
 const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!successMessage.value)
+const hasSuccess = computed(() => !!props.success)
 
 const describedBy = computed(() => {
   const ids: string[] = []