{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "pricing-matrix-grouped",
  "title": "Pricing — Grouped Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/pricing-matrix-grouped/PricingMatrixGrouped.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Check, ChevronDown, Minus } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'\n\nconst plans = ['Team', 'Business', 'Enterprise']\n\nconst groups = [\n  {\n    id: 'modelling',\n    label: 'Modelling',\n    summary: 'Definitions, versioning, and review',\n    rows: [\n      { feature: 'Certified definitions', values: ['50', '500', 'Unlimited'] },\n      { feature: 'Version history', values: ['30 days', 'Unlimited', 'Unlimited'] },\n      { feature: 'Required review', values: [false, true, true] },\n      { feature: 'Period locking', values: [false, true, true] },\n    ],\n  },\n  {\n    id: 'access',\n    label: 'Access & identity',\n    summary: 'Who sees which rows',\n    rows: [\n      { feature: 'SSO (SAML)', values: [true, true, true] },\n      { feature: 'SCIM provisioning', values: [false, true, true] },\n      { feature: 'Row-level scope', values: [false, true, true] },\n      { feature: 'Customer-managed keys', values: [false, false, true] },\n    ],\n  },\n  {\n    id: 'ops',\n    label: 'Operations',\n    summary: 'Cost, alerting, and support',\n    rows: [\n      { feature: 'Query budgets', values: [false, true, true] },\n      { feature: 'Drift alerting', values: [false, true, true] },\n      { feature: 'Audit log export', values: [false, '90 days', 'Unlimited'] },\n      { feature: 'Named support engineer', values: [false, false, true] },\n    ],\n  },\n]\n\n// Opens on the first group only: a fully expanded matrix is the thing readers\n// bounce off, and every group is one click from open.\nconst open = ref<string[]>([groups[0].id])\n\nfunction toggle(id: string) {\n  open.value = open.value.includes(id) ? open.value.filter((entry) => entry !== id) : [...open.value, id]\n}\n</script>\n\n<template>\n  <section data-slot=\"pricing-matrix-grouped\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n      <Badge variant=\"secondary\">Compare plans</Badge>\n      <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Grouped, so it stays readable</h2>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <div\n            class=\"text-muted-foreground grid grid-cols-[1fr_repeat(3,5rem)] gap-2 px-4 py-3 text-xs font-medium sm:grid-cols-[1fr_repeat(3,7rem)]\"\n          >\n            <span>Capability</span>\n            <span v-for=\"plan in plans\" :key=\"plan\" class=\"text-center\">{{ plan }}</span>\n          </div>\n          <Separator />\n\n          <div v-for=\"group in groups\" :key=\"group.id\">\n            <button\n              type=\"button\"\n              class=\"hover:bg-muted focus-visible:ring-ring flex w-full items-center gap-3 px-4 py-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n              :aria-expanded=\"open.includes(group.id)\"\n              :aria-controls=\"`group-${group.id}`\"\n              @click=\"toggle(group.id)\"\n            >\n              <ChevronDown\n                class=\"text-muted-foreground size-4 shrink-0 transition-transform\"\n                :class=\"open.includes(group.id) ? '' : '-rotate-90'\"\n                aria-hidden=\"true\"\n              />\n              <span class=\"min-w-0\">\n                <span class=\"block text-sm font-medium\">{{ group.label }}</span>\n                <span class=\"text-muted-foreground block text-xs\">{{ group.summary }}</span>\n              </span>\n              <span class=\"text-muted-foreground ml-auto shrink-0 font-mono text-xs\">{{ group.rows.length }}</span>\n            </button>\n\n            <div v-show=\"open.includes(group.id)\" :id=\"`group-${group.id}`\">\n              <Table>\n                <TableBody>\n                  <TableRow v-for=\"row in group.rows\" :key=\"row.feature\">\n                    <TableCell class=\"pl-11 text-sm\">{{ row.feature }}</TableCell>\n                    <TableCell v-for=\"(value, index) in row.values\" :key=\"index\" class=\"w-20 text-center sm:w-28\">\n                      <template v-if=\"value === true\">\n                        <Check class=\"text-success mx-auto size-4\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Included</span>\n                      </template>\n                      <template v-else-if=\"value === false\">\n                        <Minus class=\"text-muted-foreground/50 mx-auto size-4\" aria-hidden=\"true\" />\n                        <span class=\"sr-only\">Not included</span>\n                      </template>\n                      <span v-else class=\"font-mono text-xs\">{{ value }}</span>\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n            <Separator />\n          </div>\n        </CardContent>\n      </Card>\n\n      <Button class=\"mt-6\">Start on Business</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/PricingMatrixGrouped.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Feature comparison matrix with collapsible capability groups, so a long plan comparison opens on the summary rows and expands only where the reader is looking.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "pricing"
}