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

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 { 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 { 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 I = B(/* @__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"), T = B(/* @__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"), V = B(/* @__PURE__ */ e("path", {
   d: "M3 13h2v-2H3zm0 4h2v-2H3zm0-8h2V7H3zm4 4h14v-2H7zm0 4h14v-2H7zM7 7v2h14V7z"
-}), "List"), f = z(/* @__PURE__ */ e("path", {
+}), "List"), w = B(/* @__PURE__ */ e("path", {
   d: "M21 8H3V4h18zm0 2H3v4h18zm0 6H3v4h18z"
-}), "TableRows"), T = z(/* @__PURE__ */ e("path", {
+}), "TableRows"), S = B(/* @__PURE__ */ e("path", {
   d: "M2 4v7h20V4zm8 16h12v-7H10zm-8 0h6v-7H2z"
-}), "ViewComfy"), B = z(/* @__PURE__ */ e("path", {
+}), "ViewComfy"), z = B(/* @__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",
+}), "ViewModule"), F = {
+  title: "Components/ButtonGroup",
   component: m,
   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
@@ -205,37 +205,37 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
     }
   }
 }, x = [
-  { value: "cards", icon: /* @__PURE__ */ e(B, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(f, {}) },
-  { value: "list", icon: /* @__PURE__ */ e(w, {}) }
+  { value: "cards", icon: /* @__PURE__ */ e(z, {}) },
+  { value: "table", icon: /* @__PURE__ */ e(w, {}) },
+  { value: "list", icon: /* @__PURE__ */ e(V, {}) }
 ], M = [
-  { value: "grid", icon: /* @__PURE__ */ e(S, {}) },
-  { value: "cards", icon: /* @__PURE__ */ e(T, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(f, {}) },
-  { value: "list", icon: /* @__PURE__ */ e(w, {}) },
+  { 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(B, {}) },
-  { value: "table", icon: /* @__PURE__ */ e(f, {}), disabled: !0 },
-  { value: "list", icon: /* @__PURE__ */ e(w, {}) }
+  { value: "cards", icon: /* @__PURE__ */ e(z, {}) },
+  { value: "table", icon: /* @__PURE__ */ e(w, {}), disabled: !0 },
+  { value: "list", icon: /* @__PURE__ */ e(V, {}) }
 ], j = {
   render: () => {
-    const [o, r] = u("cards"), c = V((i) => {
-      console.log(`Vue sélectionnée: ${i}`), r(i);
+    const [r, o] = u("cards"), c = f((i) => {
+      console.log(`Vue sélectionnée: ${i}`), o(i);
     }, []);
     return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
       /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Sélecteur de vue standard" }),
       /* @__PURE__ */ e(
         m,
         {
-          toggleButtonList: x,
-          viewMode: o,
+          buttonList: x,
+          viewMode: r,
           onChange: c
         }
       ),
       /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
         "Vue actuelle: ",
-        /* @__PURE__ */ e("strong", { children: o })
+        /* @__PURE__ */ e("strong", { children: r })
       ] })
     ] });
   },
