{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "before-after-toggle",
  "title": "Before & After — Toggle",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/before-after-toggle/BeforeAfterToggle.tsx",
      "content": "'use client'\n\nimport { useState } from '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 { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nconst states = [\n  {\n    id: 'before',\n    label: 'Before',\n    caption: 'Three dashboards, three revenue numbers',\n    changed: 'Each team maintained its own formula, and none of them agreed at close.',\n    rows: [\n      { source: 'Exec summary', value: '£4,182,400', tone: 'off' },\n      { source: 'Finance close pack', value: '£4,140,900', tone: 'off' },\n      { source: 'Board deck', value: '£4,206,150', tone: 'off' },\n    ],\n  },\n  {\n    id: 'after',\n    label: 'After',\n    caption: 'One certified definition',\n    changed: 'All three resolve the same definition, so the reconciliation step disappeared.',\n    rows: [\n      { source: 'Exec summary', value: '£4,140,900', tone: 'on' },\n      { source: 'Finance close pack', value: '£4,140,900', tone: 'on' },\n      { source: 'Board deck', value: '£4,140,900', tone: 'on' },\n    ],\n  },\n]\n\nexport function BeforeAfterToggle() {\n  const [active, setActive] = useState('before')\n  const current = states.find((state) => state.id === active) ?? states[0]\n\n  return (\n    <section data-slot=\"before-after-toggle\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-3xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div>\n            <Badge variant=\"secondary\">Before and after</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">One number, three places</h2>\n          </div>\n\n          {/* The control keeps its position across switches: moving it would make\n              the comparison harder than just showing both. */}\n          <ToggleGroup\n            value={active}\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            aria-label=\"Show the state before or after\"\n            onValueChange={(value: string) => value && setActive(value)}\n          >\n            {states.map((state) => (\n              <ToggleGroupItem key={state.id} value={state.id}>\n                {state.label}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n\n        <Card className=\"mt-8\">\n          <CardContent className=\"p-0\">\n            <div className=\"border-border flex items-center justify-between gap-3 border-b px-4 py-2.5\">\n              <span className=\"text-sm font-semibold\">{current.label}</span>\n              <span className=\"text-muted-foreground text-xs\">{current.caption}</span>\n            </div>\n\n            {/* Fixed height across both states so toggling never resizes the card. */}\n            <ul className=\"divide-border min-h-[11rem] divide-y\">\n              {current.rows.map((row) => (\n                <li key={row.source} className=\"flex items-center justify-between gap-4 px-4 py-4\">\n                  <span className=\"text-sm\">{row.source}</span>\n                  <span\n                    className={`font-mono text-sm tabular-nums ${\n                      row.tone === 'on' ? 'text-success font-semibold' : 'text-muted-foreground'\n                    }`}\n                  >\n                    {row.value}\n                  </span>\n                </li>\n              ))}\n            </ul>\n\n            <Separator />\n            <p className=\"text-muted-foreground px-4 py-3 text-xs leading-relaxed\">{current.changed}</p>\n          </CardContent>\n        </Card>\n\n        <Button variant=\"ghost\" className=\"mt-6\">\n          How certification works\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/BeforeAfterToggle.tsx"
    }
  ],
  "dependencies": [],
  "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/toggle-group.json"
  ],
  "description": "Single panel toggling between the old and new state of the same screen, with a caption naming what changed and a control that keeps its position between switches.",
  "categories": [
    "marketing"
  ]
}