{
  "name": "tabs",
  "type": "registry:component",
  "files": [
    {
      "name": "tabs.component.ts",
      "content": "import { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  input,\n  output,\n  signal,\n  type TemplateRef,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { NgIcon } from '@ng-icons/core';\nimport { twMerge } from 'tailwind-merge';\n\nimport {\n  tabButtonVariants,\n  tabContainerVariants,\n  tabNavVariants,\n  type ZardTabVariants,\n} from '@/shared/components/tabs/tabs.variants';\n\n@Component({\n  selector: 'z-tab',\n  imports: [],\n  template: `\n    <ng-template #content>\n      <ng-content />\n    </ng-template>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class ZardTabComponent {\n  readonly label = input.required<string>();\n  readonly zIcon = input<string | undefined>(undefined);\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n  readonly contentTemplate = viewChild.required<TemplateRef<unknown>>('content');\n}\n\n@Component({\n  selector: 'z-tab-group',\n  imports: [NgTemplateOutlet, NgIcon],\n  template: `\n    <nav\n      [class]=\"navClasses()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-variant]=\"zVariant()\"\n    >\n      @for (tab of tabs(); track $index; let index = $index) {\n        <button\n          type=\"button\"\n          role=\"tab\"\n          [attr.id]=\"'tab-' + index\"\n          [attr.aria-selected]=\"activeTabIndex() === index\"\n          [attr.data-active]=\"activeTabIndex() === index ? '' : null\"\n          [attr.tabindex]=\"activeTabIndex() === index ? 0 : -1\"\n          [attr.aria-controls]=\"'tabpanel-' + index\"\n          [disabled]=\"zDisabled() || tab.zDisabled()\"\n          (click)=\"setActiveTab(index)\"\n          [class]=\"buttonClasses()\"\n        >\n          @if (tab.zIcon()) {\n            <ng-icon [name]=\"tab.zIcon()!\" />\n          }\n          {{ tab.label() }}\n        </button>\n      }\n    </nav>\n\n    <div class=\"flex-1\">\n      @for (tab of tabs(); track $index; let index = $index) {\n        <div\n          role=\"tabpanel\"\n          [attr.id]=\"'tabpanel-' + index\"\n          [attr.aria-labelledby]=\"'tab-' + index\"\n          [attr.tabindex]=\"0\"\n          [hidden]=\"activeTabIndex() !== index\"\n          class=\"focus-visible:ring-primary/50 outline-none focus-visible:ring-2\"\n        >\n          <ng-container [ngTemplateOutlet]=\"tab.contentTemplate()\" />\n        </div>\n      }\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'containerClasses()',\n    '[attr.data-orientation]': 'zOrientation()',\n  },\n})\nexport class ZardTabGroupComponent {\n  private readonly tabComponents = contentChildren(ZardTabComponent, { descendants: true });\n\n  protected readonly tabs = computed(() => this.tabComponents());\n  protected readonly activeTabIndex = signal<number>(0);\n\n  protected readonly zTabChange = output<{\n    index: number;\n    label: string;\n    tab: ZardTabComponent;\n  }>();\n\n  protected readonly zDeselect = output<{\n    index: number;\n    label: string;\n    tab: ZardTabComponent;\n  }>();\n\n  readonly zVariant = input<ZardTabVariants['zVariant']>('default');\n  readonly zOrientation = input<ZardTabVariants['zOrientation']>('horizontal');\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n  readonly class = input<string>('');\n\n  protected setActiveTab(index: number) {\n    const currentTab = this.tabs()[this.activeTabIndex()];\n    if (index !== this.activeTabIndex() && currentTab) {\n      this.zDeselect.emit({\n        index: this.activeTabIndex(),\n        label: currentTab.label(),\n        tab: currentTab,\n      });\n    }\n\n    this.activeTabIndex.set(index);\n    const activeTabComponent = this.tabs()[index];\n    if (activeTabComponent) {\n      this.zTabChange.emit({\n        index,\n        label: activeTabComponent.label(),\n        tab: activeTabComponent,\n      });\n    }\n  }\n\n  protected readonly containerClasses = computed(() =>\n    twMerge(tabContainerVariants({ zOrientation: this.zOrientation() }), this.class()),\n  );\n\n  protected readonly navClasses = computed(() => tabNavVariants({ zVariant: this.zVariant() }));\n\n  protected readonly buttonClasses = computed(() => tabButtonVariants());\n\n  selectTabByIndex(index: number): void {\n    if (index >= 0 && index < this.tabs().length) {\n      this.setActiveTab(index);\n    } else {\n      console.warn(`Index ${index} outside the range of available tabs.`);\n    }\n  }\n}\n"
    },
    {
      "name": "tabs.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const tabContainerVariants = cva('group/tabs flex gap-2', {\n  variants: {\n    zOrientation: {\n      horizontal: 'flex-col',\n      vertical: 'flex-row',\n    },\n  },\n  defaultVariants: {\n    zOrientation: 'horizontal',\n  },\n});\n\nexport const tabNavVariants = cva(\n  [\n    'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground',\n    'group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',\n    'data-[variant=line]:rounded-none',\n  ].join(' '),\n  {\n    variants: {\n      zVariant: {\n        default: 'bg-muted',\n        line: 'gap-1 bg-transparent',\n      },\n    },\n    defaultVariants: {\n      zVariant: 'default',\n    },\n  },\n);\n\nexport const tabButtonVariants = cva(\n  [\n    'relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5',\n    'rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap',\n    'text-foreground/60 transition-all cursor-pointer',\n    'group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start',\n    'hover:text-foreground',\n    'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n    'dark:text-muted-foreground dark:hover:text-foreground',\n    'group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none',\n    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n    'dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',\n    'data-active:bg-background data-active:text-foreground',\n    'dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',\n    'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity',\n    'group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5',\n    'group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5',\n    'group-data-[variant=line]/tabs-list:data-active:after:opacity-100',\n  ].join(' '),\n);\n\nexport type ZardTabVariants = VariantProps<typeof tabContainerVariants> & VariantProps<typeof tabNavVariants>;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from './tabs.component';\nexport * from './tabs.variants';\n"
    }
  ],
  "registryDependencies": [
    "button"
  ],
  "demos": [
    {
      "name": "default.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardCardImports } from '@/shared/components/card/card.imports';\n\nimport { ZardTabComponent, ZardTabGroupComponent } from '../tabs.component';\n\n@Component({\n  selector: 'z-demo-tabs-default',\n  imports: [ZardTabComponent, ZardTabGroupComponent, ZardCardImports],\n  template: `\n    <z-tab-group class=\"w-[400px]\">\n      <z-tab label=\"Overview\">\n        <z-card>\n          <z-card-header>\n            <z-card-title zTitle=\"Overview\" />\n            <z-card-description\n              zDescription=\"View your key metrics and recent project activity. Track progress across all your active projects.\"\n            />\n          </z-card-header>\n          <p z-card-content class=\"text-muted-foreground text-sm\">You have 12 active projects and 3 pending tasks.</p>\n        </z-card>\n      </z-tab>\n      <z-tab label=\"Analytics\">\n        <z-card>\n          <z-card-header>\n            <z-card-title zTitle=\"Analytics\" />\n            <z-card-description\n              zDescription=\"Track performance and user engagement metrics. Monitor trends and identify growth opportunities.\"\n            />\n          </z-card-header>\n          <p z-card-content class=\"text-muted-foreground text-sm\">Page views are up 25% compared to last month.</p>\n        </z-card>\n      </z-tab>\n      <z-tab label=\"Reports\">\n        <z-card>\n          <z-card-header>\n            <z-card-title zTitle=\"Reports\" />\n            <z-card-description\n              zDescription=\"Generate and download your detailed reports. Export data in multiple formats for analysis.\"\n            />\n          </z-card-header>\n          <p z-card-content class=\"text-muted-foreground text-sm\">You have 5 reports ready and available to export.</p>\n        </z-card>\n      </z-tab>\n      <z-tab label=\"Settings\">\n        <z-card>\n          <z-card-header>\n            <z-card-title zTitle=\"Settings\" />\n            <z-card-description\n              zDescription=\"Manage your account preferences and options. Customize your experience to fit your needs.\"\n            />\n          </z-card-header>\n          <p z-card-content class=\"text-muted-foreground text-sm\">Configure notifications, security, and themes.</p>\n        </z-card>\n      </z-tab>\n    </z-tab-group>\n  `,\n})\nexport class ZardDemoTabsDefaultComponent {}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardTabComponent, ZardTabGroupComponent } from '../tabs.component';\n\n@Component({\n  selector: 'z-demo-tabs-disabled',\n  imports: [ZardTabComponent, ZardTabGroupComponent],\n  standalone: true,\n  template: `\n    <div class=\"w-full max-w-md\">\n      <z-tab-group>\n        <z-tab label=\"Home\" />\n        <z-tab label=\"Disabled\" zDisabled />\n      </z-tab-group>\n    </div>\n  `,\n})\nexport class ZardDemoTabsDisabledComponent {}\n"
    },
    {
      "name": "icons.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { provideIcons } from '@ng-icons/core';\nimport { lucideAppWindow, lucideCode } from '@ng-icons/lucide';\n\nimport { ZardTabComponent, ZardTabGroupComponent } from '../tabs.component';\n\n@Component({\n  selector: 'z-demo-tabs-icons',\n  imports: [ZardTabComponent, ZardTabGroupComponent],\n  standalone: true,\n  template: `\n    <div class=\"w-full max-w-md\">\n      <z-tab-group>\n        <z-tab label=\"Preview\" zIcon=\"lucideAppWindow\" />\n        <z-tab label=\"Code\" zIcon=\"lucideCode\" />\n      </z-tab-group>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  viewProviders: [provideIcons({ lucideAppWindow, lucideCode })],\n})\nexport class ZardDemoTabsIconsComponent {}\n"
    },
    {
      "name": "line.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardTabComponent, ZardTabGroupComponent } from '../tabs.component';\n\n@Component({\n  selector: 'z-demo-tabs-line',\n  imports: [ZardTabComponent, ZardTabGroupComponent],\n  standalone: true,\n  template: `\n    <z-tab-group zVariant=\"line\">\n      <z-tab label=\"Overview\" />\n      <z-tab label=\"Analytics\" />\n      <z-tab label=\"Reports\" />\n    </z-tab-group>\n  `,\n})\nexport class ZardDemoTabsLineComponent {}\n"
    },
    {
      "name": "vertical.ts",
      "content": "import { Component } from '@angular/core';\n\nimport { ZardTabComponent, ZardTabGroupComponent } from '../tabs.component';\n\n@Component({\n  selector: 'z-demo-tabs-vertical',\n  imports: [ZardTabComponent, ZardTabGroupComponent],\n  standalone: true,\n  template: `\n    <div class=\"flex w-full max-w-md flex-col gap-6\">\n      <z-tab-group zOrientation=\"vertical\">\n        <z-tab label=\"Account\" />\n        <z-tab label=\"Password\" />\n        <z-tab label=\"Notifications\" />\n      </z-tab-group>\n\n      <z-tab-group zOrientation=\"vertical\" zVariant=\"line\">\n        <z-tab label=\"Account\" />\n        <z-tab label=\"Password\" />\n        <z-tab label=\"Notifications\" />\n      </z-tab-group>\n    </div>\n  `,\n})\nexport class ZardDemoTabsVerticalComponent {}\n"
    }
  ]
}