{
  "name": "accordion",
  "type": "registry:component",
  "files": [
    {
      "name": "accordion.component.ts",
      "content": "import {\n  type AfterContentInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport type { ClassValue } from 'clsx';\n\nimport { ZardAccordionItemComponent } from '@/shared/components/accordion/accordion-item.component';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-accordion, [z-accordion]',\n  template: `\n    <ng-content />\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  exportAs: 'zAccordion',\n})\nexport class ZardAccordionComponent implements AfterContentInit {\n  readonly items = contentChildren(ZardAccordionItemComponent);\n\n  readonly class = input<ClassValue>('');\n  readonly zType = input<'single' | 'multiple'>('single');\n  readonly zCollapsible = input<boolean>(true);\n  readonly zDefaultValue = input<string | string[]>('');\n\n  private readonly defaultValue = computed(() => {\n    const defaultValue = this.zDefaultValue();\n    if (typeof defaultValue === 'string') {\n      return defaultValue ? [defaultValue] : [];\n    } else if (this.zType() === 'single') {\n      throw new Error('Array of default values is supported only for multiple zType');\n    }\n    return defaultValue;\n  });\n\n  protected readonly classes = computed(() => mergeClasses(this.class()));\n\n  ngAfterContentInit(): void {\n    for (const item of this.items()) {\n      item.accordion = this;\n      item.isOpen.set(this.defaultValue().includes(item.zValue()));\n    }\n  }\n\n  toggleItem(selectedItem: ZardAccordionItemComponent): void {\n    if (this.zType() === 'single') {\n      this.toggleForSingleType(selectedItem);\n    } else {\n      this.toggleForMultipleType(selectedItem);\n    }\n  }\n\n  private toggleForSingleType(selectedItem: ZardAccordionItemComponent): void {\n    const isClosing = selectedItem.isOpen();\n\n    if (isClosing && !this.zCollapsible()) {\n      return;\n    }\n\n    for (const item of this.items()) {\n      const shouldBeOpen = item === selectedItem ? !item.isOpen() : false;\n      item.isOpen.set(shouldBeOpen);\n    }\n  }\n\n  private toggleForMultipleType(selectedItem: ZardAccordionItemComponent): void {\n    const isClosing = selectedItem.isOpen();\n    if (isClosing && !this.zCollapsible() && this.countOpenItems() <= 1) {\n      return;\n    }\n\n    selectedItem.isOpen.update(v => !v);\n  }\n\n  private countOpenItems(): number {\n    return this.items().reduce((counter, item) => (item.isOpen() ? ++counter : counter), 0);\n  }\n}\n"
    },
    {
      "name": "accordion-item.component.ts",
      "content": "import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideChevronDown } from '@ng-icons/lucide';\nimport type { ClassValue } from 'clsx';\n\nimport type { ZardAccordionComponent } from '@/shared/components/accordion/accordion.component';\nimport {\n  accordionContentVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n} from '@/shared/components/accordion/accordion.variants';\nimport { mergeClasses } from '@/shared/utils/merge-classes';\n\n@Component({\n  selector: 'z-accordion-item',\n  imports: [NgIcon],\n  template: `\n    <button\n      type=\"button\"\n      [attr.aria-controls]=\"'content-' + zValue()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [id]=\"'accordion-' + zValue()\"\n      [disabled]=\"zDisabled()\"\n      [class]=\"triggerClasses()\"\n      (click)=\"toggle()\"\n    >\n      {{ zTitle() }}\n      <ng-icon\n        name=\"lucideChevronDown\"\n        class=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\"\n        [class]=\"isOpen() ? 'rotate-180' : ''\"\n      />\n    </button>\n\n    @if (!zDisabled()) {\n      <div\n        role=\"region\"\n        [attr.aria-labelledby]=\"'accordion-' + zValue()\"\n        [attr.data-state]=\"isOpen() ? 'open' : 'closed'\"\n        [id]=\"'content-' + zValue()\"\n        [class]=\"contentClasses()\"\n      >\n        <div class=\"overflow-hidden\">\n          <div class=\"pt-0 pb-4\">\n            <ng-content />\n          </div>\n        </div>\n      </div>\n    }\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  viewProviders: [provideIcons({ lucideChevronDown })],\n  host: {\n    '[class]': 'itemClasses()',\n    '[attr.data-state]': \"isOpen() ? 'open' : 'closed'\",\n    '[attr.data-disabled]': 'zDisabled()',\n    '[attr.aria-disabled]': 'zDisabled()',\n    '[attr.disabled]': 'zDisabled()',\n  },\n  exportAs: 'zAccordionItem',\n})\nexport class ZardAccordionItemComponent {\n  readonly zTitle = input<string>('');\n  readonly zValue = input<string>('');\n  readonly class = input<ClassValue>('');\n  readonly zDisabled = input(false, { transform: booleanAttribute });\n\n  accordion!: ZardAccordionComponent;\n  readonly isOpen = signal(false);\n\n  protected readonly itemClasses = computed(() => mergeClasses(accordionItemVariants(), this.class()));\n  protected readonly triggerClasses = computed(() => mergeClasses(accordionTriggerVariants()));\n  protected readonly contentClasses = computed(() => mergeClasses(accordionContentVariants({ isOpen: this.isOpen() })));\n\n  toggle(): void {\n    if (this.accordion) {\n      this.accordion.toggleItem(this);\n    } else {\n      this.isOpen.update(v => !v);\n    }\n  }\n}\n"
    },
    {
      "name": "accordion.variants.ts",
      "content": "import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const accordionItemVariants = cva('border-b last:border-b-0 flex flex-1 flex-col', {\n  variants: {},\n  defaultVariants: {},\n});\n\nexport const accordionTriggerVariants = cva(\n  'cursor-pointer group flex flex-1 items-start justify-between gap-4 rounded-md py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 w-full',\n  {\n    variants: {},\n    defaultVariants: {},\n  },\n);\n\nexport const accordionContentVariants = cva('grid text-sm transition-all', {\n  variants: {\n    isOpen: {\n      true: 'grid-rows-[1fr]',\n      false: 'grid-rows-[0fr]',\n    },\n  },\n  defaultVariants: {\n    isOpen: false,\n  },\n});\n\nexport type ZardAccordionItemVariants = VariantProps<typeof accordionItemVariants>;\nexport type ZardAccordionTriggerVariants = VariantProps<typeof accordionTriggerVariants>;\nexport type ZardAccordionContentVariants = VariantProps<typeof accordionContentVariants>;\n"
    },
    {
      "name": "accordion.imports.ts",
      "content": "import { ZardAccordionItemComponent } from '@/shared/components/accordion/accordion-item.component';\nimport { ZardAccordionComponent } from '@/shared/components/accordion/accordion.component';\n\nexport const ZardAccordionImports = [ZardAccordionComponent, ZardAccordionItemComponent] as const;\n"
    },
    {
      "name": "index.ts",
      "content": "export * from '@/shared/components/accordion/accordion.component';\nexport * from '@/shared/components/accordion/accordion-item.component';\nexport * from '@/shared/components/accordion/accordion.variants';\nexport * from '@/shared/components/accordion/accordion.imports';\n"
    }
  ],
  "demos": [
    {
      "name": "basic.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAccordionImports } from '@/shared/components/accordion/accordion.imports';\n\n@Component({\n  selector: 'z-demo-accordion-basic',\n  imports: [ZardAccordionImports],\n  template: `\n    <div z-accordion zDefaultValue=\"item-1\" zType=\"single\" class=\"max-w-sm\">\n      <z-accordion-item zValue=\"item-1\" zTitle=\"How do I reset my password?\">\n        Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your\n        password. The link will expire in 24 hours.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"item-2\" zTitle=\"Can I change my subscription plan?\">\n        Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in\n        your next billing cycle.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"item-3\" zTitle=\"What payment methods do you accept?\">\n        We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our\n        payment partners.\n      </z-accordion-item>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAccordionBasicComponent {}\n"
    },
    {
      "name": "borders.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAccordionImports } from '@/shared/components/accordion/accordion.imports';\n\n@Component({\n  selector: 'z-demo-accordion-borders',\n  imports: [ZardAccordionImports],\n  template: `\n    <div z-accordion zDefaultValue=\"billing\" zType=\"single\" class=\"max-w-sm rounded-lg border\">\n      <z-accordion-item zValue=\"billing\" zTitle=\"How does billing work?\" class=\"px-4\">\n        We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can\n        cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"security\" zTitle=\"Is my data secure?\" class=\"px-4\">\n        Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data\n        is encrypted at rest and in transit using industry-standard protocols.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"integration\" zTitle=\"What integrations do you support?\" class=\"px-4\">\n        We integrate with 500+ popular tools including Slack, Zapier, Salesforce, HubSpot, and more. You can also build\n        custom integrations using our REST API and webhooks.\n      </z-accordion-item>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAccordionBordersComponent {}\n"
    },
    {
      "name": "cards.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAccordionImports } from '@/shared/components/accordion/accordion.imports';\nimport { ZardCardImports } from '@/shared/components/card/card.imports';\n\n@Component({\n  selector: 'z-demo-accordion-card',\n  imports: [ZardAccordionImports, ZardCardImports],\n  template: `\n    <z-card\n      zTitle=\"Subscription & Billing\"\n      zDescription=\"Common questions about your account, plans, payments and cancellations.\"\n      class=\"w-full max-w-sm\"\n    >\n      <div z-card-header>\n        <z-card-title zTitle=\"Subscription & Billing\" />\n        <z-card-description zDescription=\"Common questions about your account, plans, payments and cancellations.\" />\n      </div>\n      <div z-card-content>\n        <z-accordion zDefaultValue=\"plans\" zType=\"single\">\n          <z-accordion-item zValue=\"plans\" zTitle=\"What subscription plans do you offer?\">\n            We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month).\n            Each plan includes increasing storage limits, API access, priority support, and team collaboration features.\n          </z-accordion-item>\n\n          <z-accordion-item zValue=\"billing\" zTitle=\"How does billing work?\">\n            Billing occurs automatically at the start of each billing cycle. We accept all major credit cards, PayPal,\n            and ACH transfers for enterprise customers. You'll receive an invoice via email after each payment.\n          </z-accordion-item>\n\n          <z-accordion-item zValue=\"cancel\" zTitle=\"How do I cancel my subscription?\">\n            You can cancel your subscription anytime from your account settings. There are no cancellation fees or\n            penalties. Your access will continue until the end of your current billing period.\n          </z-accordion-item>\n        </z-accordion>\n      </div>\n    </z-card>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAccordionCardComponent {}\n"
    },
    {
      "name": "disabled.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAccordionImports } from '@/shared/components/accordion/accordion.imports';\n\n@Component({\n  selector: 'z-demo-accordion-disabled',\n  imports: [ZardAccordionImports],\n  template: `\n    <div z-accordion zType=\"single\" class=\"max-w-sm\">\n      <z-accordion-item zValue=\"item-1\" zTitle=\"Can I access my account history?\">\n        Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your\n        password. The link will expire in 24 hours.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"item-2\" zTitle=\"Can I change my subscription plan?\" [zDisabled]=\"true\">\n        Yes, you can upgrade or downgrade your plan at any time from your account settings. Changes will be reflected in\n        your next billing cycle.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"item-3\" zTitle=\"What payment methods do you accept?\">\n        We accept all major credit cards, PayPal, and bank transfers. All payments are processed securely through our\n        payment partners.\n      </z-accordion-item>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAccordionDisabledComponent {}\n"
    },
    {
      "name": "multiple.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAccordionImports } from '@/shared/components/accordion/accordion.imports';\n\n@Component({\n  selector: 'z-demo-accordion-multiple',\n  imports: [ZardAccordionImports],\n  template: `\n    <div z-accordion zType=\"multiple\" class=\"max-w-sm\">\n      <z-accordion-item zValue=\"notifications\" zTitle=\"Notification Settings\">\n        Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile\n        devices.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"privacy\" zTitle=\"Privacy & Security\">\n        Control your privacy settings and security preferences. Enable two-factor authentication, manage connected\n        devices, review active sessions, and configure data sharing preferences. You can also download your data or\n        delete your account.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"billing\" zTitle=\"Billing & Subscription\">\n        View your current plan, payment history, and upcoming invoices. Update your payment method, change your\n        subscription tier, or cancel your subscription.\n      </z-accordion-item>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAccordionMultipleComponent {}\n"
    },
    {
      "name": "preview.ts",
      "content": "import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { ZardAccordionImports } from '@/shared/components/accordion/accordion.imports';\n\n@Component({\n  selector: 'z-demo-accordion-preview',\n  imports: [ZardAccordionImports],\n  template: `\n    <div z-accordion zDefaultValue=\"returns\" zType=\"single\" class=\"max-w-sm\">\n      <z-accordion-item zValue=\"shipping\" zTitle=\"What are your shipping options?\">\n        We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"returns\" zTitle=\"What is your return policy?\">\n        Returns accepted within 30 days. Items must be unused and in original packaging. Refunds processed within 5-7\n        business days.\n      </z-accordion-item>\n\n      <z-accordion-item zValue=\"support\" zTitle=\"How can I contact customer support?\">\n        Reach us via email, live chat, or phone. We respond within 24 hours during business days.\n      </z-accordion-item>\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ZardDemoAccordionPreviewComponent {}\n"
    }
  ]
}