{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delete-project",
  "type": "registry:ui",
  "title": "Delete Project Dialog",
  "description": "A responsive confirmation dialog for destructive actions with input validation - drawer on mobile, modal on desktop.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "input",
    "label",
    "https://revola.sameerjs.com/r/revola.json"
  ],
  "files": [
    {
      "path": "registry/revola/examples/origin-ui/alerts/delete-project.tsx",
      "content": "\"use client\";\r\n\r\nimport { useId, useState } from \"react\";\r\n\r\nimport { CircleAlertIcon } from \"lucide-react\";\r\n\r\nimport { Button } from \"@/components/ui/button\";\r\nimport { Input } from \"@/components/ui/input\";\r\nimport { Label } from \"@/components/ui/label\";\r\nimport {\r\n  ResponsiveDialog,\r\n  ResponsiveDialogClose,\r\n  ResponsiveDialogContent,\r\n  ResponsiveDialogDescription,\r\n  ResponsiveDialogFooter,\r\n  ResponsiveDialogHeader,\r\n  ResponsiveDialogTitle,\r\n  ResponsiveDialogTrigger,\r\n} from \"@/components/ui/revola\";\r\n\r\nconst PROJECT_NAME = \"Revola\";\r\nexport default function DeleteProjectDialog() {\r\n  const id = useId();\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n\r\n  return (\r\n    <ResponsiveDialog alert>\r\n      <ResponsiveDialogTrigger asChild>\r\n        <Button variant=\"outline\" className=\"h-12 rounded-full px-6 capitalize\">\r\n          Delete Project\r\n        </Button>\r\n      </ResponsiveDialogTrigger>\r\n      <ResponsiveDialogContent className=\"sm:max-w-[400px]\">\r\n        <div className=\"space-y-4 overflow-y-auto p-6 max-sm:pt-0\">\r\n          <div className=\"flex flex-col items-center gap-2\">\r\n            <div className=\"flex size-9 shrink-0 items-center justify-center rounded-full border\" aria-hidden=\"true\">\r\n              <CircleAlertIcon className=\"opacity-80\" size={16} />\r\n            </div>\r\n\r\n            <ResponsiveDialogHeader className=\"px-4 pb-4 sm:p-0 sm:text-center\">\r\n              <ResponsiveDialogTitle>Final confirmation</ResponsiveDialogTitle>\r\n              <ResponsiveDialogDescription>\r\n                This action cannot be undone. To confirm, please enter the project name{\" \"}\r\n                <span className=\"text-foreground\">Revola</span>.\r\n              </ResponsiveDialogDescription>\r\n            </ResponsiveDialogHeader>\r\n          </div>\r\n\r\n          <form className=\"space-y-5\">\r\n            <div className=\"space-y-2\">\r\n              <Label htmlFor={id}>Project name</Label>\r\n              <Input\r\n                id={id}\r\n                type=\"text\"\r\n                value={inputValue}\r\n                placeholder=\"Type Revola to confirm\"\r\n                onChange={(e) => setInputValue(e.target.value)}\r\n              />\r\n            </div>\r\n\r\n            <ResponsiveDialogFooter className=\"gap-4 sm:gap-2\">\r\n              <ResponsiveDialogClose asChild>\r\n                <Button type=\"button\" variant=\"outline\" className=\"flex-1\">\r\n                  Cancel\r\n                </Button>\r\n              </ResponsiveDialogClose>\r\n              <Button type=\"button\" className=\"flex-1\" disabled={inputValue !== PROJECT_NAME}>\r\n                Delete\r\n              </Button>\r\n            </ResponsiveDialogFooter>\r\n          </form>\r\n        </div>\r\n      </ResponsiveDialogContent>\r\n    </ResponsiveDialog>\r\n  );\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}