From 09cc3edf6faee6c337886ec2bcfbbb4fc4fc6487 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Fri, 20 Mar 2026 14:22:40 +0100
Subject: [PATCH] feat : reorganisation de la structure projet

---
 .claude/settings.local.json                   |  12 +-
 .../composant/{ => button}/buttonIcon.vue     |   0
 .../composant/{ => checkbox}/checkbox.vue     |   2 +-
 .../composant/{ => input}/inputAmount.vue     |   0
 .../composant/{ => input}/inputNumber.vue     |   0
 .../composant/{ => input}/inputPassword.vue   |   0
 .../pages/composant/{ => input}/inputText.vue |   0
 .../composant/{ => input}/inputTextArea.vue   |   2 +-
 .../composant/{ => input}/inputUpload.vue     |   0
 .../composant/{ => radio}/radioButton.vue     |   2 +-
 .../pages/composant/{ => select}/select.vue   |   0
 .../composant/{ => select}/selectCheckbox.vue |   0
 .../pages/composant/{ => time}/time.vue       |   2 +-
 .playground/pages/index.vue                   | 105 +++++++++++++-----
 .../malio/{ => button}/ButtonIcon.test.ts     |   0
 .../malio/{ => button}/ButtonIcon.vue         |   0
 .../malio/{ => checkbox}/Checkbox.test.ts     |   0
 .../malio/{ => checkbox}/Checkbox.vue         |   0
 .../malio/{ => input}/Input.test.ts           |   0
 .../malio/{ => input}/InputAmount.test.ts     |   0
 .../malio/{ => input}/InputAmount.vue         |   0
 .../malio/{ => input}/InputNumber.test.ts     |   0
 .../malio/{ => input}/InputNumber.vue         |   0
 .../malio/{ => input}/InputPassword.test.ts   |   0
 .../malio/{ => input}/InputPassword.vue       |   0
 .../malio/{ => input}/InputText.vue           |   0
 .../malio/{ => input}/InputTextArea.test.ts   |   0
 .../malio/{ => input}/InputTextArea.vue       |   0
 .../malio/{ => input}/InputUpload.test.ts     |   0
 .../malio/{ => input}/InputUpload.vue         |   0
 .../malio/{ => radio}/RadioButton.test.ts     |   0
 .../malio/{ => radio}/RadioButton.vue         |   0
 .../malio/{ => select}/Select.test.ts         |   0
 app/components/malio/{ => select}/Select.vue  |   0
 .../malio/{ => select}/SelectCheckbox.test.ts |   0
 .../malio/{ => select}/SelectCheckbox.vue     |   2 +-
 app/components/malio/{ => time}/Time.test.ts  |   0
 app/components/malio/{ => time}/Time.vue      |   0
 app/story/{ => button}/buttonIcon.story.vue   |   2 +-
 .../{ => checkbox}/inputCheckbox.story.vue    |   2 +-
 app/story/{ => input}/inputAmount.story.vue   |   2 +-
 app/story/{ => input}/inputNumber.story.vue   |   2 +-
 app/story/{ => input}/inputPassword.story.vue |   2 +-
 app/story/{ => input}/inputText.story.vue     |   2 +-
 app/story/{ => input}/inputTextArea.story.vue |   2 +-
 app/story/{ => input}/inputUpload.story.vue   |   2 +-
 app/story/{ => radio}/RadioButton.story.vue   |   2 +-
 app/story/{ => select}/InputSelect.story.vue  |   4 +-
 .../{ => select}/selectCheckbox.story.vue     |   2 +-
 app/story/{ => time}/inputTime.story.vue      |   2 +-
 nuxt.config.ts                                |   8 ++
 51 files changed, 116 insertions(+), 45 deletions(-)
 rename .playground/pages/composant/{ => button}/buttonIcon.vue (100%)
 rename .playground/pages/composant/{ => checkbox}/checkbox.vue (96%)
 rename .playground/pages/composant/{ => input}/inputAmount.vue (100%)
 rename .playground/pages/composant/{ => input}/inputNumber.vue (100%)
 rename .playground/pages/composant/{ => input}/inputPassword.vue (100%)
 rename .playground/pages/composant/{ => input}/inputText.vue (100%)
 rename .playground/pages/composant/{ => input}/inputTextArea.vue (96%)
 rename .playground/pages/composant/{ => input}/inputUpload.vue (100%)
 rename .playground/pages/composant/{ => radio}/radioButton.vue (97%)
 rename .playground/pages/composant/{ => select}/select.vue (100%)
 rename .playground/pages/composant/{ => select}/selectCheckbox.vue (100%)
 rename .playground/pages/composant/{ => time}/time.vue (96%)
 rename app/components/malio/{ => button}/ButtonIcon.test.ts (100%)
 rename app/components/malio/{ => button}/ButtonIcon.vue (100%)
 rename app/components/malio/{ => checkbox}/Checkbox.test.ts (100%)
 rename app/components/malio/{ => checkbox}/Checkbox.vue (100%)
 rename app/components/malio/{ => input}/Input.test.ts (100%)
 rename app/components/malio/{ => input}/InputAmount.test.ts (100%)
 rename app/components/malio/{ => input}/InputAmount.vue (100%)
 rename app/components/malio/{ => input}/InputNumber.test.ts (100%)
 rename app/components/malio/{ => input}/InputNumber.vue (100%)
 rename app/components/malio/{ => input}/InputPassword.test.ts (100%)
 rename app/components/malio/{ => input}/InputPassword.vue (100%)
 rename app/components/malio/{ => input}/InputText.vue (100%)
 rename app/components/malio/{ => input}/InputTextArea.test.ts (100%)
 rename app/components/malio/{ => input}/InputTextArea.vue (100%)
 rename app/components/malio/{ => input}/InputUpload.test.ts (100%)
 rename app/components/malio/{ => input}/InputUpload.vue (100%)
 rename app/components/malio/{ => radio}/RadioButton.test.ts (100%)
 rename app/components/malio/{ => radio}/RadioButton.vue (100%)
 rename app/components/malio/{ => select}/Select.test.ts (100%)
 rename app/components/malio/{ => select}/Select.vue (100%)
 rename app/components/malio/{ => select}/SelectCheckbox.test.ts (100%)
 rename app/components/malio/{ => select}/SelectCheckbox.vue (99%)
 rename app/components/malio/{ => time}/Time.test.ts (100%)
 rename app/components/malio/{ => time}/Time.vue (100%)
 rename app/story/{ => button}/buttonIcon.story.vue (98%)
 rename app/story/{ => checkbox}/inputCheckbox.story.vue (98%)
 rename app/story/{ => input}/inputAmount.story.vue (98%)
 rename app/story/{ => input}/inputNumber.story.vue (96%)
 rename app/story/{ => input}/inputPassword.story.vue (98%)
 rename app/story/{ => input}/inputText.story.vue (98%)
 rename app/story/{ => input}/inputTextArea.story.vue (98%)
 rename app/story/{ => input}/inputUpload.story.vue (98%)
 rename app/story/{ => radio}/RadioButton.story.vue (98%)
 rename app/story/{ => select}/InputSelect.story.vue (98%)
 rename app/story/{ => select}/selectCheckbox.story.vue (98%)
 rename app/story/{ => time}/inputTime.story.vue (97%)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index ef7d2e6..8aaa994 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,17 @@
   "permissions": {
     "allow": [
       "Bash(npm run:*)",
-      "Bash(npx vitest:*)"
+      "Bash(npx vitest:*)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/Checkbox.vue''|from ''../../../app/components/malio/checkbox/Checkbox.vue''|\" .playground/pages/composant/checkbox.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/RadioButton.vue''|from ''../../../app/components/malio/radio/RadioButton.vue''|\" .playground/pages/composant/radioButton.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/Time.vue''|from ''../../../app/components/malio/time/Time.vue''|\" .playground/pages/composant/time.vue)",
+      "Bash(sed -i \"s|from ''../../../app/components/malio/InputTextArea.vue''|from ''../../../app/components/malio/input/InputTextArea.vue''|\" .playground/pages/composant/inputTextArea.vue)",
+      "Bash(npx nuxi:*)",
+      "Bash(mkdir -p button input select checkbox radio time)",
+      "Bash(mv buttonIcon.story.vue button/)",
+      "Bash(mv inputText.story.vue inputAmount.story.vue inputNumber.story.vue inputPassword.story.vue inputTextArea.story.vue inputUpload.story.vue input/)",
+      "Bash(mv InputSelect.story.vue selectCheckbox.story.vue select/)",
+      "Bash(mv inputCheckbox.story.vue checkbox/)"
     ]
   }
 }
