@cgi-learning-hub/ui 1.6.0-dev.1749214505 → 1.6.0-dev.1749572967

package/dist/components/stories/ButtonGroup.stories.es.js

@@ -1,28 +1,28 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { c as B } from "../../createSvgIcon-BWru5SCV.js";
-import { useState as u, useCallback as f } from "react";
-import m from "../ButtonGroup/ButtonGroup.es.js";
-import { B as d } from "../../Box-DjbKEblU.js";
-import { T as n } from "../../Typography-CYUXO-Vm.js";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { c as S } from "../../createSvgIcon-BWru5SCV.js";
+import { useState as u, useCallback as w } from "react";
+import p from "../ButtonGroup/ButtonGroup.es.js";
+import { B as m } from "../../Box-DjbKEblU.js";
+import { T as t } from "../../Typography-CYUXO-Vm.js";
 import { G as l } from "../../Grid-CpuW2Xrl.js";
 import { B as y } from "../../Button-WTdCmXYm.js";
 import { P as s } from "../../Paper-yeP8q4RO.js";
-const I = B(/* @__PURE__ */ e("path", {
+const M = S(/* @__PURE__ */ e("path", {
   d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2M8 11H4V6h4zm6 0h-4V6h4zm6 0h-4V6h4zM8 18H4v-5h4zm6 0h-4v-5h4zm6 0h-4v-5h4z"
-}), "CalendarViewMonth"), T = B(/* @__PURE__ */ e("path", {
+}), "CalendarViewMonth"), z = S(/* @__PURE__ */ e("path", {
   fillRule: "evenodd",
   d: "M3 3v8h8V3zm6 6H5V5h4zm-6 4v8h8v-8zm6 6H5v-4h4zm4-16v8h8V3zm6 6h-4V5h4zm-6 4v8h8v-8zm6 6h-4v-4h4z"
-}), "GridView"), V = B(/* @__PURE__ */ e("path", {
+}), "GridView"), x = S(/* @__PURE__ */ e("path", {
   d: "M3 13h2v-2H3zm0 4h2v-2H3zm0-8h2V7H3zm4 4h14v-2H7zm0 4h14v-2H7zM7 7v2h14V7z"
-}), "List"), w = B(/* @__PURE__ */ e("path", {
+}), "List"), V = S(/* @__PURE__ */ e("path", {
   d: "M21 8H3V4h18zm0 2H3v4h18zm0 6H3v4h18z"
-}), "TableRows"), S = B(/* @__PURE__ */ e("path", {
+}), "TableRows"), T = S(/* @__PURE__ */ e("path", {
   d: "M2 4v7h20V4zm8 16h12v-7H10zm-8 0h6v-7H2z"
-}), "ViewComfy"), z = B(/* @__PURE__ */ e("path", {
+}), "ViewComfy"), B = S(/* @__PURE__ */ e("path", {
   d: "M14.67 5v6.5H9.33V5zm1 6.5H21V5h-5.33zm-1 7.5v-6.5H9.33V19zm1-6.5V19H21v-6.5zm-7.34 0H3V19h5.33zm0-1V5H3v6.5z"
 }), "ViewModule"), F = {
   title: "Components/ButtonGroup",
-  component: m,
+  component: p,
   argTypes: {
     buttonList: {
       description: "**[Requis]** Liste des boutons à afficher dans le ButtonGroup.",
@@ -204,38 +204,38 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, x = [
-  { value: "cards", icon: /* @__PURE__ */ e(z, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(w, {}) },
-  { value: "list", icon: /* @__PURE__ */ e(V, {}) }
-], M = [
-  { value: "grid", icon: /* @__PURE__ */ e(T, {}) },
-  { value: "cards", icon: /* @__PURE__ */ e(S, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(w, {}) },
-  { value: "list", icon: /* @__PURE__ */ e(V, {}) },
-  { value: "calendar", icon: /* @__PURE__ */ e(I, {}) }
-], q = [
-  { value: "cards", icon: /* @__PURE__ */ e(z, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(w, {}), disabled: !0 },
-  { value: "list", icon: /* @__PURE__ */ e(V, {}) }
-], j = {
+}, f = [
+  { value: "cards", icon: /* @__PURE__ */ e(B, {}) },
+  { value: "table", icon: /* @__PURE__ */ e(V, {}) },
+  { value: "list", icon: /* @__PURE__ */ e(x, {}) }
+], I = [
+  { value: "grid", icon: /* @__PURE__ */ e(z, {}) },
+  { value: "cards", icon: /* @__PURE__ */ e(T, {}) },
+  { value: "table", icon: /* @__PURE__ */ e(V, {}) },
+  { value: "list", icon: /* @__PURE__ */ e(x, {}) },
+  { value: "calendar", icon: /* @__PURE__ */ e(M, {}) }
+], D = [
+  { value: "cards", icon: /* @__PURE__ */ e(B, {}) },
+  { value: "table", icon: /* @__PURE__ */ e(V, {}), disabled: !0 },
+  { value: "list", icon: /* @__PURE__ */ e(x, {}) }
+], W = {
   render: () => {
-    const [r, o] = u("cards"), c = f((i) => {
-      console.log(`Vue sélectionnée: ${i}`), o(i);
+    const [o, r] = u("cards"), c = w((i) => {
+      console.log(`Vue sélectionnée: ${i}`), r(i);
     }, []);
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Sélecteur de vue standard" }),
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Sélecteur de vue standard" }),
       /* @__PURE__ */ e(
-        m,
+        p,
         {
-          buttonList: x,
-          viewMode: r,
+          buttonList: f,
+          viewMode: o,
           onChange: c
         }
       ),
-      /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+      /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
         "Vue actuelle: ",
-        /* @__PURE__ */ e("strong", { children: r })
+        /* @__PURE__ */ e("strong", { children: o })
       ] })
     ] });
   },
@@ -248,19 +248,19 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, N = {
+}, j = {
   render: () => {
-    const [r, o] = u("table"), [c, i] = u(
+    const [o, r] = u("table"), [c, i] = u(
       "primary"
     ), [h, a] = u("small"), [v, b] = u(
       "horizontal"
     );
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Personnalisation en temps réel" }),
-      /* @__PURE__ */ t(l, { container: !0, spacing: 2, sx: { mb: 3 }, children: [
-        /* @__PURE__ */ t(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "Couleur" }),
-          /* @__PURE__ */ t(d, { sx: { display: "flex", gap: 1 }, children: [
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Personnalisation en temps réel" }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 2, sx: { mb: 3 }, children: [
+        /* @__PURE__ */ n(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "Couleur" }),
+          /* @__PURE__ */ n(m, { sx: { display: "flex", gap: 1 }, children: [
             /* @__PURE__ */ e(
               y,
               {
@@ -281,9 +281,9 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             )
           ] })
         ] }),
-        /* @__PURE__ */ t(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "Taille" }),
-          /* @__PURE__ */ e(d, { sx: { display: "flex", gap: 1 }, children: ["small", "medium", "large"].map((g) => /* @__PURE__ */ e(
+        /* @__PURE__ */ n(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "Taille" }),
+          /* @__PURE__ */ e(m, { sx: { display: "flex", gap: 1 }, children: ["small", "medium", "large"].map((g) => /* @__PURE__ */ e(
             y,
             {
               size: "small",
@@ -294,9 +294,9 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             g
           )) })
         ] }),
-        /* @__PURE__ */ t(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "Orientation" }),
-          /* @__PURE__ */ t(d, { sx: { display: "flex", gap: 1 }, children: [
+        /* @__PURE__ */ n(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "Orientation" }),
+          /* @__PURE__ */ n(m, { sx: { display: "flex", gap: 1 }, children: [
             /* @__PURE__ */ e(
               y,
               {
@@ -317,18 +317,18 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             )
           ] })
         ] }),
-        /* @__PURE__ */ t(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "Vue actuelle" }),
-          /* @__PURE__ */ e(n, { variant: "body2", color: "primary", children: /* @__PURE__ */ e("strong", { children: r }) })
+        /* @__PURE__ */ n(l, { size: { xs: 12, sm: 6, md: 3 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "Vue actuelle" }),
+          /* @__PURE__ */ e(t, { variant: "body2", color: "primary", children: /* @__PURE__ */ e("strong", { children: o }) })
         ] })
       ] }),
       /* @__PURE__ */ e(s, { sx: { p: 3, display: "inline-block" }, children: /* @__PURE__ */ e(
-        m,
+        p,
         {
-          buttonList: x,
-          viewMode: r,
+          buttonList: f,
+          viewMode: o,
           onChange: (g) => {
-            console.log(`Vue sélectionnée: ${g}`), o(g);
+            console.log(`Vue sélectionnée: ${g}`), r(g);
           },
           colorVariant: c,
           size: h,
@@ -347,28 +347,28 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, W = {
+}, N = {
   render: () => {
-    const r = [
-      { value: "on", icon: /* @__PURE__ */ e(z, {}) },
-      { value: "off", icon: /* @__PURE__ */ e(w, {}) }
-    ], o = [
-      { value: "active", icon: /* @__PURE__ */ e(S, {}) },
-      { value: "inactive", icon: /* @__PURE__ */ e(V, {}) },
-      { value: "pending", icon: /* @__PURE__ */ e(T, {}) }
+    const o = [
+      { value: "on", icon: /* @__PURE__ */ e(B, {}) },
+      { value: "off", icon: /* @__PURE__ */ e(V, {}) }
+    ], r = [
+      { value: "active", icon: /* @__PURE__ */ e(T, {}) },
+      { value: "inactive", icon: /* @__PURE__ */ e(x, {}) },
+      { value: "pending", icon: /* @__PURE__ */ e(z, {}) }
     ], c = [
-      { value: "edit", icon: /* @__PURE__ */ e(z, {}) },
-      { value: "view", icon: /* @__PURE__ */ e(w, {}) },
-      { value: "preview", icon: /* @__PURE__ */ e(V, {}) }
+      { value: "edit", icon: /* @__PURE__ */ e(B, {}) },
+      { value: "view", icon: /* @__PURE__ */ e(V, {}) },
+      { value: "preview", icon: /* @__PURE__ */ e(x, {}) }
     ], [i, h] = u("on"), [a, v] = u("active"), [b, g] = u("edit");
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Différents contextes d'utilisation" }),
-      /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", paragraph: !0, children: "Le même composant s'adapte automatiquement à différents types de données." }),
-      /* @__PURE__ */ t(l, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Mode binaire" }),
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Différents contextes d'utilisation" }),
+      /* @__PURE__ */ e(t, { variant: "body2", color: "text.secondary", paragraph: !0, children: "Le même composant s'adapte automatiquement à différents types de données." }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Mode binaire" }),
           /* @__PURE__ */ e(
-            n,
+            t,
             {
               variant: "caption",
               color: "text.secondary",
@@ -378,24 +378,24 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: r,
+              buttonList: o,
               viewMode: i,
-              onChange: (p) => {
-                console.log("Simple:", p), h(p);
+              onChange: (d) => {
+                console.log("Simple:", d), h(d);
               }
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
             "État: ",
             i
           ] })
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Statut système" }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Statut système" }),
           /* @__PURE__ */ e(
-            n,
+            t,
             {
               variant: "caption",
               color: "text.secondary",
@@ -405,25 +405,25 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: o,
+              buttonList: r,
               viewMode: a,
-              onChange: (p) => {
-                console.log("Status:", p), v(p);
+              onChange: (d) => {
+                console.log("Status:", d), v(d);
               },
               colorVariant: "secondary"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
             "Statut: ",
             a
           ] })
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Mode d'édition" }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Mode d'édition" }),
           /* @__PURE__ */ e(
-            n,
+            t,
             {
               variant: "caption",
               color: "text.secondary",
@@ -433,23 +433,23 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
               buttonList: c,
               viewMode: b,
-              onChange: (p) => {
-                console.log("Mode:", p), g(p);
+              onChange: (d) => {
+                console.log("Mode:", d), g(d);
               },
               size: "medium"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
             "Mode: ",
             b
           ] })
         ] }) })
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ n(
         s,
         {
           sx: {
@@ -459,8 +459,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             color: "info.contrastText"
           },
           children: [
-            /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "🎯 Flexibilité du composant" }),
-            /* @__PURE__ */ e(n, { variant: "body2", children: "Un seul composant peut gérer n'importe quel ensemble d'options, s'adaptant automatiquement au contexte d'utilisation." })
+            /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "🎯 Flexibilité du composant" }),
+            /* @__PURE__ */ e(t, { variant: "body2", children: "Un seul composant peut gérer n'importe quel ensemble d'options, s'adaptant automatiquement au contexte d'utilisation." })
           ]
         }
       )
@@ -477,31 +477,31 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, _ = {
   render: () => {
-    const r = ["primary", "secondary"], [o, c] = u({
+    const o = ["primary", "secondary"], [r, c] = u({
       primary: "cards",
       secondary: "table"
     });
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Comparaison des variantes de couleurs" }),
-      /* @__PURE__ */ e(l, { container: !0, spacing: 3, children: r.map((i) => /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ t(n, { variant: "subtitle1", gutterBottom: !0, children: [
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Comparaison des variantes de couleurs" }),
+      /* @__PURE__ */ e(l, { container: !0, spacing: 3, children: o.map((i) => /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+        /* @__PURE__ */ n(t, { variant: "subtitle1", gutterBottom: !0, children: [
           "Variante ",
           i
         ] }),
         /* @__PURE__ */ e(
-          m,
+          p,
           {
-            buttonList: x,
-            viewMode: o[i],
+            buttonList: f,
+            viewMode: r[i],
             onChange: (h) => {
               c((a) => ({ ...a, [i]: h }));
             },
             colorVariant: i
           }
         ),
-        /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
           "Sélectionné: ",
-          o[i]
+          r[i]
         ] })
       ] }) }, i)) })
     ] });
@@ -517,36 +517,36 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, $ = {
   render: () => {
-    const r = [
+    const o = [
       "small",
       "medium",
       "large"
-    ], [o, c] = u({
+    ], [r, c] = u({
       small: "cards",
       medium: "table",
       large: "list"
     });
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Comparaison des tailles" }),
-      /* @__PURE__ */ e(l, { container: !0, spacing: 3, children: r.map((i) => /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-        /* @__PURE__ */ t(n, { variant: "subtitle1", gutterBottom: !0, children: [
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Comparaison des tailles" }),
+      /* @__PURE__ */ e(l, { container: !0, spacing: 3, children: o.map((i) => /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+        /* @__PURE__ */ n(t, { variant: "subtitle1", gutterBottom: !0, children: [
           "Taille ",
           i
         ] }),
         /* @__PURE__ */ e(
-          m,
+          p,
           {
-            buttonList: x,
-            viewMode: o[i],
+            buttonList: f,
+            viewMode: r[i],
             onChange: (h) => {
               c((a) => ({ ...a, [i]: h }));
             },
             size: i
           }
         ),
-        /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
           "Sélectionné: ",
-          o[i]
+          r[i]
         ] })
       ] }) }, i)) })
     ] });
