{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "type": "registry:ui",
  "title": "Alert Dialog",
  "description": "A confirmation the user must answer, for destructive or important actions. Clicking outside does not close it.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "https://blank.vageshwar.dev/r/theme.json",
    "https://blank.vageshwar.dev/r/button.json",
    "https://blank.vageshwar.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "ui/alert-dialog.tsx",
      "type": "registry:ui",
      "content": "// BlankUI: alert-dialog. Managed by BlankUI. Read alert-dialog.md before editing. Title and description are required, on purpose.\nimport type { ComponentProps, ReactNode } from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\nimport { buttonVariants } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\n/**\n * A confirmation that the user must answer before going on, for example before deleting something.\n * Clicking outside does not close it.\n *\n * @example\n * <AlertDialog>\n *   <AlertDialogTrigger asChild>\n *     <Button variant=\"destructive\">Delete project</Button>\n *   </AlertDialogTrigger>\n *   <AlertDialogContent title=\"Delete this project?\" description=\"This removes all its data and cannot be undone.\">\n *     <AlertDialogFooter>\n *       <AlertDialogCancel>Cancel</AlertDialogCancel>\n *       <AlertDialogAction destructive onClick={deleteProject}>Delete</AlertDialogAction>\n *     </AlertDialogFooter>\n *   </AlertDialogContent>\n * </AlertDialog>\n */\nexport function AlertDialog(props: ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\n/** Opens the alert dialog. Use `asChild` with a Button. */\nexport function AlertDialogTrigger(props: ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n}\n\nexport interface AlertDialogContentProps extends Omit<\n  ComponentProps<typeof AlertDialogPrimitive.Content>,\n  \"title\"\n> {\n  /** Required. The question, for example \"Delete this project?\". */\n  title: ReactNode\n  /** Required. What happens if the user confirms. */\n  description: ReactNode\n}\n\n/** The confirmation window. Renders the title and description for you. */\nexport function AlertDialogContent({\n  title,\n  description,\n  className,\n  children,\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPrimitive.Portal>\n      <AlertDialogPrimitive.Overlay\n        data-slot=\"alert-dialog-overlay\"\n        className=\"fixed inset-0 z-50 bg-overlay motion-safe:data-[state=open]:animate-fade-in\"\n      />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"fixed inset-x-4 top-1/2 z-50 mx-auto flex max-w-md -translate-y-1/2 flex-col gap-4 rounded-lg border bg-surface-raised p-6 text-foreground shadow-lg motion-safe:data-[state=open]:animate-scale-in\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex flex-col gap-1.5\">\n          <AlertDialogPrimitive.Title className=\"font-heading text-lg leading-tight font-semibold\">\n            {title}\n          </AlertDialogPrimitive.Title>\n          <AlertDialogPrimitive.Description className=\"text-sm text-muted-foreground\">\n            {description}\n          </AlertDialogPrimitive.Description>\n        </div>\n        {children}\n      </AlertDialogPrimitive.Content>\n    </AlertDialogPrimitive.Portal>\n  )\n}\n\n/** Holds Cancel and the action. The action goes last. */\nexport function AlertDialogFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  )\n}\n\nexport interface AlertDialogActionProps extends ComponentProps<typeof AlertDialogPrimitive.Action> {\n  /** Use the destructive style, for delete and other actions that cannot be undone. */\n  destructive?: boolean\n}\n\n/** Confirms and closes. */\nexport function AlertDialogAction({\n  destructive = false,\n  className,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <AlertDialogPrimitive.Action\n      data-slot=\"alert-dialog-action\"\n      className={cn(\n        buttonVariants({ variant: destructive ? \"destructive\" : \"default\" }),\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** Closes without doing anything. Gets focus when the dialog opens. */\nexport function AlertDialogCancel({\n  className,\n  ...props\n}: ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  )\n}\n"
    },
    {
      "path": "ui/alert-dialog.md",
      "type": "registry:ui",
      "content": "---\nname: alert-dialog\ntitle: Alert Dialog\ndescription: A confirmation the user must answer, for destructive or important actions. Clicking outside does not close it.\ncategory: overlay\nwhenToUse:\n  - Confirming a delete or another action that cannot be undone.\n  - Warning about losing unsaved changes.\nwhenNotToUse:\n  - when: A task with form fields.\n    use: dialog\n  - when: The action can be undone easily.\n    use: toast\nrelated: [dialog, button, toast]\nrequiredParts:\n  [\n    AlertDialog,\n    AlertDialogTrigger,\n    AlertDialogContent,\n    AlertDialogFooter,\n    AlertDialogAction,\n    AlertDialogCancel,\n  ]\nantiPatterns:\n  - avoid: \"window.confirm('Are you sure?')\"\n    instead: \"<AlertDialog>\"\n  - avoid: '<AlertDialogAction className=\"bg-destructive\">'\n    instead: \"<AlertDialogAction destructive>\"\n  - avoid: 'A vague title like \"Are you sure?\"'\n    instead: 'Name the action: \"Delete this project?\"'\n---\n\n# Alert Dialog\n\n`title` and `description` are both required. Cancel gets focus when it opens, so pressing Enter by accident does not confirm.\n\n## Import\n\n```tsx\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogFooter,\n  AlertDialogTrigger,\n} from \"@/components/ui/alert-dialog\"\n```\n\n## Example\n\n```tsx\n<AlertDialog>\n  <AlertDialogTrigger asChild>\n    <Button variant=\"destructive\">Delete project</Button>\n  </AlertDialogTrigger>\n  <AlertDialogContent\n    title=\"Delete this project?\"\n    description=\"All files and settings will be removed. This cannot be undone.\"\n  >\n    <AlertDialogFooter>\n      <AlertDialogCancel>Cancel</AlertDialogCancel>\n      <AlertDialogAction destructive onClick={deleteProject}>\n        Delete\n      </AlertDialogAction>\n    </AlertDialogFooter>\n  </AlertDialogContent>\n</AlertDialog>\n```\n"
    }
  ],
  "docs": "Read components/ui/alert-dialog.md before using Alert Dialog. Docs: https://blank.vageshwar.dev/docs/alert-dialog",
  "meta": {
    "category": "overlay",
    "requiredParts": [
      "AlertDialog",
      "AlertDialogTrigger",
      "AlertDialogContent",
      "AlertDialogFooter",
      "AlertDialogAction",
      "AlertDialogCancel"
    ],
    "related": [
      "dialog",
      "button",
      "toast"
    ]
  }
}