diff --git a/.playground/pages/composant/buttonIcon.vue b/.playground/pages/composant/button/buttonIcon.vue
similarity index 100%
rename from .playground/pages/composant/buttonIcon.vue
rename to .playground/pages/composant/button/buttonIcon.vue
diff --git a/.playground/pages/composant/checkbox.vue b/.playground/pages/composant/checkbox/checkbox.vue
similarity index 96%
rename from .playground/pages/composant/checkbox.vue
rename to .playground/pages/composant/checkbox/checkbox.vue
index 211328c..1c9f39f 100644
--- a/.playground/pages/composant/checkbox.vue
+++ b/.playground/pages/composant/checkbox/checkbox.vue
@@ -87,7 +87,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
+import MalioCheckbox from '../../../../app/components/malio/checkbox/Checkbox.vue'
 const simpleValue = ref(false)
 const checkedValue = ref(true)
 const hintValue = ref(false)
diff --git a/.playground/pages/composant/inputAmount.vue b/.playground/pages/composant/input/inputAmount.vue
similarity index 100%
rename from .playground/pages/composant/inputAmount.vue
rename to .playground/pages/composant/input/inputAmount.vue
diff --git a/.playground/pages/composant/inputNumber.vue b/.playground/pages/composant/input/inputNumber.vue
similarity index 100%
rename from .playground/pages/composant/inputNumber.vue
rename to .playground/pages/composant/input/inputNumber.vue
diff --git a/.playground/pages/composant/inputPassword.vue b/.playground/pages/composant/input/inputPassword.vue
similarity index 100%
rename from .playground/pages/composant/inputPassword.vue
rename to .playground/pages/composant/input/inputPassword.vue
diff --git a/.playground/pages/composant/inputText.vue b/.playground/pages/composant/input/inputText.vue
similarity index 100%
rename from .playground/pages/composant/inputText.vue
rename to .playground/pages/composant/input/inputText.vue
diff --git a/.playground/pages/composant/inputTextArea.vue b/.playground/pages/composant/input/inputTextArea.vue
similarity index 96%
rename from .playground/pages/composant/inputTextArea.vue
rename to .playground/pages/composant/input/inputTextArea.vue
index e093158..677937a 100644
--- a/.playground/pages/composant/inputTextArea.vue
+++ b/.playground/pages/composant/input/inputTextArea.vue
@@ -92,7 +92,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputTextArea from '../../../app/components/malio/InputTextArea.vue'
+import MalioInputTextArea from '../../../../app/components/malio/input/InputTextArea.vue'
 
 const hintValue = ref('')
 const iconValue = ref('')
