@cgi-learning-hub/ui 1.6.0 → 1.7.0-dev.1750752562

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

@@ -0,0 +1,1296 @@
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { c as S } from "../../createSvgIcon-B1E6Wo8z.js";
+import { useState as u, useCallback as w } from "react";
+import p from "../ButtonGroup/ButtonGroup.es.js";
+import { B as m } from "../../Box-BI4osO9v.js";
+import { T as t } from "../../Typography-Dy8r_tT2.js";
+import { G as l } from "../../Grid-DFk-4jnZ.js";
+import { B as y } from "../../Button-DDV5EfwJ.js";
+import { P as s } from "../../Paper-IQckggbn.js";
+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"), 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"), x = S(/* @__PURE__ */ e("path", {
+  d: "M3 13h2v-2H3zm0 4h2v-2H3zm0-8h2V7H3zm4 4h14v-2H7zm0 4h14v-2H7zM7 7v2h14V7z"
+}), "List"), V = S(/* @__PURE__ */ e("path", {
+  d: "M21 8H3V4h18zm0 2H3v4h18zm0 6H3v4h18z"
+}), "TableRows"), T = S(/* @__PURE__ */ e("path", {
+  d: "M2 4v7h20V4zm8 16h12v-7H10zm-8 0h6v-7H2z"
+}), "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: p,
+  argTypes: {
+    buttonList: {
+      description: "**[Requis]** Liste des boutons à afficher dans le ButtonGroup.",
+      control: "object",
+      table: {
+        required: !0,
+        type: { summary: "readonly ButtonItem[]" }
+      }
+    },
+    viewMode: {
+      description: "**[Requis]** Valeur actuellement sélectionnée.",
+      control: "text",
+      table: {
+        required: !0,
+        type: { summary: "T[number]['value']" }
+      }
+    },
+    onChange: {
+      description: "**[Requis]** Fonction appelée lorsqu'un bouton est sélectionné.",
+      table: {
+        required: !0,
+        type: {
+          summary: "(value: T[number]['value']) => void"
+        }
+      }
+    },
+    colorVariant: {
+      description: "**[Optionnel]** Variante de couleur des boutons.",
+      control: "select",
+      options: ["primary", "secondary"],
+      defaultValue: "primary",
+      table: {
+        required: !1,
+        type: { summary: "ColorVariant" },
+        defaultValue: { summary: "primary" }
+      }
+    },
+    size: {
+      description: "**[Optionnel]** Taille des boutons.",
+      control: "select",
+      options: ["small", "medium", "large"],
+      defaultValue: "small",
+      table: {
+        required: !1,
+        type: { summary: "string" },
+        defaultValue: { summary: "small" }
+      }
+    },
+    orientation: {
+      description: "**[Optionnel]** Orientation du groupe de boutons.",
+      control: "select",
+      options: ["horizontal", "vertical"],
+      defaultValue: "horizontal",
+      table: {
+        required: !1,
+        type: { summary: "string" },
+        defaultValue: { summary: "horizontal" }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+## 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 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.
+
+### 🎯 Utilisation recommandée pour éviter les types 'any'
+
+\`\`\`typescript
+// ✅ CORRECT : Définition avec 'as const' pour l'inférence de type
+const viewButtons = [
+  { value: "cards", icon: <ViewModuleIcon /> },
+  { value: "table", icon: <TableRowsIcon /> },
+  { value: "list", icon: <ListIcon /> }
+] as const; // ← IMPORTANT : ne pas oublier 'as const'
+
+// ✅ CORRECT : Typage explicite pour le state et le handler
+type ViewType = (typeof viewButtons)[number]["value"]; // "cards" | "table" | "list"
+
+const [currentView, setCurrentView] = useState<ViewType>("cards");
+
+const handleViewChange = useCallback((value: ViewType) => {
+  console.log(\`Vue sélectionnée: \${value}\`); // ← value est typé correctement
+  setCurrentView(value);
+}, []);
+
+<ButtonGroup 
+  buttonList={viewButtons}
+  viewMode={currentView}
+  onChange={handleViewChange} // ← Pas d'erreur 'any' !
+/>
+\`\`\`
+
+### ❌ À éviter : patterns qui causent des types 'any'
+
+\`\`\`typescript
+// ❌ INCORRECT : Sans 'as const'
+const viewButtons = [
+  { value: "cards", icon: <ViewModuleIcon /> },
+  { value: "table", icon: <TableRowsIcon /> }
+]; // ← types inférés comme 'string' au lieu de littéraux
+
+// ❌ INCORRECT : Handler sans typage explicite
+const handleViewChange = (value) => { // ← 'value' aura le type 'any'
+  setCurrentView(value);
+};
+\`\`\`
+
+### 🛠️ Personnalisation
+
+- \`colorVariant\`: Choix entre les palettes "primary" et "secondary"
+- \`size\`: Contrôle la taille des boutons ("small", "medium", "large")
+- \`orientation\`: Affichage horizontal ou vertical du groupe de boutons
+- \`disabled\`: Possibilité de désactiver individuellement certains boutons
+
+### 📋 Structure des données
+
+Le composant attend un tableau d'objets \`ButtonItem\` typé de manière générique :
+
+\`\`\`typescript
+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 ButtonItem<string>[]> = {
+  buttonList: T;
+  viewMode: T[number]["value"];           // Type inféré automatiquement
+  onChange: (value: T[number]["value"]) => void; // Type inféré automatiquement
+  // ... autres props
+}
+\`\`\`
+
+### 🎉 Avantages du typage générique
+
+1. **Auto-complétion** : IDE suggère automatiquement les valeurs possibles
+2. **Vérification à la compilation** : Erreurs détectées avant l'exécution
+3. **Refactoring sûr** : Renommer une valeur met à jour toutes les références
+4. **Documentation vivante** : Les types servent de documentation
+
+### 💡 Conseils pour une utilisation optimale
+
+1. **Utilisez des types helper** pour éviter la répétition :
+\`\`\`typescript
+type ViewConfig = typeof viewButtons;
+type ViewType = ViewConfig[number]["value"];
+\`\`\`
+
+2. **Créez des constantes réutilisables** :
+\`\`\`typescript
+export const VIEW_MODES = {
+  CARDS: "cards",
+  TABLE: "table", 
+  LIST: "list"
+} as const;
+
+const viewButtons = [
+  { value: VIEW_MODES.CARDS, icon: <ViewModuleIcon /> },
+  // ...
+] as const;
+\`\`\`
+
+3. **Utilisez des factory functions** pour des configurations complexes :
+\`\`\`typescript
+const createViewButton = <T extends string>(value: T, icon: ReactNode) => 
+  ({ value, icon } as const);
+\`\`\`
+        `
+      }
+    }
+  }
+}, 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 [o, r] = u("cards"), c = w((i) => {
+      console.log(`Vue sélectionnée: ${i}`), r(i);
+    }, []);
+    return /* @__PURE__ */ n(m, { sx: { p: 2 }, children: [
+      /* @__PURE__ */ e(t, { variant: "h6", gutterBottom: !0, children: "Sélecteur de vue standard" }),
+      /* @__PURE__ */ e(
+        p,
+        {
+          buttonList: f,
+          viewMode: o,
+          onChange: c
+        }
+      ),
+      /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+        "Vue actuelle: ",
+        /* @__PURE__ */ e("strong", { children: o })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Sélecteur de vue basique permettant de basculer entre trois modes d'affichage : cartes, tableau et liste."
+      }
+    }
+  }
+}, j = {
+  render: () => {
+    const [o, r] = u("table"), [c, i] = u(
+      "primary"
+    ), [h, a] = u("small"), [v, b] = u(
+      "horizontal"
+    );
+    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,
+              {
+                size: "small",
+                variant: c === "primary" ? "contained" : "outlined",
+                onClick: () => i("primary"),
+                children: "Primary"
+              }
+            ),
+            /* @__PURE__ */ e(
+              y,
+              {
+                size: "small",
+                variant: c === "secondary" ? "contained" : "outlined",
+                onClick: () => i("secondary"),
+                children: "Secondary"
+              }
+            )
+          ] })
+        ] }),
+        /* @__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 === g ? "contained" : "outlined",
+              onClick: () => a(g),
+              children: g
+            },
+            g
+          )) })
+        ] }),
+        /* @__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: () => b("horizontal"),
+                children: "Horizontal"
+              }
+            ),
+            /* @__PURE__ */ e(
+              y,
+              {
+                size: "small",
+                variant: v === "vertical" ? "contained" : "outlined",
+                onClick: () => b("vertical"),
+                children: "Vertical"
+              }
+            )
+          ] })
+        ] }),
+        /* @__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(
+        p,
+        {
+          buttonList: f,
+          viewMode: o,
+          onChange: (g) => {
+            console.log(`Vue sélectionnée: ${g}`), r(g);
+          },
+          colorVariant: c,
+          size: h,
+          orientation: v
+        }
+      ) })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    // Désactiver les contrôles automatiques
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Interface de démonstration permettant de tester toutes les options de personnalisation disponibles : couleur, taille et orientation des boutons."
+      }
+    }
+  }
+}, N = {
+  render: () => {
+    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(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__ */ 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(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Activation/Désactivation simple"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: o,
+              viewMode: i,
+              onChange: (d) => {
+                console.log("Simple:", d), h(d);
+              }
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "État: ",
+            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: "Statut système" }),
+          /* @__PURE__ */ e(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Gestion d'états métier"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: r,
+              viewMode: a,
+              onChange: (d) => {
+                console.log("Status:", d), v(d);
+              },
+              colorVariant: "secondary"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Statut: ",
+            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: "Mode d'édition" }),
+          /* @__PURE__ */ e(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Interface utilisateur adaptative"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: c,
+              viewMode: b,
+              onChange: (d) => {
+                console.log("Mode:", d), g(d);
+              },
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Mode: ",
+            b
+          ] })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ n(
+        s,
+        {
+          sx: {
+            p: 2,
+            mt: 3,
+            backgroundColor: "info.light",
+            color: "info.contrastText"
+          },
+          children: [
+            /* @__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." })
+          ]
+        }
+      )
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Démonstration de la polyvalence du composant avec différents ensembles d'options : mode binaire, statuts système et modes d'édition."
+      }
+    }
+  }
+}, _ = {
+  render: () => {
+    const o = ["primary", "secondary"], [r, c] = u({
+      primary: "cards",
+      secondary: "table"
+    });
+    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(
+          p,
+          {
+            buttonList: f,
+            viewMode: r[i],
+            onChange: (h) => {
+              c((a) => ({ ...a, [i]: h }));
+            },
+            colorVariant: i
+          }
+        ),
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+          "Sélectionné: ",
+          r[i]
+        ] })
+      ] }) }, i)) })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Démonstration des deux variantes de couleurs disponibles : primary et secondary."
+      }
+    }
+  }
+}, $ = {
+  render: () => {
+    const o = [
+      "small",
+      "medium",
+      "large"
+    ], [r, c] = u({
+      small: "cards",
+      medium: "table",
+      large: "list"
+    });
+    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(
+          p,
+          {
+            buttonList: f,
+            viewMode: r[i],
+            onChange: (h) => {
+              c((a) => ({ ...a, [i]: h }));
+            },
+            size: i
+          }
+        ),
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+          "Sélectionné: ",
+          r[i]
+        ] })
+      ] }) }, i)) })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Démonstration des trois tailles disponibles : small, medium et large."
+      }
+    }
+  }
+}, J = {
+  render: () => {
+    const [o, r] = u("grid"), c = w((i) => {
+      r(i);
+    }, []);
+    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(
+            p,
+            {
+              buttonList: I,
+              viewMode: o,
+              onChange: c,
+              orientation: "vertical",
+              size: "medium"
+            }
+          )
+        ] }) }),
+        /* @__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(
+            p,
+            {
+              buttonList: I,
+              viewMode: o,
+              onChange: c,
+              orientation: "horizontal",
+              size: "medium"
+            }
+          )
+        ] }) })
+      ] }),
+      /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+        "Vue actuelle: ",
+        /* @__PURE__ */ e("strong", { children: o })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Démonstration de l'orientation verticale comparée à l'orientation horizontale avec plus d'options."
+      }
+    }
+  }
+}, K = {
+  render: () => {
+    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__ */ 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(
+          p,
+          {
+            buttonList: D,
+            viewMode: o,
+            onChange: c,
+            size: "medium"
+          }
+        ),
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+          "Vue actuelle: ",
+          /* @__PURE__ */ e("strong", { children: o })
+        ] }),
+        /* @__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: () => r("list"),
+              sx: { mr: 1 },
+              children: "Sélectionner Liste"
+            }
+          ),
+          /* @__PURE__ */ e(
+            y,
+            {
+              variant: "outlined",
+              size: "small",
+              onClick: () => r("cards"),
+              children: "Sélectionner Cartes"
+            }
+          )
+        ] })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Exemple montrant comment désactiver individuellement certains boutons en utilisant la propriété `disabled` dans les éléments du tableau."
+      }
+    }
+  }
+}, X = {
+  render: () => {
+    const [o, r] = u("grid"), c = w((i) => {
+      r(i);
+    }, []);
+    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(
+          p,
+          {
+            buttonList: I,
+            viewMode: o,
+            onChange: c,
+            colorVariant: "secondary",
+            size: "large"
+          }
+        ),
+        /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+          "Vue actuelle: ",
+          /* @__PURE__ */ e("strong", { children: o })
+        ] }),
+        /* @__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" })
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        story: "Exemple avec davantage d'options pour montrer la flexibilité du composant avec plusieurs modes d'affichage."
+      }
+    }
+  }
+}, Y = {
+  render: () => {
+    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__ */ 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(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":
+            return "Affichage en tableau - Parfait pour comparer des données";
+          case "list":
+            return "Affichage en liste - Optimal pour parcourir rapidement";
+          default:
+            return "Mode d'affichage inconnu";
+        }
+      })() }),
+      /* @__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(
+            p,
+            {
+              buttonList: f,
+              viewMode: o,
+              onChange: c,
+              size: "medium"
+            }
+          )
+        ] }) }),
+        /* @__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",
+              onClick: () => i(a.value),
+              size: "small",
+              startIcon: a.icon,
+              children: [
+                "Mode ",
+                a.value
+              ]
+            },
+            a.value
+          )) })
+        ] }) })
+      ] }),
+      /* @__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,
+          {
+            variant: "text",
+            size: "small",
+            onClick: () => {
+              const a = ["cards", "table", "list"], v = a[Math.floor(Math.random() * a.length)];
+              i(v);
+            },
+            sx: { mr: 1 },
+            children: "Vue aléatoire"
+          }
+        ),
+        /* @__PURE__ */ e(
+          y,
+          {
+            variant: "text",
+            size: "small",
+            onClick: () => {
+              const v = (f.findIndex(
+                (b) => b.value === o
+              ) + 1) % f.length;
+              i(f[v].value);
+            },
+            children: "Vue suivante"
+          }
+        )
+      ] })
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        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."
+      }
+    }
+  }
+}, Z = {
+  render: () => {
+    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(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(
+            p,
+            {
+              buttonList: o,
+              viewMode: i,
+              onChange: (d) => h(d),
+              colorVariant: "primary",
+              size: "small",
+              orientation: "vertical"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+            "Mode: ",
+            i
+          ] })
+        ] }) }),
+        /* @__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(
+            p,
+            {
+              buttonList: r,
+              viewMode: a,
+              onChange: (d) => v(d),
+              colorVariant: "secondary",
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+            "Affichage: ",
+            a
+          ] })
+        ] }) }),
+        /* @__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(
+            p,
+            {
+              buttonList: c,
+              viewMode: b,
+              onChange: (d) => g(d),
+              colorVariant: "primary",
+              size: "large"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 2 }, children: [
+            "Format: ",
+            b
+          ] }),
+          /* @__PURE__ */ e(t, { variant: "caption", color: "text.secondary", children: '(Le mode "raw" est temporairement désactivé)' })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ n(
+        s,
+        {
+          sx: {
+            p: 2,
+            mt: 3,
+            backgroundColor: "info.light",
+            color: "info.contrastText"
+          },
+          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: b })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ n(
+        s,
+        {
+          sx: {
+            p: 2,
+            mt: 2,
+            backgroundColor: "warning.light",
+            color: "warning.contrastText"
+          },
+          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"',
+              /* @__PURE__ */ e("br", {}),
+              /* @__PURE__ */ e("code", { children: "FileType:" }),
+              " ",
+              '"grid" | "list" | "tree"',
+              /* @__PURE__ */ e("br", {}),
+              /* @__PURE__ */ e("code", { children: "DataType:" }),
+              " ",
+              '"chart" | "table" | "raw"'
+            ] }),
+            /* @__PURE__ */ e(t, { variant: "caption", sx: { mt: 1, display: "block" }, children: "Chaque callback reçoit exactement le bon type, aucune configuration supplémentaire requise !" })
+          ]
+        }
+      )
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        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."
+      }
+    }
+  }
+}, ee = {
+  render: () => {
+    const o = {
+      CARDS: "cards",
+      TABLE: "table",
+      LIST: "list"
+    }, 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 = [
+      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(
+      o.CARDS
+    ), [v, b] = u("dashboard"), g = w((C) => {
+      console.log("Vue commune changée:", C), a(C);
+    }, []), d = w((C) => {
+      console.log("Vue admin changée:", C), b(C);
+    }, []);
+    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(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Utilisation de constantes et factory functions"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: c,
+              viewMode: h,
+              onChange: g,
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Sélection: ",
+            h
+          ] })
+        ] }) }),
+        /* @__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(
+            t,
+            {
+              variant: "caption",
+              color: "text.secondary",
+              display: "block",
+              sx: { mb: 2 },
+              children: "Types spécialisés avec bouton désactivé"
+            }
+          ),
+          /* @__PURE__ */ e(
+            p,
+            {
+              buttonList: i,
+              viewMode: v,
+              onChange: d,
+              colorVariant: "secondary",
+              size: "medium"
+            }
+          ),
+          /* @__PURE__ */ n(t, { variant: "body2", sx: { mt: 1 }, children: [
+            "Admin: ",
+            v
+          ] })
+        ] }) })
+      ] }),
+      /* @__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",
+            {
+              style: { margin: 0, fontSize: "0.875rem", overflow: "auto" },
+              children: `const VIEW_MODES = {
+  CARDS: "cards",
+  TABLE: "table", 
+  LIST: "list"
+} as const;
+
+const buttons = [
+  { value: VIEW_MODES.CARDS, icon: <Icon /> }
+] as const;`
+            }
+          ) })
+        ] }),
+        /* @__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",
+            {
+              style: { margin: 0, fontSize: "0.875rem", overflow: "auto" },
+              children: `const createViewButton = <T extends string>(
+  value: T, 
+  icon: ReactNode, 
+  disabled = false
+) => ({ value, icon, disabled } as const);
+
+const buttons = [
+  createViewButton("cards", <CardsIcon />),
+  createViewButton("table", <TableIcon />, true)
+] as const;`
+            }
+          ) })
+        ] }),
+        /* @__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",
+            {
+              style: { margin: 0, fontSize: "0.875rem", overflow: "auto" },
+              children: `type ViewType = (typeof buttons)[number]["value"];
+
+const [view, setView] = useState<ViewType>("cards");
+
+const handleChange = useCallback((value: ViewType) => {
+  // value est automatiquement typé !
+  setView(value);
+}, []);`
+            }
+          ) })
+        ] }),
+        /* @__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: `<ButtonGroup
+  buttonList={buttons}
+  viewMode={view}
+  onChange={handleChange} // ← Pas de type 'any' !
+/>`
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ n(
+        s,
+        {
+          sx: {
+            p: 2,
+            mt: 2,
+            backgroundColor: "error.light",
+            color: "error.contrastText"
+          },
+          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",
+              /* @__PURE__ */ e("br", {}),
+              "• Utiliser des handlers sans typage explicite",
+              /* @__PURE__ */ e("br", {}),
+              "• Définir des valeurs en dur sans constantes",
+              /* @__PURE__ */ e("br", {}),
+              "• Ignorer les warnings TypeScript"
+            ] })
+          ]
+        }
+      )
+    ] });
+  },
+  parameters: {
+    controls: { disable: !0 },
+    actions: { disable: !0 },
+    docs: {
+      description: {
+        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 {
+  Q as AvecBoutonsDesactives,
+  K as AvecTexteOptionnel,
+  ee as BonnesPratiques,
+  Z as CasUtilisationComplexe,
+  j as Controlable,
+  W as Default,
+  X as OptionsEtendues,
+  J as OrientationVerticale,
+  Y as Synchronisation,
+  $ as TaillesDifferentes,
+  N as TypageGenerique,
+  _ as VariantesDecouleurs,
+  F as default
+};