{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "alert-dialog-tailwind",
  "type": "registry:item",
  "title": "Alert Dialog (Tailwind)",
  "description": "A modal dialog that interrupts the user with important content.",
  "files": [
    {
      "path": "registry/brook/tailwind/ui/alert-dialog.tsx",
      "content": "\"use client\";\n\nimport { AlertDialog } from \"@base-ui/react/alert-dialog\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nfunction AlertDialogRoot({ ...props }: AlertDialog.Root.Props) {\n  return <AlertDialog.Root {...props} />;\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props) {\n  return <AlertDialog.Trigger data-slot=\"alert-dialog-trigger\" nativeButton {...props} />;\n}\n\nconst AlertDialogPortal = AlertDialog.Portal;\n\nfunction AlertDialogBackdrop({ className, ...props }: AlertDialog.Backdrop.Props) {\n  return (\n    <AlertDialog.Backdrop\n      className={cn(\n        \"fixed inset-0 z-[var(--dialog-z)] bg-[var(--dialog-overlay)] transition-opacity duration-150\",\n        \"data-[ending-style]:opacity-0 data-[starting-style]:opacity-0\",\n        className\n      )}\n      data-slot=\"alert-dialog-backdrop\"\n      {...props}\n    />\n  );\n}\n\nconst popupStyles = cn(\n  \"fixed top-1/2 left-1/2 z-[101] grid max-h-[85vh] w-full max-w-[32rem] overflow-y-auto\",\n  \"gap-4 rounded-[var(--radius)] border-none p-6\",\n  \"shadow-[0_0_0_1px_oklch(from_var(--border)_l_c_h_/_0.5),var(--shadow-border-stack)]\",\n  \"-translate-x-1/2 -translate-y-1/2 bg-[var(--mix-card-5-bg)]\",\n  \"transition-all duration-150\",\n  \"data-[starting-style]:-translate-x-1/2 data-[starting-style]:-translate-y-1/2 data-[starting-style]:scale-95 data-[starting-style]:opacity-0\",\n  \"data-[ending-style]:-translate-x-1/2 data-[ending-style]:-translate-y-1/2 data-[ending-style]:scale-95 data-[ending-style]:opacity-0\",\n  \"max-sm:-translate-y-1/2 max-sm:top-1/2 max-sm:right-4 max-sm:left-4 max-sm:w-[calc(100vw-2rem)] max-sm:max-w-none max-sm:translate-x-0\",\n  \"max-sm:data-[starting-style]:-translate-y-1/2 max-sm:data-[starting-style]:scale-90 max-sm:data-[starting-style]:opacity-0\",\n  \"max-sm:data-[ending-style]:-translate-y-1/2 max-sm:data-[ending-style]:scale-90 max-sm:data-[ending-style]:opacity-0\"\n);\n\nfunction AlertDialogPopup({ className, children, ...props }: AlertDialog.Popup.Props) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialog.Popup className={cn(popupStyles, className)} data-slot=\"alert-dialog-popup\" {...props}>\n        {children}\n      </AlertDialog.Popup>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogContent({ className, children, ...props }: AlertDialog.Popup.Props) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogBackdrop />\n      <AlertDialog.Popup className={cn(popupStyles, className)} data-slot=\"alert-dialog-popup\" {...props}>\n        {children}\n      </AlertDialog.Popup>\n    </AlertDialogPortal>\n  );\n}\n\nfunction AlertDialogTitle({ className, ...props }: AlertDialog.Title.Props) {\n  return (\n    <AlertDialog.Title\n      className={cn(\"m-0 font-semibold text-foreground text-lg leading-none tracking-tight\", className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogDescription({ className, ...props }: AlertDialog.Description.Props) {\n  return (\n    <AlertDialog.Description\n      className={cn(\"m-0 text-secondary-foreground text-sm leading-[1.5]\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogClose({ ...props }: AlertDialog.Close.Props) {\n  return <AlertDialog.Close data-slot=\"alert-dialog-close\" nativeButton {...props} />;\n}\n\nconst AlertDialogOverlay = AlertDialogBackdrop;\n\nfunction AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-2 text-left [&_h2]:m-0 [&_p]:m-0\", className)}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  );\n}\n\nfunction AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col-reverse gap-2\", \"sm:flex-row sm:justify-end\", className)}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  );\n}\n\nexport {\n  AlertDialogRoot as AlertDialog,\n  AlertDialogClose,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPopup,\n  AlertDialogPortal,\n  AlertDialogRoot,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n};\n",
      "type": "registry:file",
      "target": "~/components/ui/alert-dialog/alert-dialog.tsx"
    }
  ]
}