{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "faq-categorized-tabs",
  "title": "FAQ — Categorized Tabs",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/faq-categorized-tabs/FaqCategorizedTabs.vue",
      "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nconst categories = [\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</script>\n\n<template>\n  <section data-slot=\"faq-categorized-tabs\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">Support</Badge>\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      <Tabs :default-value=\"categories[0].id\" class=\"mt-10\">\n        <TabsList variant=\"pill\" class=\"flex-nowrap overflow-x-auto\">\n          <TabsTrigger v-for=\"category in categories\" :key=\"category.id\" :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          </TabsTrigger>\n        </TabsList>\n\n        <TabsContent v-for=\"category in categories\" :key=\"category.id\" :value=\"category.id\" class=\"mt-6\">\n          <Accordion type=\"single\" collapsible class=\"w-full\">\n            <AccordionItem v-for=\"entry in category.entries\" :key=\"entry.q\" :value=\"entry.q\">\n              <AccordionTrigger class=\"text-left font-medium\">{{ entry.q }}</AccordionTrigger>\n              <AccordionContent class=\"text-muted-foreground leading-relaxed\">{{ entry.a }}</AccordionContent>\n            </AccordionItem>\n          </Accordion>\n        </TabsContent>\n      </Tabs>\n\n      <Button variant=\"ghost\" class=\"mt-8\">Browse the full help centre</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/FaqCategorizedTabs.vue"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/accordion.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
  ]
}