{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog",
  "title": "Alert Dialog",
  "description": "A modal dialog that interrupts the user with important content and expects a response.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/alert-dialog.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Button, buttonVariants } from \"@/registry/optics/button\";\nimport { X } from \"lucide-react\";\n\nfunction AlertDialog({ ...props } = {}) {\n\treturn <DialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />;\n}\n\nfunction AlertDialogTrigger({ ...props } = {}) {\n\treturn (\n\t\t<DialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n\t);\n}\n\nfunction AlertDialogPortal({ ...props } = {}) {\n\treturn <DialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />;\n}\n\nfunction AlertDialogOverlay({ className = \"\", ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Backdrop\n\t\t\tdata-slot=\"alert-dialog-overlay\"\n\t\t\trender={\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogContent({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<AlertDialogPortal>\n\t\t\t<AlertDialogOverlay />\n\t\t\t<div className=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n\t\t\t\t<DialogPrimitive.Popup\n\t\t\t\t\tdata-slot=\"alert-dialog-content\"\n\t\t\t\t\trender={\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"bg-muted fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-3xl border p-2 shadow-lg duration-200 sm:max-w-lg transition-all data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:scale-95 data-starting-style:scale-95\",\n\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"bg-background grid w-full gap-8 rounded-2xl p-6 px-6 shadow-lg duration-200 sm:max-w-lg\">\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</AlertDialogPortal>\n\t);\n}\n\nfunction AlertDialogHeader({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-dialog-header\"\n\t\t\tclassName={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogFooter({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"alert-dialog-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogTitle({ className = \"\", ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Title\n\t\t\tdata-slot=\"alert-dialog-title\"\n\t\t\tclassName={cn(\"text-lg font-semibold\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogDescription({ className = \"\", ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Description\n\t\t\tdata-slot=\"alert-dialog-description\"\n\t\t\tclassName={cn(\"text-muted-foreground text-sm text-balance\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogAction({ className = \"\", ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Close\n\t\t\tclassName={cn(buttonVariants(), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogCancel({ className = \"\", ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Close\n\t\t\tclassName={cn(buttonVariants({ variant: \"raised\" }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction AlertDialogIcon({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<div className=\"w-full flex items-start justify-between -mt-2\">\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center justify-center gap-2.5 -ml-2\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\n\t\t\t<DialogPrimitive.Close\n\t\t\t\trender={\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tclassName=\"rounded-full squircle-none size-6 p-0 -mr-4 -mt-2\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<X className=\"!size-4\"></X>\n\t\t\t\t\t</Button>\n\t\t\t\t}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nAlertDialog.displayName = \"AlertDialog\";\nAlertDialogPortal.displayName = \"AlertDialogPortal\";\nAlertDialogOverlay.displayName = \"AlertDialogOverlay\";\nAlertDialogTrigger.displayName = \"AlertDialogTrigger\";\nAlertDialogContent.displayName = \"AlertDialogContent\";\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\nAlertDialogTitle.displayName = \"AlertDialogTitle\";\nAlertDialogDescription.displayName = \"AlertDialogDescription\";\nAlertDialogAction.displayName = \"AlertDialogAction\";\nAlertDialogCancel.displayName = \"AlertDialogCancel\";\nAlertDialogIcon.displayName = \"AlertDialogIcon\";\n\nexport {\n\tAlertDialog,\n\tAlertDialogPortal,\n\tAlertDialogOverlay,\n\tAlertDialogTrigger,\n\tAlertDialogContent,\n\tAlertDialogHeader,\n\tAlertDialogFooter,\n\tAlertDialogTitle,\n\tAlertDialogDescription,\n\tAlertDialogAction,\n\tAlertDialogCancel,\n\tAlertDialogIcon,\n};\n",
      "type": "registry:component",
      "target": "components/optics/alert-dialog.jsx"
    }
  ],
  "type": "registry:component"
}