diff --git a/.playground/pages/composant/inputUpload.vue b/.playground/pages/composant/input/inputUpload.vue
similarity index 100%
rename from .playground/pages/composant/inputUpload.vue
rename to .playground/pages/composant/input/inputUpload.vue
diff --git a/.playground/pages/composant/radioButton.vue b/.playground/pages/composant/radio/radioButton.vue
similarity index 97%
rename from .playground/pages/composant/radioButton.vue
rename to .playground/pages/composant/radio/radioButton.vue
index 7e32afe..f231e82 100644
--- a/.playground/pages/composant/radioButton.vue
+++ b/.playground/pages/composant/radio/radioButton.vue
@@ -93,7 +93,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../../../app/components/malio/RadioButton.vue'
+import MalioRadioButton from '../../../../app/components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},
diff --git a/.playground/pages/composant/select.vue b/.playground/pages/composant/select/select.vue
similarity index 100%
rename from .playground/pages/composant/select.vue
rename to .playground/pages/composant/select/select.vue
diff --git a/.playground/pages/composant/selectCheckbox.vue b/.playground/pages/composant/select/selectCheckbox.vue
similarity index 100%
rename from .playground/pages/composant/selectCheckbox.vue
rename to .playground/pages/composant/select/selectCheckbox.vue
diff --git a/.playground/pages/composant/time.vue b/.playground/pages/composant/time/time.vue
similarity index 96%
rename from .playground/pages/composant/time.vue
rename to .playground/pages/composant/time/time.vue
index c16995e..cbc9b0b 100644
--- a/.playground/pages/composant/time.vue
+++ b/.playground/pages/composant/time/time.vue
@@ -74,7 +74,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioTime from '../../../app/components/malio/Time.vue'
+import MalioTime from '../../../../app/components/malio/time/Time.vue'
 
 const simpleValue = ref('')
 const labeledValue = ref('')
diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue
index 17e7186..b9a2518 100644
--- a/.playground/pages/index.vue
+++ b/.playground/pages/index.vue
@@ -9,17 +9,41 @@
         Liste des composants
       </button>
 
-      <nav class="mt-6 flex flex-col gap-2">
-        <button
-          v-for="item in items"
-          :key="item.name"
-          type="button"
-          class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
-          :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
-          @click="selectOrToggle(item.name)"
+      <nav class="mt-6 flex flex-col gap-1">
+        <div
+          v-for="group in groups"
+          :key="group.category"
         >
-          {{ item.label }}
-        </button>
+          <button
+            type="button"
+            class="flex w-full items-center justify-between rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary/10"
+            @click="toggleCategory(group.category)"
+          >
+            {{ group.category }}
+            <span
+              class="text-xs transition-transform duration-200"
+              :class="openCategories.has(group.category) ? 'rotate-90' : ''"
+            >
+              &#9654;
+            </span>
+          </button>
+
+          <div
+            v-if="openCategories.has(group.category)"
+            class="ml-3 flex flex-col gap-1 border-l border-gray-300 pl-2"
+          >
+            <button
+              v-for="item in group.items"
+              :key="item.name"
+              type="button"
+              class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
+              :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
+              @click="selectItem(item.name)"
+            >
+              {{ item.label }}
+            </button>
+          </div>
+        </div>
       </nav>
     </aside>
 
@@ -48,7 +72,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, shallowRef } from 'vue'
+import {computed, reactive, ref, watch, shallowRef} from 'vue'
 
 type LoadedModule = {
   default: unknown
@@ -59,8 +83,13 @@ type Item = {
   label: string
 }
 
-const componentModules = import.meta.glob('../../app/components/malio/*.vue')
-const demoModules = import.meta.glob('./composant/*.vue')
+type Group = {
+  category: string
+  items: Item[]
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/**/*.vue')
+const demoModules = import.meta.glob('./composant/**/*.vue')
 
 const demoByName: Record<string, () => Promise<LoadedModule>> =
   Object.fromEntries(
@@ -70,31 +99,55 @@ const demoByName: Record<string, () => Promise<LoadedModule>> =
     }),
   )
 
