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/checkbox.vue

@@ -1,101 +0,0 @@
-<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>
-      <MalioCheckbox
-        v-model="simpleValue"
-        label="Accepter les conditions"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Coche par default</h2>
-      <MalioCheckbox
-        v-model="checkedValue"
-        label="Recevoir la newsletter"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint</h2>
-      <MalioCheckbox
-        v-model="hintValue"
-        label="J'accepte le traitement des donnees"
-        hint="Vous pouvez retirer votre consentement a tout moment."
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-      <MalioCheckbox
-        :model-value="false"
-        label="Accepter les CGU"
-        error="Ce champ est obligatoire."
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succès</h2>
-      <MalioCheckbox
-        :model-value="true"
-        label="Adresse vérifiée"
-        success="Choix valide."
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
-      <div class="space-y-4">
-        <MalioCheckbox
-          :model-value="true"
-          label="Option désactivée"
-          disabled
-        />
-        <MalioCheckbox
-          :model-value="true"
-          label="Option readonly"
-          readonly
-        />
-      </div>
-    </div>
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
-      <div class="space-y-4">
-        <MalioCheckbox
-          label="Option 1"
-        />
-        <MalioCheckbox
-          label="Option 2"
-        />
-        <MalioCheckbox
-          label="Option 3"
-        />
-    </div>
-    </div>
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
-      <div class="space-y-4">
-        <MalioCheckbox
-          v-for="option in options"
-          :key="option"
-          :label="option"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
-const simpleValue = ref(false)
-const checkedValue = ref(true)
-const hintValue = ref(false)
-const options = [
-  'Option A',
-  'Option B',
-  'Option C',
-  'Option D',
-
-]
-</script>

.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>

app/components/malio/Checkbox.test.ts

@@ -1,142 +0,0 @@
-import {describe, expect, it} from 'vitest'
-import {mount} from '@vue/test-utils'
-import type {DefineComponent} from 'vue'
-import Checkbox from './Checkbox.vue'
-
-type CheckboxProps = {
-  id?: string
-  label?: string
-  name?: string
-  modelValue?: boolean | null
-  inputClass?: string
-  labelClass?: string
-  groupClass?: string
-  required?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  hint?: string
-  error?: string
-  success?: string
-}
-
-const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
-
-const mountCheckbox = (props: CheckboxProps = {}) =>
-  mount(CheckboxForTest, {props})
-
-describe('MalioCheckbox', () => {
-  it('renders a checkbox input', () => {
-    const wrapper = mountCheckbox()
-
-    expect(wrapper.get('input').attributes('type')).toBe('checkbox')
-  })
-
-  it('renders the label text', () => {
-    const wrapper = mountCheckbox({label: 'Accept terms'})
-
-    expect(wrapper.get('label').text()).toContain('Accept terms')
-  })
-
-  it('uses a provided id on input and label', () => {
-    const wrapper = mountCheckbox({
-      id: 'checkbox-id',
-      label: 'Accept terms',
-    })
-
-    expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
-    expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
-  })
-
-  it('generates an id when none is provided', () => {
-    const wrapper = mountCheckbox({label: 'Accept terms'})
-    const inputId = wrapper.get('input').attributes('id')
-
-    expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
-    expect(wrapper.get('label').attributes('for')).toBe(inputId)
-  })
-
-  it('applies the name attribute', () => {
-    const wrapper = mountCheckbox({name: 'terms'})
-
-    expect(wrapper.get('input').attributes('name')).toBe('terms')
-  })
-
-  it('reflects the checked state from modelValue', () => {
-    const wrapper = mountCheckbox({modelValue: true})
-
-    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
-  })
-
-  it('emits update:modelValue when toggled', async () => {
-    const wrapper = mountCheckbox({modelValue: false})
-    const input = wrapper.get('input')
-
-    await input.setValue(true)
-
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
-  })
-
-  it('does not emit when readonly', async () => {
-    const wrapper = mountCheckbox({
-      modelValue: true,
-      readonly: true,
-    })
-    const input = wrapper.get('input')
-
-    await input.setValue(false)
-
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-    expect((input.element as HTMLInputElement).checked).toBe(true)
-  })
-
-  it('sets disabled and required attributes', () => {
-    const wrapper = mountCheckbox({
-      disabled: true,
-      required: true,
-    })
-
-    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
-    expect(wrapper.get('input').attributes('required')).toBeDefined()
-  })
-
-  it('shows a hint message and links it with aria-describedby', () => {
-    const wrapper = mountCheckbox({hint: 'Required field'})
-    const inputId = wrapper.get('input').attributes('id')
-
-    expect(wrapper.get('p').text()).toBe('Required field')
-    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
-  })
-
-  it('shows an error state and message', () => {
-    const wrapper = mountCheckbox({
-      label: 'Accept terms',
-      error: 'You must accept',
-    })
-
-    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p').text()).toBe('You must accept')
-  })
-
-  it('shows success only when there is no error', () => {
-    const wrapper = mountCheckbox({
-      success: 'Valid',
-      error: 'Invalid',
-    })
-
-    expect(wrapper.get('p').text()).toBe('Invalid')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
-  })
-
-  it('shows success styles and message when there is no error', () => {
-    const wrapper = mountCheckbox({
-      label: 'Accept terms',
-      success: 'Valid',
-      modelValue: true,
-    })
-
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('p').text()).toBe('Valid')
-    expect(wrapper.get('p').classes()).toContain('text-m-success')
-  })
-})

