feat: Ajout de composant

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

## Description de la PR

## Modification du .env

## Check list

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

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

.playground/pages/composant/inputAmount.vue

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

.playground/pages/composant/radioButton.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="grid grid-cols-2 gap-6 md:grid-cols-3">
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Simple</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`simple-${option.value}`"
+          v-model="primaryChoice"
+          :label="option.label"
+          :value="option.value"
+          name="primary-choice"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Preselected</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`preselected-${option.value}`"
+          v-model="preselectedChoice"
+          :label="option.label"
+          :value="option.value"
+          name="preselected-choice"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Error</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`error-${option.value}`"
+          v-model="errorChoice"
+          :label="option.label"
+          :value="option.value"
+          name="error-choice"
+          error="Selection required"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Success</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`success-${option.value}`"
+          v-model="successChoice"
+          :label="option.label"
+          :value="option.value"
+          name="success-choice"
+          success="Selection saved"
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`disabled-${option.value}`"
+          v-model="disabledChoice"
+          :label="option.label"
+          :value="option.value"
+          name="disabled-choice"
+          disabled
+        />
+      </div>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+      <div class="space-y-1">
+        <MalioRadioButton
+          v-for="option in options"
+          :key="`readonly-${option.value}`"
+          v-model="readonlyChoice"
+          :label="option.label"
+          :value="option.value"
+          name="readonly-choice"
+          readonly
+          hint="Readonly group"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioRadioButton from '../../../app/components/malio/RadioButton.vue'
+
+const options = [
+  {label: 'Option 1', value: 'option1'},
+  {label: 'Option 2', value: 'option2'},
+  {label: 'Option 3', value: 'option3'},
+  {label: 'Option 4', value: 'option4'},
+]
+
+const primaryChoice = ref<string | null>(null)
+const preselectedChoice = ref<string | null>('option2')
+const errorChoice = ref<string | null>(null)
+const successChoice = ref<string | null>('option3')
+const disabledChoice = ref<string | null>('option2')
+const readonlyChoice = ref<string | null>('option4')
+</script>

CHANGELOG.md

