{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "faq-categorized-tabs",
  "title": "FAQ — Categorized Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/faq-categorized-tabs/faq-categorized-tabs.component.ts",
      "content": "// Question set grouped behind category tabs, each panel holding its own accordion with a\n// count badge. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport {\n  UiAccordionComponent,\n  UiAccordionContentComponent,\n  UiAccordionItemComponent,\n  UiAccordionTriggerComponent,\n} from '@/ui/accordion/accordion.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiTabsComponent,\n  UiTabsContentComponent,\n  UiTabsListComponent,\n  UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\ninterface FaqEntry {\n  q: string\n  a: string\n}\n\ninterface FaqCategory {\n  id: string\n  label: string\n  entries: FaqEntry[]\n}\n\nconst categories: FaqCategory[] = [\n  {\n    id: 'security',\n    label: 'Security',\n    entries: [\n      {\n        q: 'Where is our data stored?',\n        a: 'Definitions and query metadata sit in your chosen region. Warehouse rows are never copied out.',\n      },\n      {\n        q: 'Are you SOC 2 audited?',\n        a: 'Type II, audited annually. The report and the subprocessor list are on the trust centre.',\n      },\n      { q: 'Can we bring our own keys?', a: 'Yes, on the enterprise plan, with rotation handled through your KMS.' },\n    ],\n  },\n  {\n    id: 'billing',\n    label: 'Billing',\n    entries: [\n      {\n        q: 'How is usage counted?',\n        a: 'By query, not by seat. Materialised reads are not billed twice within their freshness window.',\n      },\n      {\n        q: 'Can we cap spend?',\n        a: 'Per-team query budgets are enforced at run time, so a runaway dashboard cannot outspend its ceiling.',\n      },\n      { q: 'Do you offer annual terms?', a: 'Yes, with a discount and an invoiced option above a threshold.' },\n    ],\n  },\n  {\n    id: 'setup',\n    label: 'Setup',\n    entries: [\n      {\n        q: 'What do you need from us?',\n        a: 'A read-only role, your identity provider, and an hour with whoever owns the warehouse.',\n      },\n      {\n        q: 'How long until first value?',\n        a: 'Most teams publish a first certified metric on day one and finish the rollout in five weeks.',\n      },\n    ],\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-faq-categorized-tabs, [ui-faq-categorized-tabs]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    UiAccordionComponent,\n    UiAccordionContentComponent,\n    UiAccordionItemComponent,\n    UiAccordionTriggerComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiTabsComponent,\n    UiTabsContentComponent,\n    UiTabsListComponent,\n    UiTabsTriggerComponent,\n  ],\n  template: `\n    <section data-slot=\"faq-categorized-tabs\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div class=\"max-w-2xl\">\n          <span ui-badge variant=\"secondary\">Support</span>\n          <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Answers by topic</h2>\n          <p class=\"text-muted-foreground mt-3 text-lg\">\n            Grouped rather than listed, because one flat list of thirty questions is a list nobody reads.\n          </p>\n        </div>\n\n        <ui-tabs [value]=\"activeTab()\" (valueChange)=\"activeTab.set($event)\" class=\"mt-10\">\n          <ui-tabs-list variant=\"pill\" class=\"flex-nowrap overflow-x-auto\">\n            @for (category of categories; track category.id) {\n              <button ui-tabs-trigger [value]=\"category.id\" variant=\"pill\">\n                {{ category.label }}\n                <span class=\"text-muted-foreground ml-1.5 font-mono text-xs\">{{ category.entries.length }}</span>\n              </button>\n            }\n          </ui-tabs-list>\n\n          @for (category of categories; track category.id) {\n            <ui-tabs-content [value]=\"category.id\" class=\"mt-6\">\n              <ui-accordion type=\"single\" collapsible class=\"w-full\">\n                @for (entry of category.entries; track entry.q) {\n                  <ui-accordion-item [value]=\"entry.q\">\n                    <button ui-accordion-trigger class=\"text-left font-medium\">{{ entry.q }}</button>\n                    <ui-accordion-content class=\"text-muted-foreground leading-relaxed\">{{\n                      entry.a\n                    }}</ui-accordion-content>\n                  </ui-accordion-item>\n                }\n              </ui-accordion>\n            </ui-tabs-content>\n          }\n        </ui-tabs>\n\n        <button ui-button variant=\"ghost\" class=\"mt-8\">Browse the full help centre</button>\n      </div>\n    </section>\n  `,\n})\nexport class UiFaqCategorizedTabsComponent {\n  protected readonly categories = categories\n\n  @Input('class') className?: string\n  @Input() set defaultTab(v: string) {\n    if (v) this.activeTab.set(v)\n  }\n\n  readonly activeTab = signal(categories[0].id)\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/faq-categorized-tabs/faq-categorized-tabs.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/faq-categorized-tabs/index.ts",
      "content": "export { UiFaqCategorizedTabsComponent } from './faq-categorized-tabs.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/faq-categorized-tabs/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/accordion.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/tabs.json"
  ],
  "description": "Question set grouped behind category tabs, each panel holding its own accordion with a count badge, for support pages where one flat list would run past thirty entries.",
  "categories": [
    "marketing"
  ]
}