{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog-2",
  "type": "registry:component",
  "title": "Dialog 2",
  "description": "Dialog 2. A dialog component for displaying important information or prompts.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "alert-dialog",
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/dialog-2.tsx",
      "type": "registry:component",
      "content": "import { InfoIcon } from 'lucide-react';\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/components/base-ui/alert-dialog';\nimport { Button } from '@/components/base-ui/button';\nimport type { FC } from 'react';\n\nconst Dialog2: FC = () => {\n  return (\n    <AlertDialog>\n      <AlertDialogTrigger>\n        <Button\n          variant=\"outline\"\n          className=\"rounded-xl border border-zinc-200 bg-zinc-50 px-6 py-2 font-medium text-zinc-800 shadow-sm transition-all hover:bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800\"\n        >\n          Alert Dialog (With Icon)\n        </Button>\n      </AlertDialogTrigger>\n      <AlertDialogContent className=\"border-border/40 dark:border-border/60 rounded-2xl border bg-white p-6 shadow-lg dark:bg-neutral-900\">\n        <AlertDialogHeader className=\"place-items-start text-left\">\n          <div className=\"mb-3 flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30\">\n            <InfoIcon className=\"size-4 text-blue-600 dark:text-blue-400\" />\n          </div>\n          <AlertDialogTitle className=\"text-base font-semibold text-neutral-900 dark:text-neutral-100\">\n            Heads up!\n          </AlertDialogTitle>\n          <AlertDialogDescription className=\"text-sm text-neutral-600 dark:text-neutral-300\">\n            This is a minimal dialog for simple confirmations or information.\n            Please proceed if you understand.\n            <br />\n            <br />\n            <span className=\"mt-2 block\">\n              If you have any questions, feel free to contact support at{' '}\n              <a\n                href=\"mailto:support@example.com\"\n                className=\"text-blue-600 underline dark:text-blue-400\"\n              >\n                support@example.com\n              </a>\n              .\n            </span>\n            <span className=\"mt-2 block\">\n              Note: Your changes will not be saved unless you confirm this\n              action.\n            </span>\n          </AlertDialogDescription>\n        </AlertDialogHeader>\n        <AlertDialogFooter className=\"mx-0 justify-end bg-transparent px-0 pt-4 pb-2\">\n          <AlertDialogCancel className=\"border-border/30 dark:border-border/50 rounded-xl border bg-neutral-100 text-neutral-700 transition hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700\">\n            Cancel\n          </AlertDialogCancel>\n          <AlertDialogAction className=\"rounded-xl bg-blue-600! px-6 py-2 font-semibold text-white! shadow transition hover:bg-blue-700! dark:bg-blue-500! dark:hover:bg-blue-600!\">\n            OK\n          </AlertDialogAction>\n        </AlertDialogFooter>\n      </AlertDialogContent>\n    </AlertDialog>\n  );\n};\n\nexport default Dialog2;\n"
    }
  ]
}