{
  "name": "button-group",
  "type": "registry:component",
  "files": [
    {
      "name": "button-group.component.ts",
      "content": "import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  Directive,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { type ClassValue } from 'clsx';\n\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\nimport {\n  buttonGroupDividerVariants,\n  buttonGroupTextVariants,\n  buttonGroupVariants,\n  type ZardButtonGroupVariants,\n} from './button-group.variants';\nimport { ZardSeparatorComponent } from '../separator/separator.component';\nimport { type ZardSeparatorVariants } from '../separator/separator.variants';\n\n@Component({\n  selector: 'z-button-group',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    role: 'group',\n    'data-slot': 'button-group',\n    '[class]': 'classes()',\n    '[attr.data-orientation]': 'zOrientation()',\n    '[attr.aria-orientation]': 'zOrientation()',\n  },\n  exportAs: 'zButtonGroup',\n})\nexport class ZardButtonGroupComponent {\n  readonly zOrientation = input<Required<ZardButtonGroupVariants>['zOrientation']>('horizontal');\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() =>\n    mergeClasses(\n      buttonGroupVariants({\n        zOrientation: this.zOrientation(),\n      }),\n      this.class(),\n    ),\n  );\n}\n\n@Component({\n  selector: 'z-button-group-divider',\n  imports: [ZardSeparatorComponent],\n  template: `\n    <z-separator [class]=\"classes()\" aria-hidden=\"true\" [zOrientation]=\"orientation()\" />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'contents',\n    'data-slot': 'button-group-separator',\n  },\n  exportAs: 'zButtonGroupDivider',\n})\nexport class ZardButtonGroupDividerComponent {\n  readonly zOrientation = input<ZardSeparatorVariants['zOrientation']>(null);\n  readonly class = input<ClassValue>('');\n\n  private readonly parent = inject(ZardButtonGroupComponent, {\n    optional: true,\n    host: true,\n  });\n\n  protected readonly orientation = computed(() => {\n    if (!this.parent || typeof this.zOrientation() === 'string') {\n      return this.zOrientation();\n    }\n\n    return this.parent.zOrientation() === 'vertical' ? 'horizontal' : 'vertical';\n  });\n\n  protected readonly classes = computed(() =>\n    mergeClasses(\n      buttonGroupDividerVariants({\n        zOrientation: this.orientation(),\n      }),\n      this.class(),\n    ),\n  );\n}\n\n@Directive({\n  selector: '[z-button-group-text]',\n  host: {\n    'data-slot': 'button-group-text',\n    '[class]': 'classes()',\n  },\n  exportAs: 'zButtonGroupText',\n})\nexport class ZardButtonGroupTextDirective {\n  readonly class = input<ClassValue>('');\n\n  protected readonly classes = computed(() => mergeClasses(buttonGroupTextVariants(), this.class()));\n}\n"
    },
    {
      "name": "button-group.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const buttonGroupVariants = cva(\n  'group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 [&>input]:flex-1',\n  {\n    variants: {\n      zOrientation: {\n        horizontal:\n          '[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>z-select:not(:first-child)>button]:rounded-l-none [&>z-select:not(:first-child)>button]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>z-select:not(:last-child)>button]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!',\n        vertical:\n          'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>z-select:not(:first-child)>button]:rounded-t-none [&>z-select:not(:first-child)>button]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>z-select:not(:last-child)>button]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!',\n      },\n    },\n    defaultVariants: {\n      zOrientation: 'horizontal',\n    },\n  },\n);\nexport type ZardButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;\n\nexport const buttonGroupDividerVariants = cva(\n  'bg-input relative self-stretch grow-0 shrink-0 pointer-events-none select-none',\n  {\n    variants: {\n      zOrientation: {\n        horizontal: 'mx-px w-auto',\n        vertical: 'my-px h-auto',\n      },\n    },\n  },\n);\n\nexport const buttonGroupTextVariants = cva(\n  \"bg-muted flex items-center gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n);\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './button-group.component';\nexport * from './button-group.variants';\n"
    }
  ],
  "registryDependencies": [
    "separator"
  ],
  "demos": [
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  lucideArchive,\n  lucideArrowLeft,\n  lucideCalendarPlus,\n  lucideCheck,\n  lucideChevronRight,\n  lucideClock,\n  lucideEllipsis,\n  lucideListFilterPlus,\n  lucideTag,\n  lucideTrash,\n} from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardMenuImports } from '@/shared/components/menu/menu.imports';\nimport { ZardSeparatorComponent } from '@/shared/components/separator';\n\n@Component({\n  selector: 'z-demo-button-group-default',\n  imports: [ZardButtonGroupComponent, ZardButtonComponent, NgIcon, ZardMenuImports, ZardSeparatorComponent],\n  template: `\n    <z-button-group>\n      <z-button-group class=\"hidden sm:flex\">\n        <button type=\"button\" z-button zType=\"outline\" aria-label=\"Go Back\">\n          <ng-icon name=\"lucideArrowLeft\" />\n        </button>\n      </z-button-group>\n\n      <z-button-group>\n        <button type=\"button\" z-button zType=\"outline\">Archive</button>\n        <button type=\"button\" z-button zType=\"outline\">Report</button>\n      </z-button-group>\n\n      <z-button-group>\n        <button type=\"button\" z-button zType=\"outline\">Snooze</button>\n        <button type=\"button\" z-button zType=\"outline\" z-menu [zMenuTriggerFor]=\"menu\">\n          <ng-icon name=\"lucideEllipsis\" />\n\n          <ng-template #menu>\n            <div z-menu-content class=\"w-48\">\n              <button type=\"button\" z-menu-item>\n                <ng-icon name=\"lucideCheck\" />\n                Mark as Read\n              </button>\n              <button type=\"button\" z-menu-item>\n                <ng-icon name=\"lucideArchive\" />\n                Archive\n              </button>\n\n              <z-separator class=\"my-2\" />\n\n              <button type=\"button\" z-menu-item>\n                <ng-icon name=\"lucideClock\" />\n                Snooze\n              </button>\n              <button type=\"button\" z-menu-item>\n                <ng-icon name=\"lucideCalendarPlus\" />\n                Add to Calendar\n              </button>\n              <button type=\"button\" z-menu-item>\n                <ng-icon name=\"lucideListFilterPlus\" />\n                Add to List\n              </button>\n              <button\n                type=\"button\"\n                z-menu-item\n                z-menu\n                [zMenuTriggerFor]=\"subMenu\"\n                zPlacement=\"rightTop\"\n                class=\"justify-between\"\n              >\n                <div class=\"flex items-center\">\n                  <ng-icon name=\"tag\" class=\"mr-1\" />\n                  Label as\n                </div>\n                <ng-icon name=\"lucideChevronRight\" />\n\n                <ng-template #subMenu>\n                  <div z-menu-content class=\"w-48\">\n                    <button type=\"button\" z-menu-item>Personal</button>\n                    <button type=\"button\" z-menu-item>Work</button>\n                    <button type=\"button\" z-menu-item>Other</button>\n                  </div>\n                </ng-template>\n              </button>\n\n              <z-separator class=\"my-2\" />\n\n              <button type=\"button\" z-menu-item class=\"text-red-500\">\n                <ng-icon name=\"lucideTrash\" />\n                Trash\n              </button>\n            </div>\n          </ng-template>\n        </button>\n      </z-button-group>\n    </z-button-group>\n  `,\n  viewProviders: [\n    provideIcons({\n      lucideArrowLeft,\n      lucideEllipsis,\n      lucideCheck,\n      lucideArchive,\n      lucideClock,\n      lucideCalendarPlus,\n      lucideListFilterPlus,\n      lucideTag,\n      lucideChevronRight,\n      lucideTrash,\n    }),\n  ],\n})\nexport class ZardDemoButtonGroupDefaultComponent {}\n"
    },
    {
      "name": "divider.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardButtonComponent } from '../../button/button.component';\nimport { ZardButtonGroupComponent, ZardButtonGroupDividerComponent } from '../button-group.component';\n\n@Component({\n  selector: 'z-demo-button-group-divider',\n  imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardButtonGroupDividerComponent],\n  template: `\n    <z-button-group>\n      <button z-button zSize=\"sm\" zType=\"secondary\">Copy</button>\n      <z-button-group-divider />\n      <button z-button zSize=\"sm\" zType=\"secondary\">Paste</button>\n    </z-button-group>\n  `,\n})\nexport class ZardDemoButtonGroupDividerComponent {}\n"
    },
    {
      "name": "dropdown.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n  lucideCheck,\n  lucideChevronDown,\n  lucideCopy,\n  lucideShare,\n  lucideTrash,\n  lucideTriangleAlert,\n  lucideUserRoundX,\n  lucideVolumeOff,\n} from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardDropdownImports } from '@/shared/components/dropdown/dropdown.imports';\nimport { ZardSeparatorComponent } from '@/shared/components/separator/separator.component';\n\n@Component({\n  selector: 'z-demo-button-group-dropdown',\n  imports: [ZardButtonGroupComponent, ZardButtonComponent, ZardSeparatorComponent, ...ZardDropdownImports, NgIcon],\n  template: `\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"outline\">Follow</button>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"icon\"\n        z-dropdown\n        [zDropdownMenu]=\"menu\"\n        aria-label=\"More options\"\n      >\n        <ng-icon name=\"lucideChevronDown\" />\n      </button>\n      <z-dropdown-menu-content #menu=\"zDropdownMenuContent\" class=\"w-44\">\n        <z-dropdown-menu-item>\n          <ng-icon name=\"lucideVolumeOff\" />\n          Mute Conversation\n        </z-dropdown-menu-item>\n        <z-dropdown-menu-item>\n          <ng-icon name=\"lucideCheck\" />\n          Mark as Read\n        </z-dropdown-menu-item>\n        <z-dropdown-menu-item>\n          <ng-icon name=\"lucideTriangleAlert\" />\n          Report Conversation\n        </z-dropdown-menu-item>\n        <z-dropdown-menu-item>\n          <ng-icon name=\"lucideUserRoundX\" />\n          Block User\n        </z-dropdown-menu-item>\n        <z-dropdown-menu-item>\n          <ng-icon name=\"lucideShare\" />\n          Share Conversation\n        </z-dropdown-menu-item>\n        <z-dropdown-menu-item>\n          <ng-icon name=\"lucideCopy\" />\n          Copy Conversation\n        </z-dropdown-menu-item>\n        <z-separator class=\"my-1\" />\n        <z-dropdown-menu-item variant=\"destructive\">\n          <ng-icon name=\"lucideTrash\" />\n          Delete Conversation\n        </z-dropdown-menu-item>\n      </z-dropdown-menu-content>\n    </z-button-group>\n  `,\n  viewProviders: [\n    provideIcons({\n      lucideChevronDown,\n      lucideVolumeOff,\n      lucideCheck,\n      lucideTriangleAlert,\n      lucideUserRoundX,\n      lucideShare,\n      lucideCopy,\n      lucideTrash,\n    }),\n  ],\n})\nexport class ZardDemoButtonGroupDropdownComponent {}\n"
    },
    {
      "name": "input-group.ts",
      "content": "import { Component, signal } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideAudioLines, lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardTooltipDirective } from '@/shared/components/tooltip/tooltip';\n\n@Component({\n  selector: 'z-demo-button-group-input-group',\n  imports: [\n    ZardButtonGroupComponent,\n    ZardButtonComponent,\n    ZardInputComponent,\n    ...ZardInputGroupImports,\n    ZardTooltipDirective,\n    NgIcon,\n  ],\n  template: `\n    <z-button-group class=\"[--radius:9999rem]\">\n      <z-button-group>\n        <button type=\"button\" z-button zType=\"outline\" zSize=\"icon\" aria-label=\"Add\">\n          <ng-icon name=\"lucidePlus\" />\n        </button>\n      </z-button-group>\n      <z-button-group>\n        <z-input-group>\n          <input\n            z-input\n            [placeholder]=\"voiceEnabled() ? 'Record and send audio...' : 'Send a message...'\"\n            [disabled]=\"voiceEnabled()\"\n          />\n          <z-input-group-addon zAlign=\"inline-end\">\n            <button\n              z-input-group-button\n              zTooltip=\"Voice Mode\"\n              aria-label=\"Voice Mode\"\n              [attr.aria-pressed]=\"voiceEnabled()\"\n              [attr.data-active]=\"voiceEnabled() ? '' : null\"\n              class=\"data-[active]:bg-orange-100 data-[active]:text-orange-700 dark:data-[active]:bg-orange-800 dark:data-[active]:text-orange-100\"\n              (click)=\"toggleVoice()\"\n            >\n              <ng-icon name=\"lucideAudioLines\" />\n            </button>\n          </z-input-group-addon>\n        </z-input-group>\n      </z-button-group>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucidePlus, lucideAudioLines })],\n})\nexport class ZardDemoButtonGroupInputGroupComponent {\n  protected readonly voiceEnabled = signal(false);\n\n  protected toggleVoice(): void {\n    this.voiceEnabled.update(value => !value);\n  }\n}\n"
    },
    {
      "name": "input.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideSearch } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardInputComponent } from '@/shared/components/input';\n\n@Component({\n  selector: 'z-demo-button-group-input',\n  imports: [ZardButtonGroupComponent, ZardButtonComponent, NgIcon, ZardInputComponent],\n  template: `\n    <z-button-group>\n      <input z-input placeholder=\"Search...\" />\n      <button type=\"button\" z-button zType=\"outline\"><ng-icon name=\"lucideSearch\" /></button>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucideSearch })],\n})\nexport class ZardDemoButtonGroupInputComponent {}\n"
    },
    {
      "name": "nested.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideAudioLines, lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardInputGroupImports } from '@/shared/components/input-group/input-group.imports';\nimport { ZardTooltipDirective } from '@/shared/components/tooltip/tooltip';\n\n@Component({\n  selector: 'z-demo-button-group-nested',\n  imports: [\n    ZardButtonGroupComponent,\n    ZardButtonComponent,\n    ZardInputComponent,\n    ...ZardInputGroupImports,\n    ZardTooltipDirective,\n    NgIcon,\n  ],\n  template: `\n    <z-button-group>\n      <z-button-group>\n        <button type=\"button\" z-button zType=\"outline\" zSize=\"icon\" aria-label=\"Add\">\n          <ng-icon name=\"lucidePlus\" />\n        </button>\n      </z-button-group>\n      <z-button-group>\n        <z-input-group>\n          <input z-input placeholder=\"Send a message...\" />\n          <z-input-group-addon zAlign=\"inline-end\" zTooltip=\"Voice Mode\">\n            <ng-icon name=\"lucideAudioLines\" />\n          </z-input-group-addon>\n        </z-input-group>\n      </z-button-group>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucidePlus, lucideAudioLines })],\n})\nexport class ZardDemoButtonGroupNestedComponent {}\n"
    },
    {
      "name": "orientation.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideMinus, lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\n\n@Component({\n  selector: 'z-demo-button-group-orientation',\n  imports: [ZardButtonGroupComponent, ZardButtonComponent, NgIcon],\n  template: `\n    <z-button-group zOrientation=\"vertical\">\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"icon\" aria-label=\"Add\">\n        <ng-icon name=\"lucidePlus\" />\n      </button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"icon\" aria-label=\"Remove\">\n        <ng-icon name=\"lucideMinus\" />\n      </button>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucidePlus, lucideMinus })],\n})\nexport class ZardDemoButtonGroupOrientationComponent {}\n"
    },
    {
      "name": "popover.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideBot, lucideChevronDown } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardFieldImports } from '@/shared/components/field/field.imports';\nimport { ZardPopoverComponent, ZardPopoverDirective } from '@/shared/components/popover/popover.component';\nimport { ZardTextareaComponent } from '@/shared/components/textarea/textarea.component';\n\n@Component({\n  selector: 'z-demo-button-group-popover',\n  imports: [\n    ZardButtonGroupComponent,\n    ZardButtonComponent,\n    ZardPopoverComponent,\n    ZardPopoverDirective,\n    ZardTextareaComponent,\n    ...ZardFieldImports,\n    NgIcon,\n  ],\n  template: `\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"outline\">\n        <ng-icon name=\"lucideBot\" />\n        Copilot\n      </button>\n      <button\n        type=\"button\"\n        z-button\n        zType=\"outline\"\n        zSize=\"icon\"\n        zPopover\n        [zContent]=\"popoverContent\"\n        zAlign=\"end\"\n        aria-label=\"Open Popover\"\n      >\n        <ng-icon name=\"lucideChevronDown\" />\n      </button>\n      <ng-template #popoverContent>\n        <z-popover class=\"w-80 rounded-xl p-0 text-sm\">\n          <div class=\"border-b px-4 py-3\">\n            <p class=\"font-medium\">Start a new task with Copilot</p>\n            <p class=\"text-muted-foreground text-sm\">Describe your task in natural language.</p>\n          </div>\n          <div z-field class=\"p-4\">\n            <label z-field-label for=\"task\" class=\"sr-only\">Task Description</label>\n            <textarea z-textarea id=\"task\" placeholder=\"I need to...\" class=\"resize-none\"></textarea>\n            <p z-field-description>Copilot will open a pull request for review.</p>\n          </div>\n        </z-popover>\n      </ng-template>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucideBot, lucideChevronDown })],\n})\nexport class ZardDemoButtonGroupPopoverComponent {}\n"
    },
    {
      "name": "select.ts",
      "content": "import { Component, signal } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideArrowRight } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\nimport { ZardInputComponent } from '@/shared/components/input/input.component';\nimport { ZardSelectItemComponent } from '@/shared/components/select/select-item.component';\nimport { ZardSelectComponent } from '@/shared/components/select/select.component';\n\n@Component({\n  selector: 'z-demo-button-group-select',\n  imports: [\n    ZardButtonGroupComponent,\n    ZardButtonComponent,\n    ZardInputComponent,\n    ZardSelectComponent,\n    ZardSelectItemComponent,\n    NgIcon,\n  ],\n  template: `\n    <z-button-group>\n      <z-button-group>\n        <z-select [(zValue)]=\"currency\" [zLabel]=\"currency()\" class=\"w-fit [&_button]:font-mono\">\n          @for (cur of CURRENCIES; track cur.value) {\n            <z-select-item [zValue]=\"cur.value\">\n              {{ cur.value }}\n              <span class=\"text-muted-foreground\">{{ cur.label }}</span>\n            </z-select-item>\n          }\n        </z-select>\n        <input z-input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </z-button-group>\n      <z-button-group>\n        <button type=\"button\" z-button zType=\"outline\" zSize=\"icon\" aria-label=\"Send\">\n          <ng-icon name=\"lucideArrowRight\" />\n        </button>\n      </z-button-group>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucideArrowRight })],\n})\nexport class ZardDemoButtonGroupSelectComponent {\n  protected readonly CURRENCIES = [\n    { value: '$', label: 'US Dollar' },\n    { value: '€', label: 'Euro' },\n    { value: '£', label: 'British Pound' },\n  ];\n\n  protected readonly currency = signal('$');\n}\n"
    },
    {
      "name": "size.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport { ZardButtonGroupComponent } from '@/shared/components/button-group/button-group.component';\n\n@Component({\n  selector: 'z-demo-button-group-size',\n  imports: [ZardButtonGroupComponent, ZardButtonComponent, NgIcon],\n  template: `\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Small</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Button</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"sm\">Group</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"icon-sm\" aria-label=\"Add\">\n        <ng-icon name=\"lucidePlus\" />\n      </button>\n    </z-button-group>\n\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"outline\">Default</button>\n      <button type=\"button\" z-button zType=\"outline\">Button</button>\n      <button type=\"button\" z-button zType=\"outline\">Group</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"icon\" aria-label=\"Add\">\n        <ng-icon name=\"lucidePlus\" />\n      </button>\n    </z-button-group>\n\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"lg\">Large</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"lg\">Button</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"lg\">Group</button>\n      <button type=\"button\" z-button zType=\"outline\" zSize=\"icon-lg\" aria-label=\"Add\">\n        <ng-icon name=\"lucidePlus\" />\n      </button>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucidePlus })],\n  host: {\n    class: 'flex flex-col items-start gap-8',\n  },\n})\nexport class ZardDemoButtonGroupSizeComponent {}\n"
    },
    {
      "name": "split.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucidePlus } from '@ng-icons/lucide';\n\nimport { ZardButtonComponent } from '@/shared/components/button/button.component';\nimport {\n  ZardButtonGroupComponent,\n  ZardButtonGroupDividerComponent,\n} from '@/shared/components/button-group/button-group.component';\n\n@Component({\n  selector: 'z-demo-button-group-split',\n  imports: [ZardButtonGroupComponent, ZardButtonGroupDividerComponent, ZardButtonComponent, NgIcon],\n  template: `\n    <z-button-group>\n      <button type=\"button\" z-button zType=\"secondary\">Button</button>\n      <z-button-group-divider />\n      <button type=\"button\" z-button zType=\"secondary\" zSize=\"icon\" aria-label=\"Add\">\n        <ng-icon name=\"lucidePlus\" />\n      </button>\n    </z-button-group>\n  `,\n  viewProviders: [provideIcons({ lucidePlus })],\n})\nexport class ZardDemoButtonGroupSplitComponent {}\n"
    }
  ]
}