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

package/dist/components/stories/{SwitchView.stories.es.js → ButtonGroup.stories.es.js}

@@ -1,35 +1,35 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { c as z } from "../../createSvgIcon-BWru5SCV.js";
-import { useState as u, useCallback as V } from "react";
-import m from "../SwitchView/SwitchView.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 = z(/* @__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"), S = z(/* @__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"), w = z(/* @__PURE__ */ e("path", {
+}), "GridView"), x = S(/* @__PURE__ */ e("path", {
   d: "M3 13h2v-2H3zm0 4h2v-2H3zm0-8h2V7H3zm4 4h14v-2H7zm0 4h14v-2H7zM7 7v2h14V7z"
-}), "List"), f = z(/* @__PURE__ */ e("path", {
+}), "List"), V = S(/* @__PURE__ */ e("path", {
   d: "M21 8H3V4h18zm0 2H3v4h18zm0 6H3v4h18z"
-}), "TableRows"), T = z(/* @__PURE__ */ e("path", {
+}), "TableRows"), T = S(/* @__PURE__ */ e("path", {
   d: "M2 4v7h20V4zm8 16h12v-7H10zm-8 0h6v-7H2z"
-}), "ViewComfy"), B = z(/* @__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"), G = {
-  title: "Components/SwitchView",
-  component: m,
+}), "ViewModule"), F = {
+  title: "Components/ButtonGroup",
+  component: p,
   argTypes: {
-    toggleButtonList: {
-      description: "**[Requis]** Liste des boutons à afficher dans le SwitchView.",
+    buttonList: {
+      description: "**[Requis]** Liste des boutons à afficher dans le ButtonGroup.",
       control: "object",
       table: {
         required: !0,
-        type: { summary: "readonly ToggleButtonItem[]" }
+        type: { summary: "readonly ButtonItem[]" }
       }
     },
     viewMode: {
@@ -87,13 +87,13 @@ const I = z(/* @__PURE__ */ e("path", {
     docs: {
       description: {
         component: `
-## SwitchView
+## ButtonGroup
 
 Un composant générique TypeScript pour permettre à l'utilisateur de basculer entre différents modes d'affichage ou options avec une sécurité de type complète.
 
 ### 🔥 Typage générique et sécurité des types
 
-Le SwitchView utilise TypeScript générique avancé pour inférer automatiquement les types des valeurs possibles à partir de la liste des boutons fournie. **Il n'est plus nécessaire de définir un enum**, les types sont déduits automatiquement grâce à la magie de TypeScript !
+Le ButtonGroup utilise TypeScript générique avancé pour inférer automatiquement les types des valeurs possibles à partir de la liste des boutons fournie. **Il n'est plus nécessaire de définir un enum**, les types sont déduits automatiquement grâce à la magie de TypeScript !
 
 **Point clé** : Utilisez toujours \`as const\` après votre tableau de boutons pour permettre l'inférence de type littéral.
 
@@ -117,8 +117,8 @@ const handleViewChange = useCallback((value: ViewType) => {
   setCurrentView(value);
 }, []);
 
-<SwitchView 
-  toggleButtonList={viewButtons}
+<ButtonGroup 
+  buttonList={viewButtons}
   viewMode={currentView}
   onChange={handleViewChange} // ← Pas d'erreur 'any' !
 />
@@ -148,18 +148,18 @@ const handleViewChange = (value) => { // ← 'value' aura le type 'any'
 
 ### 📋 Structure des données
 
-Le composant attend un tableau d'objets \`ToggleButtonItem\` typé de manière générique :
+Le composant attend un tableau d'objets \`ButtonItem\` typé de manière générique :
 
 \`\`\`typescript
-interface ToggleButtonItem<T extends string = string> {
+interface ButtonItem<T extends string = string> {
   value: T;           // Valeur unique pour ce bouton (obligatoire)
   icon: ReactNode;    // Icône à afficher (obligatoire)
   disabled?: boolean; // Désactiver ce bouton spécifique (facultatif)
 }
 
 // Le composant infère automatiquement T à partir de votre tableau
-type SwitchViewProps<T extends readonly ToggleButtonItem<string>[]> = {
-  toggleButtonList: T;
+type SwitchViewProps<T extends readonly ButtonItem<string>[]> = {
+  buttonList: T;
   viewMode: T[number]["value"];           // Type inféré automatiquement
   onChange: (value: T[number]["value"]) => void; // Type inféré automatiquement
   // ... autres props
@@ -204,36 +204,36 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, x = [
+}, f = [
   { value: "cards", icon: /* @__PURE__ */ e(B, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(f, {}) },
-  { value: "list", icon: /* @__PURE__ */ e(w, {}) }
-], M = [
-  { value: "grid", icon: /* @__PURE__ */ e(S, {}) },
+  { 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(f, {}) },
-  { value: "list", icon: /* @__PURE__ */ e(w, {}) },
-  { value: "calendar", icon: /* @__PURE__ */ e(I, {}) }
-], q = [
+  { 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(f, {}), disabled: !0 },
-  { value: "list", icon: /* @__PURE__ */ e(w, {}) }
-], j = {
+  { value: "table", icon: /* @__PURE__ */ e(V, {}), disabled: !0 },
+  { value: "list", icon: /* @__PURE__ */ e(x, {}) }
+], W = {
   render: () => {
-    const [o, r] = u("cards"), c = V((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,
         {
-          toggleButtonList: x,
+          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: o })
       ] })
@@ -248,19 +248,19 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, N = {
+}, j = {
   render: () => {
     const [o, r] = u("table"), [c, i] = u(
       "primary"
-    ), [h, a] = u("small"), [v, g] = u(
+    ), [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,28 +281,28 @@ 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((b) => /* @__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",
-              variant: h === b ? "contained" : "outlined",
-              onClick: () => a(b),
-              children: b
+              variant: h === g ? "contained" : "outlined",
+              onClick: () => a(g),
+              children: g
             },
-            b
+            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,
               {
                 size: "small",
                 variant: v === "horizontal" ? "contained" : "outlined",
-                onClick: () => g("horizontal"),
+                onClick: () => b("horizontal"),
                 children: "Horizontal"
               }
             ),
@@ -311,24 +311,24 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
               {
                 size: "small",
                 variant: v === "vertical" ? "contained" : "outlined",
-                onClick: () => g("vertical"),
+                onClick: () => b("vertical"),
                 children: "Vertical"
               }
             )
           ] })
         ] }),
-        /* @__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: o }) })
+        /* @__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,
         {
-          toggleButtonList: x,
+          buttonList: f,
           viewMode: o,
-          onChange: (b) => {
-            console.log(`Vue sélectionnée: ${b}`), r(b);
+          onChange: (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 o = [
       { value: "on", icon: /* @__PURE__ */ e(B, {}) },
-      { value: "off", icon: /* @__PURE__ */ e(f, {}) }
+      { value: "off", icon: /* @__PURE__ */ e(V, {}) }
     ], r = [
       { value: "active", icon: /* @__PURE__ */ e(T, {}) },
-      { value: "inactive", icon: /* @__PURE__ */ e(w, {}) },
-      { value: "pending", icon: /* @__PURE__ */ e(S, {}) }
+      { value: "inactive", icon: /* @__PURE__ */ e(x, {}) },
+      { value: "pending", icon: /* @__PURE__ */ e(z, {}) }
     ], c = [
       { value: "edit", icon: /* @__PURE__ */ e(B, {}) },
-      { value: "view", icon: /* @__PURE__ */ e(f, {}) },
-      { value: "preview", icon: /* @__PURE__ */ e(w, {}) }
-    ], [i, h] = u("on"), [a, v] = u("active"), [g, b] = 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" }),
+      { 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__ */ 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,
             {
-              toggleButtonList: o,
+              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,
             {
-              toggleButtonList: r,
+              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,
             {
-              toggleButtonList: c,
-              viewMode: g,
-              onChange: (p) => {
-                console.log("Mode:", p), b(p);
+              buttonList: c,
+              viewMode: b,
+              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: ",
-            g
+            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." })
           ]
         }
       )
@@ -481,17 +481,17 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       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: o.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,
           {
-            toggleButtonList: x,
+            buttonList: f,
             viewMode: r[i],
             onChange: (h) => {
               c((a) => ({ ...a, [i]: h }));
@@ -499,7 +499,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             colorVariant: i
           }
         ),
-        /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
           "Sélectionné: ",
           r[i]
         ] })
@@ -526,17 +526,17 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       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: o.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,
           {
-            toggleButtonList: x,
+            buttonList: f,
             viewMode: r[i],
             onChange: (h) => {
               c((a) => ({ ...a, [i]: h }));
@@ -544,7 +544,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             size: i
           }
         ),
-        /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
           "Sélectionné: ",
           r[i]
         ] })
@@ -562,18 +562,18 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, J = {
   render: () => {
-    const [o, r] = u("grid"), c = V((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,
             {
-              toggleButtonList: M,
+              buttonList: I,
               viewMode: o,
               onChange: c,
               orientation: "vertical",
@@ -581,12 +581,12 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           )
         ] }) }),
-        /* @__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,
             {
-              toggleButtonList: M,
+              buttonList: I,
               viewMode: o,
               onChange: c,
               orientation: "horizontal",
@@ -595,7 +595,7 @@ 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: o })
       ] })
@@ -612,27 +612,187 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, K = {
   render: () => {
-    const [o, r] = u("cards"), c = V((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,
           {
-            toggleButtonList: q,
+            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: 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,
             {
@@ -665,29 +825,29 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, Q = {
+}, X = {
   render: () => {
-    const [o, r] = u("grid"), c = V((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,
           {
-            toggleButtonList: M,
+            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: o })
         ] }),
-        /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", sx: { mt: 1 }, children: "Cet exemple montre un SwitchView 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,20 +860,20 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       }
     }
   }
-}, X = {
+}, Y = {
   render: () => {
-    const [o, r] = u("cards"), c = V((a) => {
+    const [o, r] = u("cards"), c = w((a) => {
       console.log("Changement de vue:", a), r(a);
-    }, []), i = V((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: o })
       ] }),
-      /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", paragraph: !0, children: (() => {
+      /* @__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";
@@ -725,22 +885,22 @@ 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: "SwitchView 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,
             {
-              toggleButtonList: x,
+              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: o === a.value ? "contained" : "outlined",
@@ -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(
-                (g) => g.value === o
-              ) + 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"
           }
@@ -793,83 +953,83 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
     actions: { disable: !0 },
     docs: {
       description: {
-        story: "Démonstration de la synchronisation entre le SwitchView et d'autres composants. Cette story montre comment le SwitchView peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."
+        story: "Démonstration de la synchronisation entre le ButtonGroup et d'autres composants. Cette story montre comment le ButtonGroup peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."
       }
     }
   }
-}, Y = {
+}, Z = {
   render: () => {
     const o = [
       { value: "overview", icon: /* @__PURE__ */ e(T, {}) },
-      { value: "detailed", icon: /* @__PURE__ */ e(f, {}) },
-      { value: "analytics", icon: /* @__PURE__ */ e(S, {}) }
+      { value: "detailed", icon: /* @__PURE__ */ e(V, {}) },
+      { value: "analytics", icon: /* @__PURE__ */ e(z, {}) }
     ], r = [
-      { value: "grid", icon: /* @__PURE__ */ e(S, {}) },
-      { value: "list", icon: /* @__PURE__ */ e(w, {}) },
+      { 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(f, {}) },
-      { value: "raw", icon: /* @__PURE__ */ e(w, {}), disabled: !0 }
-    ], [i, h] = u("overview"), [a, v] = u("grid"), [g, b] = 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" }),
+      { 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__ */ 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,
             {
-              toggleButtonList: o,
+              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,
             {
-              toggleButtonList: r,
+              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,
             {
-              toggleButtonList: c,
-              viewMode: g,
-              onChange: (p) => b(p),
+              buttonList: c,
+              viewMode: b,
+              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: ",
-            g
+            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,20 +1039,20 @@ 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:",
               " ",
               /* @__PURE__ */ e("strong", { children: a }),
               " | Données: ",
-              /* @__PURE__ */ e("strong", { children: g })
+              /* @__PURE__ */ e("strong", { children: b })
             ] })
           ]
         }
       ),
-      /* @__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 !" })
           ]
         }
       )
@@ -927,40 +1087,40 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
     actions: { disable: !0 },
     docs: {
       description: {
-        story: "Exemple d'utilisation complexe montrant comment le SwitchView peut être utilisé dans différents contextes au sein d'une même interface, avec différentes configurations (tailles, couleurs, orientations) selon le besoin. Chaque instance a son propre type inféré automatiquement."
+        story: "Exemple d'utilisation complexe montrant comment le ButtonGroup peut être utilisé dans différents contextes au sein d'une même interface, avec différentes configurations (tailles, couleurs, orientations) selon le besoin. Chaque instance a son propre type inféré automatiquement."
       }
     }
   }
-}, Z = {
+}, ee = {
   render: () => {
     const o = {
       CARDS: "cards",
       TABLE: "table",
       LIST: "list"
-    }, r = (C, L, D = !1) => ({ value: C, icon: L, disabled: D }), c = [
+    }, r = (C, L, q = !1) => ({ value: C, icon: L, disabled: q }), c = [
       r(o.CARDS, /* @__PURE__ */ e(B, {})),
-      r(o.TABLE, /* @__PURE__ */ e(f, {})),
-      r(o.LIST, /* @__PURE__ */ e(w, {}))
+      r(o.TABLE, /* @__PURE__ */ e(V, {})),
+      r(o.LIST, /* @__PURE__ */ e(x, {}))
     ], i = [
-      r("dashboard", /* @__PURE__ */ e(S, {})),
+      r("dashboard", /* @__PURE__ */ e(z, {})),
       r("users", /* @__PURE__ */ e(T, {})),
-      r("settings", /* @__PURE__ */ e(I, {})),
-      r("logs", /* @__PURE__ */ e(w, {}), !0)
+      r("settings", /* @__PURE__ */ e(M, {})),
+      r("logs", /* @__PURE__ */ e(x, {}), !0)
       // désactivé
     ], [h, a] = u(
       o.CARDS
-    ), [v, g] = u("dashboard"), b = V((C) => {
+    ), [v, b] = u("dashboard"), g = w((C) => {
       console.log("Vue commune changée:", C), a(C);
-    }, []), p = V((C) => {
-      console.log("Vue admin changée:", C), g(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,23 +1130,23 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             }
           ),
           /* @__PURE__ */ e(
-            m,
+            p,
             {
-              toggleButtonList: c,
+              buttonList: c,
               viewMode: h,
-              onChange: b,
+              onChange: g,
               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,
             {
-              toggleButtonList: i,
+              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,14 +1227,14 @@ 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",
             {
               style: { margin: 0, fontSize: "0.875rem", overflow: "auto" },
-              children: `<SwitchView
-  toggleButtonList={buttons}
+              children: `<ButtonGroup
+  buttonList={buttons}
   viewMode={view}
   onChange={handleChange} // ← Pas de type 'any' !
 />`
@@ -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",
@@ -1114,22 +1274,23 @@ const handleChange = useCallback((value: ViewType) => {
     actions: { disable: !0 },
     docs: {
       description: {
-        story: "Cette story présente les meilleures pratiques pour utiliser le SwitchView avec un typage TypeScript optimal. Elle montre comment structurer votre code pour éviter les types 'any' et maximiser la sécurité de type."
+        story: "Cette story présente les meilleures pratiques pour utiliser le ButtonGroup avec un typage TypeScript optimal. Elle montre comment structurer votre code pour éviter les types 'any' et maximiser la sécurité de type."
       }
     }
   }
 };
 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,
-  G as default
+  F as default
 };