@@ -250,9 +250,9 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, N = {
   render: () => {
-    const [o, r] = u("table"), [c, i] = u(
+    const [r, o] = 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: [
@@ -283,15 +283,15 @@ 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__ */ e(d, { 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: [
@@ -302,7 +302,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
               {
                 size: "small",
                 variant: v === "horizontal" ? "contained" : "outlined",
-                onClick: () => g("horizontal"),
+                onClick: () => b("horizontal"),
                 children: "Horizontal"
               }
             ),
@@ -311,7 +311,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
               {
                 size: "small",
                 variant: v === "vertical" ? "contained" : "outlined",
-                onClick: () => g("vertical"),
+                onClick: () => b("vertical"),
                 children: "Vertical"
               }
             )
@@ -319,16 +319,16 @@ 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: o }) })
+          /* @__PURE__ */ e(n, { variant: "body2", color: "primary", children: /* @__PURE__ */ e("strong", { children: r }) })
         ] })
       ] }),
       /* @__PURE__ */ e(s, { sx: { p: 3, display: "inline-block" }, children: /* @__PURE__ */ e(
         m,
         {
-          toggleButtonList: x,
-          viewMode: o,
-          onChange: (b) => {
-            console.log(`Vue sélectionnée: ${b}`), r(b);
+          buttonList: x,
+          viewMode: r,
+          onChange: (g) => {
+            console.log(`Vue sélectionnée: ${g}`), o(g);
           },
           colorVariant: c,
           size: h,
@@ -349,18 +349,18 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, W = {
   render: () => {
-    const o = [
-      { value: "on", icon: /* @__PURE__ */ e(B, {}) },
-      { value: "off", icon: /* @__PURE__ */ e(f, {}) }
-    ], r = [
-      { value: "active", icon: /* @__PURE__ */ e(T, {}) },
-      { value: "inactive", icon: /* @__PURE__ */ e(w, {}) },
-      { value: "pending", icon: /* @__PURE__ */ e(S, {}) }
+    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, {}) }
     ], 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");
+      { value: "edit", icon: /* @__PURE__ */ e(z, {}) },
+      { value: "view", icon: /* @__PURE__ */ e(w, {}) },
+      { value: "preview", icon: /* @__PURE__ */ e(V, {}) }
+    ], [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." }),
@@ -380,7 +380,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: o,
+              buttonList: r,
               viewMode: i,
               onChange: (p) => {
                 console.log("Simple:", p), h(p);
@@ -407,7 +407,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: r,
+              buttonList: o,
               viewMode: a,
               onChange: (p) => {
                 console.log("Status:", p), v(p);
@@ -435,17 +435,17 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: c,
-              viewMode: g,
+              buttonList: c,
+              viewMode: b,
               onChange: (p) => {
-                console.log("Mode:", p), b(p);
+                console.log("Mode:", p), g(p);
               },
               size: "medium"
             }
           ),
           /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
             "Mode: ",
-            g
+            b
           ] })
         ] }) })
       ] }),
@@ -477,13 +477,13 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, _ = {
   render: () => {
-    const o = ["primary", "secondary"], [r, c] = u({
+    const r = ["primary", "secondary"], [o, 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: o.map((i) => /* @__PURE__ */ e(l, { size: { xs: 12, md: 6 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
+      /* @__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: [
           "Variante ",
           i
@@ -491,8 +491,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         /* @__PURE__ */ e(
           m,
           {
-            toggleButtonList: x,
-            viewMode: r[i],
+            buttonList: x,
+            viewMode: o[i],
             onChange: (h) => {
               c((a) => ({ ...a, [i]: h }));
             },
@@ -501,7 +501,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         ),
         /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
           "Sélectionné: ",
-          r[i]
+          o[i]
         ] })
       ] }) }, i)) })
     ] });
@@ -517,18 +517,18 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, $ = {
   render: () => {
-    const o = [
+    const r = [
       "small",
       "medium",
       "large"
-    ], [r, c] = u({
+    ], [o, 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: o.map((i) => /* @__PURE__ */ e(l, { size: { xs: 12, md: 4 }, children: /* @__PURE__ */ t(s, { sx: { p: 2 }, children: [
+      /* @__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: [
           "Taille ",
           i
@@ -536,8 +536,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         /* @__PURE__ */ e(
           m,
           {
-            toggleButtonList: x,
-            viewMode: r[i],
+            buttonList: x,
+            viewMode: o[i],
             onChange: (h) => {
               c((a) => ({ ...a, [i]: h }));
             },
@@ -546,7 +546,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         ),
         /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 1 }, children: [
           "Sélectionné: ",
-          r[i]
+          o[i]
         ] })
       ] }) }, i)) })
     ] });
@@ -562,8 +562,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, J = {
   render: () => {
-    const [o, r] = u("grid"), c = V((i) => {
-      r(i);
+    const [r, o] = u("grid"), c = f((i) => {
+      o(i);
     }, []);
     return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
       /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Orientation verticale" }),
@@ -573,8 +573,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: M,
-              viewMode: o,
+              buttonList: M,
+              viewMode: r,
               onChange: c,
               orientation: "vertical",
               size: "medium"
@@ -586,8 +586,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: M,
-              viewMode: o,
+              buttonList: M,
+              viewMode: r,
               onChange: c,
               orientation: "horizontal",
               size: "medium"
@@ -597,7 +597,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       ] }),
       /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
         "Vue actuelle: ",
-        /* @__PURE__ */ e("strong", { children: o })
+        /* @__PURE__ */ e("strong", { children: r })
       ] })
     ] });
   },
