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

@@ -0,0 +1,101 @@
+<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/inputNumber.vue

@@ -1,80 +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>
-      <MalioInputNumber
-        v-model="simpleValue"
-        label="Quantite"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
-      <MalioInputNumber
-        v-model="initialValue"
-        label="Participants"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Avec bornes</h2>
-      <MalioInputNumber
-        v-model="boundedValue"
-        label="Places"
-        :min="1"
-        :max="5"
-        hint="Minimum 1, maximum 5"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Desactive</h2>
-      <MalioInputNumber
-        v-model="disabledValue"
-        label="Articles"
-        disabled
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
-      <MalioInputNumber
-        v-model="readonlyValue"
-        label="Tickets"
-        readonly
-        hint="Valeur verrouillee"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-      <MalioInputNumber
-        v-model="errorValue"
-        label="Quantite"
-        :min="1"
-        error="La quantite minimale est 1"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succes</h2>
-      <MalioInputNumber
-        v-model="successValue"
-        label="Quantite"
-        success="Quantite validee"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-
-const simpleValue = ref('')
-const initialValue = ref('3')
-const boundedValue = ref('2')
-const disabledValue = ref('4')
-const readonlyValue = ref('7')
-const errorValue = ref('0')
-const successValue = ref('2')
-</script>

.playground/pages/composant/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/Checkbox.test.ts

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

@@ -0,0 +1,227 @@
+<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/InputNumber.test.ts

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

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

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

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

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