{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cancel-flow",
  "type": "registry:ui",
  "title": "Cancel flow",
  "description": "Two step subscription cancellation flow: ask for a reason with radio options, then confirm with a destructive button or go back. Tells users what they keep.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/cancel-flow.tsx",
      "type": "registry:ui",
      "target": "components/ui/cancel-flow.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CancelFlow({ className }: { className?: string }) {\n  const [step, setStep] = React.useState<\"why\" | \"confirm\">(\"why\")\n  return (\n    <div data-slot=\"cancel-flow\" className={cn(\"space-y-4 rounded-xl border border-border bg-surface p-5 shadow-highlight\", className)}>\n      <h3 className=\"text-sm font-medium text-fg\">Cancel Premium</h3>\n      {step === \"why\" ? (\n        <>\n          <p className=\"text-sm text-fg-muted\">Free UI stays. Kinetic heroes and the showcase soft-lock after the period ends.</p>\n          <ul className=\"space-y-2 text-sm text-fg\">\n            {[\"Too expensive\", \"Not using motion\", \"Switching kits\"].map((r) => (\n              <li key={r}><label className=\"flex items-center gap-2\"><input type=\"radio\" name=\"why\" className=\"accent-[var(--accent)]\" /> {r}</label></li>\n            ))}\n          </ul>\n          <Button size=\"sm\" onClick={() => setStep(\"confirm\")}>Continue</Button>\n        </>\n      ) : (\n        <>\n          <p className=\"text-sm text-fg-muted\">Confirm cancellation. You keep Premium until the end of the billing period.</p>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\" variant=\"destructive\">Confirm cancel</Button>\n            <Button size=\"sm\" variant=\"outline\" onClick={() => setStep(\"why\")}>Back</Button>\n          </div>\n        </>\n      )}\n    </div>\n  )\n}\nexport { CancelFlow }\n"
    }
  ]
}