const t={PrimoStep:{button1:{name:"Annulla",classname:"btn btn-link"},button2:{name:"Salva Bozza",classname:"btn btn-primary"},button3:{name:"Continua",classname:"btn btn-primary"}},AltriStep:{button1:{name:"Indietro",classname:"btn btn-primary pull-left"},button2:{name:"Annulla",classname:"btn btn-link"},button3:{name:"Salva Bozza",classname:"btn btn-primary"},button4:{name:"Continua",classname:"btn btn-primary"}},StepSalvataggio:{button1:{name:"Indietro",classname:"btn btn-primary pull-left"},button2:{name:"Annulla",classname:"btn btn-link"},button3:{name:"Salva Bozza",classname:"btn btn-primary disabled"},button4:{name:"Continua",classname:"btn btn-primary"}},UltimoStep:{button1:{name:"Indietro",classname:"btn btn-primary pull-left"},button2:{name:"Annulla",classname:"btn btn-link"},button3:{name:"Termina",classname:"btn btn-primary btn-success"},button4:{name:"Salva Bozza",classname:"btn btn-primary"}}},f=({gruppoAzioni:a})=>{const l=[];let n=a.replace(/\s/g,"");for(let e=1;e<=Object.keys(t[n]).length;e++){const i=document.createElement("button"),r=`button${e}`;i.textContent=`${t[n][r].name}`;let v=t[n][r].classname.includes("link");i.type=v?"reset":"submit",i.className=`${t[n][r].classname}`,l.push(i);let S=t[n][r].classname.includes("disabled");if(i.disabled=S,e==1&&a!=="Primo Step"){var c=document.createElement("i");c.className="fa left fa-angle-left",i.insertBefore(c,i.firstChild)}if(e==Object.keys(t[n]).length&&a!=="Ultimo Step"){var u=document.createElement("i");u.className="fa fa-angle-right right",i.appendChild(u)}}const g=l.slice(0,Object.keys(t[n]).length-2),z=l.slice(Object.keys(t[n]).length-2),p=document.createElement("div");g.forEach(e=>{p.appendChild(e)});const o=document.createElement("div");if(o.className="pull-right",a==="Step Salvataggio"){const e=document.createElement("span");e.className="feedbackInline";const i=document.createElement("strong");i.textContent="Bozza salvata alle 10.40",e.appendChild(i),o.appendChild(e)}return z.forEach(e=>{o.appendChild(e)}),p.appendChild(o),p},C=`**PANORAMICA**  
- **Descrizione generale**: Il componente Button Group consente di raggruppare più pulsanti in un'unica unità visiva e funzionale, facilitando l'organizzazione di azioni correlate.
- **Funzionalità principali**: Permette di creare gruppi di pulsanti con stili coerenti, supportando diverse varianti e dimensioni per adattarsi al contesto d'uso.

**CASO D'USO**  
- **Scenari di utilizzo principali**: Utilizzato quando è necessario presentare all'utente una serie di azioni correlate, come in toolbar, gruppi di opzioni o controlli di form.
- **Contesto di implementazione consigliato**: Ideale in interfacce dove più azioni devono essere presentate in modo compatto e organizzato.
- **Posizionamento ideale nell'interfaccia**: Può essere posizionato in toolbar, moduli o sezioni della pagina dove sono richieste azioni multiple.

**CARATTERISTICHE PRINCIPALI**  
- **Funzionalità chiave**:
  - Raggruppamento di pulsanti: Consente di unire più pulsanti in un unico gruppo con bordi condivisi.
  - Supporto per varianti: Offre diverse varianti di stile per adattarsi al tema dell'applicazione.
  - Dimensioni personalizzabili: Supporta diverse dimensioni per adattarsi a vari contesti.
- **Aspetti tecnici rilevanti**: Implementato utilizzando elementi HTML standard con classi CSS per la gestione dello stile e del layout.
- **Caratteristiche di accessibilità**: Progettato per essere navigabile tramite tastiera e compatibile con screen reader, garantendo un'esperienza inclusiva.

**VARIANTI**  
- **Elenco e descrizione delle varianti disponibili**:
  - Varianti di stile: Primario, secondario, successo, pericolo, avviso, informazione, luce, scuro.
  - Varianti di dimensione: Piccolo, medio, grande.
- **Casi d'uso specifici per ogni variante**:
  - Stili diversi per indicare l'importanza o la natura dell'azione.
  - Dimensioni diverse per adattarsi a spazi specifici nell'interfaccia.

**PROPRIETÀ**  
- **Proprietà configurabili**:
  - \`variant\`: Specifica lo stile del gruppo di pulsanti.
  - \`size\`: Definisce la dimensione dei pulsanti nel gruppo.
  - \`vertical\`: Dispone i pulsanti in verticale se impostato su \`true\`.
- **Parametri disponibili**: Possibilità di aggiungere attributi personalizzati per estendere la funzionalità.
- **Attributi per l'accessibilità**: Utilizzo di \`aria-label\` o \`aria-labelledby\` per descrivere il gruppo di pulsanti.

**DETTAGLI DI IMPLEMENTAZIONE**  
- **Struttura HTML**: Il gruppo di pulsanti è rappresentato da un elemento contenitore (\`<div>\`) con una classe specifica, all'interno del quale sono presenti elementi \`<button>\` o \`<a>\` con classi per i pulsanti.
- **Stile e CSS utilizzati**: Utilizza classi CSS per gestire il layout e l'aspetto dei pulsanti, garantendo coerenza con il design system.
- **Variabili CSS disponibili e loro funzione**:
  - \`--btn-group-margin\`: Margine tra i pulsanti nel gruppo.
  - \`--btn-group-border-radius\`: Raggio dei bordi dei pulsanti nel gruppo.
  - \`--btn-group-box-shadow\`: Ombreggiatura applicata al gruppo di pulsanti.

**BEST PRACTICES**  
- **Raccomandazioni d'uso**:
  - Utilizzare per raggruppare azioni correlate, mantenendo l'interfaccia pulita e organizzata.
  - Assicurarsi che le etichette dei pulsanti siano chiare e descrittive.
- **Linee guida implementative**: Evitare di inserire troppi pulsanti in un singolo gruppo per non sovraccaricare l'utente.
- **Pratiche da evitare**: Evitare di mescolare pulsanti con funzioni contrastanti nello stesso gruppo.

**LINEE GUIDA PER L'ACCESSIBILITÀ**  
- **Requisiti di accessibilità**: Assicurarsi che il gruppo di pulsanti sia navigabile tramite tastiera e che ogni pulsante abbia un'etichetta descrittiva.
- **Supporto tastiera**: I pulsanti devono essere accessibili tramite la navigazione con il tasto Tab e attivabili con la barra spaziatrice o Invio.
- **Configurazione screen reader**: Utilizzare attributi ARIA per fornire informazioni sul contesto e la funzione del gruppo di pulsanti.

**COMPONENTI CORRELATI**  
- **Componenti associati**: Pulsante, Toolbar, Dropdown.
- **Relazioni con altri elementi**: Spesso utilizzato insieme a toolbar o all'interno di moduli per fornire opzioni di azione multiple.
`,h="N.D.",I={title:"Components/Tasti e link/Button Group",tags:["autodocs"],render:a=>f(a),argTypes:{gruppoAzioni:{control:{type:"select"},options:["Primo Step","Altri Step","Step Salvataggio","Ultimo Step"],description:"Actions group.",table:{defaultValue:{summary:"Primo Step"}}}},parameters:{docs:{description:{component:C},mdxPage:h}}},s={args:{gruppoAzioni:"Primo Step"}};var d,m,b;s.parameters={...s.parameters,docs:{...(d=s.parameters)==null?void 0:d.docs,source:{originalSource:`{
  args: {
    gruppoAzioni: "Primo Step"
  }
}`,...(b=(m=s.parameters)==null?void 0:m.docs)==null?void 0:b.source}}};const A=["ButtonGroup"];export{s as ButtonGroup,A as __namedExportsOrder,I as default};