-const items = computed<Item[]>(() =>
-  Object.keys(componentModules).map((file) => {
-    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
-    return {
-      name,
-      label: name,
-    }
-  }),
-)
+const groups = computed<Group[]>(() => {
+  const categoryMap = new Map<string, Item[]>()
 
+  Object.keys(componentModules).forEach((file) => {
+    const parts = file.split('/')
+    const name = parts.pop()?.replace('.vue', '') ?? ''
+    const category = parts.pop() ?? ''
+
+    if (!categoryMap.has(category)) {
+      categoryMap.set(category, [])
+    }
+    categoryMap.get(category)!.push({name, label: name})
+  })
+
+  return Array.from(categoryMap.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([category, items]) => ({
+      category: category.charAt(0).toUpperCase() + category.slice(1),
+      items: items.sort((a, b) => a.label.localeCompare(b.label)),
+    }))
+})
+
+const openCategories = reactive(new Set<string>())
 const selectedName = ref('')
 const hasInitializedSelection = ref(false)
 
 watch(
-  items,
+  groups,
   (val) => {
     if (!hasInitializedSelection.value && val.length > 0) {
-      selectedName.value = val[0].name
+      openCategories.add(val[0].category)
+      if (val[0].items.length > 0) {
+        selectedName.value = val[0].items[0].name
+      }
       hasInitializedSelection.value = true
     }
   },
-  { immediate: true },
+  {immediate: true},
 )
 