@@ -612,8 +612,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, K = {
   render: () => {
-    const [o, r] = u("cards"), c = V((i) => {
-      r(i);
+    const [r, o] = u("cards"), c = f((i) => {
+      o(i);
     }, []);
     return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
       /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Gestion des boutons désactivés" }),
@@ -621,15 +621,15 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         /* @__PURE__ */ e(
           m,
           {
-            toggleButtonList: q,
-            viewMode: o,
+            buttonList: q,
+            viewMode: r,
             onChange: c,
             size: "medium"
           }
         ),
         /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
           "Vue actuelle: ",
-          /* @__PURE__ */ e("strong", { children: o })
+          /* @__PURE__ */ e("strong", { children: r })
         ] }),
         /* @__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: [
@@ -638,7 +638,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             {
               variant: "outlined",
               size: "small",
-              onClick: () => r("list"),
+              onClick: () => o("list"),
               sx: { mr: 1 },
               children: "Sélectionner Liste"
             }
@@ -648,7 +648,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             {
               variant: "outlined",
               size: "small",
-              onClick: () => r("cards"),
+              onClick: () => o("cards"),
               children: "Sélectionner Cartes"
             }
           )
@@ -667,8 +667,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, Q = {
   render: () => {
-    const [o, r] = u("grid"), c = V((i) => {
-      r(i);
+    const [r, o] = u("grid"), c = f((i) => {
+      o(i);
     }, []);
     return /* @__PURE__ */ t(d, { sx: { p: 2 }, children: [
       /* @__PURE__ */ e(n, { variant: "h6", gutterBottom: !0, children: "Plus d'options d'affichage" }),
@@ -676,8 +676,8 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         /* @__PURE__ */ e(
           m,
           {
-            toggleButtonList: M,
-            viewMode: o,
+            buttonList: M,
+            viewMode: r,
             onChange: c,
             colorVariant: "secondary",
             size: "large"
@@ -685,9 +685,9 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
         ),
         /* @__PURE__ */ t(n, { variant: "body2", sx: { mt: 2 }, children: [
           "Vue actuelle: ",
-          /* @__PURE__ */ e("strong", { children: o })
+          /* @__PURE__ */ e("strong", { children: r })
         ] }),
-        /* @__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(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" })
       ] })
     ] });
   },
@@ -702,19 +702,19 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
   }
 }, X = {
   render: () => {
-    const [o, r] = u("cards"), c = V((a) => {
-      console.log("Changement de vue:", a), r(a);
-    }, []), i = V((a) => {
-      console.log("Changement externe:", a), r(a);
+    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);
     }, []);
     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: [
         "Vue actuelle: ",
-        /* @__PURE__ */ e("strong", { children: o })
+        /* @__PURE__ */ e("strong", { children: r })
       ] }),
       /* @__PURE__ */ e(n, { variant: "body2", color: "text.secondary", paragraph: !0, children: (() => {
-        switch (o) {
+        switch (r) {
           case "cards":
             return "Affichage en cartes - Idéal pour une vue d'ensemble visuelle";
           case "table":
@@ -727,12 +727,12 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
       })() }),
       /* @__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__ */ e(n, { variant: "subtitle1", gutterBottom: !0, children: "ButtonGroup Principal" }),
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: x,
-              viewMode: o,
+              buttonList: x,
+              viewMode: r,
               onChange: c,
               size: "medium"
             }
@@ -743,7 +743,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(d, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: x.map((a) => /* @__PURE__ */ t(
             y,
             {
-              variant: o === a.value ? "contained" : "outlined",
+              variant: r === a.value ? "contained" : "outlined",
               onClick: () => i(a.value),
               size: "small",
               startIcon: a.icon,
@@ -778,7 +778,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
             size: "small",
             onClick: () => {
               const v = (x.findIndex(
-                (g) => g.value === o
+                (b) => b.value === r
               ) + 1) % x.length;
               i(x[v].value);
             },
@@ -793,25 +793,25 @@ 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 = {
   render: () => {
-    const o = [
-      { value: "overview", icon: /* @__PURE__ */ e(T, {}) },
-      { value: "detailed", icon: /* @__PURE__ */ e(f, {}) },
-      { value: "analytics", icon: /* @__PURE__ */ e(S, {}) }
-    ], r = [
-      { value: "grid", icon: /* @__PURE__ */ e(S, {}) },
-      { value: "list", icon: /* @__PURE__ */ e(w, {}) },
-      { value: "tree", icon: /* @__PURE__ */ e(B, {}) }
+    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, {}) }
     ], 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");
+      { value: "table", icon: /* @__PURE__ */ e(w, {}) },
+      { value: "raw", icon: /* @__PURE__ */ e(V, {}), 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: [
@@ -820,7 +820,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: o,
+              buttonList: r,
               viewMode: i,
               onChange: (p) => h(p),
               colorVariant: "primary",
@@ -838,7 +838,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: r,
+              buttonList: o,
               viewMode: a,
               onChange: (p) => v(p),
               colorVariant: "secondary",
@@ -855,16 +855,16 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: c,
-              viewMode: g,
-              onChange: (p) => b(p),
+              buttonList: c,
+              viewMode: b,
+              onChange: (p) => g(p),
               colorVariant: "primary",
               size: "large"
             }
           ),
           /* @__PURE__ */ t(n, { 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é)' })
         ] }) })
@@ -887,7 +887,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
               " ",
               /* @__PURE__ */ e("strong", { children: a }),
               " | Données: ",
-              /* @__PURE__ */ e("strong", { children: g })
+              /* @__PURE__ */ e("strong", { children: b })
             ] })
           ]
         }