app/components/malio/Checkbox.vue

@@ -1,227 +0,0 @@
-<template>
-  <div :class="mergedGroupClass">
-    <input
-      :id="inputId"
-      :name="name"
-      :checked="isChecked"
-      :required="required"
-      :disabled="disabled"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      :class="mergedInputClass"
-      v-bind="attrs"
-      type="checkbox"
-      @change="onChange"
-    >
-
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      <span>
-        <svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
-          <polyline points="1.5 6 4.5 9 10.5 1"/>
-        </svg>
-      </span>
-      <span>
-        {{ label }}
-      </span>
-    </label>
-
-    <p
-      v-if="hint || hasError || hasSuccess"
-      :id="`${inputId}-describedby`"
-      :class="mergedMessageClass"
-    >
-      {{ error || success || hint }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {computed, useAttrs, useId} from 'vue'
-import {twMerge} from 'tailwind-merge'
-
-defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    label?: string
-    name?: string
-    modelValue?: boolean | null | undefined
-    inputClass?: string
-    labelClass?: string
-    groupClass?: string
-    required?: boolean
-    disabled?: boolean
-    readonly?: boolean
-    hint?: string
-    error?: string
-    success?: string
-  }>(),
-  {
-    id: '',
-    label: '',
-    name: '',
-    modelValue: undefined,
-    inputClass: '',
-    labelClass: '',
-    groupClass: '',
-    required: false,
-    disabled: false,
-    readonly: false,
-    hint: '',
-    error: '',
-    success: '',
-  },
-)
-
-const attrs = useAttrs()
-const generatedId = useId()
-
-const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
-const isChecked = computed(() => !!props.modelValue)
-const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!props.success && !hasError.value)
-const disabled = computed(() => props.disabled)
-
-const describedBy = computed(() => {
-  if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
-  return `${inputId.value}-describedby`
-})
-
-const mergedGroupClass = computed(() =>
-  twMerge(
-    'checkbox-wrapper-4 mt-4 w-full',
-    props.groupClass,
-  ),
-)
-
-const mergedInputClass = computed(() =>
-  twMerge(
-    'inp-cbx peer',
-    props.inputClass,
-  ),
-)
-
-const mergedLabelClass = computed(() =>
-  twMerge(
-    'cbx text-black',
-    disabled.value ? 'cursor-not-allowed text-black/60' : '',
-    hasError.value ? 'text-m-error' : '',
-    hasSuccess.value ? 'text-m-success' : '',
-    props.labelClass,
-  ),
-)
-
-const mergedMessageClass = computed(() =>
-  twMerge(
-    'text-xs',
-    hasError.value
-      ? 'text-m-error'
-      : hasSuccess.value
-        ? 'text-m-success'
-        : 'text-m-muted',
-  ),
-)
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
-}>()
-
-const onChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-
-  if (props.readonly) {
-    target.checked = isChecked.value
-    return
-  }
-
-  emit('update:modelValue', target.checked)
-}
-</script>
-
-<style scoped>
-.cbx {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.cbx span {
-  display: inline-flex;
-  align-items: center;
-}
-
-.cbx span:first-child {
-  position: relative;
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
-  transform: scale(1);
-  border: 2px solid rgb(0, 0, 0);
-  transition: all 0.1s ease;
-}
-
-.cbx span:first-child svg {
-  position: absolute;
-  top: 2px;
-  left: 1px;
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 16px;
-  stroke-dashoffset: 16px;
-  transition: all 0.125s ease;
-}
-
-.cbx span:last-child {
-  padding-left: 12px;
-  line-height: 18px;
-}
-
-.inp-cbx {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.inp-cbx:checked + .cbx span:first-child svg {
-  stroke-dashoffset: 0;
-}
-
-.inp-cbx + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
-}
-.cbx.text-m-error span:first-child svg {
-  stroke: rgb(var(--m-error) / 1);
-}
-.inp-cbx:checked + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
-}
-
-.inp-cbx + .cbx.text-m-success span:first-child {
-  border-color: rgb(var(--m-success) / 1);
-}
-.cbx.text-m-success span:first-child svg {
-  stroke: rgb(var(--m-success) / 1);
-}
-.inp-cbx:checked + .cbx.text-m-success span:first-child {
-  border-color: rgb(var(--m-success) / 1);
-}
-
-.inp-cbx:disabled + .cbx {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-</style>

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

@@ -1,114 +0,0 @@
-<template>
-  <Story title="Input/Checkbox">
-        <MalioCheckbox
-          v-model="simpleValue"
-          label="Accepter les conditions"
-        />
-  </Story>
-</template>
-
-<docs lang="md">
-# MalioCheckbox
-
-Composant checkbox custom avec `v-model`, message d'aide, et états visuels
-`error` / `success`.
-
-------------------------------------------------------------------------
-
-## Props
-
-### id
-
-- Type: `string`
-- Description: Identifiant HTML du checkbox.
-- Comportement: si absent, un id unique est généré automatiquement.
-
-### label
-
-- Type: `string`
-- Description: Texte affiche a cote de la case.
-
-### name
-
-- Type: `string`
-- Description: Attribut `name` du champ.
-
-### modelValue
-
-- Type: `boolean | null | undefined`
-- Description: État coche du composant.
-
-### inputClass
-
-- Type: `string`
-- Description: Classes supplémentaires appliquées a l'input natif.
-
-### labelClass
-
-- Type: `string`
-- Description: Classes supplémentaires appliquées au label.
-
-### groupClass
-
-- Type: `string`
-- Description: Classes supplémentaires appliquées au conteneur.
-
-### required
-
-- Type: `boolean`
-- Description: Ajoute l'attribut HTML `required`.
-
-### disabled
-
-- Type: `boolean`
-- Description: Désactive le composant.
-
-### readonly
-
-- Type: `boolean`
-- Description: Empêche la mise a jour du `v-model` tout en gardant
-  l'affichage courant.
-
-### hint
-
-- Type: `string`
-- Description: Message d'aide affiche sous le checkbox.
-
-### error
-
-- Type: `string`
-- Description: Message d'erreur.
-- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
-  d'erreur au texte et a la case.
-
-### success
-
-- Type: `string`
-- Description: Message de succès.
-- Effet: applique la couleur de succès au texte et a la case si `error`
-  est absent.
-
-------------------------------------------------------------------------
-
-## Accessibilité
-
-- `aria-invalid` est active si `error` existe.
-- `aria-describedby` pointe vers le message affiche.
-- L'input natif reste present pour conserver le comportement formulaire.
-
-------------------------------------------------------------------------
-
-## Event
-
-### update:modelValue
-
-- Émis a chaque changement de l'état coche.
-- Retourne un booléen `true` ou `false`.
-</docs>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-import MalioCheckbox from '../components/malio/Checkbox.vue'
-
-const simpleValue = ref(false)
-</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>