-function selectOrToggle(name: string) {
+function toggleCategory(category: string) {
+  if (openCategories.has(category)) {
+    openCategories.delete(category)
+  } else {
+    openCategories.add(category)
+  }
+}
+
+function selectItem(name: string) {
   selectedName.value = selectedName.value === name ? '' : name
 }
 
diff --git a/app/components/malio/ButtonIcon.test.ts b/app/components/malio/button/ButtonIcon.test.ts
similarity index 100%
rename from app/components/malio/ButtonIcon.test.ts
rename to app/components/malio/button/ButtonIcon.test.ts
diff --git a/app/components/malio/ButtonIcon.vue b/app/components/malio/button/ButtonIcon.vue
similarity index 100%
rename from app/components/malio/ButtonIcon.vue
rename to app/components/malio/button/ButtonIcon.vue
diff --git a/app/components/malio/Checkbox.test.ts b/app/components/malio/checkbox/Checkbox.test.ts
similarity index 100%
rename from app/components/malio/Checkbox.test.ts
rename to app/components/malio/checkbox/Checkbox.test.ts
diff --git a/app/components/malio/Checkbox.vue b/app/components/malio/checkbox/Checkbox.vue
similarity index 100%
rename from app/components/malio/Checkbox.vue
rename to app/components/malio/checkbox/Checkbox.vue
diff --git a/app/components/malio/Input.test.ts b/app/components/malio/input/Input.test.ts
similarity index 100%
rename from app/components/malio/Input.test.ts
rename to app/components/malio/input/Input.test.ts
diff --git a/app/components/malio/InputAmount.test.ts b/app/components/malio/input/InputAmount.test.ts
similarity index 100%
rename from app/components/malio/InputAmount.test.ts
rename to app/components/malio/input/InputAmount.test.ts
diff --git a/app/components/malio/InputAmount.vue b/app/components/malio/input/InputAmount.vue
similarity index 100%
rename from app/components/malio/InputAmount.vue
rename to app/components/malio/input/InputAmount.vue
diff --git a/app/components/malio/InputNumber.test.ts b/app/components/malio/input/InputNumber.test.ts
similarity index 100%
rename from app/components/malio/InputNumber.test.ts
rename to app/components/malio/input/InputNumber.test.ts
diff --git a/app/components/malio/InputNumber.vue b/app/components/malio/input/InputNumber.vue
similarity index 100%
rename from app/components/malio/InputNumber.vue
rename to app/components/malio/input/InputNumber.vue
diff --git a/app/components/malio/InputPassword.test.ts b/app/components/malio/input/InputPassword.test.ts
similarity index 100%
rename from app/components/malio/InputPassword.test.ts
rename to app/components/malio/input/InputPassword.test.ts
diff --git a/app/components/malio/InputPassword.vue b/app/components/malio/input/InputPassword.vue
similarity index 100%
rename from app/components/malio/InputPassword.vue
rename to app/components/malio/input/InputPassword.vue
diff --git a/app/components/malio/InputText.vue b/app/components/malio/input/InputText.vue
similarity index 100%
rename from app/components/malio/InputText.vue
rename to app/components/malio/input/InputText.vue
diff --git a/app/components/malio/InputTextArea.test.ts b/app/components/malio/input/InputTextArea.test.ts
similarity index 100%
rename from app/components/malio/InputTextArea.test.ts
rename to app/components/malio/input/InputTextArea.test.ts
diff --git a/app/components/malio/InputTextArea.vue b/app/components/malio/input/InputTextArea.vue
similarity index 100%
rename from app/components/malio/InputTextArea.vue
rename to app/components/malio/input/InputTextArea.vue
diff --git a/app/components/malio/InputUpload.test.ts b/app/components/malio/input/InputUpload.test.ts
similarity index 100%
rename from app/components/malio/InputUpload.test.ts
rename to app/components/malio/input/InputUpload.test.ts
diff --git a/app/components/malio/InputUpload.vue b/app/components/malio/input/InputUpload.vue
similarity index 100%
rename from app/components/malio/InputUpload.vue
rename to app/components/malio/input/InputUpload.vue
diff --git a/app/components/malio/RadioButton.test.ts b/app/components/malio/radio/RadioButton.test.ts
similarity index 100%
rename from app/components/malio/RadioButton.test.ts
rename to app/components/malio/radio/RadioButton.test.ts
diff --git a/app/components/malio/RadioButton.vue b/app/components/malio/radio/RadioButton.vue
similarity index 100%
rename from app/components/malio/RadioButton.vue
rename to app/components/malio/radio/RadioButton.vue
diff --git a/app/components/malio/Select.test.ts b/app/components/malio/select/Select.test.ts
similarity index 100%
rename from app/components/malio/Select.test.ts
rename to app/components/malio/select/Select.test.ts
diff --git a/app/components/malio/Select.vue b/app/components/malio/select/Select.vue
similarity index 100%
rename from app/components/malio/Select.vue
rename to app/components/malio/select/Select.vue
diff --git a/app/components/malio/SelectCheckbox.test.ts b/app/components/malio/select/SelectCheckbox.test.ts
similarity index 100%
rename from app/components/malio/SelectCheckbox.test.ts
rename to app/components/malio/select/SelectCheckbox.test.ts
diff --git a/app/components/malio/SelectCheckbox.vue b/app/components/malio/select/SelectCheckbox.vue
similarity index 99%
rename from app/components/malio/SelectCheckbox.vue
rename to app/components/malio/select/SelectCheckbox.vue
index bb3547d..4364e21 100644
--- a/app/components/malio/SelectCheckbox.vue
+++ b/app/components/malio/select/SelectCheckbox.vue
@@ -204,7 +204,7 @@
 <script setup lang="ts">
 import {computed, onBeforeUnmount, onMounted, ref, useId, nextTick} from 'vue'
 import {Icon as IconifyIcon} from '@iconify/vue'
-import Checkbox from './Checkbox.vue'
+import Checkbox from '../checkbox/Checkbox.vue'
 
 defineOptions({name: 'MalioSelectCheckbox', inheritAttrs: false})
 
diff --git a/app/components/malio/Time.test.ts b/app/components/malio/time/Time.test.ts
similarity index 100%
rename from app/components/malio/Time.test.ts
rename to app/components/malio/time/Time.test.ts
diff --git a/app/components/malio/Time.vue b/app/components/malio/time/Time.vue
similarity index 100%
rename from app/components/malio/Time.vue
rename to app/components/malio/time/Time.vue
diff --git a/app/story/buttonIcon.story.vue b/app/story/button/buttonIcon.story.vue
similarity index 98%
rename from app/story/buttonIcon.story.vue
rename to app/story/button/buttonIcon.story.vue
index 7e948a7..c840199 100644
--- a/app/story/buttonIcon.story.vue
+++ b/app/story/button/buttonIcon.story.vue
@@ -238,5 +238,5 @@ rapides et compactes (retour, modifier, supprimer, etc.).
 </docs>
 
 <script setup lang="ts">
-import MalioButtonIcon from '../components/malio/ButtonIcon.vue'
+import MalioButtonIcon from '../../components/malio/button/ButtonIcon.vue'
 </script>
diff --git a/app/story/inputCheckbox.story.vue b/app/story/checkbox/inputCheckbox.story.vue
similarity index 98%
rename from app/story/inputCheckbox.story.vue
rename to app/story/checkbox/inputCheckbox.story.vue
index 5b8724d..1e54560 100644
--- a/app/story/inputCheckbox.story.vue
+++ b/app/story/checkbox/inputCheckbox.story.vue
@@ -166,7 +166,7 @@ Composant checkbox custom avec `v-model`, message d'aide, et états visuels
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioCheckbox from '../components/malio/Checkbox.vue'
+import MalioCheckbox from '../../components/malio/checkbox/Checkbox.vue'
 
 const simpleValue = ref(false)
 const checkedValue = ref(true)
diff --git a/app/story/inputAmount.story.vue b/app/story/input/inputAmount.story.vue
similarity index 98%
rename from app/story/inputAmount.story.vue
rename to app/story/input/inputAmount.story.vue
index a3e1b7d..97defe3 100644
--- a/app/story/inputAmount.story.vue
+++ b/app/story/input/inputAmount.story.vue
@@ -248,7 +248,7 @@ Composant input dédié à la saisie d’un montant décimal avec label flottant
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputAmount from '../components/malio/InputAmount.vue'
+import MalioInputAmount from '../../components/malio/input/InputAmount.vue'
 
 const simpleValue = ref('')
 const hintValue = ref('')
diff --git a/app/story/inputNumber.story.vue b/app/story/input/inputNumber.story.vue
similarity index 96%
rename from app/story/inputNumber.story.vue
rename to app/story/input/inputNumber.story.vue
index 8b5dbaf..4a0cb3e 100644
--- a/app/story/inputNumber.story.vue
+++ b/app/story/input/inputNumber.story.vue
@@ -71,7 +71,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputNumber from '../components/malio/InputNumber.vue'
+import MalioInputNumber from '../../components/malio/input/InputNumber.vue'
 
 const simpleValue = ref('')
 const initialValue = ref('3')
diff --git a/app/story/inputPassword.story.vue b/app/story/input/inputPassword.story.vue
similarity index 98%
rename from app/story/inputPassword.story.vue
rename to app/story/input/inputPassword.story.vue
index 7e53a6f..0bde0d1 100644
--- a/app/story/inputPassword.story.vue
+++ b/app/story/input/inputPassword.story.vue
@@ -240,7 +240,7 @@ automatiquement.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputPassword from '../components/malio/InputPassword.vue'
+import MalioInputPassword from '../../components/malio/input/InputPassword.vue'
 
 const simpleValue = ref('')
 const noIconValue = ref('')
diff --git a/app/story/inputText.story.vue b/app/story/input/inputText.story.vue
similarity index 98%
rename from app/story/inputText.story.vue
rename to app/story/input/inputText.story.vue
index 1024ce1..63492e8 100644
--- a/app/story/inputText.story.vue
+++ b/app/story/input/inputText.story.vue
@@ -266,7 +266,7 @@ largeur.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputText from '../components/malio/InputText.vue'
+import MalioInputText from '../../components/malio/input/InputText.vue'
 
 const simpleValue = ref('')
 const hintValue = ref('')
diff --git a/app/story/inputTextArea.story.vue b/app/story/input/inputTextArea.story.vue
similarity index 98%
rename from app/story/inputTextArea.story.vue
rename to app/story/input/inputTextArea.story.vue
index 052db5b..bd37584 100644
--- a/app/story/inputTextArea.story.vue
+++ b/app/story/input/inputTextArea.story.vue
@@ -250,7 +250,7 @@ redimensionnement.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputTextArea from '../components/malio/InputTextArea.vue'
+import MalioInputTextArea from '../../components/malio/input/InputTextArea.vue'
 
 const simpleValue = ref('')
 const hintValue = ref('')
diff --git a/app/story/inputUpload.story.vue b/app/story/input/inputUpload.story.vue
similarity index 98%
rename from app/story/inputUpload.story.vue
rename to app/story/input/inputUpload.story.vue
index f2190f4..bc674fd 100644
--- a/app/story/inputUpload.story.vue
+++ b/app/story/input/inputUpload.story.vue
@@ -223,7 +223,7 @@ et accessibilité.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioInputUpload from '../components/malio/InputUpload.vue'
+import MalioInputUpload from '../../components/malio/input/InputUpload.vue'
 
 const simpleValue = ref('')
 const noIconValue = ref('')
diff --git a/app/story/RadioButton.story.vue b/app/story/radio/RadioButton.story.vue
similarity index 98%
rename from app/story/RadioButton.story.vue
rename to app/story/radio/RadioButton.story.vue
index a577296..a501dfd 100644
--- a/app/story/RadioButton.story.vue
+++ b/app/story/radio/RadioButton.story.vue
@@ -169,7 +169,7 @@ et les états visuels de validation.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioRadioButton from '../components/malio/RadioButton.vue'
+import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'
 
 const options = [
   {label: 'Option 1', value: 'option1'},
diff --git a/app/story/InputSelect.story.vue b/app/story/select/InputSelect.story.vue
similarity index 98%
rename from app/story/InputSelect.story.vue
rename to app/story/select/InputSelect.story.vue
index 44ef6f9..1bc516e 100644
--- a/app/story/InputSelect.story.vue
+++ b/app/story/select/InputSelect.story.vue
@@ -1,5 +1,5 @@
 <template>
-  <Story title="Select">
+  <Story title="Select/Select">
     <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>
@@ -178,7 +178,7 @@ largeur.
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioSelect from '../components/malio/Select.vue'
+import MalioSelect from '../../components/malio/select/Select.vue'
 
 const simpleValue = ref<string | number | null>(null)
 const preselectedValue = ref<string | number | null>('fr')
diff --git a/app/story/selectCheckbox.story.vue b/app/story/select/selectCheckbox.story.vue
similarity index 98%
rename from app/story/selectCheckbox.story.vue
rename to app/story/select/selectCheckbox.story.vue
index 742580c..87f7562 100644
--- a/app/story/selectCheckbox.story.vue
+++ b/app/story/select/selectCheckbox.story.vue
@@ -192,7 +192,7 @@ Composant select avec checkboxes multiples, label flottant, tags optionnels,
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioSelectCheckbox from '../components/malio/SelectCheckbox.vue'
+import MalioSelectCheckbox from '../../components/malio/select/SelectCheckbox.vue'
 
 const options = [
   {label: 'France', value: 'fr'},
diff --git a/app/story/inputTime.story.vue b/app/story/time/inputTime.story.vue
similarity index 97%
rename from app/story/inputTime.story.vue
rename to app/story/time/inputTime.story.vue
index 784968d..2bd4031 100644
--- a/app/story/inputTime.story.vue
+++ b/app/story/time/inputTime.story.vue
@@ -76,7 +76,7 @@
 
 <script setup lang="ts">
 import {ref} from 'vue'
-import MalioTime from '../components/malio/Time.vue'
+import MalioTime from '../../components/malio/time/Time.vue'
 
 const simpleValue = ref('')
 const labeledValue = ref('')
diff --git a/nuxt.config.ts b/nuxt.config.ts
index a9302c3..999ee48 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -7,6 +7,14 @@ export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss','@nuxt/icon'],
   css: [join(dir, 'app/assets/css/malio.css')],
 
+  components: [
+    {
+      path: join(dir, 'app/components/malio'),
+      prefix: 'Malio',
+      pathPrefix: false,
+    },
+  ],
+
   tailwindcss: {
     config: {
       theme: {