{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "before-after-toggle",
  "title": "Before & After — Toggle",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/before-after-toggle/BeforeAfterToggle.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\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\nconst active = ref('before')\nconst current = computed(() => states.find((state) => state.id === active.value) ?? states[0])\n\nfunction onChange(value: unknown) {\n  if (typeof value === 'string' && value) active.value = value\n}\n</script>\n\n<template>\n  <section data-slot=\"before-after-toggle\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-3xl px-6 py-20 lg:py-28\">\n      <div class=\"flex flex-wrap items-end justify-between gap-6\">\n        <div>\n          <Badge variant=\"secondary\">Before and after</Badge>\n          <h2 class=\"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          :model-value=\"active\"\n          type=\"single\"\n          variant=\"outline\"\n          size=\"sm\"\n          aria-label=\"Show the state before or after\"\n          @update:model-value=\"onChange\"\n        >\n          <ToggleGroupItem v-for=\"state in states\" :key=\"state.id\" :value=\"state.id\">{{ state.label }}</ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n\n      <Card class=\"mt-8\">\n        <CardContent class=\"p-0\">\n          <div class=\"border-border flex items-center justify-between gap-3 border-b px-4 py-2.5\">\n            <span class=\"text-sm font-semibold\">{{ current.label }}</span>\n            <span class=\"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 class=\"divide-border min-h-[11rem] divide-y\">\n            <li v-for=\"row in current.rows\" :key=\"row.source\" class=\"flex items-center justify-between gap-4 px-4 py-4\">\n              <span class=\"text-sm\">{{ row.source }}</span>\n              <span\n                class=\"font-mono text-sm tabular-nums\"\n                :class=\"row.tone === 'on' ? 'text-success font-semibold' : 'text-muted-foreground'\"\n              >\n                {{ row.value }}\n              </span>\n            </li>\n          </ul>\n\n          <Separator />\n          <p class=\"text-muted-foreground px-4 py-3 text-xs leading-relaxed\">{{ current.changed }}</p>\n        </CardContent>\n      </Card>\n\n      <Button variant=\"ghost\" class=\"mt-6\">How certification works</Button>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/BeforeAfterToggle.vue"
    }
  ],
  "dependencies": [],
  "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/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"
  ]
}