{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delete-account-2",
  "title": "Multi-Step",
  "description": "Multi-Step for Delete Account.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "progress",
    "select"
  ],
  "files": [
    {
      "path": "registry/intents/account/delete-account/delete-account-2.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { ArrowLeft, ArrowRight, Check } from 'lucide-react'\n\nimport { Button } from '@/components/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Progress } from '@/components/ui/progress'\nimport {\n  SelectGroup,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\nconst REASONS = [\n  { value: 'cost', label: 'Too expensive' },\n  { value: 'missing', label: 'Missing features' },\n  { value: 'switching', label: 'Switching to another tool' },\n  { value: 'other', label: 'Something else' },\n]\n\nconst CONSEQUENCES = [\n  'All projects and files are permanently removed',\n  'Your team loses access immediately',\n  'Active subscriptions are cancelled',\n]\n\nexport function DeleteAccount2() {\n  const [step, setStep] = useState(0)\n  const [reason, setReason] = useState('')\n  const [confirm, setConfirm] = useState('')\n\n  const canNext =\n    (step === 0 && reason !== '') ||\n    step === 1 ||\n    (step === 2 && confirm.trim() === 'delete my account')\n\n  return (\n    <Card>\n      <CardHeader>\n        <Progress value={((step + 1) / 3) * 100} className=\"mb-3 h-1.5\" />\n        <CardTitle>\n          {step === 0 && 'Why are you leaving?'}\n          {step === 1 && 'What happens next'}\n          {step === 2 && 'Confirm deletion'}\n        </CardTitle>\n        <CardDescription>Step {step + 1} of 3</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-5\">\n        {step === 0 && (\n          <div className=\"flex flex-col gap-2\">\n            <Label className=\"text-xs\">Reason</Label>\n            <Select\n              value={reason}\n              onValueChange={(value) => setReason(value ?? '')}\n            >\n              <SelectTrigger>\n                <SelectValue placeholder=\"Select a reason\" />\n              </SelectTrigger>\n              <SelectContent>\n                <SelectGroup>\n                  {REASONS.map((item) => (\n                    <SelectItem key={item.value} value={item.value}>\n                      {item.label}\n                    </SelectItem>\n                  ))}\n                </SelectGroup>\n              </SelectContent>\n            </Select>\n          </div>\n        )}\n\n        {step === 1 && (\n          <ul className=\"flex flex-col gap-3\">\n            {CONSEQUENCES.map((line) => (\n              <li key={line} className=\"flex items-start gap-2 text-sm\">\n                <Check className=\"text-destructive mt-0.5 size-4 shrink-0\" />\n                <span>{line}</span>\n              </li>\n            ))}\n          </ul>\n        )}\n\n        {step === 2 && (\n          <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"ms-confirm\" className=\"text-xs\">\n              Type \"delete my account\" to confirm\n            </Label>\n            <Input\n              id=\"ms-confirm\"\n              value={confirm}\n              onChange={(e) => setConfirm(e.target.value)}\n              placeholder=\"delete my account\"\n              autoComplete=\"off\"\n            />\n          </div>\n        )}\n\n        <div className=\"flex items-center justify-between gap-3\">\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => setStep((s) => Math.max(0, s - 1))}\n            disabled={step === 0}\n          >\n            <ArrowLeft className=\"size-4\" />\n            Back\n          </Button>\n          {step < 2 ? (\n            <Button\n              size=\"sm\"\n              onClick={() => setStep((s) => s + 1)}\n              disabled={!canNext}\n            >\n              Continue\n              <ArrowRight className=\"size-4\" />\n            </Button>\n          ) : (\n            <Button variant=\"destructive\" size=\"sm\" disabled={!canNext}>\n              Delete account\n            </Button>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/delete-account/delete-account-2.tsx"
    }
  ],
  "type": "registry:block"
}