{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "type": "registry:ui",
  "title": "Alert dialog",
  "description": "Shadcn style alert dialog on Base UI for confirmations that need an explicit answer. Modal backdrop, focus trap, title, description and an actions row.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/alert-dialog.tsx",
      "type": "registry:ui",
      "target": "components/ui/alert-dialog.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { AlertDialog as AD } from \"@base-ui/react/alert-dialog\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype AlertDialogProps = React.ComponentProps<typeof AD.Root>\n\n/** A modal confirmation for destructive or irreversible actions; renders a demo trigger and content when given no children. */\nfunction AlertDialog({ children, ...props }: AlertDialogProps) {\n  return (\n    <AD.Root data-slot=\"alert-dialog\" {...props}>\n      {children ?? <AlertDialogDemo />}\n    </AD.Root>\n  )\n}\nfunction AlertDialogTrigger(props: React.ComponentProps<typeof AD.Trigger>) {\n  return <AD.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n}\nfunction AlertDialogClose(props: React.ComponentProps<typeof AD.Close>) {\n  return <AD.Close data-slot=\"alert-dialog-close\" {...props} />\n}\nfunction AlertDialogContent({ className, children, ...props }: React.ComponentProps<typeof AD.Popup>) {\n  return (\n    <AD.Portal>\n      <AD.Backdrop className=\"fixed inset-0 z-50 bg-fg/40\" />\n      <AD.Popup\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2\",\n          \"rounded-xl border border-border bg-raised p-5 shadow-lg outline-none\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </AD.Popup>\n    </AD.Portal>\n  )\n}\nfunction AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AD.Title>) {\n  return <AD.Title className={cn(\"text-base font-medium text-fg\", className)} {...props} />\n}\nfunction AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AD.Description>) {\n  return <AD.Description className={cn(\"mt-2 text-sm text-fg-muted\", className)} {...props} />\n}\nfunction AlertDialogActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={cn(\"mt-5 flex justify-end gap-2\", className)} {...props} />\n}\n\n/** Default trigger and content shown when `AlertDialog` is rendered without children. */\nfunction AlertDialogDemo() {\n  return (\n    <>\n      <AlertDialogTrigger render={<Button variant=\"outline\" />}>Delete invoice</AlertDialogTrigger>\n      <AlertDialogContent>\n        <AlertDialogTitle>Delete invoice INV-2041?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This removes the $12,400 invoice for Northwind and its payment history from Lumen. This cannot be undone.\n        </AlertDialogDescription>\n        <AlertDialogActions>\n          <AlertDialogClose render={<Button variant=\"outline\" />}>Cancel</AlertDialogClose>\n          <AlertDialogClose render={<Button variant=\"destructive\" />}>Delete invoice</AlertDialogClose>\n        </AlertDialogActions>\n      </AlertDialogContent>\n    </>\n  )\n}\nexport { AlertDialog, AlertDialogTrigger, AlertDialogClose, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogActions }\nexport type { AlertDialogProps }\n"
    }
  ]
}