"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="https://nice2dev.com/schemas/component-doc-v1.json",e="NiceButtonGroup",o="Button Group",n="1.0.0",i="stable",s="buttons",c="layout",r="Visually groups adjacent buttons together with connected borders and shared styling. Useful for related actions or toggle button sets.",a="1.0.0",u=["web","mobile","desktop"],l=["button","group","toolbar","toggle","segmented"],d=[{name:"children",type:"React.ReactNode",required:!0,description:"Buttons to render inside the group."},{name:"className",type:"string",required:!1,description:"Additional CSS class names."},{name:"style",type:"React.CSSProperties",required:!1,description:"Inline styles."}],p=[],g=[{name:"default",description:"Button elements to group together",acceptedElements:["NiceButton","NiceIconButton","NiceDropDownButton"]}],m=[{name:"--nice-btn-group-gap",default:"0",description:"Gap between buttons (usually 0 for connected look)"},{name:"--nice-btn-group-radius",default:"var(--nice-border-radius)",description:"Border radius on outer corners"}],B=[],b={aria:['role="group"'],keyboard:[{key:"Tab",action:"Moves focus through buttons in the group"}],notes:'Uses role="group" to indicate related buttons to assistive technologies.'},N=[{title:"Basic Button Group",description:"Group of related action buttons",code:`<NiceButtonGroup>
  <NiceButton>Left</NiceButton>
  <NiceButton>Middle</NiceButton>
  <NiceButton>Right</NiceButton>
</NiceButtonGroup>`,language:"tsx"},{title:"Toggle Group",description:"Button group used as toggle/segmented control",code:`<NiceButtonGroup>
  <NiceButton variant={view === 'list' ? 'primary' : 'secondary'} onClick={() => setView('list')}>
    <ListIcon /> List
  </NiceButton>
  <NiceButton variant={view === 'grid' ? 'primary' : 'secondary'} onClick={() => setView('grid')}>
    <GridIcon /> Grid
  </NiceButton>
</NiceButtonGroup>`,language:"tsx"},{title:"Icon Button Group",description:"Group of icon buttons for a toolbar",code:`<NiceButtonGroup>
  <NiceIconButton icon={<BoldIcon />} aria-label="Bold" />
  <NiceIconButton icon={<ItalicIcon />} aria-label="Italic" />
  <NiceIconButton icon={<UnderlineIcon />} aria-label="Underline" />
</NiceButtonGroup>`,language:"tsx"}],y=[{name:"NiceButton",relationship:"child",description:"Individual button component"},{name:"NiceIconButton",relationship:"child",description:"Icon-only button"},{name:"NiceSegmentedControl",relationship:"alternative",description:"Dedicated segmented control component"}],h={$schema:t,name:e,displayName:o,version:n,status:i,category:s,subcategory:c,package:"@nicetoDev/ui",description:r,since:a,platforms:u,keywords:l,props:d,events:p,slots:g,cssVariables:m,i18n:B,accessibility:b,examples:N,related:y};exports.$schema=t;exports.accessibility=b;exports.category=s;exports.cssVariables=m;exports.default=h;exports.description=r;exports.displayName=o;exports.events=p;exports.examples=N;exports.i18n=B;exports.keywords=l;exports.name=e;exports.platforms=u;exports.props=d;exports.related=y;exports.since=a;exports.slots=g;exports.status=i;exports.subcategory=c;exports.version=n;