@@ -927,32 +927,32 @@ 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 = {
   render: () => {
-    const o = {
+    const r = {
       CARDS: "cards",
       TABLE: "table",
       LIST: "list"
-    }, r = (C, L, D = !1) => ({ value: C, icon: L, disabled: D }), c = [
-      r(o.CARDS, /* @__PURE__ */ e(B, {})),
-      r(o.TABLE, /* @__PURE__ */ e(f, {})),
-      r(o.LIST, /* @__PURE__ */ e(w, {}))
+    }, 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, {}))
     ], i = [
-      r("dashboard", /* @__PURE__ */ e(S, {})),
-      r("users", /* @__PURE__ */ e(T, {})),
-      r("settings", /* @__PURE__ */ e(I, {})),
-      r("logs", /* @__PURE__ */ e(w, {}), !0)
+      o("dashboard", /* @__PURE__ */ e(T, {})),
+      o("users", /* @__PURE__ */ e(S, {})),
+      o("settings", /* @__PURE__ */ e(I, {})),
+      o("logs", /* @__PURE__ */ e(V, {}), !0)
       // désactivé
     ], [h, a] = u(
-      o.CARDS
-    ), [v, g] = u("dashboard"), b = V((C) => {
+      r.CARDS
+    ), [v, b] = u("dashboard"), g = f((C) => {
       console.log("Vue commune changée:", C), a(C);
-    }, []), p = V((C) => {
-      console.log("Vue admin changée:", C), g(C);
+    }, []), p = f((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" }),
@@ -972,9 +972,9 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: c,
+              buttonList: c,
               viewMode: h,
-              onChange: b,
+              onChange: g,
               size: "medium"
             }
           ),
@@ -998,7 +998,7 @@ const createViewButton = <T extends string>(value: T, icon: ReactNode) =>
           /* @__PURE__ */ e(
             m,
             {
-              toggleButtonList: i,
+              buttonList: i,
               viewMode: v,
               onChange: p,
               colorVariant: "secondary",
@@ -1073,8 +1073,8 @@ const handleChange = useCallback((value: ViewType) => {
             "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' !
 />`
@@ -1114,7 +1114,7 @@ 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."
       }
     }
   }
@@ -1131,5 +1131,5 @@ export {
   $ as TaillesDifferentes,
   W as TypageGenerique,
   _ as VariantesDecouleurs,
-  G as default
+  F as default
 };