From 8afb29a61a2ea742f8fa300d3c3a4d2e24dd1e16 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Wed, 27 May 2026 10:17:58 +0200
Subject: [PATCH] feat : page playground et nav pour MalioTimePicker (MUI-39)

---
 .../pages/composant/time/timePicker.vue       | 45 +++++++++++++++++++
 .playground/playground.nav.ts                 |  1 +
 2 files changed, 46 insertions(+)
 create mode 100644 .playground/pages/composant/time/timePicker.vue

diff --git a/.playground/pages/composant/time/timePicker.vue b/.playground/pages/composant/time/timePicker.vue
new file mode 100644
index 0000000..127342c
--- /dev/null
+++ b/.playground/pages/composant/time/timePicker.vue
@@ -0,0 +1,45 @@
+<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>
+      <MalioTimePicker v-model="simpleValue" label="Heure" />
+      <p class="mt-2 text-sm text-m-muted">Valeur : {{ simpleValue || '—' }}</p>
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Valeur initiale</h2>
+      <MalioTimePicker v-model="initialValue" label="Heure de départ" hint="Format HH:MM" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+      <MalioTimePicker v-model="disabledValue" label="Heure verrouillée" disabled />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+      <MalioTimePicker v-model="errorValue" label="Heure de fermeture" error="Heure invalide" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Succès</h2>
+      <MalioTimePicker v-model="successValue" label="Heure confirmée" success="Horaire enregistré" />
+    </div>
+
+    <div class="rounded-lg border p-4">
+      <h2 class="mb-4 text-xl font-bold">Non effaçable</h2>
+      <MalioTimePicker v-model="noClearValue" label="Heure" :clearable="false" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const simpleValue = ref('')
+const initialValue = ref('08:30')
+const disabledValue = ref('14:15')
+const errorValue = ref('25:90')
+const successValue = ref('09:00')
+const noClearValue = ref('10:00')
+</script>
diff --git a/.playground/playground.nav.ts b/.playground/playground.nav.ts
index d7d6eeb..a3c4a58 100644
--- a/.playground/playground.nav.ts
+++ b/.playground/playground.nav.ts
@@ -34,6 +34,7 @@ export const navSections: SidebarSection[] = [
       {label: 'Semaine', to: '/composant/date/dateWeek'},
       {label: 'Date & heure', to: '/composant/date/datetime'},
       {label: 'Heure', to: '/composant/time/time'},
+      {label: 'Sélecteur d\'heure', to: '/composant/time/timePicker'},
     ],
   },
   {