@@ -562,32 +562,32 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, J = {
   render: () => {
-    const [r, o] = u("grid"), c = f((i) => {
-      o(i);
+    const [o, r] = u("grid"), c = w((i) => {
+      r(i);
     }, []);
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Orientation verticale" }),
-      /* @__PURE__ */ t(l, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Orientation verticale - Taille medium" }),
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Orientation verticale" }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Orientation verticale - Taille medium" }),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: M,
-              viewMode: r,
+              buttonList: I,
+              viewMode: o,
               onChange: c,
               orientation: "vertical",
               size: "medium"
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Orientation horizontale (comparaison)" }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Orientation horizontale (comparaison)" }),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: M,
-              viewMode: r,
+              buttonList: I,
+              viewMode: o,
               onChange: c,
               orientation: "horizontal",
               size: "medium"
@@ -595,9 +595,9 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           )
         ] }) })
       ] }),
-      /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+      /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
         "Vue actuelle: ",
-        /* @__PURE__ */ e("strong", { children: r })
+        /* @__PURE__ */ e("strong", { children: o })
       ] })
     ] });
   },
@@ -612,33 +612,193 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, K = {
   render: () => {
-    const [r, o] = u("cards"), c = f((i) => {
-      o(i);
+    const o = [
+      {
+        value: "grid",
+        icon: /* @__PURE__ */ e(z, {}),
+        text: "Grille"
+      },
+      {
+        value: "table",
+        icon: /* @__PURE__ */ e(V, {}),
+        text: "Tableau"
+      },
+      {
+        value: "list",
+        icon: /* @__PURE__ */ e(x, {}),
+        text: "Liste"
+      }
+    ], r = [
+      { value: "cards", icon: /* @__PURE__ */ e(B, {}) },
+      { value: "comfort", icon: /* @__PURE__ */ e(T, {}) },
+      { value: "calendar", icon: /* @__PURE__ */ e(M, {}) }
+    ], c = [
+      {
+        value: "overview",
+        icon: /* @__PURE__ */ e(z, {}),
+        text: "Vue d'ensemble"
+      },
+      { value: "details", icon: /* @__PURE__ */ e(T, {}) },
+      // Pas de texte
+      {
+        value: "settings",
+        icon: /* @__PURE__ */ e(M, {}),
+        text: "Paramètres"
+      }
+    ], [i, h] = u("grid"), [a, v] = u("cards"), [b, g] = u("overview");
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Texte optionnel dans les boutons" }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Avec texte" }),
+          /* @__PURE__ */ e(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Tous les boutons ont un texte explicatif"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: o,
+              viewMode: i,
+              onChange: (d) => h(d),
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Sélection: ",
+            i
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Icônes seulement" }),
+          /* @__PURE__ */ e(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Format classique avec icônes uniquement"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: r,
+              viewMode: a,
+              onChange: (d) => v(d),
+              colorVariant: "secondary",
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Sélection: ",
+            a
+          ] })
+        ] }) }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Format mixte" }),
+          /* @__PURE__ */ e(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Certains boutons avec texte, d'autres sans"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: c,
+              viewMode: b,
+              onChange: (d) => g(d),
+              size: "medium",
+              orientation: "vertical"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Sélection: ",
+            b
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ n(s, { sx: { p: 3, mt: 3, backgroundColor: "info.light" }, children: [
+        /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "💡 Utilisation du texte optionnel" }),
+        /* @__PURE__ */ n(t, { variant: "body2", component: "div", children: [
+          "• Le texte s'affiche automatiquement si la propriété",
+          " ",
+          /* @__PURE__ */ e("code", { children: "text" }),
+          " est définie",
+          /* @__PURE__ */ e("br", {}),
+          "• Compatible avec l'ancien format (icônes seules)",
+          /* @__PURE__ */ e("br", {}),
+          "• Possibilité de mélanger boutons avec et sans texte",
+          /* @__PURE__ */ e("br", {}),
+          "• L'espacement est automatiquement ajusté entre l'icône et le texte"
+        ] })
+      ] }),
+      /* @__PURE__ */ n(s, { sx: { p: 2, mt: 2, backgroundColor: "grey.100" }, children: [
+        /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "Exemple de code" }),
+        /* @__PURE__ */ e("pre", { style: { margin: 0, fontSize: "0.875rem", overflow: "auto" }, children: `const buttons = [
+  { 
+    value: "grid", 
+    icon: <GridIcon />, 
+    text: "Grille" // ← Texte optionnel
+  },
+  { 
+    value: "list", 
+    icon: <ListIcon /> // ← Pas de texte, seule l'icône
+  }
+] as const;` })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Démonstration de l'utilisation du texte optionnel dans les boutons. Le texte s'affiche automatiquement si la propriété `text` est présente, permettant une grande flexibilité dans la présentation."
+      }
+    }
+  }
+}, Q = {
+  render: () => {
+    const [o, r] = u("cards"), c = w((i) => {
+      r(i);
     }, []);
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Gestion des boutons désactivés" }),
-      /* @__PURE__ */ t(s, { sx: { p: 3 }, children: [
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Gestion des boutons désactivés" }),
+      /* @__PURE__ */ n(s, { sx: { p: 3 }, children: [
         /* @__PURE__ */ e(
-          m,
+          p,
           {
-            buttonList: q,
-            viewMode: r,
+            buttonList: D,
+            viewMode: o,
             onChange: c,
             size: "medium"
           }
         ),
-        /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
           "Vue actuelle: ",
-          /* @__PURE__ */ e("strong", { children: r })
+          /* @__PURE__ */ e("strong", { children: o })
         ] }),
-        /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: 'Le bouton "Table" est désactivé dans cet exemple' }),
-        /* @__PURE__ */ t(d, { sx: { mt: 2 }, children: [
+        /* @__PURE__ */ e(t, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: 'Le bouton "Table" est désactivé dans cet exemple' }),
+        /* @__PURE__ */ n(m, { sx: { mt: 2 }, children: [
           /* @__PURE__ */ e(
             y,
             {
               variant: "outlined",
               size: "small",
-              onClick: () => o("list"),
+              onClick: () => r("list"),
               sx: { mr: 1 },
               children: "Sélectionner Liste"
             }
@@ -648,7 +808,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             {
               variant: "outlined",
               size: "small",
-              onClick: () => o("cards"),
+              onClick: () => r("cards"),
               children: "Sélectionner Cartes"
             }
           )
@@ -665,29 +825,29 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, Q = {
+}, X = {
   render: () => {
-    const [r, o] = u("grid"), c = f((i) => {
-      o(i);
+    const [o, r] = u("grid"), c = w((i) => {
+      r(i);
     }, []);
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Plus d'options d'affichage" }),
-      /* @__PURE__ */ t(s, { sx: { p: 3 }, children: [
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Plus d'options d'affichage" }),
+      /* @__PURE__ */ n(s, { sx: { p: 3 }, children: [
         /* @__PURE__ */ e(
-          m,
+          p,
           {
-            buttonList: M,
-            viewMode: r,
+            buttonList: I,
+            viewMode: o,
             onChange: c,
             colorVariant: "secondary",
             size: "large"
           }
         ),
-        /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
           "Vue actuelle: ",
-          /* @__PURE__ */ e("strong", { children: r })
+          /* @__PURE__ */ e("strong", { children: o })
         ] }),
-        /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: "Cet exemple montre un ButtonGroup avec 5 options différentes en variante secondary et taille large" })
+        /* @__PURE__ */ e(t, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: "Cet exemple montre un ButtonGroup avec 5 options différentes en variante secondary et taille large" })
       ] })
     ] });
   },
@@ -700,21 +860,21 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, X = {
+}, Y = {
   render: () => {
-    const [r, o] = u("cards"), c = f((a) => {
-      console.log("Changement de vue:", a), o(a);
-    }, []), i = f((a) => {
-      console.log("Changement externe:", a), o(a);
+    const [o, r] = u("cards"), c = w((a) => {
+      console.log("Changement de vue:", a), r(a);
+    }, []), i = w((a) => {
+      console.log("Changement externe:", a), r(a);
     }, []);
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Synchronisation avec d'autres composants" }),
-      /* @__PURE__ */ t(n, { variant: "subtitle1", gutterBottom: !0, children: [
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Synchronisation avec d'autres composants" }),
+      /* @__PURE__ */ n(t, { variant: "subtitle1", gutterBottom: !0, children: [
         "Vue actuelle: ",
-        /* @__PURE__ */ e("strong", { children: r })
+        /* @__PURE__ */ e("strong", { children: o })
       ] }),
-      /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", paragraph: !0, children: (() => {
-        switch (r) {
+      /* @__PURE__ */ e(t, { variant: "body2", color: "text.secondary", paragraph: !0, children: (() => {
+        switch (o) {
           case "cards":
             return "Affichage en cartes - Idéal pour une vue d'ensemble visuelle";
           case "table":
@@ -725,25 +885,25 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             return "Mode d'affichage inconnu";
         }
       })() }),
-      /* @__PURE__ */ t(l, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "ButtonGroup Principal" }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "ButtonGroup Principal" }),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: x,
-              viewMode: r,
+              buttonList: f,
+              viewMode: o,
               onChange: c,
               size: "medium"
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Contrôles externes" }),
-          /* @__PURE__ */ e(d, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: x.map((a) => /* @__PURE__ */ t(
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Contrôles externes" }),
+          /* @__PURE__ */ e(m, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: f.map((a) => /* @__PURE__ */ n(
             y,
             {
-              variant: r === a.value ? "contained" : "outlined",
+              variant: o === a.value ? "contained" : "outlined",
               onClick: () => i(a.value),
               size: "small",
               startIcon: a.icon,
@@ -756,8 +916,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           )) })
         ] }) })
       ] }),
-      /* @__PURE__ */ t(s, { sx: { p: 2, mt: 2, backgroundColor: "grey.50" }, children: [
-        /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "Actions rapides" }),
+      /* @__PURE__ */ n(s, { sx: { p: 2, mt: 2, backgroundColor: "grey.50" }, children: [
+        /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "Actions rapides" }),
         /* @__PURE__ */ e(
           y,
           {
@@ -777,10 +937,10 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             variant: "text",
             size: "small",
             onClick: () => {
-              const v = (x.findIndex(
-                (b) => b.value === r
-              ) + 1) % x.length;
-              i(x[v].value);
+              const v = (f.findIndex(
+                (b) => b.value === o
+              ) + 1) % f.length;
+              i(f[v].value);
             },
             children: "Vue suivante"
           }
@@ -797,79 +957,79 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, Y = {
+}, Z = {
   render: () => {
-    const r = [
-      { value: "overview", icon: /* @__PURE__ */ e(S, {}) },
-      { value: "detailed", icon: /* @__PURE__ */ e(w, {}) },
-      { value: "analytics", icon: /* @__PURE__ */ e(T, {}) }
-    ], o = [
-      { value: "grid", icon: /* @__PURE__ */ e(T, {}) },
-      { value: "list", icon: /* @__PURE__ */ e(V, {}) },
-      { value: "tree", icon: /* @__PURE__ */ e(z, {}) }
+    const o = [
+      { value: "overview", icon: /* @__PURE__ */ e(T, {}) },
+      { value: "detailed", icon: /* @__PURE__ */ e(V, {}) },
+      { value: "analytics", icon: /* @__PURE__ */ e(z, {}) }
+    ], r = [
+      { value: "grid", icon: /* @__PURE__ */ e(z, {}) },
+      { value: "list", icon: /* @__PURE__ */ e(x, {}) },
+      { value: "tree", icon: /* @__PURE__ */ e(B, {}) }
     ], c = [
-      { value: "chart", icon: /* @__PURE__ */ e(I, {}) },
-      { value: "table", icon: /* @__PURE__ */ e(w, {}) },
-      { value: "raw", icon: /* @__PURE__ */ e(V, {}), disabled: !0 }
+      { value: "chart", icon: /* @__PURE__ */ e(M, {}) },
+      { value: "table", icon: /* @__PURE__ */ e(V, {}) },
+      { value: "raw", icon: /* @__PURE__ */ e(x, {}), disabled: !0 }
     ], [i, h] = u("overview"), [a, v] = u("grid"), [b, g] = u("chart");
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Cas d'utilisation dans une interface complexe" }),
-      /* @__PURE__ */ t(l, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2, height: "100%" }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Dashboard" }),
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Cas d'utilisation dans une interface complexe" }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2, height: "100%" }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Dashboard" }),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: r,
+              buttonList: o,
               viewMode: i,
-              onChange: (p) => h(p),
+              onChange: (d) => h(d),
               colorVariant: "primary",
               size: "small",
               orientation: "vertical"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
             "Mode: ",
             i
           ] })
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2, height: "100%" }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Explorateur de fichiers" }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2, height: "100%" }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Explorateur de fichiers" }),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              buttonList: o,
+              buttonList: r,
               viewMode: a,
-              onChange: (p) => v(p),
+              onChange: (d) => v(d),
               colorVariant: "secondary",
               size: "medium"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
             "Affichage: ",
             a
           ] })
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2, height: "100%" }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Visualisation de données" }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ n(s, { sx: { p: 2, height: "100%" }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Visualisation de données" }),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
               buttonList: c,
               viewMode: b,
