feat : ajouts du composant checkbox

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|       #337           |           Création d'un composant Select      |

## Description de la PR

## Modification du .env

## Check list

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

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

.playground/pages/composant/inputAmount.vue

@@ -1,60 +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>
-      <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

@@ -1,111 +0,0 @@
-<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,10 +7,6 @@ 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

@@ -1,163 +0,0 @@
-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

@@ -1,255 +0,0 @@
-<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

@@ -1,156 +0,0 @@
-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

@@ -1,197 +0,0 @@
-<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

@@ -1,187 +0,0 @@
-<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

@@ -1,200 +0,0 @@
-<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>