@@ -7,6 +7,10 @@ Liste des évolutions de la librairie Malio layer UI
 
 ### Added
 * [#333] Création d'un composant text
+* [#364] Création d'un composant button radio
+* [#337] Création d'un composant select
+* [#363] Création d'un composant amount
+* [#363] Création d'un composant checkbox
 
 ### Changed
 

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/RadioButton.test.ts

@@ -0,0 +1,156 @@
+import {describe, expect, it} from 'vitest'
+import {mount} from '@vue/test-utils'
+import type {DefineComponent} from 'vue'
+import RadioButton from './RadioButton.vue'
+
+type RadioButtonProps = {
+  id?: string
+  label?: string
+  name?: string
+  modelValue?: string | number | boolean | null | undefined
+  value?: string | number | boolean | null | undefined
+  inputClass?: string
+  labelClass?: string
+  groupClass?: string
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  hint?: string
+  error?: string
+  success?: string
+}
+
+const RadioButtonForTest = RadioButton as DefineComponent<RadioButtonProps>
+
+const mountRadioButton = (props: RadioButtonProps = {}) =>
+  mount(RadioButtonForTest, {
+    props,
+  })
+
+describe('MalioRadioButton', () => {
+  it('renders the label text', () => {
+    const wrapper = mountRadioButton({label: 'Option 1'})
+
+    expect(wrapper.get('.radio-text').text()).toBe('Option 1')
+  })
+
+  it('applies provided id to input and label', () => {
+    const wrapper = mountRadioButton({id: 'radio-id', label: 'Option 1'})
+
+    expect(wrapper.get('input').attributes('id')).toBe('radio-id')
+    expect(wrapper.get('.radio-text').attributes('for')).toBe('radio-id')
+  })
+
+  it('generates an id when missing and reuses it on label', () => {
+    const wrapper = mountRadioButton({label: 'Option 1'})
+
+    const inputId = wrapper.get('input').attributes('id')
+
+    expect(inputId?.startsWith('malio-radio-')).toBe(true)
+    expect(wrapper.get('.radio-text').attributes('for')).toBe(inputId)
+  })
+
+  it('applies the name attribute', () => {
+    const wrapper = mountRadioButton({name: 'choice-group'})
+
+    expect(wrapper.get('input').attributes('name')).toBe('choice-group')
+  })
+
+  it('sets required when true', () => {
+    const wrapper = mountRadioButton({required: true})
+
+    expect(wrapper.get('input').attributes('required')).toBeDefined()
+  })
+
+  it('sets disabled styles when true', () => {
+    const wrapper = mountRadioButton({disabled: true, label: 'Option 1'})
+
+    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
+    expect(wrapper.get('.radio-control').classes()).toContain('is-disabled')
+    expect(wrapper.get('.radio-text').classes()).toContain('cursor-not-allowed')
+  })
+
+  it('checks the input when modelValue matches value', () => {
+    const wrapper = mountRadioButton({modelValue: 'a', value: 'a'})
+
+    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue on change', async () => {
+    const wrapper = mountRadioButton({modelValue: 'a', value: 'b'})
+
+    await wrapper.get('input').trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['b'])
+  })
+
+  it('prevents updates when readonly', async () => {
+    const wrapper = mountRadioButton({modelValue: 'a', value: 'b', readonly: true})
+    const input = wrapper.get('input')
+
+    ;(input.element as HTMLInputElement).checked = true
+    await input.trigger('change')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect((input.element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('shows hint message and wires aria-describedby', () => {
+    const wrapper = mountRadioButton({hint: 'Helpful hint'})
+    const input = wrapper.get('input')
+    const message = wrapper.get('.radio-message')
+
+    expect(message.text()).toBe('Helpful hint')
+    expect(input.attributes('aria-describedby')).toBe(message.attributes('id'))
+    expect(input.attributes('aria-invalid')).toBe('false')
+  })
+
+  it('shows error state on control, label and helper text', () => {
+    const wrapper = mountRadioButton({
+      label: 'Option 1',
+      error: 'Selection required',
+    })
+
+    expect(wrapper.get('.radio-control').classes()).toContain('is-error')
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
+  })
+
+  it('shows success state when no error is present', () => {
+    const wrapper = mountRadioButton({
+      label: 'Option 1',
+      success: 'Selection saved',
+    })
+
+    expect(wrapper.get('.radio-control').classes()).toContain('is-success')
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-success')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-success')
+  })
+
+  it('prioritizes error over success', () => {
+    const wrapper = mountRadioButton({
+      error: 'Selection required',
+      success: 'Selection saved',
+    })
+
+    expect(wrapper.get('.radio-control').classes()).toContain('is-error')
+    expect(wrapper.get('.radio-control').classes()).not.toContain('is-success')
+    expect(wrapper.get('.radio-message').text()).toBe('Selection required')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+  })
+
+  it('merges custom classes on group, input and label', () => {
+    const wrapper = mountRadioButton({
+      label: 'Option 1',
+      groupClass: 'mt-0 custom-group',
+      inputClass: 'border-red-500',
+      labelClass: 'font-bold',
+    })
+
+    expect(wrapper.get('.radio-item').classes()).toContain('custom-group')
+    expect(wrapper.get('.radio-item').classes()).toContain('mt-0')
+    expect(wrapper.get('input').classes()).toContain('border-red-500')
+    expect(wrapper.get('.radio-text').classes()).toContain('font-bold')
+  })
+})

app/components/malio/RadioButton.vue

@@ -0,0 +1,197 @@
+<template>
+  <div :class="mergedGroupClass">
+    <div :class="mergedControlClass">
+      <label :for="inputId" class="radio-indicator relative flex cursor-pointer items-center p-3">
+        <input
+          :id="inputId"
+          :name="name"
+          :value="value"
+          :checked="isChecked"
+          :required="required"
+          :disabled="disabled"
+          :aria-invalid="!!error"
+          :aria-describedby="describedBy"
+          :class="mergedInputClass"
+          v-bind="attrs"
+          type="radio"
+          @click="onClick"
+          @change="onChange"
+        >
+        <span class="radio-dot pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-black opacity-0">
+          <svg viewBox="0 0 16 16" fill="currentColor" class="h-[10px]">
+            <circle cx="8" cy="8" r="8" />
+          </svg>
+        </span>
+      </label>
+
+      <label
+        v-if="label"
+        :for="inputId"
+        :class="mergedLabelClass"
+      >
+        {{ label }}
+      </label>
+    </div>
+
+    <p
+      v-if="shouldShowMessage"
+      :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: 'MalioRadioButton', inheritAttrs: false})
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    label?: string
+    name?: string
+    modelValue?: string | number | boolean | null | undefined
+    value?: string | number | 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,
+    value: 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-radio-${generatedId}`)
+const isChecked = computed(() => props.modelValue === props.value)
+const hasError = computed(() => !!props.error)
+const hasSuccess = computed(() => !!props.success && !hasError.value)
+const disabled = computed(() => props.disabled)
+const shouldShowMessage = computed(() => !!(props.hint || hasError.value || hasSuccess.value))
+
+const describedBy = computed(() => {
+  if (!shouldShowMessage.value) return undefined
+  return `${inputId.value}-describedby`
+})
+
+const mergedGroupClass = computed(() =>
+  twMerge(
+    'radio-item mt-4 w-full',
+    props.groupClass,
+  ),
+)
+
+const mergedControlClass = computed(() =>
+  twMerge(
+    'radio-control flex items-center',
+    hasError.value ? 'is-error' : '',
+    hasSuccess.value ? 'is-success' : '',
+    disabled.value ? 'is-disabled' : '',
+  ),
+)
+
+const mergedInputClass = computed(() =>
+  twMerge(
+    'h-5 w-5 cursor-pointer appearance-none rounded-full border-2 border-black',
+    props.inputClass,
+  ),
+)
+
+const mergedLabelClass = computed(() =>
+  twMerge(
+    'radio-text mt-px cursor-pointer text-black',
+    hasError.value ? 'text-m-error' : '',
+    hasSuccess.value ? 'text-m-success' : '',
+    disabled.value ? 'cursor-not-allowed text-black/60' : '',
+    props.labelClass,
+  ),
+)
+
+const mergedMessageClass = computed(() =>
+  twMerge(
+    'radio-message ml-3 -mt-1 text-xs',
+    hasError.value
+      ? 'text-m-error'
+      : hasSuccess.value
+        ? 'text-m-success'
+        : 'text-m-muted',
+  ),
+)
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: string | number | boolean | null | undefined): void
+}>()
+
+const onClick = (event: MouseEvent) => {
+  if (!props.readonly) return
+
+  event.preventDefault()
+}
+
+const onChange = (event: Event) => {
+  if (props.readonly) {
+    const target = event.target as HTMLInputElement
+    target.checked = isChecked.value
+    return
+  }
+
+  emit('update:modelValue', props.value)
+}
+</script>
+
+<style scoped>
+.radio-control input[type='radio']:checked + .radio-dot {
+  opacity: 1;
+}
+
+.radio-control.is-error input[type='radio'] {
+  border-color: rgb(var(--m-error) / 1);
+}
+
+.radio-control.is-error .radio-dot {
+  color: rgb(var(--m-error) / 1);
+}
+
+.radio-control.is-success input[type='radio'] {
+  border-color: rgb(var(--m-success) / 1);
+}
+
+.radio-control.is-success .radio-dot {
+  color: rgb(var(--m-success) / 1);
+}
+
+.radio-control.is-disabled .radio-indicator,
+.radio-control.is-disabled .radio-text {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.radio-item:has(+ .radio-item) .radio-message {
+  display: none;
+}
+</style>

app/story/RadioButton.story.vue

@@ -0,0 +1,187 @@
+<template>
+  <Story title="Input/Radio">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`simple-${option.value}`"
+            v-model="primaryChoice"
+            :label="option.label"
+            :value="option.value"
+            name="primary-choice"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Preselected</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`preselected-${option.value}`"
+            v-model="preselectedChoice"
+            :label="option.label"
+            :value="option.value"
+            name="preselected-choice"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Error</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`error-${option.value}`"
+            v-model="errorChoice"
+            :label="option.label"
+            :value="option.value"
+            name="error-choice"
+            error="Selection required"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Success</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`success-${option.value}`"
+            v-model="successChoice"
+            :label="option.label"
+            :value="option.value"
+            name="success-choice"
+            success="Selection saved"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Disabled</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`disabled-${option.value}`"
+            v-model="disabledChoice"
+            :label="option.label"
+            :value="option.value"
+            name="disabled-choice"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`readonly-${option.value}`"
+            v-model="readonlyChoice"
+            :label="option.label"
+            :value="option.value"
+            name="readonly-choice"
+            readonly
+            hint="Readonly group"
+          />
+        </div>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioRadioButton
+
+Composant radio personnalisé compatible avec `v-model`, les groupes via `name`,
+et les états visuels de validation.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: `string | number | boolean | null | undefined`
+-   Description: Valeur actuellement sélectionnée dans le groupe.
+-   Comportement:
+-   Compatible avec `v-model`.
+-   Le radio est coché quand `modelValue === value`.
+
+### value
+
+-   Type: `string | number | boolean | null | undefined`
+-   Description: Valeur portée par le radio courant.
+
+### label
+
+-   Type: `string`
+-   Description: Texte affiché à droite du radio.
+
+### name
+
+-   Type: `string`
+-   Description: Nom HTML partagé par les radios d’un même groupe.
+
+------------------------------------------------------------------------
+
+## États
+
+### error
+
+-   Type: `string`
+-   Description: Message et style d’erreur.
+
+### success
+
+-   Type: `string`
+-   Description: Message et style de succès.
+-   Comportement: ignoré si `error` est présent.
+
+### disabled
+
+-   Type: `boolean`
+-   Description: Désactive le radio.
+
+### readonly
+
+-   Type: `boolean`
+-   Description: Empêche le changement de valeur tout en gardant le rendu affiché.
+
+### hint
+
+-   Type: `string`
+-   Description: Message d’aide sous le groupe.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à la sélection d’un radio.
+-   Retourne la `value` du radio sélectionné.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioRadioButton from '../components/malio/RadioButton.vue'
+
+const options = [
+  {label: 'Option 1', value: 'option1'},
+  {label: 'Option 2', value: 'option2'},
+  {label: 'Option 3', value: 'option3'},
+  {label: 'Option 4', value: 'option4'},
+]
+
+const primaryChoice = ref<string | null>(null)
+const preselectedChoice = ref<string | null>('option2')
+const errorChoice = ref<string | null>(null)
+const successChoice = ref<string | null>('option3')
+const disabledChoice = ref<string | null>('option2')
+const readonlyChoice = ref<string | null>('option4')
+</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>