-              onChange: (p) => g(p),
+              onChange: (d) => g(d),
               colorVariant: "primary",
               size: "large"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
             "Format: ",
             b
           ] }),
-          /* @__PURE__ */ e(n, { variant: "caption", color: "text.secondary", children: '(Le mode "raw" est temporairement désactivé)' })
+          /* @__PURE__ */ e(t, { variant: "caption", color: "text.secondary", children: '(Le mode "raw" est temporairement désactivé)' })
         ] }) })
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ n(
         s,
         {
           sx: {
@@ -879,8 +1039,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             color: "info.contrastText"
           },
           children: [
-            /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "📊 Résumé des sélections (tous typés !)" }),
-            /* @__PURE__ */ t(n, { variant: "body2", children: [
+            /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "📊 Résumé des sélections (tous typés !)" }),
+            /* @__PURE__ */ n(t, { variant: "body2", children: [
               "Dashboard: ",
               /* @__PURE__ */ e("strong", { children: i }),
               " | Fichiers:",
@@ -892,7 +1052,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           ]
         }
       ),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ n(
         s,
         {
           sx: {
@@ -902,8 +1062,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             color: "warning.contrastText"
           },
           children: [
-            /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "🔍 Inspection des types" }),
-            /* @__PURE__ */ t(n, { variant: "body2", component: "div", children: [
+            /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "🔍 Inspection des types" }),
+            /* @__PURE__ */ n(t, { variant: "body2", component: "div", children: [
               /* @__PURE__ */ e("code", { children: "DashboardType:" }),
               " ",
               '"overview" | "detailed" | "analytics"',
@@ -916,7 +1076,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
               " ",
               '"chart" | "table" | "raw"'
             ] }),
-            /* @__PURE__ */ e(n, { variant: "caption", sx: { mt: 1, display: "block" }, children: "Chaque callback reçoit exactement le bon type, aucune configuration supplémentaire requise !" })
+            /* @__PURE__ */ e(t, { variant: "caption", sx: { mt: 1, display: "block" }, children: "Chaque callback reçoit exactement le bon type, aucune configuration supplémentaire requise !" })
           ]
         }
       )
@@ -931,36 +1091,36 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, Z = {
+}, ee = {
   render: () => {
-    const r = {
+    const o = {
       CARDS: "cards",
       TABLE: "table",
       LIST: "list"
-    }, o = (C, L, D = !1) => ({ value: C, icon: L, disabled: D }), c = [
-      o(r.CARDS, /* @__PURE__ */ e(z, {})),
-      o(r.TABLE, /* @__PURE__ */ e(w, {})),
-      o(r.LIST, /* @__PURE__ */ e(V, {}))
+    }, r = (C, L, q = !1) => ({ value: C, icon: L, disabled: q }), c = [
+      r(o.CARDS, /* @__PURE__ */ e(B, {})),
+      r(o.TABLE, /* @__PURE__ */ e(V, {})),
+      r(o.LIST, /* @__PURE__ */ e(x, {}))
     ], i = [
-      o("dashboard", /* @__PURE__ */ e(T, {})),
-      o("users", /* @__PURE__ */ e(S, {})),
-      o("settings", /* @__PURE__ */ e(I, {})),
-      o("logs", /* @__PURE__ */ e(V, {}), !0)
+      r("dashboard", /* @__PURE__ */ e(z, {})),
+      r("users", /* @__PURE__ */ e(T, {})),
+      r("settings", /* @__PURE__ */ e(M, {})),
+      r("logs", /* @__PURE__ */ e(x, {}), !0)
       // désactivé
     ], [h, a] = u(
-      r.CARDS
-    ), [v, b] = u("dashboard"), g = f((C) => {
+      o.CARDS
+    ), [v, b] = u("dashboard"), g = w((C) => {
       console.log("Vue commune changée:", C), a(C);
-    }, []), p = f((C) => {
+    }, []), d = w((C) => {
       console.log("Vue admin changée:", C), b(C);
     }, []);
-    return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
-      /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "🚀 Bonnes pratiques pour le typage" }),
-      /* @__PURE__ */ t(l, { container: !0, spacing: 3, children: [
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Configuration standard" }),
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "🚀 Bonnes pratiques pour le typage" }),
+      /* @__PURE__ */ n(l, { container: !0, spacing: 3, children: [
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Configuration standard" }),
           /* @__PURE__ */ e(
-            n,
+            t,
             {
               variant: "caption",
               color: "text.secondary",
@@ -970,7 +1130,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
               buttonList: c,
               viewMode: h,
@@ -978,15 +1138,15 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
               size: "medium"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
             "Sélection: ",
             h
           ] })
         ] }) }),
-        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "Configuration avancée" }),
+        /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ n(s, { sx: { p: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle1", gutterBottom: !0, children: "Configuration avancée" }),
           /* @__PURE__ */ e(
-            n,
+            t,
             {
               variant: "caption",
               color: "text.secondary",
@@ -996,25 +1156,25 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
               buttonList: i,
               viewMode: v,
-              onChange: p,
+              onChange: d,
               colorVariant: "secondary",
               size: "medium"
             }
           ),
-          /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
             "Admin: ",
             v
           ] })
         ] }) })
       ] }),
