{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-matrix-grouped",
  "title": "Pricing — Grouped Matrix",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/pricing-matrix-grouped/PricingMatrixGrouped.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, ChevronDown, Minus } from 'lucide-react'\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  id: string\n  label: string\n  summary: string\n  rows: { feature: string; values: (boolean | string)[] }[]\n}[] = [\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\nexport function PricingMatrixGrouped() {\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.\n  const [open, setOpen] = useState<string[]>([groups[0].id])\n\n  const toggle = (id: string) =>\n    setOpen((current) => (current.includes(id) ? current.filter((entry) => entry !== id) : [...current, id]))\n\n  return (\n    <section data-slot=\"pricing-matrix-grouped\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <Badge variant=\"secondary\">Compare plans</Badge>\n        <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Grouped, so it stays readable</h2>\n\n        <Card className=\"mt-8\">\n          <CardContent className=\"p-0\">\n            <div className=\"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              <span>Capability</span>\n              {plans.map((plan) => (\n                <span key={plan} className=\"text-center\">\n                  {plan}\n                </span>\n              ))}\n            </div>\n            <Separator />\n\n            {groups.map((group) => (\n              <div key={group.id}>\n                <button\n                  type=\"button\"\n                  className=\"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                  onClick={() => toggle(group.id)}\n                >\n                  <ChevronDown\n                    className={`text-muted-foreground size-4 shrink-0 transition-transform ${\n                      open.includes(group.id) ? '' : '-rotate-90'\n                    }`}\n                    aria-hidden=\"true\"\n                  />\n                  <span className=\"min-w-0\">\n                    <span className=\"block text-sm font-medium\">{group.label}</span>\n                    <span className=\"text-muted-foreground block text-xs\">{group.summary}</span>\n                  </span>\n                  <span className=\"text-muted-foreground ml-auto shrink-0 font-mono text-xs\">{group.rows.length}</span>\n                </button>\n\n                {open.includes(group.id) && (\n                  <div id={`group-${group.id}`}>\n                    <Table>\n                      <TableBody>\n                        {group.rows.map((row) => (\n                          <TableRow key={row.feature}>\n                            <TableCell className=\"pl-11 text-sm\">{row.feature}</TableCell>\n                            {row.values.map((value, index) => (\n                              <TableCell key={index} className=\"w-20 text-center sm:w-28\">\n                                {value === true && (\n                                  <>\n                                    <Check className=\"text-success mx-auto size-4\" aria-hidden=\"true\" />\n                                    <span className=\"sr-only\">Included</span>\n                                  </>\n                                )}\n                                {value === false && (\n                                  <>\n                                    <Minus className=\"text-muted-foreground/50 mx-auto size-4\" aria-hidden=\"true\" />\n                                    <span className=\"sr-only\">Not included</span>\n                                  </>\n                                )}\n                                {typeof value === 'string' && <span className=\"font-mono text-xs\">{value}</span>}\n                              </TableCell>\n                            ))}\n                          </TableRow>\n                        ))}\n                      </TableBody>\n                    </Table>\n                  </div>\n                )}\n                <Separator />\n              </div>\n            ))}\n          </CardContent>\n        </Card>\n\n        <Button className=\"mt-6\">Start on Business</Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/PricingMatrixGrouped.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/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"
}