-      /* @__PURE__ */ t(s, { sx: { p: 3, mt: 3, backgroundColor: "success.light" }, children: [
-        /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "📚 Code examples - Bonnes pratiques" }),
-        /* @__PURE__ */ t(d, { sx: { mb: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "1. ✅ Utilisation de constantes réutilisables" }),
+      /* @__PURE__ */ n(s, { sx: { p: 3, mt: 3, backgroundColor: "success.light" }, children: [
+        /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "📚 Code examples - Bonnes pratiques" }),
+        /* @__PURE__ */ n(m, { sx: { mb: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "1. ✅ Utilisation de constantes réutilisables" }),
           /* @__PURE__ */ e(s, { sx: { p: 2, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
             "pre",
             {
@@ -1031,8 +1191,8 @@ const buttons = [
             }
           ) })
         ] }),
-        /* @__PURE__ */ t(d, { sx: { mb: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "2. ✅ Factory functions pour la réutilisabilité" }),
+        /* @__PURE__ */ n(m, { sx: { mb: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "2. ✅ Factory functions pour la réutilisabilité" }),
           /* @__PURE__ */ e(s, { sx: { p: 2, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
             "pre",
             {
@@ -1050,8 +1210,8 @@ const buttons = [
             }
           ) })
         ] }),
-        /* @__PURE__ */ t(d, { sx: { mb: 2 }, children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "3. ✅ Types helper pour éviter la répétition" }),
+        /* @__PURE__ */ n(m, { sx: { mb: 2 }, children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "3. ✅ Types helper pour éviter la répétition" }),
           /* @__PURE__ */ e(s, { sx: { p: 2, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
             "pre",
             {
@@ -1067,8 +1227,8 @@ const handleChange = useCallback((value: ViewType) => {
             }
           ) })
         ] }),
-        /* @__PURE__ */ t(d, { children: [
-          /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "4. ✅ Handler avec typage explicite" }),
+        /* @__PURE__ */ n(m, { children: [
+          /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "4. ✅ Handler avec typage explicite" }),
           /* @__PURE__ */ e(s, { sx: { p: 2, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
             "pre",
             {
@@ -1082,7 +1242,7 @@ const handleChange = useCallback((value: ViewType) => {
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ t(
+      /* @__PURE__ */ n(
         s,
         {
           sx: {
@@ -1092,8 +1252,8 @@ const handleChange = useCallback((value: ViewType) => {
             color: "error.contrastText"
           },
           children: [
-            /* @__PURE__ */ e(n, { variant: "subtitle2", gutterBottom: !0, children: "❌ À éviter" }),
-            /* @__PURE__ */ t(n, { variant: "body2", component: "div", children: [
+            /* @__PURE__ */ e(t, { variant: "subtitle2", gutterBottom: !0, children: "❌ À éviter" }),
+            /* @__PURE__ */ n(t, { variant: "body2", component: "div", children: [
               "• Oublier ",
               /* @__PURE__ */ e("code", { children: "as const" }),
               " après les tableaux",
@@ -1120,16 +1280,17 @@ const handleChange = useCallback((value: ViewType) => {
   }
 };
 export {
-  K as AvecBoutonsDesactives,
-  Z as BonnesPratiques,
-  Y as CasUtilisationComplexe,
-  N as Controlable,
-  j as Default,
-  Q as OptionsEtendues,
+  Q as AvecBoutonsDesactives,
+  K as AvecTexteOptionnel,
+  ee as BonnesPratiques,
+  Z as CasUtilisationComplexe,
+  j as Controlable,
+  W as Default,
+  X as OptionsEtendues,
   J as OrientationVerticale,
-  X as Synchronisation,
+  Y as Synchronisation,
   $ as TaillesDifferentes,
-  W as TypageGenerique,
+  N as TypageGenerique,
   _ as VariantesDecouleurs,
   F as default
 };